From 0068e827180b6fabe54b57bd0410723c4eda209c Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 4 Jan 2018 13:08:49 +0100 Subject: [PATCH 01/11] new styling and markup --- .../AlertRuleList/AlertRuleList.tsx | 69 ++++---- .../app/plugins/panel/alertlist/module.html | 84 +++++---- public/sass/pages/_alerting.scss | 160 +++++++++++------- 3 files changed, 177 insertions(+), 136 deletions(-) diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index b12a9f234d0..0d32a4fca1b 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -52,6 +52,18 @@ export class AlertRuleList extends React.Component {
+
+ +
@@ -69,8 +81,10 @@ export class AlertRuleList extends React.Component {
-
-
    {alertList.rules.map(rule => )}
+
+
    + {alertList.rules.map(rule => )} +
@@ -108,36 +122,33 @@ export class AlertRuleItem extends React.Component { let ruleUrl = `dashboard/${rule.dashboardUri}?panelId=${rule.panelId}&fullscreen&edit&tab=alert`; return ( -
  • -
    -
    -
  • +
    + + + +
    + -
    -
    -
    - -
    - - {rule.stateText} - - for {rule.stateAge} -
    - {rule.info &&
    {rule.info}
    } +
    + {rule.stateText} + for {rule.stateAge}
    + {rule.info &&
    {rule.info}
    } +
    +
    • ); diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html index bb946817cbd..abc35cef7fb 100644 --- a/public/app/plugins/panel/alertlist/module.html +++ b/public/app/plugins/panel/alertlist/module.html @@ -3,24 +3,22 @@ {{ctrl.noAlertsMessage}} -
    -
      -
    1. -
      -
      -
      - -
      -
      -

      - - {{alert.name}} - -

      -

      - {{alert.stateModel.text}} - for {{alert.newStateDateAgo}} -

      +
      +
        +
      1. +
        +
        + +
        +
        +

        + + {{alert.name}} + +

        +
        + {{alert.stateModel.text}} + for {{alert.newStateDateAgo}}
        @@ -28,30 +26,28 @@
      -
      -
        -
      1. -
        -
        -
        - -
        -
        -

        {{al.alertName}}

        -
        - {{al.stateModel.text}} - {{al.info}} -
        -
        -
        -
        - {{al.time}} - - - -
        -
        -
        2. -
      -
      +
      +
        +
      1. +
        +
        + +
        +
        +

        {{al.alertName}}

        +
        + {{al.stateModel.text}} +
        +
        + {{al.info}} +
        +
        + {{al.time}} + + + +
        +
        2. +
      +
      diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index b20c90cda1c..384af829be6 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -28,69 +28,6 @@ border: 0; } -// Alert List -.alert-list { - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.alert-list-icon { - font-weight: bold; - display: flex; - justify-content: center; - align-items: center; - .icon-gf, - .fa { - font-size: 200%; - position: relative; - top: 2px; - } -} - -.alert-list-body { - display: flex; -} - -.alert-list-main { - padding: 0 2rem; - display: flex; - flex-direction: column; - justify-content: center; -} - -.alert-list-title { - font-size: $font-size-base; - margin: 0; - font-weight: 600; -} - -.alert-list-state { - font-weight: bold; -} - -.alert-list-text { - font-size: $font-size-sm; - margin: 0; - line-height: 1.5rem; - color: $text-color-weak; -} - -.alert-list-info { - color: $text-color; -} - -.alert-list-info-left { - padding-left: 2rem; -} - -.alert-list-footer { - display: flex; - justify-content: space-between; - flex-direction: column; - align-items: flex-end; -} - .panel-has-alert { .panel-alert-icon:before { content: '\e611'; @@ -136,3 +73,100 @@ opacity: 1; } } + +// Alert List +// Alert List + +.alert-rule-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + list-style-type: none; +} + +.alert-rule-item { + display: flex; + justify-content: space-between; + width: 100%; + height: 100%; + background: $card-background; + box-shadow: $card-shadow; + padding: 4px 8px; + border-radius: 4px; + margin-bottom: 4px; +} + +.alert-rule-item__body { + display: flex; + width: 100%; + //flex-grow: 2; +} + +.alert-rule-item__icon { + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; + width: 40px; + .icon-gf, + .fa { + font-size: 200%; + position: relative; + top: 2px; + } +} + +.alert-rule-item__header { + padding: 0 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + //width: 100%; +} + +.alert-rule-item__name { + font-size: $font-size-base; + margin: 0; + font-weight: 600; +} + +.alert-list__btn { + margin: 0 2px; + display: flex; + align-items: center; + justify-content: center; +} + +.alert-rule-item__text { + font-weight: bold; + font-size: $font-size-sm; + margin: 0; +} + +.alert-rule-item__time { + color: $text-color-weak; + font-weight: normal; +} + +.alert-rule-item__info { + //color: $text-color; + font-weight: normal; + flex-grow: 2; + display: flex; + align-items: flex-end; + padding-left: 20px; +} + +.alert-rule-item__footer { + display: flex; + align-items: center; +} + +.alert-list__footer--column { + flex-direction: column; +} + +.alert-tesint { + display: flex; +} From 2248bf437c51bcfb104d4aabd56c6f5309de7ea5 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 4 Jan 2018 15:27:09 +0100 Subject: [PATCH 02/11] added search function --- .../containers/AlertRuleList/AlertRuleList.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 0d32a4fca1b..472909fe511 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -23,6 +23,7 @@ export class AlertRuleList extends React.Component { this.props.nav.load('alerting', 'alert-list'); this.fetchRules(); + this.state = { search: '' }; } onStateFilterChanged = evt => { @@ -44,9 +45,19 @@ export class AlertRuleList extends React.Component { }); }; + onSearchFilter(event) { + this.setState({ search: event.target.value }); + console.log('yo'); + } + render() { const { nav, alertList } = this.props; + let regex = new RegExp(this.state.search, 'ig'); + const filteredAlerts = alertList.rules.filter(alert => { + return regex.test(alert.name) || regex.test(alert.stateText); + }); + return (
      @@ -58,8 +69,8 @@ export class AlertRuleList extends React.Component { type="text" className="gf-form-input width-13" placeholder="Search alert" - value={this.searchQuery} - onChange={this.onQueryUpdated} + value={this.state.search} + onChange={this.onSearchFilter.bind(this)} /> @@ -83,7 +94,7 @@ export class AlertRuleList extends React.Component {
        - {alertList.rules.map(rule => )} + {filteredAlerts.map(rule => )}
      From 5079dcdc6278293f06bb6f4d9c431d5702271bd7 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Fri, 5 Jan 2018 10:34:01 +0100 Subject: [PATCH 03/11] updated jest file and snapshot --- .../AlertRuleList/AlertRuleList.jest.tsx | 2 +- .../__snapshots__/AlertRuleList.jest.tsx.snap | 91 +++++++++---------- 2 files changed, 45 insertions(+), 48 deletions(-) diff --git a/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx b/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx index 1025a7991f6..a12340555e9 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx @@ -45,7 +45,7 @@ describe('AlertRuleList', () => { it('should render 1 rule', () => { page.update(); - let ruleNode = page.find('.card-item-wrapper'); + let ruleNode = page.find('.alert-rule-item'); expect(toJson(ruleNode)).toMatchSnapshot(); }); diff --git a/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap b/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap index b15a8605b7a..ba73331f028 100644 --- a/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap +++ b/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap @@ -2,71 +2,68 @@ exports[`AlertRuleList should render 1 rule 1`] = `
    2. + + + -
      - -
      + - - - - OK - - - for - 5 minutes - -
      + for + 5 minutes +
      +
      3. `; From 3797054eb4e1db0dde14b3dced8ec37abaab8335 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Fri, 5 Jan 2018 14:17:50 +0100 Subject: [PATCH 04/11] made a view of filtered list --- public/app/containers/AlertRuleList/AlertRuleList.tsx | 6 +----- public/app/stores/AlertListStore/AlertListStore.ts | 7 +++++++ 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 472909fe511..39fb0c73749 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -47,16 +47,12 @@ export class AlertRuleList extends React.Component { onSearchFilter(event) { this.setState({ search: event.target.value }); - console.log('yo'); } render() { const { nav, alertList } = this.props; let regex = new RegExp(this.state.search, 'ig'); - const filteredAlerts = alertList.rules.filter(alert => { - return regex.test(alert.name) || regex.test(alert.stateText); - }); return (
      @@ -94,7 +90,7 @@ export class AlertRuleList extends React.Component {
        - {filteredAlerts.map(rule => )} + {alertList.searchFilter(regex).map(rule => )}
      diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts index 78799f6dfd8..10bf9be7fa9 100644 --- a/public/app/stores/AlertListStore/AlertListStore.ts +++ b/public/app/stores/AlertListStore/AlertListStore.ts @@ -31,4 +31,11 @@ export const AlertListStore = types self.rules.push(AlertRule.create(rule)); } }), + })) + .views(self => ({ + searchFilter(regex) { + return self.rules.filter(alert => { + return regex.test(alert.name) || regex.test(alert.stateText); + }); + }, })); From fc6d14127d2b3b854133cda7f0624a8041062947 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Fri, 5 Jan 2018 15:19:25 +0100 Subject: [PATCH 05/11] fixed regex issue --- .../app/containers/AlertRuleList/AlertRuleList.tsx | 2 +- public/app/stores/AlertListStore/AlertListStore.ts | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 39fb0c73749..625d7118879 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -52,7 +52,7 @@ export class AlertRuleList extends React.Component { render() { const { nav, alertList } = this.props; - let regex = new RegExp(this.state.search, 'ig'); + let regex = new RegExp(this.state.search, 'i'); return (
      diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts index 10bf9be7fa9..00d24d2643d 100644 --- a/public/app/stores/AlertListStore/AlertListStore.ts +++ b/public/app/stores/AlertListStore/AlertListStore.ts @@ -10,6 +10,13 @@ export const AlertListStore = types rules: types.array(AlertRule), stateFilter: types.optional(types.string, 'all'), }) + .views(self => ({ + searchFilter(regex) { + return self.rules.filter(alert => { + return regex.test(alert.name) || regex.test(alert.stateText); + }); + }, + })) .actions(self => ({ loadRules: flow(function* load(filters) { const backendSrv = getEnv(self).backendSrv; @@ -31,11 +38,4 @@ export const AlertListStore = types self.rules.push(AlertRule.create(rule)); } }), - })) - .views(self => ({ - searchFilter(regex) { - return self.rules.filter(alert => { - return regex.test(alert.name) || regex.test(alert.stateText); - }); - }, })); From 457a02b9700d0342ab3f3c464e0b9c78e275c515 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Mon, 8 Jan 2018 17:22:44 +0100 Subject: [PATCH 06/11] added highlight to search --- package.json | 1 + .../AlertRuleList/AlertRuleList.tsx | 20 +++++++++++++++---- .../stores/AlertListStore/AlertListStore.ts | 2 +- public/sass/pages/_alerting.scss | 6 ++++++ yarn.lock | 13 +++++++++++- 5 files changed, 36 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index bf3bdf616a7..c792808c865 100644 --- a/package.json +++ b/package.json @@ -149,6 +149,7 @@ "react": "^16.2.0", "react-dom": "^16.2.0", "react-grid-layout": "^0.16.1", + "react-highlight-words": "^0.10.0", "react-sizeme": "^2.3.6", "remarkable": "^1.7.1", "rxjs": "^5.4.3", diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 625d7118879..878ddb367ba 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -5,6 +5,7 @@ import PageHeader from 'app/core/components/PageHeader/PageHeader'; import { IAlertRule } from 'app/stores/AlertListStore/AlertListStore'; import appEvents from 'app/core/app_events'; import IContainerProps from 'app/containers/IContainerProps'; +import Highlighter from 'react-highlight-words'; @inject('view', 'nav', 'alertList') @observer @@ -90,7 +91,9 @@ export class AlertRuleList extends React.Component {
        - {alertList.searchFilter(regex).map(rule => )} + {alertList + .searchFilter(regex) + .map(rule => )}
      @@ -109,6 +112,7 @@ function AlertStateFilterOption({ text, value }) { export interface AlertRuleItemProps { rule: IAlertRule; + search: string; } @observer @@ -117,9 +121,15 @@ export class AlertRuleItem extends React.Component { this.props.rule.togglePaused(); }; + renderText(text: string, searchArray) { + return ; + } + render() { const { rule } = this.props; + const searchArray = [this.props.search]; + let stateClass = classNames({ fa: true, 'fa-play': rule.isPaused, @@ -136,14 +146,16 @@ export class AlertRuleItem extends React.Component {
      - {rule.stateText} + {this.renderText(rule.stateText, searchArray)} for {rule.stateAge}
      - {rule.info &&
      {rule.info}
      } + {rule.info && ( +
      {this.renderText(rule.info, searchArray)}
      + )}
      ({ searchFilter(regex) { return self.rules.filter(alert => { - return regex.test(alert.name) || regex.test(alert.stateText); + return regex.test(alert.name) || regex.test(alert.stateText) || regex.test(alert.info); }); }, })) diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index 384af829be6..500ef102c34 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -170,3 +170,9 @@ .alert-tesint { display: flex; } + +.highlight { + background: orange; + color: $white; + padding: 0; +} diff --git a/yarn.lock b/yarn.lock index 2c54a93aed8..0707f7ce352 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4430,6 +4430,10 @@ header-case@^1.0.0: no-case "^2.2.0" upper-case "^1.1.3" +highlight-words-core@^1.1.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.1.2.tgz#5c2717c4f6c6e7ea2462ab85b43ff8b24f58ec3e" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -7917,7 +7921,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@15.x, prop-types@^15.5.10, prop-types@^15.6.0: +prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -8123,6 +8127,13 @@ react-grid-layout@^0.16.1: react-draggable "^3.0.3" react-resizable "^1.7.5" +react-highlight-words@^0.10.0: + version "0.10.0" + resolved "https://registry.yarnpkg.com/react-highlight-words/-/react-highlight-words-0.10.0.tgz#2e905c76c11635237f848ecad00600f1b6f6f4a8" + dependencies: + highlight-words-core "^1.1.0" + prop-types "^15.5.8" + react-resizable@^1.7.5: version "1.7.5" resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.7.5.tgz#83eb75bb3684da6989bbbf4f826e1470f0af902e" From 8b00e65a83b31cc5735003dc638d1a1189ba3621 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Mon, 8 Jan 2018 17:28:18 +0100 Subject: [PATCH 07/11] styling fix --- public/app/containers/AlertRuleList/AlertRuleList.tsx | 2 +- public/sass/pages/_alerting.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 878ddb367ba..4c1df8a7aae 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -122,7 +122,7 @@ export class AlertRuleItem extends React.Component { }; renderText(text: string, searchArray) { - return ; + return ; } render() { diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index 500ef102c34..052425b11ae 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -171,8 +171,8 @@ display: flex; } -.highlight { - background: orange; +.textHighlight { + background: $orange; color: $white; padding: 0; } From 025835c9bf82a48f2cdce846687a17c8d872ae82 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Mon, 8 Jan 2018 17:43:33 +0100 Subject: [PATCH 08/11] updated snapshot --- .../__snapshots__/AlertRuleList.jest.tsx.snap | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap b/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap index ba73331f028..6c06eb9b3e9 100644 --- a/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap +++ b/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap @@ -23,7 +23,24 @@ exports[`AlertRuleList should render 1 rule 1`] = ` - Panel Title alert + + + + Panel Title alert + + +
      - OK + + + + OK + + + Date: Tue, 9 Jan 2018 13:05:50 +0100 Subject: [PATCH 09/11] moved state handling for search to store --- .../containers/AlertRuleList/AlertRuleList.tsx | 16 +++++++--------- .../app/stores/AlertListStore/AlertListStore.ts | 7 ++++++- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 4c1df8a7aae..69bddfbe593 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -46,15 +46,13 @@ export class AlertRuleList extends React.Component { }); }; - onSearchFilter(event) { - this.setState({ search: event.target.value }); - } + onSearchFilter = evt => { + this.props.alertList.setSearchState(evt.target.value); + }; render() { const { nav, alertList } = this.props; - let regex = new RegExp(this.state.search, 'i'); - return (
      @@ -66,8 +64,8 @@ export class AlertRuleList extends React.Component { type="text" className="gf-form-input width-13" placeholder="Search alert" - value={this.state.search} - onChange={this.onSearchFilter.bind(this)} + value={alertList.search} + onChange={this.onSearchFilter} /> @@ -92,8 +90,8 @@ export class AlertRuleList extends React.Component {
        {alertList - .searchFilter(regex) - .map(rule => )} + .searchFilter() + .map(rule => )}
      diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts index 6beef084ff8..03998ff3065 100644 --- a/public/app/stores/AlertListStore/AlertListStore.ts +++ b/public/app/stores/AlertListStore/AlertListStore.ts @@ -9,9 +9,11 @@ export const AlertListStore = types .model('AlertListStore', { rules: types.array(AlertRule), stateFilter: types.optional(types.string, 'all'), + search: types.optional(types.string, ''), }) .views(self => ({ - searchFilter(regex) { + searchFilter() { + let regex = new RegExp(self.search, 'i'); return self.rules.filter(alert => { return regex.test(alert.name) || regex.test(alert.stateText) || regex.test(alert.info); }); @@ -38,4 +40,7 @@ export const AlertListStore = types self.rules.push(AlertRule.create(rule)); } }), + setSearchState(evt) { + self.search = evt; + }, })); From 48548f064123fe8a74a8883d62f4955a1f9d3215 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Tue, 9 Jan 2018 13:18:16 +0100 Subject: [PATCH 10/11] put this.props.search in the Highlighter --- .../app/containers/AlertRuleList/AlertRuleList.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 69bddfbe593..918b80fcabb 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -119,15 +119,13 @@ export class AlertRuleItem extends React.Component { this.props.rule.togglePaused(); }; - renderText(text: string, searchArray) { - return ; + renderText(text: string) { + return ; } render() { const { rule } = this.props; - const searchArray = [this.props.search]; - let stateClass = classNames({ fa: true, 'fa-play': rule.isPaused, @@ -144,16 +142,14 @@ export class AlertRuleItem extends React.Component {
      - {this.renderText(rule.stateText, searchArray)} + {this.renderText(rule.stateText)} for {rule.stateAge}
      - {rule.info && ( -
      {this.renderText(rule.info, searchArray)}
      - )} + {rule.info &&
      {this.renderText(rule.info)}
      }
      Date: Tue, 9 Jan 2018 15:16:55 +0100 Subject: [PATCH 11/11] naming fixes and added test file --- .../AlertRuleList/AlertRuleList.tsx | 12 ++-- .../AlertListStore/AlertListStore.jest.ts | 65 +++++++++++++++++++ .../stores/AlertListStore/AlertListStore.ts | 6 +- 3 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 public/app/stores/AlertListStore/AlertListStore.jest.ts diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 918b80fcabb..1b0c77acddc 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -46,8 +46,8 @@ export class AlertRuleList extends React.Component { }); }; - onSearchFilter = evt => { - this.props.alertList.setSearchState(evt.target.value); + onSearchQueryChange = evt => { + this.props.alertList.setSearchQuery(evt.target.value); }; render() { @@ -65,7 +65,7 @@ export class AlertRuleList extends React.Component { className="gf-form-input width-13" placeholder="Search alert" value={alertList.search} - onChange={this.onSearchFilter} + onChange={this.onSearchQueryChange} /> @@ -89,9 +89,9 @@ export class AlertRuleList extends React.Component {
        - {alertList - .searchFilter() - .map(rule => )} + {alertList.filteredRules.map(rule => ( + + ))}
      diff --git a/public/app/stores/AlertListStore/AlertListStore.jest.ts b/public/app/stores/AlertListStore/AlertListStore.jest.ts new file mode 100644 index 00000000000..28b32858a39 --- /dev/null +++ b/public/app/stores/AlertListStore/AlertListStore.jest.ts @@ -0,0 +1,65 @@ +import { AlertListStore } from './AlertListStore'; +import { backendSrv } from 'test/mocks/common'; +import moment from 'moment'; + +function getRule(name, state, info) { + return { + id: 11, + dashboardId: 58, + panelId: 3, + name: name, + state: state, + newStateDate: moment() + .subtract(5, 'minutes') + .format(), + evalData: {}, + executionError: '', + dashboardUri: 'db/mygool', + stateText: state, + stateIcon: 'fa', + stateClass: 'asd', + stateAge: '10m', + info: info, + }; +} + +describe('AlertListStore', () => { + let store; + + beforeAll(() => { + store = AlertListStore.create( + { + rules: [ + getRule('Europe', 'OK', 'backend-01'), + getRule('Google', 'ALERTING', 'backend-02'), + getRule('Amazon', 'PAUSED', 'backend-03'), + getRule('West-Europe', 'PAUSED', 'backend-03'), + ], + search: '', + }, + { + backendSrv: backendSrv, + } + ); + }); + + it('search should filter list on name', () => { + store.setSearchQuery('urope'); + expect(store.filteredRules).toHaveLength(2); + }); + + it('search should filter list on state', () => { + store.setSearchQuery('ale'); + expect(store.filteredRules).toHaveLength(1); + }); + + it('search should filter list on info', () => { + store.setSearchQuery('-0'); + expect(store.filteredRules).toHaveLength(4); + }); + + it('search should be equal', () => { + store.setSearchQuery('alert'); + expect(store.search).toBe('alert'); + }); +}); diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts index 03998ff3065..05dd181f41e 100644 --- a/public/app/stores/AlertListStore/AlertListStore.ts +++ b/public/app/stores/AlertListStore/AlertListStore.ts @@ -12,7 +12,7 @@ export const AlertListStore = types search: types.optional(types.string, ''), }) .views(self => ({ - searchFilter() { + get filteredRules() { let regex = new RegExp(self.search, 'i'); return self.rules.filter(alert => { return regex.test(alert.name) || regex.test(alert.stateText) || regex.test(alert.info); @@ -40,7 +40,7 @@ export const AlertListStore = types self.rules.push(AlertRule.create(rule)); } }), - setSearchState(evt) { - self.search = evt; + setSearchQuery(query: string) { + self.search = query; }, }));