feat: 故障分析体验问题修复 (#4871)

TencentBlueKing · Jan 20, 2025 · 998baee · 998baee
1 parent 4fd6b81
commit 998baee
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 41 deletions.
diff --git a/bkmonitor/webpack/src/monitor-pc/lang/content.ts b/bkmonitor/webpack/src/monitor-pc/lang/content.ts
@@ -288,4 +288,6 @@ export default {
   '关联日志方法：\n1. 开启应用的日志上报开关，开启后会自动关联对应的索引集\n2. 在服务配置 - 关联日志出关联对应索引集\n3. 在 Span 中增加 IP 地址，将会自动关联此主机对应的采集项':
     'Associated log method:\n1. Turn on the log reporting switch of the application, which will automatically associate the corresponding index set\n2. In service configuration - associate log out and associate the corresponding index set\n3. Add IP address in Span, will automatically associate the corresponding collection item of this host',
   暂不支持: 'Not supported yet',
+  在拓扑图中高亮该节点: 'Highlight the node in the topology map',
+  '点击前往：主机详情页/服务详情页': 'Click to go to: Host details page/Service details page',
 };
diff --git a/bkmonitor/webpack/src/trace/pages/failure/failure-handle/filter-search-main.tsx b/bkmonitor/webpack/src/trace/pages/failure/failure-handle/filter-search-main.tsx
@@ -86,7 +86,7 @@ export default defineComponent({
     const inputStatus = ref<string>('success');
     const isErr = ref(false);
     const selectRef = ref();
-    const trigger = ref('default')
+    const trigger = ref('default');
     const handleBiz = (data: any) => {
       const list = JSON.parse(JSON.stringify(spaceFilter.value));
       spaceFilter.value.push(data.bk_biz_id);
@@ -103,7 +103,7 @@ export default defineComponent({
     );
     watch(
       () => isErr.value,
-      (val) => {
+      val => {
         trigger.value = val ? 'manual' : 'default';
       }
     );
@@ -122,7 +122,7 @@ export default defineComponent({
       const list = (window.space_list || []).filter(item => currentBizList.value.includes(item.bk_biz_id));
       return getSpaceList(list || []);
     });
-    const changeSpace = (space: string) => {     
+    const changeSpace = (space: string) => {
       isErr.value = !space.length;
       emit('changeSpace', space, isErr.value);
     };
@@ -140,6 +140,7 @@ export default defineComponent({
           tags,
           isCheck: false,
           show: true,
+          spaceName: `${item.name} (#${item.bk_biz_id})`,
         };
         list.push(newItem);
       });
@@ -189,20 +190,17 @@ export default defineComponent({
       inputStatus,
       isErr,
       selectRef,
-      trigger
+      trigger,
     };
   },
   render() {
     return (
       <div class='failure-search-main'>
         <div class='main-top'>
           <Select
-            ref="selectRef"
+            ref='selectRef'
             selected-style='checkbox'
-            class={[
-              'main-select',
-              { error: this.isErr }
-            ]}
+            class={['main-select', { error: this.isErr }]}
             trigger={this.trigger}
             v-model={this.spaceFilter}
             clearable={false}
@@ -220,10 +218,10 @@ export default defineComponent({
                 id={item.id}
                 key={item.id}
                 class='main-select-item'
-                name={item.name}
+                name={item.spaceName}
               >
                 <span class='item-name'>
-                  <span class={['name', { disabled: !!item.noAuth && !item.hasData }]}>{item.name}</span>
+                  <span class={['name', { disabled: !!item.noAuth && !item.hasData }]}>{item.spaceName}</span>
                 </span>
                 <div class='space-tags'>
                   {item.tags.map(tag =>
@@ -256,4 +254,4 @@ export default defineComponent({
       </div>
     );
   },
-});
+});
diff --git a/bkmonitor/webpack/src/trace/pages/failure/failure-tags/failure-tags.tsx b/bkmonitor/webpack/src/trace/pages/failure/failure-tags/failure-tags.tsx
@@ -96,7 +96,7 @@ export default defineComponent({
                   checkable
                   onChange={checked => handleCheckChange(checked, item)}
                 >
-                  {`[${item.bk_biz_id}] ${item.bk_biz_name}`}
+                  {`${item.bk_biz_name} (#${item.bk_biz_id})`}
                 </Tag>
               )),
               <Tag
@@ -148,6 +148,7 @@ export default defineComponent({
             const replacements = {
               0: (
                 <label
+                  v-bk-tooltips={{ content: t('在拓扑图中高亮该节点') }}
                   onClick={() => {
                     const node = entities.filter(item => item.is_root) || [];
                     node.length > 0 && emit('chooseNode', [node[0].entity_id]);
@@ -293,4 +294,4 @@ export default defineComponent({
       </div>
     );
   },
-});
+});
diff --git a/bkmonitor/webpack/src/trace/pages/failure/failure-topo/failure-topo-tooltips.tsx b/bkmonitor/webpack/src/trace/pages/failure/failure-topo/failure-topo-tooltips.tsx
@@ -741,13 +741,21 @@ export default defineComponent({
                 ]}
               />
             </span>
-            <OverflowTitle
+            <div
               key={node?.entity?.entity_id}
               class={['header-name', this.canJumpByType(node) && 'header-pod-name']}
-              type='tips'
+              v-bk-tooltips={{
+                content: (
+                  <div>
+                    <div>{node?.entity?.entity_name}</div>
+                    <br />
+                    {this.$t('点击前往：主机详情页/服务详情页')}
+                  </div>
+                ),
+              }}
             >
               <span onClick={this.handleToLink.bind(this, node)}>{node?.entity?.entity_name}</span>
-            </OverflowTitle>
+            </div>
             <span
               class='icon-btn'
               onClick={this.handleCopy.bind(this, node?.entity?.entity_name)}
@@ -878,7 +886,7 @@ export default defineComponent({
             ))}
             {createCommonForm(`${this.$t('所属业务')}：`, () => (
               <>
-                [{node.bk_biz_id}] {node.bk_biz_name}
+                {node.bk_biz_name} (#{node.bk_biz_id})
               </>
             ))}
             {node.entity?.tags?.BcsService &&

diff --git a/bkmonitor/webpack/src/trace/plugins/charts/failure-chart/TagDisplay.tsx b/bkmonitor/webpack/src/trace/plugins/charts/failure-chart/TagDisplay.tsx
@@ -23,20 +23,30 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watchEffect } from 'vue';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, type PropType } from 'vue';
 
 import './TagDisplay.scss';
 
+interface ITagItem {
+  display_key: string;
+  display_value: string;
+  value: string;
+  key: string;
+}
+
 export default defineComponent({
   name: 'TagDisplay',
   props: {
     tagsList: {
-      type: Array,
+      type: Array as PropType<ITagItem[]>,
       required: true,
     },
+    tipsName: {
+      type: String,
+    },
   },
   setup(props) {
-    const tags = ref(props.tagsList);
+    const tags = ref<ITagItem[]>(props.tagsList);
     const isAllShown = ref(true);
     const tagContainerWidth = ref(0);
 
@@ -93,12 +103,27 @@ export default defineComponent({
       tagContainerWidth.value = tagContainer.value?.offsetWidth;
       isAllShown.value = tags.value.length <= visibleTagCount.value;
     };
+    /** 渲染tag的tips */
+    const renderTagToolTips = (list: ITagItem[]) => {
+      return (
+        <div>
+          {props.tipsName}
+          <br />
+          {list.map(item => (
+            <div style={{ marginTop: '5px' }}>
+              {item.display_key} = {item.display_value}
+            </div>
+          ))}
+        </div>
+      );
+    };
     return {
       tagContainer,
       remainingCount,
       displayedTags,
       visibleTagCount,
       showMoreIndicator,
+      renderTagToolTips,
     };
   },
   render() {
@@ -108,12 +133,24 @@ export default defineComponent({
         class='display-tag-container'
       >
         {this.displayedTags.slice(0, this.visibleTagCount).map(item => (
-          <span class='tag-item'>
+          <span
+            class='tag-item'
+            v-bk-tooltips={{
+              content: this.renderTagToolTips([item]),
+            }}
+          >
             {item.display_key} = {item.display_value}
           </span>
         ))}
         {this.showMoreIndicator && (
-          <span class='more-indicator'>{this.remainingCount > 0 ? `+${this.remainingCount}` : ''}</span>
+          <span
+            class='more-indicator'
+            v-bk-tooltips={{
+              content: this.renderTagToolTips(this.displayedTags.slice(this.visibleTagCount)),
+            }}
+          >
+            {this.remainingCount > 0 ? `+${this.remainingCount}` : ''}
+          </span>
         )}
       </div>
     );

diff --git a/bkmonitor/webpack/src/trace/plugins/charts/failure-chart/failure-chart.scss b/bkmonitor/webpack/src/trace/plugins/charts/failure-chart/failure-chart.scss
@@ -34,6 +34,9 @@
     min-width: 100%;
     font-weight: 700;
     color: #63656e;
+    .chart-title-wrap {
+      z-index: 1;
+    }
 
     :deep(.chart-title-wrap) {
       cursor: pointer;

diff --git a/bkmonitor/webpack/src/trace/plugins/charts/failure-chart/failure-chart.tsx b/bkmonitor/webpack/src/trace/plugins/charts/failure-chart/failure-chart.tsx
@@ -1103,29 +1103,17 @@ export default defineComponent({
                   </div>
                 ),
                 tagTitle: () => (
-                  <div
-                    class='tag-head'
-                    v-bk-tooltips={{
-                      content: (
-                        <div>
-                          {this.t('维度：')}
-                          <br />
-                          {this.dimensionsList.map(item => (
-                            <div style={{ marginTop: '5px' }}>
-                              {item.display_key} = {item.display_value}
-                            </div>
-                          ))}
-                        </div>
-                      ),
-                    }}
-                  >
-                    <TagDisplay tagsList={this.dimensionsList} />
+                  <div class='tag-head'>
+                    <TagDisplay
+                      tagsList={this.dimensionsList}
+                      tipsName={this.t('维度：')}
+                    />
                   </div>
                 ),
               }}
               isShowAlarm={true}
               menuList={this.chartOption.tool.list || []}
-              showMore={!this.readonly && this.showTitleTool}
+              showMore={true}
               subtitle={this.$props.subtitle || ''}
               title={this.$props.title}
               onMenuClick={this.handleMoreToolItemSet}