github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 20:55:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: reset current dashboard due to pages forwarding (#34)

Browse Source
This commit is contained in:
Fine0830 2022-03-23 13:28:47 +08:00 committed by GitHub
parent 049f46a4cf
commit 93161b6ec9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 86 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/router/infrastructure.ts
View File

@ -27,17 +27,24 @@ export const routesInfra: Array<RouteRecordRaw> = [
exact: true,
hasGroup: true,
},
redirect: "/infrastructure",
redirect: "/linux",
component: Layout,
children: [
{
path: "/infrastructure",
path: "/linux",
name: "Linux",
meta: {
title: "linux",
},
component: () => import("@/views/Layer.vue"),
// component: () => import("@/views/infrastructure/Infrastructure.vue"),
},
{
path: "/kubernetes",
name: "Kubernetes",
meta: {
title: "kubernetes",
},
component: () => import("@/views/Layer.vue"),
},
// {
// path: "/infrastructure/vm",

106
src/views/Layer.vue
View File

@ -14,101 +14,61 @@ 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>{{ t("noRoot") }} {{ layer }}</div>
<div v-else class="no-root">
{{ t("noRoot") }} {{ dashboardStore.layerId }}
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { EntityType } from "./dashboard/data";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useAppStoreWithOut } from "@/store/modules/app";
import Edit from "./dashboard/Edit.vue";
import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app";
const { t } = useI18n();
const route = useRoute();
const dashboardStore = useDashboardStore();
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const routeNames = [
"GeneralServices",
"Database",
"MeshServices",
"ControlPanel",
"DataPanel",
"Linux",
"SkyWalkingServer",
"Satellite",
"Functions",
"Browser",
];
const dashboardStore = useDashboardStore();
const routesMap: { [key: string]: string } = {
GeneralServices: "GENERAL",
Database: "VIRTUAL_DATABASE",
MESH: "MESH",
ControlPanel: "MESH_CP",
DataPanel: "MESH_DP",
Linux: "OS_LINUX",
SkyWalkingServer: "SO11Y_OAP",
Satellite: "SO11Y_SATELLITE",
Functions: "FAAS",
Browser: "BROWSER",
Kubernetes: "K8S",
};
const layer = ref<string>("GENERAL");
getDashboard();
async function getDashboard() {
setLayer(String(route.name));
layer.value = routesMap[String(route.name)];
dashboardStore.setLayer(layer.value);
dashboardStore.setEntity(EntityType[0].value);
dashboardStore.setEntity(EntityType[1].value);
dashboardStore.setMode(false);
dashboardStore.setCurrentDashboard(null);
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
d.layer === dashboardStore.layerId &&
d.entity === EntityType[1].value &&
d.isRoot
);
if (index < 0) {
appStore.setPageTitle(dashboardStore.layer);
dashboardStore.setCurrentDashboard(null);
return;
}
const d = dashboardStore.dashboards[index];
dashboardStore.setCurrentDashboard(d);
appStore.setPageTitle(d.name);
const item = dashboardStore.dashboards[index];
dashboardStore.setCurrentDashboard(item);
}
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;
case routeNames[5]:
layer.value = "OS_LINUX";
break;
case routeNames[6]:
layer.value = "SO11Y_OAP";
break;
case routeNames[7]:
layer.value = "SO11Y_SATELLITE";
break;
case routeNames[8]:
layer.value = "FAAS";
break;
case routeNames[9]:
layer.value = "BROWSER";
break;
default:
layer.value = "GENERAL";
break;
}
}
watch(
() => route.name,
(name: unknown) => {
if (!name) {
return;
}
getDashboard();
}
);
</script>
<style lang="scss" scoped>
.no-root {
@ -117,8 +77,4 @@ watch(
text-align: center;
color: #888;
}
.layer {
height: 100%;
}
</style>

12
src/views/dashboard/Edit.vue
View File

@ -13,9 +13,10 @@ 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="dashboardStore.currentDashboard" />
<div
class="ds-main"
v-if="dashboardStore.currentDashboard"
@click="handleClick"
:style="{ height: dashboardStore.editMode ? 'calc(100% - 45px)' : '100%' }"
>
@ -54,6 +55,9 @@ async function setTemplate() {
await dashboardStore.setDashboards();
if (!p.entity) {
if (!dashboardStore.currentDashboard) {
return;
}
const { layer, entity, name } = dashboardStore.currentDashboard;
layoutKey.value = `${layer}_${entity}_${name}`;
}
@ -63,17 +67,17 @@ async function setTemplate() {
const layout: any = c.configuration || {};
dashboardStore.setLayout(layout.children || []);
appStore.setPageTitle(layout.name);
if (!dashboardStore.currentDashboard) {
if (p.entity) {
dashboardStore.setCurrentDashboard({
layer: p.layerId,
entity: p.entity,
name: String(p.name).split("-").join(" "),
name: p.name,
id: c.id,
isRoot: layout.isRoot,
});
}
}
function handleClick(e: any) {
e.stopPropagation();
if (e.target.className === "ds-main") {

2
src/views/dashboard/graphs/EndpointList.vue
View File

@ -167,8 +167,6 @@ function clickEndpoint(scope: any) {
ElMessage.error("No this dashboard");
return;
}
dashboardStore.setEntity(EntityType[2].value);
dashboardStore.setCurrentDashboard(d);
router.push(
`/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
);

22
src/views/dashboard/graphs/InstanceList.vue
View File

@ -168,24 +168,16 @@ function clickInstance(scope: any) {
layer: dashboardStore.layerId,
entity: EntityType[3].value,
});
if (!d) {
ElMessage.error("No this dashboard");
return;
}
dashboardStore.setCurrentDashboard(d);
dashboardStore.setEntity(d.entity);
router.push(
`/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
`/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
scope.row.id
}/${d.name.split(" ").join("-")}`
);
}
function changePage(pageIndex: number) {
instances.value = searchInstances.value.splice(
(pageIndex - 1 || 0) * pageSize,
pageSize * (pageIndex || 1)
);
instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
}
function searchList() {
searchInstances.value = selectorStore.pods.filter((d: { label: string }) =>
d.label.includes(searchText.value)
@ -201,12 +193,6 @@ watch(
}
}
);
watch(
() => [selectorStore.currentService],
() => {
queryInstance();
}
);
</script>
<style lang="scss" scoped>
@import "./style.scss";

2
src/views/dashboard/graphs/ServiceList.vue
View File

@ -183,8 +183,6 @@ function clickService(scope: any) {
ElMessage.error("No this dashboard");
return;
}
dashboardStore.setCurrentDashboard(d);
dashboardStore.setEntity(d.entity);
const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name}`;
router.push(path);

8
src/views/dashboard/panel/Layout.vue
View File

@ -53,9 +53,9 @@ export default defineComponent({
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
dashboardStore.setLayout(newLayout);
}
// function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
// dashboardStore.setLayout(newLayout);
// }
function clickGrid(item: LayoutConfig) {
dashboardStore.activeGridItem(item.i);
dashboardStore.selectWidget(item);
@ -64,10 +64,10 @@ export default defineComponent({
dashboardStore.setLayout([]);
selectorStore.setCurrentService(null);
selectorStore.setCurrentPod(null);
dashboardStore.setEntity("");
});
return {
dashboardStore,
layoutUpdatedEvent,
clickGrid,
t,
};

32
src/views/dashboard/panel/Tool.vue
View File

@ -125,7 +125,6 @@ const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
const appStore = useAppStoreWithOut();
const params = useRoute().params;
const type = EntityType.filter((d: Option) => d.value === params.entity)[0];
const toolIcons = ref<{ name: string; content: string; id: string }[]>(
EndpointRelationTools
);
@ -140,19 +139,16 @@ const states = reactive<{
}>({
destService: "",
destPod: "",
key: (type && type.key) || 0,
key: 0,
currentService: "",
currentPod: "",
currentDestService: "",
currentDestPod: "",
});
const applyDashboard = useThrottleFn(dashboardStore.saveDashboard, 3000);
if (params.layerId) {
dashboardStore.setLayer(params.layerId);
dashboardStore.setEntity(params.entity);
}
appStore.setEventStack([initSelector]);
setCurrentDashboard();
appStore.setEventStack([initSelector]);
initSelector();
function initSelector() {
@ -164,6 +160,17 @@ function initSelector() {
}
}
function setCurrentDashboard() {
if (params.layerId) {
dashboardStore.setLayer(params.layerId);
dashboardStore.setEntity(params.entity);
}
const type = EntityType.filter(
(d: Option) => d.value === dashboardStore.entity
)[0];
states.key = (type && type.key) || 0;
}
async function setSelector() {
if (
[
@ -199,7 +206,8 @@ async function setSelector() {
}
selectorStore.setCurrentService(currentService);
selectorStore.setCurrentDestService(currentDestService);
states.currentService = selectorStore.currentService.value;
states.currentService =
selectorStore.currentService && selectorStore.currentService.value;
states.currentDestService =
selectorStore.currentDestService && selectorStore.currentDestService.value;
}
@ -265,14 +273,20 @@ async function getServices() {
selectorStore.setCurrentDestService(
selectorStore.services.length ? selectorStore.services[1] : null
);
if (!selectorStore.currentService) {
return;
}
states.currentService = selectorStore.currentService.value;
states.currentDestService = selectorStore.currentDestService.value;
const e = dashboardStore.entity.split("Relation")[0];
if (
[EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
) {
fetchPods(e, selectorStore.currentService.id, true);
}
if (!selectorStore.currentDestService) {
return;
}
states.currentDestService = selectorStore.currentDestService.value;
if (
[EntityType[5].value, EntityType[6].value].includes(dashboardStore.entity)
) {

30
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -387,42 +387,21 @@ async function handleInspect() {
update();
}
function handleGoEndpoint(name: string) {
const origin = dashboardStore.entity;
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}`;
const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
dashboardStore.setEntity(origin);
}
function handleGoInstance(name: string) {
const origin = dashboardStore.entity;
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}`;
const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node.id}/${name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
dashboardStore.setEntity(origin);
}
function handleGoDashboard(name: string) {
const origin = dashboardStore.entity;
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}`;
const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
@ -482,6 +461,9 @@ function setNodeTools(nodeDashboard: any) {
{ id: "inspect", title: "Inspect", func: handleInspect },
{ id: "alarm", title: "Alarm", func: handleGoAlarm },
];
if (!(nodeDashboard && nodeDashboard.length)) {
return;
}
for (const item of nodeDashboard) {
if (item.scope === EntityType[0].value) {
items.value.push({