update new dashboard config

src/store/modules/dashboard.ts

@@ -33,6 +33,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { NewControl } from "../data";
 import { Duration } from "@/types/app";
 import { AxiosResponse } from "axios";
+import { ElMessage } from "element-plus";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
@@ -44,6 +45,7 @@ interface DashboardState {
   selectorStore: any;
   showTopology: boolean;
   currentTabItems: LayoutConfig[];
+  dashboards: { name: string; layer: string; entity: string }[];
 }
 
 export const dashboardStore = defineStore({
@@ -59,6 +61,7 @@ export const dashboardStore = defineStore({
     selectorStore: useSelectorStore(),
     showTopology: false,
     currentTabItems: [],
+    dashboards: [],
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -281,20 +284,12 @@ export const dashboardStore = defineStore({
       const res: AxiosResponse = await query(param);
       return res.data;
     },
-    async getAllTemplates() {
+    async fetchTemplates() {
       const res: AxiosResponse = await graphql.query("getTemplates").params({});
 
       if (res.data.errors) {
         return res.data;
       }
-      return res.data;
-    },
-    async fetchTemplates() {
-      const res = await this.getAllTemplates();
-
-      if (res.errors) {
-        return res;
-      }
       const data = [
         ServiceLayout,
         AllLayout,
@@ -322,7 +317,20 @@ export const dashboardStore = defineStore({
         sessionStorage.setItem(key, JSON.stringify(t));
       }
       sessionStorage.setItem("dashboards", JSON.stringify(list));
-      return res;
+      return res.data;
+    },
+    async setDashboards() {
+      if (!sessionStorage.getItem("dashboards")) {
+        const res = await this.fetchTemplates();
+        if (res.errors) {
+          this.dashboards = [];
+          ElMessage.error(res.errors);
+          return;
+        }
+      }
+      this.dashboards = JSON.parse(
+        sessionStorage.getItem("dashboards") || "[]"
+      );
     },
   },
 });

src/views/Service.vue

@@ -81,28 +81,14 @@ const routeNames = [
   "ControlPanel",
   "DataPanel",
 ];
-const dashboards = ref<
-  { name: string; layer: string; entity: string; isRoot: boolean }[]
->([]);
 const layer = ref<string>("GENERAL");
 const searchText = ref<string>("");
 const services = ref<Service[]>([]);
 const groups = ref<any>({});
 
 getServices();
-setList();
+dashboardStore.setDashboards();
 
-async function setList() {
-  if (!sessionStorage.getItem("dashboards")) {
-    const res = await dashboardStore.fetchTemplates();
-    if (res.errors) {
-      dashboards.value = [];
-      ElMessage.error(res.errors);
-      return;
-    }
-  }
-  dashboards.value = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
-}
 async function getServices() {
   setLayer(String(route.name));
   const res = await selectorStore.fetchServices(layer.value);
@@ -160,7 +146,7 @@ function searchServices() {
 
 function visitLayout(row: { id: string }) {
   const l =
-    dashboards.value.filter(
+    dashboardStore.dashboards.filter(
       (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
         d.layer === layer.value && d.entity === EntityType[0].value && d.isRoot
     )[0] || {};

src/views/dashboard/Edit.vue

@@ -41,14 +41,12 @@ limitations under the License. -->
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import GridLayout from "./panel/Layout.vue";
-// import { LayoutConfig } from "@/types/dashboard";
 import Tool from "./panel/Tool.vue";
 import Widget from "./configuration/Widget.vue";
 import TopologyConfig from "./configuration/Topology.vue";
 import Topology from "./related/topology/Index.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { ElMessage } from "element-plus";
 
 const dashboardStore = useDashboardStore();
 const appStore = useAppStoreWithOut();
@@ -60,14 +58,7 @@ appStore.setPageTitle("Dashboard Name");
 setTemplate();
 
 async function setTemplate() {
-  if (!sessionStorage.getItem("dashboards")) {
-    const res = await dashboardStore.fetchTemplates();
-    if (res.errors) {
-      dashboardStore.setLayout([]);
-      ElMessage.error(res.errors);
-      return;
-    }
-  }
+  await dashboardStore.setDashboards();
   const c: { configuration: string; id: string } = JSON.parse(
     sessionStorage.getItem(layoutKey) || "{}"
   );

src/views/dashboard/List.vue

@@ -49,12 +49,6 @@ limitations under the License. -->
             <el-button size="small" @click="handleEdit(scope.row)">
               {{ t("view") }}
             </el-button>
-            <!-- <el-button
-              size="small"
-              @click="handleEdit(scope.$index, scope.row)"
-            >
-              {{ t("edit") }}
-            </el-button> -->
             <el-popconfirm
               title="Are you sure to delete this?"
               @confirm="handleDelete(scope.$index, scope.row)"
@@ -77,7 +71,6 @@ import { useI18n } from "vue-i18n";
 import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { ElMessage } from "element-plus";
 import router from "@/router";
 
 const appStore = useAppStoreWithOut();
@@ -101,15 +94,8 @@ const searchText = ref<string>("");
 setList();
 
 async function setList() {
-  if (!sessionStorage.getItem("dashboards")) {
-    const res = await dashboardStore.fetchTemplates();
-    if (res.errors) {
-      dashboards.value = [];
-      ElMessage.error(res.errors);
-      return;
-    }
-  }
-  dashboards.value = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
+  await dashboardStore.setDashboards();
+  dashboards.value = dashboardStore.dashboards;
 }
 const handleEdit = (row: { name: string; layer: string; entity: string }) => {
   router.push(

src/views/dashboard/New.vue

@@ -51,15 +51,17 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, onBeforeMount } from "vue";
+import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import router from "@/router";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EntityType } from "./data";
 import { ElMessage } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
 const appStore = useAppStoreWithOut();
+const dashboardStore = useDashboardStore();
 appStore.setPageTitle("Dashboard New");
 const { t } = useI18n();
 const selectorStore = useSelectorStore();
@@ -69,12 +71,25 @@ const states = reactive({
   entity: EntityType[0].value,
   layers: [],
 });
+setLayers();
+dashboardStore.setDashboards();
+
 const onCreate = () => {
+  const index = dashboardStore.dashboards.findIndex(
+    (d: { name: string; entity: string; layer: string }) =>
+      d.name === states.name &&
+      states.entity === d.entity &&
+      states.selectedLayer === d.layer
+  );
+  if (index > -1) {
+    ElMessage.error("The dashboard name cannot be duplicate.");
+    return;
+  }
   const name = states.name.split(" ").join("-");
   const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`;
   router.push(path);
 };
-onBeforeMount(async () => {
+async function setLayers() {
   const resp = await selectorStore.fetchLayers();
   if (resp.errors) {
     ElMessage.error(resp.errors);
@@ -83,7 +98,7 @@ onBeforeMount(async () => {
   states.layers = resp.data.layers.map((d: string) => {
     return { label: d, value: d };
   });
-});
+}
 function changeLayer(opt: { label: string; value: string }[] | any) {
   states.selectedLayer = opt[0].value;
 }