cyber-narrator-cn-ui/src/views/detections/options/detectionOptions.js

import { tooLongFormatter } from '@/views/charts/charts/tools'
import unitConvert from '@/utils/unit-convert'
import _ from 'lodash'
import { dateFormatByAppearance, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
import { unitTypes } from '@/utils/constants'

const severitySeriesIndexMappings = [
  { value: 'critical', index: '0' },
  { value: 'high', index: '1' },
  { value: 'medium', index: '2' },
  { value: 'low', index: '3' },
  { value: 'info', index: '4' }
]

export function getSeriesIndex (type) {
  const mapping = severitySeriesIndexMappings.find(m => m.value === type.toLowerCase())
  return mapping && mapping.index ? _.cloneDeep(mapping.index) : null
}

export const activeAttackColor = ['#51a9ee', '#49bcf2', '#4ad7eb', '#4cd4c8',
  '#7acc7e', '#a7db69']

const activeAttackColorMappings = [
  { value: 'command and control', color: '#51a9ee' },
  { value: 'payload delivery', color: '#49bcf2' },
  { value: 'cryptomining', color: '#4ad7eb' },
  { value: 'phishing', color: '#4cd4c8' },
  { value: 'dga', color: '#7acc7e' },
  { value: 'ddos', color: '#a7db69' }
]

export function getAttackColor (type) {
  const mapping = activeAttackColorMappings.find(m => m.value === type)
  return mapping && mapping.color ? _.cloneDeep(mapping.color) : null
}

const severityColorMappings = [
  { value: 'critical', color: '#d84c4c' },
  { value: 'high', color: '#ff9a79' },
  { value: 'medium', color: '#ffb65a' },
  { value: 'low', color: '#ffdd4a' },
  { value: 'info', color: '#d7c668' }
]
const severityNumberColorMappings = [
  { value: 5, color: '#d84c4c' },
  { value: 4, color: '#ff9a79' },
  { value: 3, color: '#ffb65a' },
  { value: 2, color: '#ffdd4a' },
  { value: 1, color: '#d7c668' }
]

export function getSeverityColor (type) {
  const mapping = severityColorMappings.find(m => m.value === type)
  return mapping && mapping.color ? _.cloneDeep(mapping.color) : null
}

export function getSeverityNumberColor (type) {
  const mapping = severityNumberColorMappings.find(m => m.value === type)
  return mapping && mapping.color ? _.cloneDeep(mapping.color) : null
}

export const multipleBarOption = {
  legend: {
    icon: 'circle',
    top: 10,
    right: 30,
    itemWidth: 10, // 设置宽度
    itemHeight: 10 // 设置高度
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  dataset: {
    source: [
    ]
  },
  xAxis: [{
    type: 'time',
    axisTick: { show: false },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#eaedef'
      }
    },
    axisLabel: {
      formatter: xAxisTimeFormatter,
      rich: xAxisTimeRich,
      color: '#737373',
      interval: 'auto'
    },
    splitNumber: 8,
    splitLine: {
      show: false
    }
  }],
  yAxis: {
    axisTick: { show: false },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#eaedef'
      }
    },
    axisLabel: {
      color: '#737373'
    },
    splitLine: {
      show: false
    },
    minInterval: 1
  },
  grid: {
    top: 40,
    left: 25,
    right: 40,
    bottom: 20,
    containLabel: true
  },
  series: [
    {
      name: 'critical',
      type: 'bar',
      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'none'
      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
        color: '#d84c4c'
      }
    },
    {
      name: 'high',
      type: 'bar',
      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'none'
      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
        color: '#ff9a79'
      }
    },
    {
      name: 'medium',
      type: 'bar',
      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'none'
      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
        color: '#ffb65a'
      }
    },
    {
      name: 'low',
      type: 'bar',
      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'none'
      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
        color: '#ffdd4a'
      }
    },
    {
      name: 'info',
      type: 'bar',
      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'none'
      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
        color: '#d7c668'
      }
    }
  ]
}
export const barOption = {
  legend: {
    show: false
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [{
    type: 'time',
    axisTick: { show: false },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#eaedef'
      }
    },
    axisLabel: {
      formatter: xAxisTimeFormatter,
      rich: xAxisTimeRich,
      color: '#737373',
      interval: 'auto'
    },
    splitNumber: 8,
    splitLine: {
      show: false
    }
  }],
  yAxis: {
    axisTick: { show: false },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#eaedef'
      }
    },
    axisLabel: {
      color: '#737373'
    },
    splitLine: {
      show: false
    },
    minInterval: 1
  },
  grid: {
    top: 30,
    left: 25,
    right: 40,
    bottom: 20,
    containLabel: true
  },
  series: [
    {
      name: 'event',
      type: 'bar',
      emphasis: {
        focus: 'none'
      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
        color: '#43a3cf'
      }
    }
  ]
}
export const pieForSeverity = {
  tooltip: {
    appendToBody: true
  },
  color: activeAttackColor,
  animation: true,
  legend: {
    orient: 'vertical',
    type: 'plain',
    left: '44%',
    top: 'middle',
    icon: 'circle',
    itemWidth: 10, // 设置宽度
    itemHeight: 10, // 设置高度
    itemGap: 10,
    formatter: tooLongFormatter,
    tooltip: {
      show: true
    }
  },
  series: [
    {
      type: 'pie',
      selectedMode: 'single',
      radius: ['43%', '65%'],
      center: ['22%', '50%'],
      data: [],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      tooltip: {
        formatter: function (param, index, callback) {
          return `${param.name}: ${param.value}`
        }
      }
    }
  ]
}
export const activeAttackBar = {
  tooltip: {
    appendToBody: true,
    trigger: 'item',
    textStyle: {
      width: '20px',
      overflow: 'truncate'
    },
    formatter: function (param, index, callback) {
      const valueList = param.value[2].split(',')
      const fieldList = param.value[3].split(',')
      let tooltip = ''
      fieldList.forEach((ite, ind) => {
        tooltip += `${ite}: ${valueList[ind]}<br>`
      })
      return tooltip
    },
    show: true,
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
  },
  xAxis: {
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  grid: {
    top: 20,
    left: 100,
    right: 70,
    bottom: 20
  },
  yAxis: {
    type: 'category',
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: {
      show: true,
      width: 95,
      overflow: 'truncate'

    },
    splitLine: {
      show: false
    },
    triggerEvent: true
  },
  series: [{
    barWidth: 5,
    barMaxHeight: 20,
    itemStyle: {
      color: function (params) {
        const colorList = ['#d1bd50', '#c9d150', '#fddd52', '#ffb65a', '#fe845d']
        return colorList[params.dataIndex]
      }
    },
    data: [],
    type: 'bar',
    label: {
      show: true,
      position: 'right',
      valueAnimation: true,
      formatter: function (param, index, callback) {
        return `${unitConvert(param.value[0], 'number').join(' ')}`
      }
    },
    barCategoryGap: '10%'
  }]
}
export const metricOption = {
  tooltip: {
    show: true,
    trigger: 'axis',
    formatter (params) {
      let str = '<div>'
      const item = params[0]
      const tData = item.data[0]
      str += '<div style="margin-bottom: 5px">'
      str += dateFormatByAppearance(tData)
      str += '</div>'
      str += '<div class="cn-chart-tooltip-box">'
      str += item.marker
      str += `<span class="cn-chart-tooltip-content"> 
      ${item.seriesName}
      </span>`
      if (item.seriesName === 'dns response time' || item.seriesName === 'http response time') {
        // http response time这种情况在ui上未找到，保险起见，添加以防不测
        str += `<span class="cn-chart-tooltip-value">
          ${unitConvert(item.data[1], unitTypes.time).join(' ')}
      </span>`
      } else {
        str += `<span class="cn-chart-tooltip-value">
          ${unitConvert(item.data[1], unitTypes.percent, '', '', 0).join(' ')}
      </span>`
      }

      str += '</div>'
      return str
    },
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important',
    textStyle: {
      width: '20px',
      overflow: 'truncate'
    },
    appendToBody: true
  },
  xAxis: {
    type: 'time',
    show: false
  },
  yAxis: {
    type: 'value',
    show: false
  },
  animation: false,
  grid: {
    left: 0,
    bottom: 2,
    top: 5,
    right: 0
  },
  legend: {
    show: false
  },
  series: [
    {
      name: 'http error ratio',
      type: 'line',
      legendHoverLink: false,
      lineStyle: {
        width: 1,
        type: 'dashed'
      },
      color: '#ec836c',
      data: [],
      showSymbol: false
    },
    {
      name: 'http error ratio',
      type: 'line',
      legendHoverLink: false,
      lineStyle: {
        width: 1,
        type: 'solid'
      },
      areaStyle: {
        color: 'rgba(244, 187, 174, 0.59)'
      },
      color: '#ec836c',
      data: [],
      showSymbol: false
    },
    {
      name: 'http error ratio',
      type: 'line',
      legendHoverLink: false,
      lineStyle: {
        width: 1,
        type: 'dashed'
      },
      color: '#E48F3E',
      data: [],
      showSymbol: false
    }
  ]
}
export const lineOption = {
  xAxis: {
    type: 'time',
    data: [],
    axisTick: {
      show: false
    },
    axisLine: {
      show: true
    },
    axisLabel: {
      formatter: xAxisTimeFormatter,
      rich: xAxisTimeRich
    }
  },
  yAxis: {
    splitLine: {
      show: false
    }
  },
  grid: {
    top: '12px',
    left: '30px',
    bottom: '30px',
    right: '20px'
  },
  series: [
    {
      name: 'match',
      data: [],
      type: 'line',
      color: '#ff9a79',
      symbol: 'none',
      markLine: {
        silent: true,
        symbol: 'none',
        lineStyle: {
          color: ''
        },
        label: {
          position: 'insideStartTop'
        },
        data: []
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      const param = JSON.parse(JSON.stringify(params[0]))
      param.marker = param.marker.replace('#ff9a79', param.data[2])
      const str = `<div style="display: flex;justify-content: space-between"><div>${param.marker}${param.seriesName}</div><div>${param.data[1]}</div></div>`
      return `${param.axisValueLabel}<br />${str}`
    },
    show: true
  }
}