mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-13 08:17:33 +00:00
feat: add layout
This commit is contained in:
Fine
parent
ffd242d347
commit
3dc7b55ad2
@ -59,7 +59,7 @@ limitations under the License. -->
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.topology {
|
||||
background-color: #333840;
|
||||
// background-color: #333840;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
|
||||
@ -20,7 +20,28 @@ limitations under the License. -->
|
||||
element-loading-background="rgba(0, 0, 0, 0)"
|
||||
:style="`height: ${height}px`"
|
||||
>
|
||||
<div class="legend">
|
||||
<svg :width="width - 100" :height="height" style="background-color: #fff">
|
||||
<g v-for="(n, index) in tangleLayout.nodes" :key="index">
|
||||
<path
|
||||
class="selectable node"
|
||||
stroke="black"
|
||||
stroke-width="8"
|
||||
:d="`M${n.x} ${n.y - n.height / 2}
|
||||
L${n.x} ${n.y + n.height / 2}`"
|
||||
/>
|
||||
<path
|
||||
class="node"
|
||||
stroke="white"
|
||||
stroke-width="4"
|
||||
:d="`M${n.x} ${n.y - n.height / 2} L${n.x} ${n.y + n.height / 2}`"
|
||||
/>
|
||||
<text class="selectable" :x="n.x + 4" :y="n.y - n.height / 2 - 4" stroke="white" stroke-width="2">
|
||||
{{ n.id }}
|
||||
</text>
|
||||
<text :x="n.x + 4" :y="n.y - n.height / 2 - 4" style="pointer-events: none">{{ n.id }}</text>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- <div class="legend">
|
||||
<div>
|
||||
<img :src="icons.CUBE" />
|
||||
<span>
|
||||
@ -60,7 +81,7 @@ limitations under the License. -->
|
||||
<span v-for="(item, index) of items" :key="index" @click="item.func(item.dashboard)">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@ -122,9 +143,9 @@ limitations under the License. -->
|
||||
const items = ref<{ id: string; title: string; func: any; dashboard?: string }[]>([]);
|
||||
const graphConfig = computed(() => props.config.graph || {});
|
||||
const depth = ref<number>(graphConfig.value.depth || 2);
|
||||
const tangleLayout = ref<any>({});
|
||||
|
||||
onMounted(async () => {
|
||||
constructTangleLayout(data);
|
||||
await nextTick();
|
||||
const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
|
||||
height: 40,
|
||||
@ -133,28 +154,36 @@ limitations under the License. -->
|
||||
height.value = dom.height - 40;
|
||||
width.value = dom.width;
|
||||
|
||||
loading.value = true;
|
||||
const json = await selectorStore.fetchServices(dashboardStore.layerId);
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return;
|
||||
}
|
||||
const resp = await getTopology();
|
||||
loading.value = false;
|
||||
// loading.value = true;
|
||||
// const json = await selectorStore.fetchServices(dashboardStore.layerId);
|
||||
// if (json.errors) {
|
||||
// ElMessage.error(json.errors);
|
||||
// return;
|
||||
// }
|
||||
// const resp = await getTopology();
|
||||
// loading.value = false;
|
||||
|
||||
if (resp && resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
}
|
||||
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
|
||||
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
|
||||
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
|
||||
window.addEventListener("resize", resize);
|
||||
svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
|
||||
await initLegendMetrics();
|
||||
await init();
|
||||
update();
|
||||
setNodeTools(settings.value.nodeDashboard);
|
||||
// if (resp && resp.errors) {
|
||||
// ElMessage.error(resp.errors);
|
||||
// }
|
||||
// topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
|
||||
// topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
|
||||
// topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
|
||||
// window.addEventListener("resize", resize);
|
||||
// svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
|
||||
// await initLegendMetrics();
|
||||
// await init();
|
||||
// update();
|
||||
// setNodeTools(settings.value.nodeDashboard);
|
||||
draw();
|
||||
});
|
||||
|
||||
function draw() {
|
||||
const color = d3.scaleOrdinal(d3.schemeDark2);
|
||||
const options = {};
|
||||
tangleLayout.value = constructTangleLayout(data, options);
|
||||
}
|
||||
|
||||
async function init() {
|
||||
tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
|
||||
graph.value = svg.value.append("g").attr("class", "topo-svg-graph").attr("transform", `translate(-100, -100)`);
|
||||
@ -515,6 +544,14 @@ limitations under the License. -->
|
||||
);
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.node {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.link {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.topo-svg {
|
||||
width: 100%;
|
||||
height: calc(100% - 5px);
|
||||
|
||||
@ -0,0 +1,78 @@
|
||||
export const data = [
|
||||
[{ id: "Chaos" }],
|
||||
[{ id: "Gaea", parents: ["Chaos"] }, { id: "Uranus" }],
|
||||
[
|
||||
{ id: "Oceanus", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Thethys", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Pontus" },
|
||||
{ id: "Rhea", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Cronus", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Coeus", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Phoebe", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Crius", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Hyperion", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Iapetus", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Thea", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Themis", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Mnemosyne", parents: ["Gaea", "Uranus"] },
|
||||
],
|
||||
[
|
||||
{ id: "Doris", parents: ["Oceanus", "Thethys"] },
|
||||
{ id: "Neures", parents: ["Pontus", "Gaea"] },
|
||||
{ id: "Dionne" },
|
||||
{ id: "Demeter", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Hades", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Hera", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Alcmene" },
|
||||
{ id: "Zeus", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Eris" },
|
||||
{ id: "Leto", parents: ["Coeus", "Phoebe"] },
|
||||
{ id: "Amphitrite" },
|
||||
{ id: "Medusa" },
|
||||
{ id: "Poseidon", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Hestia", parents: ["Rhea", "Cronus"] },
|
||||
],
|
||||
[
|
||||
{ id: "Thetis", parents: ["Doris", "Neures"] },
|
||||
{ id: "Peleus" },
|
||||
{ id: "Anchises" },
|
||||
{ id: "Adonis" },
|
||||
{ id: "Aphrodite", parents: ["Zeus", "Dionne"] },
|
||||
{ id: "Persephone", parents: ["Zeus", "Demeter"] },
|
||||
{ id: "Ares", parents: ["Zeus", "Hera"] },
|
||||
{ id: "Hephaestus", parents: ["Zeus", "Hera"] },
|
||||
{ id: "Hebe", parents: ["Zeus", "Hera"] },
|
||||
{ id: "Hercules", parents: ["Zeus", "Alcmene"] },
|
||||
{ id: "Megara" },
|
||||
{ id: "Deianira" },
|
||||
{ id: "Eileithya", parents: ["Zeus", "Hera"] },
|
||||
{ id: "Ate", parents: ["Zeus", "Eris"] },
|
||||
{ id: "Leda" },
|
||||
{ id: "Athena", parents: ["Zeus"] },
|
||||
{ id: "Apollo", parents: ["Zeus", "Leto"] },
|
||||
{ id: "Artemis", parents: ["Zeus", "Leto"] },
|
||||
{ id: "Triton", parents: ["Poseidon", "Amphitrite"] },
|
||||
{ id: "Pegasus", parents: ["Poseidon", "Medusa"] },
|
||||
{ id: "Orion", parents: ["Poseidon"] },
|
||||
{ id: "Polyphemus", parents: ["Poseidon"] },
|
||||
],
|
||||
[
|
||||
{ id: "Deidamia" },
|
||||
{ id: "Achilles", parents: ["Peleus", "Thetis"] },
|
||||
{ id: "Creusa" },
|
||||
{ id: "Aeneas", parents: ["Anchises", "Aphrodite"] },
|
||||
{ id: "Lavinia" },
|
||||
{ id: "Eros", parents: ["Hephaestus", "Aphrodite"] },
|
||||
{ id: "Helen", parents: ["Leda", "Zeus"] },
|
||||
{ id: "Menelaus" },
|
||||
{ id: "Polydueces", parents: ["Leda", "Zeus"] },
|
||||
],
|
||||
[
|
||||
{ id: "Andromache" },
|
||||
{ id: "Neoptolemus", parents: ["Deidamia", "Achilles"] },
|
||||
{ id: "Aeneas(2)", parents: ["Creusa", "Aeneas"] },
|
||||
{ id: "Pompilius", parents: ["Creusa", "Aeneas"] },
|
||||
{ id: "Iulus", parents: ["Lavinia", "Aeneas"] },
|
||||
{ id: "Hermione", parents: ["Helen", "Menelaus"] },
|
||||
],
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user