feat: implement a breadcrumb component as navigation (#313)

src/layout/components/NavBar.vue

@@ -14,7 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="nav-bar flex-h">
-    <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || pageName }}</div>
+    <el-breadcrumb separator=">" class="title flex-h" v-if="pathNames.length">
+      <el-breadcrumb-item
+        v-for="(path, index) in pathNames"
+        :key="index"
+        :replace="true"
+        :to="{ path: getName(path).path || '' }"
+      >
+        <el-dropdown size="small" placement="bottom" :persistent="false">
+          <span class="cp name">{{ getName(path).name }}</span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="setName(p)" v-for="(p, index) in path" :key="index">
+                <span>{{ p.name }}</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="title" v-else>{{ pageTitle }}</div>
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker
@@ -45,20 +64,46 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import timeFormat from "@/utils/timeFormat";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useDashboardStore } from "@/store/modules/dashboard";
   import { ElMessage } from "element-plus";
+  import { MetricCatalog } from "@/views/dashboard/data";
+  import type { DashboardItem } from "@/types/dashboard";
+  import router from "@/router";
 
   /*global Indexable */
-  const { t } = useI18n();
+  const { t, te } = useI18n();
   const appStore = useAppStoreWithOut();
+  const dashboardStore = useDashboardStore();
   const route = useRoute();
-  const pageName = ref<string>("");
+  const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
   const timeRange = ref<number>(0);
+  const pageTitle = ref<string>("");
 
   resetDuration();
   getVersion();
-  const setConfig = (value: string) => {
-    pageName.value = value || "";
-  };
+  getNavPaths();
+
+  function getName(list: any[]) {
+    return list.find((d: any) => d.selected) || {};
+  }
+
+  function setName(item: any) {
+    pathNames.value = pathNames.value.map((list: { path?: string; name: string; selected: boolean }[]) => {
+      const p = list.find((i: any) => i.entity === item.entity && item.layer === i.layer && i.name === item.name);
+      if (p) {
+        list = list.map((d: any) => {
+          d.selected = false;
+          if (d.entity === item.entity && item.layer === d.layer && d.name === item.name) {
+            d.selected = true;
+          }
+          return d;
+        });
+      }
+
+      return list;
+    });
+    item.path && router.push(item.path);
+  }
 
   function handleReload() {
     const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
@@ -73,19 +118,138 @@ limitations under the License. -->
     }
     appStore.setDuration(timeFormat(val));
   }
-  setConfig(String(route.meta.title));
-  watch(
-    () => route.meta.title,
-    (title: unknown) => {
-      setConfig(String(title));
-    },
-  );
+
+  function getNavPaths() {
+    pathNames.value = [];
+    pageTitle.value = "";
+    const dashboard = dashboardStore.currentDashboard;
+
+    if (!(dashboard && dashboard.name)) {
+      updateNavTitle();
+      return;
+    }
+    const root =
+      dashboardStore.dashboards.filter((d: DashboardItem) => d.isRoot && dashboard.layer === d.layer)[0] || {};
+    for (const item of appStore.allMenus) {
+      if (item.subItems && item.subItems.length) {
+        for (const subItem of item.subItems) {
+          if (subItem.layer === root.layer) {
+            root.path = subItem.path;
+          }
+        }
+      } else {
+        if (item.layer === root.layer) {
+          root.path = item.path;
+        }
+      }
+    }
+    pathNames.value.push([{ ...root, selected: true }]);
+    if (dashboard.entity === MetricCatalog.ALL) {
+      return;
+    }
+    if (dashboard.entity === MetricCatalog.SERVICE) {
+      pathNames.value.push([
+        {
+          name: dashboard.name,
+          selected: true,
+        },
+      ]);
+      return;
+    }
+    const serviceDashboards = dashboardStore.dashboards.filter(
+      (d: DashboardItem) => MetricCatalog.SERVICE === d.entity && dashboard.layer === d.layer,
+    );
+    if (!serviceDashboards.length) {
+      return;
+    }
+
+    const serviceId = route.params.serviceId;
+    const list = serviceDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+      let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
+      if (serviceId) {
+        path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${d.name}`;
+      }
+      const selected = index === 0;
+      return {
+        ...d,
+        path,
+        selected,
+      };
+    });
+    pathNames.value.push(list);
+    const podId = route.params.podId;
+    if (dashboard.entity === MetricCatalog.ENDPOINT_RELATION) {
+      const endpointDashboards = dashboardStore.dashboards.filter(
+        (d: DashboardItem) => MetricCatalog.ENDPOINT === d.entity && dashboard.layer === d.layer,
+      );
+      const list = endpointDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+        let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
+        if (podId) {
+          path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${podId}/${d.name}`;
+        }
+        const selected = index === 0;
+        return {
+          ...d,
+          path,
+          selected,
+        };
+      });
+
+      pathNames.value.push(list);
+    }
+    const destServiceId = route.params.destServiceId;
+    if (dashboard.entity === MetricCatalog.SERVICE_INSTANCE_RELATION) {
+      const serviceRelationDashboards = dashboardStore.dashboards.filter(
+        (d: DashboardItem) => MetricCatalog.SERVICE_RELATION === d.entity && dashboard.layer === d.layer,
+      );
+      const list = serviceRelationDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+        let path = `/dashboard/related/${d.layer}/${d.entity}/${serviceId}/${destServiceId}/${d.name}`;
+        if (destServiceId) {
+          path = `/dashboard/related/${d.layer}/${d.entity}/${serviceId}/${destServiceId}/${d.name}`;
+        }
+        const selected = index === 0;
+        return {
+          ...d,
+          path,
+          selected,
+        };
+      });
+      pathNames.value.push(list);
+    }
+    if ([MetricCatalog.Process, MetricCatalog.PROCESS_RELATION].includes(dashboard.entity)) {
+      const InstanceDashboards = dashboardStore.dashboards.filter(
+        (d: DashboardItem) => MetricCatalog.SERVICE_INSTANCE === d.entity && dashboard.layer === d.layer,
+      );
+      const list = InstanceDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+        let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
+        if (podId) {
+          path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${podId}/${d.name}`;
+        }
+        const selected = index === 0;
+        return {
+          ...d,
+          path,
+          selected,
+        };
+      });
+
+      pathNames.value.push(list);
+    }
+    pathNames.value.push([
+      {
+        name: dashboard.name,
+        selected: true,
+      },
+    ]);
+  }
+
   async function getVersion() {
     const res = await appStore.fetchVersion();
     if (res.errors) {
       ElMessage.error(res.errors);
     }
   }
+
   function resetDuration() {
     const { duration }: Indexable = route.params;
     if (duration) {
@@ -99,10 +263,22 @@ limitations under the License. -->
       appStore.updateUTC(d.utc);
     }
   }
+
+  function updateNavTitle() {
+    const key = String(route.meta.i18nKey);
+    pageTitle.value = te(key) ? t(key) : String(route.meta.title);
+  }
+
+  watch(
+    () => [dashboardStore.currentDashboard, route.name],
+    () => {
+      getNavPaths();
+    },
+  );
 </script>
 <style lang="scss" scoped>
   .nav-bar {
-    padding: 5px 10px;
+    padding: 5px;
     text-align: left;
     justify-content: space-between;
     background-color: #fafbfc;
@@ -121,10 +297,17 @@ limitations under the License. -->
     font-size: $font-size-normal;
     font-weight: 500;
     height: 28px;
-    line-height: 28px;
   }
 
   .nav-tabs {
     padding: 10px;
   }
+
+  .name {
+    display: inline-block;
+    max-width: 250px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 </style>

src/store/modules/app.ts

@@ -32,7 +32,6 @@ interface AppState {
   eventStack: (() => unknown)[];
   timer: Nullable<TimeoutHandle>;
   autoRefresh: boolean;
-  pageTitle: string;
   version: string;
   isMobile: boolean;
   reloadTimer: Nullable<IntervalHandle>;
@@ -53,7 +52,6 @@ export const appStore = defineStore({
     eventStack: [],
     timer: null,
     autoRefresh: false,
-    pageTitle: "",
     version: "",
     isMobile: false,
     reloadTimer: null,
@@ -146,9 +144,6 @@ export const appStore = defineStore({
     setAutoRefresh(auto: boolean) {
       this.autoRefresh = auto;
     },
-    setPageTitle(title: string) {
-      this.pageTitle = title;
-    },
     runEventStack() {
       if (this.timer) {
         clearTimeout(this.timer);

src/store/modules/selectors.ts

@@ -184,7 +184,7 @@ export const selectorStore = defineStore({
         if (isRelation) {
           this.currentDestPod = res.data.data.instance || null;
           this.destPods = [res.data.data.instance];
-          return;
+          return res.data;
         }
         this.currentPod = res.data.data.instance || null;
         this.pods = [res.data.data.instance];
@@ -199,16 +199,16 @@ export const selectorStore = defineStore({
       const res: AxiosResponse = await graphql.query("queryEndpoint").params({
         endpointId,
       });
-      if (!res.data.errors) {
-        if (isRelation) {
-          this.currentDestPod = res.data.data.endpoint || null;
-          this.destPods = [res.data.data.endpoint];
-          return;
-        }
-        this.currentPod = res.data.data.endpoint || null;
-        this.pods = [res.data.data.endpoint];
+      if (res.data.errors) {
+        return res.data;
       }
-
+      if (isRelation) {
+        this.currentDestPod = res.data.data.endpoint || null;
+        this.destPods = [res.data.data.endpoint];
+        return res.data;
+      }
+      this.currentPod = res.data.data.endpoint || null;
+      this.pods = [res.data.data.endpoint];
       return res.data;
     },
     async getProcess(processId: string, isRelation?: boolean) {
@@ -222,7 +222,7 @@ export const selectorStore = defineStore({
         if (isRelation) {
           this.currentDestProcess = res.data.data.process || null;
           this.destProcesses = [res.data.data.process];
-          return;
+          return res.data;
         }
         this.currentProcess = res.data.data.process || null;
         this.processes = [res.data.data.process];

src/styles/reset.scss

@@ -212,6 +212,10 @@ div.vis-tooltip {
 div:has(> a.menu-title) {
   display: none;
 }
+
+.el-breadcrumb {
+  line-height: 28px;
+}
 .el-input-number .el-input__inner {
   text-align: left !important;
 }

src/types/app.d.ts

@@ -44,6 +44,8 @@ export type EventParams = {
   dataType: string;
   value: number | any[];
   color: string;
+  event: Record<string, T>;
+  dataIndex: number;
   event: any;
 };
 

src/types/components.d.ts

@@ -6,6 +6,8 @@ import '@vue/runtime-core'
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']

src/types/profile.d.ts

@@ -55,8 +55,8 @@ export interface SegmentSpan {
   component: string;
   isError: boolean;
   layer: string;
-  tags: any[];
-  logs: any[];
+  tags: Recordable[];
+  logs: Recordable[];
 }
 
 export interface ProfileTaskCreationRequest {

src/utils/arrayAlgorithm.ts

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+export function deduplication(arr: any, labels: string[]) {
+  const map = new Map();
+  for (const i of arr) {
+    const key = labels
+      .map((d: string) => {
+        return i[d];
+      })
+      .join("");
+    if (!map.has(i[key])) {
+      map.set(i[key], i);
+    }
+  }
+  return [...map.values()];
+}

src/views/Alarm.vue

@@ -19,12 +19,8 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import Header from "./alarm/Header.vue";
   import Content from "./alarm/Content.vue";
-
-  const appStore = useAppStoreWithOut();
-  appStore.setPageTitle("Alerting");
 </script>
 <style lang="scss" scoped>
   .alarm {

src/views/Event.vue

@@ -19,13 +19,8 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import Header from "./event/Header.vue";
   import Content from "./event/Content.vue";
-
-  const appStore = useAppStoreWithOut();
-
-  appStore.setPageTitle("Events");
 </script>
 <style lang="scss" scoped>
   .event {

src/views/Layer.vue

@@ -24,11 +24,9 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Dashboard from "./dashboard/Edit.vue";
   import { useI18n } from "vue-i18n";
-  import { useAppStoreWithOut } from "@/store/modules/app";
 
   const route = useRoute();
   const { t } = useI18n();
-  const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const layer = ref<string>("GENERAL");
 
@@ -44,7 +42,6 @@ limitations under the License. -->
         d.layer === dashboardStore.layerId && [EntityType[0].value, EntityType[1].value].includes(d.entity) && d.isRoot,
     );
     if (!item) {
-      appStore.setPageTitle(dashboardStore.layer);
       dashboardStore.setCurrentDashboard(null);
       dashboardStore.setEntity(EntityType[1].value);
       return;

src/views/Settings.vue

@@ -66,7 +66,6 @@ limitations under the License. -->
   const utcHour = ref<number>(appStore.utcHour);
   const utcMin = ref<number>(appStore.utcMin);
 
-  appStore.setPageTitle("Setting");
   const handleReload = () => {
     const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
     const dates: Date[] = [

src/views/components/ConditionTags.vue

@@ -71,7 +71,7 @@ limitations under the License. -->
   import { ElMessage } from "element-plus";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
-  /*global defineEmits, defineProps */
+  /*global defineEmits, defineProps, Recordable */
   const emit = defineEmits(["update"]);
   const props = defineProps({
     type: { type: String, default: "TRACE" },
@@ -118,7 +118,7 @@ limitations under the License. -->
     emit("update", { tagsMap, tagsList: tagsList.value });
   }
   async function fetchTagKeys() {
-    let resp: any = {};
+    let resp: Recordable = {};
     if (props.type === "TRACE") {
       resp = await traceStore.getTagKeys();
     } else {
@@ -137,7 +137,7 @@ limitations under the License. -->
 
   async function fetchTagValues() {
     const param = tags.value.split("=")[0];
-    let resp: any = {};
+    let resp: Recordable = {};
     if (props.type === "TRACE") {
       resp = await traceStore.getTagValues(param);
     } else {

src/views/dashboard/Edit.vue

@@ -41,13 +41,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-  import { ref, defineComponent } from "vue";
+  import { ref, defineComponent, onUnmounted } from "vue";
   import { useI18n } from "vue-i18n";
   import { useRoute } from "vue-router";
   import GridLayout from "./panel/Layout.vue";
   import Tool from "./panel/Tool.vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import Configuration from "./configuration";
   import type { LayoutConfig } from "@/types/dashboard";
   import WidgetLink from "./components/WidgetLink.vue";
@@ -57,7 +56,6 @@ limitations under the License. -->
     components: { ...Configuration, GridLayout, Tool, WidgetLink },
     setup() {
       const dashboardStore = useDashboardStore();
-      const appStore = useAppStoreWithOut();
       const { t } = useI18n();
       const p = useRoute().params;
       const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
@@ -77,7 +75,6 @@ limitations under the License. -->
         const layout: any = c.configuration || {};
 
         dashboardStore.setLayout(setWidgetsID(layout.children || []));
-        appStore.setPageTitle(layout.name);
         if (p.entity) {
           dashboardStore.setCurrentDashboard({
             layer: p.layerId,
@@ -114,6 +111,10 @@ limitations under the License. -->
         }
       }
 
+      onUnmounted(() => {
+        dashboardStore.setCurrentDashboard({});
+      });
+
       return {
         t,
         handleClick,

src/views/dashboard/List.vue

@@ -135,7 +135,6 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { ElMessageBox, ElMessage } from "element-plus";
   import { ElTable } from "element-plus";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import router from "@/router";
   import type { DashboardItem, LayoutConfig } from "@/types/dashboard";
@@ -145,7 +144,6 @@ limitations under the License. -->
 
   /*global Nullable*/
   const { t } = useI18n();
-  const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const pageSize = 20;
   const dashboards = ref<DashboardItem[]>([]);
@@ -157,7 +155,6 @@ limitations under the License. -->
   const multipleSelection = ref<DashboardItem[]>([]);
   const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
 
-  appStore.setPageTitle("Dashboard List");
   const handleSelectionChange = (val: DashboardItem[]) => {
     multipleSelection.value = val;
   };

src/views/dashboard/New.vue

@@ -53,12 +53,9 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import { EntityType } from "./data";
   import { ElMessage } from "element-plus";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
 
-  const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
-  appStore.setPageTitle("Dashboard New");
   const { t } = useI18n();
   const selectorStore = useSelectorStore();
   const states = reactive({

src/views/dashboard/data.ts

@@ -161,6 +161,7 @@ export enum MetricCatalog {
   SERVICE_RELATION = "ServiceRelation",
   SERVICE_INSTANCE_RELATION = "ServiceInstanceRelation",
   ENDPOINT_RELATION = "EndpointRelation",
+  Process = "Process",
   PROCESS_RELATION = "ProcessRelation",
 }
 export const EntityType = [

src/views/dashboard/graphs/InstanceList.vue

@@ -294,4 +294,8 @@ limitations under the License. -->
     max-height: 400px;
     overflow: auto;
   }
+
+  .link {
+    color: $active-color;
+  }
 </style>

src/views/dashboard/related/network-profiling/components/Tasks.vue

@@ -216,7 +216,7 @@ limitations under the License. -->
     width: 330px;
     height: calc(100% - 10px);
     overflow: auto;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgb(0 0 0 / 10%);
   }
 
   .item span {
@@ -225,7 +225,7 @@ limitations under the License. -->
 
   .profile-td {
     padding: 10px 5px 10px 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
       background-color: #ededed;
@@ -253,13 +253,13 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgb(0 0 0 / 4%);
     }
   }
 
   .profile-t-tool {
     padding: 10px 5px 10px 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
     background: #f3f4f9;
     width: 100%;
   }