You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@shardingsphere.apache.org by ki...@apache.org on 2020/07/23 09:20:53 UTC

[shardingsphere-elasticjob-ui] 24/47: Add job history trace page

This is an automated email from the ASF dual-hosted git repository.

kimmking pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shardingsphere-elasticjob-ui.git

commit 0968b43bdfd27ccfcc50cca7390e307fd92174b3
Author: menghaoranss <lo...@163.com>
AuthorDate: Tue Jul 21 14:29:26 2020 +0800

    Add job history trace page
---
 .../controller/EventTraceHistoryController.java    |  12 +-
 shardingsphere-elasticjob-ui-frontend/package.json |   4 -
 .../src/lang/en-US.js                              |  18 +++
 .../src/lang/zh-CN.js                              |  18 +++
 .../src/router/index.js                            |   6 +
 .../src/views/history-trace/api.js                 |  22 +++
 .../src/views/history-trace/index.vue              |  33 ++++
 .../views/history-trace/module/historyTrace.vue    | 171 +++++++++++++++++++++
 .../src/views/operation-jobs/api.js                |   2 +-
 .../src/views/operation-servers/api.js             |   2 +-
 10 files changed, 278 insertions(+), 10 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 b8222c6..261333f 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
@@ -23,9 +23,13 @@ import org.apache.shardingsphere.elasticjob.ui.dto.request.FindJobExecutionEvent
 import org.apache.shardingsphere.elasticjob.ui.dto.request.FindJobStatusTraceEventsRequest;
 import org.apache.shardingsphere.elasticjob.ui.dto.response.BasePageResponse;
 import org.apache.shardingsphere.elasticjob.ui.service.EventTraceHistoryService;
+import org.apache.shardingsphere.elasticjob.ui.web.response.ResponseResult;
+import org.apache.shardingsphere.elasticjob.ui.web.response.ResponseResultUtil;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
@@ -33,7 +37,7 @@ import org.springframework.web.bind.annotation.RestController;
  * Event trace history RESTful API.
  */
 @RestController
-@RequestMapping("/event-trace")
+@RequestMapping("/api/event-trace")
 public final class EventTraceHistoryController {
     
     @Autowired
@@ -45,10 +49,10 @@ public final class EventTraceHistoryController {
      * @param requestParams query criteria
      * @return job execution event trace result
      */
-    @GetMapping(value = "/execution")
-    public BasePageResponse<JobExecutionEvent> findJobExecutionEvents(final FindJobExecutionEventsRequest requestParams) {
+    @PostMapping(value = "/execution")
+    public ResponseResult<BasePageResponse<JobExecutionEvent>> findJobExecutionEvents(@RequestBody final FindJobExecutionEventsRequest requestParams) {
         Page<JobExecutionEvent> jobExecutionEvents = eventTraceHistoryService.findJobExecutionEvents(requestParams);
-        return BasePageResponse.of(jobExecutionEvents);
+        return ResponseResultUtil.build(BasePageResponse.of(jobExecutionEvents));
     }
     
     /**
diff --git a/shardingsphere-elasticjob-ui-frontend/package.json b/shardingsphere-elasticjob-ui-frontend/package.json
index 5c6b1f4..a81dfab 100644
--- a/shardingsphere-elasticjob-ui-frontend/package.json
+++ b/shardingsphere-elasticjob-ui-frontend/package.json
@@ -15,11 +15,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "element-ui": "^2.4.9",
-    "js-yaml": "^3.12.0",
     "lodash": "^4.17.11",
-    "moment": "^2.24.0",
-    "normalize.css": "^8.0.1",
-    "resize-detector": "^0.2.1",
     "vue": "^2.5.2",
     "vue-i18n": "^8.4.0",
     "vue-router": "^3.0.1",
diff --git a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
index 6c88fa7..fe0d4ee 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
@@ -239,6 +239,24 @@ export default {
       remove: 'Remove'
     }
   },
+  historyTrace: {
+    column: {
+      jobName: 'Job name',
+      serverIp: 'Server IP',
+      shardingItem: 'Sharding item',
+      executeResult: 'Execute result',
+      failureCause: 'Failure reason',
+      startTime: 'Start time',
+      completeTime: 'Complete time'
+    },
+    searchForm: {
+      jobName: 'Job name',
+      serverIp: 'Server ip',
+      startTime: 'Start time',
+      CompleteTime: 'Complete time',
+      executeResult: 'Select execute result'
+    }
+  },
   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 27c2e92..d8eaa21 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js
@@ -240,6 +240,24 @@ export default {
       remove: '删除'
     }
   },
+  historyTrace: {
+    column: {
+      jobName: '作业名称',
+      serverIp: '服务器IP',
+      shardingItem: '分片项',
+      executeResult: '执行结果',
+      failureCause: '失败原因',
+      startTime: '开始时间',
+      completeTime: '完成时间'
+    },
+    searchForm: {
+      jobName: '请输入作业名称',
+      serverIp: '请输入服务器IP',
+      startTime: '请输入开始时间',
+      CompleteTime: '请输入完成时间',
+      executeResult: '请选择执行结果'
+    }
+  },
   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 a861116..8329378 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/router/index.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/router/index.js
@@ -68,6 +68,12 @@ export const constantRouterMap = [
     hidden: true,
     name: 'Help'
   },
+  {
+    path: '/history-trace',
+    component: () => import('@/views/history-trace'),
+    hidden: true,
+    name: 'History trace'
+  },
 ]
 
 export default new Router({
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/api.js b/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/api.js
new file mode 100644
index 0000000..27887ad
--- /dev/null
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/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 {
+  loadExecution: (params = {}) => API.post(`/api/event-trace/execution`, params)
+}
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/index.vue b/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/index.vue
new file mode 100644
index 0000000..797649c
--- /dev/null
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/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-trace />
+</template>
+
+<script>
+import SHistoryTrace from './module/historyTrace'
+export default {
+  name: 'HistoryTrace',
+  components: {
+    SHistoryTrace
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/module/historyTrace.vue b/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/module/historyTrace.vue
new file mode 100644
index 0000000..356788e
--- /dev/null
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/history-trace/module/historyTrace.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('historyTrace.searchForm.jobName')"
+        v-model="searchForm.jobName"
+        clearable>
+      </el-input>
+      <el-input
+        :placeholder="$t('historyTrace.searchForm.serverIp')"
+        v-model="searchForm.serverIp"
+        clearable>
+      </el-input>
+      <el-date-picker
+        v-model="searchForm.start"
+        type="datetime"
+        :placeholder="$t('historyTrace.searchForm.startTime')"
+        clearable>
+      </el-date-picker>
+      <el-date-picker
+        v-model="searchForm.end"
+        type="datetime"
+        :placeholder="$t('historyTrace.searchForm.CompleteTime')"
+        clearable>
+      </el-date-picker>
+      <el-select v-model="searchForm.isSuccess" clearable :placeholder="$t('historyTrace.searchForm.executeResult')">
+        <el-option
+          v-for="item in executeResultItems"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-button
+        icon="el-icon-search"
+        @click="getJobTrace"
+      ></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: 'HistoryTrace',
+  data() {
+    return {
+      column: [
+        {
+          label: this.$t('historyTrace').column.jobName,
+          prop: 'jobName'
+        },
+        {
+          label: this.$t('historyTrace').column.serverIp,
+          prop: 'ip'
+        },
+        {
+          label: this.$t('historyTrace').column.shardingItem,
+          prop: 'shardingItem'
+        },
+        {
+          label: this.$t('historyTrace').column.executeResult,
+          prop: 'success'
+        },
+        {
+          label: this.$t('historyTrace').column.failureCause,
+          prop: 'failureCause'
+        },
+        {
+          label: this.$t('historyTrace').column.startTime,
+          prop: 'startTime'
+        },
+        {
+          label: this.$t('historyTrace').column.completeTime,
+          prop: 'completeTime'
+        }
+      ],
+      executeResultItems: [
+        {
+          value: true,
+          label: '成功'
+        }, {
+          value: false,
+          label: '失败'
+        }
+      ],
+      searchForm: {
+        jobName: '',
+        ip: '',
+        start: '',
+        end: '',
+        isSuccess: ''
+      },
+      tableData: [],
+      cloneTableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: null
+    }
+  },
+  created() {
+    this.getJobTrace()
+  },
+  methods: {
+    ...mapActions(['setRegCenterActivated']),
+    handleCurrentChange(val) {
+      const data = clone(this.cloneTableData)
+      this.tableData = data.splice(val - 1, this.pageSize)
+    },
+    getJobTrace() {
+      API.loadExecution(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>
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/operation-jobs/api.js b/shardingsphere-elasticjob-ui-frontend/src/views/operation-jobs/api.js
index cc625ab..67addb4 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/views/operation-jobs/api.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/operation-jobs/api.js
@@ -18,7 +18,7 @@
 import API from '@/utils/api'
 
 export default {
-  getAllJobsBriefInfo: (params = {}) => API.get(`/api/jobs`, params),
+  getAllJobsBriefInfo: (params = {}) => API.get(`/api/jobs/getAllJobsBriefInfo`, params),
   getJobsTotalCount: (params = {}) => API.get(`/api/jobs/count`, params),
 
   triggerJob: (params = {}) => API.post('/api/jobs/' + params.jobName + '/trigger'),
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js
index e9888a4..be42216 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js
@@ -18,7 +18,7 @@
 import API from '@/utils/api'
 
 export default {
-  getAllServersBriefInfo: (params = {}) => API.get(`/api/servers`, params),
+  getAllServersBriefInfo: (params = {}) => API.get(`/api/servers/getAllServersBriefInfo`, params),
   getServersTotalCount: (params = {}) => API.get(`/api/servers/count`, params),
 
   disableServer: (params = {}) => API.post('/api/servers/' + params.serverIp + '/disable'),