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

set current dashboard params

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-23 12:05:09 +08:00
parent 049f46a4cf
commit 64eafab10d
9 changed files with 76 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/store/modules/dashboard.ts
View File

@ -73,6 +73,7 @@ export const dashboardStore = defineStore({
sessionStorage.setItem("dashboards", JSON.stringify(list));
},
setCurrentDashboard(item: DashboardItem) {
console.log(item);
this.currentDashboard = item;
},
addControl(type: string) {

47
src/views/Layer.vue
View File

@ -13,23 +13,23 @@ 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>{{ t("noRoot") }} {{ layer }}</div>
<Edit v-if="hasRoot" @update="changeStatus" />
<div class="no-root" v-else>
{{ 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";
const { t } = useI18n();
const route = useRoute();
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const appStore = useAppStoreWithOut();
const routeNames = [
"GeneralServices",
"Database",
@ -43,25 +43,19 @@ const routeNames = [
"Browser",
];
const layer = ref<string>("GENERAL");
const hasRoot = ref<boolean>(false);
getDashboard();
async function getDashboard() {
setLayer(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
);
if (index < 0) {
return;
}
const d = dashboardStore.dashboards[index];
dashboardStore.setCurrentDashboard(d);
appStore.setPageTitle(d.name);
}
function changeStatus(p: boolean) {
hasRoot.value = p;
}
function setLayer(n: string) {
switch (n) {
@ -100,15 +94,6 @@ function setLayer(n: string) {
break;
}
}
watch(
() => route.name,
(name: unknown) => {
if (!name) {
return;
}
getDashboard();
}
);
</script>
<style lang="scss" scoped>
.no-root {
@ -117,8 +102,4 @@ watch(
text-align: center;
color: #888;
}
.layer {
height: 100%;
}
</style>

28
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%' }"
>
@ -42,18 +43,35 @@ import TopologyConfig from "./configuration/Topology.vue";
import WidgetConfig from "./configuration/Widget.vue";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useAppStoreWithOut } from "@/store/modules/app";
import { EntityType } from "./data";
/*global defineEmits */
const emit = defineEmits(["update"]);
const dashboardStore = useDashboardStore();
const appStore = useAppStoreWithOut();
const { t } = useI18n();
const p = useRoute().params;
const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
dashboardStore.setCurrentDashboard({});
setTemplate();
async function setTemplate() {
await dashboardStore.setDashboards();
if (!p.entity) {
const index = dashboardStore.dashboards.findIndex(
(d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
d.layer === dashboardStore.layerId &&
d.entity === EntityType[1].value &&
d.isRoot
);
if (index < 0) {
appStore.setPageTitle(dashboardStore.layer);
dashboardStore.setCurrentDashboard(null);
emit("update", false);
return;
}
const item = dashboardStore.dashboards[index];
dashboardStore.setCurrentDashboard(item);
const { layer, entity, name } = dashboardStore.currentDashboard;
layoutKey.value = `${layer}_${entity}_${name}`;
}
@ -64,16 +82,18 @@ async function setTemplate() {
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,
});
}
emit("update", true);
}
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,
};

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

@ -119,13 +119,13 @@ import { ElMessage } from "element-plus";
import { Option } from "@/types/app";
import { useI18n } from "vue-i18n";
import { useThrottleFn } from "@vueuse/core";
import getDashboard from "@/hooks/useDashboardsSession";
const { t } = useI18n();
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 +140,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 +161,23 @@ function initSelector() {
}
}
function setCurrentDashboard() {
if (params.layerId) {
dashboardStore.setLayer(params.layerId);
dashboardStore.setEntity(params.entity);
const item = getDashboard({
name: String(params.name),
layer: dashboardStore.layerId,
entity: EntityType[3].value,
});
dashboardStore.setCurrentDashboard(item || null);
}
const type = EntityType.filter(
(d: Option) => d.value === dashboardStore.entity
)[0];
states.key = (type && type.key) || 0;
}
async function setSelector() {
if (
[
@ -266,7 +280,8 @@ async function getServices() {
selectorStore.services.length ? selectorStore.services[1] : null
);
states.currentService = selectorStore.currentService.value;
states.currentDestService = selectorStore.currentDestService.value;
states.currentDestService =
selectorStore.currentDestService && selectorStore.currentDestService.value;
const e = dashboardStore.entity.split("Relation")[0];
if (
[EntityType[2].value, EntityType[3].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({