added highlight to search

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",

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

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);
       });
     },
   }))

public/sass/pages/_alerting.scss

@@ -170,3 +170,9 @@
 .alert-tesint {
   display: flex;
 }
+
+.highlight {
+  background: orange;
+  color: $white;
+  padding: 0;
+}

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"