fix: update loading

src/components/index.ts

@@ -20,6 +20,7 @@ import Selector from "./Selector.vue";
 import Graph from "./Graph.vue";
 import type { App } from "vue";
 import VueGridLayout from "vue-grid-layout";
+import { ElLoading } from "element-plus";
 
 const components: { [key: string]: any } = {
   Icon,
@@ -27,6 +28,7 @@ const components: { [key: string]: any } = {
   VueGridLayout,
   Selector,
   Graph,
+  ElLoading,
 };
 const componentsName: string[] = Object.keys(components);
 

src/hooks/useEcharts.ts

@@ -116,7 +116,6 @@ export function useECharts(
   }
 
   function resize() {
-    console.log("resize");
     chartInstance?.resize();
   }
 

src/main.ts

@@ -23,9 +23,11 @@ import i18n from "./locales";
 import "element-plus/dist/index.css";
 import "./styles/lib.scss";
 import "./styles/reset.scss";
+import ElementPlus from "element-plus";
 
 const app = createApp(App);
 
+app.use(ElementPlus);
 app.use(components);
 app.use(i18n);
 app.use(store);

src/utils/event.ts

@@ -1,3 +1,19 @@
+/**
+ * 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.
+ */
 const isServer = typeof window === "undefined";
 
 function resizeHandler(entries: any[]): void {

src/utils/loading.ts

@@ -1,32 +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.
- */
-import { ElLoading } from "element-plus";
-
-type Props = { text?: string; fullscreen?: boolean };
-
-export default function (): {
-  loading: (props: Props) => any;
-} {
-  const loading = (props: Props) => {
-    const loadingInstance = ElLoading.service(props);
-    return loadingInstance;
-  };
-
-  return {
-    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,
     };
   },
 });