perf: 优化分词渲染逻辑减少性能消耗 (#4942)

bklog/web/package.json

@@ -58,15 +58,16 @@
     "dayjs": "1.11.10",
     "deepmerge": "4.3.1",
     "echarts": "^5.5.1",
-    "fabric": "^5.5.1",
     "html-to-image": "1.11.11",
     "interactjs": "1.10.27",
     "js-cookie": "3.0.5",
     "json-bignumber": "1.1.1",
+    "konva": "^9.3.18",
     "lodash": "4.17.21",
     "monaco-editor": "0.33.0",
     "monaco-editor-webpack-plugin": "7.0.1",
     "monaco-yaml": "4.0.0-alpha.3",
+    "pixi.js": "^8.6.6",
     "postcss-loader": "8.1.1",
     "qs": "6.11.2",
     "resize-detector": "0.3.0",

bklog/web/src/hooks/use-text-segmentation.ts

@@ -37,6 +37,20 @@ export type FormatterConfig = {
   };
 };
 
+export type WordListItem = {
+  text: string;
+  isMark: boolean;
+  isCursorText: boolean;
+  startIndex?: number;
+  endIndex?: number;
+  left?: number;
+  top?: number;
+  width?: number;
+  renderWidth?: number;
+  split?: WordListItem[];
+  line?: number;
+};
+
 export type SegmentAppendText = { text: string; onClick?: (...args) => void; attributes?: Record<string, string> };
 export default class UseTextSegmentation {
   getSegmentContent: (keyRef: object, fn: (...args) => void) => Ref<HTMLElement>;
@@ -56,7 +70,7 @@ export default class UseTextSegmentation {
     Object.assign(this.options, cfg.options ?? {});
   }
 
-  getCellClickHandler(e: MouseEvent, value) {
+  getCellClickHandler(e: MouseEvent, value, { offsetY = 0, offsetX = 0 }) {
     const x = e.clientX;
     const y = e.clientY;
     let virtualTarget = document.body.querySelector('.bklog-virtual-target') as HTMLElement;
@@ -69,8 +83,8 @@ export default class UseTextSegmentation {
       document.body.appendChild(virtualTarget);
     }
 
-    virtualTarget.style.setProperty('left', `${x}px`);
-    virtualTarget.style.setProperty('top', `${y}px`);
+    virtualTarget.style.setProperty('left', `${x + offsetX}px`);
+    virtualTarget.style.setProperty('top', `${y + offsetY}px`);
 
     this.handleSegmentClick(virtualTarget, value);
   }
@@ -212,10 +226,11 @@ export default class UseTextSegmentation {
       '&gt;': '>',
       '&quot;': '"',
       '&#x27;': "'",
+      ' ': '\u2002',
     };
 
     return typeof val !== 'string'
-      ? val
+      ? `${val}`
       : val.replace(RegExp(`(${Object.keys(map).join('|')})`, 'g'), match => map[match]);
   }
 

bklog/web/src/views/retrieve-v2/search-result-panel/log-result/canvas-text.ts

@@ -0,0 +1,46 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台 (BlueKing PaaS):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+export default class CanvasText {
+  fontSize;
+  fontFamily;
+  canvasInstance: HTMLCanvasElement;
+  canvasContext: CanvasRenderingContext2D;
+  constructor({ fontSize, fontFamily }) {
+    this.canvasInstance = document.createElement('canvas');
+    this.canvasContext = this.canvasInstance.getContext('2d');
+    this.fontSize = fontSize;
+    this.fontFamily = fontFamily;
+    this.canvasContext.font = `${this.fontSize}px ${this.fontFamily}`;
+  }
+
+  width(txt: string) {
+    return this.canvasContext.measureText(txt ?? '').width;
+  }
+
+  destroy() {
+    this.canvasInstance = null;
+  }
+}

bklog/web/src/views/retrieve-v2/search-result-panel/log-result/log-row-attributes.ts

@@ -30,6 +30,7 @@ export const ROW_EXPAND = '__component_row_expand';
 export const ROW_F_ORIGIN_TIME = '__component_origin_time';
 export const ROW_F_ORIGIN_CTX = '__component_origin_content';
 export const ROW_F_ORIGIN_OPT = '__component_table_operator';
+export const ROW_F_JSON = '__component_format_json';
 
 // 滚动条查询条件
 export const GLOBAL_SCROLL_SELECTOR = '.retrieve-v2-index.scroll-y';

bklog/web/src/views/retrieve-v2/search-result-panel/log-result/log-rows.scss

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  width: fit-content;
+  // width: fit-content;
   width: 100%;
   min-width: 100%;
   min-height: 400px;
@@ -41,7 +41,6 @@
     width: fit-content;
     min-width: 100%;
     transform: translate3d(var(--scroll-left), 0, 0);
-    // will-change: scroll-position;
 
     &::before {
       position: absolute;
@@ -57,7 +56,7 @@
       background-size:
         100% 100%,
         50% 100%;
-      animation: loading-animation 1.5s infinite;
+      // animation: loading-animation 1.5s infinite;
     }
   }
 
@@ -82,19 +81,14 @@
     min-height: 40px;
     background-color: #fff;
     border-bottom: 1px solid #dfe0e5;
-    content-visibility: auto;
-    will-change: auto;
 
     .bklog-row-observe {
       width: fit-content;
       min-width: 100%;
-      height: fit-content;
-      visibility: visible;
+      height: 100%;
 
       &.is-pending {
         position: relative;
-        visibility: hidden;
-        will-change: auto;
       }
     }
 
@@ -104,6 +98,7 @@
       display: inline-flex;
       align-items: flex-start;
       width: var(--scroll-width);
+      min-width: fit-content;
       min-height: 40px;
       font-family: var(--table-fount-family);
       font-size: var(--table-fount-size);
@@ -449,16 +444,16 @@
     }
   }
 }
-@keyframes loading-animation {
-  0% {
-    background-position:
-      0% 0,
-      -50% 0;
-  }
-
-  100% {
-    background-position:
-      0% 0,
-      150% 0;
-  }
-}
+// @keyframes loading-animation {
+//   0% {
+//     background-position:
+//       0% 0,
+//       -50% 0;
+//   }
+
+//   100% {
+//     background-position:
+//       0% 0,
+//       150% 0;
+//   }
+// }