CN-1217: dashboard下钻页面增加实体跳转按钮

src/assets/css/components/views/charts2/panel.scss

@@ -55,6 +55,19 @@
         align-items: center;
         justify-content: center;
       }
+
+      .panel-show-detail {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        margin-left: 6px;
+
+        i {
+          font-size: 22px;
+          cursor: pointer;
+          color: #626262;
+        }
+      }
     }
     .panel__tools {
       display: flex;
@@ -104,3 +117,13 @@
     }
   }
 }
+
+.panel-tooltip {
+  height: 28px !important;
+  padding: 6px 10px 8px 10px !important;
+  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
+  font-family: NotoSansSChineseRegular;
+  font-size: 12px;
+  color: #353636;
+  font-weight: 400;
+}

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1690879635451') format('woff2'),
-       url('iconfont.woff?t=1690879635451') format('woff'),
-       url('iconfont.ttf?t=1690879635451') format('truetype');
+  src: url('iconfont.woff2?t=1691461947018') format('woff2'),
+       url('iconfont.woff?t=1691461947018') format('woff'),
+       url('iconfont.ttf?t=1691461947018') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-jump-to:before {
+  content: "\e7fe";
+}
+
 .cn-icon-next-step:before {
   content: "\e7fd";
 }

src/views/charts2/Panel.vue

@@ -8,6 +8,17 @@
           <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
           Score:{{score}}
           </div>
+          <div v-if="showEntityDetail" class="panel-show-detail">
+            <el-tooltip
+                effect="light"
+                trigger="hover"
+                :content="$t('entity.jumpToEntityDetails')"
+                placement="right"
+                popper-class="panel-tooltip"
+            >
+              <i class="cn-icon cn-icon-jump-to" @click="jumpEntityDetail"></i>
+            </el-tooltip>
+          </div>
       </div>
       <div class="panel__tools">
         <el-select
@@ -235,7 +246,28 @@ export default {
 
     const thirdPanel = query.thirdPanel
     const fourthPanel = query.fourthPanel
+    const entityType = ref('')
+    const entityValue = ref('')
+    const showEntityDetail = ref(false)
+
     if (fourthPanel) {
+      const tab = query.networkOverviewBeforeTab
+      const value = query.fourthMenu
+      const ipList = ['ip', 'clientIp', 'serverIp', 'dnsServer', 'a', 'aaaa']
+      const appList = ['appLabel']
+      const domainList = ['sslSni'] // domain暂定，先加入snis
+
+      if (ipList.indexOf(tab) > -1) {
+        entityType.value = 'ip'
+        showEntityDetail.value = true
+      } else if (appList.indexOf(tab) > -1) {
+        entityType.value = 'app'
+        showEntityDetail.value = true
+      } else if (domainList.indexOf(tab) > -1) {
+        entityType.value = 'domain'
+        showEntityDetail.value = true
+      }
+      entityValue.value = value
       panelType = Number(fourthPanel)
     } else if (thirdPanel) {
       panelType = Number(thirdPanel)
@@ -284,7 +316,10 @@ export default {
       queryCondition,
       dimensionType,
       tabOperationType,
-      networkOverviewBeforeTab
+      networkOverviewBeforeTab,
+      showEntityDetail,
+      entityType,
+      entityValue
     }
   },
   methods: {
@@ -423,6 +458,16 @@ export default {
           }
         })
       }
+    },
+    jumpEntityDetail () {
+      const { href } = this.$router.resolve({
+        path: '/entityDetail',
+        query: {
+          entityType: this.entityType,
+          entityName: this.entityValue
+        }
+      })
+      window.open(href, '_blank')
     }
   },
   /**