test/DolphinScheduler
1
0
Fork 0
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git synced 2024-12-05 05:38:30 +08:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

完成监控中心

Browse Source
This commit is contained in:
gongzijian 2019-04-25 10:22:58 +08:00
parent 5e107a8ca4
commit 1708b74f1b
35 changed files with 706 additions and 522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
escheduler-ui/src/js/conf/home/index.js
View File

@ -25,6 +25,7 @@ import store from './store'
import i18n from '@/module/i18n'
import { sync } from 'vuex-router-sync'
import Chart from '~/@analysys/ana-charts'
import '@/module/filter/formatDate'
import themeData from '@/module/echarts/themeData.json'
import Permissions from '@/module/permissions'
import '~/@analysys/ans-ui/lib/ans-ui.min.css'

1
escheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
View File

@ -90,7 +90,6 @@
</template>
<script>
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import { findComponentDownward } from '@/module/util/'
import mTooltipsJSON from '@/module/components/tooltipsJSON/tooltipsJSON'

62
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gauge.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="gauge-model">
<div class="gauge-echart">
<div :id="id" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -104px;">
{{name}}
</div>
</div>
</template>
<script>
import gaugeOption from './gaugeOption'
export default {
name: 'gauge',
data () {
return {}
},
props: {
id: String,
name: String,
value: Number
},
methods: {},
created () {
},
mounted () {
const gauge = echarts.init(document.getElementById(this.id)) // eslint-disable-line
gauge.setOption(gaugeOption(this.value), true)
},
components: {}
}
</script>
<style lang="scss" rel="stylesheet/scss">
.gauge-model {
width: 100%;
height: 360px;
overflow: hidden;
margin: 0 auto;
.gauge-echart {
width: 350px;
margin: auto;
margin-bottom: -80px;
}
.text-1 {
width: 100%;
margin: 0 auto;
font-size: 32px;
text-align: center;
}
.value-p {
height: 254px;
line-height: 254px;
text-align: center;
>b {
font-size: 100px;
color: #333;
}
}
}
</style>

236
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gaugeOption.js
View File

@ -1,121 +1,123 @@
export default {
series: [
{
type: 'gauge',
center: ['50%', '45%'], // 仪表位置
radius: '80%', // 仪表大小
startAngle: 200, // 开始角度
endAngle: -20, // 结束角度
axisLine: {
show: false,
lineStyle: { // 属性lineStyle控制线条样式
color: [
[ 0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
offset: 1,
color: '#E75F25' // 50% 处的颜色
}, {
offset: 0.8,
color: '#D9452C' // 40% 处的颜色
}], false) ], // 100% 处的颜色
[ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
offset: 1,
color: '#FFC539' // 70% 处的颜色
}, {
offset: 0.8,
color: '#FE951E' // 66% 处的颜色
}, {
offset: 0,
color: '#E75F25' // 50% 处的颜色
}], false) ],
[ 0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // eslint-disable-line
offset: 1,
color: '#C7DD6B' // 90% 处的颜色
}, {
offset: 0.8,
color: '#FEEC49' // 86% 处的颜色
}, {
offset: 0,
color: '#FFC539' // 70% 处的颜色
}], false) ],
[1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { // eslint-disable-line
offset: 0.2,
color: '#1CAD52' // 92% 处的颜色
}, {
offset: 0,
color: '#C7DD6B' // 90% 处的颜色
}], false) ]
],
width: 10
export default function (value) {
return {
series: [
{
type: 'gauge',
center: ['50%', '45%'], // 仪表位置
radius: '80%', // 仪表大小
startAngle: 200, // 开始角度
endAngle: -20, // 结束角度
axisLine: {
show: false,
lineStyle: { // 属性lineStyle控制线条样式
color: [
[ 0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
offset: 1,
color: '#E75F25' // 50% 处的颜色
}, {
offset: 0.8,
color: '#D9452C' // 40% 处的颜色
}], false) ], // 100% 处的颜色
[ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
offset: 1,
color: '#FFC539' // 70% 处的颜色
}, {
offset: 0.8,
color: '#FE951E' // 66% 处的颜色
}, {
offset: 0,
color: '#E75F25' // 50% 处的颜色
}], false) ],
[ 0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // eslint-disable-line
offset: 1,
color: '#C7DD6B' // 90% 处的颜色
}, {
offset: 0.8,
color: '#FEEC49' // 86% 处的颜色
}, {
offset: 0,
color: '#FFC539' // 70% 处的颜色
}], false) ],
[1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { // eslint-disable-line
offset: 0.2,
color: '#1CAD52' // 92% 处的颜色
}, {
offset: 0,
color: '#C7DD6B' // 90% 处的颜色
}], false) ]
],
width: 10
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: { // 指针样式
length: '45%'
},
detail: {
show: false
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: { // 指针样式
length: '45%'
},
detail: {
show: false
{
type: 'gauge',
center: ['50%', '45%'], // 默认全局居中
radius: '70%',
startAngle: 200,
endAngle: -20,
axisLine: {
show: true,
lineStyle: { // 属性lineStyle控制线条样式
color: [ // 表盘颜色
[ 0.5, '#DA462C' ], // 0-50%处的颜色
[ 0.7, '#FF9618' ], // 51%-70%处的颜色
[ 0.9, '#FFED44' ], // 70%-90%处的颜色
[ 1, '#20AE51' ]// 90%-100%处的颜色
],
width: 30// 表盘宽度
}
},
splitLine: { // 分割线样式（及10、20等长线样式）
length: 30,
lineStyle: { // 属性lineStyle控制线条样式
width: 2
}
},
axisTick: { // 刻度线样式（及短线样式）
length: 20
},
axisLabel: { // 文字样式（及“10”、“20”等文字样式）
color: 'black',
distance: 5 // 文字离表盘的距离
},
detail: {
formatter: '{score|{value}%}',
offsetCenter: [0, '50%'],
backgroundColor: '#2D8BF0',
height: 30,
rich: {
score: {
color: 'white',
fontFamily: '微软雅黑',
fontSize: 32
}
}
},
data: [{
value: value || 0,
label: {
textStyle: {
fontSize: 12
}
}
}]
}
},
{
type: 'gauge',
center: ['50%', '45%'], // 默认全局居中
radius: '70%',
startAngle: 200,
endAngle: -20,
axisLine: {
show: true,
lineStyle: { // 属性lineStyle控制线条样式
color: [ // 表盘颜色
[ 0.5, '#DA462C' ], // 0-50%处的颜色
[ 0.7, '#FF9618' ], // 51%-70%处的颜色
[ 0.9, '#FFED44' ], // 70%-90%处的颜色
[ 1, '#20AE51' ]// 90%-100%处的颜色
],
width: 30// 表盘宽度
}
},
splitLine: { // 分割线样式（及10、20等长线样式）
length: 30,
lineStyle: { // 属性lineStyle控制线条样式
width: 2
}
},
axisTick: { // 刻度线样式（及短线样式）
length: 20
},
axisLabel: { // 文字样式（及“10”、“20”等文字样式）
color: 'black',
distance: 5 // 文字离表盘的距离
},
detail: {
formatter: '{score|{value}%}',
offsetCenter: [0, '50%'],
backgroundColor: '#2D8BF0',
height: 30,
rich: {
score: {
color: 'white',
fontFamily: '微软雅黑',
fontSize: 32
}
}
},
data: [{
value: 70,
label: {
textStyle: {
fontSize: 12
}
}
}]
}
]
]
}
}

81
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/list.vue
View File

@ -1,81 +0,0 @@
<template>
<div class="list-model">
<div class="table-box">
<table>
<tr>
<th>
<span>{{$t('#')}}</span>
</th>
<th>
<span>node</span>
</th>
<th>
<span>ip</span>
</th>
<th>
<span>模式</span>
</th>
<th>
<span>连接数</span>
</th>
<th>
<span>watch数</span>
</th>
<th>
<span>数据量</span>
</th>
<th>
<span>Sent/Received</span>
</th>
<th>
<span>节点自检状态</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="$index">
<td>
<span>{{$index + 1}}</span>
</td>
<td>
<span>
<a href="javascript:" class="links">task1</a>
</span>
</td>
<td><span>192.11.1.1</span></td>
<td>
<span>2222</span>
</td>
<td>
<span>3333</span>
</td>
<td>
<span>4444</span>
</td>
<td><span>5555</span></td>
<td>
<span>6666</span>
</td>
<td>
<span>7777</span>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
import '@/module/filter/formatDate'
export default {
name: 'tenement-list',
data () {
return {
list: []
}
},
props: {
list: Array
},
methods: {
}
}
</script>

125
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<div class="list-model zookeeper-list">
<div class="table-box">
<table>
<tr>
<th>
<span>{{$t('#')}}</span>
</th>
<th>
<span>host</span>
</th>
<th>
<span>连接数</span>
</th>
<th>
<span>watches数量</span>
</th>
<th>
<span>发送量</span>
</th>
<th>
<span>接收量</span>
</th>
<th>
<span>leader/follower</span>
</th>
<th>
<span>最低延时</span>
</th>
<th>
<span>平均延时</span>
</th>
<th>
<span>最大延时</span>
</th>
<th>
<span>节点数</span>
</th>
<th>
<span>当前查询时间戳</span>
</th>
<th style="text-align: center">
<span>节点自检状态</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="$index">
<td>
<span>{{$index + 1}}</span>
</td>
<td>
<span>
<a href="javascript:" class="links">{{item.hostname}}</a>
</span>
</td>
<td><span>{{item.connections}}</span></td>
<td>
<span>{{item.watches}}</span>
</td>
<td>
<span>{{item.sent}}</span>
</td>
<td>
<span>{{item.received}}</span>
</td>
<td><span>{{item.mode}}</span></td>
<td>
<span>{{item.minLatency}}</span>
</td>
<td>
<span>{{item.avgLatency}}</span>
</td>
<td>
<span>{{item.maxLatency}}</span>
</td>
<td>
<span>{{item.nodeCount}}</span>
</td>
<td>
<span>{{item.date | formatDate}}</span>
</td>
<td>
<span class="state">
<i class="iconfont success" v-if="item.state">&#xe607;</i>
<i class="iconfont error" v-else>&#xe626;</i>
</span>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'zookeeper-list',
data () {
return {
list: []
}
},
props: {
list: Array
},
methods: {
}
}
</script>
<style lang="scss" rel="stylesheet/scss">
.zookeeper-list {
.state {
text-align: center;
display: block;
>i {
font-size: 18px;
}
.success {
color: #33cc00;
}
.error {
color: #ff0000;
}
}
}
</style>

2
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/alert.vue
View File

@ -13,7 +13,7 @@
</template>
<script>
import { mapActions } from 'vuex'
import mList from './_source/list'
import mList from './_source/zookeeperList'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import mListConstruction from '@/module/components/listConstruction/listConstruction'

181
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
View File

@ -2,171 +2,90 @@
<m-list-construction :title="'Master管理'">
<template slot="content">
<div class="servers-wrapper">
<div class="row">
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>Cpu详细信息</span>
</div>
<div class="gauge-echart">
<div id="a1" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
<div class="row-box" v-for="(item,$index) in masterList">
<div class="row-title">
<div class="left">
<span class="sp">IP: {{item.host}}</span>
<span class="sp">端口: {{item.port}}</span>
<span class="sp">zk注册目录: {{item.zkDirectory}}</span>
</div>
<div class="right">
<span class="sp">创建时间: {{item.createTime | formatDate}}</span>
<span class="sp">最后心跳时间: {{item.lastHeartbeatTime | formatDate}}</span>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="gauge-echart">
<div id="a2" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
<div class="row-cont">
<div class="col-md-4">
<m-gauge
:value="(item.resInfo.cpuUsage * 100).toFixed(2)"
:name="'cpuUsage'"
:id="'gauge-cpu-' + item.id">
</m-gauge>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="value-p">
<b style="color: #0098e1;">12</b>
</div>
<div class="text-1">
cpu
</div>
<div class="col-md-4">
<m-gauge
:value="(item.resInfo.memoryUsage * 100).toFixed(2)"
:name="'memoryUsage'"
:id="'gauge-memory-' + item.id">
</m-gauge>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>Cpu详细信息</span>
</div>
<div class="gauge-echart">
<div id="a3" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="gauge-echart">
<div id="a4" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="value-p">
<b style="color: #7a56b8;">72</b>
</div>
<div class="text-1">
cpu
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>Cpu详细信息</span>
</div>
<div class="gauge-echart">
<div id="a5" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="gauge-echart">
<div id="a6" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="value-p">
<b style="color: #e84d80;">44</b>
</div>
<div class="text-1">
cpu
<div class="col-md-4">
<div class="text-num-model">
<div class="value-p">
<b :style="{color:color[$index]}">{{item.resInfo.loadAverage}}</b>
</div>
<div class="text-1">
loadAverage
</div>
</div>
</div>
</div>
</div>
</div>
<m-spin :is-spin="isLoading"></m-spin>
</template>
</m-list-construction>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import mList from './_source/list'
import mGauge from './_source/gauge'
import mList from './_source/zookeeperList'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import gaugeOption from './_source/gaugeOption'
import themeData from '@/module/echarts/themeData.json'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default {
name: 'servers-master',
data () {
return {
pageSize: 10,
pageNo: 1,
totalPage: null,
searchVal: '',
isLoading: false,
masterList: []
masterList: [],
color: themeData.color
}
},
props: {},
methods: {
...mapActions('security', ['getProcessMasterList'])
...mapActions('monitor', ['getMasterData'])
},
watch: {},
created () {
},
mounted () {
let b = {}
let a = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']
a.forEach((v, i) => {
b[v] = echarts.init(document.getElementById(v)) // eslint-disable-line
b[v].setOption(gaugeOption, true)
this.isLoading = true
this.getMasterData().then(res => {
this.masterList = _.map(res, (v, i) => {
return _.assign(v, {
resInfo: JSON.parse(v.resInfo)
})
})
this.isLoading = false
}).catch(() => {
this.isLoading = false
})
},
components: { mList, mListConstruction, mSpin, mNoData }
components: { mList, mListConstruction, mSpin, mNoData, mGauge }
}
</script>
<style lang="scss" rel="stylesheet/scss">

71
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue
View File

@ -1,77 +1,112 @@
<template>
<m-list-construction :title="'Mysql管理'">
<template slot="content">
<div class="servers-wrapper">
<div class="row">
<div class="col-md-4">
<div class="gridb-model">
<div class="servers-wrapper mysql-model">
<div class="row" v-for="(item,$index) in mysqlList">
<div class="col-md-2">
<div class="text-num-model text">
<div class="title">
<span>正常与否</span>
</div>
<div class="value-p">
<b style="color: #0098e1;">78</b>
<span class="state">
<i class="iconfont success" v-if="item.state">&#xe607;</i>
<i class="iconfont error" v-else>&#xe626;</i>
</span>
</div>
<div class="text-1">
正常与否
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="col-md-3">
<div class="text-num-model text">
<div class="title">
<span>最大连接数</span>
</div>
<div class="value-p">
<b style="color: #ffcf3d;">55</b>
<b :style="{color:color[0]}">{{item.maxConnections}}</b>
</div>
<div class="text-1">
最大连接数
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="col-md-3">
<div class="text-num-model text">
<div class="title">
<span>当前活跃连接</span>
</div>
<div class="value-p">
<b style="color: #f07d7d;">32</b>
<b :style="{color:color[8]}">{{item.threadsConnections}}</b>
</div>
<div class="text-1">
当前活跃连接
</div>
</div>
</div>
<div class="col-md-2">
<div class="text-num-model text">
<div class="title">
<span>最大连接数</span>
</div>
<div class="value-p">
<b :style="{color:color[2]}">{{item.maxUsedConnections}}</b>
</div>
<div class="text-1">
最大连接数
</div>
</div>
</div>
<div class="col-md-2">
<div class="text-num-model text">
<div class="title">
<span>线程运行连接</span>
</div>
<div class="value-p">
<b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b>
</div>
<div class="text-1">
线程运行连接
</div>
</div>
</div>
</div>
</div>
<m-spin :is-spin="isLoading" ></m-spin>
</template>
</m-list-construction>
</template>
<script>
import { mapActions } from 'vuex'
import mList from './_source/list'
import mList from './_source/zookeeperList'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import themeData from '@/module/echarts/themeData.json'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default {
name: 'servers-mysql',
data () {
return {
pageSize: 10,
pageNo: 1,
totalPage: null,
searchVal: '',
isLoading: false,
masterList: []
mysqlList: [],
color: themeData.color
}
},
props: {},
methods: {
...mapActions('security', ['getProcessMasterList'])
...mapActions('monitor', ['getDatabaseData'])
},
watch: {},
created () {
this.isLoading = true
this.getDatabaseData().then(res => {
this.mysqlList = res
this.isLoading = false
}).catch(() => {
this.isLoading = false
})
},
mounted () {
},

103
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/servers.scss
View File

@ -1,23 +1,10 @@
.servers-wrapper {
padding: 16px;
>.row {
margin-bottom: 20px;
}
.gridb-model {
.gauge-model {
width: 100%;
height: 360px;
overflow: hidden;
border: 1px solid #E8E8E8;
margin: 0 auto;
>.title {
height: 36px;
line-height: 36px;
background: #F9F9F9;
border-bottom: 1px solid #E8E8E8;
span {
padding-left: 8px;
}
}
.gauge-echart {
width: 350px;
margin: auto;
@ -29,16 +16,96 @@
font-size: 32px;
text-align: center;
}
}
.text-num-model {
&.text {
width: 100%;
height: 380px;
overflow: hidden;
border: 1px solid #E8E8E8;
margin: 0 auto;
margin-bottom: 16px;
>.title {
height: 36px;
line-height: 36px;
background: #F9F9F9;
border-bottom: 1px solid #E8E8E8;
padding-left: 10px;
}
}
.value-p {
height: 254px;
line-height: 254px;
height: 276px;
line-height: 276px;
text-align: center;
>b {
font-size: 140px;
font-size: 100px;
color: #333;
}
}
.text-1 {
width: 100%;
margin: 0 auto;
font-size: 32px;
text-align: center;
}
}
&.mysql-model {
.text-num-model {
height: 260px;
.text-1 {
font-size: 20px;
}
.value-p {
height: 160px;
line-height: 160px;
>b {
font-size: 80px;
}
>.state {
>i {
font-size: 50px;
}
.success {
color: #33cc00;
}
.error {
color: #ff0000;
}
}
}
}
}
.row-box {
width: 100%;
height: 380px;
overflow: hidden;
border: 1px solid #E8E8E8;
margin: 0 auto;
margin-bottom: 16px;
.row-title {
height: 36px;
line-height: 36px;
background: #F9F9F9;
border-bottom: 1px solid #E8E8E8;
position: relative;
span {
font-size: 12px;
color: #444;
&.sp {
margin-right: 10px;
}
}
.left {
position: absolute;
left: 10px;
top: 0;
}
.right {
position: absolute;
right: 10px;
top: 0;
}
}
}
}

179
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
View File

@ -2,170 +2,91 @@
<m-list-construction :title="'Worker管理'">
<template slot="content">
<div class="servers-wrapper">
<div class="row">
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>Cpu详细信息</span>
</div>
<div class="gauge-echart">
<div id="a1" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
<div class="row-box" v-for="(item,$index) in workerList">
<div class="row-title">
<div class="left">
<span class="sp">IP: {{item.host}}</span>
<span class="sp">端口: {{item.port}}</span>
<span class="sp">zk注册目录: {{item.zkDirectory}}</span>
</div>
<div class="right">
<span class="sp">创建时间: {{item.createTime | formatDate}}</span>
<span class="sp">最后心跳时间: {{item.lastHeartbeatTime | formatDate}}</span>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="gauge-echart">
<div id="a2" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
<div class="row-cont">
<div class="col-md-4">
<m-gauge
:value="(item.resInfo.cpuUsage * 100).toFixed(2)"
:name="'cpuUsage'"
:id="'gauge-cpu-' + item.id">
</m-gauge>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="value-p">
<b style="color: #0098e1;">83</b>
</div>
<div class="text-1">
cpu
</div>
<div class="col-md-4">
<m-gauge
:value="(item.resInfo.memoryUsage * 100).toFixed(2)"
:name="'memoryUsage'"
:id="'gauge-memory-' + item.id">
</m-gauge>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>Cpu详细信息</span>
</div>
<div class="gauge-echart">
<div id="a3" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="gauge-echart">
<div id="a4" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="value-p">
<b style="color: #7281c2;">18</b>
</div>
<div class="text-1">
cpu
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>Cpu详细信息</span>
</div>
<div class="gauge-echart">
<div id="a5" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="gauge-echart">
<div id="a6" style="height: 380px;"></div>
</div>
<div class="text-1" style="margin-top: -126px">
cpu
</div>
</div>
</div>
<div class="col-md-4">
<div class="gridb-model">
<div class="title">
<span>内存详细信息</span>
</div>
<div class="value-p">
<b style="color: #f2ac6f;">15</b>
</div>
<div class="text-1">
cpu
<div class="col-md-4">
<div class="text-num-model">
<div class="value-p">
<b :style="{color:color[$index]}">{{item.resInfo.loadAverage}}</b>
</div>
<div class="text-1">
loadAverage
</div>
</div>
</div>
</div>
</div>
</div>
<m-spin :is-spin="isLoading"></m-spin>
</template>
</m-list-construction>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import mList from './_source/list'
import mGauge from './_source/gauge'
import mList from './_source/zookeeperList'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import gaugeOption from './_source/gaugeOption'
import themeData from '@/module/echarts/themeData.json'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default {
name: 'servers-worker',
data () {
return {
pageSize: 10,
pageNo: 1,
totalPage: null,
searchVal: '',
isLoading: false,
masterList: []
workerList: [],
color: themeData.color
}
},
props: {},
methods: {
...mapActions('security', ['getProcessMasterList'])
...mapActions('monitor', ['getWorkerData'])
},
watch: {},
created () {
},
mounted () {
let b = {}
let a = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']
a.forEach((v, i) => {
b[v] = echarts.init(document.getElementById(v)) // eslint-disable-line
b[v].setOption(gaugeOption, true)
this.isLoading = true
this.getWorkerData().then(res => {
this.workerList = _.map(res, (v, i) => {
return _.assign(v, {
resInfo: JSON.parse(v.resInfo)
})
})
this.isLoading = false
}).catch(() => {
this.isLoading = true
})
},
components: { mList, mListConstruction, mSpin, mNoData }
components: { mList, mListConstruction, mSpin, mNoData, mGauge }
}
</script>
<style lang="scss" rel="stylesheet/scss">

20
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/zookeeper.vue
View File

@ -13,7 +13,7 @@
</template>
<script>
import { mapActions } from 'vuex'
import mList from './_source/list'
import mList from './_source/zookeeperList'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
@ -22,24 +22,30 @@
name: 'servers-zookeeper',
data () {
return {
pageSize: 10,
pageNo: 1,
totalPage: null,
searchVal: '',
isLoading: false,
zookeeperList: []
}
},
props: {},
methods: {
...mapActions('security', ['getProcessMasterList'])
...mapActions('monitor', ['getZookeeperData'])
},
watch: {},
created () {
this.zookeeperList = [{ id: 1 }, { id: 1 }, { id: 1 }, { id: 1 }]
this.isLoading = true
this.getZookeeperData().then(res => {
this.zookeeperList = res
this.isLoading = false
}).catch(() => {
this.isLoading = false
})
},
mounted () {
},
components: { mList, mListConstruction, mSpin, mNoData }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import "./servers";
</style>

2
escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
View File

@ -67,8 +67,6 @@
</div>
</template>
<script>
import '@/module/filter/formatDate'
export default {
name: 'list',
data () {

1
escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
View File

@ -72,7 +72,6 @@
import mStart from './start'
import mTiming from './timing'
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import { publishStatus } from '@/conf/home/pages/dag/_source/config'
export default {

1
escheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
View File

@ -116,7 +116,6 @@
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import mSpin from '@/module/components/spin/spin'
import mTiming from '../../pages/list/_source/timing'
import mNoData from '@/module/components/noData/noData'

1
escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
View File

@ -250,7 +250,6 @@
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import { tasksState, runningType } from '@/conf/home/pages/dag/_source/config'
export default {

1
escheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
View File

@ -82,7 +82,6 @@
</div>
</template>
<script>
import '@/module/filter/formatDate'
import { mapActions, mapMutations } from 'vuex'
import localStore from '@/module/util/localStorage'
import { findComponentDownward } from '@/module/util/'

1
escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
View File

@ -77,7 +77,6 @@
</div>
</template>
<script>
import '@/module/filter/formatDate'
import Permissions from '@/module/permissions'
import mLog from '@/conf/home/pages/dag/_source/formModel/log'
import { tasksState } from '@/conf/home/pages/dag/_source/config'

1
escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
View File

@ -107,7 +107,6 @@
import _ from 'lodash'
import mRename from './rename'
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import { filtTypeArr } from '../../_source/common'
import { bytesToSize } from '@/module/util/util'
import { downloadFile } from '@/module/download'

1
escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
View File

@ -102,7 +102,6 @@
</template>
<script>
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import mCreateUdf from './createUdf'
export default {

1
escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
View File

@ -101,7 +101,6 @@
</template>
<script>
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import mRename from './rename'
import { downloadFile } from '@/module/download'
import { bytesToSize } from '@/module/util/util'

1
escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
View File

@ -79,7 +79,6 @@
</template>
<script>
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
export default {
name: 'tenement-list',

2
escheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
View File

@ -85,7 +85,7 @@
</template>
<script>
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
export default {
name: 'tenement-list',

1
escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
View File

@ -98,7 +98,6 @@
import _ from 'lodash'
import i18n from '@/module/i18n'
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import mTransfer from '@/module/components/transfer/transfer'
export default {

1
escheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
View File

@ -71,7 +71,6 @@
import _ from 'lodash'
import i18n from '@/module/i18n'
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
import mTransfer from '@/module/components/transfer/transfer'
export default {

1
escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue
View File

@ -65,7 +65,6 @@
// import _ from 'lodash'
// import i18n from '@/module/i18n'
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
export default {
name: 'user-list',

1
escheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue
View File

@ -58,7 +58,6 @@
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import '@/module/filter/formatDate'
import mListBoxF from '@/module/components/listBoxF/listBoxF'
import mCreateUser from '@/conf/home/pages/security/pages/users/_source/createUser'

1
escheduler-ui/src/js/conf/home/pages/user/pages/password/_source/info.vue
View File

@ -39,7 +39,6 @@
<script>
import i18n from '@/module/i18n'
import { mapState, mapActions } from 'vuex'
import '@/module/filter/formatDate'
import mListBoxF from '@/module/components/listBoxF/listBoxF'
export default {

1
escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/list.vue
View File

@ -71,7 +71,6 @@
</template>
<script>
import { mapActions } from 'vuex'
import '@/module/filter/formatDate'
export default {
name: 'token-list',

4
escheduler-ui/src/js/conf/home/store/index.js
View File

@ -22,6 +22,7 @@ import resource from './resource'
import security from './security'
import datasource from './datasource'
import user from './user'
import monitor from './monitor'
export default new Vuex.Store({
modules: {
@ -30,6 +31,7 @@ export default new Vuex.Store({
resource,
security,
datasource,
user
user,
monitor
}
})

57
escheduler-ui/src/js/conf/home/store/monitor/actions.js Normal file
View File

@ -0,0 +1,57 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import io from '@/module/io'
export default {
getMasterData ({ state }, payload) {
return new Promise((resolve, reject) => {
io.get(`monitor/master/list`, payload, res => {
resolve(res.data)
}).catch(e => {
reject(e)
})
})
},
getWorkerData ({ state }, payload) {
return new Promise((resolve, reject) => {
io.get(`monitor/worker/list`, payload, res => {
resolve(res.data)
}).catch(e => {
reject(e)
})
})
},
getDatabaseData ({ state }, payload) {
return new Promise((resolve, reject) => {
io.get(`monitor/database`, payload, res => {
resolve(res.data)
}).catch(e => {
reject(e)
})
})
},
getZookeeperData ({ state }, payload) {
return new Promise((resolve, reject) => {
io.get(`monitor/zookeeper/list`, payload, res => {
resolve(res.data)
}).catch(e => {
reject(e)
})
})
}
}

19
escheduler-ui/src/js/conf/home/store/monitor/getters.js Normal file
View File

@ -0,0 +1,19 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
}

30
escheduler-ui/src/js/conf/home/store/monitor/index.js Normal file
View File

@ -0,0 +1,30 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import actions from './actions'
import getters from './getters'
import mutations from './mutations'
import state from './state'
export default {
strict: true,
namespaced: true,
state,
getters,
mutations,
actions
}

19
escheduler-ui/src/js/conf/home/store/monitor/mutations.js Normal file
View File

@ -0,0 +1,19 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
}

18
escheduler-ui/src/js/conf/home/store/monitor/state.js Normal file
View File

@ -0,0 +1,18 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
}