github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-01 10:59:45 +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`" :style="`height: ${height}px`"
> >
<svg class="svg-topology" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent"> <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 <g
class="topo-node" class="topo-node"
v-for="(n, index) in topologyLayout.nodes" v-for="(n, index) in topologyLayout.nodes"
@ -32,7 +32,7 @@ limitations under the License. -->
@mousedown="startMoveNode($event, n)" @mousedown="startMoveNode($event, n)"
@mouseup="stopMoveNode($event)" @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 <image
width="18" width="18"
height="18" height="18"
@ -192,7 +192,7 @@ limitations under the License. -->
height.value = dom.height - 40; height.value = dom.height - 40;
width.value = dom.width; width.value = dom.width;
svg.value = d3.select(".svg-topology"); svg.value = d3.select(".svg-topology");
graph.value = d3.select(".graph"); graph.value = d3.select(".svg-graph");
loading.value = true; loading.value = true;
const json = await selectorStore.fetchServices(dashboardStore.layerId); const json = await selectorStore.fetchServices(dashboardStore.layerId);
if (json.errors) { if (json.errors) {
@ -266,7 +266,7 @@ limitations under the License. -->
moveNode(d); moveNode(d);
}); });
setTimeout(() => { setTimeout(() => {
d3.selectAll(".node").call(drag); d3.selectAll(".topo-node").call(drag);
}, 1000); }, 1000);
} }
@ -375,13 +375,18 @@ limitations under the License. -->
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {}; topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {}; const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
const v = aggregation(metric.value, opt); 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 tooltip.value
.style("top", event.offsetY + "px") .style("top", event.offsetY + 10 + "px")
.style("left", event.offsetX + "px") .style("left", event.offsetX + 10 + "px")
.style("visibility", "visible") .style("visibility", "visible")
.html(tipHtml); .html(tipHtml);
} }
@ -605,24 +610,16 @@ limitations under the License. -->
); );
</script> </script>
<style lang="scss"> <style lang="scss">
.node {
stroke-linecap: round;
}
.link {
fill: none;
}
.svg-topology {
cursor: move;
}
.micro-topo-chart { .micro-topo-chart {
position: relative; position: relative;
height: calc(100% - 30px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
margin-top: 30px; margin-top: 30px;
.svg-topology {
cursor: move;
}
.legend { .legend {
position: absolute; position: absolute;
top: 10px; top: 10px;