Merge branch 'main' of github.com:apache/skywalking-booster-ui into feat/mobile

src/components/SelectSingle.vue

@@ -45,7 +45,7 @@ import { Option } from "@/types/app";
 const emit = defineEmits(["change"]);
 const props = defineProps({
   options: {
-    type: Array as PropType<(Option & { disabled: boolean })[]>,
+    type: Array as PropType<Option[]>,
     default: () => [],
   },
   value: {

src/locales/lang/en.ts

@@ -242,6 +242,10 @@ const msg = {
   defaultDepth: "Default Depth",
   traceTagsTip: `Only tags defined in the core/default/searchableTracesTags are searchable.
   Check more details on the Configuration Vocabulary page`,
+  logTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
+  Check more details on the Configuration Vocabulary page`,
+  alarmTagsTip: `Only tags defined in the core/default/searchableAlarmTags are searchable.
+  Check more details on the Configuration Vocabulary page`,
   tagsLink: "Configuration Vocabulary page",
   addTag: "Please input a tag",
   log: "Log",

src/locales/lang/zh.ts

@@ -243,6 +243,10 @@ const msg = {
   defaultDepth: "默认深度",
   traceTagsTip:
     "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  logTagsTip:
+    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  alarmTagsTip:
+    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   tagsLink: "配置词汇页",
   addTag: "请添加标签",
   logCategory: "日志类别",

src/store/modules/profile.ts

@@ -161,7 +161,13 @@ export const profileStore = defineStore({
         this.analyzeTrees = [];
         return res.data;
       }
-      this.segmentSpans = segment.spans;
+      this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
+        return {
+          ...d,
+          segmentId: this.currentSegment.segmentId,
+          traceId: this.currentSegment.traceIds[0],
+        };
+      });
       if (!(segment.spans && segment.spans.length)) {
         this.analyzeTrees = [];
         return res.data;

src/store/modules/topology.ts

@@ -410,6 +410,9 @@ export const topologyStore = defineStore({
       const idsC = this.calls
         .filter((i: Call) => i.detectPoints.includes("CLIENT"))
         .map((b: Call) => b.id);
+      if (!idsC.length) {
+        return;
+      }
       const param = await useQueryTopologyMetrics(linkClientMetrics, idsC);
       const res = await this.getCallClientMetrics(param);
 
@@ -425,6 +428,9 @@ export const topologyStore = defineStore({
       const idsS = this.calls
         .filter((i: Call) => i.detectPoints.includes("SERVER"))
         .map((b: Call) => b.id);
+      if (!idsS.length) {
+        return;
+      }
       const param = await useQueryTopologyMetrics(linkServerMetrics, idsS);
       const res = await this.getCallServerMetrics(param);
 
@@ -438,6 +444,9 @@ export const topologyStore = defineStore({
         return;
       }
       const ids = this.nodes.map((d: Node) => d.id);
+      if (!ids.length) {
+        return;
+      }
       const param = await useQueryTopologyMetrics(nodeMetrics, ids);
       const res = await this.getNodeMetricValue(param);
 

src/views/components/ConditionTags.vue

@@ -39,7 +39,17 @@ limitations under the License. -->
         >
           {{ t("tagsLink") }}
         </a>
-        <el-tooltip :content="t('traceTagsTip')">
+        <el-tooltip
+          :content="
+            t(
+              type === 'LOG'
+                ? 'logTagsTip'
+                : type === 'TRACE'
+                ? 'traceTagsTip'
+                : 'alarmTagsTip'
+            )
+          "
+        >
           <span>
             <Icon class="icon-help mr-5" iconName="help" size="middle" />
           </span>

src/views/dashboard/related/components/LogTable/LogService.vue

@@ -22,12 +22,12 @@ limitations under the License. -->
       <span v-else-if="item.label === 'tags'">
         {{ tags }}
       </span>
-      <router-link
+      <!-- <router-link
         v-else-if="item.label === 'traceId' && !noLink"
         :to="{ name: 'trace', query: { traceid: data[item.label] } }"
       >
         <span :class="noLink ? '' : 'blue'">{{ data[item.label] }}</span>
-      </router-link>
+      </router-link> -->
       <span v-else>{{ data[item.label] }}</span>
     </div>
   </div>

src/views/dashboard/related/profile/components/TaskList.vue

@@ -124,12 +124,14 @@ limitations under the License. -->
 import { ref } from "vue";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
+import { useSelectorStore } from "@/store/modules/selectors";
 import { useProfileStore } from "@/store/modules/profile";
 import { TaskLog, TaskListItem } from "@/types/profile";
 import { ElMessage } from "element-plus";
 
 const { t } = useI18n();
 const profileStore = useProfileStore();
+const selectorStore = useSelectorStore();
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 const viewDetail = ref<boolean>(false);
@@ -150,7 +152,7 @@ async function viewTask(e: Event, item: TaskListItem) {
   viewDetail.value = true;
   selectedTask.value = item;
   service.value = (
-    profileStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
+    selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
   ).label;
   const res = await profileStore.getTaskLogs({ taskID: item.id });
 

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

@@ -40,7 +40,7 @@ limitations under the License. -->
       <span class="g-sm-8 wba">{{ currentSpan.peer || "No Peer" }}</span>
     </div>
     <div class="mb-10 clear item">
-      <span class="g-sm-4 grey">{{ t("error") }}:</span>
+      <span class="g-sm-4 grey">{{ t("isError") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
     </div>
     <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -105,8 +105,12 @@ limitations under the License. -->
           <span>{{ data.serviceCode }}</span>
         </el-tooltip>
       </div>
-      <div class="application" v-show="headerType === 'profile'">
+      <div
-        <span @click="viewSpanDetail">{{ t("view") }}</span>
+        class="application"
+        v-show="headerType === 'profile'"
+        @click="viewSpan($event)"
+      >
+        <span>{{ t("view") }}</span>
       </div>
     </div>
     <div
@@ -185,7 +189,7 @@ export default defineComponent({
     function toggle() {
       displayChildren.value = !displayChildren.value;
     }
-    function showSelectSpan(dom: any) {
+    function showSelectSpan(dom: HTMLSpanElement) {
       if (!dom) {
         return;
       }
@@ -207,11 +211,18 @@ export default defineComponent({
       }
       viewSpanDetail(dom);
     }
+    function viewSpan(event: any) {
+      const dom = event.path.find((d: any) =>
+        d.className.includes("trace-item")
+      );
+      emit("select", props.data);
+      viewSpanDetail(dom);
+    }
 
-    function selectedItem(data: any) {
+    function selectedItem(data: HTMLSpanElement) {
       emit("select", data);
     }
-    function viewSpanDetail(dom: any) {
+    function viewSpanDetail(dom: HTMLSpanElement) {
       showSelectSpan(dom);
       showDetail.value = true;
     }
@@ -226,6 +237,7 @@ export default defineComponent({
       showDetail,
       selectSpan,
       selectedItem,
+      viewSpan,
       t,
     };
   },