🔨 执行日志.

orion-ops-ui/src/views/exec/exec-command/components/log-panel-view.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="container">
+    <div v-show="current === host.id"
+         v-for="host in command.hosts"
+         :key="host.id"
+         class="log-view">
+      <!-- 面板头部 -->
+      <div class="log-header">
+        header
+      </div>
+      <!-- 日志面板 -->
+      <div class="log-wrapper">
+        <div class="log-appender"
+             :ref="e => addRef(host.id, e) as unknown as VNodeRef" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'logPanelView'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { VNodeRef } from 'vue';
+  import type { ExecCommandResponse, ExecCommandHostResponse } from '@/api/exec/exec';
+  import type { LogDomRef, ILogAppender } from '@/components/view/log-appender/appender.const';
+  import { nextTick, ref } from 'vue';
+  import LogAppender from '@/components/view/log-appender/log-appender';
+  import 'xterm/css/xterm.css';
+
+  const props = defineProps<{
+    current: number;
+    command: ExecCommandResponse;
+  }>();
+
+  const logRefs = ref<Array<LogDomRef>>([]);
+  const appender = ref<ILogAppender>();
+
+  // 打开
+  const open = () => {
+    nextTick(async () => {
+      appender.value = new LogAppender({ execId: props.command.id });
+      // 初始化
+      await appender.value.init(logRefs.value);
+    });
+  };
+
+  // 关闭客户端
+  const closeClient = () => {
+    appender.value?.closeClient();
+  };
+
+  // 关闭全部
+  const closeAll = () => {
+    appender.value?.close();
+  };
+
+  defineExpose({ open, closeClient, closeAll });
+
+  // 添加 ref
+  const addRef = (id: number, el: HTMLElement) => {
+    nextTick(() => {
+      logRefs.value.push({ id, el });
+    });
+  };
+
+</script>
+
+<style lang="less" scoped>
+  @header-height: 38px;
+  .log-view {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .log-header {
+    width: 100%;
+    height: @header-height;
+    background: green;
+  }
+
+  .log-wrapper {
+    width: 100%;
+    height: calc(100% - @header-height);
+    position: relative;
+    background: #212529;
+    padding: 4px 0 0 4px;
+
+    .log-appender {
+      width: 100%;
+      height: 100%;
+
+      ::-webkit-scrollbar-track {
+        display: none;
+      }
+    }
+  }
+</style>

orion-ops-ui/src/views/exec/exec-command/components/log-panel.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="log-panel-container">
+  <div class="log-panel-container" v-if="command">
     <!-- 执行主机 -->
     <log-panel-host class="host-container"
                     :current="currentHostExecId"
                     :hosts="command.hosts"
                     @selected="selectedHost"
-                    @back="back" />
+                    @back="emits('back')" />
     <!-- 日志容器 -->
-    <div class="log-container">
-    </div>
+    <log-panel-view ref="logContainer"
+                    class="log-container"
+                    :current="currentHostExecId"
+                    :command="command" />
   </div>
 </template>
 
@@ -20,81 +22,85 @@
 
 <script lang="ts" setup>
   import type { ExecCommandResponse } from '@/api/exec/exec';
-  import { ref } from 'vue';
-  import 'xterm/css/xterm.css';
+  import { onUnmounted, ref, nextTick } from 'vue';
+  import { getExecLogStatus } from '@/api/exec/exec-log';
+  import { execStatus } from '@/views/exec/exec-log/types/const';
   import LogPanelHost from './log-panel-host.vue';
+  import LogPanelView from './log-panel-view.vue';
 
   const emits = defineEmits(['back']);
 
-  const currentHostExecId = ref(1);
-  const command = ref<ExecCommandResponse>({
-    id: 50,
-    hosts: [{
-      id: 76,
-      hostId: 1,
-      hostName: 'main-11',
-      hostAddress: '192.412.53.2',
-      status: 'WAITING'
-    }, {
-      id: 77,
-      hostId: 2,
-      hostName: 'main-22',
-      hostAddress: '192.412.53.2',
-      status: 'RUNNING'
-    }, {
-      id: 78,
-      hostId: 3,
-      hostName: 'main-33',
-      hostAddress: '192.412.53.2',
-      status: 'COMPLETED'
-    }, {
-      id: 79,
-      hostId: 4,
-      hostName: 'main-44',
-      hostAddress: '192.412.53.2',
-      status: 'FAILED'
-    }, {
-      id: 80,
-      hostId: 5,
-      hostName: 'main-55',
-      hostAddress: '192.412.53.2',
-      status: 'INTERRUPTED'
-    }]
-  } as ExecCommandResponse);
+  const logContainer = ref();
+  const currentHostExecId = ref();
+  const intervalId = ref();
+  const command = ref<ExecCommandResponse>();
 
   // 打开
   const open = (record: ExecCommandResponse) => {
     command.value = record;
     currentHostExecId.value = record.hosts[0].id;
+    // 注册状态轮询
+    intervalId.value = setInterval(fetchTaskStatus, 5000);
     // 打开日志
-    openLog();
+    nextTick(() => {
+      logContainer.value?.open();
+    });
+  };
+
+  // 加载状态
+  const fetchTaskStatus = async () => {
+    if (!command.value) {
+      return;
+    }
+    // 加载状态
+    const { data: { logList, hostList } } = await getExecLogStatus([command.value.id]);
+    if (logList.length) {
+      command.value.status = logList[0].status;
+      command.value.startTime = logList[0].startTime;
+      command.value.finishTime = logList[0].finishTime;
+    }
+    // 设置主机状态
+    for (let host of command.value.hosts) {
+      const hostStatus = hostList.find(s => s.id === host.id);
+      if (hostStatus) {
+        host.status = hostStatus.status;
+        host.startTime = hostStatus.startTime;
+        host.finishTime = hostStatus.finishTime;
+        host.exitStatus = hostStatus.exitStatus;
+        host.errorMessage = hostStatus.errorMessage;
+      }
+    }
+    // 已完成跳过
+    if (command.value.status === execStatus.COMPLETED ||
+      command.value.status === execStatus.FAILED) {
+      closeClient();
+    }
   };
 
   defineExpose({ open });
 
-  // 打开日志
-  const openLog = () => {
-
-  };
-
   // 选中主机
   const selectedHost = (hostId: number) => {
     currentHostExecId.value = hostId;
   };
 
-  // 返回
-  const back = () => {
-    emits('back');
-    // 清理
-    clear();
+  // 关闭连接
+  const closeClient = () => {
+    // 关闭日志
+    logContainer.value?.closeClient();
+    // 关闭状态轮询
+    clearInterval(intervalId.value);
   };
 
-  // 清理
-  const clear = () => {
-
+  // 清理并且关闭
+  const closeAll = () => {
+    // 关闭日志
+    logContainer.value?.closeAll();
+    // 关闭状态轮询
+    clearInterval(intervalId.value);
   };
 
-  // TODO pull status
+  onUnmounted(closeAll);
 
 </script>
 

orion-ops-ui/src/views/exec/exec-command/index.vue

@@ -18,14 +18,14 @@
 
 <script lang="ts" setup>
   import type { ExecCommandResponse } from '@/api/exec/exec';
-  import { onMounted, ref } from 'vue';
+  import { nextTick, onMounted, ref } from 'vue';
   import useVisible from '@/hooks/visible';
   import { useDictStore } from '@/store';
   import { dictKeys } from '@/views/exec/exec-log/types/const';
   import ExecPanel from './components/exec-panel.vue';
   import LogPanel from './components/log-panel.vue';
 
-  const { visible: logVisible, setVisible: setLogVisible } = useVisible(true);
+  const { visible: logVisible, setVisible: setLogVisible } = useVisible();
   const { loadKeys } = useDictStore();
 
   const log = ref();
@@ -33,7 +33,9 @@
   // 打开日志
   const openLog = (record: ExecCommandResponse) => {
     setLogVisible(true);
-    log.value.open(record);
+    nextTick(() => {
+      log.value.open(record);
+    });
   };
 
   // 加载字典值
@@ -41,6 +43,44 @@
     await loadKeys(dictKeys);
   });
 
+  onMounted(() => {
+    openLog({
+      id: 65,
+      hosts: [
+        {
+          id: 103,
+          hostId: 5,
+          hostName: 'main-55',
+          hostAddress: '192.412.53.2',
+          status: 'INTERRUPTED'
+        }, {
+          id: 76,
+          hostId: 1,
+          hostName: 'main-11',
+          hostAddress: '192.412.53.2',
+          status: 'WAITING'
+        }, {
+          id: 77,
+          hostId: 2,
+          hostName: 'main-22',
+          hostAddress: '192.412.53.2',
+          status: 'RUNNING'
+        }, {
+          id: 78,
+          hostId: 3,
+          hostName: 'main-33',
+          hostAddress: '192.412.53.2',
+          status: 'COMPLETED'
+        }, {
+          id: 79,
+          hostId: 4,
+          hostName: 'main-44',
+          hostAddress: '192.412.53.2',
+          status: 'FAILED'
+        },]
+    } as ExecCommandResponse);
+  });
+
 </script>
 
 <style lang="less" scoped>