feat: set configs

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();
       }
     );