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 e78f320b4aa31cfa67adeec90b4468a269410054 Author: menghaoranss <[email protected]> AuthorDate: Fri Jul 17 15:23:38 2020 +0800 Refactor event trace data source --- .../controller/EventTraceDataSourceController.java | 27 +- .../src/lang/en-US.js | 30 +- .../src/lang/zh-CN.js | 34 ++- .../src/router/index.js | 6 + .../{router/index.js => views/data-source/api.js} | 31 +- .../src/views/data-source/index.vue | 33 +++ .../src/views/data-source/module/dataSource.vue | 317 +++++++++++++++++++++ 7 files changed, 410 insertions(+), 68 deletions(-) diff --git a/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/EventTraceDataSourceController.java b/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/EventTraceDataSourceController.java index d4bd7c0..4923a63 100644 --- a/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/EventTraceDataSourceController.java +++ b/shardingsphere-elasticjob-ui-backend/src/main/java/org/apache/shardingsphere/elasticjob/ui/web/controller/EventTraceDataSourceController.java @@ -21,6 +21,8 @@ import org.apache.shardingsphere.elasticjob.ui.domain.EventTraceDataSourceConfig import org.apache.shardingsphere.elasticjob.ui.domain.EventTraceDataSourceFactory; import org.apache.shardingsphere.elasticjob.ui.service.EventTraceDataSourceConfigurationService; import org.apache.shardingsphere.elasticjob.ui.util.SessionEventTraceDataSourceConfiguration; +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; @@ -39,7 +41,7 @@ import java.util.Collection; * Event trace data source RESTful API. */ @RestController -@RequestMapping("/data-source") +@RequestMapping("/api/data-source") public final class EventTraceDataSourceController { public static final String DATA_SOURCE_CONFIG_KEY = "data_source_config_key"; @@ -68,10 +70,10 @@ public final class EventTraceDataSourceController { * @param request HTTP request * @return event trace data source configurations */ - @GetMapping(produces = MediaType.APPLICATION_JSON) - public Collection<EventTraceDataSourceConfiguration> load(@Context final HttpServletRequest request) { + @GetMapping("/load") + public ResponseResult<Collection<EventTraceDataSourceConfiguration>> load(@Context final HttpServletRequest request) { eventTraceDataSourceConfigurationService.loadActivated().ifPresent(eventTraceDataSourceConfig -> setDataSourceNameToSession(eventTraceDataSourceConfig, request.getSession())); - return eventTraceDataSourceConfigurationService.loadAll().getEventTraceDataSourceConfiguration(); + return ResponseResultUtil.build(eventTraceDataSourceConfigurationService.loadAll().getEventTraceDataSourceConfiguration()); } /** @@ -80,9 +82,9 @@ public final class EventTraceDataSourceController { * @param config event trace data source configuration * @return success to added or not */ - @PostMapping(produces = MediaType.APPLICATION_JSON, consumes = MediaType.APPLICATION_JSON) - public boolean add(@RequestBody final EventTraceDataSourceConfiguration config) { - return eventTraceDataSourceConfigurationService.add(config); + @PostMapping("/add") + public ResponseResult<Boolean> add(@RequestBody final EventTraceDataSourceConfiguration config) { + return ResponseResultUtil.build(eventTraceDataSourceConfigurationService.add(config)); } /** @@ -91,8 +93,9 @@ public final class EventTraceDataSourceController { * @param config event trace data source configuration */ @DeleteMapping(consumes = MediaType.APPLICATION_JSON) - public void delete(@RequestBody final EventTraceDataSourceConfiguration config) { + public ResponseResult delete(@RequestBody final EventTraceDataSourceConfiguration config) { eventTraceDataSourceConfigurationService.delete(config.getName()); + return ResponseResultUtil.success(); } /** @@ -103,8 +106,8 @@ public final class EventTraceDataSourceController { * @return success or not */ @PostMapping(value = "/connectTest", produces = MediaType.APPLICATION_JSON, consumes = MediaType.APPLICATION_JSON) - public boolean connectTest(@RequestBody final EventTraceDataSourceConfiguration config, @Context final HttpServletRequest request) { - return setDataSourceNameToSession(config, request.getSession()); + public ResponseResult<Boolean> connectTest(@RequestBody final EventTraceDataSourceConfiguration config, @Context final HttpServletRequest request) { + return ResponseResultUtil.build(setDataSourceNameToSession(config, request.getSession())); } /** @@ -115,12 +118,12 @@ public final class EventTraceDataSourceController { * @return success or not */ @PostMapping(value = "/connect", produces = MediaType.APPLICATION_JSON, consumes = MediaType.APPLICATION_JSON) - public boolean connect(@RequestBody final EventTraceDataSourceConfiguration config, @Context final HttpServletRequest request) { + public ResponseResult<Boolean> connect(@RequestBody final EventTraceDataSourceConfiguration config, @Context final HttpServletRequest request) { boolean isConnected = setDataSourceNameToSession(eventTraceDataSourceConfigurationService.find(config.getName(), eventTraceDataSourceConfigurationService.loadAll()), request.getSession()); if (isConnected) { eventTraceDataSourceConfigurationService.load(config.getName()); } - return isConnected; + return ResponseResultUtil.build(isConnected); } private boolean setDataSourceNameToSession(final EventTraceDataSourceConfiguration dataSourceConfig, 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 6dd2484..7dff279 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js +++ b/shardingsphere-elasticjob-ui-frontend/src/lang/en-US.js @@ -135,19 +135,18 @@ export default { digest: 'Please enter a digest' } }, - configCenter: { + dataSource: { btnTxt: 'ADD', - configDialog: { - title: 'Add a config center', - editTitle: 'Edit config center', + addDialog: { + title: 'Add a data source', name: 'Name', - centerType: 'Instance Type', - address: 'Address', - orchestrationName: 'Orchestration Name', - namespaces: 'Namespace', - digest: 'Digest', + driver: 'Driver', + url: 'Url', + username: 'Username', + password: 'Password', btnConfirmTxt: 'Confirm', - btnCancelTxt: 'Cancel' + btnCancelTxt: 'Cancel', + btnConnectTestTxt: 'Test connect' }, table: { operate: 'Operate', @@ -157,12 +156,11 @@ export default { operateEdit: 'Edit' }, rules: { - name: 'Please enter the name of the config center', - address: 'Please enter the config center Address', - namespaces: 'Please enter a Namespace', - centerType: 'Please select a Center Type', - orchestrationName: 'Please enter a Orchestration Name', - digest: 'Please enter a digest' + name: 'Please enter the name of the data source', + driver: 'Please enter the driver of the data source', + url: 'Please enter the url of the data source', + username: 'Please enter the username of the data source', + password: 'Please enter the password of the data source' } }, runtimeStatus: { diff --git a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js index d860c3d..7e02847 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js +++ b/shardingsphere-elasticjob-ui-frontend/src/lang/zh-CN.js @@ -135,34 +135,32 @@ export default { digest: '请输入登录凭证' } }, - configCenter: { + dataSource: { btnTxt: '添加', - configDialog: { - title: '添加配置中心', - editTitle: '编辑配置中心', - name: '配置中心名称', - centerType: '配置中心类型', - address: '配置中心地址', - orchestrationName: '数据治理实例', - namespaces: '命名空间', - digest: '登录凭证', + addDialog: { + title: '添加事件追踪数据源', + name: '数据源名称', + driver: '数据源驱动', + url: '数据源连接地址', + username: '数据源用户名', + password: '数据源密码', btnConfirmTxt: '确定', - btnCancelTxt: '取消' + btnCancelTxt: '取消', + btnConnectTestTxt: '测试连接' }, table: { operate: '操作', operateConnect: '连接', - operateConnected: '已激活', + operateConnected: '已连接', operateDel: '删除', operateEdit: '编辑' }, rules: { - name: '请输入配置中心名称', - centerType: '请选择配置中心类型', - namespaces: '请输入命名空间', - address: '请选输入配置中心地址', - orchestrationName: '请输入数据治理实例名称', - digest: '请输入登录凭证' + name: '请输入数据源名称', + driver: '请输入数据源驱动', + url: '请输入数据源连接地址', + username: '请输入数据源用户名', + password: '请输入数据源密码' } }, runtimeStatus: { diff --git a/shardingsphere-elasticjob-ui-frontend/src/router/index.js b/shardingsphere-elasticjob-ui-frontend/src/router/index.js index 898163c..f8780fa 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/router/index.js +++ b/shardingsphere-elasticjob-ui-frontend/src/router/index.js @@ -32,6 +32,12 @@ export const constantRouterMap = [ hidden: true, name: 'Registry center' }, + { + path: '/data-source', + component: () => import('@/views/data-source'), + hidden: true, + name: 'Data source' + }, ] export default new Router({ diff --git a/shardingsphere-elasticjob-ui-frontend/src/router/index.js b/shardingsphere-elasticjob-ui-frontend/src/views/data-source/api.js similarity index 61% copy from shardingsphere-elasticjob-ui-frontend/src/router/index.js copy to shardingsphere-elasticjob-ui-frontend/src/views/data-source/api.js index 898163c..a0743c1 100644 --- a/shardingsphere-elasticjob-ui-frontend/src/router/index.js +++ b/shardingsphere-elasticjob-ui-frontend/src/views/data-source/api.js @@ -15,26 +15,13 @@ * limitations under the License. */ -import Vue from 'vue' -import Router from 'vue-router' +import API from '@/utils/api' -Vue.use(Router) - -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({ - scrollBehavior: () => ({ y: 0 }), - routes: constantRouterMap -}) +export default { + load: (params = {}) => API.get(`/api/data-source/load`, params), + delete: (params = {}) => API.delete(`/api/data-source`, params), + add: (params = {}) => API.post(`/api/data-source/add`, params), + getRegCenterActivated: (params = {}) => API.get(`/api/data-source/activated`, params), + connect: (params = {}) => API.post(`/api/data-source/connect`, params), + connectTest: (params = {}) => API.post(`/api/data-source/connectTest`, params) +} diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/data-source/index.vue b/shardingsphere-elasticjob-ui-frontend/src/views/data-source/index.vue new file mode 100644 index 0000000..70cffeb --- /dev/null +++ b/shardingsphere-elasticjob-ui-frontend/src/views/data-source/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-data-source /> +</template> + +<script> +import SDataSource from './module/dataSource' +export default { + name: 'DataSource', + components: { + SDataSource + } +} +</script> + +<style lang="scss" scoped> +</style> diff --git a/shardingsphere-elasticjob-ui-frontend/src/views/data-source/module/dataSource.vue b/shardingsphere-elasticjob-ui-frontend/src/views/data-source/module/dataSource.vue new file mode 100644 index 0000000..c9a9f6e --- /dev/null +++ b/shardingsphere-elasticjob-ui-frontend/src/views/data-source/module/dataSource.vue @@ -0,0 +1,317 @@ +<!-- + - 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("dataSource.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('dataSource.table.operate')" fixed="right" width="200"> + <template slot-scope="scope"> + <el-tooltip + :content="!scope.row.activated ? $t('dataSource.table.operateConnect'): $t('dataSource.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('dataSource.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('dataSource.addDialog.title')" + :visible.sync="regustDialogVisible" + width="1010px" + > + <el-form ref="form" :model="form" :rules="rules" label-width="170px"> + <el-form-item :label="$t('dataSource.addDialog.name')" prop="name"> + <el-input :placeholder="$t('dataSource.rules.name')" v-model="form.name" autocomplete="off" /> + </el-form-item> + <el-form-item :label="$t('dataSource.addDialog.driver')" prop="driver"> + <el-input + :placeholder="$t('dataSource.rules.driver')" + v-model="form.driver" + autocomplete="off" + /> + </el-form-item> + <el-form-item :label="$t('dataSource.addDialog.url')" prop="url"> + <el-input + :placeholder="$t('dataSource.rules.url')" + v-model="form.url" + autocomplete="off" + /> + </el-form-item> + <el-form-item :label="$t('dataSource.addDialog.username')" prop="username"> + <el-input + :placeholder="$t('dataSource.rules.username')" + v-model="form.username" + autocomplete="off" + /> + </el-form-item> + <el-form-item :label="$t('dataSource.addDialog.password')"> + <el-input + :placeholder="$t('dataSource.rules.password')" + v-model="form.password" + autocomplete="off" + /> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="regustDialogVisible = false">{{ $t("dataSource.addDialog.btnCancelTxt") }}</el-button> + <el-button + type="primary" + @click="connectTest('form')" + >{{ $t("dataSource.addDialog.btnConnectTestTxt") }}</el-button> + <el-button + type="primary" + @click="onConfirm('form')" + >{{ $t("dataSource.addDialog.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: 'DataSource', + data() { + return { + regustDialogVisible: false, + column: [ + { + label: this.$t('dataSource').addDialog.name, + prop: 'name' + }, + { + label: this.$t('dataSource').addDialog.driver, + prop: 'driver' + }, + { + label: this.$t('dataSource').addDialog.url, + prop: 'url' + }, + { + label: this.$t('dataSource').addDialog.username, + prop: 'username' + }, + { + label: this.$t('dataSource').addDialog.password, + prop: 'password' + } + ], + form: { + name: '', + driver: '', + url: '', + username: '', + password: '' + }, + rules: { + name: [ + { + required: true, + message: this.$t('dataSource').rules.name, + trigger: 'change' + } + ], + driver: [ + { + required: true, + message: this.$t('dataSource').rules.driver, + trigger: 'change' + } + ], + url: [ + { + required: true, + message: this.$t('dataSource').rules.url, + trigger: 'change' + } + ], + username: [ + { + required: true, + message: this.$t('dataSource').rules.username, + trigger: 'change' + } + ], + password: [ + { + required: true, + message: this.$t('dataSource').rules.password, + trigger: 'change' + } + ] + }, + tableData: [], + cloneTableData: [], + currentPage: 1, + pageSize: 10, + total: null + } + }, + created() { + this.load() + }, + methods: { + ...mapActions(['setRegCenterActivated']), + handleCurrentChange(val) { + const data = clone(this.cloneTableData) + this.tableData = data.splice(val - 1, this.pageSize) + }, + load() { + API.load().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.connect(params).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.conSucMessage, + type: 'success' + }) + this.load() + }) + } + }, + handlerDel(row) { + const params = { + name: row.name + } + API.delete(params).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.delSucMessage, + type: 'success' + }) + this.load() + }) + }, + onConfirm(formName) { + this.$refs[formName].validate(valid => { + if (valid) { + API.add(this.form).then(res => { + this.regustDialogVisible = false + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.addSucMessage, + type: 'success' + }) + this.load() + }) + } else { + console.log('error submit!!') + return false + } + }) + }, + connectTest(formName) { + this.$refs[formName].validate(valid => { + if (valid) { + API.connectTest(this.form).then(res => { + this.$notify({ + title: this.$t('common').notify.title, + message: this.$t('common').notify.addSucMessage, + type: 'success' + }) + }) + } else { + return false + } + }) + }, + add() { + this.regustDialogVisible = true + } + } +} +</script> +<style lang='scss' scoped> +.btn-group { + margin-bottom: 20px; +} +.pagination { + float: right; + margin: 10px -10px 10px 0; +} +</style>
