feat: add a calculation and update selectors param (#53)

src/hooks/data.ts

@@ -32,6 +32,7 @@ export enum Calculations {
   Precision = "precision",
   ConvertSeconds = "convertSeconds",
   ConvertMilliseconds = "convertMilliseconds",
+  MsTos = "msTos",
 }
 export enum sizeEnum {
   XS = "XS",

src/hooks/useProcessor.ts

@@ -351,6 +351,9 @@ export function aggregation(val: number, config: any): number | string {
     case Calculations.Precision:
       data = data.toFixed(2);
       break;
+    case Calculations.MsTos:
+      data = val / 1000;
+      break;
     default:
       data;
       break;

src/layout/components/NavBar.vue

@@ -66,7 +66,7 @@ const theme = ref<string>("light");
 getVersion();
 const setConfig = (value: string) => {
   pageName.value = value || "";
-  theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
+  // theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
 };
 const time = computed(() => [
   appStore.durationRow.start,
@@ -94,6 +94,9 @@ watch(
   }
 );
 async function getVersion() {
+  if (appStore.version) {
+    return;
+  }
   const res = await appStore.fetchVersion();
   if (res.errors) {
     ElMessage.error(res.errors);

src/views/dashboard/controls/Text.vue

@@ -38,12 +38,17 @@ limitations under the License. -->
       class="body"
       :style="{
         backgroundColor: TextColors[graph.backgroundColor],
-        color: TextColors[graph.fontColor],
-        fontSize: graph.fontSize + 'px',
         textAlign: graph.textAlign,
       }"
     >
-      <a :href="graph.url" target="_blank">
+      <a
+        :href="graph.url"
+        target="_blank"
+        :style="{
+          color: TextColors[graph.fontColor],
+          fontSize: graph.fontSize + 'px',
+        }"
+      >
         {{ graph.content }}
       </a>
     </div>

src/views/dashboard/controls/Widget.vue

@@ -109,11 +109,14 @@ export default defineComponent({
     const selectorStore = useSelectorStore();
     const graph = computed(() => props.data.graph || {});
     const widget = computed(() => props.data.widget || {});
-    const isList = ListChartTypes.includes(
-      (props.data.graph && props.data.graph.type) || ""
+    const isList = computed(() =>
+      ListChartTypes.includes((props.data.graph && props.data.graph.type) || "")
     );
 
-    if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList) {
+    if (
+      (props.needQuery || !dashboardStore.currentDashboard.id) &&
+      !isList.value
+    ) {
       queryMetrics();
     }
 
@@ -162,11 +165,8 @@ export default defineComponent({
         if (props.data.i !== dashboardStore.selectedGrid.i) {
           return;
         }
-        const isList = ListChartTypes.includes(
-          (props.data.graph && props.data.graph.type) || ""
-        );
         const chart = dashboardStore.selectedGrid.graph || {};
-        if (ListChartTypes.includes(chart.type) || isList) {
+        if (ListChartTypes.includes(chart.type) || isList.value) {
           return;
         }
         queryMetrics();
@@ -175,10 +175,7 @@ export default defineComponent({
     watch(
       () => [selectorStore.currentService, selectorStore.currentDestService],
       () => {
-        const isList = ListChartTypes.includes(
-          (props.data.graph && props.data.graph.type) || ""
-        );
-        if (isList) {
+        if (isList.value) {
           return;
         }
         if (
@@ -195,12 +192,18 @@ export default defineComponent({
         if (dashboardStore.entity === EntityType[0].value) {
           return;
         }
+        if (isList.value) {
+          return;
+        }
         queryMetrics();
       }
     );
     watch(
       () => appStore.durationTime,
       () => {
+        if (isList.value) {
+          return;
+        }
         if (dashboardStore.entity === EntityType[1].value) {
           queryMetrics();
         }

src/views/dashboard/data.ts

@@ -272,4 +272,5 @@ export const CalculationOpts = [
   },
   { label: "Convert seconds to YYYY-MM-DD HH:mm:ss", value: "convertSeconds" },
   { label: "Precision is 2", value: "precision" },
+  { label: "Milliseconds to seconds", value: "msTos" },
 ];

src/views/dashboard/graphs/EndpointList.vue

@@ -203,8 +203,11 @@ function getLabel(metric: string, index: number) {
   return encodeURIComponent(metric);
 }
 watch(
-  () => [props.config.metricTypes, props.config.metrics],
-  async () => {
+  () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
     queryEndpointMetrics(endpoints.value);
   }
 );
@@ -214,6 +217,15 @@ watch(
     queryEndpoints();
   }
 );
+watch(
+  () => [...(props.config.metricConfig || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
+    queryEndpointMetrics(endpoints.value);
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";

src/views/dashboard/graphs/InstanceList.vue

@@ -257,8 +257,11 @@ function getLabel(metric: string, index: number) {
 }
 
 watch(
-  () => [props.config.metricTypes, props.config.metrics],
-  () => {
+  () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
     queryInstanceMetrics(instances.value);
   }
 );
@@ -268,6 +271,15 @@ watch(
     queryInstance();
   }
 );
+watch(
+  () => [...(props.config.metricConfig || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
+    queryInstanceMetrics(instances.value);
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";

src/views/dashboard/graphs/ServiceList.vue

@@ -143,7 +143,6 @@ const sortServices = ref<(Service & { merge: boolean })[]>([]);
 const colMetrics = computed(() =>
   props.config.metrics.filter((d: string) => d)
 );
-
 queryServices();
 
 async function queryServices() {
@@ -296,9 +295,22 @@ function getLabel(metric: string, index: number) {
   }
   return encodeURIComponent(metric);
 }
+
 watch(
-  () => [props.config.metricTypes, props.config.metrics],
-  () => {
+  () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
+    queryServiceMetrics(services.value);
+  }
+);
+watch(
+  () => [...(props.config.metricConfig || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
     queryServiceMetrics(services.value);
   }
 );

src/views/dashboard/panel/Tool.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
     <div class="flex-h">
-      <div class="selectors-item" v-if="states.key !== 10">
+      <div class="selectors-item" v-if="key !== 10">
         <span class="label">$Service</span>
         <Selector
           v-model="states.currentService"
@@ -26,7 +26,7 @@ limitations under the License. -->
           class="selectors"
         />
       </div>
-      <div class="selectors-item" v-if="states.key === 3 || states.key === 4">
+      <div class="selectors-item" v-if="key === 3 || key === 4">
         <span class="label">
           {{
             ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
@@ -47,7 +47,7 @@ limitations under the License. -->
           "
         />
       </div>
-      <div class="selectors-item" v-if="states.key === 2 || states.key === 4">
+      <div class="selectors-item" v-if="key === 2 || key === 4">
         <span class="label">$DestinationService</span>
         <Selector
           v-model="states.currentDestService"
@@ -58,7 +58,7 @@ limitations under the License. -->
           class="selectors"
         />
       </div>
-      <div class="selectors-item" v-if="states.key === 4">
+      <div class="selectors-item" v-if="key === 4">
         <span class="label">
           {{
             dashboardStore.entity === "EndpointRelation"
@@ -120,7 +120,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, computed } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -165,6 +165,13 @@ const states = reactive<{
   currentDestService: "",
   currentDestPod: "",
 });
+const key = computed(() => {
+  const type = EntityType.find(
+    (d: Option) => d.value === dashboardStore.entity
+  );
+
+  return (type && type.key) || 0;
+});
 
 setCurrentDashboard();
 appStore.setEventStack([initSelector]);
@@ -184,10 +191,6 @@ function setCurrentDashboard() {
     dashboardStore.setLayer(params.layerId);
     dashboardStore.setEntity(params.entity);
   }
-  const type = EntityType.filter(
-    (d: Option) => d.value === dashboardStore.entity
-  )[0];
-  states.key = (type && type.key) || 0;
 }
 
 async function setSelector() {
@@ -242,9 +245,9 @@ async function setSourceSelector() {
     return;
   }
   const pod = params.podId || selectorStore.pods[0].id;
-  const currentPod = selectorStore.pods.filter(
+  const currentPod = selectorStore.pods.find(
     (d: { id: string }) => d.id === pod
-  )[0];
+  );
   if (currentPod) {
     selectorStore.setCurrentPod(currentPod);
     states.currentPod = currentPod.label;
@@ -275,6 +278,9 @@ async function setDestSelector() {
 }
 
 async function getServices() {
+  if (key.value === 10 || key.value === 0) {
+    return;
+  }
   if (!dashboardStore.layerId) {
     return;
   }