CN-736 feat: Dashboard - link monitor - 折线图 未下钻

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

@@ -80,7 +80,7 @@
               }
               .traffic-sankey__tooltip-left {
                 .traffic-sankey__row-label {
-                  margin-right: 5px;
+                  margin-right: 20px;
                   font-size: 12px;
                   color: #575757;
                   font-weight: 400;

src/utils/api.js

@@ -199,6 +199,8 @@ export const api = {
   },
   linkMonitor: {
     links: '/interface/linkMonitor/links',
+    totalTrafficAnalysis: '/interface/link/overview/drilldown/totalTrafficAnalysis',
+    networkAnalysis: '/interface/link/overview/drilldown/networkAnalysis',
     linkTrafficDirection: '/interface/linkMonitor/linkTrafficDirection',
     quadrupleIngressAnalysis: '/interface/link/overview/quadrupleIngressAnalysis', // 入口
     quadrupleEgressAnalysis: '/interface/link/overview/quadrupleEgressAnalysis' // 出口

src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue

@@ -1,9 +1,38 @@
 <template>
-呵呵
+ <div class="link-traffic-line">
+  <link-traffic-drill-down-list
+    :chart="chart"
+    :time-filter="timeFilter">
+  </link-traffic-drill-down-list>
+  <link-traffic-drill-down-line
+    :chart="chart"
+    :time-filter="timeFilter"
+  >
+  </link-traffic-drill-down-line>
+ </div>
 </template>
 
 <script>
+import chartMixin from '@/views/charts2/chart-mixin'
+import linkTrafficDrillDownLine from '@/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine'
+import LinkTrafficDrillDownList from '@/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList'
+
 export default {
-  name: 'LinkTrafficLine'
+  name: 'LinkTrafficLine',
+  mixins: [chartMixin],
+  components: {
+    linkTrafficDrillDownLine,
+    LinkTrafficDrillDownList
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+
+  },
+  mounted () {
+    this.toggleLoading(false)
+  }
 }
 </script>

src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue

@@ -48,8 +48,10 @@ export default {
   setup () {
     const { query } = useRoute()
     const tab = ref(query.tabIndex || 0)
+    const queryCondition = ref(query.queryCondition || '')
     return {
       tab,
+      queryCondition,
       myChart: shallowRef(null),
       myChart2: shallowRef(null)
     }
@@ -88,6 +90,9 @@ export default {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
       }
+      if (this.queryCondition) {
+        params.q = this.queryCondition
+      }
       let url = ''
       if (n == 0) {
         url = api.linkMonitor.quadrupleIngressAnalysis // 入口
@@ -268,30 +273,6 @@ export default {
             </div>
           `
       }
-      this.chartOption.series[0].levels = [
-        {
-          depth: 0,
-          lineStyle: {
-            color: '#999'
-          }
-        }, {
-          depth: 1,
-          itemStyle: {
-            color: tab == 0 ? '#47D49C' : ''
-          },
-          lineStyle: {
-            color: '#999'
-          }
-        }, {
-          depth: 2,
-          itemStyle: {
-            color: tab == 0 ? '' : '#47D49C'
-          },
-          lineStyle: {
-            color: '#999'
-          }
-        }
-      ]
       this.chartOption.series[0].data = data
       this.chartOption.series[0].links = links
       if (tab == 0) {

src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="line network link-traffic">
+    <chart-no-data v-if="isNoData"></chart-no-data>
+    <template v-else>
+      <div class="line-header">
+        <div class="line-header-left">
+          <div class="line-value-active" v-if="lineTab"></div>
+          <div class="line-value">
+            <div class="line-value-mpackets"
+                 v-show="item.show"
+                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+                 v-for="(item, index) in mpackets"
+                 :key="index"
+                 @mouseenter="mouseenter(item)"
+                 @mouseleave="mouseleave(item)"
+                 @click="activeChange(item, index)">
+              <div class="line-value-mpackets-name">
+                <div :class="item.class"></div>
+                <div class="mpackets-name">{{$t(item.name)}}</div>
+              </div>
+              <div class="line-value-unit">
+                <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+                <span class="line-value-unit-number2">
+                <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
+              </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="line-select line-header-right">
+          <div class="line-select-metric">
+            <span>{{$t('network.metric')}}:</span>
+            <div class="line-select__operation">
+              <el-select
+                  size="mini"
+                  v-model="lineMetric"
+                  popper-class="common-select"
+                  :popper-append-to-body="false"
+                  @change="metricSelectChange"
+              >
+                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="chart-drawing" v-show="showMarkLine" id="linkTrafficLineChart"></div>
+    </template>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { linkTrafficLineChartOption } from '@/views/charts2/charts/options/echartOption'
+import unitConvert from '@/utils/unit-convert'
+import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
+import { ref, shallowRef } from 'vue'
+import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
+import _ from 'lodash'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import chartMixin from '@/views/charts2/chart-mixin'
+import { useRoute } from 'vue-router'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+export default {
+  name: 'linkTrafficDrillDownLine',
+  components: {
+    ChartNoData
+  },
+  setup () {
+    const { query } = useRoute()
+    const lineMetric = ref(query.lineMetric || 'Bits/s')
+    const lineTab = ref(query.lineTab || '')
+    const d = `common_egress_link_id='${246}' AND common_ingress_link_id='${246}'`
+    const linkId = ref(query.linkId || d)
+    return {
+      lineMetric,
+      lineTab,
+      linkId,
+      myChart: shallowRef(null)
+    }
+  },
+  props: {
+    linkTrafficShow: Boolean,
+    linkTrafficData: Array
+  },
+  mixins: [chartMixin],
+  data () {
+    return {
+      options1: [
+        {
+          value: 'Bits/s',
+          label: 'Bits/s'
+        },
+        {
+          value: 'Packets/s',
+          label: 'Packets/s'
+        }
+      ],
+      mpackets: [
+        { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
+        { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
+        { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
+      ],
+      unitConvert,
+      unitTypes,
+      chartDateObject: [],
+      timer: null,
+      mousemoveCursor: '',
+      leftOffset: 0,
+      sizes: [3, 4, 6, 8, 9, 10],
+      dynamicVariable: '',
+      showMarkLine: true
+    }
+  },
+  watch: {
+    lineTab (n) {
+      this.$nextTick(() => {
+        this.handleActiveBar(n)
+        const { query } = this.$route
+        const newUrl = urlParamsHandler(window.location.href, query, {
+          lineTab: n
+        })
+        overwriteUrl(newUrl)
+      })
+    },
+    lineMetric (n) {
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        lineMetric: n
+      })
+      overwriteUrl(newUrl)
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        if (this.lineTab) {
+          this.init(this.lineMetric, this.showMarkLine, 'active')
+        } else {
+          this.init()
+        }
+      }
+    }
+  },
+  methods: {
+    init (val, show, active) {
+      if (!val) {
+        val = this.lineMetric
+      }
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
+      }
+      // const condition = this.$store.getters.getQueryCondition
+      // if (this.linkId) {
+      //   params.q = this.linkId
+      // }
+      this.toggleLoading(true)
+      get(api.linkMonitor.totalTrafficAnalysis, params).then((res) => {
+        if (res.code === 200) {
+          this.isNoData = res.data.result.length === 0
+          res.data.result.forEach((t, i) => {
+            if (t.type === 'bytes' && val === 'Bits/s') {
+              const mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].analysis = t.totalBitsRate.analysis
+              mpackets[1].analysis = t.ingressBitsRate.analysis
+              mpackets[2].analysis = t.egressBitsRate.analysis
+              mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
+              mpackets[1].data = t.ingressBitsRate.values ? t.ingressBitsRate.values : []
+              mpackets[2].data = t.egressBitsRate.values ? t.egressBitsRate.values : []
+              mpackets.forEach(e => {
+                e.unitType = 'bps'
+                if (e.name !== 'network.total' && e.analysis.avg == 0) {
+                  e.show = false
+                } else {
+                  e.show = true
+                  if (!active && !show) {
+                    this.legendSelectChange(e, 'index')
+                  }
+                }
+                if (this.lineTab === e.class) {
+                  if (e.analysis.avg < 1) {
+                    this.lineTab = ''
+                    this.init()
+                  }
+                }
+              })
+              this.mpackets = mpackets
+              this.$nextTick(() => {
+                this.echartsInit(this.mpackets)
+              })
+            } else if (t.type === 'packets' && val === 'Packets/s') {
+              const mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].analysis = t.totalPacketsRate.analysis
+              mpackets[1].analysis = t.ingressPacketsRate.analysis
+              mpackets[2].analysis = t.egressPacketsRate.analysis
+              mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
+              mpackets[1].data = t.ingressPacketsRate.values ? t.ingressPacketsRate.values : []
+              mpackets[2].data = t.egressPacketsRate.values ? t.egressPacketsRate.values : []
+              mpackets.forEach(e => {
+                e.unitType = 'packets/s'
+                if (e.name !== 'network.total' && e.analysis.avg == 0) {
+                  e.show = false
+                } else {
+                  e.show = true
+                  if (!active && !show) {
+                    this.legendSelectChange(e, 'index')
+                  }
+                }
+                if (this.lineTab === e.class) {
+                  if (e.analysis.avg < 1) {
+                    this.lineTab = ''
+                    this.init()
+                  }
+                }
+              })
+              this.mpackets = mpackets
+              this.$nextTick(() => {
+                this.echartsInit(this.mpackets)
+              })
+            }
+          })
+        }
+      }).catch(e => {
+        console.error(e)
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
+    },
+    echartsInit (echartsData) {
+      if (this.lineTab) {
+        this.handleActiveBar()
+        echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
+      } else {
+        echartsData = echartsData.filter(t => t.show === true)
+      }
+      const _this = this
+      const dom = document.getElementById('linkTrafficLineChart')
+      !this.myChart && (this.myChart = echarts.init(dom))
+      this.chartOption = linkTrafficLineChartOption
+      const chartOption = this.chartOption.series[0]
+      this.chartOption.series = echartsData.map((t, i) => {
+        return {
+          ...chartOption,
+          name: t.name,
+          lineStyle: {
+            color: chartColor3[t.positioning],
+            width: 1
+          },
+          stack: t.name !== 'network.total' ? 'network.total' : '',
+          symbolSize: function (value, params) {
+            return _this.symbolSizeSortChange(i, value[0])
+          },
+          itemStyle: {
+            emphasis: {
+              borderColor: chartColor4[t.positioning],
+              borderWidth: 2,
+              shadowColor: chartColor4[t.positioning],
+              shadowBlur: this.sizes[t.positioning] + 2
+            }
+          },
+          areaStyle: {
+            opacity: 0.1,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: chartColor3[t.positioning]
+              },
+              {
+                offset: 1,
+                color: chartColor3[t.positioning]
+              }
+            ])
+          },
+          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
+        }
+      })
+      this.chartOption.tooltip.formatter = (params) => {
+        params.forEach(t => {
+          t.seriesName = this.$t(t.seriesName)
+        })
+        const str = stackedLineTooltipFormatter(params)
+        return str
+      }
+      this.showMarkLine = true
+      this.myChart.setOption(this.chartOption)
+    },
+    activeChange (item, index) {
+      this.lineTab = item.class
+      this.legendSelectChange(item, index, 'active')
+      this.showMarkLine = !item.invertTab
+      this.init(this.lineMetric, this.showMarkLine, 'active')
+    },
+    mouseenter (item) {
+      this.mousemoveCursor = item.class
+      this.handleActiveBar(item.class)
+    },
+    mouseleave () {
+      this.mousemoveCursor = ''
+    },
+    dispatchLegendSelectAction (name) {
+      this.myChart && this.myChart.dispatchAction({
+        type: 'legendSelect',
+        name: name
+      })
+    },
+    dispatchLegendUnSelectAction (name) {
+      this.myChart && this.myChart.dispatchAction({
+        type: 'legendUnSelect',
+        name: name
+      })
+    },
+    legendSelectChange (item, index, val) {
+      if (index === 'index') {
+        this.dispatchLegendSelectAction(item.name)
+      } else if (this.mpackets[index] && this.mpackets[index].name === item.name) {
+        this.dispatchLegendSelectAction(item.name)
+        this.mpackets.forEach((t) => {
+          if (t.name !== item.name) {
+            this.dispatchLegendUnSelectAction(t.name)
+          }
+        })
+      }
+      if (val === 'active') {
+        this.mpackets.forEach(t => {
+          if (item.name === t.name) {
+            t.invertTab = !t.invertTab
+          } else {
+            t.invertTab = true
+          }
+          if (t.invertTab && item.name === t.name) {
+            if (this.lineTab) {
+              this.lineTab = ''
+            } else {
+              this.lineTab = t.class
+            }
+            this.mpackets.forEach((e) => {
+              this.dispatchLegendSelectAction(e.name)
+            })
+          }
+        })
+      }
+    },
+    handleActiveBar (value) {
+      if (document.querySelector('.network .line-value-mpackets.is-active')) {
+        const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
+        const activeBar = document.querySelector('.network .line-value-active')
+        activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
+      }
+    },
+    resize () {
+      this.myChart.resize()
+    },
+    metricSelectChange (val) {
+      this.lineMetric = val
+      this.lineTab = ''
+      this.handleActiveBar()
+      this.showMarkLine = !this.showMarkLine
+      this.mpackets.forEach((e, i) => {
+        if (!e.invertTab) {
+          e.invertTab = true
+        }
+      })
+      this.init(val, this.showMarkLine)
+    },
+    symbolSizeSortChange (index, time) {
+      const dataIntegrationArray = []
+      if (linkTrafficLineChartOption.series[0]) {
+        const totalData = linkTrafficLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
+        if (totalData) {
+          dataIntegrationArray.push(totalData)
+          totalData[2] = 0
+        }
+      }
+      if (linkTrafficLineChartOption.series[1]) {
+        const ingressData = linkTrafficLineChartOption.series[1].data.find(t => t[0] === time)
+        if (ingressData) {
+          dataIntegrationArray.push(ingressData)
+          ingressData[2] = 1
+        }
+      }
+      if (linkTrafficLineChartOption.series[2]) {
+        const egressData = linkTrafficLineChartOption.series[2].data.find(t => t[0] === time)
+        if (egressData) {
+          dataIntegrationArray.push(egressData)
+          egressData[2] = 2
+        }
+      }
+      dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
+      const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
+      return this.sizes[sortIndex]
+    }
+  },
+  mounted () {
+    this.timer = setTimeout(() => {
+      if (this.lineTab) {
+        const data = this.mpackets.find(t => t.class === this.lineTab)
+        this.activeChange(data, data.positioning)
+      } else {
+        this.init()
+      }
+    }, 200)
+    window.addEventListener('resize', this.resize)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+    window.removeEventListener('resize', this.resize)
+  }
+}
+</script>

src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="link-traffic-list">
+    <div class="link-traffic-list-center">
+      <div class="link-traffic-list-center-label">{{$t('network.total')}}</div>
+      <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.bytesTotal, unitTypes.bps).join('')}}</div>
+    </div>
+    <div class="link-traffic-list-center">
+      <div class="link-traffic-list-center-label">{{$t('linkMonitor.bandwidthUsage')}}</div>
+      <div class="link-traffic-list-center-value" v-if="bandWidth">{{unitConvert(linkTrafficListData.bytesTotal / bandWidth, unitTypes.percent).join('')}}</div>
+      <div class="link-traffic-list-center-value" v-else>-</div>
+    </div>
+    <div class="link-traffic-list-center">
+      <div class="link-traffic-list-center-label">{{$t('linkMonitor.npmScore')}}</div>
+      <div class="link-traffic-list-center-value">{{linkTrafficListData.npmScore || '-'}}</div>
+    </div>
+    <div class="link-traffic-list-center">
+      <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.tcpConnectionEstablishLatency')}}</div>
+      <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}</div>
+    </div>
+    <div class="link-traffic-list-center">
+      <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.httpResponse')}}</div>
+      <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}</div>
+    </div>
+    <div class="link-traffic-list-center">
+      <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.sslResponseLatency')}}</div>
+      <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}</div>
+    </div>
+    <div class="link-traffic-list-center">
+      <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.packetLoss')}}</div>
+      <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.tcpLostlenPercent, unitTypes.percent).join('')}}</div>
+    </div>
+    <div class="link-traffic-list-center">
+      <div class="link-traffic-list-center-label">{{$t('overall.packetRetrans')}}</div>
+      <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.pktRetransPercent, unitTypes.percent).join('')}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartMixin from '@/views/charts2/chart-mixin'
+import { storageKey, unitTypes } from '@/utils/constants'
+import unitConvert from '@/utils/unit-convert'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { getSecond } from '@/utils/date-util'
+import { computeScore } from '@/utils/tools'
+
+export default {
+  name: 'linkTrafficList',
+  mixins: [chartMixin],
+  setup () {
+    const { query } = useRoute()
+    const d = `common_egress_link_id='${246}' AND common_ingress_link_id='${246}'`
+    const linkId = ref(query.linkId || '256')
+    return {
+      linkId
+    }
+  },
+  data () {
+    return {
+      unitTypes,
+      unitConvert,
+      timer: null,
+      linkTrafficListData: {},
+      cnLinkInfo: JSON.parse(localStorage.getItem(storageKey.linkInfo)),
+      bandWidth: 0
+    }
+  },
+  methods: {
+    linkTrafficData () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
+      }
+      // if (this.linkId) {
+      //   params.q = this.linkId
+      // }
+      this.toggleLoading(true)
+      get(api.linkMonitor.networkAnalysis, params).then(res => {
+        if (res.code === 200) {
+          this.isNoData = res.data.result.length === 0
+          const dataArr = [0, 1, 2, 3, 4]
+          let scoreAll = 0
+          dataArr.forEach(e => {
+            const score = computeScore(res.data.result[0], e)
+            scoreAll += score
+          })
+          this.linkTrafficListData = res.data.result[0]
+          this.linkTrafficListData.npmScore = Math.ceil(scoreAll * 6)
+          if (this.linkTrafficListData.npmScore > 6) {
+            this.linkTrafficListData.npmScore = 6
+          }
+          this.cnLinkInfo.forEach(e => {
+            if (this.linkId === e.originalLinkId) {
+              this.bandWidth = e.bandwidth
+            }
+          })
+        }
+      }).catch(e => {
+        console.error(e)
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
+    }
+  },
+  mounted () {
+    this.linkTrafficData()
+  }
+}
+</script>

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

@@ -452,7 +452,11 @@ export const linksTrafficSankeyOption = {
       right: '7%',
       left: '3%',
       top: '0%',
-      bottom: '23%'
+      bottom: '23%',
+      label: {
+        color: 'rgba(0,0,0,0.7)',
+        fontSize: 12
+      }
       // emphasis: {
       //   focus: 'adjacency'
       // }