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:07 UTC
[shardingsphere-elasticjob-ui] 20/29: operationServerDetail Page
Module
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 9bb5ba573c4c46297ba8a0bf0e0f82d53c244f8c
Author: renfufei <re...@huobi.com>
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 + '')
}