reload dashboards

src/locales/lang/en.ts

@@ -122,6 +122,7 @@ const msg = {
   editWarning: "You are entering edit mode",
   viewWarning: "You are entering view mode",
   virtualDatabase: "Virtual Database",
+  reloadDashboards: "Reload dashboards",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -122,6 +122,7 @@ const msg = {
   editWarning: "你正在进入编辑模式",
   viewWarning: "你正在进入预览模式",
   virtualDatabase: "虚拟数据库",
+  reloadDashboards: "重新加载仪表盘",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/store/modules/dashboard.ts

@@ -326,6 +326,17 @@ export const dashboardStore = defineStore({
         sessionStorage.getItem("dashboards") || "[]"
       );
     },
+    async resetTemplates() {
+      const res = await this.fetchTemplates();
+      if (res.errors) {
+        this.dashboards = [];
+        ElMessage.error(res.errors);
+        return;
+      }
+      this.dashboards = JSON.parse(
+        sessionStorage.getItem("dashboards") || "[]"
+      );
+    },
     async updateDashboard(setting: { id: string; configuration: string }) {
       const res: AxiosResponse = await graphql.query("updateTemplate").params({
         setting,

src/views/dashboard/List.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
       <el-input
         v-model="searchText"
         placeholder="Please input name"
-        class="input-with-search"
+        class="input-with-search ml-10"
         size="small"
         @change="searchDashboards"
       >
@@ -28,6 +28,10 @@ limitations under the License. -->
           </el-button>
         </template>
       </el-input>
+      <el-button class="ml-10" size="small" @click="reloadTemplates">
+        <Icon size="sm" iconName="retry" class="reload" />
+        {{ t("reloadDashboards") }}
+      </el-button>
       <router-link to="/dashboard/new">
         <el-button size="small" type="primary">
           + {{ t("newDashboard") }}
@@ -37,7 +41,7 @@ limitations under the License. -->
     <div class="table">
       <el-table
         :data="dashboards"
-        :style="{ width: '100%', fontSize: '13px' }"
+        :style="{ fontSize: '13px', width: '100%' }"
         v-loading="loading"
         ref="multipleTableRef"
         :default-sort="{ prop: 'name' }"
@@ -46,21 +50,21 @@ limitations under the License. -->
         <el-table-column type="selection" width="55" />
         <el-table-column prop="name" label="Name">
           <template #default="scope">
-            <span class="cp" @click="handleView(scope.row)">{{
+            <span class="cp name" @click="handleView(scope.row)">{{
               scope.row.name
             }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="layer" label="Layer" width="200" />
         <el-table-column prop="entity" label="Entity" width="200" />
-        <el-table-column prop="isRoot" label="Root" width="100">
+        <el-table-column prop="isRoot" label="Root" width="60">
           <template #default="scope">
             <span>
               {{ scope.row.isRoot ? t("yes") : t("no") }}
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="Operations">
+        <el-table-column label="Operations" width="350">
           <template #default="scope">
             <el-button size="small" @click="handleEdit(scope.row)">
               {{ t("edit") }}
@@ -365,6 +369,10 @@ function searchDashboards() {
     d.name.includes(searchText.value)
   );
 }
+
+function reloadTemplates() {
+  dashboardStore.resetTemplates();
+}
 </script>
 <style lang="scss" scoped>
 .header {
@@ -373,11 +381,12 @@ function searchDashboards() {
 
 .dashboard-list {
   padding: 20px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .input-with-search {
-  width: 300px;
-  margin-left: 20px;
+  width: 250px;
 }
 
 .table {
@@ -385,6 +394,8 @@ function searchDashboards() {
   background-color: #fff;
   box-shadow: 0px 1px 4px 0px #00000029;
   border-radius: 5px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .toggle-selection {
@@ -407,4 +418,12 @@ function searchDashboards() {
   width: 220px;
   cursor: pointer;
 }
+
+.name {
+  color: #409eff;
+}
+
+.reload {
+  margin-right: 3px;
+}
 </style>

src/views/dashboard/graphs/InstanceList.vue

@@ -168,6 +168,10 @@ function clickInstance(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[3].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   dashboardStore.setCurrentDashboard(d);
   dashboardStore.setEntity(d.entity);
   router.push(

src/views/dashboard/graphs/ServiceList.vue

@@ -179,6 +179,10 @@ function clickService(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[0].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   dashboardStore.setCurrentDashboard(d);
   dashboardStore.setEntity(d.entity);
   const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name