fix: update loading

src/views/dashboard/configuration/ConfigEdit.vue

@@ -49,6 +49,7 @@ limitations under the License. -->
               placeholder="Select a metric"
               @change="changeValueType"
               class="selectors"
+              v-loading="loading"
             />
           </div>
         </el-collapse-item>
@@ -89,14 +90,13 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { reactive, defineComponent, toRefs } from "vue";
+import { reactive, defineComponent, toRefs, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { ElMessage, ElButton, ElCollapse, ElCollapseItem } from "element-plus";
 import { ValuesTypes, MetricQueryTypes, ChartTypes } from "../data";
 import { Option } from "@/types/app";
-import Loading from "@/utils/loading";
 import graphs from "../graphs";
 import configs from "./graph-styles";
 import WidgetOptions from "./WidgetOptions.vue";
@@ -114,10 +114,10 @@ export default defineComponent({
     ElCollapseItem,
   },
   setup() {
+    const loading = ref<boolean>(false);
     const { t } = useI18n();
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
-    const { loading } = Loading();
     const { selectedGrid } = dashboardStore;
     const states = reactive<{
       metrics: string[];
@@ -161,9 +161,9 @@ export default defineComponent({
     }
 
     async function queryMetricType(metric: string) {
-      const loadingInstance = loading({ text: t("loading"), fullscreen: true });
+      loading.value = true;
       const resp = await dashboardStore.fetchMetricType(metric);
-      loadingInstance.close();
+      loading.value = false;
       if (resp.error) {
         ElMessage.error(resp.data.error);
         return;
@@ -212,7 +212,7 @@ export default defineComponent({
         return;
       }
       const metricVal = json.data.readMetricsValues.values.values.map(
-        (d: { value: number }, index: number) => d.value + index // todo
+        (d: { value: number }) => d.value
       );
       const m =
         dashboardStore.selectedGrid.metrics &&
@@ -263,6 +263,7 @@ export default defineComponent({
       configHeight,
       dashboardStore,
       applyConfig,
+      loading,
     };
   },
 });

src/views/dashboard/controls/Widget.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
         </div>
       </el-popover>
     </div>
-    <div class="body">
+    <div class="body" v-loading="loading">
       <component
         :is="data.graph.type"
         :intervalTime="appStoreWithOut.intervalTime"
@@ -42,15 +42,14 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, defineComponent } from "vue";
+import { toRefs, reactive, defineComponent, ref } from "vue";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import graphs from "../graphs";
-import { ElMessage, ElPopover } from "element-plus";
-import Loading from "@/utils/loading";
-import { useI18n } from "vue-i18n";
+import { ElMessage } from "element-plus";
+// import { useI18n } from "vue-i18n";
 
 const props = {
   data: {
@@ -61,11 +60,11 @@ const props = {
 };
 export default defineComponent({
   name: "Widget",
-  components: { ...graphs, ElPopover },
+  components: { ...graphs },
   props,
   setup(props) {
-    const { t } = useI18n();
-    const { loading } = Loading();
+    // const { t } = useI18n();
+    const loading = ref<boolean>(false);
     const state = reactive({
       source: {},
     });
@@ -74,13 +73,9 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     queryMetrics();
     async function queryMetrics() {
-      const loadingInstance = loading({
-        text: t("loading"),
-        fullscreen: false,
-      });
+      loading.value = true;
       const json = await dashboardStore.fetchMetricValue(props.data);
-
-      loadingInstance.close();
+      loading.value = false;
       if (!json) {
         return;
       }
@@ -113,6 +108,7 @@ export default defineComponent({
       removeWidget,
       editConfig,
       data,
+      loading,
     };
   },
 });

src/views/dashboard/panel/Layout.vue

@@ -30,7 +30,6 @@ limitations under the License. -->
       :i="item.i"
       :key="item.i"
       @click="clickGrid(item)"
-      @resized="resizedEvent"
       :class="{ active: dashboardStore.activedGridItem === item.i }"
     >
       <component
@@ -58,14 +57,10 @@ export default defineComponent({
     function clickGrid(item: LayoutConfig) {
       dashboardStore.activeGridItem(item.i);
     }
-    function resizedEvent() {
-      console.log("test");
-    }
     return {
       dashboardStore,
       layoutUpdatedEvent,
       clickGrid,
-      resizedEvent,
     };
   },
 });