feat: add and use loading

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",

src/locales/lang/zh.ts

@@ -50,6 +50,7 @@ const msg = {
   layer: "层",
   endpoint: "端点",
   create: "新建",
+  loading: "加载中",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

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,
+  };
+}

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;

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;
 }