fix(PersonalWorkbench): 修复itsm单据可以批量审批、多租户审批人、申请人未获取displayname

fix(PersonalWorkbench): 修复itsm单据可以批量审批、多租户审批人、申请人未获取displayname

Author: lhzzforever

src/dashboard-front/src/App.vue

@@ -19,6 +19,7 @@
   <BkConfigProvider :locale="bkuiLocale">
     <div
       id="app"
+      class="app"
       :class="[
         systemCls,
         { 'show-notice-wrapper': enableShowNotice && showNoticeAlert}

src/dashboard-front/src/components/ag-mcp-trace-chain/info/Index.vue

@@ -48,7 +48,7 @@
             {{ t('总耗时') }}:
           </div>
           <div class="value">
-            {{ `${traceChainDetail?.total_latency_ms ?? 0 }ms` }}
+            {{ formattedLatency }}
           </div>
         </div>
         <div class="item">
@@ -94,8 +94,9 @@
 
 <script lang="ts" setup>
 import dayjs from 'dayjs';
+import { isNumber } from 'lodash-es';
 import { t } from '@/locales';
-import type { ITraceDetail } from '@/services/source/observability';
+import type { ILatencyDistribution, ITraceDetail } from '@/services/source/observability';
 import AgStatusDot from '@/components/ag-status-dot/Index.vue';
 
 interface IProps { traceChainDetail?: ITraceDetail }
@@ -107,6 +108,16 @@ const isSuccessStatus = computed(() => {
     && ((Number(traceChainDetail.status) >= 200
       && Number(traceChainDetail.status) < 300) || ['success'].includes(traceChainDetail.status));
 });
+const formattedLatency = computed(() => {
+  const totalLatency = traceChainDetail?.total_latency_ms ?? 0;
+  const results = isNumber(totalLatency)
+    ? totalLatency % 1 === 0 || totalLatency.toString().split('.')[1]?.length <= 2
+      ? totalLatency
+      : totalLatency.toFixed(3)
+    : 0;
+
+  return `${results}ms`;
+});
 
 const renderStatusDot = () => {
   return {
@@ -119,7 +130,7 @@ const renderLatencyDistribution = () => {
   const latencyDistribution = traceChainDetail?.latency_distribution;
 
   if (latencyDistribution?.length) {
-    return latencyDistribution.map((item: any) => `${item?.latency_ms}ms`)?.join(' - ');
+    return latencyDistribution.map((item: ILatencyDistribution) => `${item?.latency_ms}ms`)?.join(' - ');
   }
 
   return '0ms';

src/dashboard-front/src/components/render-tag-overflow/Index.vue

@@ -24,7 +24,7 @@
         class="render-row-item flex-1 truncate"
         :title="visibleData[0]"
       >
-        {{ visibleData[0] }}
+        {{ renderDisplayName(visibleData[0]) }}
       </BkTag>
     </template>
 

src/dashboard-front/src/components/trace-view/trace-timeline-viewer/index.tsx

@@ -29,7 +29,7 @@ interface IState {
   resizeObserver: any
 }
 
-const DEFAULT_MIN_VALUE = 240;
+const DEFAULT_MIN_VALUE = 198;
 
 const TProps = {
   updateViewRangeTime: Function as PropType<TUpdateViewRangeTimeFunction>,
@@ -47,8 +47,8 @@ export default defineComponent({
 
     const wrapperRef = ref<HTMLDivElement>();
     const virtualizedTraceViewRef = ref<InstanceType<typeof VirtualizedTraceView>>();
-    const spanNameColumnWidth = ref<number>(0.25);
-    const minSpanNameColumnWidth = ref<number>(0.25);
+    const spanNameColumnWidth = ref<number>(0.20);
+    const minSpanNameColumnWidth = ref<number>(0.20);
     const childrenHiddenIds = ref(new Set());
 
     const state = reactive<IState>({
@@ -177,9 +177,8 @@ export default defineComponent({
     const getSpanNameColumnWidth = () => {
       const elemWidth = wrapperRef.value?.getBoundingClientRect()?.width || 0;
       const minReact = Number((DEFAULT_MIN_VALUE / elemWidth).toFixed(2));
-      minSpanNameColumnWidth.value = minReact > 0.25 ? minReact : 0.25;
+      minSpanNameColumnWidth.value = minReact > 0.20 ? minReact : 0.20;
       if (minReact < spanNameColumnWidth.value) return;
-
       spanNameColumnWidth.value = Number(minReact);
     };
 

src/dashboard-front/src/components/trace-view/trace-timeline-viewer/span-bar-row.tsx

@@ -16,8 +16,10 @@
  * to the current version of the project delivered to anyone in the future.
  */
 
+import type { SetupContext } from 'vue';
 import { Divider, PopConfirm, Popover } from 'bkui-vue';
 import { bkTooltips } from 'bkui-vue/lib/directives';
+import { debounce } from 'lodash-es';
 import {
   type ViewedBoundsFunctionType,
   createViewedBoundsFunc,
@@ -86,15 +88,23 @@ const SpanBarRowProps = {
     type: Number,
     required: true,
   },
-};
+} as const;
+
+type SpanBarRowPropsType = ExtractPropTypes<typeof SpanBarRowProps>;
 
 export default defineComponent({
   name: 'SpanBarRow',
   directives: { bkTooltips },
   props: SpanBarRowProps,
   emits: ['toggleCollapse'],
 
-  setup(props: any, { emit }: any) {
+  setup(props: SpanBarRowPropsType, { emit }: SetupContext<['toggleCollapse']>) {
+    // 自动更新溢出状态
+    let resizeObserver: ResizeObserver | null = null;
+    // 服务名称文本溢出判断
+    const svcNameEl = ref<HTMLElement | null>(null);
+    const isSvcNameOverflow = ref(false);
+
     const traceStore = useTrace();
     const spanBarCurrentStore = useSpanBarCurrentInject();
     const childrenHiddenStore = useChildrenHiddenInject();
@@ -150,6 +160,15 @@ export default defineComponent({
       }) as ViewedBoundsFunctionType;
     };
 
+    // 服务名称是否溢出判断
+    const updateOverflow = debounce(() => {
+      if (!svcNameEl.value) return;
+
+      // 核心判断：文本是否溢出
+      isSvcNameOverflow.value
+        = svcNameEl.value.scrollWidth > svcNameEl.value.clientWidth;
+    }, 100);
+
     const detailToggle = () => {
       props.onDetailToggled?.(props.span?.span_id as string);
     };
@@ -177,7 +196,30 @@ export default defineComponent({
       emit('toggleCollapse', groupID, status);
     };
 
+    onMounted(() => {
+      nextTick(() => {
+        if (!svcNameEl.value) return;
+
+        resizeObserver = new ResizeObserver(() => {
+          updateOverflow();
+        });
+        resizeObserver.observe(svcNameEl.value);
+
+        updateOverflow();
+      });
+    });
+
+    onBeforeUnmount(() => {
+      if (resizeObserver && svcNameEl.value) {
+        resizeObserver.unobserve(svcNameEl.value);
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
+    });
+
     return {
+      svcNameEl,
+      isSvcNameOverflow,
       activeSpan,
       showDuration,
       crossRelationInfo,
@@ -255,14 +297,6 @@ export default defineComponent({
           : ebpfTapPortName
         : operation;
     const labelDetail = `${displayServiceName}::${displayOperationName}`;
-    let errorDescription = '';
-    if (showErrorIcon) {
-      const item = attributes?.find?.(
-        (attr: { key: string }) => attr.key === 'span.status_message',
-      );
-      errorDescription = item?.value || '';
-    }
-
     const longLabel = `${label ? `${label} | ` : ''}${labelDetail}`;
 
     const kindIcons: Record<KindType, string> = {
@@ -346,9 +380,11 @@ export default defineComponent({
                       />
                     )}
                     <span
+                      ref="svcNameEl"
                       v-bk-tooltips={{
                         content: `${displayServiceName} ${displayOperationName} | ${label}`,
                         placement: 'top',
+                        disabled: !this.isSvcNameOverflow,
                       }}
                       class={[
                         'span-svc-name',
@@ -528,13 +564,13 @@ export default defineComponent({
                             ? (
                               <i
                                 class="icon-monitor icon-mc-fold-menu icon-collapsed"
-                                onClick={(e: any) => this.handleToggleCollapse(e, groupInfo.id, 'collpase')}
+                                onClick={(e: MouseEvent) => this.handleToggleCollapse(e, groupInfo.id, 'collpase')}
                               />
                             )
                             : (
                               <span
                                 class="collapsed-mark"
-                                onClick={(e: any) => this.handleToggleCollapse(e, groupInfo.id, 'expand')}
+                                onClick={(e: MouseEvent) => this.handleToggleCollapse(e, groupInfo.id, 'expand')}
                               >
                                 {groupInfo.members.length}
                               </span>