feat: Implement Text control and update Topology (#37)

src/views/dashboard/related/topology/components/Graph.vue

@@ -30,7 +30,6 @@ limitations under the License. -->
           class="inputs"
           :value="depth"
           :options="DepthList"
-          placeholder="Select a option"
           @change="changeDepth"
         />
       </span>
@@ -377,10 +376,12 @@ async function handleInspect() {
   topologyStore.setNode(null);
   topologyStore.setLink(null);
   loading.value = true;
-  const resp = await topologyStore.getServicesTopology([id]);
+  const resp = await topologyStore.getDepthServiceTopology(
+    [id],
+    Number(depth.value)
+  );
   loading.value = false;
-
-  if (resp.errors) {
+  if (resp && resp.errors) {
     ElMessage.error(resp.errors);
   }
   await init();
@@ -555,17 +556,18 @@ watch(
 
   .operations-list {
     position: absolute;
-    padding: 10px;
     color: #333;
     cursor: pointer;
     background-color: #fff;
     border-radius: 3px;
+    padding: 10px 0;
 
     span {
       display: block;
       height: 30px;
       line-height: 30px;
-      text-align: center;
+      text-align: left;
+      padding: 0 15px;
     }
 
     span:hover {

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -324,7 +324,7 @@ watch(
 
 .operations-list {
   position: absolute;
-  padding: 10px;
+  padding: 10px 0;
   color: #333;
   cursor: pointer;
   background-color: #fff;
@@ -335,7 +335,8 @@ watch(
     height: 30px;
     width: 140px;
     line-height: 30px;
-    text-align: center;
+    text-align: left;
+    padding: 0 15px;
   }
 
   span:hover {

src/views/dashboard/related/topology/components/Settings.vue

@@ -23,6 +23,7 @@ limitations under the License. -->
       placeholder="Please input a dashboard name for calls"
       @change="changeLinkDashboard"
       class="inputs"
+      :clearable="true"
     />
     <div class="label">{{ t("linkServerMetrics") }}</div>
     <Selector
@@ -86,7 +87,6 @@ limitations under the License. -->
       <span>
         <Icon
           class="cp mr-5"
-          v-show="items.length > 1"
           iconName="remove_circle_outline"
           size="middle"
           @click="deleteItem(index)"
@@ -144,7 +144,6 @@ limitations under the License. -->
           iconName="remove_circle_outline"
           size="middle"
           @click="deleteMetric(index)"
-          v-show="legend.metric.length > 1"
         />
         <Icon
           class="cp"
@@ -196,6 +195,10 @@ const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const topologyStore = useTopologyStore();
 const { selectedGrid } = dashboardStore;
+const nodeDashboard =
+  selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length
+    ? selectedGrid.nodeDashboard
+    : "";
 const isService = [EntityType[0].value, EntityType[1].value].includes(
   dashboardStore.entity
 );
@@ -204,7 +207,7 @@ const items = reactive<
     scope: string;
     dashboard: string;
   }[]
->((isService && selectedGrid.nodeDashboard) || [{ scope: "", dashboard: "" }]);
+>(isService && nodeDashboard ? nodeDashboard : [{ scope: "", dashboard: "" }]);
 const states = reactive<{
   linkDashboard: string;
   nodeDashboard: {
@@ -229,9 +232,12 @@ const states = reactive<{
   linkDashboards: [],
   nodeDashboards: [],
 });
+const l = selectedGrid.legend && selectedGrid.legend.length;
 const legend = reactive<{
   metric: { name: string; condition: string; value: string }[];
-}>({ metric: selectedGrid.legend || [{ name: "", condition: "", value: "" }] });
+}>({
+  metric: l ? selectedGrid.legend : [{ name: "", condition: "", value: "" }],
+});
 
 getMetricList();
 async function getMetricList() {
@@ -335,6 +341,9 @@ function addItem() {
   items.push({ scope: "", dashboard: "" });
 }
 function deleteItem(index: number) {
+  if (items.length === 1) {
+    items.push({ scope: "", dashboard: "" });
+  }
   items.splice(index, 1);
   updateSettings();
 }
@@ -384,6 +393,10 @@ async function changeNodeMetrics(options: Option[] | any) {
   topologyStore.queryNodeMetrics(states.nodeMetrics);
 }
 function deleteMetric(index: number) {
+  if (legend.metric.length === 1) {
+    legend.metric = [{ name: "", condition: "", value: "" }];
+    return;
+  }
   legend.metric.splice(index, 1);
 }
 function addMetric() {

src/views/dashboard/related/trace/utils/d3-trace-list.ts

@@ -40,14 +40,15 @@ export default class ListGraph {
   constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
     this.handleSelectSpan = handleSelectSpan;
     this.el = el;
-    this.width = el.clientWidth - 20;
+    this.width = el.clientWidth - 10;
     this.height = el.clientHeight;
     this.svg = d3
       .select(this.el)
       .append("svg")
       .attr("class", "trace-list-dowanload")
       .attr("width", this.width)
-      .attr("height", this.height);
+      .attr("height", this.height)
+      .attr("transform", `translate(-5, 0)`);
     this.tip = (d3tip as any)()
       .attr("class", "d3-tip")
       .offset([-8, 0])
@@ -220,7 +221,7 @@ export default class ListGraph {
     nodeEnter
       .transition()
       .duration(400)
-      .attr("transform", (d: any) => `translate(${d.y},${d.x})`)
+      .attr("transform", (d: any) => `translate(${d.y + 5},${d.x})`)
       .style("opacity", 1);
     nodeEnter
       .append("circle")
@@ -243,7 +244,7 @@ export default class ListGraph {
     node
       .transition()
       .duration(400)
-      .attr("transform", (d: any) => `translate(${d.y},${d.x})`)
+      .attr("transform", (d: any) => `translate(${d.y + 5},${d.x})`)
       .style("opacity", 1)
       .select("circle")
       .attr("fill", (d: any) =>
@@ -273,8 +274,9 @@ export default class ListGraph {
       .attr("fill", "rgba(0,0,0,0)")
       .attr("stroke", "rgba(0, 0, 0, 0.1)")
       .attr("stroke-width", 2)
+      .attr("transform", `translate(5, 0)`)
       .attr("d", () => {
-        const o = { x: source.x0 + 35, y: source.y0 };
+        const o = { x: source.x0 + 40, y: source.y0 };
         return this.diagonal({ source: o, target: o });
       })
       .transition()