remove, add, update templates

src/constants/templates.ts

@@ -174,7 +174,7 @@ export const AllLayout = {
 export const ServiceLayout = {
   id: "1",
   configuration: {
-    name: "Service Layout",
+    name: "Service Root Layout",
     layer: "GENERAL",
     entity: "Service",
     isRoot: true,

src/graphql/fragments/app.ts

@@ -26,41 +26,3 @@ export const OAPTimeInfo = {
 export const OAPVersion = {
   query: `version { version }`,
 };
-
-export const getAllTemplates = {
-  query: `
-    getAllTemplates {
-      id,
-      configuration,
-    }
-  `,
-};
-
-export const addTemplate = {
-  variable: "$setting: NewDashboardSetting!",
-  query: `
-  addTemplate(setting: $setting) {
-        id
-        status
-        message
-    }`,
-};
-export const changeTemplate = {
-  variable: "$setting: DashboardSetting!",
-  query: `
-  changeTemplate(setting: $setting) {
-        id
-        status
-        message
-    }`,
-};
-
-export const deleteTemplate = {
-  variable: "$id: String!",
-  query: `
-  disableTemplate(id: $id) {
-        id
-        status
-        message
-    }`,
-};

src/graphql/fragments/dashboard.ts

@@ -30,3 +30,41 @@ export const listMetrics = {
   }
   `,
 };
+
+export const getAllTemplates = {
+  query: `
+    getAllTemplates {
+      id,
+      configuration,
+    }
+  `,
+};
+
+export const addTemplate = {
+  variable: "$setting: NewDashboardSetting!",
+  query: `
+  addTemplate(setting: $setting) {
+        id
+        status
+        message
+    }`,
+};
+export const changeTemplate = {
+  variable: "$setting: DashboardSetting!",
+  query: `
+  changeTemplate(setting: $setting) {
+        id
+        status
+        message
+    }`,
+};
+
+export const deleteTemplate = {
+  variable: "$id: String!",
+  query: `
+  disableTemplate(id: $id) {
+        id
+        status
+        message
+    }`,
+};

src/graphql/query/app.ts

@@ -14,23 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  OAPTimeInfo,
-  OAPVersion,
-  getAllTemplates,
-  addTemplate,
-  changeTemplate,
-  deleteTemplate,
-} from "../fragments/app";
+import { OAPTimeInfo, OAPVersion } from "../fragments/app";
 
 export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
 
 export const queryOAPVersion = `query ${OAPVersion.query}`;
-
-export const getTemplates = `query queryTemplates {${getAllTemplates.query}}`;
-
-export const addNewTemplate = `query queryAlarms(${addTemplate.variable}) {${addTemplate.query}}`;
-
-export const updateTemplate = `query queryAlarms(${changeTemplate.variable}) {${changeTemplate.query}}`;
-
-export const removeTemplate = `query queryAlarms(${deleteTemplate.variable}) {${deleteTemplate.query}}`;

src/graphql/query/dashboard.ts

@@ -14,8 +14,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TypeOfMetrics, listMetrics } from "../fragments/dashboard";
+import {
+  TypeOfMetrics,
+  listMetrics,
+  getAllTemplates,
+  addTemplate,
+  changeTemplate,
+  deleteTemplate,
+} from "../fragments/dashboard";
 
 export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
 
 export const queryMetrics = `query queryData(${listMetrics.variable}) {${listMetrics.query}}`;
+
+export const addNewTemplate = `mutation template(${addTemplate.variable}) {${addTemplate.query}}`;
+
+export const updateTemplate = `mutation template(${changeTemplate.variable}) {${changeTemplate.query}}`;
+
+export const removeTemplate = `mutation template(${deleteTemplate.variable}) {${deleteTemplate.query}}`;
+
+export const getTemplates = `query templates {${getAllTemplates.query}}`;

src/store/modules/dashboard.ts

@@ -19,15 +19,15 @@ import { store } from "@/store";
 import { LayoutConfig } from "@/types/dashboard";
 import graphql from "@/graphql";
 import query from "@/graphql/fetch";
-import {
-  ServiceLayout,
-  AllLayout,
-  EndpointLayout,
-  InstanceLayout,
-  ServiceRelationLayout,
-  InstanceRelationLayout,
-  EndpointRelationLayout,
-} from "@/constants/templates";
+// import {
+//   ServiceLayout,
+//   AllLayout,
+//   EndpointLayout,
+//   InstanceLayout,
+//   ServiceRelationLayout,
+//   InstanceRelationLayout,
+//   EndpointRelationLayout,
+// } from "@/constants/templates";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { NewControl } from "../data";
@@ -45,13 +45,19 @@ interface DashboardState {
   selectorStore: any;
   showTopology: boolean;
   currentTabItems: LayoutConfig[];
-  dashboards: { name: string; layer: string; entity: string }[];
+  dashboards: { name: string; layer: string; entity: string; id: string }[];
+  currentDashboard: Nullable<{
+    name: string;
+    layer: string;
+    entity: string;
+    id: string;
+  }>;
 }
 
 export const dashboardStore = defineStore({
   id: "dashboard",
   state: (): DashboardState => ({
-    layout: ServiceLayout.configuration.children,
+    layout: [],
     showConfig: false,
     selectedGrid: null,
     entity: "",
@@ -62,11 +68,21 @@ export const dashboardStore = defineStore({
     showTopology: false,
     currentTabItems: [],
     dashboards: [],
+    currentDashboard: null,
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
       this.layout = data;
     },
+    setCurrentDashboard(item: {
+      name: string;
+      layer: string;
+      entity: string;
+      id: string;
+    }) {
+      console.log(item);
+      this.currentDashboard = item;
+    },
     addControl(type: string) {
       const newItem: LayoutConfig = {
         ...NewControl,
@@ -290,18 +306,19 @@ export const dashboardStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      const data = [
-        ServiceLayout,
-        AllLayout,
-        EndpointLayout,
-        InstanceLayout,
-        ServiceRelationLayout,
-        InstanceRelationLayout,
-        EndpointRelationLayout,
-      ].map((t: any) => {
-        t.configuration = JSON.stringify(t.configuration);
-        return t;
-      });
+      // const data = [
+      //   ServiceLayout,
+      //   AllLayout,
+      //   EndpointLayout,
+      //   InstanceLayout,
+      //   ServiceRelationLayout,
+      //   InstanceRelationLayout,
+      //   EndpointRelationLayout,
+      // ].map((t: any) => {
+      //   t.configuration = JSON.stringify(t.configuration);
+      //   return t;
+      // });
+      const data = res.data.data.getAllTemplates;
       const list = [];
       for (const t of data) {
         const c = JSON.parse(t.configuration);
@@ -332,6 +349,94 @@ export const dashboardStore = defineStore({
         sessionStorage.getItem("dashboards") || "[]"
       );
     },
+    async saveDashboard() {
+      if (!this.currentDashboard.name) {
+        ElMessage.error("The dashboard name is needed.");
+        return;
+      }
+      const c = {
+        ...this.currentDashboard,
+        isRoot: false,
+        children: this.layout,
+      };
+      let res: AxiosResponse;
+      let json;
+
+      if (this.currentDashboard.id) {
+        res = await graphql.query("updateTemplate").params({
+          setting: {
+            id: this.currentDashboard.id,
+            configuration: JSON.stringify(c),
+          },
+        });
+        json = res.data.data.changeTemplate;
+      } else {
+        const index = this.dashboards.findIndex(
+          (d: { name: string; entity: string; layer: string; id: string }) =>
+            d.name === this.currentDashboard.name &&
+            d.entity === this.currentDashboard.entity &&
+            d.layer === this.currentDashboard.layerId
+        );
+        if (index > -1) {
+          ElMessage.error("The dashboard name cannot be duplicate.");
+          return;
+        }
+        res = await graphql
+          .query("addNewTemplate")
+          .params({ setting: { configuration: JSON.stringify(c) } });
+
+        json = res.data.data.addTemplate;
+      }
+      if (res.data.errors) {
+        ElMessage.error(res.data.errors);
+        return res.data;
+      }
+      if (!json.status) {
+        ElMessage.error(json.message);
+        return;
+      }
+      ElMessage.success("Saved successfully");
+
+      this.dashboards.push({
+        id: json.id,
+        name,
+        layer: this.layerId,
+        entity: this.entity,
+        isRoot: true,
+      });
+      const key = [
+        this.layer,
+        this.entity,
+        this.currentDashboard.name.split(" ").join("-"),
+      ].join("_");
+      const l = { id: json.id, configuration: c };
+      sessionStorage.setItem(key, JSON.stringify(l));
+      sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards));
+    },
+    async deleteDashbaord() {
+      const res: AxiosResponse = await graphql
+        .query("removeTemplate")
+        .params({ id: this.currentDashboard.id });
+
+      if (res.data.errors) {
+        ElMessage.error(res.data.errors);
+        return res.data;
+      }
+      const json = res.data.data.disableTemplate;
+      if (!json.status) {
+        ElMessage.error(json.message);
+        return res.data;
+      }
+      this.dashboards = this.dashboards.filter(
+        (d: any) => d.id !== this.currentDashboard.id
+      );
+      const key = [
+        this.currentDashboard.layer,
+        this.currentDashboard.entity,
+        this.currentDashboard.name.split(" ").join("-"),
+      ].join("_");
+      sessionStorage.removeItem(key);
+    },
   },
 });
 

src/views/dashboard/Edit.vue

@@ -63,6 +63,7 @@ async function setTemplate() {
     sessionStorage.getItem(layoutKey) || "{}"
   );
   const layout = JSON.parse(c.configuration || "{}");
+
   dashboardStore.setLayout(layout.children || []);
 }
 function handleClick(e: any) {

src/views/dashboard/List.vue

@@ -51,7 +51,7 @@ limitations under the License. -->
             </el-button>
             <el-popconfirm
               title="Are you sure to delete this?"
-              @confirm="handleDelete(scope.$index, scope.row)"
+              @confirm="handleDelete(scope.row)"
             >
               <template #reference>
                 <el-button size="small" type="danger">
@@ -98,20 +98,24 @@ async function setList() {
   dashboards.value = dashboardStore.dashboards;
 }
 const handleEdit = (row: { name: string; layer: string; entity: string }) => {
+  dashboardStore.setCurrentDashboard(row);
   router.push(
     `/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
   );
 };
-const handleDelete = (
-  index: number,
-  row: { name: string; layer: string; entity: string }
-) => {
-  dashboards.value.splice(index, 1);
+async function handleDelete(row: {
+  name: string;
+  layer: string;
+  entity: string;
+}) {
+  dashboardStore.setCurrentDashboard(row);
+  await dashboardStore.deleteDashbaord();
+  dashboards.value = dashboardStore.dashboards;
   sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
   sessionStorage.removeItem(
     `${row.layer}_${row.entity}_${row.name.split(" ").join("-")}`
   );
-};
+}
 function searchDashboards() {
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
   dashboards.value = list.filter((d: { name: string }) =>

src/views/dashboard/New.vue

@@ -85,6 +85,11 @@ const onCreate = () => {
     ElMessage.error("The dashboard name cannot be duplicate.");
     return;
   }
+  dashboardStore.setCurrentDashboard({
+    name: states.name,
+    entity: states.entity,
+    layer: states.selectedLayer,
+  });
   const name = states.name.split(" ").join("-");
   const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`;
   router.push(path);

src/views/dashboard/panel/Layout.vue

@@ -19,7 +19,6 @@ limitations under the License. -->
     :row-height="10"
     :is-draggable="true"
     :is-resizable="true"
-    @layout-updated="layoutUpdatedEvent"
   >
     <grid-item
       v-for="item in dashboardStore.layout"
@@ -49,6 +48,7 @@ export default defineComponent({
   setup() {
     const dashboardStore = useDashboardStore();
     function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
+      console.log(newLayout);
       dashboardStore.setLayout(newLayout);
     }
     function clickGrid(item: LayoutConfig) {

src/views/dashboard/panel/Tool.vue

@@ -316,6 +316,9 @@ function setTabControls(id: string) {
     case "addTopology":
       dashboardStore.addTabControls("Topology");
       break;
+    case "apply":
+      dashboardStore.saveDashboard(params.name);
+      break;
     default:
       ElMessage.info("Don't support this control");
       break;
@@ -342,8 +345,8 @@ function setControls(id: string) {
     case "addTopology":
       dashboardStore.addControl("Topology");
       break;
-    case "settings":
-      dashboardStore.setConfigPanel(true);
+    case "apply":
+      dashboardStore.saveDashboard(params.name);
       break;
     default:
       dashboardStore.addControl("Widget");