diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-25 21:06:20 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-25 21:06:20 +0000 |
commit | e95a97594ae2da675cb80fdb2ecb2ae64526d1d4 (patch) | |
tree | d7ea0e8380e99b53d0103a851400a8b3d4a62e02 /app/assets/javascripts/error_tracking | |
parent | 6ac3c67986a7007aa93a22843085e5a87b55f61a (diff) | |
download | gitlab-ce-e95a97594ae2da675cb80fdb2ecb2ae64526d1d4.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/error_tracking')
3 files changed, 42 insertions, 5 deletions
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue index cd298e2c692..a76eb747c34 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue @@ -1,6 +1,13 @@ <script> -import { mapActions, mapState } from 'vuex'; -import { GlEmptyState, GlButton, GlLink, GlLoadingIcon, GlTable } from '@gitlab/ui'; +import { mapActions, mapState, mapGetters } from 'vuex'; +import { + GlEmptyState, + GlButton, + GlLink, + GlLoadingIcon, + GlTable, + GlSearchBoxByType, +} from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import { __ } from '~/locale'; @@ -20,6 +27,7 @@ export default { GlLink, GlLoadingIcon, GlTable, + GlSearchBoxByType, Icon, TimeAgo, }, @@ -48,8 +56,17 @@ export default { required: true, }, }, + data() { + return { + errorSearchQuery: '', + }; + }, computed: { ...mapState(['errors', 'externalUrl', 'loading']), + ...mapGetters(['filterErrorsByTitle']), + filteredErrors() { + return this.errorSearchQuery ? this.filterErrorsByTitle(this.errorSearchQuery) : this.errors; + }, }, created() { if (this.errorTrackingEnabled) { @@ -71,10 +88,17 @@ export default { <gl-loading-icon :size="3" /> </div> <div v-else> - <div class="d-flex justify-content-end"> + <div class="d-flex flex-row justify-content-around bg-secondary border"> + <gl-search-box-by-type + v-model="errorSearchQuery" + class="col-lg-10 m-3 p-0" + :placeholder="__('Search or filter results...')" + type="search" + autofocus + /> <gl-button v-track-event="trackViewInSentryOptions(externalUrl)" - class="my-3 ml-auto" + class="m-3" variant="primary" :href="externalUrl" target="_blank" @@ -84,7 +108,14 @@ export default { </gl-button> </div> - <gl-table :items="errors" :fields="$options.fields" :show-empty="true" fixed stacked="sm"> + <gl-table + class="mt-3" + :items="filteredErrors" + :fields="$options.fields" + :show-empty="true" + fixed + stacked="sm" + > <template slot="HEAD_events" slot-scope="data"> <div class="text-md-right">{{ data.label }}</div> </template> diff --git a/app/assets/javascripts/error_tracking/store/getters.js b/app/assets/javascripts/error_tracking/store/getters.js new file mode 100644 index 00000000000..1a2ec62f79f --- /dev/null +++ b/app/assets/javascripts/error_tracking/store/getters.js @@ -0,0 +1,4 @@ +export const filterErrorsByTitle = state => errorQuery => + state.errors.filter(error => error.title.match(new RegExp(`${errorQuery}`, 'i'))); + +export default () => {}; diff --git a/app/assets/javascripts/error_tracking/store/index.js b/app/assets/javascripts/error_tracking/store/index.js index 3136682fb64..3ba05e22727 100644 --- a/app/assets/javascripts/error_tracking/store/index.js +++ b/app/assets/javascripts/error_tracking/store/index.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from './actions'; +import * as getters from './getters'; import mutations from './mutations'; Vue.use(Vuex); @@ -14,6 +15,7 @@ export const createStore = () => }, actions, mutations, + getters, }); export default createStore(); |