From 457a02b9700d0342ab3f3c464e0b9c78e275c515 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Mon, 8 Jan 2018 17:22:44 +0100
Subject: [PATCH] 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<IContainerProps, any> {
 
           <section>
             <ol className="alert-rule-list">
-              {alertList.searchFilter(regex).map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}
+              {alertList
+                .searchFilter(regex)
+                .map(rule => <AlertRuleItem rule={rule} key={rule.id} search={this.state.search} />)}
             </ol>
           </section>
         </div>
@@ -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<AlertRuleItemProps, any> {
     this.props.rule.togglePaused();
   };
 
+  renderText(text: string, searchArray) {
+    return <Highlighter highlightClassName="highlight" textToHighlight={text} searchWords={searchArray} />;
+  }
+
   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<AlertRuleItemProps, any> {
           </span>
           <div className="alert-rule-item__header">
             <div className="alert-rule-item__name">
-              <a href={ruleUrl}>{rule.name}</a>
+              <a href={ruleUrl}>{this.renderText(rule.name, searchArray)}</a>
             </div>
             <div className="alert-rule-item__text">
-              <span className={`${rule.stateClass}`}>{rule.stateText}</span>
+              <span className={`${rule.stateClass}`}>{this.renderText(rule.stateText, searchArray)}</span>
               <span className="alert-rule-item__time"> for {rule.stateAge}</span>
             </div>
           </div>
-          {rule.info && <div className="small muted alert-rule-item__info">{rule.info}</div>}
+          {rule.info && (
+            <div className="small muted alert-rule-item__info">{this.renderText(rule.info, searchArray)}</div>
+          )}
         </div>
         <div className="alert-rule-item__footer">
           <a
diff --git a/public/app/stores/AlertListStore/AlertListStore.ts b/public/app/stores/AlertListStore/AlertListStore.ts
index 00d24d2643d..6beef084ff8 100644
--- a/public/app/stores/AlertListStore/AlertListStore.ts
+++ b/public/app/stores/AlertListStore/AlertListStore.ts
@@ -13,7 +13,7 @@ export const AlertListStore = types
   .views(self => ({
     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"