| <!-- |
| - 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. |
| --> |
| |
| <template> |
| <el-row class="job-dashboard"> |
| <el-row :gutter="16" class="row"> |
| <el-col :span="16"> |
| <el-card class="box-card"> |
| <div slot="header" class="clearfix"> |
| <span>{{ $t("historyDashboard.successAndFailCount") }}</span> |
| </div> |
| <el-row> |
| <el-col :span="8" class="col"> |
| <h2>{{ $t("historyDashboard.jobInfoForOneMinute") }}</h2> |
| <v-chart :options="lastMinute"/> |
| </el-col> |
| <el-col :span="8" class="col"> |
| <h2>{{ $t("historyDashboard.jobInfoForOneHour") }}</h2> |
| <v-chart :options="lastHour"/> |
| </el-col> |
| <el-col :span="8" class="col"> |
| <h2>{{ $t("historyDashboard.jobInfoForOneWeek") }}</h2> |
| <v-chart :options="lastWeek"/> |
| </el-col> |
| </el-row> |
| </el-card> |
| </el-col> |
| <el-col :span="8"> |
| <el-card class="box-card"> |
| <div slot="header" class="clearfix"> |
| <span>{{ $t("historyDashboard.jobType") }}</span> |
| </div> |
| <el-row> |
| <el-col class="col"> |
| <h2>{{ $t("historyDashboard.jobExecutionTypeJob") }}</h2> |
| <v-chart :options="executionType"/> |
| </el-col> |
| </el-row> |
| </el-card> |
| </el-col> |
| </el-row> |
| <el-row class="row"> |
| <el-card class="box-card"> |
| <div slot="header" class="clearfix"> |
| <span>{{ $t("historyDashboard.successAndFailCount") }}</span> |
| </div> |
| <el-row> |
| <v-chart :options="result"/> |
| </el-row> |
| </el-card> |
| </el-row> |
| <el-row class="row"> |
| <el-card class="box-card"> |
| <div slot="header" class="clearfix"> |
| <span>{{ $t("historyDashboard.jobTaskRunningCount") }}</span> |
| </div> |
| <el-row> |
| <v-chart :options="running"/> |
| </el-row> |
| </el-card> |
| </el-row> |
| <el-row class="row"> |
| <el-card class="box-card"> |
| <div slot="header" class="clearfix"> |
| <span>{{ $t("historyDashboard.currentJobsCount") }}</span> |
| </div> |
| <el-row> |
| <v-chart :options="register"/> |
| </el-row> |
| </el-card> |
| </el-row> |
| </el-row> |
| </template> |
| |
| <script> |
| import ECharts from 'vue-echarts' |
| import 'echarts/lib/chart/pie' |
| import 'echarts/lib/chart/line' |
| import 'echarts/lib/component/tooltip' |
| import 'echarts/lib/component/legend' |
| import moment from 'moment' |
| |
| import API from './api' |
| export default { |
| name: 'JobDashboard', |
| components: { |
| 'v-chart': ECharts |
| }, |
| data() { |
| return { |
| color: ['rgb(105, 167, 225)', 'rgb(120, 230, 117)'], |
| lastMinute: {}, |
| lastHour: {}, |
| lastWeek: {}, |
| executionType: {}, |
| register: {}, |
| running: {}, |
| result: {} |
| } |
| }, |
| created() { |
| this.getTasksPeriod() |
| this.getJobsExecutionType() |
| this.getJobsRegister() |
| this.getJobsRunning() |
| this.getTasksResults() |
| }, |
| methods: { |
| getTasksResults() { |
| const params = { |
| since: 'last24hours' |
| } |
| API.getTasksResults(params).then(res => { |
| const series1 = [] |
| const series2 = [] |
| if (res.model && res.model.length) { |
| res.model.forEach(item => { |
| series1.push([moment(item.statisticsTime).format('HH:00'), item.successCount]) |
| series2.push([moment(item.statisticsTime).format('HH:00'), item.failedCount]) |
| }) |
| } |
| this.result = { |
| color: this.color, |
| tooltip: { |
| trigger: 'axis' |
| }, |
| legend: { |
| data: [this.$t('historyDashboard').jobSuccessCount, this.$t('historyDashboard').jobFailureCount], |
| bottom: 0 |
| }, |
| grid: { |
| left: '3%', |
| right: '4%', |
| bottom: '9%', |
| containLabel: true |
| }, |
| xAxis: { |
| type: 'category', |
| boundaryGap: false |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| name: this.$t('historyDashboard').jobSuccessCount, |
| type: 'line', |
| data: series1 |
| }, { |
| name: this.$t('historyDashboard').jobFailureCount, |
| type: 'line', |
| data: series2 |
| }] |
| } |
| }) |
| }, |
| getJobsRunning() { |
| const params = { |
| since: 'lastWeek' |
| } |
| API.getJobsRunning(params).then(res => { |
| API.getTasksRunning(params).then(resp => { |
| if (resp.model && res.model.length) { |
| 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() { |
| API.getJobsRegister().then(res => { |
| const series = [] |
| if (res.model && res.model.length) { |
| res.model && res.model.forEach(item => { |
| series.push([moment(item.statisticsTime).format('HH:mm'), item.registeredCount]) |
| }) |
| } |
| this.register = { |
| color: this.color, |
| tooltip: { |
| trigger: 'axis' |
| }, |
| legend: { |
| data: [this.$t('historyDashboard').currentJobsCount], |
| bottom: 0 |
| }, |
| grid: { |
| left: '3%', |
| right: '4%', |
| bottom: '3%', |
| containLabel: true |
| }, |
| xAxis: { |
| type: 'category', |
| boundaryGap: false |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| name: this.$t('historyDashboard').currentJobsCount, |
| type: 'line', |
| data: series |
| }] |
| } |
| }) |
| }, |
| getJobsExecutionType() { |
| API.getJobsExecutionType().then(res => { |
| const { model } = res |
| this.executionType = { |
| color: this.color, |
| tooltip: { |
| trigger: 'item', |
| formatter: '{b}<br/>{c}' |
| }, |
| series: [ |
| { |
| name: 'jobtype', |
| type: 'pie', |
| radius: '35%', |
| center: ['50%', '50%'], |
| data: [ |
| { 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: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| } |
| } |
| ] |
| } |
| }) |
| }, |
| 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', |
| type: 'pie', |
| radius: '35%', |
| center: ['50%', '50%'], |
| data: [ |
| { 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: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| } |
| } |
| ] |
| } |
| }) |
| API.getTasksPeriod('lastHour').then(res => { |
| const { model } = res |
| this.lastHour = { |
| color: this.color, |
| tooltip: { |
| trigger: 'item', |
| formatter: '{b}<br/>{c}' |
| }, |
| series: [ |
| { |
| name: 'lastHour', |
| type: 'pie', |
| radius: '35%', |
| center: ['50%', '50%'], |
| data: [ |
| { 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: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| } |
| } |
| ] |
| } |
| }) |
| API.getTasksPeriod('lastWeek').then(res => { |
| const { model } = res |
| this.lastWeek = { |
| color: this.color, |
| tooltip: { |
| trigger: 'item', |
| formatter: '{b}<br/>{c}' |
| }, |
| series: [ |
| { |
| name: 'lastWeek', |
| type: 'pie', |
| radius: '35%', |
| center: ['50%', '50%'], |
| data: [ |
| { 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: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| } |
| } |
| ] |
| } |
| }) |
| }, |
| percentage(value, count) { |
| if (value === 0) { |
| return '0.0%' |
| } |
| return Number((value / count) * 100).toFixed(1) + '%' |
| } |
| } |
| } |
| </script> |
| |
| <style lang="scss" scoped> |
| .job-dashboard { |
| padding: 0 16px; |
| h2 { |
| font-size: 14px; |
| } |
| .col { |
| text-align: center; |
| } |
| .row { |
| margin-top: 16px; |
| } |
| } |
| .echarts { |
| height: 300px; |
| width: 100%; |
| } |
| </style> |
