[skywalking-booster-ui] branch main updated: fix view mode (#118)

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new b5c07e0  fix view mode (#118)
b5c07e0 is described below

commit b5c07e023bbd29b74d3b23eea05a19ec1c202fae
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Wed Jul 13 10:34:30 2022 +0800

    fix view mode (#118)
---
 .../dashboard/related/topology/components/Graph.vue      | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 6ad5c1e..a750173 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -34,7 +34,7 @@ limitations under the License. -->
         </span>
       </div>
     </div>
-    <div class="setting" v-if="showSetting">
+    <div class="setting" v-if="showSetting && dashboardStore.editMode">
       <Settings @update="updateSettings" @updateNodes="freshNodes" />
     </div>
     <div class="tool">
@@ -113,6 +113,7 @@ import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
 import { aggregation } from "@/hooks/useProcessor";
 import icons from "@/assets/img/icons";
+import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -170,6 +171,7 @@ onMounted(async () => {
   width.value = dom.width;
   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);
@@ -200,6 +202,18 @@ async function init() {
     dashboardStore.selectWidget(props.config);
   });
 }
+
+async function initLegendMetrics() {
+  const ids = topologyStore.nodes.map((d: Node) => d.id);
+  const names = props.config.legend.map((d: any) => d.name);
+  if (names.length && ids.length) {
+    const param = await useQueryTopologyMetrics(names, ids);
+    const res = await topologyStore.getLegendMetrics(param);
+    if (res.errors) {
+      ElMessage.error(res.errors);
+    }
+  }
+}
 function ticked() {
   link.value.attr(
     "d",