You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@shardingsphere.apache.org by pa...@apache.org on 2020/07/21 09:33:14 UTC
[shardingsphere-elasticjob-ui] 27/29: Add job history status page
This is an automated email from the ASF dual-hosted git repository.
panjuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shardingsphere-elasticjob-ui.git
commit 5835e211591c30c96d6e7ff3dff3cb25ef96c689
Author: menghaoranss <lo...@163.com>
AuthorDate: Tue Jul 21 16:19:01 2020 +0800
Add job history status page
---
.../controller/EventTraceHistoryController.java | 6 +-
.../src/lang/en-US.js | 21 +++
.../src/lang/zh-CN.js | 21 +++
.../src/router/index.js | 6 +
.../src/views/history-status/api.js | 22 +++
.../src/views/history-status/index.vue | 33 ++++
.../views/history-status/module/historyStatus.vue | 171 +++++++++++++++++++++
7 files changed, 277 insertions(+), 3 deletions(-)
diff --git a/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/EventTraceHistoryController.java b/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/EventTraceHistoryController.java
index 261333f..5b5acf4 100644
--- a/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/EventTraceHistoryController.java
+++ b/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/EventTraceHistoryController.java
@@ -61,9 +61,9 @@ public final class EventTraceHistoryController {
* @param requestParams query criteria
* @return job status trace result
*/
- @GetMapping(value = "/status")
- public BasePageResponse<JobStatusTraceEvent> findJobStatusTraceEvents(final FindJobStatusTraceEventsRequest requestParams) {
+ @PostMapping(value = "/status")
+ public ResponseResult<BasePageResponse<JobStatusTraceEvent>> findJobStatusTraceEvents(@RequestBody final FindJobStatusTraceEventsRequest requestParams) {
Page<JobStatusTraceEvent> jobStatusTraceEvents = eventTraceHistoryService.findJobStatusTraceEvents(requestParams);
- return BasePageResponse.of(jobStatusTraceEvents);
+ return ResponseResultUtil.build(BasePageResponse.of(jobStatusTraceEvents));
}
}
diff --git a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
index 7cfdae1..6b4542f 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
@@ -259,6 +259,27 @@ export default {
executeFailed: 'Failure'
}
},
+ historyStatus: {
+ column: {
+ jobName: 'Job name',
+ shardingItem: 'Sharding item',
+ state: 'Status',
+ createTime: 'Creation time',
+ remark: 'Comments'
+ },
+ searchForm: {
+ jobName: 'Job name',
+ startTime: 'Creation start time',
+ CompleteTime: 'Creation end time',
+ state: 'Select state',
+ stateStaging: 'Staging',
+ stateFailed: 'Failed',
+ stateFinished: 'Finished',
+ stateRunning: 'Running',
+ stateError: 'Error',
+ stateKilled: 'Killed'
+ }
+ },
help: {
design_concept_title: 'Design concept',
design_concept_info_1: 'Console is not related to Elastic Job, it just reading data from registry center and showing the status of jobs, or updating data to registry center which will change the configuration.',
diff --git a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js
index d97f517..3acdf64 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js
@@ -260,6 +260,27 @@ export default {
executeFailed: '失败'
}
},
+ historyStatus: {
+ column: {
+ jobName: '作业名称',
+ shardingItem: '分片项',
+ state: '状态',
+ createTime: '创建时间',
+ remark: '备注'
+ },
+ searchForm: {
+ jobName: '请输入作业名称',
+ startTime: '请输入创建开始时间',
+ CompleteTime: '请输入创建结束时间',
+ state: '选择状态',
+ stateStaging: '等待运行',
+ stateFailed: '运行失败',
+ stateFinished: '已完成',
+ stateRunning: '运行中',
+ stateError: '启动失败',
+ stateKilled: '主动终止'
+ }
+ },
help: {
design_concept_title: '设计理念',
design_concept_info_1: '本控制台和Elastic Job并无直接关系，是通过读取Elastic Job的注册中心数据展现作业状态，或更新注册中心数据修改全局配置。',
diff --git a/shardingsphere-elasticjob-ui-frontend/src/router/index.js b/shardingsphere-elasticjob-ui-frontend/src/router/index.js
index 8329378..6e1258c 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/router/index.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/router/index.js
@@ -74,6 +74,12 @@ export const constantRouterMap = [
hidden: true,
name: 'History trace'
},
+ {
+ path: '/history-status',
+ component: () => import('@/views/history-status'),
+ hidden: true,
+ name: 'History status'
+ },
]
export default new Router({
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/history-status/api.js b/shardingsphere-elasticjob-ui-frontend/src/views/history-status/api.js
new file mode 100644
index 0000000..a473778
--- /dev/null
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/history-status/api.js
@@ -0,0 +1,22 @@
+/*
+ * 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 API from '@/utils/api'
+
+export default {
+ loadStatus: (params = {}) => API.post(`/api/event-trace/status`, params)
+}
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/history-status/index.vue b/shardingsphere-elasticjob-ui-frontend/src/views/history-status/index.vue
new file mode 100644
index 0000000..b1616fa
--- /dev/null
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/history-status/index.vue
@@ -0,0 +1,33 @@
+<!--
+ - 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>
+ <s-history-status />
+</template>
+
+<script>
+import SHistoryStatus from './module/historyStatus'
+export default {
+ name: 'HistoryStatus',
+ components: {
+ SHistoryStatus
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/history-status/module/historyStatus.vue b/shardingsphere-elasticjob-ui-frontend/src/views/history-status/module/historyStatus.vue
new file mode 100644
index 0000000..1ae0b25
--- /dev/null
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/history-status/module/historyStatus.vue
@@ -0,0 +1,171 @@
+<!--
+ - 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="box-card">
+ <div class="btn-group" style="">
+ <el-input
+ :placeholder="$t('historyStatus.searchForm.jobName')"
+ v-model="searchForm.jobName"
+ clearable>
+ </el-input>
+ <el-date-picker
+ v-model="searchForm.start"
+ type="datetime"
+ :placeholder="$t('historyStatus.searchForm.startTime')"
+ clearable>
+ </el-date-picker>
+ <el-date-picker
+ v-model="searchForm.end"
+ type="datetime"
+ :placeholder="$t('historyStatus.searchForm.CompleteTime')"
+ clearable>
+ </el-date-picker>
+ <el-select v-model="searchForm.state" clearable :placeholder="$t('historyStatus.searchForm.state')">
+ <el-option
+ v-for="item in stateItems"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ <el-button
+ icon="el-icon-search"
+ @click="getJobStatus"
+ ></el-button>
+ </div>
+ <div class="table-wrap">
+ <el-table :data="tableData" border style="width: 100%">
+ <el-table-column
+ v-for="(item, index) in column"
+ :key="index"
+ :prop="item.prop"
+ :label="item.label"
+ :width="item.width"
+ />
+ </el-table>
+ <div class="pagination">
+ <el-pagination
+ :total="total"
+ :current-page="currentPage"
+ background
+ layout="prev, pager, next"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </div>
+
+ </el-row>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import clone from 'lodash/clone'
+import API from '../api'
+export default {
+ name: 'HistoryStatus',
+ data() {
+ return {
+ column: [
+ {
+ label: this.$t('historyStatus').column.jobName,
+ prop: 'jobName'
+ },
+ {
+ label: this.$t('historyStatus').column.shardingItem,
+ prop: 'shardingItem'
+ },
+ {
+ label: this.$t('historyStatus').column.state,
+ prop: 'state'
+ },
+ {
+ label: this.$t('historyStatus').column.createTime,
+ prop: 'creationTime'
+ },
+ {
+ label: this.$t('historyStatus').column.remark,
+ prop: 'message'
+ }
+ ],
+ stateItems: [
+ {
+ value: 'TASK_STAGING',
+ label: this.$t('historyStatus').searchForm.stateStaging
+ }, {
+ value: 'TASK_FAILED',
+ label: this.$t('historyStatus').searchForm.stateFailed
+ },
+ {
+ value: 'TASK_FINISHED',
+ label: this.$t('historyStatus').searchForm.stateFinished
+ }, {
+ value: 'TASK_RUNNING',
+ label: this.$t('historyStatus').searchForm.stateRunning
+ },
+ {
+ value: 'TASK_ERROR',
+ label: this.$t('historyStatus').searchForm.stateError
+ }, {
+ value: 'TASK_KILLED',
+ label: this.$t('historyStatus').searchForm.stateKilled
+ }
+ ],
+ searchForm: {
+ jobName: '',
+ state: '',
+ start: '',
+ end: ''
+ },
+ tableData: [],
+ cloneTableData: [],
+ currentPage: 1,
+ pageSize: 10,
+ total: null
+ }
+ },
+ created() {
+ this.getJobStatus()
+ },
+ methods: {
+ ...mapActions(['setRegCenterActivated']),
+ handleCurrentChange(val) {
+ const data = clone(this.cloneTableData)
+ this.tableData = data.splice(val - 1, this.pageSize)
+ },
+ getJobStatus() {
+ API.loadStatus(this.searchForm).then(res => {
+ const data = res.model
+ this.total = data.length
+ this.cloneTableData = clone(res.model)
+ this.tableData = data.splice(0, this.pageSize)
+ })
+ }
+ }
+}
+</script>
+<style lang='scss' scoped>
+.btn-group {
+ margin-bottom: 20px;
+}
+.pagination {
+ float: right;
+ margin: 10px -10px 10px 0;
+}
+.el-input {
+ width: 200px;
+}
+</style>