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> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from "vue"; import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import type { HierarchyServicesConfig } from "@/types/dashboard"; import type { HierarchyServicesConfig } from "@/types/dashboard";
import type { Node } from "@/types/topology"; import type { Node } from "@/types/topology";
import type { Option } from "@/types/app"; import type { Option } from "@/types/app";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useTopologyStore } from "@/store/modules/topology"; import { useTopologyStore } from "@/store/modules/topology";
import { useSelectorStore } from "@/store/modules/selectors";
import Metrics from "./Metrics.vue"; import Metrics from "./Metrics.vue";
const emits = defineEmits(["update"]); const emits = defineEmits(["update"]);
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const topologyStore = useTopologyStore(); const topologyStore = useTopologyStore();
const selectorStore = useSelectorStore();
const { hierarchyServicesConfig } = dashboardStore.selectedGrid; const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
const layers = computed<Option[]>(() => { const layers = ref<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 currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig(0) || {}); const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig(0) || {});
onMounted(() => {
setLayers();
});
function changeLayer(opt: Option[]) { function changeLayer(opt: Option[]) {
const { hierarchyServicesConfig } = dashboardStore.selectedGrid; const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
const layer = opt[0].value; const layer = opt[0].value;
@ -98,6 +94,16 @@ limitations under the License. -->
dashboardStore.setConfigs(param); dashboardStore.setConfigs(param);
emits("update", 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {

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

@ -176,8 +176,8 @@ limitations under the License. -->
} }
async function freshNodes() { async function freshNodes() {
topologyStore.setHierarchyServiceNode(null); topologyStore.setHierarchyServiceNode(null);
const resp = await getTopology(); // const resp = await getTopology();
// const resp = await topologyStore.getHierarchyServiceTopology(); const resp = await topologyStore.getHierarchyServiceTopology();
loading.value = false; loading.value = false;
if (resp && resp.errors) { if (resp && resp.errors) {
@ -198,9 +198,9 @@ limitations under the License. -->
} }
function draw() { 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; graphWidth.value = topologyLayout.value.layout.width;
const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => { const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {
topologyLayout.value.calls = changeNode(d, currentNode.value, topologyLayout.value, radius); topologyLayout.value.calls = changeNode(d, currentNode.value, topologyLayout.value, radius);
@ -219,13 +219,6 @@ limitations under the License. -->
currentNode.value = null; 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() { function showConfig() {
showSetting.value = !showSetting.value; showSetting.value = !showSetting.value;
} }