problems: make timeline optional

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

@@ -13,6 +13,7 @@ import FAIcon from '../FAIcon';
 interface ProblemDetailsProps extends RTRow<ZBXTrigger> {
   rootWidth: number;
   timeRange: GFTimeRange;
+  showTimeline?: boolean;
   getProblemEvents: (problem: ZBXTrigger) => Promise<ZBXEvent[]>;
   onProblemAck?: (problem: ZBXTrigger, data: AckProblemData) => Promise<any> | any;
   onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
@@ -35,7 +36,9 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
   }
 
   componentDidMount() {
-    this.fetchProblemEvents();
+    if (this.props.showTimeline) {
+      this.fetchProblemEvents();
+    }
     requestAnimationFrame(() => {
       this.setState({ show: true });
     });
@@ -119,7 +122,7 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
               }
             </div>
           }
-          {this.state.events.length > 0 &&
+          {this.props.showTimeline && this.state.events.length > 0 &&
             <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange} />
           }
           {showAcknowledges && !wideLayout &&

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

@@ -157,6 +157,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
             <ProblemDetails {...props}
               rootWidth={this.rootWidth}
               timeRange={this.props.timeRange}
+              showTimeline={panelOptions.problemTimeline}
               getProblemEvents={this.props.getProblemEvents}
               onProblemAck={this.handleProblemAck}
               onTagClick={this.handleTagClick}

src/panel-triggers/partials/options_tab.html

@@ -146,6 +146,13 @@
         ng-model="ctrl.panel.pageSize"
         ng-model-onblur ng-change="ctrl.render()">
     </div>
+    <gf-form-switch ng-if="ctrl.panel.layout === 'table'"
+      class="gf-form"
+      label-class="width-10"
+      label="Problem timeline"
+      checked="ctrl.panel.problemTimeline"
+      on-change="ctrl.render()">
+    </gf-form-switch>
     <gf-form-switch class="gf-form"
       label-class="width-10"
       label="Highlight background"

src/panel-triggers/triggers_panel_ctrl.js

@@ -64,6 +64,7 @@ export const PANEL_DEFAULTS = {
   layout: 'table',
   fontSize: '100%',
   pageSize: 10,
+  problemTimeline: true,
   highlightBackground: false,
   highlightNewEvents: false,
   highlightNewerThan: '1h',

src/panel-triggers/types.ts

@@ -29,6 +29,7 @@ export interface ProblemsPanelOptions {
   // View options
   fontSize?: string;
   pageSize?: number;
+  problemTimeline?: boolean;
   highlightBackground?: boolean;
   highlightNewEvents?: boolean;
   highlightNewerThan?: string;