feat: update widget page

src/views/dashboard/Widget.vue

@@ -15,45 +15,71 @@ 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,
+        ...graph,
-        metricTypes: config.metricTypes,
+        metrics: widget.metricNames,
-        metricConfig: config.metricConfig,
+        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>
+<script lang="ts">
-  import { computed, ref } from "vue";
+  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";
 
+  export default defineComponent({
+    name: "WidgetEdit",
+    components: {
+      ...graphs,
+    },
+    setup() {
       const { t } = useI18n();
       const appStoreWithOut = useAppStoreWithOut();
-  const config = computed<any>(() => useRoute().params);
+      const selectorStore = useSelectorStore();
-  const source = ref<any>({});
+      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();
+      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 = config.value.metricTypes || [];
+        const metricTypes = widget.value.metricTypes || [];
-    const metrics = config.value.metrics || [];
+        const metrics = widget.value.metricNames || [];
         const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
-    const params = await useQueryProcessor({ ...config.value.data, catalog });
+        const params = await useQueryProcessor({ ...widget.value.data, catalog });
-
         if (!params) {
           source.value = {};
           return;
@@ -65,10 +91,32 @@ limitations under the License. -->
           return;
         }
         const d = {
-      metrics: config.value.metrics || [],
+          metrics: widget.value.metricNames || [],
-      metricTypes: config.value.metricTypes || [],
+          metricTypes: widget.value.metricTypes || [],
-      metricConfig: config.value.metricConfig || [],
+          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>