You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@shardingsphere.apache.org by me...@apache.org on 2020/12/29 12:10:33 UTC
[shardingsphere-ui] branch master updated: Optimize data scaling
page (#73)
This is an automated email from the ASF dual-hosted git repository.
menghaoran pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shardingsphere-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 771eaee Optimize data scaling page (#73)
771eaee is described below
commit 771eaeec27b979af2efa88f3c9b8405cd8ee7172
Author: 邱鹿 Lucas <lu...@163.com>
AuthorDate: Tue Dec 29 20:10:26 2020 +0800
Optimize data scaling page (#73)
Co-authored-by: qiulu3 <Lucas209910>
---
.../shardingsphere-ui-backend-API.md | 12 +---
.../forward/ShardingScalingForwardService.java | 8 +--
.../impl/ShardingScalingForwardServiceImpl.java | 18 ++---
.../ShardingScalingForwardController.java | 10 +--
.../src/components/Head/index.vue | 2 +-
shardingsphere-ui-frontend/src/lang/en-US.js | 7 +-
shardingsphere-ui-frontend/src/lang/zh-CN.js | 7 +-
shardingsphere-ui-frontend/src/main.js | 1 +
.../src/views/data-scaling/api.js | 4 +-
.../src/views/data-scaling/module/index.vue | 82 ++++++----------------
.../registry-center/module/registryCenter.vue | 2 +-
.../src/views/rule-config/module/schema.vue | 4 +-
12 files changed, 60 insertions(+), 97 deletions(-)
diff --git a/shardingsphere-ui-backend/shardingsphere-ui-backend-API.md b/shardingsphere-ui-backend/shardingsphere-ui-backend-API.md
index d2c88b3..3039660 100644
--- a/shardingsphere-ui-backend/shardingsphere-ui-backend-API.md
+++ b/shardingsphere-ui-backend/shardingsphere-ui-backend-API.md
@@ -944,7 +944,7 @@ curl -X GET \
### 7.7 Stop scaling job
-POST /api/shardingscaling/job/stop
+GET /api/shardingscaling/job/stop
#### Body
@@ -955,14 +955,8 @@ POST /api/shardingscaling/job/stop
#### Example
```
-
-curl -X POST \
- http://localhost:8088/api/shardingscaling/job/stop \
- -H 'content-type: application/json' \
- -d '{
-"jobId":1
-}'
-
+curl -X GET \
+ http://localhost:8888/scaling/job/stop/1
```
#### Response
diff --git a/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/servcie/forward/ShardingScalingForwardService.java b/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/servcie/forward/ShardingScalingForwardService.java
index 3637494..f4cfd08 100644
--- a/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/servcie/forward/ShardingScalingForwardService.java
+++ b/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/servcie/forward/ShardingScalingForwardService.java
@@ -40,16 +40,16 @@ public interface ShardingScalingForwardService {
/**
* Get sharding scaling job progress.
*
- * @param jobId job id.
+ * @param jobId job id
* @return response string from sharding scaling server
*/
- String getShardingScalingJobProgress(int jobId);
+ String getShardingScalingJobProgress(long jobId);
/**
* Stop sharding scaling job.
*
- * @param requestBody request body of stop sharding scaling job
+ * @param jobId job id
* @return response string from sharding scaling server
*/
- String stopShardingScalingJob(String requestBody);
+ String stopShardingScalingJob(long jobId);
}
diff --git a/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/servcie/forward/impl/ShardingScalingForwardServiceImpl.java b/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/servcie/forward/impl/ShardingScalingForwardServiceImpl.java
index 3b1c316..be60771 100644
--- a/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/servcie/forward/impl/ShardingScalingForwardServiceImpl.java
+++ b/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/servcie/forward/impl/ShardingScalingForwardServiceImpl.java
@@ -17,10 +17,6 @@
package org.apache.shardingsphere.ui.servcie.forward.impl;
-import java.io.IOException;
-import java.net.URISyntaxException;
-
-import java.util.Optional;
import org.apache.shardingsphere.ui.common.constant.ForwardServiceType;
import org.apache.shardingsphere.ui.common.domain.ForwardServiceConfig;
import org.apache.shardingsphere.ui.common.exception.ShardingSphereUIException;
@@ -30,6 +26,10 @@ import org.apache.shardingsphere.ui.util.HttpClientUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
+import java.io.IOException;
+import java.net.URISyntaxException;
+import java.util.Optional;
+
/**
* Implementation of forward server for sharding scaling.
*/
@@ -42,7 +42,7 @@ public final class ShardingScalingForwardServiceImpl implements ShardingScalingF
private static final String PROGRESS_JOB_FORWARD_URL = "http://%s/scaling/job/progress/%d";
- private static final String STOP_JOB_FORWARD_URL = "http://%s/scaling/job/stop";
+ private static final String STOP_JOB_FORWARD_URL = "http://%s/scaling/job/stop/%d";
@Autowired
private ForwardServiceConfigsRepository forwardServiceConfigsRepository;
@@ -68,7 +68,7 @@ public final class ShardingScalingForwardServiceImpl implements ShardingScalingF
}
@Override
- public String getShardingScalingJobProgress(final int jobId) {
+ public String getShardingScalingJobProgress(final long jobId) {
try {
return HttpClientUtil.doGet(String.format(PROGRESS_JOB_FORWARD_URL, getShardingScalingUrl(), jobId));
} catch (IOException e) {
@@ -79,11 +79,13 @@ public final class ShardingScalingForwardServiceImpl implements ShardingScalingF
}
@Override
- public String stopShardingScalingJob(final String requestBody) {
+ public String stopShardingScalingJob(final long jobId) {
try {
- return HttpClientUtil.doPostWithJsonRequestBody(String.format(STOP_JOB_FORWARD_URL, getShardingScalingUrl()), requestBody);
+ return HttpClientUtil.doGet(String.format(STOP_JOB_FORWARD_URL, getShardingScalingUrl(), jobId));
} catch (IOException e) {
throw forwardShardingScalingException();
+ } catch (URISyntaxException e) {
+ throw invalidShardingScalingException();
}
}
diff --git a/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/web/controller/ShardingScalingForwardController.java b/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/web/controller/ShardingScalingForwardController.java
index 2587d06..9c1d367 100644
--- a/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/web/controller/ShardingScalingForwardController.java
+++ b/shardingsphere-ui-backend/src/main/java/org/apache/shardingsphere/ui/web/controller/ShardingScalingForwardController.java
@@ -112,18 +112,18 @@ public final class ShardingScalingForwardController {
* @return response result
*/
@RequestMapping(value = "/job/progress/{jobId}", method = RequestMethod.GET)
- public ResponseResult getShardingScalingJobProgress(@PathVariable("jobId") final int jobId) {
+ public ResponseResult getShardingScalingJobProgress(@PathVariable("jobId") final long jobId) {
return ResponseResultUtil.buildFromJson(shardingScalingForwardService.getShardingScalingJobProgress(jobId));
}
/**
* Stop sharding scaling job progress.
*
- * @param requestBody request body of stop sharding scaling job
+ * @param jobId job id
* @return response result
*/
- @RequestMapping(value = "/job/stop", method = RequestMethod.POST)
- public ResponseResult stopShardingScalingJob(@RequestBody final String requestBody) {
- return ResponseResultUtil.buildFromJson(shardingScalingForwardService.stopShardingScalingJob(requestBody));
+ @RequestMapping(value = "/job/stop/{jobId}", method = RequestMethod.GET)
+ public ResponseResult stopShardingScalingJob(@PathVariable("jobId") final long jobId) {
+ return ResponseResultUtil.buildFromJson(shardingScalingForwardService.stopShardingScalingJob(jobId));
}
}
diff --git a/shardingsphere-ui-frontend/src/components/Head/index.vue b/shardingsphere-ui-frontend/src/components/Head/index.vue
index 2188293..8c3e400 100644
--- a/shardingsphere-ui-frontend/src/components/Head/index.vue
+++ b/shardingsphere-ui-frontend/src/components/Head/index.vue
@@ -48,7 +48,7 @@
<el-breadcrumb-item>
<a
style="font-weight: bold; color: #E17425;"
- >{{currentRegistryCenter}}: {{ $store.state.global.regCenterActivated || '' }}</a>
+ >{{ currentRegistryCenter }}: {{ $store.state.global.regCenterActivated || '' }}</a>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
diff --git a/shardingsphere-ui-frontend/src/lang/en-US.js b/shardingsphere-ui-frontend/src/lang/en-US.js
index 76bc7fc..5270a49 100644
--- a/shardingsphere-ui-frontend/src/lang/en-US.js
+++ b/shardingsphere-ui-frontend/src/lang/en-US.js
@@ -33,7 +33,7 @@ export default {
{
title: 'Runtime Status',
href: '/runtime-status'
- },
+ }
]
},
{
@@ -200,7 +200,10 @@ export default {
inventory: 'Inventory',
increment: 'Increment',
taskId: 'Sub Task Id',
- delay: 'Delay(seconds)'
+ shardingItem: 'Sharding Item',
+ delay: 'Delay(seconds)',
+ total: 'Total Tasks',
+ finished: 'Finished Tasks'
}
}
}
diff --git a/shardingsphere-ui-frontend/src/lang/zh-CN.js b/shardingsphere-ui-frontend/src/lang/zh-CN.js
index 616d780..6d4d939 100644
--- a/shardingsphere-ui-frontend/src/lang/zh-CN.js
+++ b/shardingsphere-ui-frontend/src/lang/zh-CN.js
@@ -33,7 +33,7 @@ export default {
{
title: '运行状态',
href: '/runtime-status'
- },
+ }
]
},
{
@@ -198,7 +198,10 @@ export default {
inventory: '存量',
increment: '增量',
taskId: '子任务Id',
- delay: '延迟(秒)'
+ shardingItem: '分片项',
+ delay: '延迟(秒)',
+ total: '总任务数',
+ finished: '已完成任务数'
}
}
}
diff --git a/shardingsphere-ui-frontend/src/main.js b/shardingsphere-ui-frontend/src/main.js
index b093526..b203310 100644
--- a/shardingsphere-ui-frontend/src/main.js
+++ b/shardingsphere-ui-frontend/src/main.js
@@ -44,6 +44,7 @@ const mergeEN = locales['en-US']
const i18n = new VueI18n({
locale: lang,
+ silentFallbackWarn: true,
messages: {
'zh-CN': mergeZH,
'en-US': mergeEN
diff --git a/shardingsphere-ui-frontend/src/views/data-scaling/api.js b/shardingsphere-ui-frontend/src/views/data-scaling/api.js
index a9300f5..e015645 100644
--- a/shardingsphere-ui-frontend/src/views/data-scaling/api.js
+++ b/shardingsphere-ui-frontend/src/views/data-scaling/api.js
@@ -29,8 +29,8 @@ export default {
API.get(`/api/shardingscaling/job/list`, params),
getJobProgress: jobId =>
API.get(`/api/shardingscaling/job/progress/${jobId}`),
- postJobStop: (params = {}) =>
- API.post(`/api/shardingscaling/job/stop`, params),
+ getJobStop: jobId =>
+ API.get(`/api/shardingscaling/job/stop/${jobId}`),
getSchema,
getSchemaDataSource,
getSchemaRule,
diff --git a/shardingsphere-ui-frontend/src/views/data-scaling/module/index.vue b/shardingsphere-ui-frontend/src/views/data-scaling/module/index.vue
index 0c75bf2..64a350a 100644
--- a/shardingsphere-ui-frontend/src/views/data-scaling/module/index.vue
+++ b/shardingsphere-ui-frontend/src/views/data-scaling/module/index.vue
@@ -207,25 +207,18 @@
<el-tabs v-model="activeName">
<el-tab-pane name="first">
- <div slot="label">{{this.$t('dataScaling').detail.inventory}} ({{percentageComputed}}%)</div>
- <el-row :gutter="10">
- <div v-for="(item, index) in jobDetail.inventoryDataTasks">
- <div v-for="(item1, idx) in item.innerTaskProgresses">
- <el-col
- :span="4"
- :key="index"
- >
- <div style="margin-bottom: 10px;">{{item1.id}}</div>
- <el-progress type="circle" :percentage="getPercentage(item1)"></el-progress>
- </el-col>
- </div>
- </div>
- </el-row>
+ <div slot="label">{{ this.$t('dataScaling').detail.inventory }} ({{ percentageComputed }}%)</div>
+ <el-table :data="jobDetail.inventoryTaskProgress">
+ <el-table-column :label="this.$t('dataScaling').detail.shardingItem" prop="shardingItem"></el-table-column>
+ <el-table-column :label="this.$t('dataScaling').detail.total" prop="total"></el-table-column>
+ <el-table-column :label="this.$t('dataScaling').detail.finished" prop="finished"></el-table-column>
+ </el-table>
</el-tab-pane>
<el-tab-pane :label="this.$t('dataScaling').detail.increment" name="second">
- <el-table :data="jobDetail.incrementalDataTasks">
+ <el-table :data="jobDetail.incrementalTaskProgress">
+ <el-table-column :label="this.$t('dataScaling').detail.shardingItem" prop="shardingItem"></el-table-column>
<el-table-column :label="this.$t('dataScaling').detail.taskId" prop="id"></el-table-column>
- <el-table-column :label="this.$t('dataScaling').detail.delay" prop="delayMillisecond" :formatter="dateFormat"></el-table-column>
+ <el-table-column :label="this.$t('dataScaling').detail.delay" prop="delayMillisecond"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
@@ -241,11 +234,11 @@
center>
<el-form label-width="110px">
<el-form-item
- :label="$t('dataScaling.serviceDialog.serviceName')">
+ :label="$t('dataScaling.serviceDialog.serviceName')">
<el-input v-model="serviceForm.serviceName" :placeholder="$t('dataScaling.serviceDialog.serviceNamePlaceholder')"/>
</el-form-item>
<el-form-item
- :label="$t('dataScaling.serviceDialog.serviceUrl')">
+ :label="$t('dataScaling.serviceDialog.serviceUrl')">
<el-input v-model="serviceForm.serviceUrl" :placeholder="$t('dataScaling.serviceDialog.serviceUrlPlaceholder')"/>
</el-form-item>
<el-form-item>
@@ -445,24 +438,16 @@ export default {
)
},
percentageComputed() {
- const arr = this.jobDetail.inventoryDataTasks
- if (!arr) return
- let sumEstimatedRows = 0
- let sumSyncedRows = 0
- for (const v of arr) {
- if (!v.innerTaskProgresses) {
- break
- }
- for(const v1 of v.innerTaskProgresses) {
- sumEstimatedRows += v1.estimatedRows
- sumSyncedRows += v1.syncedRows
- }
+ if (!this.jobDetail.inventoryTaskProgress) {
+ return
}
- let res = 0
- if (sumEstimatedRows) {
- res = sumSyncedRows / sumEstimatedRows
+ let total = 0
+ let finished = 0
+ for (const v of this.jobDetail.inventoryTaskProgress) {
+ total += v.total
+ finished += v.finished
}
- return nDecimal(res * 100, 0)
+ return total ? nDecimal(finished / total * 100, 0) : 100
}
},
created() {
@@ -522,28 +507,6 @@ export default {
this.serverDialogVisible = true
})
},
- getPercentage(arr) {
- if (!arr) return
- let sumEstimatedRows = ''
- let sumSyncedRows = ''
- for (const v of arr) {
- sumEstimatedRows += v.estimatedRows
- sumSyncedRows += v.syncedRows
- }
- let res = 0
- if (sumEstimatedRows) {
- res = sumSyncedRows / sumEstimatedRows
- }
- return nDecimal(res, 2) * 100
- },
- getPercentage(obj) {
- let data = 0
- if (obj.estimatedRows) {
- data = obj.syncedRows / obj.estimatedRows
- return nDecimal(data, 2) * 100
- }
- return 100
- },
getOption(obj) {
let data = 0
if (obj.estimatedRows) {
@@ -608,10 +571,7 @@ export default {
})
},
handlerStop(row) {
- const params = {
- jobId: row.jobId
- }
- API.postJobStop(params).then(res => {
+ API.getJobStop(row.jobId).then(res => {
this.$notify({
title: this.$t('dataScaling').notify.title,
message: this.$t('dataScaling').notify.delSucMessage,
@@ -649,7 +609,7 @@ export default {
type: 'shardingSphereJdbc',
parameter: {
dataSource: this.textareaDatasource,
- rule: this.textareaRule,
+ rule: this.textareaRule
}
},
target: {
diff --git a/shardingsphere-ui-frontend/src/views/registry-center/module/registryCenter.vue b/shardingsphere-ui-frontend/src/views/registry-center/module/registryCenter.vue
index 0d60942..034d595 100644
--- a/shardingsphere-ui-frontend/src/views/registry-center/module/registryCenter.vue
+++ b/shardingsphere-ui-frontend/src/views/registry-center/module/registryCenter.vue
@@ -118,7 +118,7 @@
autocomplete="off"
/>
</el-form-item>
- <el-form-item :label="$t('registryCenter.registDialog.digest')" id="add-digest">
+ <el-form-item id="add-digest" :label="$t('registryCenter.registDialog.digest')">
<el-input
:placeholder="$t('registryCenter.rules.digest')"
v-model="form.digest"
diff --git a/shardingsphere-ui-frontend/src/views/rule-config/module/schema.vue b/shardingsphere-ui-frontend/src/views/rule-config/module/schema.vue
index 492940f..e4110e5 100644
--- a/shardingsphere-ui-frontend/src/views/rule-config/module/schema.vue
+++ b/shardingsphere-ui-frontend/src/views/rule-config/module/schema.vue
@@ -80,7 +80,8 @@
<el-dialog
:visible.sync="addSchemaDialogVisible"
:title="$t('ruleConfig.schema.title')"
- width="80%" top="3vh">
+ width="80%"
+ top="3vh">
<el-form ref="form" :model="form" :rules="rules" label-width="170px">
<el-form-item :label="$t('ruleConfig.schema.name')" prop="name">
<el-input
@@ -249,7 +250,6 @@ export default {
this.renderYaml(parent, child, res)
})
} else {
- //child is metadata
API.getSchemaMetadata(parent).then(res => {
this.renderMetadataYaml(parent, child, res)
})