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

feat: update layer

Browse Source
This commit is contained in:
Fine 2024-01-10 11:37:03 +08:00
parent fd9e320f2e
commit 24cca12430
2 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/dashboard/related/topology/config/HierarchySettings.vue
View File

@ -42,33 +42,29 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from "vue";
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import type { HierarchyServicesConfig } from "@/types/dashboard";
import type { Node } from "@/types/topology";
import type { Option } from "@/types/app";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useTopologyStore } from "@/store/modules/topology";
import { useSelectorStore } from "@/store/modules/selectors";
import Metrics from "./Metrics.vue";
const emits = defineEmits(["update"]);
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const topologyStore = useTopologyStore();
const selectorStore = useSelectorStore();
const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
const layers = computed<Option[]>(() => {
const map = new Map();
const arr = topologyStore.nodes.reduce((prev: Option[], next: Node) => {
if (next.layer && !map.get(next.layer)) {
map.set(next.layer, true);
prev.push({ value: next.layer, label: next.layer });
}
return prev;
}, []);
return arr;
});
const layers = ref<Option[]>([]);
const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig(0) || {});
onMounted(() => {
setLayers();
});
function changeLayer(opt: Option[]) {
const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
const layer = opt[0].value;
@ -98,6 +94,16 @@ limitations under the License. -->
dashboardStore.setConfigs(param);
emits("update", param);
}
async function setLayers() {
const resp = await selectorStore.fetchLayers();
if (resp.errors) {
ElMessage.error(resp.errors);
}
layers.value = resp.data.layers.map((d: string) => {
return { label: d, value: d };
});
}
</script>
<style lang="scss" scoped>
.title {

15
src/views/dashboard/related/topology/service/HierarchyMap.vue
View File

@ -176,8 +176,8 @@ limitations under the License. -->
}
async function freshNodes() {
topologyStore.setHierarchyServiceNode(null);
const resp = await getTopology();
// const resp = await topologyStore.getHierarchyServiceTopology();
// const resp = await getTopology();
const resp = await topologyStore.getHierarchyServiceTopology();
loading.value = false;
if (resp && resp.errors) {
@ -198,9 +198,9 @@ limitations under the License. -->
}
function draw() {
const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []);
const levels = computeLevels(topologyStore.hierarchyServiceCalls, topologyStore.hierarchyServiceNodes, []);
topologyLayout.value = layout(levels, topologyStore.calls, radius);
topologyLayout.value = layout(levels, topologyStore.hierarchyServiceCalls, radius);
graphWidth.value = topologyLayout.value.layout.width;
const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {
topologyLayout.value.calls = changeNode(d, currentNode.value, topologyLayout.value, radius);
@ -219,13 +219,6 @@ limitations under the License. -->
currentNode.value = null;
}
async function getTopology() {
const ids = selectorStore.services.map((d: Service) => d.id);
const serviceIds = dashboardStore.entity === EntityType[0].value ? [selectorStore.currentService.id] : ids;
const resp = await topologyStore.getDepthServiceTopology(serviceIds, 2);
return resp;
}
function showConfig() {
showSetting.value = !showSetting.value;
}