Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

src/Login.vue

@@ -44,6 +44,7 @@ import { useRouter } from 'vue-router'
 import { storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
 import dayjs from 'dayjs'
+import _ from 'lodash'
 import utc from 'dayjs/plugin/utc'
 dayjs.extend(utc)
 
@@ -71,15 +72,19 @@ export default {
       post(api.login, { username: this.username, pin: this.pin }).then(
         res => {
           if (res.code === 200) {
-            if (!this.$_.isEmpty(res.data.lang)) {
+            if (!_.isEmpty(res.data.lang)) {
               localStorage.setItem(storageKey.language, res.data.lang)
             }
-            if (!this.$_.isEmpty(res.data.theme)) {
+            if (!_.isEmpty(res.data.theme)) {
               localStorage.setItem(storageKey.theme, res.data.theme)
             }
+            if (!_.isEmpty(res.data.s3_upload)) {
+              localStorage.setItem(storageKey.s3Enable, res.data.s3_upload)
+            }
             res.loginSuccessPath = this.$route.query.redirect
             this.loginSuccess(res)
             localStorage.setItem(storageKey.username, this.username)
+            localStorage.setItem(storageKey.token, res.data.token)
           } else if (res.code === 518005) {
             this.$message.error(this.$t('Incorrect username or password'))
             this.loading = false
@@ -105,10 +110,10 @@ export default {
       })
     },
     appearanceOut (data) {
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.language))) {
+      if (_.isEmpty(localStorage.getItem(storageKey.language))) {
         localStorage.setItem(storageKey.language, data.lang || 'zh')
       }
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.theme))) {
+      if (_.isEmpty(localStorage.getItem(storageKey.theme))) {
         localStorage.setItem(storageKey.theme, data.theme || 'light')
       }
       localStorage.setItem(storageKey.sysTimezone, data.timezone)

src/assets/css/components/index.scss

@@ -49,4 +49,5 @@
 @import 'views/charts/NetworkOverviewLine';
 @import 'views/charts/NetworkOverviewDdosDetection';
 @import 'views/charts/NetworkOverviewPerformanceEvent';
+@import 'views/charts2/networkOverviewTabs';
 //@import '../chart';

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

@@ -0,0 +1,110 @@
+.tabs {
+  height:100%;
+  .cn-chart__tabs {
+    height:100%;
+    background-color:white;
+    .tab-pane {
+      height:100%;
+      border: 1px solid #e4e7ed;
+      padding:1px;
+      border-radius: 5px;
+      .tab-table {
+        color:#484949;
+        font-size:12px;
+        border:0px;
+      }
+      .data-total{
+        display: flex !important;
+      }
+      .data-total-trend {
+        display: flex;
+        margin-left: 10px;
+        align-items: center;
+        justify-content: center;
+        margin-top: 2px;
+      }
+      .data-total-trend-black {
+        background-color: #ededed;
+        border-radius: 18px;
+        width: 36px;
+        height: 18px;
+      }
+      .data-total-trend-green {
+        background-color: #eef2e8;
+        border-radius: 25px;
+        width: 50px;
+        height: 18px;
+        color:#94b072;
+      }
+      .data-total-trend-red {
+        background-color: #fbebe9;
+        border-radius: 25px;
+        width: 50px;
+        height: 18px;
+        color:#e97367;
+      }
+      .el-table--group::after,.el-table--border::after, .el-table::before {
+        height: 0px;
+      }
+    }
+    .el-tabs__nav-wrap::after {
+      height: 1px;
+      background-color: white ;
+    }
+    &>.el-tabs__header {
+      margin-bottom: 10px;
+    }
+    .el-tabs__nav.is-top {
+      margin-left:8px;
+      .el-tabs__active-bar {
+        display: none;
+      }
+      .el-tabs__item {
+        padding: 0 8px;
+        font-size:12px;
+        font-weight: bold;
+        color:#838383;
+      }
+      .el-tabs__item.is-top.is-active {
+        border-bottom: 2px solid #0091ff;
+        color:#0091ff;
+        height: 35px;
+      }
+    }
+    &>.el-tabs__content {
+      height: calc(100% - 40px);
+      border:none;
+    }
+  }
+  .tab-search {
+    position:absolute;
+    right:20px;
+    height:40px;
+    top:0px;
+    display:flex;
+    font-size:12px;
+    align-items: center;
+    .search-select {
+      margin-right:10px;
+      .option__select.select-column {
+        .el-input__inner {
+          width: 86px;
+          padding-left: 8px;
+          color:#2C72C6;
+          font-weight:400;
+        }
+      }
+      .option-popper {
+        .el-select-dropdown__item {
+          height: 24px;
+          line-height: 24px;
+          font-size: 12px;
+        }
+      }
+
+    }
+    .search-customize-tab {
+      color:#69a7de;
+    }
+  }
+}

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1653978200371') format('woff2'),
-       url('iconfont.woff?t=1653978200371') format('woff'),
-       url('iconfont.ttf?t=1653978200371') format('truetype');
+  src: url('iconfont.woff2?t=1657611740064') format('woff2'),
+       url('iconfont.woff?t=1657611740064') format('woff'),
+       url('iconfont.ttf?t=1657611740064') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,94 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-Detection:before {
+  content: "\e792";
+}
+
+.cn-icon-Entity:before {
+  content: "\e793";
+}
+
+.cn-icon-Case:before {
+  content: "\e794";
+}
+
+.cn-icon-Hunt:before {
+  content: "\e795";
+}
+
+.cn-icon-Report1:before {
+  content: "\e796";
+}
+
+.cn-icon-a-KnowledgeBase:before {
+  content: "\e797";
+}
+
+.cn-icon-constant:before {
+  content: "\e78f";
+}
+
+.cn-icon-decline:before {
+  content: "\e790";
+}
+
+.cn-icon-rise1:before {
+  content: "\e791";
+}
+
+.cn-icon-sort:before {
+  content: "\e78c";
+}
+
+.cn-icon-a-NetworkAnalytics:before {
+  content: "\e786";
+}
+
+.cn-icon-navigation:before {
+  content: "\e787";
+}
+
+.cn-icon-up:before {
+  content: "\e788";
+}
+
+.cn-icon-left:before {
+  content: "\e789";
+}
+
+.cn-icon-a-NetworkPerformanceEvent:before {
+  content: "\e78a";
+}
+
+.cn-icon-refresh1:before {
+  content: "\e78b";
+}
+
+.cn-icon-a-DDosDetection:before {
+  content: "\e78d";
+}
+
+.cn-icon-Setting1:before {
+  content: "\e78e";
+}
+
+.cn-icon-add1:before {
+  content: "\e783";
+}
+
+.cn-icon-down:before {
+  content: "\e784";
+}
+
+.cn-icon-right:before {
+  content: "\e785";
+}
+
+.cn-icon-Data:before {
+  content: "\e782";
+}
+
 .cn-icon-a-:before {
   content: "\e77b";
 }

src/components/table/report/reportTestTable.vue

@@ -36,9 +36,10 @@
             <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
               <div class="expand-right">
                 <div class="demo-progress">
-                  <el-progress type="circle" :percentage="computePercent(item)" :color="computePercent(item) === 100 ? '#21bf9a' : '#50b3ef'">
+                  <el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)" :color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')">
                     <template #default="{ percentage }">
-                      <span style="font-size: 0.875rem;">{{ percentage }}%</span>
+                      <span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span>
+                      <span style="font-size: 0.875rem;color: #C14843" v-else>{{percentage}}</span>
                     </template>
                   </el-progress>
                 </div>
@@ -50,13 +51,13 @@
                   <div>{{dateFormatByAppearance(item.ctime)}}</div>
                 </div>
                 <div class="expand-icon">
-                  <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) < 100}" @click="reportOperation(['download', item])">
+                  <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['download', item])">
                     <loading :loading="loadingTableId === item.id"></loading>
                     <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
                       <use xlink:href="#cn-icon-download2"></use>
                     </svg>
                   </div>
-                  <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) < 100}" @click="reportOperation(['preview', item])">
+                  <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['preview', item])">
                     <loading :loading="loadingPreviewId === item.id"></loading>
                     <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
                       <use xlink:href="#cn-icon-preview"></use>
@@ -329,12 +330,23 @@ export default {
     },
     computePercent () {
       return function (item) {
+        if (item.state === 2) {
+          return 'Failed'
+        }
         if (item.percent === 1) {
+          if (localStorage.getItem(storageKey.s3Enable) == 1) {
+            if (item.state === 1 && item.upload === 1) {
+              return 100
+            } else {
+              return 99.99
+            }
+          } else {
             if (item.state === 1) {
               return 100
             } else {
               return 99.99
             }
+          }
         } else {
           return parseFloat(item.percent * 100).toFixed(2)
         }

src/store/modules/user.js

@@ -42,7 +42,6 @@ const user = {
   },
   actions: {
     loginSuccess (store, res) {
-      localStorage.setItem(storageKey.token, res.data.token)
       post(api.permissions, { token: res.data.token }).then(res2 => {
         const menuList = sortByOrderNum(res2.data.menus)
         store.commit('setMenuList', menuList)

src/utils/constants.js

@@ -4,6 +4,7 @@ export const storageKey = {
   iso36112Capital: 'cn-iso3611-2-capital',
   iso36112WorldLow: 'cn-iso3611-2-world-low',
   i18n: 'cn-i18n',
+  s3Enable: 'cn-s3-enable',
   languages: 'cn-languages',
   language: 'cn-language',
   theme: 'cn-theme',
@@ -153,6 +154,18 @@ export const listScrollPath = [
   '/detection/securityEvent'
 ]
 
+export const networkOverviewTable = [
+  'network.categories',
+  'network.providers',
+  'network.countries',
+  'network.applications',
+  'network.clientIps',
+  'network.serverIps',
+  'network.protocols',
+  'network.hosts',
+  'network.snis'
+]
+
 export const dnsServerRole = {
   RTDNS: 'RTDNS',
   TLDNS: 'TLDNS',

src/views/charts2/Chart.vue

@@ -14,6 +14,9 @@
         v-else-if="chart.type === typeMapping.networkOverview.performanceEvent"
         :chart="chart"
     ></network-overview-performance-event>
+    <network-overview-tabs
+         v-else-if="chart.type === typeMapping.networkOverview.table"
+    ></network-overview-tabs>
   </div>
 </template>
 
@@ -24,6 +27,7 @@ import { typeMapping } from '@/views/charts2/chart-tools'
 import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine'
 import NetworkOverviewDdosDetection from '@/views/charts2/charts/NetworkOverviewDdosDetection'
 import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverviewPerformanceEvent'
+import NetworkOverviewTabs from '@/views/charts2/charts/NetworkOverviewTabs'
 export default {
   name: 'Chart',
   components: {
@@ -31,7 +35,8 @@ export default {
     ChartNoData,
     NetworkOverviewLine,
     NetworkOverviewDdosDetection,
-    NetworkOverviewPerformanceEvent
+    NetworkOverviewPerformanceEvent,
+    NetworkOverviewTabs
   },
   props: {
     chart: Object

src/views/charts2/charts/NetworkOverviewTabs.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="tabs">
+    <el-tabs v-model="activeTab"
+             class="cn-chart__tabs"
+             @tab-click="handleClick"
+    >
+      <el-tab-pane  v-for="(tab,index) in networkOverviewTable"
+                    :label="$t(tab)"
+                    :name="tab"
+                    :key="index"
+                    :ref="`chart-tab-${index}`"
+                    class="tab-pane"
+
+      >
+
+        <el-table
+                id="tabTable"
+                ref="dataTable"
+                :data="tableData"
+                border
+                :cell-style="tableCellStyle"
+                :header-cell-style="tableHeaderCellStyle"
+                class="tab-table"
+                height="100%"
+        >
+          <el-table-column
+                  v-for="(item, index) in customTableTitles"
+                  class="data-column"
+          >
+            <template #header>
+              <span class="data-column__span">{{$t(item.label)}}</span>
+            </template>
+            <template  #default="scope" :column="item">
+              <div class="data-total" >
+                {{scope.row[item.prop]}}
+                <template v-if="item.prop === 'total'"  >
+                  <div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>{{scope.row['trendValue']}}
+                  </div>
+                  <div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
+                  </div>
+                  <div v-else class="data-total-trend data-total-trend-black">
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+
+      </el-tab-pane>
+
+    </el-tabs>
+    <div class="tab-search" >
+      <div class="search-select" >
+        <span class="margin-r-10">{{$t('network.metric')}}:</span>
+        <el-select v-model="metric"
+                   class="option__select select-column"
+                   placeholder=""
+                   popper-class="option-popper"
+                   size="mini">
+          <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="search-customize-tab">
+        <i class="cn-icon-gear cn-icon"></i>  {{$t('network.customizeTabs')}}
+      </div>
+
+    </div>
+  </div>
+
+</template>
+<script>
+import _ from 'lodash'
+import { ref } from 'vue'
+import { networkOverviewTable } from '@/utils/constants'
+
+export default {
+  name: 'NetworkOverviewTable',
+  data () {
+    return {
+      metric: '',
+      options: [
+        {
+          value: 'Bits',
+          label: 'Bits'
+        }
+      ],
+      tableData: [
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'up',
+          trendValue: '33%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trendValue: '6%',
+          trend: '',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'up',
+          trendValue: '6%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: '',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'up',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        }
+      ],
+      customTableTitles: [
+        { label: 'network.categories', prop: 'categories' },
+        { label: 'network.total', prop: 'total' },
+        { label: 'network.inbound', prop: 'inbound' },
+        { label: 'network.outbound', prop: 'outbound' }
+      ]
+    }
+  },
+  methods: {
+    handleClick (tab) {
+      console.log(tab)
+      this.customTableTitles[0].label = tab.paneName
+      // this.activeTab = tab.paneName
+    },
+    tableCellStyle ({ row, column, rowIndex, columnIndex }) {
+      let style = 'border-right:0px;padding:7px 0 !important;'
+      if (rowIndex === this.tableData.length - 1) {
+        style = style + 'border-bottom:0px !important;'
+      }
+      if (columnIndex === 0) {
+        style = style + 'color:#69a7de;'
+      }
+      return style
+    },
+    tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
+      return 'border-right:0px;font-size:12px;color:#656565;padding:7px 0 !important;'
+    }
+  },
+  setup (props) {
+    let activeTab = ref(networkOverviewTable[0])
+    if (props.chartInfo) {
+      if (!_.isEmpty(props.chartInfo.children)) {
+        activeTab = `${props.chartInfo.children[0].id}`
+      }
+      // const dataList = [...props.chartInfo.children]
+    }
+
+    return {
+      activeTab,
+      networkOverviewTable
+
+      // dataList
+    }
+  }
+}
+</script>