feat: set configs

src/hooks/useProcessor.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RespFields, MetricQueryTypes, CalculationType } from "./data";
+import { RespFields, MetricQueryTypes } from "./data";
 import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
@@ -186,28 +186,6 @@ export function useSourceProcessor(
 
   return source;
 }
-function aggregation(json: {
-  data: number;
-  type: string;
-  aggregationNum: number;
-}) {
-  if (isNaN(json.aggregationNum)) {
-    return json.data;
-  }
-  if (json.type === CalculationType.Plus) {
-    return json.data + json.aggregationNum;
-  }
-  if (json.type === CalculationType.Minus) {
-    return json.data - json.aggregationNum;
-  }
-  if (json.type === CalculationType.Multiplication) {
-    return json.data * json.aggregationNum;
-  }
-  if (json.type === CalculationType.Division) {
-    return json.data / json.aggregationNum;
-  }
-  return json.data;
-}
 
 export function useQueryPodsMetrics(
   pods: Array<Instance | Endpoint>,
@@ -258,10 +236,14 @@ export function usePodsSource(
   const data = pods.map((d: Instance | any, idx: number) => {
     config.metrics.map((name: string, index: number) => {
       const key = name + idx + index;
-
-      d[name] = resp.data[key].values.values.map(
-        (d: { value: number }) => d.value
-      );
+      if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValue) {
+        d[name] = resp.data[key];
+      }
+      if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
+        d[name] = resp.data[key].values.values.map(
+          (d: { value: number }) => d.value
+        );
+      }
     });
 
     return d;

src/store/modules/dashboard.ts

@@ -57,6 +57,8 @@ export const dashboardStore = defineStore({
         ...NewControl,
         i: String(this.layout.length),
         type,
+        metricTypes: [""],
+        metrics: [""],
       };
       if (type === "Tab") {
         newWidget.h = 24;

src/store/modules/selectors.ts

@@ -62,7 +62,6 @@ export const selectorStore = defineStore({
 
       if (!res.data.errors) {
         this.services = res.data.data.services || [];
-        this.currentService = this.services.length ? this.services[0] : null;
       }
       return res.data;
     },
@@ -79,7 +78,6 @@ export const selectorStore = defineStore({
       });
       if (!res.data.errors) {
         this.pods = res.data.data.pods || [];
-        this.currentPod = this.pods.length ? this.pods[0] : null;
       }
       return res.data;
     },
@@ -104,7 +102,6 @@ export const selectorStore = defineStore({
       });
       if (!res.data.errors) {
         this.pods = res.data.data.pods || [];
-        this.currentPod = this.pods.length ? this.pods[0] : null;
       }
       return res.data;
     },

src/types/dashboard.ts

@@ -77,7 +77,8 @@ export interface AreaConfig {
 export interface CardConfig {
   type?: string;
   fontSize?: number;
-  showUint: boolean;
+  showUint?: boolean;
+  textAlign?: "center" | "right" | "left";
 }
 
 export interface TableConfig {

src/views/dashboard/configuration/ConfigEdit.vue

@@ -28,7 +28,12 @@ limitations under the License. -->
           :is="dashboardStore.selectedGrid.graph.type"
           :intervalTime="appStoreWithOut.intervalTime"
           :data="states.source"
-          :config="dashboardStore.selectedGrid.graph"
+          :config="{
+            ...dashboardStore.selectedGrid.graph,
+            i: dashboardStore.selectedGrid.i,
+            metrics: dashboardStore.selectedGrid.metrics,
+            metricTypes: dashboardStore.selectedGrid.metricTypes,
+          }"
         />
         <div v-show="!dashboardStore.selectedGrid.graph.type" class="no-data">
           {{ t("noData") }}
@@ -114,7 +119,6 @@ export default defineComponent({
     function applyConfig() {
       dashboardStore.setConfigs(dashboardStore.selectedGrid);
       dashboardStore.setConfigPanel(false);
-      dashboardStore.selectWidget(null);
     }
 
     return {

src/views/dashboard/configuration/MetricOptions.vue

@@ -155,7 +155,7 @@ async function setMetricType(catalog?: string) {
 function setVisTypes() {
   let graphs = [];
   if (dashboardStore.entity === EntityType[0].value) {
-    graphs = ChartTypes.filter((d: Option) => d.value !== ChartTypes[8].value);
+    graphs = ChartTypes.filter((d: Option) => d.value !== ChartTypes[7].value);
   } else if (dashboardStore.entity === EntityType[1].value) {
     graphs = ChartTypes.filter(
       (d: Option) => !PodsChartTypes.includes(d.value)
@@ -188,7 +188,7 @@ function changeChartType(item: Option) {
     EndpointList: EntityType[2].value,
     ServiceList: EntityType[0].value,
   };
-  if (catalog[graph.type] || dashboardStore.entity) {
+  if (catalog[graph.type]) {
     setMetricType(catalog[graph.type]);
   }
 }
@@ -212,6 +212,9 @@ function changeMetrics(index: number, arr: (Option & { type: string })[]) {
     ...dashboardStore.selectedGrid,
     ...{ metricTypes: states.metricTypes, metrics: states.metrics },
   });
+  if (states.isTable) {
+    return;
+  }
   queryMetrics();
 }
 
@@ -238,6 +241,9 @@ function changeMetricType(index: number, opt: Option[]) {
     ...dashboardStore.selectedGrid,
     ...{ metricTypes: states.metricTypes },
   });
+  if (states.isTable) {
+    return;
+  }
   queryMetrics();
 }
 async function queryMetrics() {

src/views/dashboard/controls/Image.vue

@@ -1,35 +0,0 @@
-<!-- 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>
-  <input v-show="!imgUrl" type="file" @change="fileChange" accept="image/*" />
-  <img v-if="imgUrl" :src="imgUrl" alt="" />
-</template>
-<script lang="ts" setup>
-import { ref } from "vue";
-const imgUrl = ref<string>("");
-const fileChange = (e: any) => {
-  const fileList = e.target.files;
-  if (fileList.length === 0) {
-    imgUrl.value = "";
-    return;
-  }
-  const file = fileList[0];
-  const reader = new FileReader();
-  reader.onload = (event: any) => {
-    imgUrl.value = event.target.result;
-  };
-  reader.readAsDataURL(file);
-};
-</script>

src/views/dashboard/controls/Widget.vue

@@ -51,6 +51,7 @@ limitations under the License. -->
           ...data.graph,
           metrics: data.metrics,
           metricTypes: data.metricTypes,
+          i: data.i,
         }"
         :standard="data.standard"
       />
@@ -69,6 +70,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import graphs from "../graphs";
 import { useI18n } from "vue-i18n";
 import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
+import { TableChartTypes } from "../data";
 
 const props = {
   data: {
@@ -83,7 +85,6 @@ export default defineComponent({
   props,
   setup(props) {
     const { t } = useI18n();
-    const params = useRoute().params;
     const loading = ref<boolean>(false);
     const state = reactive<{ source: { [key: string]: unknown } }>({
       source: {},
@@ -93,10 +94,6 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    if (params.serviceId) {
-      queryMetrics();
-    }
-
     async function queryMetrics() {
       const params = await useQueryProcessor(props.data);
       if (!params) {
@@ -127,27 +124,18 @@ export default defineComponent({
     watch(
       () => [props.data.metricTypes, props.data.metrics],
       () => {
-        queryMetrics();
-      }
-    );
-    watch(
-      () => selectorStore.currentService,
-      () => {
-        if (dashboardStore.entity !== "Service") {
+        if (props.data.i !== dashboardStore.selectedGrid.i) {
+          return;
+        }
+        if (TableChartTypes.includes(dashboardStore.selectedGrid.graph.type)) {
           return;
         }
         queryMetrics();
       }
     );
     watch(
-      () => selectorStore.currentPod,
+      () => [selectorStore.currentService, selectorStore.currentPod],
       () => {
-        if (
-          dashboardStore.entity === "All" ||
-          dashboardStore.entity === "Service"
-        ) {
-          return;
-        }
         queryMetrics();
       }
     );

src/views/dashboard/data.ts

@@ -23,11 +23,11 @@ export const ChartTypes = [
   { label: "Bar", value: "Bar" },
   { label: "Line", value: "Line" },
   { label: "Area", value: "Area" },
-  { label: "Heatmap", value: "Heatmap" },
-  { label: "Pie", value: "Pie" },
+  // { label: "Pie", value: "Pie" },
   { label: "Card", value: "Card" },
   { label: "Top List", value: "TopList" },
   { label: "Table", value: "Table" },
+  { label: "Heatmap", value: "Heatmap" },
   { label: "Service List", value: "ServiceList" },
   { label: "Endpoint List", value: "EndpointList" },
   { label: "Instance List", value: "InstanceList" },
@@ -66,6 +66,7 @@ export const DefaultGraphConfig: { [key: string]: any } = {
   Card: {
     type: "Card",
     fontSize: 14,
+    textAlign: "center",
     showUint: true,
   },
   Table: {

src/views/dashboard/graphs/Card.vue

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="chart-card" :style="{ fontSize: `${config.fontSize}px` }">
+  <div
+    class="chart-card"
+    :style="{ fontSize: `${config.fontSize}px`, textAlign: config.textAlign }"
+  >
     {{
       typeof singleVal === "string"
         ? singleVal
@@ -37,7 +40,7 @@ const props = defineProps({
   },
   config: {
     type: Object as PropType<CardConfig>,
-    default: () => ({ fontSize: 12, showUint: true }),
+    default: () => ({ fontSize: 12, showUint: true, textAlign: "center" }),
   },
   standard: {
     type: Object as PropType<StandardConfig>,
@@ -51,5 +54,7 @@ const singleVal = computed(() => props.data[key.value]);
 .chart-card {
   box-sizing: border-box;
   color: #333;
+  height: 100%;
+  line-height: 100%;
 }
 </style>

src/views/dashboard/graphs/EndpointList.vue

@@ -82,13 +82,13 @@ import Line from "./Line.vue";
 import { EntityType } from "../data";
 
 /*global defineProps */
-defineProps({
+const props = defineProps({
   data: {
     type: Object,
   },
   config: {
-    type: Object as PropType<EndpointListConfig>,
-    default: () => ({ dashboardName: "", fontSize: 12 }),
+    type: Object as PropType<EndpointListConfig & { i: string }>,
+    default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
@@ -155,7 +155,9 @@ watch(
     dashboardStore.selectedGrid.metrics,
   ],
   () => {
-    queryEndpointMetrics(endpoints.value);
+    if (dashboardStore.selectedGrid.i === props.config.i) {
+      queryEndpointMetrics(endpoints.value);
+    }
   }
 );
 </script>

src/views/dashboard/graphs/InstanceList.vue

@@ -34,7 +34,7 @@ limitations under the License. -->
         <template #default="scope">
           <router-link
             class="link"
-            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
+            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}
@@ -42,17 +42,23 @@ limitations under the License. -->
         </template>
       </el-table-column>
       <el-table-column
-        v-for="(metric, index) in dashboardStore.selectedGrid.metrics"
+        v-for="(metric, index) in config.metrics"
         :label="metric"
         :key="metric + index"
       >
         <template #default="scope">
           <div class="chart">
             <Line
+              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>
@@ -74,6 +80,7 @@ import { ref, watch } from "vue";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import Line from "./Line.vue";
+import Card from "./Card.vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { InstanceListConfig } from "@/types/dashboard";
@@ -82,10 +89,22 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
 
 /*global defineProps */
-defineProps({
+const props = defineProps({
   config: {
-    type: Object as PropType<InstanceListConfig>,
-    default: () => ({ dashboardName: "", fontSize: 12 }),
+    type: Object as PropType<
+      InstanceListConfig & {
+        i: string;
+        metrics: string[];
+        metricTypes: string[];
+      }
+    >,
+    default: () => ({
+      dashboardName: "",
+      fontSize: 12,
+      i: "",
+      metrics: [],
+      metricTypes: [],
+    }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
@@ -109,13 +128,10 @@ async function queryInstance() {
     return;
   }
   searchInstances.value = selectorStore.pods;
-
-  const currentInstances = searchInstances.value.splice(0, pageSize);
-  queryInstanceMetrics(currentInstances);
 }
 
 async function queryInstanceMetrics(currentInstances: Instance[]) {
-  const { metrics } = dashboardStore.selectedGrid;
+  const { metrics } = props.config;
 
   if (metrics.length && metrics[0]) {
     const params = await useQueryPodsMetrics(
@@ -150,12 +166,12 @@ function searchList() {
 }
 
 watch(
-  () => [
-    dashboardStore.selectedGrid.metricTypes,
-    dashboardStore.selectedGrid.metrics,
-  ],
+  () => [props.config.metricTypes, props.config.metrics],
   () => {
-    queryInstanceMetrics(instances.value);
+    if (dashboardStore.selectedGrid.i === props.config.i) {
+      const currentInstances = searchInstances.value.splice(0, pageSize);
+      queryInstanceMetrics(currentInstances);
+    }
   }
 );
 </script>
@@ -163,6 +179,6 @@ watch(
 @import "./style.scss";
 
 .chart {
-  height: 39px;
+  height: 40px;
 }
 </style>

src/views/dashboard/graphs/ServiceList.vue

@@ -83,7 +83,7 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
 
 /*global defineProps */
-defineProps({
+const props = defineProps({
   data: {
     type: Object,
   },
@@ -152,7 +152,9 @@ watch(
     dashboardStore.selectedGrid.metrics,
   ],
   () => {
-    queryServiceMetrics(services.value);
+    if (dashboardStore.selectedGrid.i === props.config.i) {
+      queryServiceMetrics(services.value);
+    }
   }
 );
 </script>

src/views/dashboard/graphs/Table.vue

@@ -22,9 +22,9 @@ limitations under the License. -->
       >
         <div class="name" :style="`width: ${nameWidth}px`">
           {{ config.tableHeaderCol1 || $t("name") }}
-          <i class="r cp" ref="draggerName"
-            ><rk-icon icon="settings_ethernet"
-          /></i>
+          <i class="r cp" ref="draggerName">
+            <Icon iconName="settings_ethernet" size="middle" />
+          </i>
         </div>
         <div class="value-col" v-if="config.showTableValues">
           {{ config.tableHeaderCol2 || $t("value") }}
@@ -50,7 +50,7 @@ import type { PropType } from "vue";
 /*global defineProps */
 const props = defineProps({
   data: {
-    type: Object as PropType<{ [key: string]: number[][] }>,
+    type: Object as PropType<{ [key: string]: number[] }>,
     default: () => ({}),
   },
   config: {

src/views/dashboard/panel/Tool.vue

@@ -13,8 +13,9 @@ 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 class="dashboard-tool flex-h" v-if="!params.serviceId">
-    <div class="flex-h">
+  <div class="dashboard-tool flex-h">
+    <div v-if="params.serviceId"></div>
+    <div v-else class="flex-h">
       <div class="selectors-item" v-if="states.key !== 10">
         <span class="label">$Service</span>
         <Selector
@@ -143,6 +144,9 @@ async function getServices() {
     ElMessage.error(json.errors);
     return;
   }
+  selectorStore.setCurrentService(
+    selectorStore.services.length ? selectorStore.services[0] : null
+  );
   states.currentService = selectorStore.currentService.value;
   fetchPods(dashboardStore.entity);
 }
@@ -189,10 +193,16 @@ async function fetchPods(type: string) {
   switch (type) {
     case "Endpoint":
       resp = await selectorStore.getEndpoints();
+      selectorStore.setCurrentPod(
+        selectorStore.pods.length ? selectorStore.pods[0] : null
+      );
       states.currentPod = selectorStore.currentPod.label;
       break;
     case "ServiceInstance":
       resp = await selectorStore.getServiceInstances();
+      selectorStore.setCurrentPod(
+        selectorStore.pods.length ? selectorStore.pods[0] : null
+      );
       states.currentPod = selectorStore.currentPod.label;
       break;
     default: