set root dashboards

src/locales/lang/en.ts

@@ -98,6 +98,8 @@ const msg = {
   editTab: "Enable editing tab names",
   label: "Name",
   id: "ID",
+  setRoot: "Set this to root",
+  setNormal: "Set this to normal",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -97,7 +97,9 @@ const msg = {
   sampledTraces: "采样的追踪",
   editTab: "开启编辑Tab的名称",
   label: "名称",
-  id: "ID",
+  id: "编号",
+  setRoot: "设置成为根",
+  setNormal: "设置成为普通",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/store/modules/dashboard.ts

@@ -74,6 +74,18 @@ export const dashboardStore = defineStore({
     setLayout(data: LayoutConfig[]) {
       this.layout = data;
     },
+    resetDashboards(
+      list: {
+        name: string;
+        layer: string;
+        entity: string;
+        id: string;
+        isRoot: boolean;
+      }[]
+    ) {
+      this.dashboards = list;
+      sessionStorage.setItem("dashboards", JSON.stringify(list));
+    },
     setCurrentDashboard(item: {
       name: string;
       layer: string;
@@ -349,23 +361,7 @@ export const dashboardStore = defineStore({
         sessionStorage.getItem("dashboards") || "[]"
       );
     },
-    async updateDashboard(param: { name: string }) {
-      const key = [
-        this.currentDashboard.layer,
-        this.currentDashboard.entity,
-        this.currentDashboard.name.split(" ").join("-"),
-      ].join("_");
-      const layout = sessionStorage.getItem(key);
-      const c = {
-        isRoot: false,
-        children: layout,
-        ...this.currentDashboard,
-        name: param.name,
-      };
-      const setting = {
-        id: this.currentDashboard.id,
-        configuration: JSON.stringify(c),
-      };
+    async updateDashboard(setting: { id: string; configuration: string }) {
       const res: AxiosResponse = await graphql.query("updateTemplate").params({
         setting,
       });
@@ -376,24 +372,10 @@ export const dashboardStore = defineStore({
       const json = res.data.data.changeTemplate;
       if (!json.status) {
         ElMessage.error(json.message);
-        return;
+        return res.data;
       }
       ElMessage.success("Saved successfully");
-      this.currentDashboard.name = param.name;
-      this.dashboards = this.dashboards.map((d: any) => {
-        if (d.id === this.currentDashboard.id) {
-          d = this.currentDashboard;
-        }
-        return d;
-      });
-      sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards));
-      sessionStorage.removeItem(key);
-      const str = [
-        this.currentDashboard.layer,
-        this.currentDashboard.entity,
-        param.name.split(" ").join("-"),
-      ].join("_");
-      sessionStorage.setItem(str, JSON.stringify(setting));
+      return res.data;
     },
     async saveDashboard() {
       if (!this.currentDashboard.name) {
@@ -405,17 +387,17 @@ export const dashboardStore = defineStore({
         children: this.layout,
         ...this.currentDashboard,
       };
-      let res: AxiosResponse;
+      let res: any;
       let json;
 
       if (this.currentDashboard.id) {
-        res = await graphql.query("updateTemplate").params({
+        res = await this.updateDashboard({
           setting: {
             id: this.currentDashboard.id,
             configuration: JSON.stringify(c),
           },
         });
-        json = res.data.data.changeTemplate;
+        json = res.data.changeTemplate;
       } else {
         const index = this.dashboards.findIndex(
           (d: { name: string; entity: string; layer: string; id: string }) =>
@@ -433,7 +415,7 @@ export const dashboardStore = defineStore({
 
         json = res.data.data.addTemplate;
       }
-      if (res.data.errors) {
+      if (res.data.errors || res.errors) {
         ElMessage.error(res.data.errors);
         return res.data;
       }

src/views/dashboard/List.vue

@@ -47,15 +47,25 @@ limitations under the License. -->
         <el-table-column prop="entity" label="Entity" />
         <el-table-column label="Operations">
           <template #default="scope">
-            <el-button size="small" @click="handleView(scope.$index)">
+            <el-button size="small" @click="handleView(scope.row)">
               {{ t("view") }}
             </el-button>
-            <el-button size="small" @click="handleEdit(scope.$index)">
+            <el-button size="small" @click="handleEdit(scope.row)">
               {{ t("edit") }}
             </el-button>
+            <el-popconfirm
+              title="Are you sure to set this?"
+              @confirm="setRoot(scope.row)"
+            >
+              <template #reference>
+                <el-button size="small">
+                  {{ scope.row.isRoot ? t("setRoot") : t("setNormal") }}
+                </el-button>
+              </template>
+            </el-popconfirm>
             <el-popconfirm
               title="Are you sure to delete this?"
-              @confirm="handleDelete(scope.$index)"
+              @confirm="handleDelete(scope.row)"
             >
               <template #reference>
                 <el-button size="small" type="danger">
@@ -110,17 +120,75 @@ const handleView = (index: number) => {
     `/dashboard/${d.layer}/${d.entity}/${d.name.split(" ").join("-")}`
   );
 };
-function handleEdit(index: number) {
-  const d = dashboards.value[index];
-
+async function setRoot(row: {
+  entity: string;
+  layer: string;
+  name: string;
+  id: string;
+  isRoot: boolean;
+}) {
+  const items = dashboardStore.dashboards.map(async (d: any) => {
+    if (d.id === row.id) {
+      d.isRoot = !row.isRoot;
+      const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
+      const layout = sessionStorage.getItem(key) || "{}";
+      const c = {
+        ...JSON.parse(layout).configuration,
+        ...d,
+      };
+      const setting = {
+        id: d.id,
+        configuration: JSON.stringify(c),
+      };
+      const res = await dashboardStore.updateDashboard(setting);
+      if (!res.data.changeTemplate.id) {
+        return d;
+      }
+      sessionStorage.setItem(key, JSON.stringify(setting));
+      return d;
+    }
+    if (
+      d.layer === row.layer &&
+      d.entity === row.entity &&
+      !row.isRoot &&
+      d.isRoot
+    ) {
+      d.isRoot = false;
+      const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
+      const layout = sessionStorage.getItem(key) || "{}";
+      const c = {
+        ...JSON.parse(layout).configuration,
+        ...d,
+      };
+      const setting = {
+        id: d.id,
+        configuration: JSON.stringify(c),
+      };
+      const res = await dashboardStore.updateDashboard(setting);
+      if (!res.data.changeTemplate.id) {
+        return d;
+      }
+      sessionStorage.setItem(key, JSON.stringify(setting));
+      return d;
+    }
+    return d;
+  });
+  dashboardStore.resetDashboards(items);
+  searchDashboards();
+}
+function handleEdit(row: {
+  entity: string;
+  layer: string;
+  name: string;
+  id: string;
+}) {
   ElMessageBox.prompt("Please input dashboard name", "Edit", {
     confirmButtonText: "OK",
     cancelButtonText: "Cancel",
-    inputValue: d.name,
+    inputValue: row.name,
   })
     .then(({ value }) => {
-      dashboardStore.setCurrentDashboard(d);
-      dashboardStore.updateDashboard({ name: value });
+      updateName(row, value);
     })
     .catch(() => {
       ElMessage({
@@ -129,8 +197,52 @@ function handleEdit(index: number) {
       });
     });
 }
-async function handleDelete(index: number) {
-  const row = dashboards.value[index];
+async function updateName(
+  d: { entity: string; layer: string; name: string; id: string },
+  value: string
+) {
+  const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
+  const layout = sessionStorage.getItem(key) || "{}";
+  const c = {
+    ...JSON.parse(layout).configuration,
+    ...d,
+    name: value,
+  };
+  const setting = {
+    id: d.id,
+    configuration: JSON.stringify(c),
+  };
+  const res = await dashboardStore.updateDashboard(setting);
+  if (!res.data.changeTemplate.id) {
+    return;
+  }
+  dashboardStore.setCurrentDashboard({
+    ...d,
+    name: value,
+  });
+  dashboards.value = dashboardStore.dashboards.map((item: any) => {
+    if (dashboardStore.currentDashboard.id === item.id) {
+      item = dashboardStore.currentDashboard;
+    }
+    return item;
+  });
+  dashboardStore.resetDashboards(dashboards.value);
+  sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
+  sessionStorage.removeItem(key);
+  const str = [
+    dashboardStore.currentDashboard.layer,
+    dashboardStore.currentDashboard.entity,
+    dashboardStore.currentDashboard.name.split(" ").join("-"),
+  ].join("_");
+  sessionStorage.setItem(str, JSON.stringify(setting));
+  searchText.value = "";
+}
+async function handleDelete(row: {
+  entity: string;
+  layer: string;
+  name: string;
+  id: string;
+}) {
   dashboardStore.setCurrentDashboard(row);
   loading.value = true;
   await dashboardStore.deleteDashboard();