feat: 【产品功能】tace 检索总览图标 hover 展示 tooltips（多指标） --story=120086612 (Ten…

…centBlueKing#3340)
HACK-WU · Oct 16, 2024 · 9df254e · 9df254e
1 parent 3cd03e8
commit 9df254e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/bkmonitor/webpack/src/trace/plugins/components/chart-title.scss b/bkmonitor/webpack/src/trace/plugins/components/chart-title.scss
@@ -1,5 +1,12 @@
 $alarmColor: #dcdee5 #63656e #ea3636;
 
+.custom-hr {
+  width: 100%;
+  margin: 10px auto; /* 上下边距和居中 */
+  border: none; /* 移除默认边框样式 */
+  border-top: 1px solid white; /* 设置浅色边框 */
+}
+
 .title-wrapper {
   width: 100%;
 

diff --git a/bkmonitor/webpack/src/trace/plugins/components/chart-title.tsx b/bkmonitor/webpack/src/trace/plugins/components/chart-title.tsx
@@ -28,6 +28,7 @@ import { useI18n } from 'vue-i18n';
 
 import { Popover } from 'bkui-vue';
 import { fetchItemStatus } from 'monitor-api/modules/strategies';
+import { deduplicateByField } from 'monitor-ui/chart-plugins/utils';
 
 import { createMetricTitleTooltips } from '../../utils';
 import AlertActionList from './alert-action-list';
@@ -117,6 +118,15 @@ export default defineComponent({
     });
     const showMetricAlarm = computed(() => props.metrics?.length === 1);
     const metricTitleData: ComputedRef<IExtendMetricData> = computed<IExtendMetricData>(() => props.metrics[0]);
+
+    const metricTitleTooltips = () => {
+      return showMetricAlarm.value
+        ? createMetricTitleTooltips(metricTitleData.value)
+        : deduplicateByField(props.metrics, 'metric_id')
+            .map(metric => createMetricTitleTooltips(metric))
+            .join('<hr class="custom-hr" />');
+    };
+
     watch(
       () => props.metrics,
       async (v, o) => {
@@ -242,6 +252,7 @@ export default defineComponent({
       handleAlertListShown,
       handleSuccessLoad,
       isShowAlarmStyle,
+      metricTitleTooltips,
     };
   },
   render() {
@@ -278,7 +289,7 @@ export default defineComponent({
                 <span class='title-interval'>{this.metricTitleData.collect_interval}m</span>
               </Popover>
             ) : undefined}
-            {this.showMetricAlarm && this.metricTitleData ? (
+            {this.metrics?.length ? (
               <Popover
                 v-slots={{
                   default: () => (
@@ -290,7 +301,7 @@ export default defineComponent({
                   content: () => (
                     <div
                       class='common-chart-tooltips-wrap'
-                      v-html={createMetricTitleTooltips(this.metricTitleData)}
+                      v-html={this.metricTitleTooltips()}
                     />
                   ),
                 }}