From 9ae1f26d8490c964f75b14b94612d991db950c09 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 30 Dec 2021 11:39:14 +0800
Subject: [PATCH] feat: add and use loading

---
 src/locales/lang/en.ts                        |  1 +
 src/locales/lang/zh.ts                        |  1 +
 src/utils/loading.ts                          | 31 +++++++++++++++++++
 .../dashboard/configuration/WidgetConfig.vue  | 11 +++++++
 src/views/dashboard/panel/Tool.vue            |  2 --
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/loading.ts

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index ca98a81a..55a8ff7f 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -52,6 +52,7 @@ const msg = {
   endpoint: "Endpoint",
   instance: "Instance",
   create: "Create",
+  loading: "Loading",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 12e6b7f4..1c013b48 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -50,6 +50,7 @@ const msg = {
   layer: "层",
   endpoint: "端点",
   create: "新建",
+  loading: "加载中",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/utils/loading.ts b/src/utils/loading.ts
new file mode 100644
index 00000000..edbfb349
--- /dev/null
+++ b/src/utils/loading.ts
@@ -0,0 +1,31 @@
+/**
+ * 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, ILoadingInstance } from "element-plus";
+type Props = { text?: string; fullscreen?: boolean };
+
+export default function (): {
+  loading: (props: Props) => ILoadingInstance;
+} {
+  const loading = (props: Props) => {
+    const loadingInstance = ElLoading.service(props);
+    return loadingInstance;
+  };
+
+  return {
+    loading,
+  };
+}
diff --git a/src/views/dashboard/configuration/WidgetConfig.vue b/src/views/dashboard/configuration/WidgetConfig.vue
index 21795bad..22c44704 100644
--- a/src/views/dashboard/configuration/WidgetConfig.vue
+++ b/src/views/dashboard/configuration/WidgetConfig.vue
@@ -53,10 +53,12 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { reactive } from "vue";
+import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { ElMessage } from "element-plus";
 import { ValuesTypes, MetricQueryTypes } from "../data";
 import { Option } from "@/types/app";
+import Loading from "@/utils/loading";
 
 const states = reactive<{
   metrics: string;
@@ -69,9 +71,18 @@ const states = reactive<{
   valueType: "",
   metricQueryType: "",
 });
+const { t } = useI18n();
 const dashboardStore = useDashboardStore();
+const { loading } = Loading();
 async function changeMetrics(val: Option[]) {
+  if (!val.length) {
+    states.valueTypes = [];
+    states.valueType = "";
+    return;
+  }
+  const loadingInstance = loading({ text: t("loading"), fullscreen: true });
   const resp = await dashboardStore.fetchMetricType(val[0].value);
+  loadingInstance.close();
   if (resp.error) {
     ElMessage.error(resp.data.error);
     return;
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 767c9a5d..17e6e327 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -112,8 +112,6 @@ const states = reactive({
   key: EntityType.filter((d: any) => d.value === params.entity)[0].key || 0,
   ...params,
 });
-console.log(states);
-
 function changeService(val: { value: string; label: string }) {
   states.service = val.value;
 }