This is an automated email from the ASF dual-hosted git repository. zhangyonglun pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/shardingsphere-elasticjob-ui.git
commit 9bb5ba573c4c46297ba8a0bf0e0f82d53c244f8c Author: renfufei <[email protected]> AuthorDate: Tue Jul 21 01:02:01 2020 +0800 operationServerDetail Page Module --- .../src/lang/zh-CN.js | 1 + .../src/router/index.js | 6 + .../src/views/operation-servers-detail/index.vue | 33 +++ .../module/operationServersDetail.vue | 310 +++++++++++++++++++++ .../src/views/operation-servers/api.js | 2 +- 5 files changed, 351 insertions(+), 1 deletion(-) diff --git a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js index 373e0a5..27c2e92 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js +++ b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js @@ -218,6 +218,7 @@ export default { labelInfo: { serverIp: '服务器IP', instancesNum: '运行实例数', + instanceCount: '运行实例数', jobsNum: '作业总数', disabledJobsNum: '禁用作业数', jobName: '作业名称', diff --git a/shardingsphere-elasticjob-ui-frontend/src/router/index.js b/shardingsphere-elasticjob-ui-frontend/src/router/index.js index 47a4cb5..a861116 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/router/index.js +++ b/shardingsphere-elasticjob-ui-frontend/src/router/index.js @@ -57,6 +57,12 @@ export const constantRouterMap = [ name: 'Operation-servers' }, { + path: '/operation-servers/status-detail', + component: () => import('@/views/operation-servers-detail'), + hidden: true, + name: 'Operation-servers-detail' + }, + { path: '/job-help', component: () => import('@/views/help'), hidden: true, diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers-detail/index.vue b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers-detail/index.vue new file mode 100644 index 0000000..053cb7b --- /dev/null +++ b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers-detail/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-operation-servers-detail /> +</template> + +<script> +import SOperationServersDetail from './module/operationServersDetail' +export default { + name: 'OperationServersDetail', + components: { + SOperationServersDetail + } +} +</script> + +<style lang="scss" scoped> +</style> diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers-detail/module/operationServersDetail.vue b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers-detail/module/operationServersDetail.vue new file mode 100644 index 0000000..4718ddc --- /dev/null +++ b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers-detail/module/operationServersDetail.vue @@ -0,0 +1,310 @@ +<!-- + - 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"> + <el-form :model="searchForm" class="demo-form-inline"> + <el-form-item> + <el-col :span="4"> + <el-button @click="goBack" type="info" icon="el-icon-arrow-left">Back</el-button> + </el-col> + <el-col :span="14"> + <el-link type="info" disabled> {{$t('operationServers.labelInfo.serverIp') }}:</el-link> + <el-link type="info" disabled>{{serverIp || "-" }}</el-link> + </el-col> + <el-col :span="6"> + <el-input + v-model="searchForm.jobName" + placeholder="Search" + clearable + @clear="search" + @change="search" + autocomplete="off" > + <i slot="prefix" class="el-input__icon el-icon-search"></i> + <el-button slot="append" icon="el-icon-search" + @click="search"></el-button> + </el-input> + </el-col> + </el-form-item> + </el-form> + <div class="btn-group pull-right" style="float: right;"> + + </div> + <div class="table-wrap"> + <el-table + :data="tableData" + stripe + border + style="width: 100%"> + <el-table-column + :prop="columnJobName.prop" + :label="columnJobName.label" + :width="columnJobName.width"> + <template slot-scope="scope"> + <span>{{ scope.row.jobName }}</span> + </template> + </el-table-column> + <el-table-column + :prop="columnInstanceCount.prop" + :label="columnInstanceCount.label" + :width="columnInstanceCount.width"> + <template slot-scope="scope"> + <span>{{ scope.row.instanceCount }}</span> + </template> + </el-table-column> + <el-table-column + :prop="columnStatus.prop" + :label="columnStatus.label" + :width="columnStatus.width"> + <template slot-scope="scope"> + <el-button + v-if="'OK'===scope.row.status && scope.row.instanceCount" + size="mini" + :type="statusColor.OK" + plain> + {{ $t("operationServers.statusText.OK") }} + </el-button> + <el-button + v-if="'DISABLED'===scope.row.status && scope.row.instanceCount" + size="mini" + :type="statusColor.DISABLED" + plain> + {{ $t("operationServers.statusText.DISABLED") }} + </el-button> + <el-button + v-if="'SHARDING_FLAG'===scope.row.status && scope.row.instanceCount" + size="mini" + :type="statusColor.SHARDING_FLAG" + plain> + {{ $t("operationServers.statusText.SHARDING_FLAG") }} + </el-button> + <el-button + v-if="'PENDING'===scope.row.status && scope.row.instanceCount" + size="mini" + :type="statusColor.PENDING" + plain> + {{ $t("operationServers.statusText.PENDING") }} + </el-button> + <el-button + v-if="!scope.row.instanceCount || 'CRASHED'===scope.row.status" + size="mini" + :type="statusColor.CRASHED" + plain> + {{ $t("operationServers.statusText.CRASHED") }} + </el-button> + </template> + </el-table-column> + <el-table-column + :label="$t('operationServers.labelInfo.operate')" + fixed="right" width="300"> + <template slot-scope="scope"> + <el-button-group> + <el-button + size="mini" + type="success" + :disabled="isGuest" + v-if="scope.row.instanceCount && 'DISABLED'===scope.row.status" + @click="handleEnable(scope.row)" + plain>{{ $t("operationServers.actionText.enable") }}</el-button> + <el-button + size="mini" + type="warning" + :disabled="isGuest" + v-if="scope.row.instanceCount && 'OK'===scope.row.status" + @click="handleDisable(scope.row)" + plain>{{ $t("operationServers.actionText.disable") }}</el-button> + <el-button + size="mini" + type="danger" + :disabled="isGuest" + v-if="scope.row.instanceCount" + @click="handleShutdown(scope.row)" + plain>{{ $t("operationServers.actionText.shutdown") }}</el-button> + <el-button + size="mini" + type="danger" + :disabled="isGuest" + v-if="!scope.row.instanceCount" + @click="handleRemove(scope.row)" + plain>{{ $t("operationServers.actionText.remove") }}</el-button> + </el-button-group> + </template> + </el-table-column> + </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 '../../operation-servers/api' +export default { + name: 'OperationServers', + data() { + return { + isGuest: window.localStorage.getItem('isGuest') == 'true', + serverIp: "", + columnJobName: { + label: this.$t('operationServers').labelInfo.jobName, + prop: 'jobName', + width : 250 + }, + columnInstanceCount: { + label: this.$t('operationServers').labelInfo.instanceCount, + prop: 'instanceCount', + width : 250 + }, + columnStatus: { + label: this.$t('operationServers').labelInfo.status, + prop: 'status', + width : 200 + }, + statusColor: { + OK: 'success', + DISABLED: 'warning', + CRASHED: 'info', + PENDING: 'info', + SHARDING_FLAG: 'primary' + }, + searchForm: { + jobName: '' + }, + tableData: [], + cloneTableData: [], + currentPage: 1, + pageSize: 10, + total: 0 + } + }, + created() { + this.serverIp = this.$route.params.serverIp || + localStorage.getItem("/operation-servers/status-detail/serverIp") + if(!this.serverIp){ + this.goBack() + return + } + this.search() + }, + methods: { + ...mapActions(['setRegCenterActivated']), + handleCurrentChange(val) { + const data = clone(this.cloneTableData) + this.tableData = data.splice(this.pageSize*(val - 1), this.pageSize) + }, + goBack() { + this.$router.push({path: '/operation-servers'}) + }, + getJobs() { + var params = { + serverIp: this.serverIp + } + API.getJobs(params).then(res => { + const data = Array.prototype.filter.call(res.model, this.filterSearchData) + this.total = data.length + this.cloneTableData = clone(data) + this.tableData = data.splice(0, this.pageSize) + }) + }, + filterSearchData(model) { + if(!this.searchForm.jobName){ + return true; + } + if(!model){ + return true; + } + return model.jobName && model.jobName.toLowerCase().includes(this.searchForm.jobName.toLowerCase()); + }, + handleEnable(row) { + const params = { + serverIp: this.serverIp, + jobName: row.jobName + } + API.enableServerJob(params).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.actionSucMessage, + type: 'success' + }) + this.search() + }) + }, + handleDisable(row) { + const params = { + serverIp: this.serverIp, + jobName: row.jobName + } + API.disableServerJob(params).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.actionSucMessage, + type: 'success' + }) + this.search() + }) + }, + handleShutdown(row) { + const params = { + serverIp: this.serverIp, + jobName: row.jobName + } + API.shutdownServerJob(params).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.actionSucMessage, + type: 'success' + }) + this.search() + }) + }, + handleRemove(row) { + const params = { + serverIp: this.serverIp, + jobName: row.jobName + } + API.removeServerJob(params).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.actionSucMessage, + type: 'success' + }) + this.search() + }) + }, + search() { + this.getJobs() + } + } +} +</script> +<style lang='scss' scoped> +.btn-group { + margin-bottom: 20px; +} +.pagination { + float: right; + margin: 10px -10px 10px 0; +} +</style> 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 94cdf89..e9888a4 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js +++ b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js @@ -30,6 +30,6 @@ export default { disableServerJob: (params) => API.post('/api/servers/' + params.serverIp + '/jobs/' + params.jobName + '/disable'), enableServerJob: (params) => API.post('/api/servers/' + params.serverIp + '/jobs/' + params.jobName + '/enable'), shutdownServerJob: (params) => API.post('/api/servers/' + params.serverIp + '/jobs/' + params.jobName + '/shutdown'), - removeServerJob: (params) => API.post('/api/servers/' + params.serverIp + '/jobs/' + params.jobName + '') + removeServerJob: (params) => API.delete('/api/servers/' + params.serverIp + '/jobs/' + params.jobName + '') }
