mirror of
https://github.com/crawlab-team/crawlab.git
synced 2026-01-28 17:50:56 +01:00
* 增加Docker开发环境
* 更新Dockerfile构建文件，升级NodeJS依赖版本。 * 遵循ESLint重新格式化代码，修复部分警告 * 登录Token失效增加登出提示 * 网络请求问题增加错误错误提示 * 升级UI依赖库
This commit is contained in:
yaziming
@@ -1,184 +1,185 @@
|
||||
<template>
|
||||
<div id="network-chart"></div>
|
||||
<div id="network-chart"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'NodeNetwork',
|
||||
props: {
|
||||
activeTab: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeTab () {
|
||||
setTimeout(() => {
|
||||
this.render()
|
||||
}, 0)
|
||||
}
|
||||
},
|
||||
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]
|
||||
}
|
||||
export default {
|
||||
name: 'NodeNetwork',
|
||||
props: {
|
||||
activeTab: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
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'
|
||||
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 d
|
||||
})
|
||||
|
||||
// mongodb
|
||||
nodes.push({
|
||||
id: 'mongodb',
|
||||
name: 'MongoDB',
|
||||
x: Math.floor(100 * Math.random()),
|
||||
y: Math.floor(100 * Math.random()),
|
||||
itemStyle: {
|
||||
color: '#67c23a'
|
||||
}
|
||||
})
|
||||
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
|
||||
})
|
||||
|
||||
// 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: {
|
||||
nodes.push({
|
||||
id: 'mongodb',
|
||||
name: 'MongoDB',
|
||||
x: Math.floor(100 * Math.random()),
|
||||
y: Math.floor(100 * Math.random()),
|
||||
itemStyle: {
|
||||
color: '#67c23a'
|
||||
}
|
||||
})
|
||||
|
||||
// redis
|
||||
links.push({
|
||||
source: this.nodes[i].id,
|
||||
target: 'redis',
|
||||
value: 10,
|
||||
lineStyle: {
|
||||
nodes.push({
|
||||
id: 'redis',
|
||||
name: 'Redis',
|
||||
x: Math.floor(100 * Math.random()),
|
||||
y: Math.floor(100 * Math.random()),
|
||||
itemStyle: {
|
||||
color: '#f56c6c'
|
||||
}
|
||||
})
|
||||
|
||||
if (this.masterNode.id === this.nodes[i].id) continue
|
||||
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'
|
||||
}
|
||||
})
|
||||
|
||||
// master
|
||||
// links.push({
|
||||
// source: this.masterNode.id,
|
||||
// target: this.nodes[i].id,
|
||||
// value: 0.5,
|
||||
// lineStyle: {
|
||||
// color: '#409EFF'
|
||||
// }
|
||||
// })
|
||||
// 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
|
||||
}
|
||||
return links
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
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()
|
||||
}
|
||||
this.chart = echarts.init(this.$el)
|
||||
this.chart.setOption(option)
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.render()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user