Merge pull request #27 from menghaoranss/dashboard-i18n
Add i18n for dashboard
diff --git a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/package.json b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/package.json
index ebe5e7a..65b8d9f 100644
--- a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/package.json
+++ b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/package.json
@@ -20,7 +20,7 @@
"moment": "^2.27.0",
"normalize.css": "^8.0.1",
"vue": "^2.5.2",
- "vue-echarts": "^5.0.0-beta.0",
+ "vue-echarts": "^4.1.0",
"vue-i18n": "^8.4.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
diff --git a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/en-US.js b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/en-US.js
index b6dd5e1..df6b965 100644
--- a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/en-US.js
+++ b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/en-US.js
@@ -299,5 +299,21 @@
stateError: 'Error',
stateKilled: 'Killed'
}
+ },
+ historyDashboard: {
+ successAndFailCount: 'Success and failure count',
+ jobType: 'Job type',
+ jobExecutionTypeJob: 'execution type',
+ jobTaskRunningCount: 'Job and task running count',
+ currentJobsCount: 'Registry jobs count',
+ jobInfoForOneMinute: 'Job info for one minute',
+ jobInfoForOneHour: 'Job info for one hour',
+ jobInfoForOneWeek: 'Job info for one week',
+ jobSuccessCount: 'Job success count',
+ jobFailureCount: 'Job failure count',
+ taskRunningCount: 'Task running count',
+ jobRunningCount: 'Job running count',
+ success: 'Success',
+ failed: 'Failed'
}
}
diff --git a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/zh-CN.js b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/zh-CN.js
index 1134f6e..183bebb 100644
--- a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/zh-CN.js
+++ b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/zh-CN.js
@@ -299,5 +299,21 @@
stateError: '启动失败',
stateKilled: '主动终止'
}
+ },
+ historyDashboard: {
+ successAndFailCount: '作业成功/失败数',
+ jobType: '作业分类',
+ jobExecutionTypeJob: '作业执行类型',
+ jobTaskRunningCount: '作业/任务运行数',
+ currentJobsCount: '接入平台作业数',
+ jobInfoForOneMinute: '一分钟作业情况',
+ jobInfoForOneHour: '一小时作业情况',
+ jobInfoForOneWeek: '一周作业情况',
+ jobSuccessCount: '作业成功数',
+ jobFailureCount: '作业失败数',
+ taskRunningCount: '任务运行数',
+ jobRunningCount: '作业运行数',
+ success: '成功',
+ failed: '失败'
}
}
diff --git a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/job-dashboard/index.vue b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/job-dashboard/index.vue
index 2dcb40f..2a10a9f 100644
--- a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/job-dashboard/index.vue
+++ b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/job-dashboard/index.vue
@@ -21,19 +21,19 @@
<el-col :span="16">
<el-card class="box-card">
<div slot="header" class="clearfix">
- <span>Job success / failure</span>
+ <span>{{ $t("historyDashboard.successAndFailCount") }}</span>
</div>
<el-row>
<el-col :span="8" class="col">
- <h2>一分钟作业情况</h2>
+ <h2>{{ $t("historyDashboard.jobInfoForOneMinute") }}</h2>
<v-chart :options="lastMinute"/>
</el-col>
<el-col :span="8" class="col">
- <h2>一小时作业情况</h2>
+ <h2>{{ $t("historyDashboard.jobInfoForOneHour") }}</h2>
<v-chart :options="lastHour"/>
</el-col>
<el-col :span="8" class="col">
- <h2>一周作业情况</h2>
+ <h2>{{ $t("historyDashboard.jobInfoForOneWeek") }}</h2>
<v-chart :options="lastWeek"/>
</el-col>
</el-row>
@@ -42,11 +42,11 @@
<el-col :span="8">
<el-card class="box-card">
<div slot="header" class="clearfix">
- <span>作业分类</span>
+ <span>{{ $t("historyDashboard.jobType") }}</span>
</div>
<el-row>
<el-col class="col">
- <h2>执行分类</h2>
+ <h2>{{ $t("historyDashboard.jobExecutionTypeJob") }}</h2>
<v-chart :options="executionType"/>
</el-col>
</el-row>
@@ -56,7 +56,7 @@
<el-row class="row">
<el-card class="box-card">
<div slot="header" class="clearfix">
- <span>作业成功/失败数</span>
+ <span>{{ $t("historyDashboard.successAndFailCount") }}</span>
</div>
<el-row>
<v-chart :options="result"/>
@@ -66,7 +66,7 @@
<el-row class="row">
<el-card class="box-card">
<div slot="header" class="clearfix">
- <span>作业/任务运行数</span>
+ <span>{{ $t("historyDashboard.jobTaskRunningCount") }}</span>
</div>
<el-row>
<v-chart :options="running"/>
@@ -76,7 +76,7 @@
<el-row class="row">
<el-card class="box-card">
<div slot="header" class="clearfix">
- <span>接入平台作业数</span>
+ <span>{{ $t("historyDashboard.currentJobsCount") }}</span>
</div>
<el-row>
<v-chart :options="register"/>
@@ -110,7 +110,7 @@
register: {},
running: {},
result: {}
- }
+ }
},
created() {
this.getTasksPeriod()
@@ -130,9 +130,8 @@
const series2 = []
if (res.model && res.model.length) {
res.model.forEach(item => {
- xAxis.push(moment(item.statisticsTime).format('MM-DD'))
- series1.push(item.successCount)
- series2.push(item.failedCount)
+ series1.push([moment(item.statisticsTime).format('HH:00'), item.successCount])
+ series2.push([moment(item.statisticsTime).format('HH:00'), item.failedCount])
})
}
this.result = {
@@ -141,7 +140,7 @@
trigger: 'axis'
},
legend: {
- data: ['successCount', 'failedCount'],
+ data: [this.$t('historyDashboard').jobSuccessCount, this.$t('historyDashboard').jobFailureCount],
bottom: 0
},
grid: {
@@ -152,66 +151,77 @@
},
xAxis: {
type: 'category',
- boundaryGap: false,
- data: xAxis
+ boundaryGap: false
},
yAxis: {
type: 'value'
},
series: [{
- name: 'successCount',
+ name: this.$t('historyDashboard').jobSuccessCount,
type: 'line',
data: series1
},{
- name: 'failedCount',
+ name: this.$t('historyDashboard').jobFailureCount,
type: 'line',
data: series2
}]
}
})
- },
+ },
getJobsRunning() {
const params = {
since: 'lastWeek'
}
API.getJobsRunning(params).then(res => {
- const xAxis = []
- const series = []
- if (res.model && res.model.length) {
- res.model && res.model.forEach(item => {
- xAxis.push(moment(item.statisticsTime).format('MM-DD'))
- series.push(item.runningCount)
- })
- }
- this.running = {
- color: this.color,
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['runningCount'],
- bottom: 0
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: xAxis
- },
- yAxis: {
- type: 'value'
- },
- series: [{
- name: 'runningCount',
- type: 'line',
- data: series
- }]
- }
+ API.getTasksRunning(params).then(resp => {
+ if (resp.model && res.model.length) {
+ const xAxis = []
+ const jobSeries = []
+ const taskSeries = []
+ if (res.model && res.model.length) {
+ res.model && res.model.forEach(item => {
+ jobSeries.push([moment(item.statisticsTime).format('MM-DD'), item.runningCount])
+ })
+ }
+ if (resp.model && resp.model.length) {
+ resp.model && resp.model.forEach(item => {
+ taskSeries.push([moment(item.statisticsTime).format('MM-DD'), item.runningCount])
+ })
+ }
+ this.running = {
+ color: this.color,
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: [this.$t('historyDashboard').taskRunningCount, this.$t('historyDashboard').jobRunningCount],
+ bottom: 0
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ name: this.$t('historyDashboard').taskRunningCount,
+ type: 'line',
+ data: taskSeries
+ },{
+ name: this.$t('historyDashboard').jobRunningCount,
+ type: 'line',
+ data: jobSeries
+ }]
+ }
+ }
+ })
})
},
getJobsRegister() {
@@ -220,8 +230,7 @@
const series = []
if (res.model && res.model.length) {
res.model && res.model.forEach(item => {
- xAxis.push(moment(item.statisticsTime).format('MM-DD'))
- series.push(item.registeredCount)
+ series.push([moment(item.statisticsTime).format('HH:mm'), item.registeredCount])
})
}
this.register = {
@@ -230,7 +239,7 @@
trigger: 'axis'
},
legend: {
- data: ['registeredCount'],
+ data: [this.$t('historyDashboard').currentJobsCount],
bottom: 0
},
grid: {
@@ -241,14 +250,13 @@
},
xAxis: {
type: 'category',
- boundaryGap: false,
- data: xAxis
+ boundaryGap: false
},
yAxis: {
type: 'value'
},
series: [{
- name: 'registeredCount',
+ name: this.$t('historyDashboard').currentJobsCount,
type: 'line',
data: series
}]
@@ -260,6 +268,10 @@
const { model } = res
this.executionType = {
color: this.color,
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}<br/>{c}'
+ },
series: [
{
name: 'jobtype',
@@ -267,8 +279,8 @@
radius: '35%',
center: ['50%', '50%'],
data: [
- {value: model.transientJobCount, name: 'TRANSI'},
- {value: model.daemonJobCount, name: 'DAEMON'}
+ {value: model.transientJobCount, name: 'TRANSI', label:{formatter: '{b}:\n' + this.percentage(model.transientJobCount, model.transientJobCount + model.daemonJobCount)}},
+ {value: model.daemonJobCount, name: 'DAEMON', label:{formatter: '{b}:\n' + this.percentage(model.daemonJobCount, model.transientJobCount + model.daemonJobCount)}}
],
emphasis: {
itemStyle: {
@@ -285,8 +297,14 @@
getTasksPeriod() {
API.getTasksPeriod('lastMinute').then(res => {
const { model } = res
+ model.successCount=40
+ model.failedCount=60
this.lastMinute = {
color: this.color,
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}<br/>{c}'
+ },
series: [
{
name: 'lastMinute',
@@ -294,8 +312,8 @@
radius: '35%',
center: ['50%', '50%'],
data: [
- {value: model.successCount, name: 'Success'},
- {value: model.failedCount, name: 'Failed'}
+ {value: model.successCount, name: this.$t('historyDashboard').success, label:{formatter: '{b}:\n' + this.percentage(model.successCount, model.successCount + model.failedCount)}},
+ {value: model.failedCount, name: this.$t('historyDashboard').failed, label:{formatter: '{b}:\n' + this.percentage(model.failedCount, model.successCount + model.failedCount)}}
],
emphasis: {
itemStyle: {
@@ -312,6 +330,10 @@
const { model } = res
this.lastHour = {
color: this.color,
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}<br/>{c}'
+ },
series: [
{
name: 'lastHour',
@@ -319,8 +341,8 @@
radius: '35%',
center: ['50%', '50%'],
data: [
- {value: model.successCount, name: 'successCount'},
- {value: model.failedCount, name: 'failedCount'}
+ {value: model.successCount, name: this.$t('historyDashboard').success, label:{formatter: '{b}:\n' + this.percentage(model.successCount, model.successCount + model.failedCount)}},
+ {value: model.failedCount, name: this.$t('historyDashboard').failed, label:{formatter: '{b}:\n' + this.percentage(model.failedCount, model.successCount + model.failedCount)}}
],
emphasis: {
itemStyle: {
@@ -337,6 +359,10 @@
const { model } = res
this.lastWeek = {
color: this.color,
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}<br/>{c}'
+ },
series: [
{
name: 'lastWeek',
@@ -344,8 +370,8 @@
radius: '35%',
center: ['50%', '50%'],
data: [
- {value: model.successCount, name: 'successCount'},
- {value: model.failedCount, name: 'failedCount'}
+ {value: model.successCount, name: this.$t('historyDashboard').success, label:{formatter: '{b}:\n' + this.percentage(model.successCount, model.successCount + model.failedCount)}},
+ {value: model.failedCount, name: this.$t('historyDashboard').failed, label:{formatter: '{b}:\n' + this.percentage(model.failedCount, model.successCount + model.failedCount)}}
],
emphasis: {
itemStyle: {
@@ -358,6 +384,12 @@
]
}
})
+ },
+ percentage(value, count) {
+ if (value === 0) {
+ return '0.0%'
+ }
+ return Number((value/count)*100).toFixed(1) + '%';
}
}
}
