Merge branch 'main' into main

src/hooks/data.ts

@@ -37,6 +37,7 @@ export enum Calculations {
   PercentageAvg = "percentageAvg",
   ApdexAvg = "apdexAvg",
   SecondToDay = "secondToDay",
+  NanosecondToMillisecond = "nanosecondToMillisecond",
 }
 export enum sizeEnum {
   XS = "XS",

src/hooks/useProcessor.ts

@@ -397,7 +397,7 @@ export function aggregation(
       data = (val / 1024 / 1024 / 1024).toFixed(2);
       break;
     case Calculations.Apdex:
-      data = val / 10000;
+      data = (val / 10000).toFixed(2);
       break;
     case Calculations.ConvertSeconds:
       data = dayjs(val * 1000).format("YYYY-MM-DD HH:mm:ss");
@@ -414,6 +414,9 @@ export function aggregation(
     case Calculations.SecondToDay:
       data = (val / 86400).toFixed(2);
       break;
+    case Calculations.NanosecondToMillisecond:
+      data = (val / 1000 / 1000).toFixed(2);
+      break;
     default:
       data;
       break;

src/views/dashboard/configuration/widget/AssociateOptions.vue

@@ -40,15 +40,16 @@ const widgetIds = ref<string[]>(
   associate.map((d: { widgetId: string }) => d.widgetId)
 );
 const widgets: any = computed(() => {
-  const all = getDashboard(dashboardStore.currentDashboard).widgets;
-  const items = all.filter((d: any) => {
+  const widgetList = getDashboard(dashboardStore.currentDashboard).widgets;
+  const items = [];
+  for (const d of widgetList) {
     const isLinear = ["Bar", "Line", "Area"].includes(
       (d.graph && d.graph.type) || ""
     );
     if (isLinear && d.id && dashboardStore.selectedGrid.id !== d.id) {
-      return { value: d.id, label: (d.widget && d.widget.name) || d.id };
+      items.push({ value: d.id, label: (d.widget && d.widget.name) || d.id });
+    }
   }
-  });
   return items;
 });
 function updateWidgetConfig(options: Option[]) {

src/views/dashboard/controls/NetworkProfiling.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <Content />
+    <Content :config="props.data" />
   </div>
 </template>
 <script lang="ts" setup>

src/views/dashboard/controls/Tab.vue

@@ -194,6 +194,7 @@ export default defineComponent({
       editTabIndex.value = index;
     }
     function handleClick(el: any) {
+      el.stopPropagation();
       needQuery.value = true;
       if (["tab-name", "edit-tab"].includes(el.target.className)) {
         return;

src/views/dashboard/data.ts

@@ -297,4 +297,5 @@ export const CalculationOpts = [
   { label: "Precision is 2", value: "precision" },
   { label: "Milliseconds to seconds", value: "msTos" },
   { label: "Seconds to days", value: "secondToDay" },
+  { label: "Nanoseconds to milliseconds", value: "nanosecondToMillisecond" },
 ];

src/views/dashboard/panel/Tool.vue

@@ -288,36 +288,6 @@ async function setSourceSelector() {
   states.currentService = selectorStore.currentService.value;
   const e = String(params.entity).split("Relation")[0];
   await fetchPods(e, selectorStore.currentService.id, true);
-  if (!(selectorStore.pods.length && selectorStore.pods[0])) {
-    selectorStore.setCurrentPod(null);
-    states.currentPod = "";
-    states.currentProcess = "";
-    return;
-  }
-  const pod = params.podId || selectorStore.pods[0].id;
-  const currentPod = selectorStore.pods.find(
-    (d: { id: string }) => d.id === pod
-  );
-  if (!currentPod) {
-    selectorStore.setCurrentProcess(null);
-    states.currentProcess = "";
-    return;
-  }
-  selectorStore.setCurrentPod(currentPod);
-  states.currentPod = currentPod.label;
-  if (!(selectorStore.processes.length && selectorStore.processes[0])) {
-    selectorStore.setCurrentProcess(null);
-    states.currentProcess = "";
-    return;
-  }
-  const process = params.processId || selectorStore.processes[0].id;
-  const currentProcess = selectorStore.processes.find(
-    (d: { id: string }) => d.id === process
-  );
-  if (currentProcess) {
-    selectorStore.setCurrentProcess(currentProcess);
-    states.currentProcess = currentProcess.label;
-  }
 }
 
 async function setDestSelector() {
@@ -328,33 +298,6 @@ async function setDestSelector() {
     selectorStore.currentDestService.id,
     true
   );
-  if (!(selectorStore.destPods.length && selectorStore.destPods[0])) {
-    selectorStore.setCurrentDestPod(null);
-    states.currentDestPod = "";
-    return;
-  }
-  const destPod = params.destPodId || selectorStore.destPods[0].id;
-  const currentDestPod = selectorStore.destPods.find(
-    (d: { id: string }) => d.id === destPod
-  );
-  if (!currentDestPod) {
-    states.currentDestProcess = "";
-    selectorStore.setCurrentProcess(null);
-    return;
-  }
-  selectorStore.setCurrentDestPod(currentDestPod);
-  states.currentDestPod = currentDestPod.label;
-  const destProcess = params.destProcessId || selectorStore.destProcesses[0].id;
-  const currentDestProcess = selectorStore.destProcesses.find(
-    (d: { id: string }) => d.id === destProcess
-  );
-  if (!currentDestProcess) {
-    states.currentDestProcess = "";
-    selectorStore.setCurrentProcess(null);
-    return;
-  }
-  selectorStore.setCurrentProcess(currentDestProcess);
-  states.currentDestProcess = currentDestProcess.label;
 }
 
 async function getServices() {
@@ -482,10 +425,12 @@ function changeDestPods(pod: Option[]) {
 
 function changeDestProcess(pod: Option[]) {
   selectorStore.setCurrentDestProcess(pod[0] || null);
+  states.currentDestProcess = pod[0].label || "";
 }
 
 function changeProcess(pod: Option[]) {
   selectorStore.setCurrentProcess(pod[0] || null);
+  states.currentProcess = pod[0].label || "";
 }
 
 function changeMode() {
@@ -612,35 +557,13 @@ async function fetchPods(
     case EntityType[2].value:
       resp = await selectorStore.getEndpoints({ serviceId, ...param });
       if (setPod) {
-        let p;
-        if (states.currentPod) {
-          p = selectorStore.pods.find(
-            (d: { label: unknown }) => d.label === states.currentPod
-          );
-        } else {
-          p = selectorStore.pods.find(
-            (d: unknown, index: number) => index === 0
-          );
-        }
-        selectorStore.setCurrentPod(p || null);
-        states.currentPod = selectorStore.currentPod.label;
+        updateCurrentPod();
       }
       break;
     case EntityType[3].value:
       resp = await selectorStore.getServiceInstances({ serviceId });
       if (setPod) {
-        let p;
-        if (states.currentPod) {
-          p = selectorStore.pods.find(
-            (d: { label: string }) => d.label === states.currentPod
-          );
-        } else {
-          p = selectorStore.pods.find(
-            (d: { label: string }, index: number) => index === 0
-          );
-        }
-        selectorStore.setCurrentPod(p || null);
-        states.currentPod = selectorStore.currentPod.label;
+        updateCurrentPod();
       }
       break;
     case EntityType[6].value:
@@ -650,18 +573,7 @@ async function fetchPods(
         ...param,
       });
       if (setPod) {
-        let p;
-        if (states.currentDestPod) {
-          p = selectorStore.destPods.find(
-            (d: { label: string }) => d.label === states.currentDestPod
-          );
-        } else {
-          p = selectorStore.destPods.find(
-            (d: { label: string }, index: number) => index === 0
-          );
-        }
-        selectorStore.setCurrentDestPod(p || null);
-        states.currentDestPod = selectorStore.currentDestPod.label;
+        updateCurrentDestPod();
       }
       break;
     case EntityType[5].value:
@@ -670,18 +582,7 @@ async function fetchPods(
         isRelation: true,
       });
       if (setPod) {
-        let p;
-        if (states.currentDestPod) {
-          p = selectorStore.destPods.find(
-            (d: { label: string }) => d.label === states.currentDestPod
-          );
-        } else {
-          p = selectorStore.destPods.find(
-            (d: { label: string }, index: number) => index === 0
-          );
-        }
-        selectorStore.setCurrentDestPod(p || null);
-        states.currentDestPod = selectorStore.currentDestPod.label;
+        updateCurrentDestPod();
       }
       break;
     case EntityType[7].value:
@@ -705,18 +606,14 @@ async function fetchProcess(setPod: boolean) {
     instanceId: selectorStore.currentPod.id,
   });
   if (setPod) {
-    let m;
-    if (states.currentProcess) {
-      m = selectorStore.processes.find(
-        (d: { label: string }) => d.label === states.currentProcess
-      );
-    } else {
-      m = selectorStore.processes.find(
-        (d: { label: string }, index: number) => index === 0
+    const process = params.processId || selectorStore.processes[0].id;
+    const currentProcess = selectorStore.processes.find(
+      (d: { id: string }) => d.id === process
     );
+    if (currentProcess) {
+      selectorStore.setCurrentProcess(currentProcess);
+      states.currentProcess = currentProcess.label;
     }
-    selectorStore.setCurrentProcess(m || null);
-    states.currentProcess = m && m.label;
   }
   return resp;
 }
@@ -726,21 +623,58 @@ async function fetchDestProcess(setPod: boolean) {
     isRelation: true,
   });
   if (setPod) {
-    let m;
-    if (states.currentDestProcess) {
-      m = selectorStore.destProcesses.find(
-        (d: { label: string }) => d.label === states.currentDestProcess
-      );
-    } else {
-      m = selectorStore.destProcesses.find(
-        (d: { label: string }, index: number) => index === 1
+    const destProcess =
+      params.destProcessId || selectorStore.destProcesses[0].id;
+    const currentDestProcess = selectorStore.destProcesses.find(
+      (d: { id: string }) => d.id === destProcess
     );
+    if (!currentDestProcess) {
+      states.currentDestProcess = "";
+      selectorStore.setCurrentDestProcess(null);
+      return;
     }
-    selectorStore.setCurrentDestProcess(m || null);
-    states.currentDestProcess = m && m.label;
+    selectorStore.setCurrentDestProcess(currentDestProcess);
+    states.currentDestProcess = currentDestProcess.label;
   }
   return resp;
 }
+
+function updateCurrentDestPod() {
+  if (!(selectorStore.destPods.length && selectorStore.destPods[0])) {
+    selectorStore.setCurrentDestPod(null);
+    states.currentDestPod = "";
+    return;
+  }
+  const destPod = params.destPodId || selectorStore.destPods[0].id;
+  const currentDestPod = selectorStore.destPods.find(
+    (d: { id: string }) => d.id === destPod
+  );
+  if (!currentDestPod) {
+    states.currentDestPod = "";
+    selectorStore.setCurrentDestPod(null);
+    return;
+  }
+  selectorStore.setCurrentDestPod(currentDestPod);
+  states.currentDestPod = currentDestPod.label;
+}
+function updateCurrentPod() {
+  if (!(selectorStore.pods.length && selectorStore.pods[0])) {
+    selectorStore.setCurrentPod(null);
+    states.currentPod = "";
+    return;
+  }
+  const pod = params.podId || selectorStore.pods[0].id;
+  const currentPod = selectorStore.pods.find(
+    (d: { id: string }) => d.id === pod
+  );
+  if (!currentPod) {
+    selectorStore.setCurrentPod(null);
+    states.currentPod = "";
+    return;
+  }
+  selectorStore.setCurrentPod(currentPod);
+  states.currentPod = currentPod.label;
+}
 function getTools() {
   switch (params.entity) {
     case EntityType[1].value:

src/views/dashboard/related/network-profiling/Content.vue

@@ -15,24 +15,31 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <Tasks />
-    <div
-      class="vis-graph ml-5"
+    <div class="vis-graph ml-5" v-loading="networkProfilingStore.loadNodes">
+      <process-topology
         v-if="networkProfilingStore.nodes.length"
-      v-loading="networkProfilingStore.loadNodes"
-    >
-      <process-topology />
-    </div>
-    <div class="text" v-else v-loading="networkProfilingStore.loadNodes">
+        :config="config"
+      />
+      <div class="text" v-else>
         {{ t("noData") }}
       </div>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
+import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import Tasks from "./components/Tasks.vue";
 import ProcessTopology from "./components/ProcessTopology.vue";
 import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
 
+/*global defineProps */
+defineProps({
+  config: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+});
 const networkProfilingStore = useNetworkProfilingStore();
 const { t } = useI18n();
 </script>
@@ -52,7 +59,7 @@ const { t } = useI18n();
 }
 
 .text {
-  width: calc(100% - 330px);
+  width: 100%;
   text-align: center;
   margin-top: 30px;
 }

src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts

@@ -25,18 +25,21 @@ export const linkElement = (graph: any) => {
     .attr("stroke", "#97B0F8")
     .attr("d", (d: Call) => {
       const controlPos = computeControlPoint(
-        [d.source.x, d.source.y],
-        [d.target.x, d.target.y],
+        [d.source.x, d.source.y - 5],
+        [d.target.x, d.target.y - 5],
         0.5
       );
       if (d.lowerArc) {
-        controlPos[1] = -controlPos[1];
+        controlPos[1] =
+          Math.abs(controlPos[1]) < 50
+            ? -controlPos[1] + 90
+            : -controlPos[1] - 10;
       }
       return (
         "M" +
         d.source.x +
         " " +
-        d.source.y +
+        (d.source.y - 5) +
         " " +
         "Q" +
         controlPos[0] +
@@ -45,7 +48,7 @@ export const linkElement = (graph: any) => {
         " " +
         d.target.x +
         " " +
-        d.target.y
+        (d.target.y - 5)
       );
     });
   return linkEnter;
@@ -53,7 +56,7 @@ export const linkElement = (graph: any) => {
 export const anchorElement = (graph: any, funcs: any, tip: any) => {
   const linkEnter = graph
     .append("g")
-    .attr("style", "cursor: move;")
+    .attr("class", "topo-line-anchor")
     .on("mouseover", function (event: unknown, d: unknown) {
       tip.html(funcs.tipHtml).show(d, this);
     })
@@ -63,44 +66,17 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
     .on("click", (event: unknown, d: unknown) => {
       funcs.handleLinkClick(event, d);
     });
-  linkEnter
-    .append("text")
-    .attr("fill", "#444")
-    .attr("text-anchor", "middle")
-    .attr("x", (d: Call) => {
-      const p = getMidpoint(d);
-      return p[0] + 10;
-    })
-    .attr("y", (d: Call) => {
-      const p = getMidpoint(d);
-      return p[1] + 3;
-    })
-    .text((d: Call) => {
-      const types = [...d.sourceComponents, ...d.targetComponents];
-      if (types.includes("tcp")) {
-        return "TCP";
-      }
-      if (types.includes("https")) {
-        return "HTTPS";
-      }
-      if (types.includes("http")) {
-        return "HTTP";
-      }
-      if (types.includes("tls")) {
-        return "TLS";
-      }
-    });
   linkEnter
     .append("image")
     .attr("width", 15)
     .attr("height", 15)
     .attr("x", (d: Call) => {
       const p = getMidpoint(d);
-      return p[0] - 16;
+      return p[0] - 8;
     })
     .attr("y", (d: Call) => {
       const p = getMidpoint(d);
-      return p[1] - 9;
+      return p[1] - 13;
     })
     .attr("xlink:href", (d: Call) => {
       const types = [...d.sourceComponents, ...d.targetComponents];
@@ -168,7 +144,8 @@ function getMidpoint(d: Call) {
     0.5
   );
   if (d.lowerArc) {
-    controlPos[1] = -controlPos[1];
+    controlPos[1] =
+      Math.abs(controlPos[1]) < 50 ? -controlPos[1] + 100 : -controlPos[1] - 10;
   }
   const p = quadraticBezier(
     0.5,

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div ref="chart" class="process-topo"></div>
-  <el-popover placement="bottom" :width="295" trigger="click">
-    <template #reference>
-      <div
-        class="switch-icon-edit ml-5"
-        title="Settings"
-        @click="setConfig"
+  <el-popover
+    placement="bottom"
+    :width="295"
+    trigger="click"
     v-if="dashboardStore.editMode"
   >
+    <template #reference>
+      <div class="switch-icon-edit ml-5" title="Settings" @click="setConfig">
         <Icon size="middle" iconName="setting_empty" />
       </div>
     </template>
@@ -76,7 +76,7 @@ const link = ref<any>(null);
 const anchor = ref<any>(null);
 const arrow = ref<any>(null);
 const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
-const config = ref<any>({});
+const config = ref<any>(props.config || {});
 const diff = ref<number[]>([220, 200]);
 const radius = 210;
 const dates = ref<Nullable<{ start: number; end: number }>>(null);
@@ -315,9 +315,21 @@ function drawTopology(nodeArr: any[]) {
     {
       handleLinkClick: handleLinkClick,
       tipHtml: (data: Call) => {
+        const types = [...data.sourceComponents, ...data.targetComponents];
+        let l = "TCP";
+        if (types.includes("https")) {
+          l = "HTTPS";
+        }
+        if (types.includes("http")) {
+          l = "HTTP";
+        }
+        if (types.includes("tls")) {
+          l = "TLS";
+        }
         const html = `<div><span class="grey">${t(
           "detectPoint"
-        )}:</span>${data.detectPoints.join(" | ")}</div>`;
+        )}: </span>${data.detectPoints.join(" | ")}</div>
+        <div><span class="grey">Type: </span>${l}</div>`;
         return html;
       },
     },
@@ -441,6 +453,10 @@ watch(
   cursor: move;
 }
 
+.topo-line-anchor {
+  cursor: pointer;
+}
+
 .switch-icon-edit {
   cursor: pointer;
   transition: all 0.5ms linear;

src/views/dashboard/related/network-profiling/components/Settings.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="label">{{ t("linkDashboard") }}</div>
   <Selector
-    :value="linkDashboard"
+    :value="dashboardStore.selectedGrid.linkDashboard || ''"
     :options="linkDashboards"
     size="small"
     placeholder="Please input a dashboard name for calls"
@@ -37,8 +37,6 @@ const dashboardStore = useDashboardStore();
 const linkDashboards = ref<
   (DashboardItem & { label: string; value: string })[]
 >([]);
-const { selectedGrid } = dashboardStore;
-const linkDashboard = ref<string>(selectedGrid.linkDashboard || "");
 
 onMounted(() => {
   getDashboards();
@@ -64,10 +62,10 @@ function getDashboards() {
 }
 
 function changeLinkDashboard(opt: { value: string }[]) {
-  linkDashboard.value = opt[0].value;
+  const linkDashboard = opt.length ? opt[0].value : "";
   const p = {
     ...dashboardStore.selectedGrid,
-    linkDashboard: opt[0].value,
+    linkDashboard,
   };
   dashboardStore.selectWidget(p);
   dashboardStore.setConfigs(p);