🔨 执行日志.

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/controller/ExecController.http

@@ -8,7 +8,7 @@ Authorization: {{token}}
   "timeout": 10,
   "command": "echo 这是日志@{{ hostAddress }}\nsleep 1\necho @{{ hostName }}",
   "parameterSchema": "[]",
-  "hostIdList": [1,7]
+  "hostIdList": [1]
 }
 
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/controller/ExecController.java

@@ -77,7 +77,7 @@ public class ExecController {
     }
 
     @PostMapping("/tail-log")
-    @Operation(summary = "查看批量执行日志")
+    @Operation(summary = "查看执行日志")
     @PreAuthorize("@ss.hasAnyPermission('asset:exec:exec-command', 'asset:exec-log:query')")
     public String getExecLogTailToken(@Validated @RequestBody ExecLogTailRequest request) {
         return execService.getExecLogTailToken(request);
@@ -85,9 +85,9 @@ public class ExecController {
 
     @OperatorLog(ExecOperatorType.DOWNLOAD_HOST_LOG)
     @GetMapping("/download-log")
-    @Operation(summary = "下载执行日志文件")
+    @Operation(summary = "下载执行日志")
     @PreAuthorize("@ss.hasAnyPermission('asset:exec:exec-command', 'asset:exec-log:query')")
-    public void downloadLogFile(@RequestParam("id") Long id, HttpServletResponse response) {
+    public void downloadExecLogFile(@RequestParam("id") Long id, HttpServletResponse response) {
         execService.downloadLogFile(id, response);
     }
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecCommandVO.java

@@ -26,6 +26,9 @@ public class ExecCommandVO implements Serializable {
     @Schema(description = "id")
     private Long id;
 
+    @Schema(description = "执行状态")
+    private String status;
+
     @Schema(description = "主机 id 映射")
     private List<ExecCommandHostVO> hosts;
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/handler/host/exec/command/handler/ExecCommandHandler.java

@@ -152,6 +152,8 @@ public class ExecCommandHandler implements IExecCommandHandler {
         log.info("ExecCommandHandler.updateStatus finish id: {}, effect: {}", id, effect);
     }
 
+    // TODO timeout
+
     @Override
     public void write(String msg) {
         this.executor.write(msg);

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecServiceImpl.java

@@ -167,6 +167,7 @@ public class ExecServiceImpl implements ExecService {
                 .collect(Collectors.toList());
         return ExecCommandVO.builder()
                 .id(execId)
+                .status(execLog.getStatus())
                 .hosts(hostResult)
                 .build();
     }

orion-ops-ui/src/api/exec/exec.ts

@@ -9,7 +9,7 @@ export interface ExecCommandRequest {
   timeout?: number;
   command?: string;
   parameterSchema?: string;
-  hostIdList?: number[];
+  hostIdList?: Array<number>;
 }
 
 /**
@@ -20,11 +20,22 @@ export interface ExecInterruptRequest {
   hostLogId?: number;
 }
 
+/**
+ * 中断命令请求
+ */
+export interface ExecTailRequest {
+  execId?: number;
+  hostExecIdList?: Array<number>;
+}
+
 /**
  * 执行命令响应
  */
 export interface ExecCommandResponse {
   id: number;
+  status: string;
+  startTime: number;
+  finishTime: number;
   hosts: Array<ExecCommandHostResponse>;
 }
 
@@ -70,3 +81,17 @@ export function interruptExec(request: ExecInterruptRequest) {
 export function interruptHostExec(request: ExecInterruptRequest) {
   return axios.put('/asset/exec/interrupt-host', request);
 }
+
+/**
+ * 查看执行日志
+ */
+export function getExecLogTailToken(request: ExecTailRequest) {
+  return axios.post<string>('/asset/exec/tail-log', request);
+}
+
+/**
+ * 下载执行日志文件
+ */
+export function downloadExecLogFile(id: number) {
+  return axios.get<Blob>('/asset/exec/download-log', { unwrap: true, params: { id } });
+}

orion-ops-ui/src/components/view/log-appender/appender.const.ts

@@ -0,0 +1,61 @@
+import type { IDisposable, ITerminalOptions } from 'xterm';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { SearchAddon } from 'xterm-addon-search';
+import { CanvasAddon } from 'xterm-addon-canvas';
+
+// appender 配置
+export const AppenderOption: ITerminalOptions = {
+  theme: {
+    foreground: '#FFFFFF',
+    background: '#212529',
+    selectionBackground: '#B5D5FF',
+  },
+  rightClickSelectsWord: true,
+  disableStdin: true,
+  cursorStyle: 'bar',
+  cursorBlink: false,
+  fastScrollModifier: 'alt',
+  fontSize: 14,
+  lineHeight: 1.08,
+  convertEol: true,
+};
+
+// dom 引用
+export interface LogDomRef {
+  id: number;
+  el: HTMLElement;
+}
+
+// appender 配置
+export interface LogAppenderConf {
+  id: number;
+  el: HTMLElement;
+  terminal: Terminal;
+  addons: LogAddons;
+}
+
+// appender 插件
+export interface LogAddons extends Record<string, IDisposable> {
+  fit: FitAddon;
+  canvas: CanvasAddon;
+  search: SearchAddon;
+}
+
+// 执行日志 appender 定义
+export interface ILogAppender {
+  // 初始化
+  init(refs: Array<LogDomRef>): Promise<void>;
+
+  // 自适应
+  fit(): void;
+
+  // 关闭 client
+  closeClient(): void;
+
+  // 关闭 view
+  closeView(): void;
+
+  // 关闭
+  close(): void;
+}

orion-ops-ui/src/components/view/log-appender/log-appender.ts

@@ -0,0 +1,148 @@
+import type { ExecTailRequest } from '@/api/exec/exec';
+import { getExecLogTailToken } from '@/api/exec/exec';
+import type { ILogAppender, LogAddons, LogAppenderConf, LogDomRef } from './appender.const';
+import { AppenderOption } from './appender.const';
+import { Terminal } from 'xterm';
+import { webSocketBaseUrl } from '@/utils/env';
+import { Message } from '@arco-design/web-vue';
+import { createWebSocket } from '@/utils';
+import { FitAddon } from 'xterm-addon-fit';
+import { SearchAddon } from 'xterm-addon-search';
+import { CanvasAddon } from 'xterm-addon-canvas';
+
+// todo ping
+// todo SEARCH addon
+// todo font-size totop copy tobottom selectall clear
+
+// 执行日志 appender 实现
+export default class LogAppender implements ILogAppender {
+
+  private config: ExecTailRequest;
+
+  private client?: WebSocket;
+
+  private appenderRel: Record<string, LogAppenderConf>;
+
+  private keepAliveTask?: number;
+
+  constructor(config: ExecTailRequest) {
+    this.config = config;
+    this.appenderRel = {};
+  }
+
+  // 初始化
+  async init(logDomRefs: Array<LogDomRef>) {
+    // 初始化 appender
+    this.initAppender(logDomRefs);
+    // 初始化 client
+    await this.openClient();
+  }
+
+  // 初始化 appender
+  initAppender(logDomRefs: Array<LogDomRef>) {
+    // 打开 log-view
+    for (let logDomRef of logDomRefs) {
+      // 初始化 terminal
+      const terminal = new Terminal(AppenderOption);
+      // 初始化插件
+      const addons = this.initAddons(terminal);
+      // 打开终端
+      terminal.open(logDomRef.el);
+      // 自适应
+      addons.fit.fit();
+      this.appenderRel[logDomRef.id] = {
+        ...logDomRef,
+        terminal,
+        addons
+      };
+    }
+  }
+
+  // 初始化插件
+  initAddons(terminal: Terminal): LogAddons {
+    const fit = new FitAddon();
+    const search = new SearchAddon();
+    const canvas = new CanvasAddon();
+    terminal.loadAddon(fit);
+    terminal.loadAddon(search);
+    terminal.loadAddon(canvas);
+    return {
+      fit,
+      search,
+      canvas
+    };
+  }
+
+  // 初始化 client
+  async openClient() {
+    // 获取 token
+    const { data } = await getExecLogTailToken(this.config);
+    // 打开会话
+    this.client = await createWebSocket(`${webSocketBaseUrl}/exec/log/${data}`);
+    this.client.onerror = event => {
+      Message.error('连接失败');
+      console.error('log error', event);
+    };
+    this.client.onclose = event => {
+      console.warn('log close', event);
+    };
+    this.client.onmessage = this.processMessage.bind(this);
+    // 注册持久化
+    this.keepAliveTask = setInterval(() => {
+      if (this.client?.readyState === WebSocket.OPEN) {
+        this.client?.send('p');
+      }
+    }, 15000);
+  }
+
+  // 自适应
+  fit(): void {
+    Object.values(this.appenderRel).forEach(s => {
+      s.addons?.fit?.fit();
+    });
+  }
+
+  // 关闭 client
+  closeClient(): void {
+    // 关闭 ws
+    if (this.client && this.client.readyState === WebSocket.OPEN) {
+      this.client.close();
+    }
+    // 清理持久化
+    clearInterval(this.keepAliveTask);
+  }
+
+  // 关闭 view
+  closeView(): void {
+    Object.values(this.appenderRel).forEach(s => {
+      s.terminal?.dispose();
+      if (s.addons) {
+        Object.values(s.addons).forEach(s => s.dispose());
+      }
+    });
+  }
+
+  // 关闭
+  close(): void {
+    this.closeClient();
+    this.closeView();
+  }
+
+  // 处理消息
+  processMessage({ data }: MessageEvent<string>) {
+    // pong
+    if (data === 'p') {
+      return;
+    }
+    const separatorIndex = data.indexOf('|');
+    const id = data.substring(0, separatorIndex);
+    const text = data.substring(separatorIndex + 1, data.length);
+    // 获取 appender
+    const appender = this.appenderRel[id];
+    if (!appender) {
+      return;
+    }
+    appender.terminal.write(text);
+  }
+
+}

orion-ops-ui/src/utils/index.ts

@@ -191,12 +191,29 @@ export const resetObject = (obj: any, ignore: string[] = []) => {
 export const objectTruthKeyCount = (obj: any, ignore: string[] = []) => {
   return Object.keys(obj)
     .filter(s => !ignore.includes(s))
-    .reduce(function (acc, curr) {
+    .reduce(function(acc, curr) {
       const currVal = obj[curr];
       return acc + ~~(currVal !== undefined && currVal !== null && currVal?.length !== 0 && currVal !== '');
     }, 0);
 };
 
+/**
+ * 创建 websocket
+ */
+export const createWebSocket = async (url: string) => {
+  return new Promise<WebSocket>((resolve, reject) => {
+    const socket = new WebSocket(url);
+
+    socket.addEventListener('open', () => {
+      resolve(socket);
+    });
+
+    socket.addEventListener('error', (error) => {
+      reject(error);
+    });
+  });
+};
+
 /**
  * 休眠
  */
@@ -224,7 +241,7 @@ export function detectZoom() {
  * 获取唯一的 UUID
  */
 export function getUUID() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
     const r = Math.random() * 16 | 0;
     const v = c === 'x' ? r : (r & 0x3 | 0x8);
     return v.toString(16);

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>

orion-ops-ui/src/views/host/terminal/handler/sftp-transfer-manager.ts

@@ -3,7 +3,7 @@ import { ISftpTransferDownloader, SftpFile, TransferOperatorResponse } from '../
 import { TransferReceiverType, TransferStatus, TransferType } from '../types/terminal.const';
 import { Message } from '@arco-design/web-vue';
 import { getTerminalAccessToken } from '@/api/asset/host-terminal';
-import { nextId } from '@/utils';
+import { createWebSocket, nextId } from '@/utils';
 import { webSocketBaseUrl } from '@/utils/env';
 import SftpTransferUploader from './sftp-transfer-uploader';
 import SftpTransferDownloader from './sftp-transfer-downloader';
@@ -98,11 +98,11 @@ export default class SftpTransferManager implements ISftpTransferManager {
     // 获取 access
     const { data: accessToken } = await getTerminalAccessToken();
     // 打开会话
-    this.client = new WebSocket(`${webSocketBaseUrl}/host/transfer/${accessToken}`);
+    this.client = await createWebSocket(`${webSocketBaseUrl}/host/transfer/${accessToken}`);
     this.client.onerror = event => {
       // 打开失败将传输列表置为失效
       Message.error('会话打开失败');
-      console.error('error', event);
+      console.error('transfer error', event);
       // 将等待中和传输中任务修改为失败状态
       this.transferList.filter(s => {
         return s.status === TransferStatus.WAITING
@@ -114,7 +114,7 @@ export default class SftpTransferManager implements ISftpTransferManager {
     this.client.onclose = event => {
       // 关闭会话重置 run
       this.run = false;
-      console.warn('close', event);
+      console.warn('transfer close', event);
     };
     this.client.onopen = () => {
       // 打开后自动传输下一个任务

orion-ops-ui/src/views/host/terminal/handler/terminal-channel.ts

@@ -2,7 +2,7 @@ import type { InputPayload, ITerminalChannel, ITerminalOutputProcessor, ITermina
 import { OutputProtocol } from '../types/terminal.protocol';
 import { getTerminalAccessToken } from '@/api/asset/host-terminal';
 import { Message } from '@arco-design/web-vue';
-import { sleep } from '@/utils';
+import { createWebSocket } from '@/utils';
 import { webSocketBaseUrl } from '@/utils/env';
 import TerminalOutputProcessor from './terminal-output-processor';
 
@@ -22,22 +22,15 @@ export default class TerminalChannel implements ITerminalChannel {
     // 获取 access
     const { data: accessToken } = await getTerminalAccessToken();
     // 打开会话
-    this.client = new WebSocket(`${webSocketBaseUrl}/host/terminal/${accessToken}`);
+    this.client = await createWebSocket(`${webSocketBaseUrl}/host/terminal/${accessToken}`);
     this.client.onerror = event => {
       Message.error('无法连接至服务器');
-      console.error('error', event);
+      console.error('terminal error', event);
     };
     this.client.onclose = event => {
-      console.warn('close', event);
+      console.warn('terminal close', event);
     };
     this.client.onmessage = this.handlerMessage.bind(this);
-    // 等待会话连接
-    for (let i = 0; i < 100; i++) {
-      await sleep(50);
-      if (this.client.readyState !== WebSocket.CONNECTING) {
-        break;
-      }
-    }
   }
 
   // 是否已连接