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:32:51 UTC
[shardingsphere-elasticjob-ui] 04/29: Refactor registry center
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 8a74da025f1c03cd7be2344dce4900b4e8e07d24
Author: menghaoranss <lo...@163.com>
AuthorDate: Fri Jul 17 12:13:54 2020 +0800
Refactor registry center
---
.../web/controller/RegistryCenterController.java | 23 +-
.../src/lang/en-US.js | 2 +-
.../src/router/index.js | 8 +-
.../index.js => views/registry-center/api.js} | 24 +-
.../src/views/registry-center/index.vue | 33 ++
.../registry-center/module/registryCenter.vue | 400 +++++++++++++++++++++
6 files changed, 463 insertions(+), 27 deletions(-)
diff --git a/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/RegistryCenterController.java b/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/RegistryCenterController.java
index 9225b91..1f70289 100644
--- a/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/RegistryCenterController.java
+++ b/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/RegistryCenterController.java
@@ -22,6 +22,8 @@ import org.apache.shardingsphere.elasticjob.reg.exception.RegException;
import org.apache.shardingsphere.elasticjob.ui.domain.RegistryCenterConfiguration;
import org.apache.shardingsphere.elasticjob.ui.service.RegistryCenterConfigurationService;
import org.apache.shardingsphere.elasticjob.ui.util.SessionRegistryCenterConfiguration;
+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.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
@@ -40,7 +42,7 @@ import java.util.Collection;
* Registry center RESTful API.
*/
@RestController
-@RequestMapping("/registry-center")
+@RequestMapping("/api/registry-center")
public final class RegistryCenterController {
public static final String REG_CENTER_CONFIG_KEY = "reg_center_config_key";
@@ -68,10 +70,10 @@ public final class RegistryCenterController {
* @param request HTTP request
* @return registry center configurations
*/
- @GetMapping(produces = MediaType.APPLICATION_JSON)
- public Collection<RegistryCenterConfiguration> load(final HttpServletRequest request) {
+ @GetMapping("/load")
+ public ResponseResult<Collection<RegistryCenterConfiguration>> load(final HttpServletRequest request) {
regCenterService.loadActivated().ifPresent(regCenterConfig -> setRegistryCenterNameToSession(regCenterConfig, request.getSession()));
- return regCenterService.loadAll().getRegistryCenterConfiguration();
+ return ResponseResultUtil.build(regCenterService.loadAll().getRegistryCenterConfiguration());
}
/**
@@ -80,9 +82,9 @@ public final class RegistryCenterController {
* @param config registry center configuration
* @return success to add or not
*/
- @PostMapping(produces = MediaType.APPLICATION_JSON)
- public boolean add(@RequestBody final RegistryCenterConfiguration config) {
- return regCenterService.add(config);
+ @PostMapping("/add")
+ public ResponseResult<Boolean> add(@RequestBody final RegistryCenterConfiguration config) {
+ return ResponseResultUtil.build(regCenterService.add(config));
}
/**
@@ -91,8 +93,9 @@ public final class RegistryCenterController {
* @param config registry center configuration
*/
@DeleteMapping(consumes = MediaType.APPLICATION_JSON)
- public void delete(@RequestBody final RegistryCenterConfiguration config) {
+ public ResponseResult delete(@RequestBody final RegistryCenterConfiguration config) {
regCenterService.delete(config.getName());
+ return ResponseResultUtil.success();
}
/**
@@ -103,12 +106,12 @@ public final class RegistryCenterController {
* @return connected or not
*/
@PostMapping(value = "/connect", consumes = MediaType.APPLICATION_JSON, produces = MediaType.APPLICATION_JSON)
- public boolean connect(@RequestBody final RegistryCenterConfiguration config, @Context final HttpServletRequest request) {
+ public ResponseResult<Boolean> connect(@RequestBody final RegistryCenterConfiguration config, @Context final HttpServletRequest request) {
boolean isConnected = setRegistryCenterNameToSession(regCenterService.find(config.getName(), regCenterService.loadAll()), request.getSession());
if (isConnected) {
regCenterService.load(config.getName());
}
- return isConnected;
+ return ResponseResultUtil.build(isConnected);
}
private boolean setRegistryCenterNameToSession(final RegistryCenterConfiguration regCenterConfig, final HttpSession session) {
diff --git a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
index ad569ac..6dd2484 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js
@@ -112,7 +112,7 @@ export default {
editTitle: 'Edit registry center',
name: 'Name',
centerType: 'Instance Type',
- address: 'Address',
+ address: 'Zookeeper address',
orchestrationName: 'Orchestration Name',
namespaces: 'Namespace',
digest: 'Digest',
diff --git a/shardingsphere-elasticjob-ui-frontend/src/router/index.js b/shardingsphere-elasticjob-ui-frontend/src/router/index.js
index 1551af0..898163c 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/router/index.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/router/index.js
@@ -25,7 +25,13 @@ export const constantRouterMap = [
path: '/login',
component: () => import('@/views/login'),
hidden: true
- }
+ },
+ {
+ path: '/registry-center',
+ component: () => import('@/views/registry-center'),
+ hidden: true,
+ name: 'Registry center'
+ },
]
export default new Router({
diff --git a/shardingsphere-elasticjob-ui-frontend/src/router/index.js b/shardingsphere-elasticjob-ui-frontend/src/views/registry-center/api.js
similarity index 59%
copy from shardingsphere-elasticjob-ui-frontend/src/router/index.js
copy to shardingsphere-elasticjob-ui-frontend/src/views/registry-center/api.js
index 1551af0..43147ec 100644
--- a/shardingsphere-elasticjob-ui-frontend/src/router/index.js
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/registry-center/api.js
@@ -15,20 +15,14 @@
* limitations under the License.
*/
-import Vue from 'vue'
-import Router from 'vue-router'
+import API from '@/utils/api'
-Vue.use(Router)
+export default {
+ getRegCenter: (params = {}) => API.get(`/api/registry-center/load`, params),
+ deleteRegCenter: (params = {}) => API.delete(`/api/registry-center`, params),
+ postRegCenter: (params = {}) => API.post(`/api/registry-center/add`, params),
+ getRegCenterActivated: (params = {}) => API.get(`/api/reg-center/activated`, params),
+ postRegCenterConnect: (params = {}) => API.post(`/api/registry-center/connect`, params),
+ updateRegCenter: (params = {}) => API.post(`/api/reg-center/update`, params)
-export const constantRouterMap = [
- {
- path: '/login',
- component: () => import('@/views/login'),
- hidden: true
- }
-]
-
-export default new Router({
- scrollBehavior: () => ({ y: 0 }),
- routes: constantRouterMap
-})
+}
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/registry-center/index.vue b/shardingsphere-elasticjob-ui-frontend/src/views/registry-center/index.vue
new file mode 100644
index 0000000..45d61d4
--- /dev/null
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/registry-center/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-registry-center />
+</template>
+
+<script>
+import SRegistryCenter from './module/registryCenter'
+export default {
+ name: 'RegistryCenter',
+ components: {
+ SRegistryCenter
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/registry-center/module/registryCenter.vue b/shardingsphere-elasticjob-ui-frontend/src/views/registry-center/module/registryCenter.vue
new file mode 100644
index 0000000..14be74f
--- /dev/null
+++ b/shardingsphere-elasticjob-ui-frontend/src/views/registry-center/module/registryCenter.vue
@@ -0,0 +1,400 @@
+<!--
+ - 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">
+ <el-button
+ class="btn-plus"
+ type="primary"
+ icon="el-icon-plus"
+ @click="add"
+ >{{ $t("registryCenter.btnTxt") }}</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-column :label="$t('registryCenter.table.operate')" fixed="right" width="200">
+ <template slot-scope="scope">
+ <!--<el-tooltip
+ :content="$t('registryCenter.table.operateEdit')"
+ class="item"
+ effect="dark"
+ placement="top"
+ >
+ <el-button
+ :disabled="scope.row.activated"
+ size="small"
+ type="primary"
+ icon="el-icon-edit"
+ @click="handleEdit(scope.row)"
+ />
+ </el-tooltip>-->
+ <el-tooltip
+ :content="!scope.row.activated ? $t('registryCenter.table.operateConnect'): $t('registryCenter.table.operateConnected')"
+ class="item"
+ effect="dark"
+ placement="top"
+ >
+ <el-button
+ type="primary"
+ icon="el-icon-link"
+ size="small"
+ @click="handleConnect(scope.row)"
+ />
+ </el-tooltip>
+ <el-tooltip
+ :content="$t('registryCenter.table.operateDel')"
+ class="item"
+ effect="dark"
+ placement="top"
+ >
+ <el-button
+ size="small"
+ type="danger"
+ icon="el-icon-delete"
+ @click="handlerDel(scope.row)"
+ />
+ </el-tooltip>
+ </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-dialog
+ :title="$t('registryCenter.registDialog.title')"
+ :visible.sync="regustDialogVisible"
+ width="1010px"
+ >
+ <el-form ref="form" :model="form" :rules="rules" label-width="170px">
+ <el-form-item :label="$t('registryCenter.registDialog.name')" prop="name">
+ <el-input :placeholder="$t('registryCenter.rules.name')" v-model="form.name" autocomplete="off" />
+ </el-form-item>
+ <!--<el-form-item :label="$t('registryCenter.registDialog.centerType')" prop="instanceType">
+ <el-radio-group v-model="form.instanceType">
+ <el-radio label="Zookeeper">Zookeeper</el-radio>
+ <el-radio label="Etcd">Etcd</el-radio>
+ </el-radio-group>
+ </el-form-item>-->
+ <el-form-item :label="$t('registryCenter.registDialog.address')" prop="serverLists">
+ <el-input
+ :placeholder="$t('registryCenter.rules.address')"
+ v-model="form.zkAddressList"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <!--<el-form-item :label="$t('registryCenter.registDialog.orchestrationName')" prop="orchestrationName">
+ <el-input
+ :placeholder="$t('registryCenter.rules.orchestrationName')"
+ v-model="form.orchestrationName"
+ autocomplete="off"
+ />
+ </el-form-item>-->
+ <el-form-item :label="$t('registryCenter.registDialog.namespaces')" prop="namespace">
+ <el-input
+ :placeholder="$t('registryCenter.rules.namespaces')"
+ v-model="form.namespace"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item :label="$t('registryCenter.registDialog.digest')">
+ <el-input
+ :placeholder="$t('registryCenter.rules.digest')"
+ v-model="form.digest"
+ autocomplete="off"
+ />
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="regustDialogVisible = false">{{ $t("registryCenter.registDialog.btnCancelTxt") }}</el-button>
+ <el-button
+ type="primary"
+ @click="onConfirm('form')"
+ >{{ $t("registryCenter.registDialog.btnConfirmTxt") }}</el-button>
+ </div>
+ </el-dialog>
+ <el-dialog
+ :title="$t('registryCenter.registDialog.editTitle')"
+ :visible.sync="editDialogVisible"
+ width="1010px"
+ >
+ <el-form ref="editForm" :model="editForm" :rules="rules" label-width="170px">
+ <el-form-item :label="$t('registryCenter.registDialog.name')" prop="name">
+ <el-input :placeholder="$t('registryCenter.rules.name')" v-model="editForm.name" autocomplete="off" />
+ </el-form-item>
+ <el-form-item :label="$t('registryCenter.registDialog.centerType')" prop="instanceType">
+ <el-radio-group v-model="editForm.instanceType">
+ <el-radio label="Zookeeper">Zookeeper</el-radio>
+ <el-radio label="Etcd">Etcd</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item :label="$t('registryCenter.registDialog.address')" prop="serverLists">
+ <el-input
+ :placeholder="$t('registryCenter.rules.address')"
+ v-model="editForm.serverLists"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item :label="$t('registryCenter.registDialog.orchestrationName')" prop="orchestrationName">
+ <el-input
+ :placeholder="$t('registryCenter.rules.orchestrationName')"
+ v-model="editForm.orchestrationName"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item :label="$t('registryCenter.registDialog.namespaces')" prop="namespace">
+ <el-input
+ :placeholder="$t('registryCenter.rules.namespaces')"
+ v-model="editForm.namespace"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item :label="$t('registryCenter.registDialog.digest')">
+ <el-input
+ :placeholder="$t('registryCenter.rules.digest')"
+ v-model="editForm.digest"
+ autocomplete="off"
+ />
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="cancelEdit">{{ $t("registryCenter.registDialog.btnCancelTxt") }}</el-button>
+ <el-button
+ type="primary"
+ @click="confirmEdit('editForm')"
+ >{{ $t("registryCenter.registDialog.btnConfirmTxt") }}</el-button>
+ </div>
+ </el-dialog>
+ </el-row>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import clone from 'lodash/clone'
+import API from '../api'
+export default {
+ name: 'RegistryCenter',
+ data() {
+ return {
+ regustDialogVisible: false,
+ editDialogVisible: false,
+ column: [
+ {
+ label: this.$t('registryCenter').registDialog.name,
+ prop: 'name'
+ },
+ {
+ label: this.$t('registryCenter').registDialog.address,
+ prop: 'zkAddressList'
+ },
+ {
+ label: this.$t('registryCenter').registDialog.namespaces,
+ prop: 'namespace'
+ }
+ ],
+ form: {
+ name: '',
+ zkAddressList: '',
+ namespace: '',
+ // instanceType: 'Zookeeper',
+ // orchestrationName: '',
+ // orchestrationType: 'registry_center',
+ digest: ''
+ },
+ editForm: {
+ primaryName: '',
+ name: '',
+ serverLists: '',
+ namespace: '',
+ instanceType: 'Zookeeper',
+ orchestrationName: '',
+ orchestrationType: 'registry_center',
+ digest: ''
+ },
+ rules: {
+ name: [
+ {
+ required: true,
+ message: this.$t('registryCenter').rules.name,
+ trigger: 'change'
+ }
+ ],
+ zkAddressList: [
+ {
+ required: true,
+ message: this.$t('registryCenter').rules.address,
+ trigger: 'change'
+ }
+ ],
+ namespace: [
+ {
+ required: true,
+ message: this.$t('registryCenter').rules.namespaces,
+ trigger: 'change'
+ }
+ ],
+ instanceType: [
+ {
+ required: true,
+ message: this.$t('registryCenter').rules.centerType,
+ trigger: 'change'
+ }
+ ],
+ orchestrationName: [
+ {
+ required: true,
+ message: this.$t('registryCenter').rules.orchestrationName,
+ trigger: 'change'
+ }
+ ]
+ },
+ tableData: [],
+ cloneTableData: [],
+ currentPage: 1,
+ pageSize: 10,
+ total: null
+ }
+ },
+ created() {
+ this.getRegCenter()
+ },
+ methods: {
+ ...mapActions(['setRegCenterActivated']),
+ handleCurrentChange(val) {
+ const data = clone(this.cloneTableData)
+ this.tableData = data.splice(val - 1, this.pageSize)
+ },
+ getRegCenter() {
+ API.getRegCenter().then(res => {
+ const data = res.model
+ this.total = data.length
+ this.cloneTableData = clone(res.model)
+ this.tableData = data.splice(0, this.pageSize)
+ })
+ //this.getRegCenterActivated()
+ },
+ getRegCenterActivated() {
+ API.getRegCenterActivated().then(res => {
+ this.setRegCenterActivated(res.model.name)
+ })
+ },
+ handleConnect(row) {
+ if (row.activated) {
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('common').connected,
+ type: 'success'
+ })
+ } else {
+ const params = {
+ name: row.name
+ }
+ API.postRegCenterConnect(params).then(res => {
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('common').notify.conSucMessage,
+ type: 'success'
+ })
+ this.getRegCenter()
+ })
+ }
+ },
+ handlerDel(row) {
+ const params = {
+ name: row.name
+ }
+ API.deleteRegCenter(params).then(res => {
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('common').notify.delSucMessage,
+ type: 'success'
+ })
+ this.getRegCenter()
+ })
+ },
+ onConfirm(formName) {
+ this.$refs[formName].validate(valid => {
+ if (valid) {
+ API.postRegCenter(this.form).then(res => {
+ this.regustDialogVisible = false
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('common').notify.addSucMessage,
+ type: 'success'
+ })
+ this.getRegCenter()
+ })
+ } else {
+ console.log('error submit!!')
+ return false
+ }
+ })
+ },
+ add() {
+ this.regustDialogVisible = true
+ },
+ handleEdit(row) {
+ this.editDialogVisible = true
+ this.editForm = Object.assign({}, row)
+ this.editForm.primaryName = row.name
+ },
+ confirmEdit(formName) {
+ this.$refs[formName].validate(valid => {
+ if (valid) {
+ API.updateRegCenter(this.editForm).then(res => {
+ this.editDialogVisible = false
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('common').notify.editSucMessage,
+ type: 'success'
+ })
+ this.getRegCenter()
+ })
+ } else {
+ console.log('error submit!!')
+ return false
+ }
+ })
+ },
+ cancelEdit() {
+ this.editDialogVisible = false
+ }
+ }
+}
+</script>
+<style lang='scss' scoped>
+.btn-group {
+ margin-bottom: 20px;
+}
+.pagination {
+ float: right;
+ margin: 10px -10px 10px 0;
+}
+</style>