Fix problems fetching performance and memory issues (#724)

* request only alert message when invoking alert.get

* fetch problem alerts on demand

* problems panel: refactor

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import moment from 'moment';
 import * as utils from '../../../datasource-zabbix/utils';
-import { ZBXTrigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow, ZBXTag } from '../../types';
+import { ZBXTrigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow, ZBXTag, ZBXAlert } from '../../types';
 import { Modal, AckProblemData } from '../Modal';
 import EventTag from '../EventTag';
 import Tooltip from '../Tooltip/Tooltip';
@@ -15,12 +15,14 @@ interface ProblemDetailsProps extends RTRow<ZBXTrigger> {
   timeRange: GFTimeRange;
   showTimeline?: boolean;
   getProblemEvents: (problem: ZBXTrigger) => Promise<ZBXEvent[]>;
+  getProblemAlerts: (problem: ZBXTrigger) => Promise<ZBXAlert[]>;
   onProblemAck?: (problem: ZBXTrigger, data: AckProblemData) => Promise<any> | any;
   onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
 }
 
 interface ProblemDetailsState {
   events: ZBXEvent[];
+  alerts: ZBXAlert[];
   show: boolean;
   showAckDialog: boolean;
 }
@@ -30,6 +32,7 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
     super(props);
     this.state = {
       events: [],
+      alerts: [],
       show: false,
       showAckDialog: false,
     };
@@ -39,6 +42,7 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
     if (this.props.showTimeline) {
       this.fetchProblemEvents();
     }
+    this.fetchProblemAlerts();
     requestAnimationFrame(() => {
       this.setState({ show: true });
     });
@@ -58,6 +62,14 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
     });
   }
 
+  fetchProblemAlerts() {
+    const problem = this.props.original;
+    this.props.getProblemAlerts(problem)
+    .then(alerts => {
+      this.setState({ alerts });
+    });
+  }
+
   ackProblem = (data: AckProblemData) => {
     const problem = this.props.original as ZBXTrigger;
     return this.props.onProblemAck(problem, data).then(result => {
@@ -78,6 +90,7 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
 
   render() {
     const problem = this.props.original as ZBXTrigger;
+    const alerts = this.state.alerts;
     const rootWidth = this.props.rootWidth;
     const displayClass = this.state.show ? 'show' : '';
     const wideLayout = rootWidth > 1200;
@@ -96,7 +109,7 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
               </div>
               {problem.items && <ProblemItems items={problem.items} />}
             </div>
-            <ProblemStatusBar problem={problem} className={compactStatusBar && 'compact'} />
+            <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
             <div className="problem-actions">
               <ProblemActionButton className="navbar-button navbar-button--settings"
                 icon="reply-all"

src/panel-triggers/components/Problems/ProblemStatusBar.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import FAIcon from '../FAIcon';
 import Tooltip from '../Tooltip/Tooltip';
-import { ZBXTrigger } from '../../types';
+import { ZBXTrigger, ZBXAlert } from '../../types';
 
 export interface ProblemStatusBarProps {
   problem: ZBXTrigger;
+  alerts?: ZBXAlert[];
   className?: string;
 }
 
 export default function ProblemStatusBar(props: ProblemStatusBarProps) {
-  const { problem, className } = props;
+  const { problem, alerts, className } = props;
   const multiEvent = problem.type === '1';
   const link = problem.url && problem.url !== '';
   const maintenance = problem.maintenance;
@@ -17,8 +18,8 @@ export default function ProblemStatusBar(props: ProblemStatusBarProps) {
   const error = problem.error && problem.error !== '';
   const stateUnknown = problem.state === '1';
   const closeByTag = problem.correlation_mode === '1';
-  const actions = problem.alerts && problem.alerts.length !== 0;
-  const actionMessage = problem.alerts ? problem.alerts[0].message : '';
+  const actions = alerts && alerts.length !== 0;
+  const actionMessage = actions ? alerts[0].message : '';
 
   return (
     <div className={`problem-statusbar ${className || ''}`}>

src/panel-triggers/components/Problems/Problems.tsx

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import * as utils from '../../../datasource-zabbix/utils';
 import { isNewProblem } from '../../utils';
-import { ProblemsPanelOptions, ZBXTrigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, TriggerSeverity, RTResized } from '../../types';
+import { ProblemsPanelOptions, ZBXTrigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, TriggerSeverity, RTResized, ZBXAlert } from '../../types';
 import EventTag from '../EventTag';
 import ProblemDetails from './ProblemDetails';
 import { AckProblemData } from '../Modal';
@@ -18,7 +18,8 @@ export interface ProblemListProps {
   timeRange?: GFTimeRange;
   pageSize?: number;
   fontSize?: number;
-  getProblemEvents: (ids: string[]) => ZBXEvent[];
+  getProblemEvents: (problem: ZBXTrigger) => ZBXEvent[];
+  getProblemAlerts: (problem: ZBXTrigger) => ZBXAlert[];
   onProblemAck?: (problem: ZBXTrigger, data: AckProblemData) => void;
   onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
   onPageSizeChange?: (pageSize: number, pageIndex: number) => void;
@@ -159,6 +160,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
               timeRange={this.props.timeRange}
               showTimeline={panelOptions.problemTimeline}
               getProblemEvents={this.props.getProblemEvents}
+              getProblemAlerts={this.props.getProblemAlerts}
               onProblemAck={this.handleProblemAck}
               onTagClick={this.handleTagClick}
             />