CN-651 feat: Dashboard - npm - 近期事件图开发

src/assets/css/components/index.scss

@@ -55,4 +55,8 @@
 @import './views/charts2/npmAppCategoryScore';
 @import './views/charts2/npmTabs';
 @import './views/charts2/npmMap';
+@import './views/charts2/npmLine';
+@import './views/charts2/npmEventsHeader';
+@import './views/charts2/npmEventsByType';
+@import './views/charts2/npmRecentEvents';
 //@import '../chart';

src/assets/css/components/views/charts2/npmAppCategoryScore.scss

@@ -69,7 +69,7 @@
     height: 100%;
     border: 1px solid #E2E5EC;
     border-radius: 4px;
-    .app-table {
+    .app-table.el-table {
       .el-table__header-wrapper {
         tr th {
           padding: 5px 0;

src/assets/css/components/views/charts2/npmEventsByType.scss

@@ -0,0 +1,74 @@
+.npm-event {
+  height: calc(100% - 24px);
+  width: 100%;
+  .npm-event-title {
+    font-family: NotoSansHans-Medium;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+  .npm-event-pie {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    .npm-event-pie-legends {
+      display: flex;
+      width: 40%;
+      justify-content: space-around;
+      .npm-event-pie-legend {
+        .npm-event-pie-legend-title {
+          font-size: 12px;
+          color: #575757;
+          line-height: 12px;
+          font-weight: 400;
+          margin-bottom: 15px;
+        }
+        .npm-event-pie-legend-type {
+          font-size: 12px;
+          color: #353636;
+          line-height: 12px;
+          font-weight: 400;
+          display: flex;
+          align-items: center;
+          margin-bottom: 11px;
+          .npm-event-pie-legend-type-icon {
+            width: 8px;
+            height: 8px;
+            margin-right: 5px;
+          }
+          .critical {
+            background: rgb(226,97,84);
+          }
+          .high {
+            background: rgb(228,142,77);
+          }
+          .info {
+            background: rgb(136,175,101);
+          }
+          .medium {
+            background: rgb(231,179,78);
+          }
+          .low {
+            background: rgb(218,199,75);
+          }
+        }
+        .npm-event-pie-legend-total {
+          font-family: NotoSansHans-Medium;
+          font-size: 12px;
+          color: #353636;
+          line-height: 12px;
+          font-weight: 540;
+          margin-bottom: 11px;
+        }
+      }
+    }
+    .chart-drawing {
+      height: 100%;
+      width: 50%;
+    }
+  }
+}

src/assets/css/components/views/charts2/npmEventsHeader.scss

@@ -0,0 +1,56 @@
+.npm-header {
+  display: flex;
+  height: 100%;
+  .npm-header-body:nth-of-type(5) {
+    margin-right: 0;
+  }
+  .npm-header-body {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    background: rgba(113,113,113,0.06);
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    padding: 0 14px 0 16px;
+    margin-right: 12px;
+    align-items: center;
+    flex: 1;
+    .npm-header-body-severity {
+      display: flex;
+      align-items: center;
+      .npm-header-body-severity-icon {
+        border-radius: 6px;
+        width: 12px;
+        height: 12px;
+        margin-right: 10px;
+      }
+      .critical {
+        background: rgb(226,97,84);
+      }
+      .high {
+        background: rgb(228,142,77);
+      }
+      .info {
+        background: rgb(136,175,101);
+      }
+      .medium {
+        background: rgb(231,179,78);
+      }
+      .low {
+        background: rgb(218,199,75);
+      }
+      .npm-header-body-severity-value {
+        font-family: NotoSansHans-Black;
+        font-size: 12px;
+        color: #575757;
+        font-weight: 900;
+      }
+    }
+    .npm-header-body-total {
+      font-family: Helvetica-Bold;
+      font-size: 16px;
+      color: #353636;
+      font-weight: 700;
+    }
+  }
+}

src/assets/css/components/views/charts2/npmLine.scss

@@ -0,0 +1,59 @@
+.npm-line {
+  height: 100%;
+  width: 100%;
+  border: 1px solid #f0f0f0;
+  position: relative;
+  .npm-line-header {
+    position: absolute;
+    display: flex;
+    top: 21px;
+    right: 23px;
+    z-index: 1;
+    .npm-line-header-right {
+      display: flex;
+      margin-right: 10px;
+      align-items: center;
+    }
+    .npm-line-header-icon {
+      border-radius: 3px;
+      width: 16px;
+      height: 6px;
+      margin-right: 4px;
+    }
+    .npm-line-header-icon.icon0 {
+      background: #749F4D;
+    }
+    .npm-line-header-icon.icon1 {
+      background: #98709B;
+    }
+    .npm-line-header-icon.icon2 {
+      background: #E5A219;
+    }
+    .npm-line-header-value {
+      font-size: 12px;
+      color: #717171;
+      line-height: 12px;
+      font-weight: 400;
+    }
+    .npm-line-header-value.active {
+      color: #717171;
+      font-weight: 600;
+    }
+  }
+  .chart-drawing {
+    height: 100%;
+    width: 100%;
+    .echarts-tooltip.echarts-tooltip-dark {
+      .cn-chart-tooltip {
+        display: flex;
+        justify-content: space-between;
+        .cn-chart-tooltip-value.cn-chart-tooltip__color {
+          font-size: 12px;
+          color: #353636;
+          line-height: 21px;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}

src/assets/css/components/views/charts2/npmRecentEvents.scss

@@ -0,0 +1,79 @@
+.npm-recent {
+  height: calc(100% - 24px);
+  .npm-recent-title {
+    font-family: NotoSansHans-Medium;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+  .npm-recent-table {
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    .el-table__header-wrapper {
+      tr th {
+        padding: 5px 0;
+        .data-column__span {
+          font-family: NotoSansHans-Medium;
+          font-size: 12px;
+          color: #353636;
+          font-weight: 500;
+        }
+      }
+    }
+    .el-table__body-wrapper.is-scrolling-none {
+      tr td {
+        padding: 7px 0;
+      }
+    }
+  }
+  .data-recent-table{
+    display: flex !important;
+    height: 20px;
+    line-height: 20px;
+    .data-recent-table-severity {
+      font-family: NotoSansHans-Medium;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 4px;
+      padding: 0 6px;
+    }
+    .critical {
+      color: #E26154;
+      background: rgba(226,97,84, .18);
+    }
+    .high {
+      color: #E48E4D;
+      background: rgba(228,142,77, .18);
+    }
+    .info {
+      color: #88AF65;
+      background: rgba(136,175,101, .18);
+    }
+    .medium {
+      color: #E7B34E;
+      background: rgba(231,179,78, .18);
+    }
+    .low {
+      color: #DAC74B;
+      background: rgba(218,199,75, .18);
+    }
+    .data-recent-table-entity {
+      font-size: 12px;
+      color: #046ECA;
+      font-weight: 400
+    }
+    .data-recent-table-eventType {
+      font-family: NotoSansHans-Medium;
+      font-size: 12px;
+      color: #046ECA;
+      font-weight: 500;
+      background: #EBF1F4;
+      border-radius: 4px;
+      padding: 0 6px;
+    }
+  }
+  .el-table--group::after,.el-table--border::after, .el-table::before {
+    height: 0px;
+  }
+}

src/utils/constants.js

@@ -216,6 +216,8 @@ export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8
 export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#9FBC1D', '#98709B']
 
 export const chartColor4 = ['#E5F6F6', '#F2F6EE', '#EBF7FC', '#FCF4EB', '#9FBC1D', '#F5F1F5']
+export const chartColor5 = ['#749F4D', '#98709B', '#E5A219']
+export const chartColor6 = ['#E26154', '#E48E4D', '#E7B34E', '#DAC74B', '#88AF65']
 
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',

src/views/charts2/Chart.vue

@@ -5,6 +5,7 @@
     <network-overview-line
         v-if="chart.type === typeMapping.networkOverview.line"
         :chart="chart"
+        :time-filter="timeFilter"
     ></network-overview-line>
     <network-overview-ddos-detection
         v-else-if="chart.type === typeMapping.networkOverview.ddosDetection"
@@ -42,6 +43,18 @@
         v-else-if="chart.type === typeMapping.npm.npmLine"
         :chart="chart"
     ></npm-line>
+    <npm-events-header
+        v-else-if="chart.type === typeMapping.npm.npmEventsHeader"
+        :chart="chart"
+    ></npm-events-header>
+    <npm-events-by-type
+        v-else-if="chart.type === typeMapping.npm.npmEventsByType"
+        :chart="chart"
+    ></npm-events-by-type>
+    <npm-recent-events
+        v-else-if="chart.type === typeMapping.npm.npmRecentEvents"
+        :chart="chart"
+    ></npm-recent-events>
   </div>
 </template>
 
@@ -59,9 +72,15 @@ import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
 import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore'
 import NpmMap from '@/views/charts2/charts/NpmMap'
 import NpmLine from '@/views/charts2/charts/NpmLine'
+import NpmEventsByType from '@/views/charts2/charts/NpmEventsByType'
+import NpmRecentEvents from '@/views/charts2/charts/NpmRecentEvents'
+import NpmEventsHeader from '@/views/charts2/charts/NpmEventsHeader'
 export default {
   name: 'Chart',
   components: {
+    NpmEventsHeader,
+    NpmRecentEvents,
+    NpmEventsByType,
     NpmLine,
     NpmMap,
     NpmAppCategoryScore,

src/views/charts2/chart-tools.js

@@ -9,8 +9,11 @@ export const typeMapping = {
   npm: {
     npmMap: 1,
     npmLine: 101,
+    npmEventsByType: 301,
     npmAppCategoryScore: 702,
     npmTabs: 704,
-    npmNetworkQuantity: 703
+    npmEventsHeader: 705,
+    npmNetworkQuantity: 703,
+    npmRecentEvents: 602
   }
 }

src/views/charts2/charts/NpmEventsByType.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="npm-event">
+    <div class="npm-event-title">{{$t('network.eventByType')}}</div>
+    <div class="npm-event-pie">
+      <div class="chart-drawing" id="chart"></div>
+      <div class="npm-event-pie-legends">
+        <div class="npm-event-pie-legend">
+          <div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div>
+          <template v-for="(legend, index) in chartData" :key="index">
+            <div class="npm-event-pie-legend-type">
+              <div class="npm-event-pie-legend-type-icon" :class="iconClass(legend)"></div>
+              <div>{{legend.severity}}</div>
+            </div>
+          </template>
+        </div>
+        <div class="npm-event-pie-legend">
+          <div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div>
+          <template v-for="(legend, index) in chartData" :key="index">
+            <div class="npm-event-pie-legend-total">{{legend.total}}</div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import * as echarts from 'echarts'
+import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
+
+export default {
+  name: 'NpmEventsByType',
+  setup () {
+    return {
+      myChart: shallowRef(null)
+    }
+  },
+  data () {
+    return {
+      chartData: [
+        { value: 1048, severity: 'Critical', total: 323 },
+        { value: 1315, severity: 'High', total: 178 },
+        { value: 5810, severity: 'Medium', total: 223 },
+        { value: 4184, severity: 'Low', total: 178 },
+        { value: 3100, severity: 'Info', total: 323 }
+      ],
+      timer: null
+    }
+  },
+  computed: {
+    iconClass () {
+      return function (row) {
+        let className
+        switch (row.severity) {
+          case ('Critical'): {
+            className = 'critical'
+            break
+          }
+          case ('High'): {
+            className = 'high'
+            break
+          }
+          case ('Info'): {
+            className = 'info'
+            break
+          }
+          case ('Medium'): {
+            className = 'medium'
+            break
+          }
+          case ('Low'): {
+            className = 'low'
+            break
+          }
+          default: break
+        }
+        return className
+      }
+    }
+  },
+  methods: {
+    init () {
+      const _this = this
+      const dom = document.getElementById('chart')
+      this.myChart = echarts.init(dom)
+      this.chartOption = pieChartOption3
+      this.chartOption.series[0].data = this.chartData
+      this.chartOption.series[0].label = {
+        show: true,
+        position: 'center',
+        fontFamily: 'NotoSansHans-Medium',
+        fontSize: 20,
+        fontWeight: 500,
+        formatter: function () {
+          let num = 0
+          _this.chartData.forEach(t => {
+            num += t.total
+          })
+          return num
+        }
+      }
+      this.myChart.on('mouseover', function (params) {
+        _this.chartOption.series[0].label.show = false
+        _this.myChart.setOption(_this.chartOption)
+      })
+      this.myChart.on('mouseout', function (params) {
+        _this.chartOption.series[0].label.show = true
+        _this.myChart.setOption(_this.chartOption)
+      })
+      this.myChart.setOption(this.chartOption)
+    },
+    resize () {
+      this.myChart.resize()
+    }
+  },
+  mounted () {
+    this.timer = setTimeout(() => {
+      this.init()
+    }, 100)
+    window.addEventListener('resize', this.resize)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+  }
+}
+</script>

src/views/charts2/charts/NpmEventsHeader.vue

@@ -0,0 +1,59 @@
+<template>
+ <div class="npm-header">
+  <div class="npm-header-body" v-for="(item, index) in chartData" :key="index">
+    <div class="npm-header-body-severity">
+      <div class="npm-header-body-severity-icon" :class="iconClass(item)"></div>
+      <div class="npm-header-body-severity-value">{{item.severity}}</div>
+    </div>
+    <div class="npm-header-body-total">{{item.total}}</div>
+  </div>
+ </div>
+</template>
+
+<script>
+export default {
+  name: 'NpmEventsHeader',
+  data () {
+    return {
+      chartData: [
+        { severity: 'Critical', total: 12 },
+        { severity: 'High', total: 32 },
+        { severity: 'Medium', total: 12 },
+        { severity: 'Low', total: 21 },
+        { severity: 'Info', total: 18 }
+      ]
+    }
+  },
+  computed: {
+    iconClass () {
+      return function (row) {
+        let className
+        switch (row.severity) {
+          case ('Critical'): {
+            className = 'critical'
+            break
+          }
+          case ('High'): {
+            className = 'high'
+            break
+          }
+          case ('Info'): {
+            className = 'info'
+            break
+          }
+          case ('Medium'): {
+            className = 'medium'
+            break
+          }
+          case ('Low'): {
+            className = 'low'
+            break
+          }
+          default: break
+        }
+        return className
+      }
+    }
+  }
+}
+</script>

src/views/charts2/charts/NpmRecentEvents.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="npm-recent">
+    <div class="npm-recent-title">{{ $t('network.recentEvents') }}</div>
+    <el-table
+        :id="`tabTable_${index}`"
+        :ref="`dataTable_${index}`"
+        :data="tableData"
+        class="npm-recent-table"
+        height="100%"
+    >
+      <template v-for="(item, index) in customTableTitles" :key="index">
+        <el-table-column class="data-column">
+          <template #header>
+            <span class="data-column__span">{{$t(item.label)}}</span>
+          </template>
+          <template  #default="scope" :column="item">
+            <div class="data-recent-table">
+              <template v-if="item.prop === 'severity'">
+                <span class="data-recent-table-severity" :class="iconClass(scope.row)">{{$t(scope.row[item.prop])}}</span>
+              </template>
+              <template v-else-if="item.prop === 'entity'">
+                <span class="data-recent-table-entity">{{$t(scope.row[item.prop])}}</span>
+              </template>
+              <template v-else-if="item.prop === 'eventType'">
+                <span class="data-recent-table-eventType">{{$t(scope.row[item.prop])}}</span>
+              </template>
+              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <span v-else>-</span>
+            </div>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NpmRecentEvents',
+  data () {
+    return {
+      tableData: [
+        {
+          severity: 'Critical',
+          entity: 'command adn control',
+          eventType: 'dns error'
+        }, {
+          severity: 'High',
+          entity: 'command adn control',
+          eventType: 'dns error'
+        }, {
+          severity: 'Critical',
+          entity: 'command adn control',
+          eventType: 'dns error'
+        }, {
+          severity: 'Medium',
+          entity: 'command adn control',
+          eventType: 'dns error'
+        }, {
+          severity: 'Low',
+          entity: 'command adn control',
+          eventType: 'dns error'
+        }, {
+          severity: 'Info',
+          entity: 'command adn control',
+          eventType: 'dns error'
+        }, {
+          severity: 'Critical',
+          entity: 'command adn control',
+          eventType: 'dns error'
+        }, {
+          severity: 'Critical',
+          entity: 'command adn control',
+          eventType: 'dns error'
+        }
+      ],
+      customTableTitles: [
+        { label: 'network.severity', prop: 'severity' },
+        { label: 'network.entity', prop: 'entity' },
+        { label: 'detections.eventType', prop: 'eventType' }
+      ]
+    }
+  },
+  computed: {
+    iconClass () {
+      return function (row) {
+        let className
+        switch (row.severity) {
+          case ('Critical'): {
+            className = 'critical'
+            break
+          }
+          case ('High'): {
+            className = 'high'
+            break
+          }
+          case ('Info'): {
+            className = 'info'
+            break
+          }
+          case ('Medium'): {
+            className = 'medium'
+            break
+          }
+          case ('Low'): {
+            className = 'low'
+            break
+          }
+          default: break
+        }
+        return className
+      }
+    }
+  }
+}
+</script>

src/views/charts2/charts/options/echartOption.js

@@ -1,4 +1,12 @@
-import { chartColor, chartColor1, chartColor2, chartColor3, unitTypes } from '@/utils/constants'
+import {
+  chartColor,
+  chartColor1,
+  chartColor2,
+  chartColor3,
+  chartColor5,
+  chartColor6,
+  unitTypes
+} from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import { axisFormatter } from '@/views/charts/charts/tools'
 
@@ -110,6 +118,34 @@ export const pieChartOption2 = {
     }
   ]
 }
+export const pieChartOption3 = {
+  color: chartColor6,
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['45%', '50%'],
+      avoidLabelOverlap: false,
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 20,
+          fontWeight: 500,
+          fontFamily: 'NotoSansHans-Medium',
+          color: '#353636',
+          formatter: function (params) {
+            return params.data.value
+          }
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}
+
 export const stackedLineChartOption = {
   color: chartColor3,
   tooltip: {
@@ -203,3 +239,69 @@ export const appListChartOption = {
     }
   ]
 }
+
+export const npmLineChartOption = {
+  color: chartColor5,
+  title: {
+    text: '',
+    top: 20,
+    left: 20,
+    textStyle: {
+      fontFamily: 'NotoSansSChineseRegular',
+      fontSize: 14,
+      color: '#353636',
+      fontWeight: 400
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    className: 'echarts-tooltip echarts-tooltip-dark'
+  },
+  legend: {
+    show: false
+  },
+  grid: {
+    top: '25%',
+    left: '4%',
+    right: '4%',
+    bottom: 15,
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'time',
+      splitNumber: 12,
+      axisLabel: {
+        formatter: function (value) {
+          const data = new Date(value)
+          const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
+          const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
+          return h + ':' + m
+        }
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      axisLabel: {
+        formatter: function (value) {
+          return unitConvert(value, unitTypes.number).join('')
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'line',
+      symbol: 'circle',
+      stack: 'network.total',
+      smooth: true,
+      showSymbol: false,
+      emphasis: {
+        focus: 'series'
+      },
+      data: []
+    }
+  ]
+}