feat: update widget page

src/views/dashboard/Widget.vue

@@ -15,60 +15,108 @@ limitations under the License. -->
 <template>
   <div class="render-chart">
     <component
-      :is="config.graph"
+      :is="graph.type"
       :intervalTime="appStoreWithOut.intervalTime"
       :data="source"
       :config="{
         i: 0,
-        metrics: config.metrics,
-        metricTypes: config.metricTypes,
-        metricConfig: config.metricConfig,
+        ...graph,
+        metrics: widget.metricNames,
+        metricTypes: widget.metricTypes,
+        metricConfig: widget.metricConfig,
       }"
       :needQuery="true"
     />
-    <div v-show="!config.type" class="no-data">
+    <div v-show="!widget.type" class="no-data">
       {{ t("noData") }}
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-  import { computed, ref } from "vue";
+<script lang="ts">
+  import { computed, ref, defineComponent } from "vue";
   import { useI18n } from "vue-i18n";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useRoute } from "vue-router";
+  import { useSelectorStore } from "@/store/modules/selectors";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
+  import graphs from "./graphs";
+  import { EntityType, QueryOrders, Status } from "./data";
 
-  const { t } = useI18n();
-  const appStoreWithOut = useAppStoreWithOut();
-  const config = computed<any>(() => useRoute().params);
-  const source = ref<any>({});
-  const loading = ref<boolean>(false);
-  const dashboardStore = useDashboardStore();
+  export default defineComponent({
+    name: "WidgetEdit",
+    components: {
+      ...graphs,
+    },
+    setup() {
+      const { t } = useI18n();
+      const appStoreWithOut = useAppStoreWithOut();
+      const selectorStore = useSelectorStore();
+      const widget = computed<any>(() => JSON.parse(useRoute().params.config as string));
+      const graph = computed(() => widget.value.graph || {});
+      const source = ref<unknown>({});
+      const loading = ref<boolean>(false);
+      const dashboardStore = useDashboardStore();
 
-  queryMetrics();
-
-  async function queryMetrics() {
-    const metricTypes = config.value.metricTypes || [];
-    const metrics = config.value.metrics || [];
-    const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
-    const params = await useQueryProcessor({ ...config.value.data, catalog });
-
-    if (!params) {
-      source.value = {};
-      return;
-    }
-    loading.value = true;
-    const json = await dashboardStore.fetchMetricValue(params);
-    loading.value = false;
-    if (!json) {
-      return;
-    }
-    const d = {
-      metrics: config.value.metrics || [],
-      metricTypes: config.value.metricTypes || [],
-      metricConfig: config.value.metricConfig || [],
-    };
-    source.value = useSourceProcessor(json, d);
-  }
+      init();
+      async function init() {
+        dashboardStore.setEntity(widget.value.entity);
+        await setSelector();
+        await queryMetrics();
+      }
+      async function setSelector() {
+        if (widget.value.serviceId) {
+          await selectorStore.getService(widget.value.serviceId);
+        }
+        if (widget.value.serviceInstanceId) {
+          await selectorStore.getInstance(widget.value.serviceInstanceId);
+        }
+        if (widget.value.serviceInstanceId) {
+          await selectorStore.getEndpoint(widget.value.endpointId);
+        }
+      }
+      async function queryMetrics() {
+        const metricTypes = widget.value.metricTypes || [];
+        const metrics = widget.value.metricNames || [];
+        const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
+        const params = await useQueryProcessor({ ...widget.value.data, catalog });
+        if (!params) {
+          source.value = {};
+          return;
+        }
+        loading.value = true;
+        const json = await dashboardStore.fetchMetricValue(params);
+        loading.value = false;
+        if (!json) {
+          return;
+        }
+        const d = {
+          metrics: widget.value.metricNames || [],
+          metricTypes: widget.value.metricTypes || [],
+          metricConfig: widget.value.metricConfig || [],
+        };
+        source.value = useSourceProcessor(json, d);
+      }
+      return {
+        t,
+        graph,
+        source,
+        appStoreWithOut,
+        widget,
+      };
+    },
+  });
 </script>
+<style lang="scss" scoped>
+  .render-chart {
+    padding: 5px;
+    height: 400px;
+    width: 100%;
+  }
+
+  .no-data {
+    font-size: 14px;
+    text-align: center;
+    line-height: 400px;
+  }
+</style>