Commit 3af502dc authored by Tristan Read's avatar Tristan Read Committed by Kushal Pandya

Search plain text in alert list frontend

parent 15efe30e
......@@ -13,10 +13,12 @@ import {
GlTab,
GlBadge,
GlPagination,
GlSearchBoxByType,
GlSprintf,
} from '@gitlab/ui';
import createFlash from '~/flash';
import { s__ } from '~/locale';
import { __, s__ } from '~/locale';
import { debounce, trim } from 'lodash';
import { joinPaths, visitUrl } from '~/lib/utils/url_utility';
import { fetchPolicies } from '~/lib/graphql';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
......@@ -54,6 +56,7 @@ export default {
errorMsg: s__(
"AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear.",
),
searchPlaceholder: __('Search or filter results...'),
},
fields: [
{
......@@ -126,6 +129,7 @@ export default {
GlTab,
GlBadge,
GlPagination,
GlSearchBoxByType,
GlSprintf,
},
props: {
......@@ -160,6 +164,7 @@ export default {
query: getAlerts,
variables() {
return {
searchTerm: this.searchTerm,
projectPath: this.projectPath,
statuses: this.statusFilter,
sort: this.sort,
......@@ -186,6 +191,7 @@ export default {
query: getAlertsCountByStatus,
variables() {
return {
searchTerm: this.searchTerm,
projectPath: this.projectPath,
};
},
......@@ -196,6 +202,7 @@ export default {
},
data() {
return {
searchTerm: '',
errored: false,
isAlertDismissed: false,
isErrorAlertDismissed: false,
......@@ -211,7 +218,11 @@ export default {
computed: {
showNoAlertsMsg() {
return (
!this.errored && !this.loading && this.alertsCount?.all === 0 && !this.isAlertDismissed
!this.errored &&
!this.loading &&
this.alertsCount?.all === 0 &&
!this.searchTerm &&
!this.isAlertDismissed
);
},
showErrorMsg() {
......@@ -257,6 +268,13 @@ export default {
this.resetPagination();
this.sort = `${sortingColumn}_${sortingDirection}`;
},
onInputChange: debounce(function debounceSearch(input) {
const trimmedInput = trim(input);
if (trimmedInput !== this.searchTerm) {
this.resetPagination();
this.searchTerm = trimmedInput;
}
}, 500),
updateAlertStatus(status, iid) {
this.$apollo
.mutate({
......@@ -343,7 +361,7 @@ export default {
{{ $options.i18n.errorMsg }}
</gl-alert>
<gl-tabs @input="filterAlertsByStatus">
<gl-tabs content-class="gl-p-0" @input="filterAlertsByStatus">
<gl-tab v-for="tab in $options.statusTabs" :key="tab.status">
<template slot="title">
<span>{{ tab.title }}</span>
......@@ -354,11 +372,19 @@ export default {
</gl-tab>
</gl-tabs>
<div class="gl-bg-gray-10 gl-p-5 gl-border-b-solid gl-border-b-1 gl-border-gray-100">
<gl-search-box-by-type
class="gl-bg-white"
:placeholder="$options.i18n.searchPlaceholder"
@input="onInputChange"
/>
</div>
<h4 class="d-block d-md-none my-3">
{{ s__('AlertManagement|Alerts') }}
</h4>
<gl-table
class="alert-management-table mt-3"
class="alert-management-table"
:items="alerts ? alerts.list : []"
:fields="$options.fields"
:show-empty="true"
......
#import "../fragments/list_item.fragment.graphql"
query getAlerts(
$searchTerm: String,
$projectPath: ID!,
$statuses: [AlertManagementStatus!],
$sort: AlertManagementAlertSort,
......@@ -11,6 +12,7 @@ query getAlerts(
) {
project(fullPath: $projectPath, ) {
alertManagementAlerts(
search: $searchTerm,
statuses: $statuses,
sort: $sort,
first: $firstPageSize
......
query getAlertsCount($projectPath: ID!) {
query getAlertsCount(
$searchTerm: String,
$projectPath: ID!
) {
project(fullPath: $projectPath) {
alertManagementAlertStatusCounts {
alertManagementAlertStatusCounts(
search: $searchTerm
) {
all
open
acknowledged
......
---
title: Search plain text in alert list frontend
merge_request: 34631
author:
type: added
......@@ -11,6 +11,7 @@ import {
GlTab,
GlBadge,
GlPagination,
GlSearchBoxByType,
} from '@gitlab/ui';
import { visitUrl } from '~/lib/utils/url_utility';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
......@@ -49,6 +50,7 @@ describe('AlertManagementList', () => {
const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
const findPagination = () => wrapper.find(GlPagination);
const findSearch = () => wrapper.find(GlSearchBoxByType);
const alertsCount = {
open: 14,
triggered: 10,
......@@ -487,4 +489,26 @@ describe('AlertManagementList', () => {
});
});
});
describe('Search', () => {
beforeEach(() => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
loading: false,
});
});
it('renders the search component', () => {
expect(findSearch().exists()).toBe(true);
});
it('sets the `searchTerm` graphql variable', () => {
const SEARCH_TERM = 'Simple Alert';
findSearch().vm.$emit('input', SEARCH_TERM);
expect(wrapper.vm.$data.searchTerm).toBe(SEARCH_TERM);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment