Fix: change key into label for topology (#270)
diff --git a/src/store/modules/topology/group/index.ts b/src/store/modules/topology/group/index.ts
index d026c51..1054815 100644
--- a/src/store/modules/topology/group/index.ts
+++ b/src/store/modules/topology/group/index.ts
@@ -22,7 +22,7 @@
export interface Group {
id: string;
name: string;
- services: string[];
+ services: Array<{key: string, label: string}>;
}
export interface State {
groupId: string;
@@ -83,25 +83,25 @@
state.groupId = 'all';
localStorage.removeItem('topology-group-history');
},
- [types.ADD_GROUP_SERVICE](state: State, data: { id: string; serviceId: string }): void {
+ [types.ADD_GROUP_SERVICE](state: State, data: { id: string; service: {label: string, key: string} }): void {
const groupIndex = state.groups.findIndex((i: Group) => i.id === data.id);
if (groupIndex === -1) {
return;
}
const services = state.groups[groupIndex].services;
- const index = services.findIndex((i) => i === data.serviceId);
+ const index = services.findIndex((i) => i.label === data.service.label);
if (index === -1) {
- services.push(data.serviceId);
+ services.push(data.service);
}
localStorage.setItem('topology-groups', JSON.stringify(state.groups));
},
- [types.DELETE_GROUP_SERVICE](state: State, data: { id: string; serviceId: string }): void {
+ [types.DELETE_GROUP_SERVICE](state: State, data: { id: string; service: {label: string, key: string} }): void {
const groupIndex = state.groups.findIndex((i: Group) => i.id === data.id);
if (groupIndex === -1) {
return;
}
const services = state.groups[groupIndex].services;
- const index = services.findIndex((i) => i === data.serviceId);
+ const index = services.findIndex((i) => i.label === data.service.label);
if (index !== -1) {
services.splice(index, 1);
}
diff --git a/src/views/components/topology/topo-group/group-item.vue b/src/views/components/topology/topo-group/group-item.vue
index c7d8907..6a44e95 100644
--- a/src/views/components/topology/topo-group/group-item.vue
+++ b/src/views/components/topology/topo-group/group-item.vue
@@ -18,11 +18,11 @@
@click="
(e) => {
!e.target.checked
- ? DELETE_GROUP_SERVICE({ id: data.id, serviceId: i.key })
- : ADD_GROUP_SERVICE({ id: data.id, serviceId: i.key });
+ ? DELETE_GROUP_SERVICE({ id: data.id, service: i })
+ : ADD_GROUP_SERVICE({ id: data.id, service: i });
}
"
- :checked="data.services.some((service) => service === i.key)"
+ :checked="data.services.some((service) => service.label === i.label)"
/>
<span>{{ i.label }}</span>
</div>
diff --git a/src/views/components/topology/topo-group/index.vue b/src/views/components/topology/topo-group/index.vue
index 8979088..d101aaa 100644
--- a/src/views/components/topology/topo-group/index.vue
+++ b/src/views/components/topology/topo-group/index.vue
@@ -39,7 +39,7 @@
@State('rocketTopo') private stateTopo!: topoState;
@State('rocketTopoGroup') private rocketTopoGroup!: TopoGroupState;
@Getter('durationTime') private durationTime: any;
- @Getter('rocketTopoGroup/services') private services: any;
+ @Getter('rocketTopoGroup/services') private services!: Array<{label: string, key: string}>;
@Mutation('rocketTopoGroup/INIT_GROUPS') private INIT_GROUPS: any;
@Mutation('rocketTopoGroup/DELETE_GROUP') private DELETE_GROUP: any;
@Mutation('rocketTopoGroup/SELECT_GROUP') private SELECT_GROUP: any;
@@ -55,7 +55,7 @@
}
private handleSelectGroup(id: string) {
this.SELECT_GROUP(id);
- this.GET_TOPO({ duration: this.durationTime, serviceIds: this.services });
+ this.GET_TOPO({ duration: this.durationTime, serviceIds: this.services.map((i) => i.key) });
}
private fetchData() {
return Axios.post('/graphql', {
@@ -79,7 +79,8 @@
return;
}
if (
- !this.rocketTopoGroup.groups.some((i: { id: string; name: string; services: string[] }) => i.id === serviceOld)
+ !this.rocketTopoGroup.groups
+ .some((i: { id: string; name: string; services: Array<{label: string, key: string}> }) => i.id === serviceOld)
) {
serviceOld = this.rocketTopoGroup.groups[0].id;
this.handleSelectGroup(serviceOld);
