You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2021/06/22 02:42:16 UTC
[skywalking-rocketbot-ui] branch master updated: fix: update
selector keys for duplicate options (#509)
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 5d87e44 fix: update selector keys for duplicate options (#509)
5d87e44 is described below
commit 5d87e4409daf7430e1b38dd6d6bcf78e0a65f889
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Tue Jun 22 10:42:09 2021 +0800
fix: update selector keys for duplicate options (#509)
---
src/views/components/common/trace-select.vue | 11 ++++++-----
.../dashboard/tool-bar/tool-bar-endpoint-select.vue | 11 ++++++-----
src/views/components/dashboard/tool-bar/tool-bar-select.vue | 11 ++++++-----
src/views/components/topology/topo-select.vue | 11 ++++++-----
4 files changed, 24 insertions(+), 20 deletions(-)
diff --git a/src/views/components/common/trace-select.vue b/src/views/components/common/trace-select.vue
index 39ecc0d..0efb27e 100644
--- a/src/views/components/common/trace-select.vue
+++ b/src/views/components/common/trace-select.vue
@@ -52,8 +52,8 @@ limitations under the License. -->
class="rk-trace-opt ell"
@click="handleSelect(i)"
:class="{ active: i.key === value.key }"
- v-for="i in filterData"
- :key="i.key"
+ v-for="(i, index) in filterData"
+ :key="i.key + index"
>
{{ i.label }}
</div>
@@ -64,10 +64,11 @@ limitations under the License. -->
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Option } from '@/types/global';
@Component
export default class TraceSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public value!: any;
+ @Prop() public data!: Option[];
+ @Prop() public value!: Option;
@Prop() public title!: string;
@Prop({ default: false }) public hasSearch!: boolean;
@Prop({ default: false })
@@ -75,7 +76,7 @@ limitations under the License. -->
public search: string = '';
public visible: boolean = false;
get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ return this.data.filter((i: Option) => i.label.toUpperCase().includes(this.search.toUpperCase()));
}
public handleSelect(i: any) {
this.$emit('input', i);
diff --git a/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue b/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
index d5b82e6..cd0cc32 100644
--- a/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
+++ b/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
@@ -54,8 +54,8 @@ limitations under the License. -->
<EndpointOpt
@handleSelect="handleSelect"
:class="{ active: i.key === current.key }"
- v-for="i in filterData"
- :key="i.key"
+ v-for="(i, index) in filterData"
+ :key="i.key + index"
:data="i"
/>
</div>
@@ -67,11 +67,12 @@ limitations under the License. -->
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Action } from 'vuex-class';
import EndpointOpt from './tool-bar-endpoint-select-opt.vue';
+ import { Option } from '@/types/global';
@Component({ components: { EndpointOpt } })
export default class ToolBarEndpointSelect extends Vue {
@Action('GET_SERVICE_ENDPOINTS') private GET_SERVICE_ENDPOINTS: any;
- @Prop() private data!: any;
- @Prop() private current!: any;
+ @Prop() private data!: Option[];
+ @Prop() private current!: Option;
@Prop() private title!: string;
@Prop() private icon!: string;
@Prop() private currentService: any;
@@ -79,7 +80,7 @@ limitations under the License. -->
private visible: boolean = false;
get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ return this.data.filter((i: Option) => i.label.toUpperCase().includes(this.search.toUpperCase()));
}
private handleOpen() {
this.visible = true;
diff --git a/src/views/components/dashboard/tool-bar/tool-bar-select.vue b/src/views/components/dashboard/tool-bar/tool-bar-select.vue
index 2ea02d3..10289f9 100644
--- a/src/views/components/dashboard/tool-bar/tool-bar-select.vue
+++ b/src/views/components/dashboard/tool-bar/tool-bar-select.vue
@@ -49,8 +49,8 @@ limitations under the License. -->
class="rk-dashboard-opt ell"
@click="i.disabled ? () => {} : handleSelect(i)"
:class="{ active: i.key === current.key, disabled: i.disabled }"
- v-for="i in filterData"
- :key="i.key"
+ v-for="(i, index) in filterData"
+ :key="i.key + index"
>
{{ i.label }}
</div>
@@ -61,17 +61,18 @@ limitations under the License. -->
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Option } from '@/types/global';
@Component
export default class ToolBarSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public current!: any;
+ @Prop() public data!: Option[];
+ @Prop() public current!: Option;
@Prop() public title!: string;
@Prop() public icon!: string;
@Prop({ type: Boolean, default: true }) public selectable!: boolean;
public search: string = '';
public visible: boolean = false;
get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ return this.data.filter((i: Option) => i.label.toUpperCase().includes(this.search.toUpperCase()));
}
public handleOpen() {
this.visible = true;
diff --git a/src/views/components/topology/topo-select.vue b/src/views/components/topology/topo-select.vue
index deb044f..8ddc96f 100644
--- a/src/views/components/topology/topo-select.vue
+++ b/src/views/components/topology/topo-select.vue
@@ -46,8 +46,8 @@ limitations under the License. -->
class="rk-topo-opt ell"
@click="handleSelect(i)"
:class="{ active: i.key === current.key }"
- v-for="i in filterData"
- :key="i.key"
+ v-for="(i, index) in filterData"
+ :key="i.key + index"
>
{{ i.label }}
</div>
@@ -58,16 +58,17 @@ limitations under the License. -->
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Option } from '@/types/global';
@Component
export default class TopoSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public current!: any;
+ @Prop() public data!: Option[];
+ @Prop() public current!: Option;
@Prop() public title!: string;
@Prop() public icon!: string;
public search: string = '';
public visible: boolean = false;
get filterData() {
- return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
+ return this.data.filter((i: Option) => i.label.toUpperCase().includes(this.search.toUpperCase()));
}
public handleOpen() {
this.visible = true;