diff --git a/src/assets/css/components/views/tag/tag.scss b/src/assets/css/components/views/tag/tag.scss index abb2c6eb..9180e78a 100644 --- a/src/assets/css/components/views/tag/tag.scss +++ b/src/assets/css/components/views/tag/tag.scss @@ -98,9 +98,33 @@ display: none; } } + + .tag-dropdown{ + align-items: center; + width: 100%; + height: 24px; + justify-content: center; + line-height: 24px; + padding: 0px 6px; + span { + margin-right: 6px; + } + i { + font-size: 12px; + } + } + .tag-dropdown:hover,.tag-dropdown__active { + cursor:pointer; + //background: rgba(113,113,113,0.10); + box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02); + border-radius: 2px; + i { + font-size: 12px; + } + } } .expand { - min-height: 95px; + min-height: 150px; display: flex; flex-wrap: wrap; position: relative; @@ -110,37 +134,32 @@ .expand-cell { display: flex; background: #FFFFFF; - border: 1px solid #E7EAED; + //border: 1px solid #E7EAED; border-radius: 2px; - margin: 0 12px 16px 0; - width: 300px; - height: 97px; - .expand-right { - background: #F9F9F9; - border-radius: 2px; - width: 97px; - height: 94px; + margin: 0 12px 6px 0; + width: 100%; + height: 150px; + .expand-left { + //background: #F9F9F9; + //border-radius: 2px; + width:calc(100% - 200px); + height: 150px; position: relative; - .demo-progress { - position: absolute; - top: 21px; - left: 18.5px; - } - .demo-progress,.demo-progress .el-progress-circle { - width: 57px !important; - height: 57px !important; + .chart-drawing { + height: 150px; + width: 100%; } } - .expand-left { + .expand-right { text-align: center; - width: calc(100% - 97px); + width: 200px; display: flex; flex-direction: column; justify-content: center; - .expand-name { - font-size: 12px; + .expand-count { + font-size: 22px; color: #666666; - font-weight: 400; + font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; @@ -149,13 +168,15 @@ padding: 2px 3px 0 0; } } - .expand-time { + .expand-observed-Ips { font-size: 12px; color: #666666; margin-bottom: 4px; div:nth-of-type(1) { font-size: 12px; - color: #999999; + color: #35adda; + font-weight: 600; + cursor: pointer; } } .expand-icon { @@ -259,3 +280,71 @@ } } } +.type-tag { + display: inline-block; + padding: 0 10px; + box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02); + border-radius: 12px; +} +.unknow { + background-color:rgba(119,131,145,0.1) !important; + color:rgb(119,131,145) +} +.benign { + background-color:rgba(116,159,77,0.1) !important; + color:rgb(116,159,77) +} +.malicious { + background-color:rgba(226,97,84,0.1) !important; + color:rgb(226,97,84) +} +.tag__popper { + width: 180px !important; + min-width: 180px; + max-height:206px; + overflow:hidden; + padding: 0 !important; + background: #963131; + border:1px solid #C5C5C5 !important; + box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important; + border-radius: 2px !important; + .el-row { + width: 100% !important; + } + .selected { + color: #0091ff; + font-weight: bold; + } + .el-popper { + max-height: 405px; + } + .select-dropdown { + max-height:172px; + width:100%; + margin: 1px 0px; + overflow:auto; + list-style: none; + padding:4px 0px; + box-sizing: border-box; + .select-dropdown__item:hover{ + background-color: #F5F7FA !important; + } + .select-dropdown__item{ + width:100%; + height:30px; + padding:0px 11px; + line-height:30px; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #666665; + display: list-item; + text-align: -webkit-match-parent; + box-sizing: border-box; + cursor: pointer; + font-size: 12px; + font-weight: 400; + } + } +} diff --git a/src/components/table/tag/TagTable.vue b/src/components/table/tag/TagTable.vue index 15c9d83b..967213da 100644 --- a/src/components/table/tag/TagTable.vue +++ b/src/components/table/tag/TagTable.vue @@ -17,73 +17,49 @@ @@ -91,6 +67,7 @@ :resizable="false" align="center" type="selection" + :selectable="(row) => { return row.isBuiltIn !== 1 }" width="30"> @@ -197,14 +108,17 @@ import table from '@/mixins/table' import Loading from '@/components/common/Loading' import axios from 'axios' import { api } from '@/utils/api' -import { storageKey } from '@/utils/constants' +import { storageKey, tagIntentColor, chartColor3 } from '@/utils/constants' import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools' -import { ref } from 'vue' +import { ref, shallowRef } from 'vue' import { dateFormatToUTC, getNowTime } from '@/utils/date-util' import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination' import ChartNoData from '@/views/charts/charts/ChartNoData' import { useRoute } from 'vue-router' import { parseInt } from 'lodash' +import unitConvert from '@/utils/unit-convert' +import * as echarts from 'echarts' +import { tagLineChartOption } from '@/views/charts2/charts/options/echartOption' export default { name: 'tagTable', @@ -215,9 +129,7 @@ export default { chartDetectionPagination }, props: { - categoryList: Array, toolsLoading: Boolean, - categoryId: Number, isNoData: { type: Boolean, default: false @@ -228,49 +140,39 @@ export default { return { format: localStorage.getItem(storageKey.dateFormat), username: localStorage.getItem(storageKey.username), + curExpendDataType: this.$t('tag.uniqueEntityObserved'), + curExpendDataTypeVal: 'uniqueEntityObserved', tableTitle: [ // 原始table列 { - label: 'ID', - prop: 'id', - show: true, - width: 50 - }, { - label: this.$t('config.user.name'), + label: this.$t('overall.name'), prop: 'name', show: true, - minWidth: 200, + minWidth: 50, sortable: 'custom' }, { - label: this.$t('tag.categoryType'), - prop: 'categoryId', - show: true, - minWidth: 180 - }, { - label: this.$t('tag.timeLimit'), - prop: 'timeLimit', - show: true, - minWidth: 110 - }, { - label: this.$t('tag.timePlan'), - prop: 'timePlan', - show: true, - minWidth: 110 - }, { - label: this.$t('tag.operationUserName'), - prop: 'userName', - show: true, - minWidth: 70 - }, { - label: this.$t('tag.resultCount'), - prop: 'total', + label: this.$t('tag.category'), + prop: 'category', show: true, minWidth: 50 }, { - label: this.$t('tag.lastExecutionTime'), - prop: 'lastTime', + label: this.$t('tag.entityType'), + prop: 'indicatorType', show: true, - width: 170, - sortable: 'custom' + minWidth: 50 + }, { + label: this.$t('tag.intention'), + prop: 'intent', + show: true, + minWidth: 30 + }, { + label: this.$t('tag.source'), + prop: 'isBuiltIn', + show: true, + minWidth: 30 + }, { + label: this.$t('overall.remark'), + prop: 'description', + show: true } ], checkboxAll: false, @@ -285,54 +187,15 @@ export default { loadingPreviewId: '', downDataList: [], disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用 - // pageObj: { - // pageNo: 1, - // pageSize: 20, - // total: 0, - // resetPageNo: true - // }, - // expandedIds: [], interval: null, - typeMappings: [ - { - key: 'day', - value: this.$t('tag.daily') - }, - { - key: 'week', - value: this.$t('tag.weekly') - }, - { - key: 'month', - value: this.$t('tag.monthly') - }, - { - key: '', - value: this.$t('tag.oneTime') - } - ], - typeUnitMappings: [ - { - key: 'day', - value: this.$t('tag.days') - }, - { - key: 'week', - value: this.$t('tag.week') - }, - { - key: 'month', - value: this.$t('tag.months') - } - ], - scheduleTypeList: tag.scheduleTypeList, - weekdayList: tag.weekdayList, - monthList: tag.monthList, - weekOptions: tag.weekOptions, configPeriod: '', configCustom: '', selectIds: [], // 单行选中的id列表 - initExpandFlag: false // 初始化时单行展开标志，false是未展开，true展开 + initExpandFlag: false, // 初始化时单行展开标志，false是未展开，true展开, + myChartArray: [], + observedCount: 0, + disableToEntity: false, + tagIntentColor } }, /** @@ -368,11 +231,12 @@ export default { pageNo = 1 } const pageObj = ref(tempPageObj) - + const myChart = shallowRef(null) return { timeRange, expandedIds, - pageObj + pageObj, + myChart } }, watch: { @@ -421,40 +285,11 @@ export default { } }, computed: { - handleTimeRange () { - return function (row) { - let str = '' - if (row.config && row.config.timeConfig && row.config.timeConfig.type) { - str += row.config.timeConfig.type - if (['today', 'yesterday', 'this', 'customize'].indexOf(row.config.timeConfig.type) === -1 && row.config.timeConfig.offset) { - str += ` ${row.config.timeConfig.offset} ${row.config.timeConfig.unit}` - } - } - return str - } - }, - 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) - } + colorIntent () { + const vm = this + return function (intent) { + const t = vm.tagIntentColor.find(t => t.intent === intent) + return t ? t.name : vm.tagIntentColor[0].name } } }, @@ -462,13 +297,131 @@ export default { this.$nextTick(() => { this.expandTable() }) + window.addEventListener('resize', this.resize) }, methods: { headerCellClass, + toEntityList (tag) { + if (!this.disableToEntity) { + this.$router.push({ + path: '/entity', + query: { + listMode: 'list', + q: 'has(tag,\'' + tag.name + '\')', + mode: 'text', + // range: this.timeFilter.dateRangeValue, + // pageNo: this.pageObj.pageNo, + // pageSize: this.pageObj.pageSize, + showList: true + } + }) + } + }, + echartsInit (data, item, type) { + const dom = document.getElementById(`chart${item.id}`) + if (dom) { + // if (!this.myChart) { + this.myChart = echarts.init(dom) + // } + this.chartOption = tagLineChartOption + this.chartOption.series = [ + { + type: 'line', + symbol: 'circle', + smooth: true, + showSymbol: false, + emphasis: { + itemStyle: { + borderWidth: 2 + } + }, + name: 'IP', + stack: 'Total', + lineStyle: { + color: '#35ADDA', + width: 1 + }, + areaStyle: { + // opacity: 0.1, + color: '#eef8fc' + }, + itemStyle: { + color: '#35ADDA' + }, + data: data.map(t => { return [Number(t.statTime) * 1000, Number(t.ipIndicatorCount)] }) + }, + { + type: 'line', + symbol: 'circle', + smooth: true, + showSymbol: false, + emphasis: { + itemStyle: { + borderWidth: 2 + } + }, + name: 'Domain Name', + stack: 'Total', + lineStyle: { + color: '#E48F3E', + width: 1 + }, + areaStyle: { + color: '#fdf6f0' + // opacity: 0.1 + }, + itemStyle: { + color: '#E48F3E' + }, + data: data.map(t => { return [Number(t.statTime) * 1000, Number(t.domainIndicatorCount)] }) + } + ] + + this.chartOption.yAxis[0].axisLabel.formatter = (value) => { + return unitConvert(value, 'number').join('') + } + this.myChartArray.push(this.myChart) + this.myChart.setOption(this.chartOption) + this.$nextTick(() => { + this.myChart.resize() + }) + } + }, + resize () { + this.myChartArray.forEach(t => { + t.resize() + }) + }, + uniqueEntityObserved (item) { + this.curExpendDataType = this.$t('tag.uniqueEntityObserved') + this.curExpendDataTypeVal = 'uniqueEntityObserved' + this.disableToEntity = false + this.$nextTick(() => { + const totalIndicatorsDom = document.getElementById('totalIndicators' + item.id) + const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + item.id) + uniqueEntityObservedDom.style.cssText = 'color:#0091ff;font-weight: bold;' + totalIndicatorsDom.style.cssText = '' + document.getElementById('tagDropdown' + item.id).click() + }) + this.init(item, api.tagTrafficEntityTrend, api.tagTrafficEntityStatistics) + }, + totalIndicators (item) { + this.curExpendDataType = this.$t('tag.totalIndicators') + this.curExpendDataTypeVal = 'totalIndicators' + this.disableToEntity = true + this.$nextTick(() => { + const totalIndicatorsDom = document.getElementById('totalIndicators' + item.id) + const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + item.id) + uniqueEntityObservedDom.style.cssText = '' + totalIndicatorsDom.style.cssText = 'color:#0091ff;font-weight: bold;' + document.getElementById('tagDropdown' + item.id).click() + }) + this.init(item, api.tagIndicatorTrend, api.tagIndicatorStatistics) + }, /** - * 进入页面判断是否需要展开表格 - * 即展开表格后刷新界面，保持展开效果 - */ + * 进入页面判断是否需要展开表格 + * 即展开表格后刷新界面，保持展开效果 + */ expandTable () { const expandInfo = this.expandedIds @@ -476,7 +429,6 @@ export default { const obj = { id: expandInfo[0] } - this.dropExpandChange(obj, expandInfo, 'init') setTimeout(() => { @@ -507,11 +459,6 @@ export default { return this.$t('overall.inProgress') } }, - tagOperation (arr) { - if (arr[1].percent === 1) { - this.tableOperation(arr) - } - }, /** * 单行选中 */ @@ -578,194 +525,99 @@ export default { } overwriteUrl(newUrl) }, + initLine (item, lineUrl) { + const params = { + // startTime: getSecond(this.timeFilter.startTime), + // endTime: getSecond(this.timeFilter.endTime) + } + lineUrl = lineUrl || api.tagTrafficEntityTrend + lineUrl = lineUrl.replace('{{name}}', item.name) + this.loadingDown = true + axios.get(lineUrl, { params: params }).then(response => { + const res = response.data + if (response.status === 200) { + this.showError = false + this.isNoData = res.data.result.length === 0 + + if (!this.isNoData) { + this.echartsInit(res.data.result, item, '') + } + } else { + this.isNoData = false + this.showError = true + this.errorMsg = this.errorMsgHandler(res) + } + }).catch(e => { + console.error(e) + this.isNoData = false + this.showError = true + this.errorMsg = this.errorMsgHandler(e) + }).finally(() => { + this.loadingDown = false + }) + }, + initStatistics (item, statisticsUrl) { + const params = { + // startTime: getSecond(this.timeFilter.startTime), + // endTime: getSecond(this.timeFilter.endTime) + } + statisticsUrl = statisticsUrl || api.tagTrafficEntityStatistics + statisticsUrl = statisticsUrl.replace('{{name}}', item.name) + let observedCount = 0 + axios.get(statisticsUrl, { params: params }).then(response => { + const res = response.data + if (response.status === 200) { + res.data.result.forEach(item => { + observedCount = observedCount + item.count + }) + this.observedCount = observedCount + } else { + this.errorMsg = this.errorMsgHandler(res) + } + }).catch(e => { + console.error(e) + this.errorMsg = this.errorMsgHandler(e) + }).finally(() => { + }) + }, + init (item, lineUrl, statisticsUrl) { + this.initLine(item, lineUrl) + this.initStatistics(item, statisticsUrl) + }, /** * 表格左侧点击展开收起 */ dropExpandChange (row, expandedRows, flag) { + this.curExpendDataType = this.$t('tag.uniqueEntityObserved') + this.curExpendDataTypeVal = 'uniqueEntityObserved' this.expandedIds = [] clearInterval(this.interval) if (expandedRows.length > 0 && row) { this.expandedIds.push(row.id) - if (flag === undefined) { - this.pageObj.pageNo = 1 - } - - this.datePickerChange(row) - } - }, - datePickerChange (row, show) { - if (!show) { - if (this.pageObj.pageNo <= 1) { - this.pageObj.pageNo = 1 - } - } - const param = { - tempId: row.id, - startTime: dateFormatToUTC(this.timeRange[0]), - endTime: dateFormatToUTC(this.timeRange[1]), - ...this.pageObj - } - this.dropDownQueryChange(param) - }, - dropDownQueryChange (param) { - this.loadingDown = true - this.downDataList = [] - axios.get(api.reportJob, { params: param }).then(res => { - if (res.status === 200) { - this.downDataList = res.data.data.list - this.pageObj.total = res.data.data.total - this.$nextTick(() => { - this.$refs.dataTable.doLayout() - }) - } - this.loadingDown = false - const showInterval = this.downDataList.find(item => item.percent !== 1 && item.state !== 2) - if (this.downDataList && showInterval) { - this.intervalChange(param) - } - }) - }, - dataConversionProcessing (param) { - axios.get(api.reportJob, { params: param }).then(res => { - if (res.status === 200) { - this.downDataList = res.data.data.list - this.pageObj.total = res.data.data.total - } - }) - }, - downDeleteQueryChange (row, props) { - this.$confirm(this.$t('tip.confirmDelete'), { - confirmButtonText: this.$t('tip.yes'), - cancelButtonText: this.$t('tip.no'), - type: 'warning' - }).then(() => { - axios.delete(api.reportJob + '?ids=' + row.id).then(response => { - if (response.status === 200) { - this.delFlag = true - this.$message({ - duration: 2000, - type: 'success', - message: this.$t('tip.deleteSuccess') - }) - this.dropDownQueryChange({ tempId: props.row.id }) - this.$emit('reload') - } else { - this.$message.error(response.data.message) + this.init(row) + this.$nextTick(() => { + const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + row.id) + if (uniqueEntityObservedDom) { + uniqueEntityObservedDom.style.cssText = 'color:#0091ff;font-weight: bold;' } }) - }).catch(() => {}) - }, - pageJump (val) { - this.pageObj.pageNo = val - if (this.expandedIds.length > 0) { - this.datePickerChange({ id: this.expandedIds[0] }, true) } }, - intervalChange (param) { - clearInterval(this.interval) - this.interval = setInterval(() => { - // 通过深拷贝，触发watch监听到timeRange，也可使用$set进行触发 - this.timeRange = JSON.parse(JSON.stringify(this.timeRange)) - this.timeRange[1] = this.timeRange[1] + 30000 - param.endTime = dateFormatToUTC(this.timeRange[1]) - this.dataConversionProcessing(param) - }, 30000) - }, - handleConfigArray (array, list) { - const group = [] - array.forEach(item => { - const matchItem = list.find(m => m.value === item) - if (matchItem) { - group.push(this.$t(matchItem.name)) - } - }) - return group.toString() - }, - handleConfig (row) { - this.handleConfigPeriod(row) - this.handleConfigCustom(row) - }, - handleConfigPeriod (row) { - let str = '' - if (row.config && row.config.schedulerConfig) { - const type = row.config.schedulerConfig.type - if (type === '') { - str = this.$t('tag.oneTime') - } else { // isRepeat=1 每天，每周，每月 - const period = this.typeMappings.find(m => m.key === type) - const interval = row.config.schedulerConfig.interval - const months = row.config.schedulerConfig.months - if (interval > 1) { - const unit = this.typeUnitMappings.find(m => m.key === type) - if (unit) { - str = this.$t('tag.every') + ' ' + interval + ' ' + unit.value - } else { - str = '-' - } - } else if (interval === 1) { - if (type === this.scheduleTypeList[2].value) { // 月 - if (this.$_.isEmpty(months)) { // 空代表循环 - str = period.value - } else { // 非空代表不循环 - str = this.handleConfigArray(months, this.monthList)// X月，Y月 - } - } else if (period) { - str = period.value - } else { - str = '-' - } - } - } + getIsBuiltIn (isBuiltIn) { + if (isBuiltIn === 1) { + return this.$t('tag.builtInTag') + } else { + return this.$t('tag.userDefined') } - this.configPeriod = str - }, - handleConfigCustom (row) { - let str = '' - if (row.config && row.config.schedulerConfig) { - const type = row.config.schedulerConfig.type - if (type === '') { // 单次 - str = '-' - } else { // 每日，每周，每月 - const period = this.typeMappings.find(m => m.key === type) - if (type === this.scheduleTypeList[0].value) { // 日 - str = '-' - } else if (type === this.scheduleTypeList[1].value) { // 周 - const weekDates = row.config.schedulerConfig.weekDates - str = this.handleConfigArray(weekDates, this.weekdayList) - } else if (type === this.scheduleTypeList[2].value) { // 月 - const monthDates = row.config.schedulerConfig.monthDates// 日期 - const monthWeekDates = row.config.schedulerConfig.monthWeekDates// 哪几周 - const weekDates = row.config.schedulerConfig.weekDates// 周几 - if (!this.$_.isEmpty(monthDates)) { - str = this.$t('tag.date') + '-' + monthDates - } else { - if (!this.$_.isEmpty(monthWeekDates)) { - str += this.$t('tag.week') + '-' + this.handleConfigArray(monthWeekDates, this.weekOptions) - } - if (!this.$_.isEmpty(weekDates)) { - str += ' ' + this.handleConfigArray(weekDates, this.weekdayList) - } - } - } else { - str = '-' - } - } - } - this.configCustom = str - }, - getCategoryName (id) { - let name = '-' - for (let i = 0; i < this.categoryList.length; i++) { - if (id === this.categoryList[i].id) { - name = this.categoryList[i].name - break - } - } - return name } }, beforeUnmount () { clearInterval(this.interval) + window.removeEventListener('resize', this.resize) + if (this.myChart) { + echarts.dispose(this.myChart) + } + this.chartOption = null } } diff --git a/src/mock/index.js b/src/mock/index.js index 85743d99..c6d7c06a 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -5,3 +5,4 @@ import './entity' import './detection' import './detectionList' import './location' +import './tag' diff --git a/src/mock/tag.js b/src/mock/tag.js new file mode 100644 index 00000000..b402e25b --- /dev/null +++ b/src/mock/tag.js @@ -0,0 +1,174 @@ +import Mock from 'mockjs' + +const openMock = true +if (openMock) { + Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*'), 'delete', function (requestObj) { + return { + code: 200, + message: 'success', + data: { + ids: [ + 'UUID1', + 'UUID2' + ] + } + } + }) + Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/list.*'), 'get', function (requestObj) { + return { + msg: 'success', + code: 200, + data: { + pageNo: 1, + pageSize: 20, + total: 1, + list: [ + { + id: '08b2a4cd-1c38-4be1-b641-8e5b607e2075', + name: 'tag1', + category: 'categoty1', + indicatorType: 'IP', + intent: 'Benign', + description: ' tag1 description', + isBuiltIn: 1, + createdTime: 1685412014, + updatedTime: 1685412014 + }, + { + id: '08b2a4cd-1c38-4be1-b641-8e5b607e2076', + name: 'tag2', + category: 'categoty1', + indicatorType: 'IP,Domain', + intent: 'Benign', + description: ' tag1 description', + isBuiltIn: 0, + createdTime: 1685412014, + updatedTime: 1685412014 + }, + { + id: '08b2a4cd-1c38-4be1-b641-8e5b607e20751', + name: 'tag123', + category: 'categoty1', + indicatorType: 'IP', + intent: 'Malicious', + description: ' tag1 description', + isBuiltIn: 1, + createdTime: 1685412014, + updatedTime: 1685412014 + }, + { + id: '08b2a4cd-1c38-4be1-b641-8e5b607e20761', + name: 'tag246', + category: 'categoty1', + indicatorType: 'IP,Domain', + intent: 'Unknow', + description: ' tag1 description', + isBuiltIn: 1, + createdTime: 1685412014, + updatedTime: 1685412014 + } + ] + } + } + }) + Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/indicator/trend.*'), 'get', function (requestObj) { + return { + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ + { + statTime: 1711526563, + ipIndicatorCount: 217, + domainIndicatorCount: 125 + }, + { + statTime: 1711526569, + ipIndicatorCount: 515, + domainIndicatorCount: 415 + }, + { + statTime: 1711526575, + ipIndicatorCount: 17, + domainIndicatorCount: 15 + }, + { + statTime: 1711526581, + ipIndicatorCount: 565, + domainIndicatorCount: 35 + } + ] + } + } + }) + Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/trafficEntity/trend.*'), 'get', function (requestObj) { + return { + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ + { + statTime: 1711526563, + ipIndicatorCount: 27, + domainIndicatorCount: 25 + }, + { + statTime: 1711526569, + ipIndicatorCount: 55, + domainIndicatorCount: 45 + }, + { + statTime: 1711526575, + ipIndicatorCount: 17, + domainIndicatorCount: 15 + }, + { + statTime: 1711526581, + ipIndicatorCount: 55, + domainIndicatorCount: 35 + } + ] + } + } + }) + Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/trafficEntity/statistics.*'), 'get', function (requestObj) { + return { + msg: 'success', + code: 200, + data: { + result: [ + { + type: 'Domain', + count: 36 + }, + { + type: 'IP', + count: 10 + } + ] + } + } + }) + Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/indicator/statistics.*'), 'get', function (requestObj) { + return { + msg: 'success', + code: 200, + data: { + result: [ + { + type: 'Domain', + count: 33 + }, + { + type: 'IP', + count: 100 + } + ] + } + } + }) +} diff --git a/src/permission.js b/src/permission.js index d3ce16f5..8ed954f2 100644 --- a/src/permission.js +++ b/src/permission.js @@ -17,11 +17,11 @@ router.beforeEach(async (to, from, next) => { loadGeoData() // 加载baseUrl if (!axios.defaults.baseURL) { - // eslint-disable-next-line no-undef + // eslint-disable-next-line no-undef axios.defaults.baseURL = BASE_CONFIG.baseUrl } if (localStorage.getItem(storageKey.token)) { - // 加载i18n + // 加载i18n await loadI18n() // 加载权限 if (permissionWhiteList.indexOf(to.path) !== -1) { @@ -162,8 +162,8 @@ export function handleComponent (code) { return () => import('@/views/detections/detectionPolicies/PolicyForm') case 'report': return () => import('@/views/report/Report') - //case 'tag': - //return () => import('@/views/tag/Tag') + case 'tag': + return () => import('@/views/tag/Tag') case 'knowledgeBase': return () => import('@/views/setting/KnowledgeBase') case 'userDefinedLibrary': diff --git a/src/utils/api.js b/src/utils/api.js index eb29d9f6..8ec523a3 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -60,6 +60,13 @@ export const api = { reportBatchDownloadPdf: '/report/job/batchDownloadPdf', reportDownloadPdf: '/report/job/downloadPdf', reportView: '/report/job/view', + // tag 相关 + tagList: '/v1/tag/list', + tagDelete: '/v1/tag/', + tagIndicatorStatistics: '/v1/tag/{{name}}/indicator/statistics', + tagIndicatorTrend: '/v1/tag/{{name}}/indicator/trend', + tagTrafficEntityStatistics: '/v1/tag/{{name}}/trafficEntity/statistics', + tagTrafficEntityTrend: '/v1/tag/{{name}}/trafficEntity/trend', // 业务 panel: '/visual/panel', chart: '/visual/chart', diff --git a/src/utils/constants.js b/src/utils/constants.js index fe474acd..79a0aa70 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -63,7 +63,8 @@ export const fromRoute = { galaxyProxy: 'galaxyProxy', chart: 'chart', cryptocurrency: 'cryptocurrency', - builtinReport: 'builtinReport' + builtinReport: 'builtinReport', + tag: 'tag' } /* panel类别和名称之间的映射 */ @@ -463,6 +464,25 @@ export const knowledgeBaseCategory = [ value: 'user_defined' } ] + +export const tagIntentColor = [ + { + label: 'tag.intent.unknown', + name: 'unknow', + intent: 'Unknow' + }, + { + label: 'tag.intent.benign', + name: 'benign', + intent: 'Benign' + }, + { + label: 'tag.intent.malicious', + name: 'malicious', + intent: 'Malicious' + } +] + export const knowledgeBaseColor = [ { label: 'knowledge.info', diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js index 7e531ab0..87bd7d5b 100644 --- a/src/views/charts2/charts/options/echartOption.js +++ b/src/views/charts2/charts/options/echartOption.js @@ -797,3 +797,48 @@ export const entityDetailSubscriberTopApp = { } }] } + +export const tagLineChartOption = { + tooltip: { + trigger: 'axis', + className: 'echarts-tooltip echarts-tooltip-dark' + }, + legend: { + show: true, + x: 'center', + y: 'bottom', + icon: 'circle', + itemGap: 50, + data: ['IP', 'Domain Name'] + }, + grid: { + top: '12%', + left: '1%', + right: '1%', + bottom: 30, + containLabel: true + }, + xAxis: [ + { + type: 'time', + axisLabel: { + formatter: xAxisTimeFormatter, + rich: xAxisTimeRich + } + } + ], + yAxis: [ + { + type: 'value', + splitLine: { + show: false + }, + axisLabel: { + // formatter: function (value) { + // return unitConvert(value, unitTypes.number).join('') + // } + } + } + ], + series: [] +} diff --git a/src/views/tag/Tag.vue b/src/views/tag/Tag.vue index 9b79898a..ee30508e 100644 --- a/src/views/tag/Tag.vue +++ b/src/views/tag/Tag.vue @@ -6,25 +6,22 @@ :tableId="tableId" v-model:custom-table-title="tools.customTableTitle" :api="url" - :from="fromRoute.builtinReport" + :from="fromRoute.tag" :layout="['search']" @search="search" >