From 206de210925d903999917c9d74003fa57a1f4a1b Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Mon, 21 Mar 2022 18:19:31 +0800 Subject: [PATCH] reset current dashboard --- src/hooks/useDashboardsSession.ts | 32 ++++++++++++ src/views/dashboard/graphs/EndpointList.vue | 13 +++-- src/views/dashboard/graphs/InstanceList.vue | 15 ++++-- src/views/dashboard/graphs/ServiceList.vue | 15 ++++-- .../related/topology/components/Graph.vue | 49 +++++++++++++------ .../topology/components/PodTopology.vue | 16 +++++- 6 files changed, 113 insertions(+), 27 deletions(-) create mode 100644 src/hooks/useDashboardsSession.ts diff --git a/src/hooks/useDashboardsSession.ts b/src/hooks/useDashboardsSession.ts new file mode 100644 index 00000000..bd3e1a54 --- /dev/null +++ b/src/hooks/useDashboardsSession.ts @@ -0,0 +1,32 @@ +/** + * 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 default function getDashboard(param: { + name: string; + layer: string; + entity: string; +}) { + const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]"); + const dashboard = list.find( + (d: { name: string; layer: string; entity: string }) => + d.name === param.name && + d.entity === param.entity && + d.layer === param.layer + ); + + return dashboard; +} diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index f59f262a..d3b09a02 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -91,6 +91,7 @@ import Line from "./Line.vue"; import Card from "./Card.vue"; import { EntityType } from "../data"; import router from "@/router"; +import getDashboard from "@/hooks/useDashboardsSession"; /*global defineProps */ const props = defineProps({ @@ -157,11 +158,17 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) { endpoints.value = currentPods; } function clickEndpoint(scope: any) { + const d = getDashboard({ + name: props.config.dashboardName, + layer: dashboardStore.layerId, + entity: EntityType[2].value, + }); dashboardStore.setEntity(EntityType[2].value); + dashboardStore.setCurrentDashboard(d); router.push( - `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${ - selectorStore.currentService.id - }/${scope.row.id}/${props.config.dashboardName.split(" ").join("-")}` + `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${ + scope.row.id + }/${d.name.split(" ").join("-")}` ); } function changePage(pageIndex: number) { diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue index 554115da..584fc615 100644 --- a/src/views/dashboard/graphs/InstanceList.vue +++ b/src/views/dashboard/graphs/InstanceList.vue @@ -91,6 +91,7 @@ import { Instance } from "@/types/selector"; import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor"; import { EntityType } from "../data"; import router from "@/router"; +import getDashboard from "@/hooks/useDashboardsSession"; /*global defineProps */ const props = defineProps({ @@ -162,11 +163,17 @@ async function queryInstanceMetrics(currentInstances: Instance[]) { } function clickInstance(scope: any) { - dashboardStore.setEntity(EntityType[3].value); + const d = getDashboard({ + name: props.config.dashboardName, + layer: dashboardStore.layerId, + entity: EntityType[3].value, + }); + dashboardStore.setCurrentDashboard(d); + dashboardStore.setEntity(d.entity); router.push( - `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${ - selectorStore.currentService.id - }/${scope.row.id}/${props.config.dashboardName.split(" ").join("-")}` + `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${ + scope.row.id + }/${d.name.split(" ").join("-")}` ); } diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue index 94575bd7..81bf5f92 100644 --- a/src/views/dashboard/graphs/ServiceList.vue +++ b/src/views/dashboard/graphs/ServiceList.vue @@ -103,6 +103,7 @@ import { Service } from "@/types/selector"; import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor"; import { EntityType } from "../data"; import router from "@/router"; +import getDashboard from "@/hooks/useDashboardsSession"; /*global defineProps */ const props = defineProps({ @@ -173,10 +174,16 @@ async function queryServices() { } function clickService(scope: any) { - dashboardStore.setEntity(EntityType[0].value); - const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${ - scope.row.id - }/${props.config.dashboardName.split(" ").join("-")}`; + const d = getDashboard({ + name: props.config.dashboardName, + layer: dashboardStore.layerId, + entity: EntityType[0].value, + }); + dashboardStore.setCurrentDashboard(d); + dashboardStore.setEntity(d.entity); + const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name + .split(" ") + .join("-")}`; router.push(path); } diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 4f080c9a..3f1baf67 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -85,6 +85,7 @@ import Settings from "./Settings.vue"; import { Option } from "@/types/app"; import { Service } from "@/types/selector"; import { useAppStoreWithOut } from "@/store/modules/app"; +import getDashboard from "@/hooks/useDashboardsSession"; /*global Nullable, defineProps */ const props = defineProps({ @@ -239,10 +240,15 @@ function handleLinkClick(event: any, d: Call) { dashboardStore.entity === EntityType[1].value ? EntityType[0].value : dashboardStore.entity; - dashboardStore.setEntity(`${e}Relation`); - const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${ - d.source.id - }/${d.target.id}/${settings.value.linkDashboard.split(" ").join("-")}`; + const p = getDashboard({ + name: settings.value.linkDashboard, + layer: dashboardStore.layerId, + entity: `${e}Relation`, + }); + dashboardStore.setEntity(p.entity); + const path = `/dashboard/${p.layer}/${e}Relation/${d.source.id}/${ + d.target.id + }/${p.name.split(" ").join("-")}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); } @@ -374,17 +380,27 @@ async function handleInspect() { update(); } function handleGoEndpoint(name: string) { - dashboardStore.setEntity(EntityType[2].value); - const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${ - topologyStore.node.id - }/${name.split(" ").join("-")}`; + const p = getDashboard({ + name, + layer: dashboardStore.layerId, + entity: EntityType[2].value, + }); + dashboardStore.setEntity(p.entity); + const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name + .split(" ") + .join("-")}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); } function handleGoInstance(name: string) { - dashboardStore.setEntity(EntityType[3].value); - const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${ + const p = getDashboard({ + name, + layer: dashboardStore.layerId, + entity: EntityType[3].value, + }); + dashboardStore.setEntity(p.entity); + const path = `/dashboard/${p.layer}/ServiceInstance/${ topologyStore.node.id }/${name.split(" ").join("-")}`; const routeUrl = router.resolve({ path }); @@ -392,10 +408,15 @@ function handleGoInstance(name: string) { window.open(routeUrl.href, "_blank"); } function handleGoDashboard(name: string) { - dashboardStore.setEntity(EntityType[0].value); - const path = `/dashboard/${dashboardStore.layerId}/Service/${ - topologyStore.node.id - }/${name.split(" ").join("-")}`; + const p = getDashboard({ + name, + layer: dashboardStore.layerId, + entity: EntityType[0].value, + }); + dashboardStore.setEntity(p.entity); + const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name + .split(" ") + .join("-")}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue index 692b8209..83e9fbf4 100644 --- a/src/views/dashboard/related/topology/components/PodTopology.vue +++ b/src/views/dashboard/related/topology/components/PodTopology.vue @@ -86,6 +86,7 @@ import { ElMessage } from "element-plus"; import Sankey from "./Sankey.vue"; import Settings from "./Settings.vue"; import router from "@/router"; +import getDashboard from "@/hooks/useDashboardsSession"; /*global defineProps */ const props = defineProps({ @@ -150,8 +151,14 @@ function goDashboard() { dashboardStore.entity === EntityType[2].value ? EntityType[2].value : EntityType[3].value; + const d = getDashboard({ + name: settings.value.nodeDashboard, + layer: dashboardStore.layerId, + entity, + }); dashboardStore.setEntity(entity); - const path = `/dashboard/${dashboardStore.layerId}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${settings.value.nodeDashboard}`; + dashboardStore.setCurrentDashboard(d); + const path = `/dashboard/${d.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${d.name}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); topologyStore.setNode(null); @@ -183,8 +190,13 @@ function selectNodeLink(d: any) { dashboardStore.entity === EntityType[2].value ? EntityType[6].value : EntityType[5].value; + const p = getDashboard({ + name: settings.value.linkDashboard, + layer: dashboardStore.layerId, + entity, + }); dashboardStore.setEntity(entity); - const path = `/dashboard/${dashboardStore.layerId}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${settings.value.linkDashboard}`; + const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${p.name}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); return;