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

2022-04-01 14:06:09 +08:00
parent 7a98a66085
commit 203985b556
6 changed files with 177 additions and 13 deletions
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/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;
--- a/src/assets/css/components/views/charts/ipBasicInfo.scss
+++ b/src/assets/css/components/views/charts/ipBasicInfo.scss
@@ -1,17 +1,19 @@
 .cn-chart__ip-basic {
  display: flex;
-  .el-descriptions {
-    padding-top: 30px;
+  padding: 30px  60px 0 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;
--- a/src/utils/api.js
+++ b/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',
--- a/src/views/charts/charts/IpBasicInfo.vue
+++ b/src/views/charts/charts/IpBasicInfo.vue
@@ -1,12 +1,21 @@
 <template>
  <div class="cn-chart__ip-basic">
-    <el-descriptions :column="1">
-      <el-descriptions-item label="ASN:">{{(chartData && chartData.asn) || '-'}}</el-descriptions-item>
-      <el-descriptions-item label="AS Org:">{{(chartData && chartData.asOrganization) || '-'}}</el-descriptions-item>
-      <el-descriptions-item :label="$t('entities.asSubnet') + ':'">{{(chartData && chartData.asSubnet) || '-'}}</el-descriptions-item>
-      <el-descriptions-item label="ISP:">{{(chartData && chartData.isp) || '-'}}</el-descriptions-item>
-      <el-descriptions-item label="DNS PTR:">{{(chartData && chartData.dnsPtr) || '-'}}</el-descriptions-item>
-    </el-descriptions>
+    <div class="cn-chart__ip-basic-info">
+      <el-descriptions :column="1">
+        <el-descriptions-item label="ASN:">{{(chartData && chartData.asn) || '-'}}</el-descriptions-item>
+        <el-descriptions-item label="AS Org:">{{(chartData && chartData.asOrganization) || '-'}}</el-descriptions-item>
+        <el-descriptions-item :label="$t('entities.asSubnet') + ':'">{{(chartData && chartData.asSubnet) || '-'}}</el-descriptions-item>
+        <el-descriptions-item label="ISP:">{{(chartData && chartData.isp) || '-'}}</el-descriptions-item>
+        <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,
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/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: {
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/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 () {