import React, { PureComponent } from 'react'; // @ts-ignore import Highlighter from 'react-highlight-words'; import classNames from 'classnames'; import { AlertRule } from '../../types'; export interface Props { rule: AlertRule; search: string; onTogglePause: () => void; } class AlertRuleItem extends PureComponent { renderText(text: string) { return ( ); } render() { const { rule, onTogglePause } = this.props; const iconClassName = classNames({ fa: true, 'fa-play': rule.state === 'paused', 'fa-pause': rule.state !== 'paused', }); const ruleUrl = `${rule.url}?panelId=${rule.panelId}&fullscreen&edit&tab=alert`; return (
  • {this.renderText(rule.stateText)} for {rule.stateAge}
    {rule.info &&
    {this.renderText(rule.info)}
    }
  • ); } } export default AlertRuleItem;