feat: 添加实时获取日志 (#2344)

Author: leafage-collb

webfe/package_vue/src/common/tools.js

@@ -635,3 +635,97 @@ export function normalizeOrgSelectionData(data, options = {}) {
     name: item.name,
   }));
 }
+
+/**
+ * 初始化一个 EventSource，以连接到服务器发送事件（SSE）流。
+ * @param {string} url - 服务器端 SSE 流的 URL。
+ * @param {Object} options - 事件流的配置选项。
+ * @param {boolean} [options.withCredentials=false] - 是否在请求中包含凭据（如 Cookies、授权报头）。
+ * @param {function} [options.onOpen=() => {}] - 连接成功建立时的回调函数。
+ * @param {function} [options.onMessage=() => {}] - 处理从服务器接收消息的回调函数。
+ * @param {function} [options.onError=() => {}] - 处理流期间发生错误的回调函数。
+ * @param {function} [options.onEOF=() => {}] - 处理'EOF'事件的回调函数，指示流的结束。
+ * @param {number} [options.reconnectInterval=5000] - 在断开连接或出错后尝试重新连接之前等待的毫秒数。
+ * @param {number} [options.maxRetries=Infinity] - 最大重试次数，默认无限重试。
+ * @returns {{ close: function, reconnect: function }} 返回一个包含关闭方法、重连方法的对象。
+ */
+export function createSSE(url, options = {}) {
+  const {
+    withCredentials = false,
+    onOpen = () => {},
+    onMessage = () => {},
+    onError = () => {},
+    onEOF = () => {},
+    reconnectInterval = 5000,
+    maxRetries = Infinity,
+  } = options;
+
+  let eventSource;
+  let retryCount = 0;
+  let isManuallyClosed = false;
+  let reconnectTimer;
+
+  const connect = () => {
+    if (isManuallyClosed) return;
+
+    // 清除之前的连接（如果有）
+    if (eventSource) {
+      eventSource.close();
+    }
+
+    eventSource = new EventSource(url, { withCredentials });
+
+    // 连接成功建立
+    eventSource.onopen = () => {
+      retryCount = 0; // 重置重试计数器
+      onOpen();
+    };
+
+    // 处理接收到的消息
+    eventSource.onmessage = (event) => {
+      onMessage(event);
+    };
+
+    // 处理错误事件
+    eventSource.onerror = (error) => {
+      // 仅在连接关闭时处理错误（EventSource 在重连时也会触发 error 事件）
+      if (eventSource.readyState === EventSource.CLOSED) {
+        onError(error, retryCount);
+        if (retryCount < maxRetries) {
+          retryCount += 1;
+          reconnectTimer = setTimeout(connect, reconnectInterval);
+        }
+      }
+    };
+
+    // 处理流结束事件
+    eventSource.addEventListener('EOF', () => {
+      onEOF();
+      close();
+    });
+  };
+
+  // 开始连接
+  connect();
+
+  // 关闭连接的方法
+  const close = () => {
+    isManuallyClosed = true;
+    clearTimeout(reconnectTimer);
+    if (eventSource) {
+      eventSource.close();
+    }
+  };
+
+  // 主动重连的方法
+  const reconnect = () => {
+    isManuallyClosed = false;
+    connect();
+  };
+
+  return {
+    close,
+    reconnect,
+  };
+};
+

webfe/package_vue/src/components/process-log-dialog/log.vue

@@ -49,8 +49,23 @@
                     :name="$t('最近 400 条')"
                   />
                 </bk-select>
+                <template v-if="isRealTimeLog && isCloudNative">
+                  <i
+                    v-bk-tooltips="isShowTime ? $t('隐藏时间') : $t('显示时间')"
+                    class="paasng-icon paasng-clock ml20"
+                    @click="handleChangeShowTime"
+                  ></i>
+                  <!-- 云原生-实时日志: 建立sse链接，获取日志 -->
+                  <i
+                    v-bk-tooltips="isOpen ? $t('停止刷新') : $t('实时刷新')"
+                    class="paasng-icon ml20"
+                    :class="isOpen ? 'paasng-pause' : 'paasng-play2'"
+                    @click="getStreamRealTimeLog"
+                  ></i>
+                </template>
                 <!-- 刷新 -->
                 <i
+                  v-bk-tooltips="$t('刷新')"
                   class="paasng-icon paasng-refresh ml20"
                   @click="refresh"
                 ></i>
@@ -74,7 +89,6 @@
               v-if="logs.length"
               class="bk-log"
               ref="bkLog"
-              :key="logIndex"
             ></bk-log>
             <div
               v-else
@@ -126,8 +140,8 @@ export default {
       type: Array | String,
       default: () => [],
     },
-    // 直接展示当前行日志
-    isDirect: {
+    // 是否为云原生应用
+    isCloudNative: {
       type: Boolean,
       default: false,
     },
@@ -137,11 +151,12 @@ export default {
       internalVisible: this.value,
       selectValue: this.defaultCondition,
       logType: 'realtime',
-      logIndex: 0,
       logTypeOption: [
         { id: 'realtime', text: this.$t('实时日志') },
         { id: 'restart', text: this.$t('最近一次重启日志') },
       ],
+      isOpen: false,
+      isShowTime: false,
     };
   },
   computed: {
@@ -171,9 +186,9 @@ export default {
     },
     logs: {
       handler(newLogs) {
-        this.logIndex += 1;
         this.$nextTick(() => {
-          this.$refs.bkLog.addLogData(newLogs);
+          this.$refs.bkLog?.changeExecute();
+          this.$refs.bkLog?.addLogData(newLogs);
         });
       },
       deep: true,
@@ -190,7 +205,8 @@ export default {
     },
     // 切换日志类型
     changeLogType(type) {
-      if (this.loading) return;
+      if (this.loading || this.logType === type) return;
+      this.rest();
       this.logType = type;
       this.selectValue = this.isDisabledRestartLog ? 'restart' : this.defaultCondition;
       this.$emit('change', {
@@ -204,11 +220,37 @@ export default {
         type: this.logType,
         value: this.selectValue,
       });
+      this.closeStreamLog();
     },
     // 下载重启日志
     async download() {
       this.$emit('download', this.logType);
     },
+    rest() {
+      // 清空当前日志
+      this.$refs.bkLog?.changeExecute();
+      this.closeStreamLog();
+    },
+    // 关闭 sse 连接
+    closeStreamLog() {
+      this.$emit('get-stream-log', 'close');
+      this.isOpen = false;
+    },
+    // 获取实时日志(sse)
+    getStreamRealTimeLog() {
+      const type = this.isOpen ? 'close' : 'open';
+      this.$emit('get-stream-log', type);
+      this.isOpen = !this.isOpen;
+    },
+    // 流式获取的 push 进组件，不进行全量替换
+    addLogData(log) {
+      this.$refs.bkLog?.addLogData(log);
+    },
+    // 日志时间
+    handleChangeShowTime() {
+      this.isShowTime = !this.isShowTime;
+      this.$refs.bkLog?.changeShowTime(this.isShowTime);
+    },
   },
 };
 </script>
@@ -299,13 +341,17 @@ export default {
 
     .log-content {
       height: calc(100% - 48px);
+      min-height: 0;
       .bk-log {
         height: 100%;
-        transform: translateY(-5px);
+        margin-top: 0 !important;
         /deep/ .scroll-home .scroll-main .scroll-item {
           font-family: Consolas, Courier New, monospace;
           color: #fff !important;
         }
+        /deep/ .log-loading {
+          display: none;
+        }
       }
       .empty {
         padding: 16px;

webfe/package_vue/src/views/dev-center/app/engine/cloud-deploy-manage/comps/deploy-detail.vue

@@ -500,18 +500,20 @@
     <!-- 日志弹窗 -->
     <process-log
       v-if="logConfig.visiable"
+      ref="logRef"
       v-model="logConfig.visiable"
       :title="logConfig.title"
       :logs="logConfig.logs"
       :loading="logConfig.isLoading"
       :selection-list="logSelectionList"
       :params="logConfig.params"
-      :is-direct="true"
       :default-condition="'400'"
+      :is-cloud-native="isCloudNativeApp"
       @close="handleClose"
       @change="refreshLogs"
       @refresh="refreshLogs"
       @download="downloadInstanceLog"
+      @get-stream-log="getStreamLog"
     ></process-log>
 
     <!-- 功能依赖项展示 -->
@@ -539,7 +541,7 @@ import scaleDialog from './scale-dialog';
 import i18n from '@/language/i18n.js';
 import { bus } from '@/common/bus';
 import eventDetail from './event-detail.vue';
-import { downloadTxt } from '@/common/tools';
+import { downloadTxt, createSSE } from '@/common/tools';
 import processLog from '@/components/process-log-dialog/log.vue';
 import { cloneDeep, isEqual } from 'lodash';
 import FunctionalDependency from '@blueking/functional-dependency/vue2/index.umd.min.js';
@@ -737,6 +739,8 @@ export default {
         parmas: {},
       },
       showFunctionalDependencyDialog: false,
+      streamLogEvent: null,
+      lastStreamLogTime: null,
     };
   },
   computed: {
@@ -799,6 +803,8 @@ export default {
   beforeDestroy() {
     // 页面销毁 关闭stream
     this.closeServerPush();
+    // 关闭实时日志连接
+    this.closeStreamLogEvent();
   },
 
   methods: {
@@ -1438,13 +1444,11 @@ export default {
           previous,
           lines: this.curTailLines,
         });
-        this.logConfig.logs = res.map((log) => {
-          return { message: log };
-        });
+        this.logConfig.logs = res;
       } catch (e) {
         this.logConfig.logs = [];
         if (e.status === 404) {
-          this.this.noLogMessage();
+          this.noLogMessage();
         }
         this.catchErrorHandler(e);
       } finally {
@@ -1467,7 +1471,7 @@ export default {
         downloadTxt(logs, params.instanceName);
       } catch (e) {
         if (e.status === 404) {
-          this.this.noLogMessage();
+          this.noLogMessage();
         }
         this.catchErrorHandler(e);
       }
@@ -1549,6 +1553,7 @@ export default {
       this.logConfig.visiable = false;
       this.curTailLines = '400';
       this.logConfig.logs = [];
+      this.closeStreamLogEvent();
     },
 
     // 刷新日志
@@ -1613,6 +1618,55 @@ export default {
     gotoMore() {
       window.open(this.GLOBAL.DOC.WEB_CONSOLE, '_blank');
     },
+
+    // 获取实时日志（sse）
+    async getStreamLog(type) {
+      if (type === 'close') {
+        this.closeStreamLogEvent();
+        return;
+      }
+
+      const { appCode, moduleId, env, processType, instanceName } = this.logConfig.params;
+
+      let url = `${BACKEND_URL}/api/bkapps/applications/${appCode}/modules/${moduleId}/envs/${env}/processes/${processType}/instances/${instanceName}/logs/stream/`;
+      const sinceTime = this.lastStreamLogTime || this.logConfig.logs[this.logConfig.logs.length - 1]?.timestamp;
+      if (sinceTime) {
+        url += `?since_time=${sinceTime}`;
+      }
+
+      // 初始化事件流
+      this.streamLogEvent = createSSE(url, {
+        withCredentials: true,
+        onMessage: (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            // 添加日志
+            this.$refs.logRef?.addLogData([data]);
+            this.lastStreamLogTime = data.timestamp;
+          } catch (e) {
+            console.error('消息解析错误:', e);
+          }
+        },
+        onError: () => {
+          // 服务异常重新连接
+          this.logConfig.logs.push({
+            message: '正在尝试重新连接... ',
+          });
+        },
+        onEOF: () => {
+          this.closeStreamLogEvent();
+          // 流式日志结束，需要重新连接
+          this.streamLogEvent.reconnect();
+        },
+      });
+    },
+
+    // 关闭事件源
+    closeStreamLogEvent() {
+      if (this.streamLogEvent) {
+        this.streamLogEvent.close();
+      }
+    },
   },
 };
 </script>