cyber-narrator-cn-ui/src/views/charts2/Chart.vue

<template>
  <div class="cn-chart" style="height: 100%; width: 100%;">
    <loading :loading="loading && !disableLoading"></loading>
    <network-overview-line
        v-if="chart.type === typeMapping.networkOverview.line"
        :chart="chart"
        :metric="metric"
        :time-filter="timeFilter"
        ref="networkLine"
        @toggleLoading="toggleLoading"
    ></network-overview-line>
    <network-overview-ddos-detection
        v-else-if="chart.type === typeMapping.networkOverview.ddosDetection"
        :chart="chart"
        :time-filter="timeFilter"
        @toggleLoading="toggleLoading"
    ></network-overview-ddos-detection>
    <network-overview-performance-event
        v-else-if="chart.type === typeMapping.networkOverview.performanceEvent"
        :chart="chart"
        :time-filter="timeFilter"
        @toggleLoading="toggleLoading"
    ></network-overview-performance-event>
    <network-overview-tabs
         v-else-if="chart.type === typeMapping.networkOverview.table"
         :time-filter="timeFilter"
         :metric="metric"
         :chart="chart"
         :ref="`tab${chart.id}`"
         @toggleLoading="toggleLoading"
    ></network-overview-tabs>
    <npm-app-event-table
         v-else-if="chart.type === typeMapping.npm.appEventTable"
         :time-filter="timeFilter"
         :chart="chart"
         :chartData="chartData"
         :ref="`tab${chart.id}`"
         @toggleLoading="toggleLoading"
    ></npm-app-event-table>
    <network-overview-apps
        v-else-if="chart.type === typeMapping.networkOverview.appList"
        :chart="chart"
        :metric="metric"
        :time-filter="timeFilter"
        @toggleLoading="toggleLoading"
    >
    </network-overview-apps>
    <npm-tabs
        v-else-if="chart.type === typeMapping.npm.npmTabs"
        :time-filter="timeFilter"
        :chart="chart"
        @tabChange="npmTabChange"
        @toggleLoading="toggleLoading"
    ></npm-tabs>
    <npm-network-quantity
        v-else-if="chart.type === typeMapping.npm.npmNetworkQuantity"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-network-quantity>
    <npm-app-category-score
        v-else-if="chart.type === typeMapping.npm.npmAppCategoryScore"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-app-category-score>
    <npm-map
        v-else-if="chart.type === typeMapping.npm.npmMap"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-map>
    <npm-line
        v-else-if="chart.type === typeMapping.npm.npmLine"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-line>
    <npm-events-header
        v-else-if="chart.type === typeMapping.npm.npmEventsHeader"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-events-header>
    <npm-events-by-type
        v-else-if="chart.type === typeMapping.npm.npmEventsByType"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-events-by-type>
    <npm-recent-events
        v-else-if="chart.type === typeMapping.npm.npmRecentEvents"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-recent-events>
    <related-sessions
        v-else-if="chart.type === typeMapping.npm.relatedSessions"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></related-sessions>
    <npm-ip-map
        v-else-if="chart.type === typeMapping.npm.npmIpMap"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-ip-map>
    <npm-traffic-line
        v-else-if="chart.type === typeMapping.npm.npmTrafficLine"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></npm-traffic-line>
    <link-block
        v-else-if="chart.type === typeMapping.linkMonitor.linkBlock"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></link-block>
    <link-traffic-sankey
        v-else-if="chart.type === typeMapping.linkMonitor.linkTrafficSankey"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></link-traffic-sankey>
    <link-traffic-line
        v-else-if="chart.type === typeMapping.linkMonitor.linkTrafficLine"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></link-traffic-line>
    <link-direction-grid
        v-else-if="chart.type === typeMapping.linkMonitor.linkDirectionGrid"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></link-direction-grid>
    <dns-active-malicious-domain
        v-else-if="chart.type === typeMapping.dnsInsight.dnsActiveMaliciousDomain"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></dns-active-malicious-domain>
    <dns-event-chart
        v-else-if="chart.type === typeMapping.dnsInsight.dnsEventChart"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></dns-event-chart>
    <dns-recent-events
        v-else-if="chart.type === typeMapping.dnsInsight.dnsRecentEvents"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></dns-recent-events>
    <dns-traffic-line
        v-else-if="chart.type === typeMapping.dnsInsight.dnsTrafficLine"
        :time-filter="timeFilter"
        :chart="chart"
        @toggleLoading="toggleLoading"
    ></dns-traffic-line>
    <entity-detail-basic-info
        v-else-if="chart.type === typeMapping.entityDetail.basicInfo"
        :chart="chart"
        :entity="entity"
        @toggleLoading="toggleLoading"
    ></entity-detail-basic-info>
    <entity-detail-line
        v-else-if="chart.type === typeMapping.entityDetail.line"
        :chart="chart"
        :entity="entity"
        @toggleLoading="toggleLoading"
    ></entity-detail-line>
    <entity-detail-tabs-chart
        v-else-if="chart.type === typeMapping.entityDetail.tabsChart"
        :chart="chart"
        :entity="entity"
        @toggleLoading="toggleLoading"
    ></entity-detail-tabs-chart>
  </div>
</template>

<script>
import Loading from '@/components/common/Loading'
import { typeMapping } from '@/views/charts2/chart-tools'
import NetworkOverviewLine from '@/views/charts2/charts/networkOverview/NetworkOverviewLine'
import NetworkOverviewDdosDetection from '@/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection'
import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent'
import NetworkOverviewTabs from '@/views/charts2/charts/networkOverview/NetworkOverviewTabs'
import NetworkOverviewApps from '@/views/charts2/charts/networkOverview/NetworkOverviewApps'
import NpmTabs from '@/views/charts2/charts/npm/NpmTabs'
import NpmAppEventTable from '@/views/charts2/charts/npm/NpmAppEventTable'
import NpmNetworkQuantity from '@/views/charts2/charts/npm/NpmNetworkQuantity'
import NpmAppCategoryScore from '@/views/charts2/charts/npm/NpmAppCategoryScore'
import NpmMap from '@/views/charts2/charts/npm/NpmMap'
import NpmLine from '@/views/charts2/charts/npm/NpmLine'
import NpmEventsByType from '@/views/charts2/charts/npm/NpmEventsByType'
import NpmRecentEvents from '@/views/charts2/charts/npm/NpmRecentEvents'
import NpmEventsHeader from '@/views/charts2/charts/npm/NpmEventsHeader'
import RelatedSessions from '@/views/charts2/charts/npm/RelatedSessions'
import NpmIpMap from '@/views/charts2/charts/npm/NpmIpMap'
import NpmTrafficLine from '@/views/charts2/charts/npm/NpmTrafficLine'
import LinkBlock from '@/views/charts2/charts/linkMonitor/LinkBlock'
import LinkTrafficSankey from '@/views/charts2/charts/linkMonitor/LinkTrafficSankey'
import LinkTrafficLine from '@/views/charts2/charts/linkMonitor/LinkTrafficLine'
import DnsActiveMaliciousDomain from '@/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain'
import DnsEventChart from '@/views/charts2/charts/dnsInsight/DnsEventChart'
import DnsRecentEvents from '@/views/charts2/charts/dnsInsight/DnsRecentEvents'
import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'
import EntityDetailBasicInfo from '@/views/charts2/charts/entityDetail/EntityDetailBasicInfo'
import EntityDetailLine from '@/views/charts2/charts/entityDetail/EntityDetailLine'
import EntityDetailTabsChart from '@/views/charts2/charts/entityDetail/EntityDetailTabsChart'

import { getNowTime } from '@/utils/date-util'
import { ref } from 'vue'
import LinkDirectionGrid from '@/views/charts2/charts/linkMonitor/LinkDirectionGrid'
export default {
  name: 'Chart',
  components: {
    LinkDirectionGrid,
    NpmEventsHeader,
    NpmRecentEvents,
    NpmEventsByType,
    NpmLine,
    NpmMap,
    NpmAppCategoryScore,
    Loading,
    NetworkOverviewLine,
    NetworkOverviewDdosDetection,
    NetworkOverviewPerformanceEvent,
    NetworkOverviewTabs,
    NetworkOverviewApps,
    NpmTabs,
    NpmNetworkQuantity,
    NpmAppEventTable,
    RelatedSessions,
    NpmIpMap,
    NpmTrafficLine,
    LinkBlock,
    LinkTrafficSankey,
    LinkTrafficLine,
    DnsActiveMaliciousDomain,
    DnsEventChart,
    DnsRecentEvents,
    DnsTrafficLine,
    EntityDetailBasicInfo,
    EntityDetailLine,
    EntityDetailTabsChart
  },
  props: {
    chart: Object,
    metric: String,
    timeFilter: Object,
    extraParams: Object,
    entity: Object
  },
  data () {
    return {
      typeMapping,
      loading: true,
      chartData: null,
      queryParams: {}
    }
  },
  computed: {
    // 排除某些不需要loading的图表，例如npm-tabs
    disableLoading () {
      const disableChartTypes = [typeMapping.npm.npmTabs, typeMapping.linkMonitor.linkTrafficLine]
      return disableChartTypes.indexOf(this.chart.type) > -1
    }
  },
  setup (props) {
    const dateRangeValue = 60
    const { startTime, endTime } = getNowTime(dateRangeValue)
    const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
    const table = ref({})
    return {
      table,
      chartTimeFilter
    }
  },
  methods: {
    npmTabChange (index) {
      this.$emit('npmTabChange', index)
    },
    resizeLine () {
      this.$nextTick(function () {
        setTimeout(() => {
          if (this.$refs.networkLine) {
            this.$refs.networkLine.resize()
          }
        }, 250)
      })
    },
    toggleLoading (loading) {
      this.loading = loading
    }
  }
}
</script>