Merge pull request #1168 from shuzhenyang/fix_1.15_experience

fix: 1.15体验优化
TencentBlueKing · Feb 12, 2025 · 6214a46 · 6214a46
2 parents a687204 + 24d5bfa
commit 6214a46
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 39 deletions.
diff --git a/src/dashboard-front/src/views/online-debug/index.vue b/src/dashboard-front/src/views/online-debug/index.vue
@@ -105,7 +105,12 @@
                         <bk-tag theme="success" class="method-tag">{{ curResource?.method }}</bk-tag>
                         <span class="request-path">{{ curResource?.path }}</span>
                       </div>
-                      <bk-button class="fixed-w" theme="primary" @click="handleSend" :loading="isLoading">
+                      <bk-button
+                        class="fixed-w"
+                        theme="primary"
+                        @click="handleSend"
+                        :loading="isLoading"
+                        :disabled="isLoading">
                         {{ t('发送') }}
                       </bk-button>
                       <bk-button class="ml8 fixed-w" @click="viewDoc">{{ t('查看文档') }}</bk-button>
@@ -245,7 +250,12 @@
                         <bk-tag theme="success" class="method-tag">{{ curResource?.method }}</bk-tag>
                         <span class="request-path">{{ curResource?.path }}</span>
                       </div>
-                      <bk-button class="fixed-w" theme="primary" @click="handleSend" :loading="isLoading">
+                      <bk-button
+                        class="fixed-w"
+                        theme="primary"
+                        @click="handleSend"
+                        :loading="isLoading"
+                        :disabled="isLoading">
                         {{ t('发送') }}
                       </bk-button>
                       <bk-button class="ml8 fixed-w" @click="viewDoc">{{ t('查看文档') }}</bk-button>

diff --git a/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue b/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue
@@ -1,29 +1,37 @@
 <template>
-  <div v-show="!isEmpty" class="chart-wrapper">
-    <div
-      :class="['line-chart', ['requests', 'non_200_status'].includes(instanceId) ? 'mini' : 'middle']"
-      :id="instanceId"></div>
-    <div
-      :class="['chart-legend', 'custom-scroll-bar', { 'side-legend': instanceId === 'non_200_status' }]"
-      v-if="chartLegend[instanceId]">
+  <div class="chart-wrapper">
+    <div class="chart-title">
+      {{ title || '--' }}
+    </div>
+
+    <div v-show="!isEmpty">
+      <div
+        :class="['line-chart', ['requests', 'non_200_status'].includes(instanceId) ? 'mini' : 'middle']"
+        :id="instanceId">
+      </div>
+
       <div
-        v-for="({ color, name, selected }, legendIndex) in chartLegend[instanceId]"
-        :key="legendIndex"
-        :class="['legend-item', selected]"
-        @click.stop="handleClickLegend(legendIndex)">
-        <div class="legend-icon" :style="{ background: color }"></div>
-        <div class="legend-name">{{name}}</div>
+        :class="['chart-legend', 'custom-scroll-bar', { 'side-legend': instanceId === 'non_200_status' }]"
+        v-if="chartLegend[instanceId]">
+        <div
+          v-for="({ color, name, selected }, legendIndex) in chartLegend[instanceId]"
+          :key="legendIndex"
+          :class="['legend-item', selected]"
+          @click.stop="handleClickLegend(legendIndex)">
+          <div class="legend-icon" :style="{ background: color }"></div>
+          <div class="legend-name">{{name}}</div>
+        </div>
       </div>
     </div>
-  </div>
 
-  <div v-show="isEmpty" class="ap-nodata basic-height">
-    <TableEmpty
-      :keyword="tableEmptyConf.keyword"
-      :abnormal="tableEmptyConf.isAbnormal"
-      @reacquire="handleInit"
-      @clear-filter="handleClearFilterKey"
-    />
+    <div v-show="isEmpty" class="ap-nodata basic-height">
+      <TableEmpty
+        :keyword="tableEmptyConf.keyword"
+        :abnormal="tableEmptyConf.isAbnormal"
+        @reacquire="handleInit"
+        @clear-filter="handleClearFilterKey"
+      />
+    </div>
   </div>
 </template>
 
@@ -140,17 +148,17 @@ const chartResize = () => {
 
 const getChartOption = () => {
   const baseOption: echarts.EChartOption = {
-    title: {
-      text: props.title,
-      top: 12,
-      left: 24,
-      textStyle: {
-        color: '#313238',
-        fontSize: 14,
-        fontWeight: 'bold',
-        lineHeight: 22,
-      },
-    },
+    // title: {
+    //   text: props.title,
+    //   top: 12,
+    //   left: 24,
+    //   textStyle: {
+    //     color: '#313238',
+    //     fontSize: 14,
+    //     fontWeight: 'bold',
+    //     lineHeight: 22,
+    //   },
+    // },
     grid: {
       right: '8%', // 设置距离右侧的间距
     },
@@ -270,6 +278,14 @@ const getChartOption = () => {
       <p><span class="tooltip-icon">${params.marker}${params.seriesName}: </span><span>${params.data[1] !== null ? params.data[1].toLocaleString() : '0'} ms</span></p>
       </div>`;
       };
+    } else if (['ingress', 'egress'].includes(props.instanceId)) {
+      // ingress 带宽占用 && egress 带宽占用
+      chartOption.tooltip.formatter = (params: echarts.EChartOption.Tooltip.Format) => {
+        return `<div>
+      <p>${dayjs(params.data[0]).format('YYYY-MM-DD HH:mm:ss')}</p>
+      <p><span class="tooltip-icon">${params.marker}${params.seriesName}: </span><span>${params.data[1] !== null ? params.data[1].toLocaleString() : '0'} KB</span></p>
+      </div>`;
+      };
     }  else {
       // 设置图表tooltip内容
       chartOption.tooltip.formatter = (params: echarts.EChartOption.Tooltip.Format) => {
@@ -440,12 +456,20 @@ defineExpose({
 <style lang="scss" scoped>
 .chart-wrapper {
   position: relative;
+  .chart-title {
+    margin-top: 12px;
+    margin-left: 24px;
+    color: '#313238';
+    font-size: 14px;
+    font-weight: 'bold';
+    line-height: 22px;
+  }
   .line-chart {
     &.mini {
-      height: 320px;
+      height: 286px;
     }
     &.middle {
-      height: 360px;
+      height: 326px;
     }
   }
   .chart-legend {
@@ -520,6 +544,6 @@ defineExpose({
   }
 }
 .basic-height {
-  height: 320px;
+  height: 286px;
 }
 </style>
diff --git a/src/dashboard-front/src/views/stage/overview/detail-mode/variable-manage.vue b/src/dashboard-front/src/views/stage/overview/detail-mode/variable-manage.vue
@@ -22,7 +22,12 @@
       >
         <bk-table-column :label="t('变量名称')" prop="name" :show-overflow-tooltip="false" :resizable="false">
           <template #default="{ row, index, column }">
-            <span v-if="!row.isEdit" class="no-edit-value">{{ row?.name }}</span>
+            <span
+              v-if="!row.isEdit"
+              v-bk-tooltips="{ content: row.name, disabled: !row.name }"
+              class="no-edit-value">
+              {{ row?.name }}
+            </span>
             <template v-if="row.isEdit">
               <bk-popover
                 placement="top-start"
@@ -55,7 +60,12 @@
         </bk-table-column>
         <bk-table-column :label="t('变量值')" prop="value" :show-overflow-tooltip="false" :resizable="false">
           <template #default="{ row, index, column }">
-            <span v-show="!row.isEdit" class="no-edit-value">{{ row?.value }}</span>
+            <span
+              v-show="!row.isEdit"
+              v-bk-tooltips="{ content: row.value, disabled: !row.value }"
+              class="no-edit-value">
+              {{ row?.value }}
+            </span>
             <template v-if="row.isEdit">
               <bk-form :ref="(el: HTMLElement) => setRefs(el, `value-${index}`)" :model="row" label-width="0">
                 <bk-form-item