crawlab/frontend/src/components/Node/NodeNetwork.vue

<template>
  <div id="network-chart"/>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: 'NodeNetwork',
    props: {
      activeTab: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        chart: undefined
      }
    },
    computed: {
      masterNode() {
        const nodes = this.$store.state.node.nodeList
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].is_master) {
            return nodes[i]
          }
        }
        return {}
      },
      nodes() {
        let nodes = this.$store.state.node.nodeList
        nodes = nodes
          .filter(d => d.status !== 'offline')
          .map(d => {
            d.id = d._id
            d.x = Math.floor(100 * Math.random())
            d.y = Math.floor(100 * Math.random())
            d.itemStyle = {
              color: d.is_master ? '#409EFF' : '#e6a23c'
            }
            return d
          })

        // mongodb
        nodes.push({
          id: 'mongodb',
          name: 'MongoDB',
          x: Math.floor(100 * Math.random()),
          y: Math.floor(100 * Math.random()),
          itemStyle: {
            color: '#67c23a'
          }
        })

        // redis
        nodes.push({
          id: 'redis',
          name: 'Redis',
          x: Math.floor(100 * Math.random()),
          y: Math.floor(100 * Math.random()),
          itemStyle: {
            color: '#f56c6c'
          }
        })

        return nodes
      },
      links() {
        const links = []
        for (let i = 0; i < this.nodes.length; i++) {
          if (this.nodes[i].status === 'offline') continue
          if (['redis', 'mongodb'].includes(this.nodes[i].id)) continue
          // mongodb
          links.push({
            source: this.nodes[i].id,
            target: 'mongodb',
            value: 10,
            lineStyle: {
              color: '#67c23a'
            }
          })

          // redis
          links.push({
            source: this.nodes[i].id,
            target: 'redis',
            value: 10,
            lineStyle: {
              color: '#f56c6c'
            }
          })

          if (this.masterNode.id === this.nodes[i].id) continue

          // master
          // links.push({
          //   source: this.masterNode.id,
          //   target: this.nodes[i].id,
          //   value: 0.5,
          //   lineStyle: {
          //     color: '#409EFF'
          //   }
          // })
        }
        return links
      }
    },
    watch: {
      activeTab() {
        setTimeout(() => {
          this.render()
        }, 0)
      }
    },
    mounted() {
      this.render()
    },
    methods: {
      render() {
        const option = {
          title: {
            text: this.$t('Node Network')
          },
          tooltip: {
            formatter: params => {
              if (!params.data.name) return
              let str = '<span style="margin-right:5px;display:inline-block;height:12px;width:12px;border-radius:6px;background:' + params.color + '"></span>'
              if (params.data.name) str += '<span>' + params.data.name + '</span><br>'
              if (params.data.ip) str += '<span>IP: ' + params.data.ip + '</span><br>'
              if (params.data.mac) str += '<span>MAC: ' + params.data.mac + '</span><br>'
              return str
            }
          },
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              type: 'graph',
              layout: 'force',
              symbolSize: 50,
              roam: true,
              label: {
                normal: {
                  show: true
                }
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                normal: {
                  textStyle: {
                    fontSize: 20
                  }
                }
              },
              focusOneNodeAdjacency: true,
              force: {
                initLayout: 'force',
                repulsion: 30,
                gravity: 0.001,
                edgeLength: 30
              },
              draggable: true,
              data: this.nodes,
              links: this.links,
              lineStyle: {
                normal: {
                  opacity: 0.9,
                  width: 2,
                  curveness: 0
                }
              }
            }
          ]
        }
        this.chart = echarts.init(this.$el)
        this.chart.setOption(option)
        this.chart.resize()
      }
    }
  }
</script>

<style scoped>
  #network-chart {
    height: 480px;
    width: 100%;
  }
</style>