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:52 UTC
[shardingsphere-elasticjob-ui] 05/29: Refactor event trace data
source
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 e78f320b4aa31cfa67adeec90b4468a269410054
Author: menghaoranss <lo...@163.com>
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>