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/03/01 13:08:28 UTC
[skywalking-rocketbot-ui] branch master updated: feat: search
endpoints with keywords (#432)
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 df2f5d3 feat: search endpoints with keywords (#432)
df2f5d3 is described below
commit df2f5d3158e716dc3a72ae65f28415370e160d42
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Mon Mar 1 21:08:22 2021 +0800
feat: search endpoints with keywords (#432)
---
src/store/modules/global/selectors.ts | 10 +++++--
.../dashboard/tool-bar-endpoint-select.vue | 33 ++++++++++++++--------
src/views/components/dashboard/tool-bar.vue | 4 ++-
.../profile/profile-detail-chart-table.vue | 1 -
src/views/containers/topology/instance/index.vue | 1 -
5 files changed, 33 insertions(+), 16 deletions(-)
diff --git a/src/store/modules/global/selectors.ts b/src/store/modules/global/selectors.ts
index 354ee72..84eecfb 100644
--- a/src/store/modules/global/selectors.ts
+++ b/src/store/modules/global/selectors.ts
@@ -122,7 +122,10 @@ const actions: ActionTree<State, any> = {
context.commit(types.SET_SERVICES, res.data.data.services);
});
},
- GET_SERVICE_ENDPOINTS(context: { commit: Commit; state: any }, params: { keyword: string }) {
+ GET_SERVICE_ENDPOINTS(
+ context: { commit: Commit; state: any },
+ params: { keyword: string; currentService?: { key: string; label: string } },
+ ) {
if (!context.state.currentService.key) {
context.commit(types.SET_ENDPOINTS, []);
return;
@@ -132,7 +135,10 @@ const actions: ActionTree<State, any> = {
}
return graph
.query('queryEndpoints')
- .params({ serviceId: context.state.currentService.key || '', ...params })
+ .params({
+ serviceId: (params.currentService ? params.currentService.key : context.state.currentService.key) || '',
+ keyword: params.keyword,
+ })
.then((res: AxiosResponse) => {
context.commit(types.SET_ENDPOINTS, res.data.data.getEndpoints);
});
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select.vue b/src/views/components/dashboard/tool-bar-endpoint-select.vue
index 4f3a380..d5b82e6 100644
--- a/src/views/components/dashboard/tool-bar-endpoint-select.vue
+++ b/src/views/components/dashboard/tool-bar-endpoint-select.vue
@@ -17,7 +17,6 @@ limitations under the License. -->
class="rk-dashboard-bar-select cp flex-h"
v-clickout="
() => {
- search = '';
visible = false;
}
"
@@ -39,8 +38,15 @@ limitations under the License. -->
</div>
<div class="rk-dashboard-sel" v-if="visible">
<div>
- <input type="text" class="rk-dashboard-sel-search" v-model="search" />
- <svg class="icon sm close" style="margin-top: 3px;" @click="search = ''" v-if="search">
+ <input type="text" class="rk-dashboard-sel-search" v-model="search" @change="fliterEndpoints" />
+ <svg
+ class="icon sm close"
+ style="margin-top: 3px;"
+ @click="
+ search = '';
+ fliterEndpoints();
+ "
+ >
<use xlink:href="#clear"></use>
</svg>
</div>
@@ -63,23 +69,28 @@ limitations under the License. -->
import EndpointOpt from './tool-bar-endpoint-select-opt.vue';
@Component({ components: { EndpointOpt } })
export default class ToolBarEndpointSelect extends Vue {
- @Prop() public data!: any;
- @Prop() public current!: any;
- @Prop() public title!: string;
- @Prop() public icon!: string;
- public search: string = '';
- public visible: boolean = false;
+ @Action('GET_SERVICE_ENDPOINTS') private GET_SERVICE_ENDPOINTS: any;
+ @Prop() private data!: any;
+ @Prop() private current!: any;
+ @Prop() private title!: string;
+ @Prop() private icon!: string;
+ @Prop() private currentService: any;
+ private search: string = '';
+ private visible: boolean = false;
get filterData() {
return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
}
- public handleOpen() {
+ private handleOpen() {
this.visible = true;
}
- public handleSelect(i: any) {
+ private handleSelect(i: any) {
this.$emit('onChoose', i);
this.visible = false;
}
+ private fliterEndpoints() {
+ this.GET_SERVICE_ENDPOINTS({ service: this.currentService, keyword: this.search });
+ }
}
</script>
diff --git a/src/views/components/dashboard/tool-bar.vue b/src/views/components/dashboard/tool-bar.vue
index e6fe483..fc6707a 100644
--- a/src/views/components/dashboard/tool-bar.vue
+++ b/src/views/components/dashboard/tool-bar.vue
@@ -45,6 +45,7 @@ limitations under the License. -->
:title="this.$t('currentEndpoint')"
:current="stateDashboard.currentEndpoint"
:data="stateDashboard.endpoints"
+ :currentService="stateDashboard.currentService"
icon="code"
/>
<ToolBarSelect
@@ -76,6 +77,7 @@ limitations under the License. -->
:title="this.$t('currentPage')"
:current="stateDashboard.currentEndpoint"
:data="stateDashboard.endpoints"
+ :currentService="stateDashboard.currentService"
icon="code"
/>
</template>
@@ -100,7 +102,7 @@ limitations under the License. -->
import { State, Action, Mutation } from 'vuex-class';
import { DASHBOARDTYPE } from './constant';
- @Component({ components: { ToolBarSelect, ToolBarEndpointSelect, ToolBarBtns } })
+ @Component({ components: { ToolBarSelect, ToolBarBtns, ToolBarEndpointSelect } })
export default class ToolBar extends Vue {
@Prop() private compType!: any;
@Prop() private stateDashboard!: any;
diff --git a/src/views/components/profile/profile-detail-chart-table.vue b/src/views/components/profile/profile-detail-chart-table.vue
index f122e8d..c29847e 100644
--- a/src/views/components/profile/profile-detail-chart-table.vue
+++ b/src/views/components/profile/profile-detail-chart-table.vue
@@ -23,7 +23,6 @@ limitations under the License. -->
<script lang="js">
import copy from '@/utils/copy';
import ProfileContainer from './profile-container';
- import _ from 'lodash';
export default {
components: {
diff --git a/src/views/containers/topology/instance/index.vue b/src/views/containers/topology/instance/index.vue
index b991f6d..e632a73 100644
--- a/src/views/containers/topology/instance/index.vue
+++ b/src/views/containers/topology/instance/index.vue
@@ -63,7 +63,6 @@ limitations under the License. -->
import InstancesSurvey from './instances-survey.vue';
import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
- import _ from 'lodash';
import Vue from 'vue';
import { Component, PropSync, Watch, Prop } from 'vue-property-decorator';
import { Action, Getter, State, Mutation } from 'vuex-class';