Merge remote-tracking branch 'origin' into feature/img

src/components/Graph.vue

@@ -235,12 +235,10 @@ limitations under the License. -->
   .no-data {
     font-size: $font-size-smaller;
     height: 100%;
-    box-sizing: border-box;
+    align-items: center;
-    display: -webkit-box;
+    justify-content: center;
-    -webkit-box-orient: horizontal;
+    display: flex;
-    -webkit-box-pack: center;
+    color: var(--text-color-placeholder);
-    -webkit-box-align: center;
-    color: #666;
   }
 
   .chart {

src/hooks/useExpressionsProcessor.ts

@@ -112,22 +112,7 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
       tips.push(obj.error);
       typesOfMQE.push(type);
       if (!obj.error) {
-        if (type === ExpressionResultType.TIME_SERIES_VALUES) {
+        if ([ExpressionResultType.SINGLE_VALUE, ExpressionResultType.TIME_SERIES_VALUES].includes(type)) {
-          if (results.length === 1) {
-            const label = results[0].metric && results[0].metric.labels[0] && results[0].metric.labels[0].value;
-            source[c.label || label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
-          } else {
-            for (const item of results) {
-              const values = item.values.map((d: { value: unknown }) => d.value) || [];
-              const label = item.metric.labels
-                .map((d: { key: string; value: string }) => `${d.key}=${d.value}`)
-                .join(",");
-
-              source[label] = values;
-            }
-          }
-        }
-        if (type === ExpressionResultType.SINGLE_VALUE) {
           for (const item of results) {
             const label =
               item.metric &&

src/store/modules/trace.ts

@@ -23,7 +23,6 @@ import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { QueryOrders } from "@/views/dashboard/data";
-
 interface TraceState {
   services: Service[];
   instances: Instance[];
@@ -168,6 +167,7 @@ export const traceStore = defineStore({
         return res.data;
       }
       const data = res.data.data.trace.spans;
+
       this.setTraceSpans(data || []);
       return res.data;
     },

src/views/dashboard/List.vue

@@ -391,6 +391,8 @@ limitations under the License. -->
       delete child.label;
       delete child.value;
       delete child.filters;
+      delete child.typesOfMQE;
+      delete child.subTypesOfMQE;
       if (isEmptyObject(child.graph)) {
         delete child.graph;
       }

src/views/dashboard/controls/Trace.vue

@@ -183,7 +183,7 @@ limitations under the License. -->
   .trace-line {
     position: relative;
     width: 2px;
-    height: 900px;
+    height: 100%;
     background-color: #e8e8e8;
     cursor: ew-resize;
 

src/views/dashboard/graphs/Table.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="chart-table">
+  <div class="chart-table" v-if="dataKeys.length">
     <div class="row header flex-h">
       <div
         v-for="key in dataKeys[0]"
@@ -41,6 +41,7 @@ limitations under the License. -->
       </div>
     </div>
   </div>
+  <div class="no-data" v-else>No Data</div>
 </template>
 <script lang="ts" setup>
   import { computed } from "vue";
@@ -131,4 +132,13 @@ limitations under the License. -->
       width: 50%;
     }
   }
+
+  .no-data {
+    font-size: $font-size-smaller;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: var(--text-color-placeholder);
+  }
 </style>

src/views/dashboard/related/demand-log/Content.vue

@@ -25,11 +25,14 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
   import { useDemandLogStore } from "@/store/modules/demand-log";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global Nullable */
   const demandLogStore = useDemandLogStore();
   const monacoInstance = ref();
   const logContent = ref<Nullable<HTMLDivElement>>(null);
+  const appStore = useAppStoreWithOut();
 
   onMounted(() => {
     init();
@@ -50,6 +53,7 @@ limitations under the License. -->
       wordWrap: true,
       minimap: { enabled: false },
       readonly: true,
+      theme: getTheme(),
     });
     toRaw(monacoInstance.value).updateOptions({ readOnly: true });
     editorLayout();
@@ -64,6 +68,9 @@ limitations under the License. -->
       width: width,
     });
   }
+  function getTheme() {
+    return appStore.theme === Themes.Dark ? "vs-dark" : "vs";
+  }
   onUnmounted(() => {
     if (!toRaw(monacoInstance.value)) {
       return;
@@ -72,6 +79,12 @@ limitations under the License. -->
     monacoInstance.value = null;
     demandLogStore.setLogs("");
   });
+  watch(
+    () => appStore.theme,
+    () => {
+      toRaw(monacoInstance.value).updateOptions({ theme: getTheme() });
+    },
+  );
   watch(
     () => demandLogStore.logs,
     () => {

src/views/dashboard/related/topology/pod/InstanceMap.vue

@@ -125,11 +125,13 @@ limitations under the License. -->
     const html = exprssions.map((m: string, index: number) => {
       const metric =
         topologyStore.hierarchyInstanceNodeMetrics[data.layer || ""][m].values.find(
-          (val: { id: string; value: unknown }) => val.id === data.id,
+          (val: { id: string; value: string }) => val.id === data.id,
         ) || {};
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
 
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
+        opt.unit || ""
+      }</div>`;
     });
     const tipHtml = [
       `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,

src/views/dashboard/related/topology/service/HierarchyMap.vue

@@ -133,10 +133,12 @@ limitations under the License. -->
     const html = exprssions.map((m: string, index: number) => {
       const metric =
         topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
-          (val: { id: string; value: unknown }) => val.id === data.id,
+          (val: { id: string; value: string }) => val.id === data.id,
         ) || {};
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
+        opt.unit || ""
+      }</div>`;
     });
     const tipHtml = [
       `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,

src/views/dashboard/related/topology/service/ServiceMap.vue

@@ -314,7 +314,7 @@ limitations under the License. -->
     const html = nodeMetrics.map((m, index) => {
       const metric =
         (topologyStore.nodeMetricValue[m] &&
-          topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id)) ||
+          topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: string }) => val.id === data.id)) ||
         {};
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
       return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
@@ -344,7 +344,7 @@ limitations under the License. -->
       );
       if (metric) {
         const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
           opt.unit || ""
         }</div>`;
       }
@@ -355,7 +355,7 @@ limitations under the License. -->
         (val: { id: string; value: unknown }) => val.id === data.id,
       );
       if (metric) {
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
           opt.unit || ""
         }</div>`;
       }

src/views/dashboard/related/trace/TraceList.vue

@@ -164,7 +164,8 @@ limitations under the License. -->
   }
 
   .trace-t-wrapper {
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: scroll;
     border-right: 1px solid var(--sw-trace-list-border);
   }
 

src/views/dashboard/related/trace/components/D3Graph/Index.vue

@@ -75,6 +75,7 @@ limitations under the License. -->
     if (!traceGraph.value) {
       return;
     }
+    d3.selectAll(".d3-tip").remove();
     if (props.type === "List") {
       tree.value = new ListGraph(traceGraph.value, handleSelectSpan);
       tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
@@ -96,10 +97,8 @@ limitations under the License. -->
       node.children.push(data);
       return;
     }
-    if (node.children && node.children.length > 0) {
+    for (const nodeItem of node.children || []) {
-      node.children.forEach((nodeItem: Recordable) => {
+      traverseTree(nodeItem, spanId, segmentId, data);
-        traverseTree(nodeItem, spanId, segmentId, data);
-      });
     }
   }
   function changeTree() {
@@ -108,7 +107,7 @@ limitations under the License. -->
     }
     segmentId.value = [];
     const segmentGroup: Recordable = {};
-    const segmentIdGroup: Recordable = [];
+    const segmentIdGroup: string[] = [];
     const fixSpans: Span[] = [];
     const segmentHeaders: Span[] = [];
     for (const span of props.data) {
@@ -118,7 +117,9 @@ limitations under the License. -->
       if (span.parentSpanId === -1) {
         segmentHeaders.push(span);
       } else {
-        const item = props.data.find((i: Span) => i.segmentId === span.segmentId && i.spanId === span.spanId - 1);
+        const item = props.data.find(
+          (i: Span) => i.traceId === span.traceId && i.segmentId === span.segmentId && i.spanId === span.spanId - 1,
+        );
         const fixSpanKeyContent = {
           traceId: span.traceId,
           segmentId: span.segmentId,
@@ -145,18 +146,18 @@ limitations under the License. -->
         }
       }
     }
-    segmentHeaders.forEach((span: Span) => {
+    for (const span of segmentHeaders) {
       if (span.refs.length) {
-        let exit = 0;
+        let exit = null;
-        span.refs.forEach((ref) => {
+        for (const ref of span.refs) {
-          const i = props.data.findIndex(
+          const e = props.data.find(
-            (i: Recordable) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId,
+            (i: Recordable) =>
+              ref.traceId === i.traceId && ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId,
           );
-          if (i > -1) {
+          if (e) {
-            exit = 1;
+            exit = e;
           }
-        });
+        }
-
         if (!exit) {
           const ref = span.refs[0];
           // create a known broken node.
@@ -214,23 +215,23 @@ limitations under the License. -->
           }
         }
       }
-    });
+    }
-    [...fixSpans, ...props.data].forEach((i) => {
+    for (const i of [...fixSpans, ...props.data]) {
       i.label = i.endpointName || "no operation name";
       i.children = [];
-      if (!segmentGroup[i.segmentId]) {
+      if (segmentGroup[i.segmentId]) {
+        segmentGroup[i.segmentId].push(i);
+      } else {
         segmentIdGroup.push(i.segmentId);
         segmentGroup[i.segmentId] = [i];
-      } else {
-        segmentGroup[i.segmentId].push(i);
       }
-    });
+    }
     fixSpansSize.value = fixSpans.length;
-    segmentIdGroup.forEach((id: string) => {
+    for (const id of segmentIdGroup) {
       const currentSegment = segmentGroup[id].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId);
-      currentSegment.forEach((s: Recordable) => {
+      for (const s of currentSegment) {
         const index = currentSegment.findIndex((i: Span) => i.spanId === s.parentSpanId);
-        if (index !== -1) {
+        if (index > -1) {
           if (
             (currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1) ||
             !currentSegment[index].isBroken
@@ -251,37 +252,53 @@ limitations under the License. -->
             s.children.push(...children);
           }
         }
-      });
+      }
       segmentGroup[id] = currentSegment[currentSegment.length - 1];
-    });
+    }
-    segmentIdGroup.forEach((id: string) => {
+    for (const id of segmentIdGroup) {
-      segmentGroup[id].refs.forEach((ref: Recordable) => {
+      for (const ref of segmentGroup[id].refs) {
         if (ref.traceId === props.traceId) {
           traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId, ref.parentSegmentId, segmentGroup[id]);
         }
-      });
+      }
-    });
+    }
     for (const i in segmentGroup) {
-      if (segmentGroup[i].refs.length === 0) {
+      if (segmentGroup[i].refs.length) {
+        let exit = null;
+        for (const ref of segmentGroup[i].refs) {
+          const e = props.data.find(
+            (i: Recordable) =>
+              ref.traceId === i.traceId && ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId,
+          );
+          if (e) {
+            exit = e;
+          }
+        }
+        if (exit) {
+          segmentId.value.push(segmentGroup[i]);
+        }
+      } else {
         segmentId.value.push(segmentGroup[i]);
       }
     }
-    segmentId.value.forEach((i: Span | Recordable) => {
+    for (const i of segmentId.value) {
       collapse(i);
-    });
+    }
   }
   function collapse(d: Span | Recordable) {
     if (d.children) {
       const item = refSpans.value.find((s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId);
       let dur = d.endTime - d.startTime;
-      d.children.forEach((i: Span) => {
+      for (const i of d.children) {
         dur -= i.endTime - i.startTime;
-      });
+      }
       d.dur = dur < 0 ? 0 : dur;
       if (item) {
         d.children = d.children.sort(compare("startTime"));
       }
-      d.children.forEach((i: Span) => collapse(i));
+      for (const i of d.children) {
+        collapse(i);
+      }
     }
   }
   function compare(p: string) {