set layer dashboards

src/router/database.ts

@@ -36,7 +36,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
           headPath: "/database",
           exact: true,
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/Layer.vue"),
       },
     ],
   },

src/router/general.ts

@@ -37,7 +37,7 @@ export const routesGen: Array<RouteRecordRaw> = [
           headPath: "/general/service",
           exact: true,
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/Layer.vue"),
       },
     ],
   },

src/router/serviceMesh.ts

@@ -36,7 +36,7 @@ export const routesMesh: Array<RouteRecordRaw> = [
           title: "services",
           headPath: "/mesh/services",
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/Layer.vue"),
       },
       {
         path: "/mesh/controlPanel",
@@ -45,7 +45,7 @@ export const routesMesh: Array<RouteRecordRaw> = [
           title: "controlPanel",
           headPath: "/mesh/controlPanel",
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/Layer.vue"),
       },
       {
         path: "/mesh/dataPanel",
@@ -54,7 +54,7 @@ export const routesMesh: Array<RouteRecordRaw> = [
           title: "dataPanel",
           headPath: "/mesh/dataPanel",
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/Layer.vue"),
       },
     ],
   },

src/views/Layer.vue

@@ -0,0 +1,93 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <Edit v-if="dashboardStore.currentDashboard" />
+  <div class="no-root" v-else>Please set a root dashboard for {{ layer }}</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { EntityType } from "./dashboard/data";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import Edit from "./dashboard/Edit.vue";
+
+const route = useRoute();
+const dashboardStore = useDashboardStore();
+const routeNames = [
+  "GeneralServices",
+  "Database",
+  "MeshServices",
+  "ControlPanel",
+  "DataPanel",
+];
+const layer = ref<string>("GENERAL");
+getDashboard();
+
+async function getDashboard() {
+  dashboardStore.setCurrentDashboard(null);
+  setLayer(String(route.name));
+  await dashboardStore.setDashboards();
+  const index = dashboardStore.dashboards.findIndex(
+    (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
+      d.layer === layer.value && d.entity === EntityType[1].value && d.isRoot
+  );
+  if (index < 0) {
+    return;
+  }
+  const d = dashboardStore.dashboards[index];
+  dashboardStore.setCurrentDashboard(d);
+}
+function setLayer(n: string) {
+  switch (n) {
+    case routeNames[0]:
+      layer.value = "GENERAL";
+      break;
+    case routeNames[1]:
+      layer.value = "VIRTUAL_DATABASE";
+      break;
+    case routeNames[2]:
+      layer.value = "MESH";
+      break;
+    case routeNames[3]:
+      layer.value = "MESH_CP";
+      break;
+    case routeNames[4]:
+      layer.value = "MESH_DP";
+      break;
+    default:
+      layer.value = "GENERAL";
+      break;
+  }
+  // appStore.setPageTitle(layer.value);
+}
+watch(
+  () => route.name,
+  (name: unknown) => {
+    if (!name) {
+      return;
+    }
+    getDashboard();
+  }
+);
+</script>
+<style lang="scss" scoped>
+.no-root {
+  padding: 15px;
+  width: 100%;
+  text-align: center;
+  color: #888;
+}
+</style>

src/views/Service.vue

@@ -1,222 +0,0 @@
-<!-- Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License. -->
-<template>
-  <div class="service-table">
-    <div class="search">
-      <el-input
-        v-model="searchText"
-        placeholder="Please input name"
-        class="input-with-search"
-        size="small"
-        @change="searchServices"
-      >
-        <template #append>
-          <el-button size="small">
-            <Icon size="sm" iconName="search" />
-          </el-button>
-        </template>
-      </el-input>
-    </div>
-    <el-table
-      :data="services"
-      :span-method="objectSpanMethod"
-      :border="true"
-      :style="{ fontSize: '14px' }"
-      v-loading="loading"
-    >
-      <el-table-column
-        v-for="(h, index) in tableHeader"
-        :label="t(h)"
-        :key="h + index"
-      >
-        <template #default="scope">
-          <span
-            v-if="h === tableHeader[1] && index !== 0"
-            class="service-name cp"
-            @click="visitLayout(scope.row)"
-          >
-            {{ scope.row[h] }}
-          </span>
-          <span v-else>{{ scope.row[h] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import { ElTable, ElTableColumn } from "element-plus";
-import { useSelectorStore } from "@/store/modules/selectors";
-import { ElMessage } from "element-plus";
-import { EntityType } from "./dashboard/data";
-import { useDashboardStore } from "@/store/modules/dashboard";
-import { useAppStoreWithOut } from "@/store/modules/app";
-import { Service } from "@/types/selector";
-import router from "@/router";
-
-const route = useRoute();
-const { t } = useI18n();
-const appStore = useAppStoreWithOut();
-const dashboardStore = useDashboardStore();
-const selectorStore = useSelectorStore();
-const tableHeader = ["group", "label", "id"];
-const routeNames = [
-  "GeneralServices",
-  "Database",
-  "MeshServices",
-  "ControlPanel",
-  "DataPanel",
-];
-const loading = ref<boolean>(false);
-const layer = ref<string>("GENERAL");
-const searchText = ref<string>("");
-const services = ref<Service[]>([]);
-const groups = ref<any>({});
-
-getServices();
-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 || "";
-      if (result[item.group]) {
-        item.merge = true;
-      } else {
-        item.merge = false;
-        result[item.group] = [];
-      }
-      result[item.group].push(item);
-      return result;
-    },
-    {}
-  );
-  services.value = Object.values(map).flat(1);
-  const obj = {} as any;
-  for (const s of services.value) {
-    s.group = s.group || "";
-    if (!obj[s.group]) {
-      obj[s.group] = 1;
-    } else {
-      obj[s.group]++;
-    }
-    groups.value[s.group] = obj[s.group];
-  }
-}
-
-function objectSpanMethod(param: any): any {
-  if (param.columnIndex !== 0) {
-    return;
-  }
-  if (param.row.merge) {
-    return {
-      rowspan: 0,
-      colspan: 0,
-    };
-  } else {
-    return { rowspan: groups.value[param.row.group], colspan: 1 };
-  }
-}
-
-function searchServices() {
-  services.value = dashboardStore.services.filter((s: Service) =>
-    s.label.includes(searchText.value)
-  );
-}
-
-function visitLayout(row: { id: string }) {
-  const l =
-    dashboardStore.dashboards.filter(
-      (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
-        d.layer === layer.value && d.entity === EntityType[0].value && d.isRoot
-    )[0] || {};
-  dashboardStore.setCurrentDashboard(l);
-  if (!l.name) {
-    ElMessage.info("Please set a root dashboard");
-    return;
-  }
-  router.push(
-    `/dashboard/${layer.value}/${EntityType[0].value}/${row.id}/${l.name
-      .split(" ")
-      .join("-")}`
-  );
-}
-function setLayer(n: string) {
-  switch (n) {
-    case routeNames[0]:
-      layer.value = "GENERAL";
-      break;
-    case routeNames[1]:
-      layer.value = "VIRTUAL_DATABASE";
-      break;
-    case routeNames[2]:
-      layer.value = "MESH";
-      break;
-    case routeNames[3]:
-      layer.value = "MESH_CP";
-      break;
-    case routeNames[4]:
-      layer.value = "MESH_DP";
-      break;
-    default:
-      layer.value = "GENERAL";
-      break;
-  }
-  appStore.setPageTitle(layer.value);
-}
-watch(
-  () => route.name,
-  (name: unknown) => {
-    if (!name) {
-      return;
-    }
-    getServices();
-  }
-);
-</script>
-<style lang="scss" scoped>
-.service-name {
-  color: #448edf;
-  cursor: pointer;
-}
-
-.service-table {
-  padding: 15px;
-  background-color: #fff;
-  margin: 30px 10px;
-  box-shadow: 0px 1px 4px 0px #00000029;
-  border-radius: 5px;
-  max-height: 100%;
-  overflow: auto;
-}
-
-.search {
-  margin-bottom: 20px;
-  width: 300px;
-  float: right;
-}
-</style>

src/views/dashboard/Edit.vue

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <Tool />
+  <Tool v-if="p.entity" />
   <div class="ds-main" @click="handleClick">
     <grid-layout />
     <el-dialog
@@ -38,6 +38,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import GridLayout from "./panel/Layout.vue";
@@ -52,14 +53,18 @@ const dashboardStore = useDashboardStore();
 const appStore = useAppStoreWithOut();
 const { t } = useI18n();
 const p = useRoute().params;
-const layoutKey = `${p.layerId}_${p.entity}_${p.name}`;
+const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
 
 setTemplate();
 
 async function setTemplate() {
   await dashboardStore.setDashboards();
+  if (dashboardStore.currentDashboard) {
+    const { layer, entity, name } = dashboardStore.currentDashboard;
+    layoutKey.value = `${layer}_${entity}_${name.split(" ").join("-")}`;
+  }
   const c: { configuration: string; id: string } = JSON.parse(
-    sessionStorage.getItem(layoutKey) || "{}"
+    sessionStorage.getItem(layoutKey.value) || "{}"
   );
   const layout: any = c.configuration || {};
   dashboardStore.setLayout(layout.children || []);
@@ -74,6 +79,8 @@ async function setTemplate() {
       isRoot: layout.isRoot,
     });
   }
+  dashboardStore.setLayer(dashboardStore.currentDashboard.layer);
+  dashboardStore.setEntity(dashboardStore.currentDashboard.entity);
 }
 function handleClick(e: any) {
   e.stopPropagation();

src/views/dashboard/List.vue

@@ -49,7 +49,9 @@ limitations under the License. -->
         <el-table-column prop="entity" label="Entity" width="200" />
         <el-table-column prop="isRoot" label="Root" width="100">
           <template #default="scope">
+            <span>
               {{ scope.row.isRoot ? t("yes") : t("no") }}
+            </span>
           </template>
         </el-table-column>
         <el-table-column label="Operations">
@@ -63,6 +65,7 @@ limitations under the License. -->
             <el-popconfirm
               title="Are you sure to set this?"
               @confirm="setRoot(scope.row)"
+              v-if="scope.row.entity === EntityType[1].value"
             >
               <template #reference>
                 <el-button size="small" style="width: 120px">
@@ -118,6 +121,7 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import router from "@/router";
 import { DashboardItem } from "@/types/dashboard";
 import { saveFile, readFile } from "@/utils/file";
+import { EntityType } from "./data";
 
 /*global Nullable*/
 const { t } = useI18n();

src/views/dashboard/graphs/ServiceList.vue

@@ -20,7 +20,7 @@ limitations under the License. -->
         placeholder="Please input service name"
         size="small"
         @change="searchList"
-        class="inputs"
+        class="inputs mt-5"
       >
         <template #append>
           <el-button size="small" @click="searchList">

src/views/dashboard/panel/Tool.vue

@@ -128,8 +128,6 @@ const states = reactive<{
   currentDestPod: "",
 });
 
-dashboardStore.setLayer(String(params.layerId));
-dashboardStore.setEntity(String(params.entity));
 appStore.setEventStack([initSelector]);
 
 initSelector();
@@ -405,7 +403,7 @@ async function fetchPods(type: string, serviceId: string, setPod: boolean) {
   }
 }
 function getTools() {
-  switch (dashboardStore.entity) {
+  switch (params.entity) {
     case EntityType[1].value:
       toolIcons.value = AllTools;
       break;