feat: CN-448 Dns实体下拉服务属性，Dns 详细信息

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -390,6 +390,9 @@
           height: 100%;
           line-height: 68px;
           border-radius: 100%;
+          i {
+            font-size: 26px;
+          }
         }
         .content__data-protocol-value {
           display: flex;

src/assets/css/components/views/charts/ipBasicInfo.scss

@@ -1,17 +1,19 @@
 .cn-chart__ip-basic {
   display: flex;
-  .el-descriptions {
+  padding: 30px  60px 0 30px;
-    padding-top: 30px;
+  .cn-chart__ip-basic-info {
+    padding-right: 80px;
   }
   &>.el-descriptions {
     flex: 0 0 350px;
-    padding: 30px 36px;
   }
   .chart-location {
     display: flex;
     flex: 1;
     flex-direction: column;
-    padding: 0 20px 20px 0;
+  }
+  .el-descriptions :not(.is-bordered) td {
+    padding-bottom: 5px !important;
   }
   .el-descriptions__content {
     color: #3976CB;

src/utils/api.js

@@ -58,6 +58,8 @@ export const api = {
   entityDomainDetailSecurity: '/interface/entity/detail/overview/domain/securityEvent',
   entityDomainRelatedServerIp: '/interface/entity/detail/overview/domain/relatedServerIp',
   entityDomainRelatedServerApp: '/interface/entity/detail/overview/domain/relatedApp',
+  entityDetectionsIp: '/interface/entity/detail/overview/ip/dnsInfo',
+  entityDetectionsIpQueryRate: '/interface/entity/detail/overview/ip/dnsQueryRate',
   // ip detail
   entityIpDetailTraffic: '/interface/entity/detail/overview/ip/traffic',
   entityIpDetailTrafficMap: '/interface/entity/detail/ip/trafficMap',

src/views/charts/charts/IpBasicInfo.vue

@@ -1,12 +1,21 @@
 <template>
   <div class="cn-chart__ip-basic">
-    <el-descriptions :column="1">
+    <div class="cn-chart__ip-basic-info">
-      <el-descriptions-item label="ASN:">{{(chartData && chartData.asn) || '-'}}</el-descriptions-item>
+      <el-descriptions :column="1">
-      <el-descriptions-item label="AS Org:">{{(chartData && chartData.asOrganization) || '-'}}</el-descriptions-item>
+        <el-descriptions-item label="ASN:">{{(chartData && chartData.asn) || '-'}}</el-descriptions-item>
-      <el-descriptions-item :label="$t('entities.asSubnet') + ':'">{{(chartData && chartData.asSubnet) || '-'}}</el-descriptions-item>
+        <el-descriptions-item label="AS Org:">{{(chartData && chartData.asOrganization) || '-'}}</el-descriptions-item>
-      <el-descriptions-item label="ISP:">{{(chartData && chartData.isp) || '-'}}</el-descriptions-item>
+        <el-descriptions-item :label="$t('entities.asSubnet') + ':'">{{(chartData && chartData.asSubnet) || '-'}}</el-descriptions-item>
-      <el-descriptions-item label="DNS PTR:">{{(chartData && chartData.dnsPtr) || '-'}}</el-descriptions-item>
+        <el-descriptions-item label="ISP:">{{(chartData && chartData.isp) || '-'}}</el-descriptions-item>
-    </el-descriptions>
+        <el-descriptions-item label="DNS PTR:">{{(chartData && chartData.dnsPtr) || '-'}}</el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions :column="1" v-if="detectionsData.dnsServerRole">
+        <el-descriptions-item :label="$t('overall.dnsServerInfo.role') + ':'">{{$_.get(detectionsData, 'dnsServerRole', '-')}}</el-descriptions-item>
+        <el-descriptions-item :label="$t('overall.dnsServerInfo.mechanism') + ':'">{{$_.get(detectionsData, 'dnsServerOrg', '-')}}</el-descriptions-item>
+        <el-descriptions-item :label="$t('overall.dnsServerInfo.software') + ':'">{{$_.get(detectionsData, 'dnsServerSoftware', '-')}}</el-descriptions-item>
+        <el-descriptions-item :label="$t('overall.dnsServerInfo.system') + ':'">{{$_.get(detectionsData, 'dnsServerOs', '-')}}</el-descriptions-item>
+        <el-descriptions-item :label="$t('overall.dnsServerInfo.protocol') + ':'">{{detectionIpSupporting(detectionsData)}}</el-descriptions-item>
+      </el-descriptions>
+    </div>
     <div class="chart-location">
       <el-descriptions :column="1">
         <el-descriptions-item :label="$t('overall.location') + ':'">{{location}}</el-descriptions-item>
@@ -22,18 +31,22 @@ import * as L from 'leaflet'
 import icon from 'leaflet/dist/images/marker-icon.png'
 import iconShadow from 'leaflet/dist/images/marker-shadow.png'
 import 'leaflet/dist/leaflet.css'
-
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
 export default {
   name: 'IpBasicInfo',
   mixins: [chartMixin],
   data () {
     return {
       myChart: null,
-      mapPictureUrl: '/Tiles/{z}/{x}/{y}.png'
+      mapPictureUrl: '/Tiles/{z}/{x}/{y}.png',
+      entityDetectionsIpUrl: api.entityDetectionsIp,
+      detectionsData: {}
     }
   },
   computed: {
     location () {
+      this.$_.get()
       let location = ''
       if (this.chartInfo) {
         if (this.chartInfo.country) {
@@ -57,6 +70,25 @@ export default {
         }
       }
       return location
+    },
+    detectionIpSupporting () {
+      return function (detectionsData) {
+        let result = ''
+        if (detectionsData.dnssecSupport) {
+          result += 'DNSSec/'
+        }
+        if (detectionsData.dohSupport) {
+          result += 'DoH/'
+        }
+        if (detectionsData.dotSupport) {
+          result += 'Dot/'
+        }
+        result = result.substr(0, result.length - 1)
+        if (!result) {
+          result = '-'
+        }
+        return result
+      }
     }
   },
   methods: {
@@ -101,8 +133,21 @@ export default {
         })
         L.marker([this.chartData.latitude, this.chartData.longitude], { icon: myIcon }).addTo(this.myChart)
       }
+    },
+    queryDetection () {
+      get(this.entityDetectionsIpUrl, this.queryParams).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+          this.detectionsData = response.data.result
+        }
+      })
     }
   },
+  mounted () {
+    this.$nextTick(() => {
+      this.queryDetection()
+    })
+  },
   watch: {
     chartData: {
       deep: true,

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -12,6 +12,41 @@
       </div>
     </div>
   </div>
+  <div class="overview-item" v-if="entityData.dnsServerRole">
+    <div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
+        <div class="row__content">{{$_.get(entityData, 'dnsServerRole', '-')}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.mechanism')}}</div>
+        <div class="row__content">{{$_.get(entityData, 'dnsServerOrg', '-')}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.software')}}</div>
+        <div class="row__content">{{$_.get(entityData, 'dnsServerSoftware', '-')}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.system')}}</div>
+        <div class="row__content">{{$_.get(entityData, 'dnsServerOs', '-')}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.protocol')}}</div>
+        <div class="row__content">{{detectionIpSupporting(entityData)}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.queryRate')}}</div>
+        <div class="row__contents">
+          <div class="row__content">
+            <div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
+            <!-- 曲线-->
+            <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.traffic')}}</div>
     <div class="overview__content">
@@ -202,6 +237,8 @@ export default {
       securityUrl: api.entityIpDetailSecurity,
       relatedServerDomainUrl: api.entityIpRelatedServerDomain,
       relatedServerAppUrl: api.entityIpRelatedServerApp,
+      entityDetectionsIpUrl: api.entityDetectionsIp,
+      entityDetectionsIpQueryRateUrl: api.entityDetectionsIpQueryRate,
       listMode: 'list',
       chartData: null,
       singleValues: {
@@ -269,6 +306,25 @@ export default {
           return '-'
         }
       }
+    },
+    detectionIpSupporting () {
+      return function (entityData) {
+        let result = ''
+        if (entityData.dnssecSupport) {
+          result += 'DNSSec/'
+        }
+        if (entityData.dohSupport) {
+          result += 'DoH/'
+        }
+        if (entityData.dotSupport) {
+          result += 'Dot'
+        }
+        result = result.substr(0, result.length - 1)
+        if (!result) {
+          result = '-'
+        }
+        return result
+      }
     }
   },
   methods: {

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -20,6 +20,7 @@ export default {
         alertNum: 0,
         chartOptionSent: null,
         chartOptionReceived: null,
+        chartDetectionQueryRate: null,
         chartOption: null,
         sentChart: null,
         receivedChart: null
@@ -231,6 +232,52 @@ export default {
       })
     },
 
+    queryDnsServerInfo () {
+      get(this.entityDetectionsIpUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.entityData.dnsServerRole = response.data.result.dnsServerRole
+          this.entityData.dnsServerOrg = response.data.result.dnsServerOrg
+          this.entityData.dnsServerSoftware = response.data.result.dnsServerSoftware
+          this.entityData.dnsServerOs = response.data.result.dnsServerOs
+          this.entityData.dohSupport = response.data.result.dohSupport
+          this.entityData.dotSupport = response.data.result.dotSupport
+          this.entityData.dnssecSupport = response.data.result.dnssecSupport
+        }
+      })
+    },
+
+    queryDnsServerInfoRate () {
+      this.detectionChart = echarts.init(document.getElementById(`entityDnsServerInfo${this.entityName}`))
+      get(this.entityDetectionsIpQueryRateUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200 && response.data.result && response.data.result.length > 0) {
+          response.data.result.forEach(t => {
+            this.entityData.queryRate = _.nth(t.values, -3)[1]
+            this.chartDetectionQueryRate = {
+              ...this.chartOption,
+              series: [
+                {
+                  name: this.$t('entities.sentThroughput'),
+                  type: 'line',
+                  legendHoverLink: false,
+                  itemStyle: {
+                    normal: {
+                      lineStyle: {
+                        width: 1
+                      }
+                    }
+                  },
+                  color: '#69b072',
+                  data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+                  showSymbol: false
+                }
+              ]
+            }
+          })
+          this.detectionChart.setOption(this.chartDetectionQueryRate)
+        }
+      })
+    },
+
     queryEntityDetail () {
       this.queryEntityDetailTraffic()
       this.queryEntityDetailPerformance()
@@ -238,6 +285,15 @@ export default {
       this.queryEntityDetailNetworkQuantity()
       this.queryEntityDetailLinkOutUrl()
       this.queryEntityDetailLinkInUrl()
+      if (this.entity.entityType === 'ip') {
+        this.queryDnsServerInfo()
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (!this.entityData.dnsServerRole) return
+            this.queryDnsServerInfoRate()
+          }, 200)
+        })
+      }
     }
   },
   setup () {