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

fix: drag

Browse Source
This commit is contained in:
Fine 2023-03-21 18:17:50 +08:00
parent c4b02b6e0b
commit 11cfa6c9d1
1 changed files with 17 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,7 @@ limitations under the License. -->
:style="`height: ${height}px`"
>
<svg class="svg-topology" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent">
<g class="graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
<g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
<g
class="topo-node"
v-for="(n, index) in topologyLayout.nodes"
@ -32,7 +32,7 @@ limitations under the License. -->
@mousedown="startMoveNode($event, n)"
@mouseup="stopMoveNode($event)"
>
<circle class="node" fill="#fff" r="18" stroke-width="6" :stroke="getNodeStatus(n)" :cx="n.x" :cy="n.y" />
<circle fill="#fff" r="18" stroke-width="6" :stroke="getNodeStatus(n)" :cx="n.x" :cy="n.y" />
<image
width="18"
height="18"
@ -192,7 +192,7 @@ limitations under the License. -->
height.value = dom.height - 40;
width.value = dom.width;
svg.value = d3.select(".svg-topology");
graph.value = d3.select(".graph");
graph.value = d3.select(".svg-graph");
loading.value = true;
const json = await selectorStore.fetchServices(dashboardStore.layerId);
if (json.errors) {
@ -266,7 +266,7 @@ limitations under the License. -->
moveNode(d);
});
setTimeout(() => {
d3.selectAll(".node").call(drag);
d3.selectAll(".topo-node").call(drag);
}, 1000);
}
@ -375,13 +375,18 @@ limitations under the License. -->
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
const v = aggregation(metric.value, opt);
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || "unknown"}</div>`;
});
const tipHtml = [` <div class="mb-5"><span class="grey">name: </span>${data.name}</div>`, ...html].join(" ");
const tipHtml = [
`<div class="mb-5"><span class="grey">name: </span>${
data.name
}</div><div class="mb-5"><span class="grey">type: </span>${data.type || ""}</div>`,
...html,
].join(" ");
tooltip.value
.style("top", event.offsetY + "px")
.style("left", event.offsetX + "px")
.style("top", event.offsetY + 10 + "px")
.style("left", event.offsetX + 10 + "px")
.style("visibility", "visible")
.html(tipHtml);
}
@ -605,24 +610,16 @@ limitations under the License. -->
);
</script>
<style lang="scss">
.node {
stroke-linecap: round;
}
.link {
fill: none;
}
.svg-topology {
cursor: move;
}
.micro-topo-chart {
position: relative;
height: calc(100% - 30px);
overflow: auto;
margin-top: 30px;
.svg-topology {
cursor: move;
}
.legend {
position: absolute;
top: 10px;