This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 1e778a3 Feat: Update topology group pagement (#281)
1e778a3 is described below
commit 1e778a3bb12ef334a9beb6ed737d6b94ab370b91
Author: Allen Wang <[email protected]>
AuthorDate: Tue Apr 14 10:55:31 2020 +0800
Feat: Update topology group pagement (#281)
* Feat: topology-group-pagement
* Update
---
src/components/rk-page.vue | 2 +-
.../components/topology/topo-group/group-item.vue | 8 +++
src/views/components/topology/topo-group/index.vue | 76 ++++++++++++++--------
3 files changed, 59 insertions(+), 27 deletions(-)
diff --git a/src/components/rk-page.vue b/src/components/rk-page.vue
index c3a31ad..ee2c9b5 100644
--- a/src/components/rk-page.vue
+++ b/src/components/rk-page.vue
@@ -91,7 +91,7 @@ limitations under the License. -->
},
};
</script>
-<style lang="scss" scoped>
+<style lang="scss">
.rk-page {
display: inline-flex;
.icon {
diff --git a/src/views/components/topology/topo-group/group-item.vue
b/src/views/components/topology/topo-group/group-item.vue
index 2ae37c6..9c32571 100644
--- a/src/views/components/topology/topo-group/group-item.vue
+++ b/src/views/components/topology/topo-group/group-item.vue
@@ -20,6 +20,7 @@ limitations under the License. -->
<span class="mr-5">{{ data.name }}</span>
</div>
<div class="group-services">
+ <div class="group-services-wrapper">
<div class="ell mb-10" v-for="i in servicesMap" :key="i.key">
<input
type="checkbox"
@@ -34,6 +35,8 @@ limitations under the License. -->
/>
<span>{{ i.label }}</span>
</div>
+ </div>
+
<RkButton size="sm" class="mr-5" @click="$emit('select',
data.id)">Render</RkButton>
</div>
</div>
@@ -62,6 +65,11 @@ limitations under the License. -->
}
}
}
+ .group-services-wrapper{
+ max-height: 250px;
+ overflow: auto;
+ padding-right: 15px;
+ }
.group-services {
display: none;
position: absolute;
diff --git a/src/views/components/topology/topo-group/index.vue
b/src/views/components/topology/topo-group/index.vue
index 23ad403..2f4fb23 100644
--- a/src/views/components/topology/topo-group/index.vue
+++ b/src/views/components/topology/topo-group/index.vue
@@ -1,29 +1,40 @@
-<!-- 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
+/**
+ * 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.
+ */
- 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>
<div class="topo-group">
- <div v-for="i in rocketTopoGroup.groups">
- <GroupItem
- :servicesMap="servicesMap"
- :active="rocketTopoGroup.groupId === i.id"
- :key="i.id"
- @delete="handleDeleteGroup(i.id)"
- @select="handleSelectGroup"
- :data="i"
- />
+ <div class="topo-group-wrapper">
+ <div v-for="i in pagedData">
+ <GroupItem
+ :servicesMap="servicesMap"
+ :active="rocketTopoGroup.groupId === i.id"
+ :key="i.id"
+ @delete="handleDeleteGroup(i.id)"
+ @select="handleSelectGroup"
+ :data="i"
+ />
+ </div>
</div>
+ <RkPage
+ v-show="rocketTopoGroup.groups.length > 10"
+ :total="rocketTopoGroup.groups.length"
+ @changePage="page"
+ :currentPage="currentPage"
+ />
<CreateGroup />
</div>
</template>
@@ -54,6 +65,20 @@ limitations under the License. -->
@Action('rocketTopo/FILTER_TOPO') private FILTER_TOPO: any;
@Action('rocketTopo/GET_TOPO') private GET_TOPO: any;
private servicesMap = [];
+ private currentPage = 1;
+ private get pagedData() {
+ const start = 10 * this.currentPage;
+ let end = 10;
+ if (start < this.rocketTopoGroup.groups.length) {
+ end = start;
+ } else {
+ end = this.rocketTopoGroup.groups.length;
+ }
+ return this.rocketTopoGroup.groups.slice(start - 10, end);
+ }
+ private page(pageNumber: number) {
+ this.currentPage = pageNumber;
+ }
private handleDeleteGroup(id: string) {
const r = confirm('Do you want to delete this group!');
if (r === true) {
@@ -83,10 +108,6 @@ limitations under the License. -->
private initGroupTopo() {
let serviceOld = localStorage.getItem('topology-group-history') || '';
if (!this.rocketTopoGroup.groups.length) {
- this.handleSelectGroup(serviceOld);
- this.GET_TOPO({
- duration: this.durationTime,
- });
return;
}
if (
@@ -113,5 +134,8 @@ limitations under the License. -->
position: absolute;
bottom: 10px;
left: 10px;
+ .rk-page {
+ color: #eee;
+ }
}
</style>
