diff --git a/babel.config.js b/babel.config.js index 81e55256..65755c37 100644 --- a/babel.config.js +++ b/babel.config.js @@ -12,7 +12,8 @@ module.exports = { ], plugins: [ '@vue/babel-plugin-jsx', - '@babel/proposal-class-properties', + ['@babel/proposal-class-properties', { loose: true }], + ['@babel/plugin-proposal-private-methods', { loose: true }], '@babel/transform-runtime', 'lodash' ], diff --git a/src/assets/css/components/components/common/pagination.scss b/src/assets/css/components/components/common/pagination.scss index be6b8294..f7389ad5 100644 --- a/src/assets/css/components/components/common/pagination.scss +++ b/src/assets/css/components/components/common/pagination.scss @@ -66,3 +66,11 @@ border-color: rgba(154,154,154,0.20); } } +.entity__pagination .pagination { + .el-pager li.more + li { + display: none; + } + .el-pager li.number:not(:last-of-type) { + display: inline-block !important; + } +} diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss index d5e97407..c845b091 100644 --- a/src/assets/css/components/views/charts/chartSingleValue.scss +++ b/src/assets/css/components/views/charts/chartSingleValue.scss @@ -201,7 +201,7 @@ .content__title { display: flex; - align-items: end; + align-items: flex-end; height: 50%; font-size: 16px; color: #666666; diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss index ccf30365..8f204d34 100644 --- a/src/assets/css/components/views/charts/panel.scss +++ b/src/assets/css/components/views/charts/panel.scss @@ -131,7 +131,7 @@ } .header__operations { display: flex; - justify-content: end; + justify-content: flex-end; align-items: center; .header__operation-btn { @@ -225,7 +225,7 @@ border-bottom: 1px solid $--content-right-background-color; .header__operations { display: flex; - justify-content: end; + justify-content: flex-end; align-items: center; .header__operation.header__operation--echarts { diff --git a/src/assets/css/components/views/detections/detection-overview.scss b/src/assets/css/components/views/detections/detection-overview.scss index 0a7b2c51..1cb56c55 100644 --- a/src/assets/css/components/views/detections/detection-overview.scss +++ b/src/assets/css/components/views/detections/detection-overview.scss @@ -8,6 +8,18 @@ display: flex; flex-direction: column; + .overview__metric { + display:flex; + flex-direction: row; + padding-top: 10px; + + .metric__column { + display:flex; + flex-direction: column; + margin-right: 15px; + } + } + .overview__title { padding: 10px 0; color: #333; @@ -33,6 +45,19 @@ color: #6B717B; } + .row__charts { + height: 20px; + width: 80px; + } + + .row__content--metric { + display: flex; + flex-wrap: nowrap; + color: #666666; + font-size:14px; + font-weight: 400; + } + .row__content { display: flex; color: #3976CB; diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css index 537462f7..ed4822a6 100644 --- a/src/assets/css/font/iconfont.css +++ b/src/assets/css/font/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "cn-icon"; /* Project id 2614877 */ - src: url('iconfont.woff2?t=1647073084945') format('woff2'), - url('iconfont.woff?t=1647073084945') format('woff'), - url('iconfont.ttf?t=1647073084945') format('truetype'); + src: url('iconfont.woff2?t=1647594989129') format('woff2'), + url('iconfont.woff?t=1647594989129') format('woff'), + url('iconfont.ttf?t=1647594989129') format('truetype'); } .cn-icon { @@ -13,6 +13,18 @@ -moz-osx-font-smoothing: grayscale; } +.cn-icon-domain2:before { + content: "\e767"; +} + +.cn-icon-ip2:before { + content: "\e768"; +} + +.cn-icon-app2:before { + content: "\e769"; +} + .cn-icon-intercept:before { content: "\e600"; } diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js index 004c214c..7edf9492 100644 --- a/src/assets/css/font/iconfont.js +++ b/src/assets/css/font/iconfont.js @@ -1 +1 @@ -!function(c){var a,l,h,o,i,m='',v=(v=document.getElementsByTagName("script"))[v.length-1].getAttribute("data-injectcss"),t=function(c,a){a.parentNode.insertBefore(c,a)};if(v&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function z(){i||(i=!0,h())}function n(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(n,50)}z()}a=function(){var c,a=document.createElement("div");a.innerHTML=m,m=null,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(c=document.body).firstChild?t(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),a()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=a,o=c.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,z())})}(window); \ No newline at end of file +!function(c){var a,l,h,o,i,m='',v=(v=document.getElementsByTagName("script"))[v.length-1].getAttribute("data-injectcss"),z=function(c,a){a.parentNode.insertBefore(c,a)};if(v&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function t(){i||(i=!0,h())}function n(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(n,50)}t()}a=function(){var c,a=document.createElement("div");a.innerHTML=m,m=null,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(c=document.body).firstChild?z(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),a()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=a,o=c.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())})}(window); \ No newline at end of file diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf index 9f6b0d97..54c12903 100644 Binary files a/src/assets/css/font/iconfont.ttf and b/src/assets/css/font/iconfont.ttf differ diff --git a/src/assets/css/font/iconfont.woff b/src/assets/css/font/iconfont.woff index b236117a..2adfc108 100644 Binary files a/src/assets/css/font/iconfont.woff and b/src/assets/css/font/iconfont.woff differ diff --git a/src/assets/css/font/iconfont.woff2 b/src/assets/css/font/iconfont.woff2 index 5490c39e..f5a56093 100644 Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue index 1cf77745..99b0ec7e 100644 --- a/src/components/common/Pagination.vue +++ b/src/components/common/Pagination.vue @@ -9,7 +9,7 @@ :current-page="pageObj.pageNo" :page-sizes="pageSizes?pageSizes:[20, 50, 100]" :page-size="Number(pageObj.pageSize)" - layout="total, prev, pager, next, slot" + :layout="layout" :total="pageObj.total" > @@ -31,7 +31,11 @@ export default { tableId: {}, postPageSizes: {}, appendToBody: { default: true }, - popClass: {} + popClass: {}, + layout: { + type: String, + default: 'total, prev, pager, next, slot' + } }, data () { return { diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue index ea95d659..4da5a0ca 100644 --- a/src/components/entities/EntityList.vue +++ b/src/components/entities/EntityList.vue @@ -171,15 +171,15 @@ export default { let className switch (this.from) { case ('ip'): { - className = 'cn-icon cn-icon-ip ip-green' + className = 'cn-icon cn-icon-ip2 ip-green' break } case ('domain'): { - className = 'cn-icon cn-icon-domain domain-blue' + className = 'cn-icon cn-icon-domain2 domain-blue' break } case ('app'): { - className = 'cn-icon cn-icon-app app-orange' + className = 'cn-icon cn-icon-app2 app-orange' break } default: break diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 6efc43a4..00ee384e 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -18,7 +18,7 @@ - + {{value}} diff --git a/src/views/detections/overview/DetectionSecurityEventOverview.vue b/src/views/detections/overview/DetectionSecurityEventOverview.vue index 6a0e3402..68df03a3 100644 --- a/src/views/detections/overview/DetectionSecurityEventOverview.vue +++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue @@ -173,9 +173,7 @@ {{ $t('detections.viewDetailOf') }}   {{ basicInfo.victimIp }} + @click="goDetail('ip', basicInfo.victimIp)">{{ basicInfo.victimIp }}
{{ $t('detections.goToOffender') }}
@@ -287,18 +285,18 @@ import _ from 'lodash' export default { name: 'DetectionOverview', props: { - detection: Object, + detection: Object }, - data() { + data () { return { eventSeverityColor, basicInfo: {}, events: [], - reference: 'https://attack.mitre.org', + reference: 'https://attack.mitre.org' } }, computed: { - formatT0() { + formatT0 () { const vm = this return function (event) { const diffSeconds = event.diffSeconds @@ -318,7 +316,7 @@ export default { unitTypes.time, 's', null, - 0, + 0 ).join('') if (eventStartTime > entityStartTime) { return `T0+${suffix}` @@ -328,26 +326,26 @@ export default { } return '' } - }, + } }, methods: { getMillisecond, - query() { + query () { Promise.all([this.queryBasic(), this.queryEvent()]).then((responses) => { responses[0] && (this.basicInfo = responses[0]) responses[1] && (this.events = responses[1].sort( - (e1, e2) => e1.startTime - e2.startTime, + (e1, e2) => e1.startTime - e2.startTime )) }) }, - queryBasic() { + queryBasic () { return new Promise((resolve, reject) => { try { get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId, startTime: this.detection.startTime, - endTime: this.detection.endTime, + endTime: this.detection.endTime }).then((response) => { if (response.code === 200) { resolve(response.data.result[0]) @@ -360,13 +358,13 @@ export default { } }) }, - queryEvent() { + queryEvent () { return new Promise((resolve, reject) => { try { get(api.detection.securityEvent.overviewEvent, { startTime: this.detection.startTime, offenderIp: this.detection.offenderIp, - victimIp: this.detection.victimIp, + victimIp: this.detection.victimIp }).then((response) => { if (response.code === 200) { resolve(response.data.result) @@ -379,19 +377,19 @@ export default { } }) }, - goDetail(type, name) { + goDetail (type, name) { const { href } = this.$router.resolve({ path: '/entityDetail', query: { entityType: type, - name: name, - }, + name: name + } }) window.open(href, '_blank') - }, + } }, - mounted() { + mounted () { this.query() - }, + } } diff --git a/src/views/entityExplorer/EntityDetail.vue b/src/views/entityExplorer/EntityDetail.vue index 228b77da..2cf998fe 100644 --- a/src/views/entityExplorer/EntityDetail.vue +++ b/src/views/entityExplorer/EntityDetail.vue @@ -110,15 +110,15 @@ export default { let className switch (this.entityData.entityType) { case ('ip'): { - className = 'cn-icon cn-icon-ip' + className = 'cn-icon cn-icon-ip2' break } case ('domain'): { - className = 'cn-icon cn-icon-domain' + className = 'cn-icon cn-icon-domain2' break } case ('app'): { - className = 'cn-icon cn-icon-app' + className = 'cn-icon cn-icon-app2' break } default: break diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue index 54a9e016..9529525e 100644 --- a/src/views/entityExplorer/EntityExplorer.vue +++ b/src/views/entityExplorer/EntityExplorer.vue @@ -259,169 +259,7 @@ export default { q: '', metaList: [], limitFilterType: true, // 是否限定了filter的类型 - listLoading: false/*, - listData: JSON.parse(`[ - { - "entityType": "app", - "appName": "360cn", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "domainCategory": "Streaming Media", - "domainCategoryGroup": "IT Resources", - "domainReputationScore": 79, - "domainName": "9ddm.com", - "entityType": "domain", - "domainReputationLevel": "Low Risk" - }, - { - "ipAsn": "", - "ipLocationCountry": "China", - "entityType": "ip", - "ipLocationProvince": "Other", - "ipAddr": "116.178.30.96", - "ipLocationCity": "Other" - }, - { - "entityType": "app", - "appName": "youku", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "qqmusic", - "appCategory": "media", - "appId": "", - "appRisk": "3", - "appSubcategory": "multimedia-streaming" - }, - { - "entityType": "app", - "appName": "meituan", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "sohu", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "mqtt", - "appCategory": "networking", - "appId": "", - "appRisk": "1", - "appSubcategory": "remote-access" - }, - { - "entityType": "app", - "appName": "adjust", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "tiktok", - "appCategory": "media", - "appId": "", - "appRisk": "2", - "appSubcategory": "photo-video" - }, - { - "entityType": "app", - "appName": "4399com", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "ixigua", - "appCategory": "media", - "appId": "", - "appRisk": "1", - "appSubcategory": "Multimedia-streaming" - }, - { - "entityType": "app", - "appName": "oicq", - "appCategory": "collaboration", - "appId": "", - "appRisk": "1", - "appSubcategory": "instant-messaging" - }, - { - "entityType": "app", - "appName": "digicert", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "rdp", - "appCategory": "networking", - "appId": "", - "appRisk": "4", - "appSubcategory": "remote-access" - }, - { - "entityType": "app", - "appName": "163com", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "meitu", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "gitv_tv", - "appCategory": "media", - "appId": "", - "appRisk": "1", - "appSubcategory": "Multimedia-streaming" - }, - { - "entityType": "app", - "appName": "tencent", - "appCategory": "general-internet", - "appId": "", - "appRisk": "1", - "appSubcategory": "internet-utility" - }, - { - "entityType": "app", - "appName": "thunder", - "appCategory": "networking", - "appId": "", - "appRisk": "1", - "appSubcategory": "infrastructure" - } - ]`) */ + listLoading: false } }, methods: { diff --git a/src/views/entityExplorer/entityList/Row.vue b/src/views/entityExplorer/entityList/Row.vue index e0cd5213..9578b5ec 100644 --- a/src/views/entityExplorer/entityList/Row.vue +++ b/src/views/entityExplorer/entityList/Row.vue @@ -154,14 +154,14 @@
{{ $t('entities.recentAlert') }} :   - {{ entityData.alertCount || '-' }} + {{ entityData.performanceCount}}
{{ $t('entities.recentSecurity') }} :   - {{ entityData.securityCount || '-' }} + {{ entityData.securityCount}}
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index b844cc95..151f88ba 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -4,19 +4,23 @@
APP ID
-
{{entityData.appId|| '-'}}
+
{{entity.appId|| '-'}}
{{$t('entities.category')}}
-
{{entityData.appCategory|| '-'}}
+
{{entity.appCategory|| '-'}}
{{$t('entities.subcategory')}}
-
{{entityData.appSubcategory || '-'}}
+
{{entity.appSubcategory || '-'}}
{{$t('entities.riskLevel')}}
-
{{appRisk(entityData.appRisk) || '-'}}
+
{{appRisk(entity.appRisk) || '-'}}
+
+
+
{{$t('overall.remark')}}
+
{{entity.appDescription || '-'}}
@@ -131,17 +135,17 @@
{{$t('entities.recentAlert')}}
-
{{entityData.alertNum || '-'}}
+
{{entityData.performanceNum || '-'}}
-
-
{{alert.startTime}}
+
+
{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}
-
{{alert.alertSeverity}}
-
{{alert.alertName}}
+
{{performance.eventSeverity}}
+
{{performance.eventType}}
-
+
{{$t('overall.showMore')}}>>
@@ -154,10 +158,10 @@
{{entityData.securityNum || '-'}}
-
{{security.startTime}}
+
{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}
-
{{security.securitySeverity}}
-
{{security.sourceName}}
+
{{security.eventSeverity}}
+
{{security.securityType}}
@@ -188,6 +192,7 @@ import _ from 'lodash' import ChartSingleValue from '@/views/charts/charts/ChartSingleValue' import { get } from '@/utils/http' import relatedServer from '@/mixins/relatedServer' +import { getSecond, getMillisecond } from '@/utils/date-util' export default { name: 'App', @@ -205,7 +210,7 @@ export default { networkQuantityUrl: api.entityAppDetailNetworkQuantity, linkInUrl: api.entityAppDetailLinkIn, linkOutUrl: api.entityAppDetailLinkOut, - alertUrl: api.entityAppDetailAlert, + performanceUrl: api.entityAppDetailPerformance, securityUrl: api.entityAppDetailSecurity, trafficUrlMap: api.entityAppDetailTrafficMap, relatedServerDomainUrl: api.entityAppRelatedServerDomain, @@ -260,10 +265,11 @@ export default { } }, methods: { + getMillisecond, getQueryParams () { const queryParams = { - startTime: parseInt(this.timeFilter.startTime / 1000), - endTime: parseInt(this.timeFilter.endTime / 1000), + startTime: getSecond(this.timeFilter.startTime), + endTime: getSecond(this.timeFilter.endTime), appName: this.entity.appName } return queryParams diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index 21a3e35b..81ca371d 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue @@ -139,17 +139,17 @@
{{$t('entities.recentAlert')}}
-
{{entityData.alertNum || '-'}}
+
{{entityData.performanceNum || '-'}}
-
-
{{alert.startTime}}
+
+
{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}
-
{{alert.alertSeverity}}
-
{{alert.alertName}}
+
{{performance.eventSeverity}}
+
{{performance.eventType}}
-
+
{{$t('overall.showMore')}}>>
@@ -162,10 +162,10 @@
{{entityData.securityNum || '-'}}
-
{{security.startTime}}
+
{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}
-
{{security.securitySeverity}}
-
{{security.sourceName}}
+
{{security.eventSeverity}}
+
{{security.securityType}}
@@ -196,6 +196,8 @@ import Chart from '@/views/charts/Chart' import _ from 'lodash' import { get } from '@/utils/http' import relatedServer from '@/mixins/relatedServer' +import { getSecond, getMillisecond } from '@/utils/date-util' + export default { name: 'Domain', components: { @@ -212,7 +214,7 @@ export default { networkQuantityUrl: api.entityDomainDetailNetworkQuantity, linkInUrl: api.entityDomainDetailLinkIn, linkOutUrl: api.entityDomainDetailLinkOut, - alertUrl: api.entityDomainDetailAlert, + performanceUrl: api.entityDomainDetailPerformance, securityUrl: api.entityDomainDetailSecurity, trafficUrlMap: api.entityDomainDetailTrafficMap, relatedServerIpUrl: api.entityDomainRelatedServerIp, @@ -268,10 +270,11 @@ export default { } }, methods: { + getMillisecond, getQueryParams () { const queryParams = { - startTime: parseInt(this.timeFilter.startTime / 1000), - endTime: parseInt(this.timeFilter.endTime / 1000), + startTime: getSecond(this.timeFilter.startTime), + endTime: getSecond(this.timeFilter.endTime), domain: this.entity.domainName } return queryParams diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 84bbae50..9bb16f0d 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -123,17 +123,17 @@
{{$t('entities.recentAlert')}}
-
{{entityData.alertNum || '-'}}
+
{{entityData.performanceNum || '-'}}
-
-
{{alert.startTime}}
+
+
{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}
-
{{alert.alertSeverity}}
-
{{alert.alertName}}
+
{{performance.eventSeverity}}
+
{{performance.eventType}}
-
+
{{$t('overall.showMore')}}>>
@@ -146,10 +146,10 @@
{{entityData.securityNum || '-'}}
-
{{security.startTime}}
+
{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}
-
{{security.securitySeverity}}
-
{{security.sourceName}}
+
{{security.eventSeverity}}
+
{{security.securityType}}
@@ -180,6 +180,7 @@ import Chart from '@/views/charts/Chart' import _ from 'lodash' import { get } from '@/utils/http' import relatedServer from '@/mixins/relatedServer' +import { getSecond, getMillisecond } from '@/utils/date-util' export default { name: 'Ip', @@ -190,7 +191,6 @@ export default { }, data () { return { - // entityData: {} entityType: 'ip', trafficUrl: api.entityIpDetailTraffic, trafficUrlMap: api.entityIpDetailTrafficMap, @@ -198,7 +198,7 @@ export default { networkQuantityUrl: api.entityIpDetailNetworkQuantity, linkInUrl: api.entityIpDetailLinkIn, linkOutUrl: api.entityIpDetailLinkOut, - alertUrl: api.entityIpDetailAlert, + performanceUrl: api.entityIpDetailPerformance, securityUrl: api.entityIpDetailSecurity, relatedServerDomainUrl: api.entityIpRelatedServerDomain, relatedServerAppUrl: api.entityIpRelatedServerApp, @@ -272,10 +272,11 @@ export default { } }, methods: { + getMillisecond, getQueryParams () { const queryParams = { - startTime: parseInt(this.timeFilter.startTime / 1000), - endTime: parseInt(this.timeFilter.endTime / 1000), + startTime: getSecond(this.timeFilter.startTime), + endTime: getSecond(this.timeFilter.endTime), ip: this.entity.ipAddr } return queryParams diff --git a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js index ce5b08a8..e9dacf80 100644 --- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js +++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js @@ -74,7 +74,7 @@ export default { this.entityData.p50 = t.aggregation.p50 this.entityData.p90 = t.aggregation.p90 } else if (t.legend === 'bytesSentRate') { - this.entityData.bytesSentRate = _.nth(t.values,-3)[1] + this.entityData.bytesSentRate = _.nth(t.values, -3)[1] this.chartOptionSent = { ...this.chartOption, series: [ @@ -90,7 +90,7 @@ export default { } }, color: '#69b072', - data: _.dropRight(t.values,2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]), + data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]), showSymbol: false } ] @@ -212,11 +212,11 @@ export default { } }, - queryEntityDetailAlert () { - get(this.alertUrl, this.getQueryParams()).then(response => { + queryEntityDetailPerformance () { + get(this.performanceUrl, this.getQueryParams()).then(response => { if (response.code === 200) { - this.entityData.alertNum = response.data.result.length - this.entityData.alertList = response.data.result + this.entityData.performanceNum = response.data.result.length + this.entityData.performanceList = response.data.result } }) }, @@ -232,8 +232,7 @@ export default { queryEntityDetail () { this.queryEntityDetailTraffic() - // this.queryEntityDetailRelation() - this.queryEntityDetailAlert() + this.queryEntityDetailPerformance() this.queryEntityDetailSecurity() this.queryEntityDetailNetworkQuantity() this.queryEntityDetailLinkOutUrl() diff --git a/src/views/entityExplorer/entityList/entityListMixin.js b/src/views/entityExplorer/entityList/entityListMixin.js index ee2bedfd..03321be3 100644 --- a/src/views/entityExplorer/entityList/entityListMixin.js +++ b/src/views/entityExplorer/entityList/entityListMixin.js @@ -4,6 +4,7 @@ import { api } from '@/utils/api' import * as echarts from 'echarts' import { entityListLineOption } from '@/views/charts/charts/chart-options' import { riskLevelMapping, unitTypes } from '@/utils/constants' +import { getSecond } from '@/utils/date-util' export default { props: { @@ -22,15 +23,15 @@ export default { let className switch (this.entityData.entityType) { case ('ip'): { - className = 'cn-icon cn-icon-ip' + className = 'cn-icon cn-icon-ip2' break } case ('domain'): { - className = 'cn-icon cn-icon-domain' + className = 'cn-icon cn-icon-domain2' break } case ('app'): { - className = 'cn-icon cn-icon-app' + className = 'cn-icon cn-icon-app2' break } default: break @@ -149,27 +150,61 @@ export default { }, querySecurity () { const queryParams = { - startTime: parseInt(this.timeFilter.startTime / 1000), - endTime: parseInt(this.timeFilter.endTime / 1000), - entityType: this.entityData.entityType, - name: this.entityName + startTime: getSecond(this.timeFilter.startTime), + endTime: getSecond(this.timeFilter.endTime) } - get(api.entitySecurityNum, queryParams).then(response => { + let url + switch (this.entityData.entityType) { + case ('ip'): { + url = api.entityIpDetailSecurity + queryParams.ip = this.entityName + break + } + case ('domain'): { + url = api.entityDomainDetailSecurity + queryParams.domain = this.entityName + break + } + case ('app'): { + url = api.entityAppDetailSecurity + queryParams.appName = this.entityName + break + } + default: break + } + get(url, queryParams).then(response => { if (response.code === 200) { - this.entityData.securityCount = response.data.result[0].count + this.entityData.securityCount = response.data.result && response.data.result.length } }) }, - queryAlert () { + queryPerformance () { const queryParams = { - startTime: parseInt(this.timeFilter.startTime / 1000), - endTime: parseInt(this.timeFilter.endTime / 1000), - entityType: this.entityData.entityType, - name: this.entityName + startTime: getSecond(this.timeFilter.startTime), + endTime: getSecond(this.timeFilter.endTime) } - get(api.entityAlertNum, queryParams).then(response => { + let url + switch (this.entityData.entityType) { + case ('ip'): { + url = api.entityIpDetailPerformance + queryParams.ip = this.entityName + break + } + case ('domain'): { + url = api.entityDomainDetailPerformance + queryParams.domain = this.entityName + break + } + case ('app'): { + url = api.entityAppDetailPerformance + queryParams.appName = this.entityName + break + } + default: break + } + get(url, queryParams).then(response => { if (response.code === 200) { - this.entityData.alertCount = response.data.result[0].value + this.entityData.performanceCount = response.data.result && response.data.result.length } }) }, @@ -259,7 +294,7 @@ export default { this.entityData = _.cloneDeep(this.entity) setTimeout(() => { this.queryTraffic() }) setTimeout(() => { this.querySecurity() }) - setTimeout(() => { this.queryAlert() }) + setTimeout(() => { this.queryPerformance() }) if (this.listMode === 'block') { setTimeout(() => { this.queryTrafficLine() }) } diff --git a/src/views/entityExplorer/search/ExplorerSearch.vue b/src/views/entityExplorer/search/ExplorerSearch.vue index 1199cfe0..15b88f9c 100644 --- a/src/views/entityExplorer/search/ExplorerSearch.vue +++ b/src/views/entityExplorer/search/ExplorerSearch.vue @@ -67,8 +67,7 @@ export default { { name: 'entity_type', type: 'string', - // label: this.$t('overall.type') - label: 'Type' + label: 'Entity type' }, { name: 'ip_addr', @@ -78,31 +77,42 @@ export default { { name: 'ip_location_country', type: 'string', - // label: this.$t('overall.country') - label: 'Country' + label: 'IP.Country' }, { name: 'ip_location_province', type: 'string', - // label: this.$t('overall.province') - label: 'Province' + label: 'IP.Province' }, { name: 'ip_location_city', type: 'string', - // label: this.$t('overall.city') - label: 'City' + label: 'IP.City' }, { name: 'ip_asn', type: 'string', - // label: this.$t('entities.asn') - label: 'ASN' + label: 'IP.ASN' }, { - name: 'ip_os', + name: 'dns_server_role', type: 'string', - label: 'OS' + label: 'IP.DNS server role' + }, + { + name: 'dns_server_org', + type: 'string', + label: 'IP.DNS server organization' + }, + { + name: 'dns_server_os', + type: 'string', + label: 'IP.Operating system' + }, + { + name: 'dns_server_software', + type: 'string', + label: 'IP.DNS server software' }, { name: 'domain_name', @@ -112,84 +122,122 @@ export default { { name: 'domain_category', type: 'string', - // label: this.$t('entities.domainCategory') - label: 'Domain category' + label: 'Domain.Category' }, { name: 'domain_category_group', type: 'string', - // label: this.$t('entities.domainDetail.categoryGroup') - label: 'Domain category group' - }, - { - name: 'domain_reputation_score', - type: 'long', - // label: this.$t('entities.domainDetail.reputationValue') - label: 'Domain reputation score' + label: 'Domain.Category group' }, { name: 'domain_reputation_level', type: 'string', - // label: this.$t('entities.reputationLevel') - label: 'Domain reputation level' + label: 'Domain.Reputation' }, { name: 'domain_whois_email', type: 'string', - label: 'Domain whois email' + label: 'Domain.Whois email' }, { name: 'domain_whois_name_servers', type: 'string', - label: 'Domain whois ns' + label: 'Domain.Whois nameserver' }, { name: 'domain_whois_registrar', type: 'string', - label: 'Domain whois registrar' + label: 'Domain.Whois registrar' }, { name: 'domain_whois_org', type: 'string', - label: 'Domain whois organization' + label: 'Domain.Whois organization' + }, + { + name: 'domain_whois_address', + type: 'string', + label: 'Domain.Whois address' }, { name: 'domain_whois_city', type: 'string', - label: 'Domain whois city' + label: 'Domain.Whois city' }, { name: 'domain_whois_state', type: 'string', - label: 'Domain whois state' + label: 'Domain.Whois state' }, { name: 'domain_whois_country', type: 'string', - label: 'Domain whois country' + label: 'Domain.Whois country' + }, + { + name: 'domain_icp_owner', + type: 'string', + label: 'Domain.ICP owner' + }, + { + name: 'domain_icp_company_name', + type: 'string', + label: 'Domain.ICP company' + }, + { + name: 'domain_icp_company_type', + type: 'string', + label: 'Domain.ICP company type' + }, + { + name: 'domain_icp_site_license', + type: 'string', + label: 'Domain.ICP site license' + }, + { + name: 'domain_icp_site_name', + type: 'string', + label: 'Domain.ICP site' }, { name: 'app_name', type: 'string', label: 'APP' }, + { + name: 'app_id', + type: 'string', + label: 'APP.ID' + }, { name: 'app_category', type: 'string', - // label: this.$t('trafficSummary.appCategory') - label: 'APP category' + label: 'APP.Category' }, { name: 'app_subcategory', type: 'string', - // label: this.$t('entities.domainDetail.appSubcategory') - label: 'APP subcategory' + label: 'APP.Subcategory' }, { name: 'app_risk', type: 'string', - // label: this.$t('trafficSummary.appRisk') - label: 'APP risk' + label: 'APP.Risk' + }, + { + name: 'app_description', + type: 'string', + label: 'APP.Description' + }, + { + name: 'app_longname', + type: 'string', + label: 'APP.Long name' + }, + { + name: 'app_technology', + type: 'string', + label: 'APP.Technology' } ], operatorList: ['=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'], diff --git a/src/views/testData.js b/src/views/testData.js new file mode 100644 index 00000000..a8acfecd --- /dev/null +++ b/src/views/testData.js @@ -0,0 +1,515 @@ +import unitConvert from '@/utils/unit-convert' +import { unitTypes } from '@/utils/constants' +const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666', + '#73BFDE', '#3BA172', '#FC8452', '#E97CCC', + '#9960B4', '#FEA69E', '#57CBAC', '#63B6AC'] +export const lineData = [ + [28969982733514,772532872894,"2022-03-04 00:00:00"], + [27655234991362,737472933103,"2022-03-04 00:05:00"], + [26925138516067,718003693762,"2022-03-04 00:10:00"], + [29522842016923,787275787118,"2022-03-04 00:15:00"], + [25315943945800,675091838555,"2022-03-04 00:20:00"], + [24971549517943,665907987145,"2022-03-04 00:25:00"], + [24899825440652,663995345084,"2022-03-04 00:30:00"], + [25247379305464,673263448146,"2022-03-04 00:35:00"], + [23363417530377,623024467477,"2022-03-04 00:40:00"], + [22781937328826,607518328769,"2022-03-04 00:45:00"], + [22334875960906,595596692291,"2022-03-04 00:50:00"], + [21625712171831,576685657915,"2022-03-04 00:55:00"], + [21117202081518,563125388840,"2022-03-04 01:00:00"], + [20123617702070,536629805389,"2022-03-04 01:05:00"], + [19202419248804,512064513301,"2022-03-04 01:10:00"], + [18754213565825,500112361755,"2022-03-04 01:15:00"], + [18124255840306,483313489075,"2022-03-04 01:20:00"], + [19837519272799,529000513941,"2022-03-04 01:25:00"], + [16301475125024,434706003334,"2022-03-04 01:30:00"], + [15762406250887,420330833357,"2022-03-04 01:35:00"], + [15458290240500,412221073080,"2022-03-04 01:40:00"], + [14309311385826,381581636955,"2022-03-04 01:45:00"], + [13814278959849,368380772263,"2022-03-04 01:50:00"], + [13335451883308,355612050222,"2022-03-04 01:55:00"], + [12995486528765,346546307434,"2022-03-04 02:00:00"], + [13166511401387,351106970704,"2022-03-04 02:05:00"], + [11490091356144,306402436164,"2022-03-04 02:10:00"], + [11533102061117,307549388296,"2022-03-04 02:15:00"], + [10871792048158,289914454618,"2022-03-04 02:20:00"], + [10121791046211,269914427899,"2022-03-04 02:25:00"], + [9967875245668,265810006551,"2022-03-04 02:30:00"], + [12210204288490,325605447693,"2022-03-04 02:35:00"], + [8575864848104,228689729283,"2022-03-04 02:40:00"], + [8301752853884,221380076104,"2022-03-04 02:45:00"], + [8050811819445,214688315185,"2022-03-04 02:50:00"], + [7778642815575,207430475082,"2022-03-04 02:55:00"], + [8569941208437,228531765558,"2022-03-04 03:00:00"], + [8198759570750,218633588553,"2022-03-04 03:05:00"], + [6656628393357,177510090490,"2022-03-04 03:10:00"], + [6454278312443,172114088332,"2022-03-04 03:15:00"], + [6284559794438,167588261185,"2022-03-04 03:20:00"], + [6019610840169,160522955738,"2022-03-04 03:25:00"], + [5948136061943,158616961652,"2022-03-04 03:30:00"], + [5902670520287,157404547208,"2022-03-04 03:35:00"], + [5504265610957,146780416292,"2022-03-04 03:40:00"], + [5356920067248,142851201793,"2022-03-04 03:45:00"], + [5395947893404,143891943824,"2022-03-04 03:50:00"], + [5431225782305,144832687528,"2022-03-04 03:55:00"], + [5060360621581,134942949909,"2022-03-04 04:00:00"], + [4734877060777,126263388287,"2022-03-04 04:05:00"], + [4896120032211,130563200859,"2022-03-04 04:10:00"], + [4656914516166,124184387098,"2022-03-04 04:15:00"], + [4370447723752,116545272633,"2022-03-04 04:20:00"], + [4552708884362,121405570250,"2022-03-04 04:25:00"], + [4296041295231,114561101206,"2022-03-04 04:30:00"], + [4142572107934,110468589545,"2022-03-04 04:35:00"], + [4241430444184,113104811845,"2022-03-04 04:40:00"], + [4224243392620,112646490470,"2022-03-04 04:45:00"], + [4198266946467,111953785239,"2022-03-04 04:50:00"], + [3858300702268,102888018727,"2022-03-04 04:55:00"], + [3854869214167,102796512378,"2022-03-04 05:00:00"], + [3789374874342,101049996649,"2022-03-04 05:05:00"], + [3610647812809,96283941675,"2022-03-04 05:10:00"], + [3581341904272,95502450781,"2022-03-04 05:15:00"], + [3419585709043,91188952241,"2022-03-04 05:20:00"], + [3439507132019,91720190187,"2022-03-04 05:25:00"], + [3511079821680,93628795245,"2022-03-04 05:30:00"], + [3240669123023,86417843281,"2022-03-04 05:35:00"], + [3231235979808,86166292795,"2022-03-04 05:40:00"], + [3149380897927,83983490611,"2022-03-04 05:45:00"], + [3292441899857,87798450663,"2022-03-04 05:50:00"], + [3324837434174,88662331578,"2022-03-04 05:55:00"], + [3267947498799,87145266635,"2022-03-04 06:00:00"], + [3294621183448,87856564892,"2022-03-04 06:05:00"], + [3445680106467,91884802839,"2022-03-04 06:10:00"], + [3390821619902,90421909864,"2022-03-04 06:15:00"], + [3398196120285,90618563208,"2022-03-04 06:20:00"], + [3304281747967,88114179946,"2022-03-04 06:25:00"], + [3302100743607,88056019830,"2022-03-04 06:30:00"], + [3358226493011,89552706480,"2022-03-04 06:35:00"], + [3556776773250,94847380620,"2022-03-04 06:40:00"], + [3476802054030,92714721441,"2022-03-04 06:45:00"], + [3406187475416,90831666011,"2022-03-04 06:50:00"], + [4416938530654,117785027484,"2022-03-04 06:55:00"], + [3594270288815,95847207702,"2022-03-04 07:00:00"], + [3626775377470,96714010066,"2022-03-04 07:05:00"], + [3565999784799,95093327595,"2022-03-04 07:10:00"], + [3959810819463,105594955186,"2022-03-04 07:15:00"], + [3986304658215,106301457552,"2022-03-04 07:20:00"], + [4201272551124,112033934697,"2022-03-04 07:25:00"], + [4159651840527,110924049081,"2022-03-04 07:30:00"], + [4388957660565,117038870948,"2022-03-04 07:35:00"], + [4585723812812,122285968342,"2022-03-04 07:40:00"], + [4845957647361,129225537263,"2022-03-04 07:45:00"], + [5073862803258,135303008087,"2022-03-04 07:50:00"], + [5423185300814,144618274688,"2022-03-04 07:55:00"], + [6007173373329,160191289955,"2022-03-04 08:00:00"], + [6555173772201,174804633925,"2022-03-04 08:05:00"], + [6351412507869,169371000210,"2022-03-04 08:10:00"], + [6945767585118,185220468936,"2022-03-04 08:15:00"], + [7073454395363,188625450543,"2022-03-04 08:20:00"], + [7620059685888,203201591624,"2022-03-04 08:25:00"], + [8618131474251,229816839313,"2022-03-04 08:30:00"], + [8190582889750,218415543727,"2022-03-04 08:35:00"], + [8516248200631,227099952017,"2022-03-04 08:40:00"], + [8847870579615,235943215456,"2022-03-04 08:45:00"], + [9291696664567,247778577722,"2022-03-04 08:50:00"], + [9813479864123,261692796377,"2022-03-04 08:55:00"], + [10166374951215,271103332032,"2022-03-04 09:00:00"], + [10566660997360,281777626596,"2022-03-04 09:05:00"], + [11198613029954,298629680799,"2022-03-04 09:10:00"], + [11027698150233,294071950673,"2022-03-04 09:15:00"], + [11534686635398,307591643611,"2022-03-04 09:20:00"], + [11778600764516,314096020387,"2022-03-04 09:25:00"], + [12104533073099,322787548616,"2022-03-04 09:30:00"], + [12244570656108,326521884163,"2022-03-04 09:35:00"], + [12615700396885,336418677250,"2022-03-04 09:40:00"], + [12964143713872,345710499037,"2022-03-04 09:45:00"], + [13016114473998,347096385973,"2022-03-04 09:50:00"], + [13252632094282,353403522514,"2022-03-04 09:55:00"], + [13805416715607,368144445750,"2022-03-04 10:00:00"], + [13934744922725,371593197939,"2022-03-04 10:05:00"], + [14127016542407,376720441131,"2022-03-04 10:10:00"], + [14434554026516,384921440707,"2022-03-04 10:15:00"], + [14432110437071,384856278322,"2022-03-04 10:20:00"], + [14649574536632,390655320977,"2022-03-04 10:25:00"], + [14768680014249,393831467047,"2022-03-04 10:30:00"], + [14910852414432,397622731052,"2022-03-04 10:35:00"], + [15294731712930,407859512345,"2022-03-04 10:40:00"], + [15354741150417,409459764011,"2022-03-04 10:45:00"], + [15372120739418,409923219718,"2022-03-04 10:50:00"], + [15652062314015,417388328374,"2022-03-04 10:55:00"], + [15790550169279,421081337847,"2022-03-04 11:00:00"], + [15974814432383,425995051530,"2022-03-04 11:05:00"], + [18106420031673,482837867511,"2022-03-04 11:10:00"], + [15964304282474,425714780866,"2022-03-04 11:15:00"], + [15866249649602,423099990656,"2022-03-04 11:20:00"], + [16138677050405,430364721344,"2022-03-04 11:25:00"], + [16372432990421,436598213078,"2022-03-04 11:30:00"], + [16533202568615,440885401830,"2022-03-04 11:35:00"], + [17045752272964,454553393946,"2022-03-04 11:40:00"], + [16981335555512,452835614814,"2022-03-04 11:45:00"], + [17118154627460,456484123399,"2022-03-04 11:50:00"], + [17148391455384,457290438810,"2022-03-04 11:55:00"], + [17470154502790,465870786741,"2022-03-04 12:00:00"], + [17568308659292,468488230914,"2022-03-04 12:05:00"], + [17773841618441,473969109825,"2022-03-04 12:10:00"], + [17781079987430,474162132998,"2022-03-04 12:15:00"], + [17990021005772,479733893487,"2022-03-04 12:20:00"], + [18384547822059,490254608588,"2022-03-04 12:25:00"], + [18460819489936,492288519732,"2022-03-04 12:30:00"], + [18490806709057,493088178908,"2022-03-04 12:35:00"], + [18412730482192,491006146192,"2022-03-04 12:40:00"], + [18553258883770,494753570234,"2022-03-04 12:45:00"], + [18669863379552,497863023455,"2022-03-04 12:50:00"], + [19963735697348,532366285263,"2022-03-04 12:55:00"], + [18376553533228,490041427553,"2022-03-04 13:00:00"], + [18558850510486,494902680280,"2022-03-04 13:05:00"], + [18679720275525,498125874014,"2022-03-04 13:10:00"], + [18950990373556,505359743295,"2022-03-04 13:15:00"], + [18912683201075,504338218695,"2022-03-04 13:20:00"], + [18953166427540,505417771401,"2022-03-04 13:25:00"], + [19088811649287,509034977314,"2022-03-04 13:30:00"], + [19195979674584,511892791322,"2022-03-04 13:35:00"], + [19353757750157,516100206671,"2022-03-04 13:40:00"], + [19623023814087,523280635042,"2022-03-04 13:45:00"], + [20006183846599,533498235909,"2022-03-04 13:50:00"], + [20129862506855,536796333516,"2022-03-04 13:55:00"], + [20690589312453,551749048332,"2022-03-04 14:00:00"], + [20817415642015,555131083787,"2022-03-04 14:05:00"], + [21227766113590,566073763029,"2022-03-04 14:10:00"], + [21468895104362,572503869450,"2022-03-04 14:15:00"], + [21814949310487,581731981613,"2022-03-04 14:20:00"], + [22049560972841,587988292609,"2022-03-04 14:25:00"], + [22520902322071,600557395255,"2022-03-04 14:30:00"], + [22717789840723,605807729086,"2022-03-04 14:35:00"], + [25977481697643,692732845270,"2022-03-04 14:40:00"], + [21169021431468,564507238172,"2022-03-04 14:45:00"], + [21185682154079,564951524109,"2022-03-04 14:50:00"], + [21213274986598,565687332976,"2022-03-04 14:55:00"], + [22852488297521,609399687934,"2022-03-04 15:00:00"], + [20180887262764,538156993674,"2022-03-04 15:05:00"], + [20262326460868,540328705623,"2022-03-04 15:10:00"], + [19957329914253,532195464380,"2022-03-04 15:15:00"], + [19540290479846,521074412796,"2022-03-04 15:20:00"], + [19381049642638,516827990470,"2022-03-04 15:25:00"], + [19371501072878,516573361943,"2022-03-04 15:30:00"], + [19195290832621,511874422203,"2022-03-04 15:35:00"], + [19074211930206,508645651472,"2022-03-04 15:40:00"], + [18985114573233,506269721953,"2022-03-04 15:45:00"], + [18986918180614,506317818150,"2022-03-04 15:50:00"], + [18967837386524,505808996974,"2022-03-04 15:55:00"], + [18807707047729,501538854606,"2022-03-04 16:00:00"], + [19012905978812,507010826102,"2022-03-04 16:05:00"], + [20562508930526,548333571481,"2022-03-04 16:10:00"], + [18338426278704,489024700765,"2022-03-04 16:15:00"], + [18524673457921,493991292211,"2022-03-04 16:20:00"], + [18839461266122,502385633763,"2022-03-04 16:25:00"], + [18840101405285,502402704141,"2022-03-04 16:30:00"], + [18834745820616,502259888550,"2022-03-04 16:35:00"], + [19498057758493,519948206893,"2022-03-04 16:40:00"], + [18983988305868,506239688156,"2022-03-04 16:45:00"], + [20375548066233,543347948433,"2022-03-04 16:50:00"], + [18694198464973,498511959066,"2022-03-04 16:55:00"], + [19224086887778,512642317007,"2022-03-04 17:00:00"], + [19234955299191,512932141312,"2022-03-04 17:05:00"], + [19241735704890,513112952130,"2022-03-04 17:10:00"], + [19689558526944,525054894052,"2022-03-04 17:15:00"], + [19512222588749,520325935700,"2022-03-04 17:20:00"], + [19771517781318,527240474168,"2022-03-04 17:25:00"], + [19635672658400,523617937557,"2022-03-04 17:30:00"], + [19851175792287,529364687794,"2022-03-04 17:35:00"], + [20084780673112,535594151283,"2022-03-04 17:40:00"], + [19971398581725,532570628846,"2022-03-04 17:45:00"], + [19857295439822,529527878395,"2022-03-04 17:50:00"], + [19872338682121,529929031523,"2022-03-04 17:55:00"], + [19796261122491,527900296600,"2022-03-04 18:00:00"], + [19782809702179,527541592058,"2022-03-04 18:05:00"], + [19839234416622,529046251110,"2022-03-04 18:10:00"], + [20465886156507,545756964174,"2022-03-04 18:15:00"], + [20122679882572,536604796869,"2022-03-04 18:20:00"], + [20289864215593,541063045749,"2022-03-04 18:25:00"], + [20434921600336,544931242676,"2022-03-04 18:30:00"], + [20669436913095,551184984349,"2022-03-04 18:35:00"], + [20817112208239,555122992220,"2022-03-04 18:40:00"], + [21646842996895,577249146584,"2022-03-04 18:45:00"], + [21523247456176,573953265498,"2022-03-04 18:50:00"], + [21135907030527,563624187481,"2022-03-04 18:55:00"], + [21731228167496,579499417800,"2022-03-04 19:00:00"], + [21555331268992,574808833840,"2022-03-04 19:05:00"], + [21448235081778,571952935514,"2022-03-04 19:10:00"], + [21876037548520,583361001294,"2022-03-04 19:15:00"], + [21955699128376,585485310090,"2022-03-04 19:20:00"], + [22338536796271,595694314567,"2022-03-04 19:25:00"], + [22290878986561,594423439642,"2022-03-04 19:30:00"], + [22696524500427,605240653345,"2022-03-04 19:35:00"], + [22883190465854,610218412423,"2022-03-04 19:40:00"], + [22865109623699,609736256632,"2022-03-04 19:45:00"], + [23463713109730,625699016259,"2022-03-04 19:50:00"], + [23561285058428,628300934891,"2022-03-04 19:55:00"], + [23703339789957,632089061066,"2022-03-04 20:00:00"], + [24166899328339,644450648756,"2022-03-04 20:05:00"], + [24447031010328,651920826942,"2022-03-04 20:10:00"], + [24608672777197,656231274059,"2022-03-04 20:15:00"], + [25275462425767,674012331354,"2022-03-04 20:20:00"], + [25198372992317,671956613128,"2022-03-04 20:25:00"], + [25647780613614,683940816363,"2022-03-04 20:30:00"], + [25625250554055,683340014775,"2022-03-04 20:35:00"], + [25480742337277,679486462327,"2022-03-04 20:40:00"], + [25832082625742,688855536686,"2022-03-04 20:45:00"], + [26231695749025,699511886641,"2022-03-04 20:50:00"], + [26735506293998,712946834507,"2022-03-04 20:55:00"], + [27091127815174,722430075071,"2022-03-04 21:00:00"], + [27277891781922,727410447518,"2022-03-04 21:05:00"], + [27528934099470,734104909319,"2022-03-04 21:10:00"], + [28294252754307,754513406782,"2022-03-04 21:15:00"], + [28578676115585,762098029749,"2022-03-04 21:20:00"], + [28723861609291,765969642914,"2022-03-04 21:25:00"], + [28624746916514,763326584440,"2022-03-04 21:30:00"], + [29567967418560,788479131162,"2022-03-04 21:35:00"], + [29459425404208,785584677446,"2022-03-04 21:40:00"], + [29566556067019,788441495121,"2022-03-04 21:45:00"], + [30572964671261,815279057900,"2022-03-04 21:50:00"], + [30329564491753,808788386447,"2022-03-04 21:55:00"], + [31664399376903,844383983384,"2022-03-04 22:00:00"], + [31116443452479,829771825399,"2022-03-04 22:05:00"], + [31378469745516,836759193214,"2022-03-04 22:10:00"], + [31658679635004,844231456933,"2022-03-04 22:15:00"], + [31875840546222,850022414566,"2022-03-04 22:20:00"], + [32289185521687,861044947245,"2022-03-04 22:25:00"], + [32417837401154,864475664031,"2022-03-04 22:30:00"], + [32346688630505,862578363480,"2022-03-04 22:35:00"], + [33016598180193,880442618138,"2022-03-04 22:40:00"], + [33146008154865,883893550796,"2022-03-04 22:45:00"], + [33268634987419,887163599665,"2022-03-04 22:50:00"], + [33397396256547,890597233508,"2022-03-04 22:55:00"], + [33844643741649,902523833111,"2022-03-04 23:00:00"], + [33958156438588,905550838362,"2022-03-04 23:05:00"], + [33894723651827,903859297382,"2022-03-04 23:10:00"], + [38141959774630,1017118927323,"2022-03-04 23:15:00"], + [32317662070360,861804321876,"2022-03-04 23:20:00"], + [32413119587555,864349855668,"2022-03-04 23:25:00"], + [32548084168381,867948911157,"2022-03-04 23:30:00"], + [32156620281908,857509874184,"2022-03-04 23:35:00"], + [32214736023145,859059627284,"2022-03-04 23:40:00"], + [32164564599083,857721722642,"2022-03-04 23:45:00"], + [31727303531249,846061427500,"2022-03-04 23:50:00"], + [32145322359204,857208596245,"2022-03-04 23:55:00"] +] +export const lineData2 = [] +export const lineData3 = [] +export const lineOption = { + tooltip: { + trigger: 'axis' + }, + color: chartColor, + xAxis: { + type: 'time', + splitNumber: 12, + axisLabel: { + formatter: '{HH}:{mm}' + } + }, + yAxis: { + splitLine: { show: false }, + offset: 10, + axisLabel: { + formatter (params) { + const arr = unitConvert(params, unitTypes.byte).join(' ') + return arr.replace(/B/g, 'bps') + } + } + }, + visualMap: { + show: false, + pieces: [ + { + gt: 0, + lte: 536130030141, + color: '#FBDB0F' + }, + { + gt: 536130030141, + lte: 844057710428, + color: '#FC7D02' + }, + { + gt: 844057710428, + lte: 969266744524, + color: '#FD0100' + }, + { + gt: 969266744524, + lte: 9840702500000, + color: '#AA069F' + } + ], + outOfRange: { + color: '#999' + } + }, + series: { + type: 'line', + symbol: 'none', + markLine: { + silent: true, + lineStyle: { + color: '#999' + }, + symbol: 'none', + label: { + formatter (params) { + const arr = unitConvert(params.value, unitTypes.byte).join(' ') + let desc = '' + switch (params.dataIndex) { + case 0: { + desc = 'P50' + break + } + case 1: { + desc = 'P90' + break + } + case 2: { + desc = 'P99' + break + } + default: break + } + return `${arr.replace(/B/g, 'bps')} (${desc})` + } + }, + data: [ + { + yAxis: 536130030141 + }, + { + yAxis: 844057710428 + }, + { + yAxis: 969266744524 + } + ] + } + } +} +export const lineOption2 = { + tooltip: { + trigger: 'axis' + }, + color: chartColor, + xAxis: { + type: 'time', + splitNumber: 12, + axisLabel: { + formatter: '{MM}-{dd} {HH}:{mm}', + rotate: 30 + } + }, + yAxis: { + splitLine: { show: false }, + offset: 10, + axisLabel: { + formatter (params) { + const arr = unitConvert(params, unitTypes.byte).join(' ') + return arr.replace(/B/g, 'bps') + } + } + }, + series: { + type: 'line', + symbol: 'none' + } +} +export const pieData = [ + [ + ['HTTP', '36.30%'], + ['HTTPS', '33.75%'], + ['UNCATEGORIZED', '24.41%'], + ['QUIC', '2.13%'], + ['SSL', '2.04%'], + ['STUN', '0.67%'], + ['STUN.DTLS', '0.36%'], + ['RTMP', '0.16%'], + ['RTSP', '0.03%'], + ['DNS', '0.03%'], + ['Other', '0.13%'] + ], + [ + ['douyin', '6.12%'], + ['wechat', '4.87%'], + ['kuaishou', '3.18%'], + ['qq', '1.86%'], + ['qq_web', '1.52%'], + ['http2', '1.30%'], + ['youku', '0.94%'], + ['bmff', '0.90%'], + ['ppstream', '0.62%'], + ['other', '78.69%'] + ], + [ + ['douyinvod.com', '9.18%'], + ['qq.com', '1.43%'], + ['kwaicdn.com', '1.37%'], + ['douyincdn.com', '1.16%'], + ['qpic.cn', '0.75%'], + ['yximgs.com', '0.65%'], + ['vivo.com.cn', '0.50%'], + ['amemv.com', '0.43%'], + ['heytapdownload.com', '0.34%'], + ['apple.com', '0.26%'], + ['other', '83.93%'] + ], + [ + ['113.200.130.0/24', '4.17%'], + ['116.177.229.0/24', '1.37%'], + ['116.177.224.0/24', '1.16%'], + ['116.177.238.0/24', '1.14%'], + ['139.170.154.0/24', '1.11%'], + ['113.200.134.0/24', '1.10%'], + ['116.177.239.0/24', '1.02%'], + ['116.177.241.0/24', '0.94%'], + ['103.251.162.0/24', '0.78%'], + ['116.177.254.0/24', '0.74%'], + ['other', '86.47%'] + ], + [ + ['256', '263884843187921'], + ['1280', '259115014797786'], + ['2304', '179350957251842'], + ['2048', '146226265132311'], + ['1536', '144883427788620'], + ['1792', '144644004094863'], + ['512', '141461036696155'], + ['2816', '83886557825029'], + ['1024', '78239831113846'], + ['768', '62392314982139'] + ], + [ + ['2049', '244714000000000'], + ['1537', '243301000000000'], + ['2305', '211735000000000'], + ['257', '207454000000000'], + ['1281', '197125000000000'], + ['513', '174418000000000'], + ['1025', '78240600000000'], + ['769', '75635600000000'], + ['2817', '71460900000000'] + ] +] + +export const pieOption = { + tooltip: { + trigger: 'item' + }, + legend: { + show: false + }, + color: chartColor, + series: [ + { + type: 'pie', + radius: '80%', + label: { + formatter: '{b} {d}%' + } + } + ] +}