Browse Source

Merge remote-tracking branch 'remotes/upstream/dev-20190415' into dev-20190415

pull/2/head
ligang 6 years ago
parent
commit
93d70ff5a5
  1. 2
      escheduler-ui/.env
  2. 38
      escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
  3. 2
      escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gaugeOption.js
  4. 8
      escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
  5. 4
      escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
  6. 257
      escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/projectChart.vue
  7. 24
      escheduler-ui/src/js/conf/home/store/projects/actions.js

2
escheduler-ui/.env

@ -1,6 +1,6 @@
# 后端接口地址
API_BASE = http://192.168.220.247:12345
API_BASE = http://192.168.220.154:12345
# 本地开发如需ip访问项目把"#"号去掉
#DEV_HOST = 192.168.xx.xx

38
escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue

@ -27,6 +27,20 @@
</div>
</div>
</m-list-box>
<template v-if="!sqlType && showType.length">
<m-list-box>
<div slot="text">收件人</div>
<div slot="content">
<m-email v-model="receivers" :repeat-data="receiversCc"></m-email>
</div>
</m-list-box>
<m-list-box>
<div slot="text">抄送人</div>
<div slot="content">
<m-email v-model="receiversCc" :repeat-data="receivers"></m-email>
</div>
</m-list-box>
</template>
<m-list-box v-show="type === 'HIVE'">
<div slot="text">{{$t('SQL Parameter')}}</div>
<div slot="content">
@ -83,6 +97,7 @@
import mDatasource from './_source/datasource'
import mLocalParams from './_source/localParams'
import disabledState from '@/module/mixin/disabledState'
import mEmail from '@/conf/home/pages/projects/pages/definition/pages/list/_source/email'
import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
let editor
@ -108,7 +123,11 @@
// Form/attachment
showType: ['TABLE'],
// Sql parameter
connParams: ''
connParams: '',
// recipients
receivers: [],
// copy to
receiversCc: []
}
},
mixins: [disabledState],
@ -174,6 +193,8 @@
sql: editor.getValue(),
udfs: this.udfs,
sqlType: this.sqlType,
receivers: this.receivers.join(','),
receiversCc: this.receiversCc.join(','),
showType: (() => {
/**
* Special processing return order TABLE,ATTACHMENT
@ -223,12 +244,23 @@
if (val) {
this.showType = []
}
if (val !== 0) {
this.receivers = []
this.receiversCc = []
}
},
// Listening data source
type (val) {
if (val !== 'HIVE') {
this.connParams = ''
}
},
//
showType (val) {
if (!val.length) {
this.receivers = []
this.receiversCc = []
}
}
},
created () {
@ -245,6 +277,8 @@
this.connParams = o.params.connParams || ''
this.localParams = o.params.localParams || []
this.showType = o.params.showType.split(',') || []
this.receivers = o.params.receivers && o.params.receivers.split(',') || []
this.receiversCc = o.params.receiversCc && o.params.receiversCc.split(',') || []
}
},
mounted () {
@ -262,6 +296,6 @@
}
},
computed: {},
components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType }
components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType, mEmail }
}
</script>

2
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gaugeOption.js

@ -37,7 +37,7 @@ export default {
offset: 0,
color: '#FFC539' // 70% 处的颜色
}], false) ],
[1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { // eslint-disable-line
[1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { // eslint-disable-line
offset: 0.2,
color: '#1CAD52' // 92% 处的颜色
}, {

8
escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue

@ -3,7 +3,7 @@
<div class="clearfix input-element">
<span class="tag-wrapper" v-for="(item,$index) in activeList" :class="activeIndex === $index ? 'active' : ''">
<span class="tag-text">{{item}}</span>
<i class="remove-tag ans-icon-close" @click="_del($index)"></i>
<i class="remove-tag ans-icon-close" @click.stop="_del($index)"></i>
</span>
<x-poptip
placement="bottom-start"
@ -15,7 +15,7 @@
<div class="ans-scroller" style=" max-height: 300px;">
<div class="scroll-area-wrapper scroll-transition">
<ul class="dropdown-container">
<li class="ans-option" v-for="(item,$index) in emailList" @click="_selectEmail($index + 1)">
<li class="ans-option" v-for="(item,$index) in emailList" @click.stop="_selectEmail($index + 1)">
<span class="default-option-class" :class="index === ($index + 1) ? 'active' : ''">{{item}}</span>
</li>
</ul>
@ -212,7 +212,7 @@
*/
_handlerEmailWitch () {
setTimeout(() => {
this.emailWidth = parseInt(688 - $(this.$refs.emailInput).position().left - 20)
this.emailWidth = parseInt($('.email-model').width() - $(this.$refs.emailInput).position().left - 20)
if (this.emailWidth < 80) {
this.emailWidth = 200
}
@ -274,7 +274,7 @@
<style lang="scss" rel="stylesheet/scss">
.email-model {
width: 688px;
width: 100%;
.input-element {
min-height: 32px;
padding: 1px 8px;

4
escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue

@ -83,7 +83,7 @@
<div class="text">
{{$t('Recipient')}}
</div>
<div class="cont">
<div class="cont" style="width: 688px;">
<m-email v-model="receivers" :repeat-data="receiversCc"></m-email>
</div>
</div>
@ -91,7 +91,7 @@
<div class="text">
{{$t('Cc')}}
</div>
<div class="cont">
<div class="cont" style="width: 688px;">
<m-email v-model="receiversCc" :repeat-data="receivers"></m-email>
</div>
</div>

257
escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/projectChart.vue

@ -7,7 +7,7 @@
:panel-num="2"
placement="bottom-end"
@on-change="_datepicker"
:value="scheduleTime"
:value="[searchParams.startDate,searchParams.endDate]"
type="daterange"
:placeholder="$t('Select date range')"
format="YYYY-MM-DD HH:mm:ss">
@ -30,7 +30,7 @@
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in taskCountDtosList">
<tr v-for="(item,$index) in taskCtatusList">
<td><span>{{$index+1}}</span></td>
<td>
<span>
@ -60,7 +60,65 @@
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in processStateCountList">
<tr v-for="(item,$index) in processStateList">
<td><span>{{$index+1}}</span></td>
<td><span><a href="javascript:" @click="id && _goProcess(item.key)" :class="id ?'links':''">{{item.value}}</a></span></td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 20px;">
<div class="col-md-6">
<div class="chart-title">
<span>命令状态统计</span>
</div>
<div class="row">
<div class="col-md-7">
<div id="command-state-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in taskCtatusList">
<td><span>{{$index+1}}</span></td>
<td>
<span>
<a href="javascript:" @click="id && _goTask(item.key)" :class="id ?'links':''">{{item.value}}</a>
</span>
</td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="chart-title">
<span>队列统计</span>
</div>
<div class="row">
<div class="col-md-7">
<div id="process-state-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in processStateList">
<td><span>{{$index+1}}</span></td>
<td><span><a href="javascript:" @click="id && _goProcess(item.key)" :class="id ?'links':''">{{item.value}}</a></span></td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
@ -103,22 +161,27 @@
name: 'perject-chart',
data () {
return {
taskCountDtosList: [],
processStateCountList: [],
userList: [],
scheduleTime: ['2018-11-16 00:00:00', '2018-11-16 17:13:11'],
isLoading: true
isLoading: true,
taskCtatusList: [],
processStateList: [],
defineUserList: [],
commandStateList: [],
searchParams: {
projectId: this.id,
startDate: '',
endDate: ''
}
}
},
props: {
id: Number
},
methods: {
...mapActions('projects', ['getTaskCtatusCount', 'getProcessStateCount', 'getDefineUserCount']),
...mapActions('projects', ['getTaskCtatusCount', 'getProcessStateCount', 'getDefineUserCount', 'getCommandStateCount', 'getQueueCount']),
_datepicker (val) {
this.scheduleTime = val
this._stateTypePie()
this._processStatePie()
this.searchParams.startDate = val[0]
this.searchParams.endDate = val[1]
this._getData(false)
},
_goTask (name) {
this.$router.push({
@ -140,99 +203,107 @@
}
})
},
_stateTypePie () {
this.taskCountDtosList = []
this.getTaskCtatusCount({
projectId: this.id,
startDate: this.scheduleTime[0],
endDate: this.scheduleTime[1]
}).then(res => {
let data = res.data.taskCountDtos
this.taskCountDtosList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count,
type: 'type'
}
})
const myChart = Chart.pie('#task-status-pie', this.taskCountDtosList, { title: '' })
myChart.echart.setOption(pie)
//
if (this.id) {
myChart.echart.on('click', e => {
this._goTask(e.data.name)
})
_handleTaskCtatus (res) {
let data = res.data.taskCountDtos
this.taskCtatusList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count,
type: 'type'
}
}).catch(e => {})
},
_processStatePie () {
this.processStateCountList = []
this.getProcessStateCount({
projectId: this.id,
startDate: this.scheduleTime[0],
endDate: this.scheduleTime[1]
}).then(res => {
let data = res.data.taskCountDtos
this.processStateCountList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count
}
})
const myChart = Chart.pie('#task-status-pie', this.taskCtatusList, { title: '' })
myChart.echart.setOption(pie)
//
if (this.id) {
myChart.echart.on('click', e => {
this._goTask(e.data.name)
})
const myChart = Chart.pie('#process-state-pie', this.processStateCountList, { title: '' })
myChart.echart.setOption(pie)
//
if (this.id) {
myChart.echart.on('click', e => {
this._goProcess(e.data.name)
})
}
}).catch(e => {})
}
},
_processDefinitionBar () {
this.getDefineUserCount({
projectId: this.id
}).then(res => {
let data = res.data.userList
this.userList = _.map(data, v => {
return {
key: v.userName + ',' + v.userId + ',' + v.count,
value: v.count
}
_handleProcessState (res) {
let data = res.data.taskCountDtos
this.processStateList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count
}
})
const myChart = Chart.pie('#process-state-pie', this.processStateList, { title: '' })
myChart.echart.setOption(pie)
//
if (this.id) {
myChart.echart.on('click', e => {
this._goProcess(e.data.name)
})
const myChart = Chart.bar('#process-definition-bar', this.userList, {})
myChart.echart.setOption(bar)
//
if (this.id) {
myChart.echart.on('click', e => {
this.$router.push({
name: 'projects-definition-list',
query: {
userId: e.name.split(',')[1]
}
})
}
},
_handleDefineUser (res) {
let data = res.data.userList
this.defineUserList = _.map(data, v => {
return {
key: v.userName + ',' + v.userId + ',' + v.count,
value: v.count
}
})
const myChart = Chart.bar('#process-definition-bar', this.defineUserList, {})
myChart.echart.setOption(bar)
//
if (this.id) {
myChart.echart.on('click', e => {
this.$router.push({
name: 'projects-definition-list',
query: {
userId: e.name.split(',')[1]
}
})
})
}
},
_handleCommandState (res) {
},
_handleQueue () {},
_getData (is = true) {
this.isLoading = true
let ioList = [
this.getTaskCtatusCount(this.searchParams),
this.getProcessStateCount(this.searchParams),
this.getCommandStateCount(this.searchParams),
this.getQueueCount(this.searchParams)
]
if (is) {
ioList.push(this.getDefineUserCount(_.pick(this.searchParams, ['projectId'])))
}
Promise.all(ioList).then(res => {
this._handleTaskCtatus(res[0])
this._handleProcessState(res[1])
this._handleCommandState(res[2])
this._handleQueue(res[3])
if (is) {
this._handleDefineUser(res[4])
}
}).catch(e => {})
setTimeout(() => {
this.isLoading = false
}, 800)
}).catch(e => {
console.log(e)
this.isLoading = false
})
}
},
watch: {
},
created () {
this.scheduleTime = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
this.isLoading = true
Promise.all([
this._stateTypePie(),
this._processStatePie(),
this._processDefinitionBar()
]).then(res => {
setTimeout(() => {
this.isLoading = false
}, 800)
}).catch(e => {
this.isLoading = false
})
this.searchParams.startDate = dayjs().format('YYYY-MM-DD 00:00:00')
this.searchParams.endDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
// init get data
this._getData()
},
mounted () {

24
escheduler-ui/src/js/conf/home/store/projects/actions.js

@ -78,6 +78,30 @@ export default {
})
})
},
/**
* get command state count
*/
getCommandStateCount ({ state }, payload) {
return new Promise((resolve, reject) => {
io.get(`projects/analysis/command-state-count`, payload, res => {
resolve(res)
}).catch(e => {
reject(e)
})
})
},
/**
* get command state count
*/
getQueueCount ({ state }, payload) {
return new Promise((resolve, reject) => {
io.get(`projects/analysis/queue-count`, payload, res => {
resolve(res)
}).catch(e => {
reject(e)
})
})
},
/**
* Process status statistics
*/

Loading…
Cancel
Save