feat: 监控日志样式以及功能调整

bklog/web/src/views/retrieve-v2/monitor/monitor.scss

@@ -5,11 +5,36 @@
   background: #f5f7fa;
 
   &.scroll-y {
-    height: calc(100vh - 52px);
+    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;
@@ -108,6 +133,11 @@
       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 {

bklog/web/src/views/retrieve-v2/monitor/monitor.vue

@@ -36,14 +36,14 @@ import RouteUrlResolver, { RetrieveUrlResolver } from '@/store/url-resolver';
 import { isEqual } from 'lodash';
 import { useRoute, useRouter } from 'vue-router/composables';
 
+import useResizeObserve from '../../../hooks/use-resize-observe';
+import useScroll from '../../../hooks/use-scroll';
 import SelectIndexSet from '../condition-comp/select-index-set.tsx';
 import { getInputQueryIpSelectItem } from '../search-bar/const.common';
 import SearchBar from '../search-bar/index.vue';
 import QueryHistory from '../search-bar/query-history.vue';
 import SearchResultPanel from '../search-result-panel/index.vue';
-import useScroll from '../../../hooks/use-scroll';
 import { GLOBAL_SCROLL_SELECTOR } from '../search-result-panel/log-result/log-row-attributes';
-import useResizeObserve from '../../../hooks/use-resize-observe';
 const props = defineProps({
   indexSetApi: {
     type: Function,
@@ -295,6 +295,12 @@ watch(
   },
 );
 
+const stickyStyle = computed(() => {
+    return {
+      '--offset-search-bar': `${searchBarHeight.value + 8}px`,
+    };
+  });
+
 const contentStyle = computed(() => {
     return {
       '--left-width': `0px`,
@@ -337,11 +343,11 @@ const isScrollY = computed(() => {
   return !window.__IS_MONITOR_TRACE__
 })
 
-/*** 结束计算 ***/
+/** * 结束计算 ***/
 
 </script>
 <template>
-  <div :class="['retrieve-v2-index', { 'scroll-y': isScrollY, 'is-sticky-top': isStickyTop }]">
+  <div :style="stickyStyle" :class="['retrieve-v2-index', { 'scroll-y': isScrollY, 'is-sticky-top': isStickyTop }]">
     <div class="sub-head">
       <SelectIndexSet
         :popover-options="{ offset: '-6,10' }"
@@ -351,8 +357,8 @@ const isScrollY = computed(() => {
       <QueryHistory @change="updateSearchParam"></QueryHistory>
     </div>
     <div
-      :class="['retrieve-v2-body']"
       :style="contentStyle"
+      :class="['retrieve-v2-body']"
     >
       <div class="retrieve-v2-content">
         <SearchBar @height-change="handleHeightChange"></SearchBar>

bklog/web/src/views/retrieve-v2/search-result-panel/log-result/index.vue

@@ -45,56 +45,56 @@
           </bk-button>
         </div>
         <bk-checkbox
+          style="margin: 0 12px"
+          class="bklog-option-item"
           :value="showRowIndex"
           theme="primary"
           @change="handleShowRowIndexChange"
-          style="margin: 0 12px"
-          class="bklog-option-item"
         >
           <span class="switch-label">{{ $t('行号') }}</span>
         </bk-checkbox>
         <bk-checkbox
+          style="margin: 0 12px 0 0"
+          class="bklog-option-item"
           v-model="expandTextView"
           theme="primary"
           @change="handleChangeExpandView"
-          style="margin: 0 12px 0 0"
-          class="bklog-option-item"
         >
           <span class="switch-label">{{ $t('展开长字段') }}</span>
         </bk-checkbox>
         <bk-checkbox
+          style="margin: 0 12px 0 0"
+          class="bklog-option-item"
           :value="isWrap"
           theme="primary"
-          class="bklog-option-item"
           @change="handleChangeIsWarp"
-          style="margin: 0 12px 0 0"
           ><span class="switch-label">{{ $t('换行') }}</span></bk-checkbox
         >
 
         <bk-checkbox
+          style="margin: 0 12px 0 0"
           :value="isJsonFormat"
           theme="primary"
           @change="handleJsonFormat"
-          style="margin: 0 12px 0 0"
           ><span class="switch-label">{{ $t('JSON解析') }}</span></bk-checkbox
         >
 
         <bk-input
-          type="number"
+          v-if="isJsonFormat"
           class="json-depth-num"
-          :value="jsonFormatDeep"
-          :min="1"
           :max="15"
+          :min="1"
+          :value="jsonFormatDeep"
+          type="number"
           @change="handleJsonFormatDeepChange"
-          v-if="isJsonFormat"
         ></bk-input>
       </div>
       <div class="tools-more">
         <div class="operation-icons">
           <export-log
-            :index-set-list="indexSetList"
             :async-export-usable="asyncExportUsable"
             :async-export-usable-reason="asyncExportUsableReason"
+            :index-set-list="indexSetList"
             :queue-status="queueStatus"
             :retrieve-params="retrieveParams"
             :total-count="totalCount"
@@ -291,7 +291,7 @@
     .original-log-panel-tools {
       display: flex;
       justify-content: space-between;
-      padding-left: 16px;
+      padding: 0 3px 0 16px;
     }
 
     .tools-more {

bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/components/common-page-new.tsx

@@ -27,6 +27,7 @@
 import { Component, Emit, InjectReactive, Prop, Provide, ProvideReactive, Ref, Watch } from 'vue-property-decorator';
 import { Component as tsc } from 'vue-tsx-support';
 
+import { isEqual } from 'lodash';
 import { getSceneView, getSceneViewList } from 'monitor-api/modules/scene_view';
 import bus from 'monitor-common/utils/event-bus';
 import { deepClone, isObject, random } from 'monitor-common/utils/utils';
@@ -697,7 +698,9 @@ export default class CommonPageNew extends tsc<ICommonPageProps, ICommonPageEven
       } else if (key.match(/^groups/)) {
         this.groups = Array.isArray(val) ? val : [val];
       } else if (!['key'].includes(key)) {
-        if (typeof val === 'string' && /^-?[1-9]?[0-9]*[1-9]+$/.test(val)) {
+        if (customRouterQueryKeys.includes(key)) {
+          this.customRouteQuery[key] = val;
+        } else if (typeof val === 'string' && /^-?[1-9]?[0-9]*[1-9]+$/.test(val)) {
           this[key] = +val;
         } else if (['from', 'to'].includes(key)) {
           // this[key] = Array.isArray(val) ? val : isNaN(+val) ? val : +val;
@@ -748,8 +751,6 @@ export default class CommonPageNew extends tsc<ICommonPageProps, ICommonPageEven
             this.timezone = val as string;
             updateTimezone(val as string);
           }
-        } else if (customRouterQueryKeys.includes(key)) {
-          this.customRouteQuery[key] = val;
         } else if (key === 'groupByVariables') {
           try {
             this.groupByVariables = JSON.parse(decodeURIComponent(val as string));
@@ -1407,41 +1408,44 @@ export default class CommonPageNew extends tsc<ICommonPageProps, ICommonPageEven
         groupByVariables: JSON.stringify(this.groupByVariables),
       };
     }
-    this.$router.replace({
-      name: this.$route.name,
-      query: {
-        ...filters,
-        ...this.customRouteQuery,
-        ...groupByVariables,
-        method: this.method,
-        interval: this.interval.toString(),
-        groups: this.groups,
-        dashboardId: this.dashboardId,
-        // timeRange: this.timeRange as string,
-        from: this.timeRange[0],
-        to: this.timeRange[1],
-        timezone: this.timezone,
-        refleshInterval: this.refleshInterval.toString(),
-        // selectorSearchCondition: encodeURIComponent(JSON.stringify(this.selectorSearchCondition)),
-        queryData: queryDataStr,
-        key: random(10),
-        // 详情名称，用于面包屑
-        name: this.$route.query?.name,
-        sceneId: this.sceneId,
-        sceneType: this.localSceneType,
-        queryString: this.queryString,
-        preciseFilter: String(this.isPreciseFilter) /** 是否开启精准过滤 */,
-        compares:
-          this.compareType === 'target' && !!this.compares.targets?.length
-            ? encodeURIComponent(JSON.stringify(this.compares))
-            : undefined /** 目标对比 */,
-        timeOffset:
-          this.compareType === 'time' && !!this.timeOffset.length
-            ? encodeURIComponent(JSON.stringify(this.timeOffset))
-            : undefined /** 时间对比 */,
-        isGroupByLimit: this.isGroupByLimit ? 'true' : 'false',
-      },
-    });
+    const query = {
+      ...filters,
+      ...this.customRouteQuery,
+      ...groupByVariables,
+      method: this.method,
+      interval: this.interval.toString(),
+      groups: this.groups,
+      dashboardId: this.dashboardId,
+      // timeRange: this.timeRange as string,
+      from: this.timeRange[0],
+      to: this.timeRange[1],
+      timezone: this.timezone,
+      refleshInterval: this.refleshInterval.toString(),
+      // selectorSearchCondition: encodeURIComponent(JSON.stringify(this.selectorSearchCondition)),
+      queryData: queryDataStr,
+      key: random(10),
+      // 详情名称，用于面包屑
+      name: this.$route.query?.name,
+      sceneId: this.sceneId,
+      sceneType: this.localSceneType,
+      queryString: this.queryString,
+      preciseFilter: String(this.isPreciseFilter) /** 是否开启精准过滤 */,
+      compares:
+        this.compareType === 'target' && !!this.compares.targets?.length
+          ? encodeURIComponent(JSON.stringify(this.compares))
+          : undefined /** 目标对比 */,
+      timeOffset:
+        this.compareType === 'time' && !!this.timeOffset.length
+          ? encodeURIComponent(JSON.stringify(this.timeOffset))
+          : undefined /** 时间对比 */,
+      isGroupByLimit: this.isGroupByLimit ? 'true' : 'false',
+    };
+    if (!isEqual(query, this.$route.query)) {
+      this.$router.replace({
+        name: this.$route.name,
+        query,
+      });
+    }
   }
   /** 更新viewOptions的值 */
   async handleViewOptionsChange(viewOptions: IViewOptions) {

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/monitor-retrieve/monitor-retrieve.tsx

@@ -43,7 +43,7 @@ import type { TimeRangeType } from 'monitor-pc/components/time-range/time-range'
 import './monitor-retrieve.scss';
 import '@blueking/monitor-apm-log/css/main.css';
 
-export const APM_LOG_ROUTER_QUERY_KEYS = ['search_mode', 'addition', 'keyword'];
+export const APM_LOG_ROUTER_QUERY_KEYS = ['search_mode', 'addition', 'keyword', 'indexId'];
 @Component
 export default class MonitorRetrieve extends tsc<void> {
   @InjectReactive('timeRange') readonly timeRange!: TimeRangeType;

bkmonitor/webpack/src/trace/pages/main/span-details.scss

@@ -302,8 +302,6 @@
     }
 
     &.is-log-tab {
-      height: 100%;
-      padding: 24px 0px 0px 40px;
       overflow: initial;
 
       .flex-dashboard-item {