CN-1087 fix: 实体关系探索架子

src/router/index.js

@@ -27,6 +27,10 @@ const routes = [
         path: '/entityDetail',
         component: () => import('@/views/entityExplorer/EntityDetail')
       },
+      {
+        path: '/entityGraph',
+        component: () => import('@/views/entityExplorer/EntityGraph')
+      },
       {
         path: '/detection',
         redirect: '/detection/securityEvent'

src/utils/constants.js

@@ -90,7 +90,7 @@ export const entityType = {
 
 export const entityDetailTabsName = {
   informationAggregation: 'informationAggregation',
-  domainNameResolution: 'domainNameResolution',
+  relatedEntity: 'relatedEntity',
   openPort: 'openPort',
   digitalCertificate: 'digitalCertificate',
   securityEvent: 'securityEvent',

src/views/charts2/charts/entityDetail/EntityDetailTabs.vue

@@ -13,7 +13,7 @@
           <i v-if="tab.warnFlag" :class="tab.warnIcon" class="tab-pane-warn--icon"></i>
         </template>
         <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity"></information-aggregation>
-        <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.domainNameResolution && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" :timeFilter="oneDayTimeFilter"></domain-name-resolution>
+        <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.relatedEntity && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" :timeFilter="oneDayTimeFilter"></domain-name-resolution>
         <digital-certificate v-else-if="tab.name === entityDetailTabsName.digitalCertificate && tab.name === activeTab" @toggleLoading="setLoading" :timeFilter="oneDayTimeFilter" />
         <security-event v-else-if="tab.name === entityDetailTabsName.securityEvent && tab.name === activeTab" @toggleLoading="setLoading" :timeFilter="oneDayTimeFilter" @checkWarn="setWarn" />
         <performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent && tab.name === activeTab" @toggleLoading="setLoading" :timeFilter="oneDayTimeFilter" @checkWarn="setWarn" />
@@ -80,7 +80,7 @@ export default {
     const entityType = props.entity.entityType
 
     const tabs = reactive([
-      { name: entityDetailTabsName.domainNameResolution, label: i18n.global.t('entities.relatedEntity'), icon: 'cn-icon cn-icon-domain-name-resolution' },
+      { name: entityDetailTabsName.relatedEntity, label: i18n.global.t('entities.relatedEntity'), icon: 'cn-icon cn-icon-domain-name-resolution' },
       { name: entityDetailTabsName.openPort, label: i18n.global.t('entities.openPort'), icon: 'cn-icon cn-icon-open-port' },
       // { name: entityDetailTabsName.digitalCertificate, label: i18n.global.t('entities.digitalCertificate'), icon: 'cn-icon cn-icon-digital-certificate' },
       { name: entityDetailTabsName.securityEvent, label: i18n.global.t('overall.securityEvent'), icon: 'cn-icon cn-icon-security-event', warnIcon: 'cn-icon cn-icon-warn', warnFlag: false },

src/views/entityExplorer/EntityGraph.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="entity-graph">
+    <div class="entity-graph__chart"></div>
+    <div class="entity-graph__detail">
+      <ip-list v-if="mode === 'ipList'"></ip-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import IpList from '@/views/entityExplorer/entityGraphDetail/IpList'
+export default {
+  name: 'EntityRelationship',
+  components: {
+    IpList
+  },
+  data () {
+    return {
+      mode: 'ipList' // ipList, ipDetail, domainList, domainDetail, appList, appDetail
+    }
+  }
+}
+</script>
+<style lang="scss">
+.entity-graph {
+  display: flex;
+
+  .entity-graph__chart {
+    width: calc(100% - 360px);
+  }
+
+  .entity-graph__detail {
+    width: 360px;
+    border-left: 1px solid #E2E5EC;
+    overflow: auto;
+  }
+}
+</style>

src/views/entityExplorer/entityGraphDetail/IpList.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'IpList'
+}
+</script>
+
+<style scoped>
+
+</style>