add mini line chart

src/hooks/useSnapshot.ts

@@ -34,7 +34,24 @@ export function useSnapshot(metrics: { name: string; results: any[] }[]) {
     return sources;
   }
 
+  function getMetricsMap() {
+    const metricsMap: { [key: string]: number[] } = {};
+    for (const metric of metrics) {
+      for (const item of metric.results) {
+        const arr = item.values.map((v: { value: string }) => Number(v.value));
+        if (!item.metric.labels.length) {
+          metricsMap[metric.name] = arr;
+        } else {
+          const label = item.metric.labels[0];
+          metricsMap[`${label.key}=${label.value}`] = arr;
+        }
+      }
+    }
+    return metricsMap;
+  }
+
   return {
     processResults,
+    getMetricsMap,
   };
 }

src/types/dashboard.d.ts

@@ -111,6 +111,7 @@ export interface LineConfig extends AreaConfig {
   showYAxis?: boolean;
   smallTips?: boolean;
   showlabels?: boolean;
+  noTooltips?: boolean;
 }
 
 export interface AreaConfig {

src/views/alarm/Content.vue

@@ -22,15 +22,30 @@ limitations under the License. -->
         <div class="message mb-5 b">
           {{ i.message }}
         </div>
-        <div
-          class="timeline-table-i-scope mr-10 l sm"
-          :class="{
-            blue: i.scope === 'Service',
-            green: i.scope === 'Endpoint',
-            yellow: i.scope === 'ServiceInstance',
-          }"
-        >
-          {{ t(i.scope.toLowerCase()) }}
+        <div class="flex-h">
+          <div
+            class="timeline-table-i-scope"
+            :class="{
+              blue: i.scope === 'Service',
+              green: i.scope === 'Endpoint',
+              yellow: i.scope === 'ServiceInstance',
+            }"
+          >
+            {{ t(i.scope.toLowerCase()) }}
+          </div>
+          <div class="mini-chart">
+            <Line
+              :data="handleMetrics(i.snapshot)"
+              :intervalTime="appStore.intervalTime"
+              :config="{
+                showXAxis: false,
+                showYAxis: false,
+                smallTips: false,
+                showlabels: false,
+                noTooltips: true,
+              }"
+            />
+          </div>
         </div>
         <div class="grey sm show-xs">
           {{ dateFormat(parseInt(i.startTime)) }}
@@ -118,12 +133,16 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import type { Alarm, Event } from "@/types/alarm";
   import { useAlarmStore } from "@/store/modules/alarm";
+  import { useAppStoreWithOut } from "@/store/modules/app";
   import { EventsDetailHeaders, AlarmDetailCol, EventsDetailKeys } from "./data";
   import { dateFormat } from "@/utils/dateFormat";
+  import { useSnapshot } from "@/hooks/useSnapshot";
   import Snapshot from "./components/Snapshot.vue";
+  import Line from "@/views/dashboard/graphs/Line.vue";
 
   const { t } = useI18n();
   const alarmStore = useAlarmStore();
+  const appStore = useAppStoreWithOut();
   const isShowDetails = ref<boolean>(false);
   const showEventDetails = ref<boolean>(false);
   const currentDetail = ref<Alarm | any>({});
@@ -144,6 +163,12 @@ limitations under the License. -->
     currentEvent.value = event;
     showEventDetails.value = true;
   }
+
+  function handleMetrics(snapshot: any) {
+    const { getMetricsMap } = useSnapshot(snapshot.metrics);
+
+    return getMetricsMap();
+  }
 </script>
 <style lang="scss" scoped>
   .timeline-table {
@@ -190,11 +215,10 @@ limitations under the License. -->
   }
 
   .timeline-table-i-scope {
-    display: inline-block;
-    padding: 0 8px;
+    padding: 0 5px;
     border: 1px solid;
-    margin-top: -1px;
-    border-radius: 4px;
+    border-radius: 3px;
+    display: inline-block;
   }
 
   .timeline-item {
@@ -251,4 +275,9 @@ limitations under the License. -->
       }
     }
   }
+
+  .mini-chart {
+    height: 20px;
+    width: 400px;
+  }
 </style>

src/views/dashboard/graphs/Line.vue

@@ -60,6 +60,7 @@ limitations under the License. -->
         showYAxis: true,
         smallTips: false,
         showlabels: true,
+        noTooltips: false,
       }),
     },
   });
@@ -97,6 +98,7 @@ limitations under the License. -->
     const color: string[] = chartColors();
     const tooltip = {
       trigger: "axis",
+      show: !props.config.noTooltips,
       backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
       borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
       textStyle: {
@@ -108,10 +110,10 @@ limitations under the License. -->
       extraCssText: "max-height:85%; overflow: auto;",
     };
     const tips = {
+      show: !props.config.noTooltips,
       formatter(params: any) {
         return `${params[0].value[1]}`;
       },
-      confine: true,
       extraCssText: `height: 20px; padding:0 2px;`,
       trigger: "axis",
       backgroundColor: appStore.theme === Themes.Dark ? "#666" : "#eee",