CN-257 Entity Explorer--接口对接

2021-12-31 10:40:37 +08:00
parent da27149185
commit 21018274d5
7 changed files with 288 additions and 19 deletions
--- a/src/assets/css/components/views/entityExplorer/entityList/card.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/card.scss
@@ -93,7 +93,7 @@
    }
    .body__drawing-box {
      position: relative;
-      height: 100px;
+      height: 60px;
      .chart__loading {
        top: 0;
        height: 100%;
@@ -102,7 +102,7 @@
    .body__drawing {
      position: absolute;
      padding: 10px 30px;
-      height: 100px;
+      height: 60px;
      width: 100%;
    }

--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -27,7 +27,17 @@ export const api = {
  ipThroughput: '/interface/entity/ip/detail/throughput',
  domainThroughput: '/interface/entity/domain/detail/throughput',
  appThroughput: '/interface/entity/app/detail/throughput',
-  filterTop: '/interface/entity/filter/top'
+  filterTop: '/interface/entity/filter/top',
+  entityTotal: '/interface/entity/index/total',
+  entityNew: '/interface/entity/index/new',
+  entityActive: '/interface/entity/index/active',
+  entityTraffic: '/interface/entity/list/traffic',
+  entityAlertNum: '/interface/entity/list/alertNum',
+  entitySecurityNum: '/interface/entity/list/detectionNum',
+  ipBytes: '/interface/entity/detail/ip/bytes',
+  domainBytes: '/interface/entity/detail/domain/bytes',
+  appBytes: '/interface/entity/detail/app/bytes'
+
 }

 /* panel */
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -32,57 +32,57 @@
        <el-divider direction="vertical"></el-divider>
        <div class="entity-overview">
          <div class="overview-left">
-            <span>86</span>
+            <span>{{entityAppTotal}}</span>
            <span>APP</span>
          </div>
          <div class="overview-right">
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
-              <div class="right-value">51</div>
+              <div class="right-value">{{entityAppNew}}</div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
-              <div class="right-value">56</div>
+              <div class="right-value">{{entityAppActive}}</div>
            </div>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="entity-overview">
          <div class="overview-left">
-            <span>186</span>
+            <span>{{entityDomainTotal}}</span>
            <span>DOMAIN</span>
          </div>
          <div class="overview-right">
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
-              <div class="right-value">40</div>
+              <div class="right-value">{{entityDomainNew}}</div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
-              <div class="right-value">18</div>
+              <div class="right-value">{{entityDomainActive}}</div>
            </div>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="entity-overview">
          <div class="overview-left">
-            <span>861</span>
+            <span>{{entityIpTotal}}</span>
            <span>IP</span>
          </div>
          <div class="overview-right">
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
-              <div class="right-value">99</div>
+              <div class="right-value">{{entityIpNew}}</div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
-              <div class="right-value">37</div>
+              <div class="right-value">{{entityIpActive}}</div>
            </div>
          </div>
        </div>
@@ -99,6 +99,8 @@ import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 import EntityFilter from '@/views/entityExplorer/EntityFilter'
 import EntityList from '@/views/entityExplorer/entityList/EntityList'
 import { entityType, entityFilterType } from '@/utils/constants'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'

 export default {
  name: 'entity-explorer',
@@ -115,6 +117,18 @@ export default {
      listMode: 'list', // entity列表的模式，list|block
      timeFilter: {},

+      entityAppTotal: '-',
+      entityAppNew: '-',
+      entityAppActive: '-',
+
+      entityDomainTotal: '-',
+      entityDomainNew: '-',
+      entityDomainActive: '-',
+
+      entityIpTotal: '-',
+      entityIpNew: '-',
+      entityIpActive: '-',
+
      filterData: [
        {
          type: 'ip',
@@ -382,7 +396,62 @@ export default {
    },
    queryList () {

+    },
+
+    getEntityIndexData () {
+      // Total
+      get(api.entityTotal, { entityType: 'app' }).then(response => {
+        if (response.code === 200) {
+          this.entityAppTotal = response.data.result
+        }
+      }),
+      get(api.entityTotal, { entityType: 'domain' }).then(response => {
+        if (response.code === 200) {
+          this.entityDomainTotal = response.data.result
+        }
+      }),
+      get(api.entityTotal, { entityType: 'ip' }).then(response => {
+        if (response.code === 200) {
+          this.entityIpTotal = response.data.result
+        }
+      }),
+      // New
+      get(api.entityNew, { entityType: 'app' }).then(response => {
+        if (response.code === 200) {
+          this.entityAppNew = response.data.result
+        }
+      }),
+      get(api.entityNew, { entityType: 'domain' }).then(response => {
+        if (response.code === 200) {
+          this.entityDomainNew = response.data.result
+        }
+      }),
+      get(api.entityNew, { entityType: 'ip' }).then(response => {
+        if (response.code === 200) {
+          this.entityIpNew = response.data.result
+        }
+      })
+      // Active
+      get(api.entityActive, { entityType: 'app' }).then(response => {
+        if (response.code === 200) {
+          this.entityAppActive = response.data.result
+        }
+      }),
+      get(api.entityActive, { entityType: 'domain' }).then(response => {
+        if (response.code === 200) {
+          this.entityDomainActive = response.data.result
+        }
+      }),
+      get(api.entityActive, { entityType: 'ip' }).then(response => {
+        if (response.code === 200) {
+          this.entityIpActive = response.data.result
+        }
+      })
    }
+
+  },
+  mounted () {
+    this.getEntityIndexData()
  }
 }
 </script>
--- a/src/views/entityExplorer/entityList/Card.vue
+++ b/src/views/entityExplorer/entityList/Card.vue
@@ -115,7 +115,7 @@
        </div>
        <!-- 曲线-->
        <div class="body__drawing-box">
-          <div class="body__drawing" :id="`entityListChart${entityData.appId}`"></div>
+                <div class="body__drawing" :id="`entityListChart${entityData.appName}`"></div>
        </div>
        <div class="body__statics">
          <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i>{{entityData.bytesReceivedRate || 0}} bps</div>
--- a/src/views/entityExplorer/entityList/EntityList.vue
+++ b/src/views/entityExplorer/entityList/EntityList.vue
@@ -11,6 +11,8 @@
          <entity-row
              v-for="(data, index) in listData"
              :entity="data"
+              :listMode="listMode"
+              :timeFilter="timeFilter"
              :key="index"
              :ref="`entityRow${index}`"
              :index="index"
@@ -24,6 +26,8 @@
          <entity-card
              v-for="(data, index) in listData"
              :entity="data"
+              :listMode="listMode"
+              :timeFilter="timeFilter"
              :key="index"
          ></entity-card>
        </div>
@@ -62,7 +66,8 @@ export default {
    from: String,
    pageObj: Object,
    loading: Boolean,
-    listMode: String
+    listMode: String,
+    timeFilter: Object
  },
  components: {
    'entity-card': Card,
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -106,7 +106,8 @@ import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/Det
 export default {
  name: 'Row',
  props: {
-    index: Number
+    index: Number,
+    timeFilter: Object
  },
  components: {
    DetailOverview
--- a/src/views/entityExplorer/entityList/entityListMixin.js
+++ b/src/views/entityExplorer/entityList/entityListMixin.js
@@ -1,12 +1,20 @@
 import _ from 'lodash'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import * as echarts from 'echarts'
+import { entityListLineOption } from '@/components/charts/chart-options'
+import { unitTypes } from '@/utils/constants'

 export default {
  props: {
-    entity: Object
+    entity: Object,
+    timeFilter: {},
+    listMode: ''
  },
  data () {
    return {
-      entityData: {}
+      entityData: {},
+      chartOption: null
    }
  },
  computed: {
@@ -28,6 +36,82 @@ export default {
        default: break
      }
      return className
+    },
+    entityName () {
+      let name
+      switch (this.entityData.entityType) {
+        case ('ip'): {
+          name = this.entity.ip
+          break
+        }
+        case ('domain'): {
+          name = this.entity.domainName
+          break
+        }
+        case ('app'): {
+          name = this.entity.appName
+          break
+        }
+        default: break
+      }
+      return name
+    },
+    queryUrl () {
+      let url
+      switch (this.entityData.entityType) {
+        case ('ip'): {
+          url = api.ipBytes
+          break
+        }
+        case ('domain'): {
+          url = api.domainBytes
+          break
+        }
+        case ('app'): {
+          url = api.appBytes
+          break
+        }
+        default: break
+      }
+      return url
+    },
+    queryParams () {
+      let params
+      const now = new Date()
+      switch (this.entityData.entityType) {
+        case ('ip'): {
+          params = {
+            queryTimeRange: {
+              startTime: Math.floor(now.getTime() / 1000 - 3600),
+              endTime: Math.floor(now.getTime() / 1000)
+            },
+            ip: this.entityData.ip
+          }
+          break
+        }
+        case ('domain'): {
+          params = {
+            queryTimeRange: {
+              startTime: Math.floor(now.getTime() / 1000 - 3600),
+              endTime: Math.floor(now.getTime() / 1000)
+            },
+            domain: this.entityData.domainName
+          }
+          break
+        }
+        case ('app'): {
+          params = {
+            queryTimeRange: {
+              startTime: Math.floor(now.getTime() / 1000 - 3600),
+              endTime: Math.floor(now.getTime() / 1000)
+            },
+            appName: this.entityData.appName
+          }
+          break
+        }
+        default: break
+      }
+      return params
    }
  },
  methods: {
@@ -35,13 +119,110 @@ export default {

    },
    queryTraffic () {
-
+      get(api.entityTraffic, { entityType: this.entityData.entityType, name: this.entityName }).then(response => {
+        if (response.code === 200) {
+          response.data.result.forEach(t => {
+            if (t.name === 'bytes_sent_rate') {
+              this.entityData.bytesSentRate = t.value
+            }
+            if (t.name === 'bytes_received_rate') {
+              this.entityData.bytesReceivedRate = t.value
+            }
+          })
+        }
+      })
    },
    querySecurity () {
-
+      get(api.entitySecurityNum, { entityType: this.entityData.entityType, name: this.entityName }).then(response => {
+        if (response.code === 200) {
+          this.entityData.securityCount = response.data.result[0].count
+        }
+      })
    },
    queryAlert () {
+      get(api.entityAlertNum, { entityType: this.entityData.entityType, name: this.entityName }).then(response => {
+        if (response.code === 200) {
+          this.entityData.securityCount = response.data.result[0].value
+        }
+      })
+    },

+    queryTrafficLine () {
+      let chartOption
+      this.chartOption = this.$_.cloneDeep(entityListLineOption)
+      get(this.queryUrl, this.queryParams).then(response => {
+        if (response.code === 200) {
+          const seriesTemplate = this.chartOption.series[0]
+          const series = response.data.result.map((r, i) => {
+            if (r.legend === 'bytes_sent_rate') {
+              return {
+                ...seriesTemplate,
+                name: this.$t('entities.sentThroughput'), // 'bytes_sent_rate',//legendMapping[`ip_${r.legend}`],
+                data: r.values.map(v => [Number(v[0]), Number(v[1]), unitTypes.byte]),
+                itemStyle: {
+                  normal: {
+                    color: '#69b072',
+                    lineStyle: {
+                      width: 1.5
+                    }
+                  }
+                },
+                smooth: true,
+                areaStyle: {
+                  opacity: 0.8,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#f0fff8'
+                    },
+                    {
+                      offset: 1,
+                      color: '#f0fff8'
+                    }
+                  ])
+                }
+              }
+            } else if (r.legend === 'bytes_received_rate') {
+              return {
+                ...seriesTemplate,
+                name: this.$t('entities.receivedThroughput'), // legendMapping[`ip_${r.legend}`],
+                data: r.values.map(v => [Number(v[0]), Number(v[1]), unitTypes.byte]),
+                itemStyle: {
+                  normal: {
+                    color: '#7899c6',
+                    lineStyle: {
+                      width: 1.5
+                    }
+                  }
+                },
+                smooth: true,
+                areaStyle: {
+                  opacity: 0.8,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#f0f4ff'
+                    },
+                    {
+                      offset: 1,
+                      color: '#f0f4ff'
+                    }
+                  ])
+                }
+              }
+            }
+          })
+          chartOption = {
+            ...this.chartOption,
+            series
+          }
+        }
+      }).finally(() => {
+        this.$nextTick(() => {
+          const myChart = echarts.init(document.getElementById(`entityListChart${this.entityName}`))
+          myChart.setOption(chartOption)
+        })
+      })
    }
  },
  mounted () {
@@ -49,5 +230,8 @@ export default {
    setTimeout(() => { this.queryTraffic() })
    setTimeout(() => { this.querySecurity() })
    setTimeout(() => { this.queryAlert() })
+    if (this.listMode === 'block') {
+      setTimeout(() => { this.queryTrafficLine() })
+    }
  }
 }