feat: 更新APM日志组件 --Story=121710031 (#4858) (#4879)

# Reviewed, transaction id: 29596 --------- Co-authored-by: xlc <[email protected]> Co-authored-by: 闪烁 <[email protected]> Co-authored-by: xlc <[email protected]>
TencentBlueKing · Jan 21, 2025 · 7a8213c · 7a8213c
1 parent 5f736a8
commit 7a8213c
Show file tree

Hide file tree

Showing 15 changed files with 434 additions and 231 deletions.
diff --git a/bklog/web/package.json b/bklog/web/package.json
@@ -12,7 +12,8 @@
     "build": "cross-env MONITOR_APP=log bkmonitor-cli build --log",
     "build:apm": "cross-env MONITOR_APP=apm bkmonitor-cli build --log",
     "build:trace": "cross-env MONITOR_APP=trace bkmonitor-cli build --log && node ./scripts/prefix-css.js",
-    "analyze:apm": "bkmonitor-cli build --log -a",
+    "analyze:apm": "cross-env MONITOR_APP=apm bkmonitor-cli build --log -a",
+    "analyze:trace": "cross-env MONITOR_APP=trace bkmonitor-cli build --log -a",
     "clean": "rimraf ../static/dist/*",
     "analyze": "npm run clean && bkmonitor-cli build -a",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",

diff --git a/bklog/web/scripts/apm-package.json b/bklog/web/scripts/apm-package.json
@@ -1,6 +1,6 @@
 {
   "name": "@blueking/monitor-apm-log",
-  "version": "1.0.0",
+  "version": "1.0.1-beta.1",
   "description": "",
   "main": "main.js",
   "scripts": {

diff --git a/bklog/web/scripts/link-package.json b/bklog/web/scripts/link-package.json
diff --git a/bklog/web/src/views/retrieve-v2/monitor/monitor.scss b/bklog/web/src/views/retrieve-v2/monitor/monitor.scss
@@ -4,7 +4,40 @@
   padding: 0 16px;
   background: #f5f7fa;
 
+  &.scroll-y {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &.is-sticky-top {
+    .search-bar-wrapper {
+      margin-left: 0;
+    }
+
+    .search-result-panel {
+      &.flex {
+        .field-list-sticky {
+          &.is-show {
+            height: calc(100% - var(--offset-search-bar) - 0);
+
+            .search-field-filter-new {
+              .field-filter-box {
+                .field-filter-container-new {
+                  height: calc(100% - var(--offset-search-bar) - 128px);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+
   .sub-head {
+    position: relative;
+    z-index: 5;
     display: flex;
     align-items: center;
     height: 48px;
@@ -41,50 +74,92 @@
     }
   }
 
-  .retrieve-body {
-    width: 100%;
+  // .retrieve-body {
+  //   width: 100%;
 
-    height: calc(100% - 48px);
-    padding: 0;
-    background: #f5f7fa;
+  //   height: calc(100% - 48px);
+  //   padding: 0;
+  //   background: #f5f7fa;
 
-    .retrieve-context {
-      height: 100%;
+  //   .retrieve-context {
+  //     height: 100%;
 
-      .result-row {
-        width: 100%;
-        height: 100%;
-        min-height: 120px;
-        margin-top: 8px;
-        background: #ffffff;
-        border-radius: 2px;
-        box-shadow: 0 2px 4px 0 #1919290d;
-
-        .search-result-panel {
-          height: calc(100% - 4px);
-
-          .search-result-content {
-            .result-table-container {
-              height: 100%;
-              margin-top: 12px;
-              overflow: auto;
-            }
+  //     .result-row {
+  //       width: 100%;
+  //       height: 100%;
+  //       min-height: 120px;
+  //       margin-top: 8px;
+  //       background: #ffffff;
+  //       border-radius: 2px;
+  //       box-shadow: 0 2px 4px 0 #1919290d;
 
-            .finger-container {
-              height: calc(100vh - 310px);
-              margin-top: 12px;
-              overflow: auto;
-            }
+  //       .search-result-panel {
+  //         height: calc(100% - 4px);
 
-            &.is-trend-chart-show {
-              .result-table-container {
-                height: 100%;
-                overflow: auto;
-              }
-            }
-          }
-        }
-      }
+  //         .search-result-content {
+  //           .result-table-container {
+  //             height: 100%;
+  //             margin-top: 12px;
+  //             overflow: auto;
+  //           }
+
+  //           .finger-container {
+  //             height: calc(100vh - 310px);
+  //             margin-top: 12px;
+  //             overflow: auto;
+  //           }
+
+  //           &.is-trend-chart-show {
+  //             .result-table-container {
+  //               height: 100%;
+  //               overflow: auto;
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+  .retrieve-v2-body {
+    display: flex;
+    background-color: #fafbfd;
+
+    .retrieve-collect-index {
+      position: relative;
+      position: sticky;
+      top: 8px;
+      z-index: 3;
+
+      align-self: start;
+      overflow: visible;
+    }
+
+
+    .search-result-panel.flex .field-list-sticky.is-show {
+      height: calc(100% -  var(--offset-search-bar) - 48px);
+    }
+  }
+
+  .retrieve-v2-content {
+    position: relative;
+    width: calc(100% - var(--left-width));
+    // padding-left: 8px;
+    background-color: #f4f7fa;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 8px;
+      content: '';
+      background-color: #f4f7fa;
+    }
+
+    .retrieve-tab,
+    .search-result-panel {
+      padding-left: 8px;
     }
   }