update

src/hooks/useSnapshot.ts

@@ -17,7 +17,7 @@
 import type { MetricsResults } from "@/types/dashboard";
 import { TestJson } from "./data";
 
-export function useSnapshot(params: { name: string; results: MetricsResults[] }[]) {
+export function useSnapshot(p: { name: string; results: MetricsResults[] }[]) {
   const { metrics } = TestJson.snapshot as any;
   function processResults() {
     const sources = metrics.map((metric: { name: string; results: MetricsResults[] }) => {
@@ -48,8 +48,10 @@ export function useSnapshot(params: { name: string; results: MetricsResults[] }[
         if (!item.metric.labels.length) {
           metricsMap[metric.name] = arr;
         } else {
-          const label = item.metric.labels[0];
-          metricsMap[`${label.key}=${label.value}`] = arr;
+          const name = item.metric.labels
+            .map((label: { key: string; value: string }) => `${label.key}=${label.value}`)
+            .join(",");
+          metricsMap[name] = arr;
         }
       }
     }

src/types/dashboard.d.ts

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

src/views/alarm/Content.vue

@@ -43,6 +43,7 @@ limitations under the License. -->
                 smallTips: false,
                 showlabels: false,
                 noTooltips: true,
+                showLegend: false,
               }"
             />
           </div>
@@ -167,8 +168,10 @@ limitations under the License. -->
 
   function handleMetrics(snapshot: { metrics: { name: string; results: MetricsResults[] }[] }) {
     const { getMetricsMap } = useSnapshot(snapshot.metrics);
+    const metrics = getMetricsMap();
+    const keys = Object.keys(metrics);
 
-    return getMetricsMap();
+    return { [keys[0]]: metrics[keys[0]] };
   }
 </script>
 <style lang="scss" scoped>
@@ -253,9 +256,6 @@ limitations under the License. -->
   }
 
   .alarm-detail {
-    max-height: 600px;
-    overflow: auto;
-
     ul {
       min-height: 100px;
       overflow: auto;

src/views/alarm/components/Line.vue

@@ -45,12 +45,12 @@ limitations under the License. -->
     const yAxis = [];
     for (const [index, metric] of props.data.entries()) {
       grid.push({
-        top: index ? (600 / props.data.length) * index + 30 : 40,
+        top: 300 * index + 30,
         left: 0,
         right: 10,
         bottom: 5,
         containLabel: true,
-        height: 600 / props.data.length - 30,
+        height: 260,
       });
       xAxis.push({
         type: "category",

src/views/alarm/components/Snapshot.vue

@@ -14,10 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="snapshot flex-v">
-    <LineChart :intervalTime="appStore.intervalTime" :data="processResults()" />
+    <LineChart
+      :intervalTime="appStore.intervalTime"
+      :data="metrics"
+      :style="{ width: `800px`, height: `${metrics.length * 300}px` }"
+    />
   </div>
 </template>
 <script lang="ts" setup>
+  import { computed } from "vue";
   import { useSnapshot } from "@/hooks/useSnapshot";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import LineChart from "./Line.vue";
@@ -27,11 +32,6 @@ limitations under the License. -->
     snapshot: { type: Object, default: () => {} },
   });
   const { processResults } = useSnapshot(props.snapshot.metrics);
+  const metrics = computed(() => processResults());
   const appStore = useAppStoreWithOut();
 </script>
-<style lang="scss" scoped>
-  .snapshot {
-    width: 800px;
-    height: 600px;
-  }
-</style>

src/views/dashboard/graphs/Line.vue

@@ -61,6 +61,7 @@ limitations under the License. -->
         smallTips: false,
         showlabels: true,
         noTooltips: false,
+        showLegend: true,
       }),
     },
   });
@@ -129,7 +130,7 @@ limitations under the License. -->
       tooltip: props.config.smallTips ? tips : tooltip,
       legend: {
         type: "scroll",
-        show: showEchartsLegend(keys),
+        show: props.config.showLegend ? showEchartsLegend(keys) : false,
         icon: "circle",
         top: 0,
         left: 0,