update snapshot

src/hooks/useSnapshot.ts

@@ -18,11 +18,18 @@
 export function useSnapshot(metrics: { name: string; results: any[] }[]) {
   function processResults() {
     const sources = metrics.map((metric: { name: string; results: any[] }) => {
-      const values = metric.results.map((r: { values: { value: string }[] }) =>
+      const values = metric.results.map(
-        r.values.map((v: { value: string }) => Number(v.value)),
+        (r: { values: { value: string }[]; metric: { labels: { key: string; value: string }[] } }) => {
+          const arr = r.values.map((v: { value: string }) => Number(v.value));
+          if (!r.metric.labels.length) {
+            return { values: arr };
+          }
+          const label = r.metric.labels[0];
+          return { name: `${label.key}=${label.value}`, values: arr };
+        },
       );
 
-      return { [metric.name]: values[0] };
+      return { name: metric.name, values };
     });
     return sources;
   }

src/views/alarm/components/Line.vue

@@ -29,33 +29,21 @@ limitations under the License. -->
   const emits = defineEmits(["click"]);
   const props = defineProps({
     data: {
-      type: Object as PropType<{ [key: string]: number[] }>,
+      type: Array as PropType<any>,
-      default: () => ({}),
+      default: () => [],
     },
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   });
   const appStore = useAppStoreWithOut();
   const option = computed(() => getOption());
   function getOption() {
-    const keys = Object.keys(props.data || {}).filter(
+    const { chartColors } = useLegendProcess();
-      (i: string) => Array.isArray(props.data[i]) && props.data[i].length,
+    const color: string[] = chartColors();
-    );
     const series = [];
     const grid = [];
     const xAxis = [];
     const yAxis = [];
-    for (const key of keys) {
+    for (const metric of props.data) {
-      series.push({
-        data: props.data[key].map((item: any, itemIndex: number) => [props.intervalTime[itemIndex], item]),
-        name: key,
-        type: "line",
-        symbol: "circle",
-        symbolSize: 4,
-        lineStyle: {
-          width: 2,
-          type: "solid",
-        },
-      });
       grid.push({
         top: 35,
         left: 0,
@@ -86,9 +74,20 @@ limitations under the License. -->
           show: true,
         },
       });
+      for (const item of metric.values) {
+        series.push({
+          data: item.values.map((item: any, itemIndex: number) => [props.intervalTime[itemIndex], item]),
+          name: metric.name,
+          type: "line",
+          symbol: "circle",
+          symbolSize: 4,
+          lineStyle: {
+            width: 2,
+            type: "solid",
+          },
+        });
+      }
     }
-    const { chartColors } = useLegendProcess();
-    const color: string[] = chartColors();
     const tooltip = {
       trigger: "axis",
       backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",

src/views/alarm/components/Snapshot.vue

@@ -13,23 +13,25 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div style="width: 800px; height: 600px">
+  <div class="snapshot flex-v">
-    <LineCharts :intervalTime="appStore.intervalTime" :data="result" />
+    <LineChart :intervalTime="appStore.intervalTime" :data="processResults()" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed } from "vue";
   import { useSnapshot } from "@/hooks/useSnapshot";
   import { useAppStoreWithOut } from "@/store/modules/app";
-  import LineCharts from "./Line.vue";
+  import LineChart from "./Line.vue";
 
   /*global defineProps */
   const props = defineProps({
     snapshot: { type: Object, default: () => {} },
   });
+  const { processResults } = useSnapshot(props.snapshot.metrics);
   const appStore = useAppStoreWithOut();
-  const result = computed(() => {
-    const { processResults } = useSnapshot(props.snapshot.metrics);
-    return processResults().reduce((acc, obj) => ({ ...acc, ...obj }), {});
-  });
 </script>
+<style lang="scss" scoped>
+  .snapshot {
+    width: 800px;
+    height: 600px;
+  }
+</style>