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 dfedfae Feat: Implement group selector in the topology (#399)
dfedfae is described below
commit dfedfae78e5601253793854576b6ea52fb64110b
Author: Qiuxia Fan <fine0...@outlook.com>
AuthorDate: Fri Dec 11 17:20:44 2020 +0800
Feat: Implement group selector in the topology (#399)
---
src/graph/fragments/option.ts | 1 +
src/views/components/topology/radial.vue | 2 +-
src/views/components/topology/topo-aside.vue | 8 +-
.../components/topology/topo-detect-point.vue | 2 +-
.../topology/topo-endpoint-dependency.vue | 2 +-
.../topology/topo-group/create-group.vue | 2 +-
.../components/topology/topo-group/group-item.vue | 31 ++++----
src/views/components/topology/topo-select.vue | 5 +-
src/views/components/topology/topo-services.vue | 92 +++++++++++++++++-----
9 files changed, 103 insertions(+), 42 deletions(-)
diff --git a/src/graph/fragments/option.ts b/src/graph/fragments/option.ts
index 9f9cb1b..205568c 100644
--- a/src/graph/fragments/option.ts
+++ b/src/graph/fragments/option.ts
@@ -21,6 +21,7 @@ export const Services = {
services: getAllServices(duration: $duration, group: $keyword) {
key: id
label: name
+ group
}
`,
};
diff --git a/src/views/components/topology/radial.vue
b/src/views/components/topology/radial.vue
index debe503..a69a0a5 100644
--- a/src/views/components/topology/radial.vue
+++ b/src/views/components/topology/radial.vue
@@ -74,7 +74,7 @@ limitations under the License. -->
'#96dee8',
],
legend: {
- top: 25,
+ top: 50,
textStyle: {
color: '#ddd',
},
diff --git a/src/views/components/topology/topo-aside.vue
b/src/views/components/topology/topo-aside.vue
index fbef552..2e61b33 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -16,7 +16,7 @@ limitations under the License. -->
<template>
<aside class="link-topo-aside">
<Radial v-if="radioStatus" :datas="{ nodes: stateTopo.nodes, calls:
stateTopo.calls }" />
- <svg class="link-topo-aside-btn icon cp lg" @click="showRadial()"
:style="`position:absolute;left:290px;`">
+ <svg class="link-topo-aside-btn icon cp lg" @click="showRadial()"
:style="`position:absolute;left:580px;`">
<use xlink:href="#issues" />
</svg>
<svg
@@ -53,8 +53,8 @@ limitations under the License. -->
v-if="stateTopo.serviceSLA.length"
:data="stateTopo.serviceSLA"
:intervalTime="intervalTime"
- title="Service SLA"
- unit="%"
+ :title="$t('avgSLA')"
+ unit=""
/>
</div>
</div>
@@ -168,7 +168,7 @@ limitations under the License. -->
display: block;
background: #252a2f9a;
color: #ddd;
- border-radius: 4px 4px 4px 4px;
+ border-radius: 4px;
text-align: center;
padding: 10px;
z-index: 101;
diff --git a/src/views/components/topology/topo-detect-point.vue
b/src/views/components/topology/topo-detect-point.vue
index 93eb6ab..72191e4 100644
--- a/src/views/components/topology/topo-detect-point.vue
+++ b/src/views/components/topology/topo-detect-point.vue
@@ -67,7 +67,7 @@ limitations under the License. -->
:intervalTime="intervalTime"
:precent="true"
:title="$t('avgSLA')"
- unit="%"
+ unit=""
/>
<ChartLine
v-if="stateTopo.responsePercentile.p50.length"
diff --git a/src/views/components/topology/topo-endpoint-dependency.vue
b/src/views/components/topology/topo-endpoint-dependency.vue
index 3bcb97d..54839b1 100644
--- a/src/views/components/topology/topo-endpoint-dependency.vue
+++ b/src/views/components/topology/topo-endpoint-dependency.vue
@@ -32,7 +32,7 @@ limitations under the License. -->
<TopoChart :data="cpm" :intervalTime="intervalTime"
:title="$t('avgThroughput')" unit="cpm" />
</div>
<div v-if="sla.length">
- <TopoChart :data="sla" :intervalTime="intervalTime" :precent="true"
:title="$t('avgSLA')" unit="%" />
+ <TopoChart :data="sla" :intervalTime="intervalTime" :precent="true"
:title="$t('avgSLA')" unit="" />
</div>
<div v-if="percentile.p50">
<ChartLine :data="percentile" :intervalTime="intervalTime"
:title="$t('percentResponse')" />
diff --git a/src/views/components/topology/topo-group/create-group.vue
b/src/views/components/topology/topo-group/create-group.vue
index b5bbf1c..7dae457 100644
--- a/src/views/components/topology/topo-group/create-group.vue
+++ b/src/views/components/topology/topo-group/create-group.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
<template>
<div>
<div v-if="create">
- <input class="group-create-input mr-5" placeholder="Group Name"
v-model="name" />
+ <input class="group-create-input mr-5" placeholder="Add local view"
v-model="name" />
<RkButton class="mr-5" @click="handleCreateGroup">Confirm</RkButton>
<RkButton @click="create = false">Cancel</RkButton>
</div>
diff --git a/src/views/components/topology/topo-group/group-item.vue
b/src/views/components/topology/topo-group/group-item.vue
index 9c32571..866d28e 100644
--- a/src/views/components/topology/topo-group/group-item.vue
+++ b/src/views/components/topology/topo-group/group-item.vue
@@ -21,20 +21,20 @@ limitations under the License. -->
</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"
- @click="
- (e) => {
- !e.target.checked
- ? DELETE_GROUP_SERVICE({ id: data.id, service: i })
- : ADD_GROUP_SERVICE({ id: data.id, service: i });
- }
- "
- :checked="data.services.some((service) => service.label === i.label)"
- />
- <span>{{ i.label }}</span>
- </div>
+ <div class="ell mb-10" v-for="i in servicesMap" :key="i.key">
+ <input
+ type="checkbox"
+ @click="
+ (e) => {
+ !e.target.checked
+ ? DELETE_GROUP_SERVICE({ id: data.id, service: i })
+ : ADD_GROUP_SERVICE({ id: data.id, service: i });
+ }
+ "
+ :checked="data.services.some((service) => service.label ===
i.label)"
+ />
+ <span>{{ i.label }}</span>
+ </div>
</div>
<RkButton size="sm" class="mr-5" @click="$emit('select',
data.id)">Render</RkButton>
@@ -56,6 +56,7 @@ limitations under the License. -->
</script>
<style lang="scss">
.topo-group {
+ z-index: 101;
.group-wrapper {
position: relative;
margin-bottom: 5px;
@@ -65,7 +66,7 @@ limitations under the License. -->
}
}
}
- .group-services-wrapper{
+ .group-services-wrapper {
max-height: 250px;
overflow: auto;
padding-right: 15px;
diff --git a/src/views/components/topology/topo-select.vue
b/src/views/components/topology/topo-select.vue
index 16e9475..60a602a 100644
--- a/src/views/components/topology/topo-select.vue
+++ b/src/views/components/topology/topo-select.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing
permissions and
limitations under the License. -->
<template>
<div
- class="rk-topo-bar-select cp flex-h"
+ class="rk-topo-bar-select cp"
v-clickout="
() => {
visible = false;
@@ -85,6 +85,9 @@ limitations under the License. -->
z-index: 1;
height: 40px;
justify-content: space-between;
+ background-color: #2b3037;
+ color: #ddd;
+ width: 280px;
.sm {
line-height: 12px;
}
diff --git a/src/views/components/topology/topo-services.vue
b/src/views/components/topology/topo-services.vue
index 26a24a1..8193af9 100644
--- a/src/views/components/topology/topo-services.vue
+++ b/src/views/components/topology/topo-services.vue
@@ -13,8 +13,9 @@ 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="link-topo-aside-box" style="padding:0;">
- <TopoSelect :current="service" :data="services" @onChoose="handleChange" />
+ <div class="selector-topo-aside-box">
+ <TopoSelect :current="group" :data="groups" @onChoose="changeGroup" />
+ <TopoSelect :current="service" :data="currentServices"
@onChoose="changeService" />
</div>
</template>
<script lang="ts">
@@ -30,32 +31,71 @@ limitations under the License. -->
@Action('rocketTopo/GET_TOPO') public GET_TOPO: any;
@Action('rocketTopo/GET_SERVICES') private GET_SERVICES: any;
@Mutation('rocketTopoGroup/UNSELECT_GROUP') private UNSELECT_GROUP: any;
- private services = [{ key: 0, label: 'All services' }];
- private service = { key: 0, label: 'All services' };
+ private services = [{ key: '', label: 'All services', group: '' }];
+ private currentServices = [{ key: '', label: 'All services' }];
+ private service = { key: '', label: 'All services' };
+ private groups = [{ key: '', label: 'All groups' }];
+ private group = { key: '', label: 'All groups' };
private created() {
this.fetchData();
- this.renderTopo();
}
- private fetchData() {
- this.GET_SERVICES({ duration: this.durationTime }).then((json: any[]) =>
{
- this.services = [...this.services, ...json];
- });
+ get currentServiceList() {
+ const services = this.group.key ? this.services.filter((item) =>
item.group === this.group.key) : this.services;
+
+ return [{ key: '', label: 'All services' }, ...services];
}
- @Watch('durationTime')
- private watchDurationTime(newValue: DurationTime, oldValue: DurationTime) {
- // Avoid repeating fetchData() after enter the component for the first
time.
- if (compareObj(newValue, oldValue)) {
- this.fetchData();
- this.renderTopo();
- }
+ private fetchData() {
+ this.GET_SERVICES({ duration: this.durationTime }).then(
+ (json: Array<{ key: string; label: string; group: string }>) => {
+ const groups = [] as string[];
+ for (const g of json) {
+ if (!groups.includes(g.group)) {
+ groups.push(g.group);
+ }
+ }
+ this.groups = [
+ ...groups.map((g) => {
+ return {
+ key: g,
+ label: g,
+ };
+ }),
+ { key: '', label: 'All groups' },
+ ];
+ this.group = this.groups[0];
+ this.services = json;
+ this.currentServices = this.currentServiceList;
+ this.service = this.currentServiceList.length > 1 ?
this.currentServices[1] : this.currentServices[0];
+ this.renderTopo();
+ },
+ );
}
- private handleChange(i: any) {
+ private changeService(i: { key: string; label: string; group: string }) {
this.service = i;
this.UNSELECT_GROUP();
+ if (this.service.key) {
+ this.GET_TOPO({
+ serviceId: this.service.key,
+ duration: this.durationTime,
+ });
+ } else {
+ const serviceIds = this.group.key ? this.currentServices.map((item) =>
item.key) : undefined;
+
+ this.GET_TOPO({
+ serviceIds,
+ duration: this.durationTime,
+ });
+ }
+ }
+
+ private changeGroup(i: { key: string; label: string }) {
+ this.group = i;
+ this.currentServices = this.currentServiceList;
+ this.service = this.currentServiceList.length > 1 ?
this.currentServices[1] : this.currentServices[0];
this.GET_TOPO({
serviceId: this.service.key,
duration: this.durationTime,
@@ -68,7 +108,7 @@ limitations under the License. -->
const jsonGroup = JSON.parse(groups);
if (!jsonGroup.length) {
this.GET_TOPO({
- serviceId: 0,
+ serviceId: this.service.key,
duration: this.durationTime,
});
}
@@ -79,10 +119,26 @@ limitations under the License. -->
});
}
}
+
+ @Watch('durationTime')
+ private watchDurationTime(newValue: DurationTime, oldValue: DurationTime) {
+ // Avoid repeating fetchData() after enter the component for the first
time.
+ if (compareObj(newValue, oldValue)) {
+ this.fetchData();
+ }
+ }
}
</script>
<style lang="scss">
.topo-server.dao-select .dao-select-main .dao-select-switch {
border: 0;
}
+ .selector-topo-aside-box {
+ z-index: 101;
+ position: absolute;
+ display: flex;
+ > div:last-child {
+ margin-left: 10px;
+ }
+ }
</style>
