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 b6345a91656b0c2d18222cad09ae064857f9d7ae Author: renfufei <[email protected]> AuthorDate: Tue Jul 21 00:00:49 2020 +0800 Server dimension operationServers Module --- .../src/lang/en-US.js | 27 ++- .../src/lang/zh-CN.js | 27 ++- .../src/router/index.js | 6 + .../src/views/operation-servers/api.js | 35 +++ .../src/views/operation-servers/index.vue | 33 +++ .../operation-servers/module/operationServers.vue | 252 +++++++++++++++++++++ 6 files changed, 378 insertions(+), 2 deletions(-) diff --git a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js index 2a57981..6c88fa7 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js +++ b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js @@ -211,7 +211,32 @@ export default { disable: 'Disable', enable: 'Enable', shutdown: 'Shutdown', - remove: 'Remove', + remove: 'Remove' + } + }, + operationServers: { + labelInfo: { + serverIp: 'Server IP', + instancesNum: 'Instance count', + jobsNum: 'Job num', + disabledJobsNum: 'Disabled jobs num', + jobName: 'Job name', + status: 'Status', + operate: 'Operation' + }, + statusText: { + OK: 'Enabled', + DISABLED: 'Disabled', + CRASHED: 'Crashed', + PENDING: 'Staging', + SHARDING_FLAG: 'SHARDING_FLAG' + }, + actionText: { + detail: 'Detail', + disable: 'Disable', + enable: 'Enable', + shutdown: 'Shutdown', + remove: 'Remove' } }, help: { diff --git a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js index 03fa557..373e0a5 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js +++ b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js @@ -211,7 +211,32 @@ export default { disable: '失效', enable: '生效', shutdown: '终止', - remove: '删除', + remove: '删除' + } + }, + operationServers: { + labelInfo: { + serverIp: '服务器IP', + instancesNum: '运行实例数', + jobsNum: '作业总数', + disabledJobsNum: '禁用作业数', + jobName: '作业名称', + status: '状态', + operate: '操作' + }, + statusText: { + OK: '已启用', + DISABLED: '已失效', + CRASHED: '已下线', + PENDING: '等待运行', + SHARDING_FLAG: '分片待调整' + }, + actionText: { + detail: '详情', + disable: '失效', + enable: '生效', + shutdown: '终止', + remove: '删除' } }, help: { diff --git a/shardingsphere-elasticjob-ui-frontend/src/router/index.js b/shardingsphere-elasticjob-ui-frontend/src/router/index.js index c0f3516..47a4cb5 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/router/index.js +++ b/shardingsphere-elasticjob-ui-frontend/src/router/index.js @@ -51,6 +51,12 @@ export const constantRouterMap = [ name: 'Operation-jobs-detail' }, { + path: '/operation-servers', + component: () => import('@/views/operation-servers'), + hidden: true, + name: 'Operation-servers' + }, + { path: '/job-help', component: () => import('@/views/help'), hidden: true, diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js new file mode 100644 index 0000000..94cdf89 --- /dev/null +++ b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/api.js @@ -0,0 +1,35 @@ +/* + * 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 { + getAllServersBriefInfo: (params = {}) => API.get(`/api/servers`, params), + getServersTotalCount: (params = {}) => API.get(`/api/servers/count`, params), + + disableServer: (params = {}) => API.post('/api/servers/' + params.serverIp + '/disable'), + enableServer: (params = {}) => API.post('/api/servers/' + params.serverIp + '/enable'), + shutdownServer: (params = {}) => API.post('/api/servers/' + params.serverIp + '/shutdown'), + removeServer: (params = {}) => API.delete('/api/servers/' + params.serverIp + ""), + + getJobs: (params = {}) => API.get('/api/servers/' + params.serverIp + '/jobs'), + 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 + '') + +} diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/index.vue b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/index.vue new file mode 100644 index 0000000..7e122a1 --- /dev/null +++ b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/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 /> +</template> + +<script> +import SOperationServers from './module/operationServers' +export default { + name: 'OperationServers', + components: { + SOperationServers + } +} +</script> + +<style lang="scss" scoped> +</style> diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/module/operationServers.vue b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/module/operationServers.vue new file mode 100644 index 0000000..1d4dc8f --- /dev/null +++ b/shardingsphere-elasticjob-ui-frontend/src/views/operation-servers/module/operationServers.vue @@ -0,0 +1,252 @@ +<!-- + - 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 pull-right" style="float: right;"> + <el-input + v-model="searchForm.serverIp" + 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> + </div> + <div class="table-wrap"> + <el-table + :data="tableData" + stripe + border + style="width: 100%"> + <el-table-column + v-for="(item, index) in column" + :key="index" + :prop="item.prop" + :label="item.label" + :width="item.width" + > + <template slot-scope="scope"> + <span v-if="'status'!==item.prop">{{ scope.row[item.prop] }}</span> + </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="info" + v-if="scope.row.instancesNum" + @click="handleDetail(scope.row)" + plain>{{ $t("operationServers.actionText.detail") }}</el-button> + <el-button + size="mini" + type="success" + :disabled="isGuest" + v-if="scope.row.instancesNum && scope.row.disabledJobsNum" + @click="handleEnable(scope.row)" + plain>{{ $t("operationServers.actionText.enable") }}</el-button> + <el-button + size="mini" + type="warning" + :disabled="isGuest" + v-if="0===scope.row.disabledJobsNum && scope.row.instancesNum" + @click="handleDisable(scope.row)" + plain>{{ $t("operationServers.actionText.disable") }}</el-button> + <el-button + size="mini" + type="danger" + :disabled="isGuest" + v-if="scope.row.instancesNum" + @click="handleShutdown(scope.row)" + plain>{{ $t("operationServers.actionText.shutdown") }}</el-button> + <el-button + size="mini" + type="danger" + icon="el-icon-delete" + :disabled="isGuest" + v-if="0===scope.row.instancesNum" + @click="handlerRemove(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 '../api' +export default { + name: 'OperationServers', + data() { + return { + isGuest: window.localStorage.getItem('isGuest') == 'true', + column: [ + { + label: this.$t('operationServers').labelInfo.serverIp, + prop: 'serverIp', + width : 200 + }, + { + label: this.$t('operationServers').labelInfo.instancesNum, + prop: 'instancesNum', + width : 180 + }, + { + label: this.$t('operationServers').labelInfo.jobsNum, + prop: 'jobsNum', + width : 160 + }, + { + label: this.$t('operationServers').labelInfo.disabledJobsNum, + prop: 'disabledJobsNum', + width : 160 + } + ], + searchForm: { + serverIp: '' + }, + tableData: [], + cloneTableData: [], + currentPage: 1, + pageSize: 10, + total: 0 + } + }, + created() { + this.search() + }, + methods: { + ...mapActions(['setRegCenterActivated']), + handleCurrentChange(val) { + const data = clone(this.cloneTableData) + this.currentPage = val + this.tableData = data.splice(this.pageSize*(val - 1), this.pageSize) + }, + getAllServersBriefInfo() { + var params = { + } + API.getAllServersBriefInfo(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(this.pageSize*(this.currentPage - 1), this.pageSize) + }) + }, + filterSearchData(model) { + if(!this.searchForm.serverIp){ + return true; + } + if(!model){ + return true; + } + return model.serverIp && model.serverIp.toLowerCase().includes(this.searchForm.serverIp.toLowerCase()); + }, + handleDetail(row) { + const params = { + serverIp: row.serverIp + } + localStorage.setItem("/operation-servers/status-detail/serverIp", params.serverIp); + this.$router.push({path: '/operation-servers/status-detail', params: params }) + }, + handleEnable(row) { + const params = { + serverIp: row.serverIp + } + API.enableServer(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: row.serverIp + } + API.disableServer(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: row.serverIp + } + API.shutdownServer(params).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.actionSucMessage, + type: 'success' + }) + this.search() + }) + }, + handlerRemove(row) { + const params = { + serverIp: row.serverIp + } + API.removeServer(params).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.delSucMessage, + type: 'success' + }) + this.search() + }) + }, + search() { + this.getAllServersBriefInfo() + } + } +} +</script> +<style lang='scss' scoped> +.btn-group { + margin-bottom: 20px; +} +.pagination { + float: right; + margin: 10px -10px 10px 0; +} +.el-form .el-col{ + padding-left: 4px; +} +</style>
