feat: create global actions for setting page title and auto refresh pages (#13)

* fix: update heat map

* feat: update servicelist

* fix: update list

* feat: update page with changing times

* feat: set auto fresh

* feat: set page titles

src/views/dashboard/graphs/EndpointList.vue

@@ -49,10 +49,16 @@ limitations under the License. -->
         <template #default="scope">
           <div class="chart">
             <Line
-              :data="{ metric: scope.row[metric] }"
+              v-if="config.metricTypes[index] === 'readMetricsValues'"
+              :data="{ [metric]: scope.row[metric] }"
               :intervalTime="intervalTime"
               :config="{ showXAxis: false, showYAxis: false }"
             />
+            <Card
+              v-else
+              :data="{ [metric]: scope.row[metric] }"
+              :config="{ textAlign: 'left' }"
+            />
           </div>
         </template>
       </el-table-column>
@@ -79,6 +85,7 @@ import { Endpoint } from "@/types/selector";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import Line from "./Line.vue";
+import Card from "./Card.vue";
 import { EntityType } from "../data";
 
 /*global defineProps */
@@ -158,7 +165,9 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    queryEndpointMetrics(endpoints.value);
+    if (dashboardStore.showConfig) {
+      queryEndpointMetrics(endpoints.value);
+    }
   }
 );
 </script>

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/InstanceList.vue

@@ -170,7 +170,9 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    queryInstanceMetrics(instances.value);
+    if (dashboardStore.showConfig) {
+      queryInstanceMetrics(instances.value);
+    }
   }
 );
 </script>

src/views/dashboard/graphs/ServiceList.vue

@@ -34,7 +34,7 @@ limitations under the License. -->
         <template #default="scope">
           <router-link
             class="link"
-            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${selectorStore.currentService.id}/${config.dashboardName}`"
+            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${scope.row.id}/${config.dashboardName}`"
             :key="1"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
@@ -50,10 +50,16 @@ limitations under the License. -->
         <template #default="scope">
           <div class="chart">
             <Line
-              :data="{ metric: scope.row[metric] }"
+              v-if="config.metricTypes[index] === 'readMetricsValues'"
+              :data="{ [metric]: scope.row[metric] }"
               :intervalTime="intervalTime"
               :config="{ showXAxis: false, showYAxis: false }"
             />
+            <Card
+              v-else
+              :data="{ [metric]: scope.row[metric] }"
+              :config="{ textAlign: 'left' }"
+            />
           </div>
         </template>
       </el-table-column>
@@ -76,6 +82,7 @@ import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import { ServiceListConfig } from "@/types/dashboard";
 import Line from "./Line.vue";
+import Card from "./Card.vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { Service } from "@/types/selector";
@@ -111,13 +118,14 @@ queryServices();
 
 async function queryServices() {
   chartLoading.value = true;
-  const resp = await selectorStore.fetchServices();
+  const resp = await selectorStore.fetchServices(dashboardStore.layerId);
 
   chartLoading.value = false;
   if (resp.errors) {
     ElMessage.error(resp.errors);
   }
   services.value = selectorStore.services.splice(0, pageSize);
+  queryServiceMetrics(services.value);
 }
 async function queryServiceMetrics(currentServices: Service[]) {
   const { metrics } = props.config;
@@ -155,7 +163,9 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    queryServiceMetrics(services.value);
+    if (dashboardStore.showConfig) {
+      queryServiceMetrics(services.value);
+    }
   }
 );
 </script>

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,