set layouts

src/App.vue

@@ -15,7 +15,6 @@ limitations under the License. -->
 <template>
   <router-view :key="$route.fullPath" />
 </template>
-
 <style>
 #app {
   color: #2c3e50;

src/constants/templates.ts

@@ -17,7 +17,10 @@
 export const AllLayout = {
   id: "0",
   configuration: {
-    name: "Global",
+    name: "All Layout",
+    layer: "GENERAL",
+    entity: "All",
+    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -172,7 +175,10 @@ export const AllLayout = {
 export const ServiceLayout = {
   id: "1",
   configuration: {
-    name: "Service",
+    name: "Service Layout",
+    layer: "GENERAL",
+    entity: "Service",
+    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -556,7 +562,10 @@ export const ServiceLayout = {
 export const EndpointLayout = {
   id: "2",
   configuration: {
-    name: "Endpoint",
+    name: "Endpoint Layout",
+    layer: "GENERAL",
+    entity: "Endpoint",
+    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -731,7 +740,10 @@ export const EndpointLayout = {
 export const InstanceLayout = {
   id: "3",
   configuration: {
-    name: "Instance",
+    name: "Instance Layout",
+    layer: "GENERAL",
+    entity: "ServiceInstance",
+    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -882,6 +894,9 @@ export const ServiceRelationLayout = {
   id: "4",
   configuration: {
     name: "Service Relation Layout",
+    layer: "GENERAL",
+    entity: "ServiceRelation",
+    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -957,6 +972,9 @@ export const InstanceRelationLayout = {
   id: "5",
   configuration: {
     name: "Service Instance Relation Layout",
+    layer: "GENERAL",
+    entity: "ServiceInstanceRelation",
+    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -987,6 +1005,9 @@ export const EndpointRelationLayout = {
   id: "5",
   configuration: {
     name: "Endpoint Relation Layout",
+    layer: "GENERAL",
+    entity: "EndpointRelation",
+    date: new Date().getTime(),
     isRoot: true,
     children: [
       {

src/layout/components/AppMain.vue

@@ -21,24 +21,6 @@ limitations under the License. -->
     </router-view>
   </section>
 </template>
-<script lang="ts" setup>
-import { ElMessage } from "element-plus";
-import { useAppStoreWithOut } from "@/store/modules/app";
-
-const appStore = useAppStoreWithOut();
-
-appStore.queryOAPTimeInfo();
-fetchTemplates();
-async function fetchTemplates() {
-  const res = await appStore.getAllTemplates();
-
-  if (res.errors) {
-    ElMessage.error(res.errors);
-    return;
-  }
-  // sessionStorage.setItem("templates", "[]");
-}
-</script>
 <style lang="scss" scoped>
 .app-main {
   height: calc(100% - 40px);

src/main.ts

@@ -23,11 +23,15 @@ import i18n from "./locales";
 import "element-plus/dist/index.css";
 import "./styles/index.scss";
 import ElementPlus from "element-plus";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
+const appStore = useAppStoreWithOut();
 const app = createApp(App);
 
 app.use(ElementPlus, { size: "small", zIndex: 3000 });
 app.use(components);
 app.use(i18n);
 app.use(store);
-app.use(router).mount("#app");
+appStore.queryOAPTimeInfo().then(() => {
+  app.use(router).mount("#app");
+});

src/router/index.ts

@@ -57,4 +57,5 @@ router.beforeEach((to, from, next) => {
     next();
   }
 });
+
 export default router;

src/store/modules/app.ts

@@ -22,7 +22,6 @@ import getLocalTime from "@/utils/localtime";
 import { AxiosResponse } from "axios";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
-import { getAllTemplates } from "@/graphql/fragments/app";
 /*global Nullable*/
 interface AppState {
   durationRow: any;
@@ -156,14 +155,6 @@ export const appStore = defineStore({
 
       return res.data;
     },
-    async getAllTemplates() {
-      const res: AxiosResponse = await graphql.query("getTemplates").params({});
-
-      if (res.data.errors) {
-        return res.data;
-      }
-      return res.data;
-    },
   },
 });
 export function useAppStoreWithOut(): any {

src/store/modules/dashboard.ts

@@ -229,28 +229,6 @@ export const dashboardStore = defineStore({
     },
     setEntity(type: string) {
       this.entity = type;
-      // todo
-      if (type === "ServiceInstance") {
-        this.layout = InstanceLayout.configuration.children;
-      }
-      if (type === "Endpoint") {
-        this.layout = EndpointLayout.configuration.children;
-      }
-      if (type == "All") {
-        this.layout = AllLayout.configuration.children;
-      }
-      if (type == "Service") {
-        this.layout = ServiceLayout.configuration.children;
-      }
-      if (type == "ServiceRelation") {
-        this.layout = ServiceRelationLayout.configuration.children;
-      }
-      if (type == "ServiceInstanceRelation") {
-        this.layout = InstanceRelationLayout.configuration.children;
-      }
-      if (type == "EndpointRelation") {
-        this.layout = EndpointRelationLayout.configuration.children;
-      }
     },
     setTopology(show: boolean) {
       this.showTopology = show;
@@ -303,6 +281,50 @@ export const dashboardStore = defineStore({
       const res: AxiosResponse = await query(param);
       return res.data;
     },
+    async getAllTemplates() {
+      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,
+        EndpointLayout,
+        InstanceLayout,
+        ServiceRelationLayout,
+        InstanceRelationLayout,
+        EndpointRelationLayout,
+      ].map((t: any) => {
+        t.configuration = JSON.stringify(t.configuration);
+        return t;
+      });
+      const list = [];
+      for (const t of data) {
+        const c = JSON.parse(t.configuration);
+        const key = [c.layer, c.entity, c.name.split(" ").join("-")].join("_");
+
+        list.push({
+          id: t.id,
+          layer: c.layer,
+          entity: c.entity,
+          name: c.name,
+          date: c.date,
+        });
+        console.log(key);
+        sessionStorage.setItem(key, JSON.stringify(t));
+      }
+      sessionStorage.setItem("dashboards", JSON.stringify(list));
+      return res;
+    },
   },
 });
 

src/views/dashboard/Edit.vue

@@ -39,6 +39,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 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";
@@ -47,30 +48,32 @@ 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();
 const { t } = useI18n();
-// fetch layout data from serve side
-// const layout: any[] = [
-//   { x: 0, y: 0, w: 4, h: 12, i: "0" },
-//   { x: 4, y: 0, w: 4, h: 12, i: "1" },
-//   { x: 8, y: 0, w: 4, h: 15, i: "2" },
-//   { x: 12, y: 0, w: 4, h: 9, i: "3" },
-//   { x: 16, y: 0, w: 4, h: 9, i: "4" },
-//   { x: 20, y: 0, w: 4, h: 9, i: "5" },
-//   { x: 0, y: 12, w: 4, h: 15, i: "7" },
-//   { x: 4, y: 12, w: 4, h: 15, i: "8" },
-//   { x: 8, y: 15, w: 4, h: 12, i: "9" },
-//   { x: 12, y: 9, w: 4, h: 12, i: "10" },
-//   { x: 16, y: 9, w: 4, h: 12, i: "11" },
-//   { x: 20, y: 9, w: 4, h: 15, i: "12" },
-//   { x: 0, y: 27, w: 4, h: 12, i: "14" },
-//   { x: 4, y: 27, w: 4, h: 12, i: "15" },
-//   { x: 8, y: 27, w: 4, h: 15, i: "16" },
-// ];
-// dashboardStore.setLayout(layout);
+const p = useRoute().params;
+const layoutKey = `${p.layerId}_${p.entity}_${p.name}`;
+
 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;
+    }
+  }
+  const c: { configuration: string; id: string } = JSON.parse(
+    sessionStorage.getItem(layoutKey) || "{}"
+  );
+  const layout = JSON.parse(c.configuration || "") || {};
+  dashboardStore.setLayout(layout.children || []);
+}
 function handleClick(e: any) {
   e.stopPropagation();
   if (e.target.className === "ds-main") {

src/views/dashboard/List.vue

@@ -23,7 +23,7 @@ limitations under the License. -->
       >
         <template #append>
           <el-button size="small">
-            <Icon size="lg" iconName="search" />
+            <Icon size="sm" iconName="search" />
           </el-button>
         </template>
       </el-input>
@@ -33,18 +33,31 @@ limitations under the License. -->
         </el-button>
       </router-link>
     </div>
-    <el-table :data="tableData" style="width: 100%" max-height="550">
+    <div class="table">
+      <el-table
+        :border="true"
+        :data="dashboards"
+        :style="{ width: '100%' }"
+        max-height="550"
+      >
         <el-table-column fixed prop="name" label="Name" />
-      <el-table-column prop="type" label="Type" />
+        <el-table-column prop="layer" label="Layer" />
+        <el-table-column prop="entity" label="Entity" />
         <el-table-column prop="date" label="Date" />
         <el-table-column label="Operations">
           <template #default="scope">
-          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+            <el-button
+              size="small"
+              @click="handleEdit(scope.$index, scope.row)"
+            >
               {{ t("view") }}
             </el-button>
-          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+            <!-- <el-button
+              size="small"
+              @click="handleEdit(scope.$index, scope.row)"
+            >
               {{ t("edit") }}
-          </el-button>
+            </el-button> -->
             <el-button
               size="small"
               type="danger"
@@ -56,14 +69,18 @@ limitations under the License. -->
         </el-table-column>
       </el-table>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
 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";
 
 const appStore = useAppStoreWithOut();
+const dashboardStore = useDashboardStore();
 appStore.setPageTitle("Dashboard List");
 //  # - os-linux
 //  # - k8s
@@ -77,29 +94,22 @@ appStore.setPageTitle("Dashboard List");
 //  # - browser
 //  # - skywalking
 const { t } = useI18n();
+const dashboards = ref<any[]>([]);
 const searchText = ref<string>("");
-const tableData = [
-  {
-    date: "2016-05-03",
-    name: "xxx",
-    type: "general",
-  },
-  {
-    date: "2016-05-02",
-    name: "xxx",
-    type: "k8s",
-  },
-  {
-    date: "2016-05-04",
-    name: "xxx",
-    type: "database",
-  },
-  {
-    date: "2016-05-01",
-    name: "xxx",
-    type: "mesh",
-  },
-];
+
+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") || "");
+}
 const handleEdit = (index: number, row: any) => {
   console.log(index, row);
 };
@@ -120,4 +130,10 @@ const handleDelete = (index: number, row: any) => {
   width: 300px;
   margin-left: 20px;
 }
+
+.table {
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 3px;
+}
 </style>