fix: update heat map

src/hooks/useProcessor.ts

@@ -28,7 +28,7 @@ export function useQueryProcessor(config: any) {
   const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const selectorStore = useSelectorStore();
-  if (!selectorStore.currentService) {
+  if (!selectorStore.currentService && dashboardStore.entity !== "All") {
     return;
   }
   const conditions: { [key: string]: unknown } = {

src/store/data.ts

@@ -101,3 +101,24 @@ export const ConfigData2: any = {
   },
   children: [],
 };
+export const ConfigData3: any = {
+  x: 0,
+  y: 0,
+  w: 8,
+  h: 12,
+  i: "0",
+  metrics: ["all_heatmap"],
+  metricTypes: ["readHeatMap"],
+  type: "Widget",
+  widget: {
+    title: "all_heatmap",
+    tips: "Tooltip",
+  },
+  graph: {
+    type: "HeatMap",
+  },
+  standard: {
+    unit: "min",
+  },
+  children: [],
+};

src/store/modules/dashboard.ts

@@ -18,7 +18,7 @@ import { defineStore } from "pinia";
 import { store } from "@/store";
 import { LayoutConfig } from "@/types/dashboard";
 import graph from "@/graph";
-import { ConfigData, ConfigData1, ConfigData2 } from "../data";
+import { ConfigData, ConfigData1, ConfigData2, ConfigData3 } from "../data";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { NewControl } from "../data";
@@ -146,12 +146,16 @@ export const dashboardStore = defineStore({
     },
     setEntity(type: string) {
       this.entity = type;
+      // todo
       if (type === "ServiceInstance") {
         this.layout = [ConfigData1];
       }
       if (type === "Endpoint") {
         this.layout = [ConfigData2];
       }
+      if (type == "All") {
+        this.layout = [ConfigData3];
+      }
     },
     setConfigs(param: { [key: string]: unknown }) {
       const actived = this.activedGridItem.split("-");

src/views/dashboard/configuration/graph-styles/HeatMap.vue

@@ -0,0 +1,59 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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>
+    <span class="label">{{ t("fontSize") }}</span>
+    <el-slider
+      class="slider"
+      v-model="fontSize"
+      show-input
+      input-size="small"
+      :min="10"
+      :max="20"
+      :step="1"
+      @change="updateConfig({ fontSize })"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const fontSize = ref(dashboardStore.selectedGrid.graph.fontSize);
+
+function updateConfig(param: { [key: string]: unknown }) {
+  const graph = {
+    ...dashboardStore.selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
+}
+</script>
+<style lang="scss" scoped>
+.slider {
+  width: 500px;
+  margin-top: -13px;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+</style>

src/views/dashboard/controls/Widget.vue

@@ -93,6 +93,10 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
+    if (dashboardStore.entity === EntityType[1].value) {
+      queryMetrics();
+    }
+
     async function queryMetrics() {
       const params = await useQueryProcessor(props.data);
       if (!params) {
@@ -143,10 +147,7 @@ export default defineComponent({
     watch(
       () => [selectorStore.currentPod],
       () => {
-        if (
-          dashboardStore.entity === EntityType[0].value ||
-          dashboardStore.entity === EntityType[1].value
-        ) {
+        if (dashboardStore.entity === EntityType[0].value) {
           return;
         }
         queryMetrics();

src/views/dashboard/data.ts

@@ -41,7 +41,7 @@ export const MetricChartType: any = {
   ],
   sortMetrics: [{ label: "Top List", value: "TopList" }],
   readLabeledMetricsValues: [{ label: "Line", value: "Line" }],
-  readHeatMap: [{ label: "Heatmap", value: "Heatmap" }],
+  readHeatMap: [{ label: "Heat Map", value: "HeatMap" }],
   readSampledRecords: [{ label: "Top List", value: "TopList" }],
 };
 export const DefaultGraphConfig: { [key: string]: any } = {
@@ -93,6 +93,9 @@ export const DefaultGraphConfig: { [key: string]: any } = {
     dashboardName: "",
     fontSize: 12,
   },
+  HeatMap: {
+    type: "HeatMap",
+  },
 };
 
 export enum MetricsType {

src/views/dashboard/graphs/HeatMap.vue

@@ -23,7 +23,9 @@ import { StandardConfig } from "@/types/dashboard";
 /*global defineProps */
 const props = defineProps({
   data: {
-    type: Object as PropType<{ nodes: number[][]; buckets: number[][] }>,
+    type: Object as PropType<{
+      [key: string]: { nodes: number[][]; buckets: number[][] };
+    }>,
     default: () => ({}),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
@@ -37,8 +39,11 @@ const props = defineProps({
   },
 });
 const option = computed(() => getOption());
+
 function getOption() {
-  const source = (props.data.nodes || []).map((d: number[]) => d[2]);
+  const metric = props.config.metrics[0];
+  const nodes = (props.data[metric] && props.data[metric].nodes) || [];
+  const source = (nodes || []).map((d: number[]) => d[2]);
   const maxItem = Math.max(...source);
   const minItem = Math.min(...source);
   const colorBox = [
@@ -63,15 +68,16 @@ function getOption() {
     "#761212",
     "#671010",
   ];
+
   return {
     tooltip: {
       position: "top",
-      formatter: (a: any) =>
-        `${a.data[1] * 100}${props.standard.unit}  [ ${a.data[2]} ]`,
-      textStyle: {
-        fontSize: 13,
-        color: "#ccc",
-      },
+      // formatter: (a: any) =>
+      //   `${a.data[1] * 100}${props.standard.unit}  [ ${a.data[2]} ]`,
+      // textStyle: {
+      //   fontSize: 13,
+      //   color: "#ccc",
+      // },
     },
     grid: {
       top: 15,
@@ -112,7 +118,7 @@ function getOption() {
     series: [
       {
         type: "heatmap",
-        data: props.data.nodes || [],
+        data: nodes || [],
         emphasis: {
           itemStyle: {
             shadowBlur: 10,

src/views/dashboard/graphs/index.ts

@@ -18,7 +18,7 @@
 import Area from "./Area.vue";
 import Line from "./Line.vue";
 import Bar from "./Bar.vue";
-import Heatmap from "./HeatMap.vue";
+import HeatMap from "./HeatMap.vue";
 import TopList from "./TopList.vue";
 import Table from "./Table.vue";
 import Pie from "./Pie.vue";
@@ -30,7 +30,7 @@ import ServiceList from "./ServiceList.vue";
 export default {
   Line,
   Bar,
-  Heatmap,
+  HeatMap,
   TopList,
   Area,
   Table,

src/views/dashboard/panel/Tool.vue

@@ -40,7 +40,7 @@ limitations under the License. -->
           size="mini"
           placeholder="Select a data"
           @change="changePods"
-          class="selectors"
+          class="selectorPod"
         />
       </div>
       <div class="selectors-item" v-if="states.key === 2">
@@ -149,6 +149,9 @@ async function getServices() {
   if (!dashboardStore.layerId) {
     return;
   }
+  if (dashboardStore.entity === EntityType[1].value) {
+    return;
+  }
   const json = await selectorStore.fetchServices(dashboardStore.layerId);
   if (json.errors) {
     ElMessage.error(json.errors);
@@ -173,7 +176,7 @@ async function changeService(service: Service[]) {
 
 function changePods(pod: Option[]) {
   if (pod[0]) {
-    selectorStore.setCurrentPod(pod[0].value);
+    selectorStore.setCurrentPod(pod[0]);
   } else {
     selectorStore.setCurrentPod("");
   }
@@ -260,10 +263,14 @@ async function fetchPods(type: string, setPod: boolean) {
 }
 
 .selectors {
-  min-width: 180px;
+  min-width: 200px;
 }
 
 .selectors-item {
   margin-right: 5px;
 }
+
+.selectorPod {
+  width: 340px;
+}
 </style>