CN-997: 实体详情--数字证书tab开发

2023-05-09 09:41:43 +08:00
parent b65fd919dc
commit 1d36b08517
5 changed files with 262 additions and 3 deletions
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -80,5 +80,6 @@
@import 'views/administration/Appearance.scss';

@import 'views/setting/knowledgeBase';
-@import "@/assets/css/components/views/charts2/entityDetailLine.scss";
-@import "@/assets/css/components/views/charts2/entityDetailTabs.scss";
+@import "@/assets/css/components/views/charts2/entityDetailLine";
+@import "@/assets/css/components/views/charts2/entityDetailTabs";
+@import "@/assets/css/components/views/charts2/digitalCertificate";
--- a/src/assets/css/components/views/charts2/digitalCertificate.scss
+++ b/src/assets/css/components/views/charts2/digitalCertificate.scss
@@ -0,0 +1,70 @@
+.digital-certificate {
+  $font-family: NotoSansSChineseRegular;
+
+  .digital-certificate-header {
+    display: flex;
+    align-items: center;
+
+    .digital-certificate-header__icon {
+      width: 4px;
+      height: 16px;
+      background: #38ACD2;
+      border-radius: 1px;
+      margin-right: 6px;
+    }
+
+    .digital-certificate-header-name {
+      font-family: PingFangSC-Semibold;
+      font-size: 14px;
+      color: #575757;
+      font-weight: 600;
+    }
+  }
+
+  .digital-certificate-body {
+    height: auto;
+    min-height: 262px;
+    padding: 20px;
+    background: rgba(113, 113, 113, 0.04);
+    border: 1px solid #E2E5ECFF;
+    border-radius: 4px;
+
+    .digital-certificate-body-tags {
+      display: flex;
+      margin-bottom: 20px;
+    }
+
+    .certificate-list-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .certificate-list-item {
+      width: 50%;
+      display: flex;
+      margin-bottom: 10px;
+
+      .certificate-list-item__label {
+        width: 176px;
+        font-family: $font-family;
+        font-size: 14px;
+        color: #717171;
+        font-weight: 400;
+      }
+
+      .certificate-list-item__value, .certificate-list-item__value1 {
+        width: calc(100% - 176px - 75px);
+        font-family: $font-family;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+      }
+
+      .certificate-list-item__value1 {
+        padding-bottom: 2px;
+        border-bottom: 1px #353636 solid;
+        word-break: break-word;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/entityExplorer/entity-detail.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-detail.scss
@@ -50,6 +50,18 @@
      color: $positive-color;
      background-color: $positive-light-color;
    }
+    &.entity-tag--level-two-negative-no-background {
+      border-color: $negative-color;
+      color: $negative-color;
+      padding: 8px 10px;
+      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    }
+    &.entity-tag--level-two-positive-no-background {
+      border-color: $positive-color;
+      color: $positive-color;
+      padding: 8px 10px;
+      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    }
  }
 }
 /*
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -13,6 +13,7 @@
        </template>
        <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation"></information-aggregation>
        <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.domainNameResolution"></domain-name-resolution>
+        <digital-certificate v-else-if="tab.name === entityDetailTabsName.digitalCertificate" />
        <security-event v-else-if="tab.name === entityDetailTabsName.securityEvent" :timeFilter="timeFilter" />
        <performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent" />
        <open-port v-else-if="tab.name === entityDetailTabsName.openPort"></open-port>
@@ -31,6 +32,7 @@ import DomainNameResolution from '@/views/charts2/charts/entityDetail/tabs/Domai
 import SecurityEvent from '@/views/charts2/charts/entityDetail/tabs/SecurityEvent'
 import PerformanceEvent from '@/views/charts2/charts/entityDetail/tabs/PerformanceEvent'
 import OpenPort from '@/views/charts2/charts/entityDetail/tabs/OpenPort'
+import DigitalCertificate from '@/views/charts2/charts/entityDetail/tabs/DigitalCertificate'

 export default {
  name: 'EntityDetailTabs',
@@ -40,7 +42,8 @@ export default {
    SecurityEvent,
    InformationAggregation,
    DomainNameResolution,
-    OpenPort
+    OpenPort,
+    DigitalCertificate
  },
  data () {
    return {
--- a/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <chart-error v-if="showError" style="margin-top: 18px;margin-left: 8px;"></chart-error>
+    <chart-no-data v-if="isNoData && !showError"></chart-no-data>
+
+    <div class="digital-certificate" v-if="!showError && !isNoData">
+      <div class="digital-certificate-header">
+        <div class="digital-certificate-header__icon"></div>
+        <div class="digital-certificate-header-name">
+          {{ this.$t('entity.detail.relevantCertificates') }}
+          <span>（{{ infoList.length }}）</span>
+        </div>
+      </div>
+
+      <div v-for="(item, index) in infoList" :key="index" style="margin-top: 20px">
+        <div class="digital-certificate-body">
+          <div class="digital-certificate-body-tags">
+            <div :class="item.flag === '0' ? 'entity-tag entity-tag--level-two-negative-no-background' : 'entity-tag entity-tag--level-two-positive-no-background'">{{ this.$t(getTrusted(item.flag)) }}</div>
+          </div>
+
+          <div class="digital-certificate-body-content">
+            <div class="certificate-list-list">
+              <div v-for="(item1, index1) in item.data" :key="index1" class="certificate-list-item">
+                <div class="certificate-list-item__label">{{ item1.label }}</div>
+                <div v-if="item1.type" :class="'entity-tag entity-tag--small entity-tag--level-one-' + item1.type">{{ item1.value }}</div>
+                <div v-else class="certificate-list-item__value">
+                  {{ item1.value }}
+                  <span v-if="item1.value1" class="certificate-list-item__value1">{{ item1.value1 }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { api } from '@/utils/api'
+import chartMixin from '@/views/charts2/chart-mixin'
+import ChartError from '@/components/common/Error'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { useRoute } from 'vue-router'
+
+export default {
+  name: 'DigitalCertificate',
+  components: { ChartNoData, ChartError },
+  data () {
+    return {
+      showError: false,
+      isNoData: false,
+      infoList: []
+    }
+  },
+  mixins: [chartMixin],
+  mounted () {
+    this.initData()
+  },
+  setup () {
+    const { query } = useRoute()
+    const entityType = query.entityType
+    const entityName = query.entityName
+
+    return {
+      entityType,
+      entityName
+    }
+  },
+  methods: {
+    initData () {
+      // 入参不明确
+      const params = {
+        type: this.entityType, // 实体类型
+        name: this.entityName // 实体名称
+      }
+
+      this.toggleLoading(true)
+      // todo 接口、数据不明确，故没有模拟mock数据，后续此处需修改
+      axios.get(api.entity.performanceEvent, { params: params }).then(response => {
+        const res = response.data
+
+        if (res.code === 200) {
+          this.isNoData = res.data.result.length === 0
+          this.showError = false
+          if (!this.isNoData) {
+            // const data = res.data.result
+
+            this.infoList = [
+              {
+                name: '[SHA1]4ad21f8b6f10a8734f2cbcaf18f88971c59d692e',
+                flag: '0', // 0证书不可信，1证书可信
+                data: [
+                  { label: this.$t('entity.detail.certificateThumbprint'), value: '[SHA1]4ad21f8b6f10a8734f2cbcaf18f88971c59d692e' },
+                  { label: this.$t('entity.detail.expirationTime'), value: '2029-06-02 03:14:19' },
+                  { label: this.$t('entity.detail.IssueTime'), value: '2023-06-02 03:14:19' },
+                  { label: this.$t('entity.detail.userName'), value: 'SSL Certificate' },
+                  { label: this.$t('entity.detail.state'), value: '未过期', type: 'positive' },
+                  { label: this.$t('entity.detail.userOrganization'), value: 'My Company' },
+                  { label: this.$t('entity.detail.userCountryOrRegion'), value: 'SA My State My City' },
+                  { label: this.$t('entity.detail.issuerCountryOrRegion'), value: 'SA My State My City' },
+                  { label: this.$t('entity.detail.issuerName'), value: 'SSL Certificate' },
+                  { label: this.$t('entity.detail.serialNumber'), value: '6297ba8b' },
+                  { label: this.$t('entity.detail.issuerOrganization'), value: 'My Company' },
+                  { label: this.$t('entity.detail.authorizedDomain'), value: 'baidu.com' },
+                  { label: this.$t('entity.detail.use'), value: 'SSL clientSSL serverlNetscape SSL serverlS/MIME signing S/MIME encryption CRL signing Any Purpose Any Purpose CAOCSP helper' }
+                ]
+              },
+              {
+                name: '[SHA1234]4ad21f8b6f10a8734f2cbcaf18f88971c59d692e',
+                flag: '1', // 0证书不可信，1证书可信
+                data: [
+                  { label: this.$t('entity.detail.certificateThumbprint'), value: '[SHA1234]4ad21f8b6f10a8734f2cbcaf18f88971c59d692e' },
+                  { label: this.$t('entity.detail.expirationTime'), value: '2029-06-02 03:14:19' },
+                  { label: this.$t('entity.detail.IssueTime'), value: '2023-06-02 03:14:19' },
+                  { label: this.$t('entity.detail.userName'), value: 'SSL Certificate' },
+                  { label: this.$t('entity.detail.state'), value: '已过期', type: 'negative' },
+                  { label: this.$t('entity.detail.userOrganization'), value: 'My Company' },
+                  { label: this.$t('entity.detail.userCountryOrRegion'), value: 'SA My State My City' },
+                  { label: this.$t('entity.detail.issuerCountryOrRegion'), value: 'SA My State My City' },
+                  { label: this.$t('entity.detail.issuerName'), value: 'SSL Certificate' },
+                  { label: this.$t('entity.detail.serialNumber'), value: '6297ba8b' },
+                  { label: this.$t('entity.detail.issuerOrganization'), value: 'My Company' },
+                  { label: this.$t('entity.detail.authorizedDomain'), value: 'baidu.com' },
+                  { label: this.$t('entity.detail.use'), value: 'SSL clientSSL serverlNetscape SSL serverlS/MIME signing S/MIME encryption CRL signing Any Purpose Any Purpose CAOCSP helper' }
+                ]
+              }
+            ]
+
+            // 将证书指纹截取两部分，后段添加下划线，用for循环方便用break终止循环
+            for (let i = 0; i < this.infoList.length; i++) {
+              for (let j = 0; j < this.infoList[i].data.length; j++) {
+                const item = this.infoList[i].data[j]
+                if (j === 0) {
+                  const str = item.value
+                  item.value = str.substring(0, str.indexOf(']') + 1)
+                  item.value1 = str.substring(str.indexOf(']') + 1)
+                  break
+                }
+              }
+            }
+          }
+        } else {
+          this.httpError(res)
+        }
+      }).catch(e => {
+        console.error(e)
+        this.httpError(e)
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
+    },
+    /** 判断证书是否可信，后续根据实际字段进行取舍 */
+    getTrusted (flag) {
+      switch (flag) {
+        case '0': {
+          return 'entity.detail.certificateIsNotTrusted'
+        }
+        case '1': {
+          return 'entity.detail.certificateIsTrusted'
+        }
+      }
+    },
+    httpError (e) {
+      this.isNoData = false
+      this.showError = true
+      this.errorMsg = this.errorMsgHandler(e)
+    }
+  }
+}
+</script>