edit dashboards

src/components/Graph.vue

@@ -20,7 +20,6 @@ import { watch, ref, Ref, onMounted, onBeforeUnmount, unref } from "vue";
 import type { PropType } from "vue";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
-import { useTimeoutFn } from "@/hooks/useTimeout";
 
 /*global Nullable, defineProps, defineEmits*/
 const emits = defineEmits(["select"]);
@@ -40,7 +39,7 @@ const props = defineProps({
 onMounted(async () => {
   await setOptions(props.option);
   addResizeListener(unref(chartRef), resize);
-  useTimeoutFn(() => {
+  setTimeout(() => {
     const instance = getInstance();
 
     instance.on("click", (params: any) => {

src/store/modules/dashboard.ts

@@ -349,15 +349,61 @@ 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),
+      };
+      const res: AxiosResponse = await graphql.query("updateTemplate").params({
+        setting,
+      });
+      if (res.data.errors) {
+        ElMessage.error(res.data.errors);
+        return res.data;
+      }
+      const json = res.data.data.changeTemplate;
+      if (!json.status) {
+        ElMessage.error(json.message);
+        return;
+      }
+      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));
+    },
     async saveDashboard() {
       if (!this.currentDashboard.name) {
         ElMessage.error("The dashboard name is needed.");
         return;
       }
       const c = {
-        ...this.currentDashboard,
         isRoot: false,
         children: this.layout,
+        ...this.currentDashboard,
       };
       let res: AxiosResponse;
       let json;
@@ -399,7 +445,7 @@ export const dashboardStore = defineStore({
 
       this.dashboards.push({
         id: json.id,
-        name,
+        name: this.currentDashboard.name,
         layer: this.layerId,
         entity: this.entity,
         isRoot: true,
@@ -413,7 +459,7 @@ export const dashboardStore = defineStore({
       sessionStorage.setItem(key, JSON.stringify(l));
       sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards));
     },
-    async deleteDashbaord() {
+    async deleteDashboard() {
       const res: AxiosResponse = await graphql
         .query("removeTemplate")
         .params({ id: this.currentDashboard.id });

src/views/Service.vue

@@ -34,6 +34,7 @@ limitations under the License. -->
       :span-method="objectSpanMethod"
       :border="true"
       :style="{ fontSize: '14px' }"
+      v-loading="loading"
     >
       <el-table-column
         v-for="(h, index) in tableHeader"
@@ -81,6 +82,7 @@ const routeNames = [
   "ControlPanel",
   "DataPanel",
 ];
+const loading = ref<boolean>(false);
 const layer = ref<string>("GENERAL");
 const searchText = ref<string>("");
 const services = ref<Service[]>([]);
@@ -91,12 +93,14 @@ dashboardStore.setDashboards();
 
 async function getServices() {
   setLayer(String(route.name));
+  loading.value = true;
   const res = await selectorStore.fetchServices(layer.value);
   if (res.errors) {
     ElMessage.error(res.errors);
     services.value = [];
     return;
   }
+  loading.value = false;
   const map: { [key: string]: any[] } = selectorStore.services.reduce(
     (result: { [key: string]: any[] }, item: any) => {
       item.group = item.group || "";
@@ -150,6 +154,7 @@ function visitLayout(row: { id: string }) {
       (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
         d.layer === layer.value && d.entity === EntityType[0].value && d.isRoot
     )[0] || {};
+  dashboardStore.setCurrentDashboard(l);
   router.push(
     `/dashboard/${layer.value}/${EntityType[0].value}/${row.id}/${(l.name || "")
       .split(" ")

src/views/dashboard/List.vue

@@ -40,18 +40,22 @@ limitations under the License. -->
         :data="dashboards"
         :style="{ width: '100%' }"
         max-height="550"
+        v-loading="loading"
       >
         <el-table-column fixed prop="name" label="Name" />
         <el-table-column prop="layer" label="Layer" />
         <el-table-column prop="entity" label="Entity" />
         <el-table-column label="Operations">
           <template #default="scope">
-            <el-button size="small" @click="handleEdit(scope.row)">
+            <el-button size="small" @click="handleView(scope.$index)">
               {{ t("view") }}
             </el-button>
+            <el-button size="small" @click="handleEdit(scope.$index)">
+              {{ t("edit") }}
+            </el-button>
             <el-popconfirm
               title="Are you sure to delete this?"
-              @confirm="handleDelete(scope.row)"
+              @confirm="handleDelete(scope.$index)"
             >
               <template #reference>
                 <el-button size="small" type="danger">
@@ -72,6 +76,7 @@ import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import router from "@/router";
+import { ElMessageBox, ElMessage } from "element-plus";
 
 const appStore = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
@@ -90,6 +95,7 @@ appStore.setPageTitle("Dashboard List");
 const { t } = useI18n();
 const dashboards = ref<{ name: string; layer: string; entity: string }[]>([]);
 const searchText = ref<string>("");
+const loading = ref<boolean>(false);
 
 setList();
 
@@ -97,20 +103,39 @@ async function setList() {
   await dashboardStore.setDashboards();
   dashboards.value = dashboardStore.dashboards;
 }
-const handleEdit = (row: { name: string; layer: string; entity: string }) => {
-  dashboardStore.setCurrentDashboard(row);
+const handleView = (index: number) => {
+  const d = dashboards.value[index];
+  dashboardStore.setCurrentDashboard(d);
   router.push(
-    `/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
+    `/dashboard/${d.layer}/${d.entity}/${d.name.split(" ").join("-")}`
   );
 };
-async function handleDelete(row: {
-  name: string;
-  layer: string;
-  entity: string;
-}) {
+function handleEdit(index: number) {
+  const d = dashboards.value[index];
+
+  ElMessageBox.prompt("Please input dashboard name", "Edit", {
+    confirmButtonText: "OK",
+    cancelButtonText: "Cancel",
+    inputValue: d.name,
+  })
+    .then(({ value }) => {
+      dashboardStore.setCurrentDashboard(d);
+      dashboardStore.updateDashboard({ name: value });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "Input canceled",
+      });
+    });
+}
+async function handleDelete(index: number) {
+  const row = dashboards.value[index];
   dashboardStore.setCurrentDashboard(row);
-  await dashboardStore.deleteDashbaord();
+  loading.value = true;
+  await dashboardStore.deleteDashboard();
   dashboards.value = dashboardStore.dashboards;
+  loading.value = false;
   sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
   sessionStorage.removeItem(
     `${row.layer}_${row.entity}_${row.name.split(" ").join("-")}`