added highlight to search

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