problems: add layout options

src/panel-triggers/components/Problems.tsx

@@ -30,7 +30,7 @@ interface ProblemListState {
   page: number;
 }
 
-export class ProblemList extends PureComponent<ProblemListProps, ProblemListState> {
+export default class ProblemList extends PureComponent<ProblemListProps, ProblemListState> {
   rootWidth: number;
   rootRef: any;
 

src/panel-triggers/options_tab.js

@@ -19,6 +19,10 @@ class TriggerPanelOptionsCtrl {
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
 
+    this.layouts = [
+      { text: 'Table', value: 'table' },
+      { text: 'List',  value: 'list' }
+    ];
     this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
     this.ackFilters = [
       'all triggers',
@@ -26,12 +30,12 @@ class TriggerPanelOptionsCtrl {
       'acknowledged'
     ];
     this.sortByFields = [
-      { text: 'last change',  value: 'lastchange' },
+      { text: 'last change', value: 'lastchange' },
-      { text: 'severity',     value: 'priority' }
+      { text: 'severity',    value: 'priority' }
     ];
     this.showEventsFields = [
-      { text: 'All',     value: [0,1] },
+      { text: 'All',      value: [0,1] },
-      { text: 'OK',      value: [0] },
+      { text: 'OK',       value: [0] },
       { text: 'Problems', value: 1 }
     ];
   }

src/panel-triggers/partials/options_tab.html

@@ -37,7 +37,8 @@
       checked="ctrl.panel.statusField"
       on-change="ctrl.render()">
     </gf-form-switch>
-    <gf-form-switch class="gf-form"
+    <gf-form-switch ng-if="ctrl.panel.layout === 'table'"
+      class="gf-form"
       label-class="width-9"
       label="Status Icon"
       checked="ctrl.panel.statusIcon"
@@ -55,13 +56,15 @@
       checked="ctrl.panel.ageField"
       on-change="ctrl.render()">
     </gf-form-switch>
-    <gf-form-switch class="gf-form"
+    <gf-form-switch ng-if="ctrl.panel.layout === 'list'"
+      class="gf-form"
       label-class="width-9"
       label="Description"
       checked="ctrl.panel.descriptionField"
       on-change="ctrl.render()">
     </gf-form-switch>
-    <gf-form-switch class="gf-form" ng-if="ctrl.panel.descriptionField"
+    <gf-form-switch ng-if="ctrl.panel.descriptionField && ctrl.panel.layout === 'list'"
+      class="gf-form"
       label-class="width-9"
       label="At the new line"
       checked="ctrl.panel.descriptionAtNewLine"
@@ -118,6 +121,15 @@
 
   <div class="section gf-form-group">
     <h5 class="section-heading">View options</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-10">Layout</label>
+      <div class="gf-form-select-wrapper max-width-8">
+        <select class="gf-form-input"
+          ng-model="ctrl.panel.layout"
+          ng-options="opt.value as opt.text for opt in editor.layouts"
+          ng-change="ctrl.render()"></select>
+      </div>
+    </div>
     <div class="gf-form">
       <label class="gf-form-label width-10">Font size</label>
       <div class="gf-form-select-wrapper max-width-8">

src/panel-triggers/triggers_panel_ctrl.js

@@ -9,7 +9,7 @@ import { PanelCtrl } from 'grafana/app/plugins/sdk';
 import { triggerPanelOptionsTab } from './options_tab';
 import { triggerPanelTriggersTab } from './triggers_tab';
 import { migratePanelSchema, CURRENT_SCHEMA_VERSION } from './migrations';
-import { ProblemList } from './components/Problems';
+import ProblemList from './components/Problems';
 import AlertList from './components/AlertList/AlertList';
 
 const ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
@@ -55,9 +55,10 @@ export const PANEL_DEFAULTS = {
   hostsInMaintenance: true,
   showTriggers: 'all triggers',
   sortTriggersBy: { text: 'last change', value: 'lastchange' },
-  showEvents: { text: 'Problems', value: '1' },
+  showEvents: { text: 'Problems', value: 1 },
   limit: 100,
   // View options
+  layout: 'table',
   fontSize: '100%',
   pageSize: 10,
   highlightBackground: false,
@@ -637,8 +638,13 @@ export class TriggerPanelCtrl extends PanelCtrl {
           ctrl.addTagFilter(tag, datasource);
         }
       };
-      // const problemsReactElem = React.createElement(ProblemList, problemsListProps);
+
-      const problemsReactElem = React.createElement(AlertList, problemsListProps);
+      let problemsReactElem;
+      if (panel.layout === 'list') {
+        problemsReactElem = React.createElement(AlertList, problemsListProps);
+      } else {
+        problemsReactElem = React.createElement(ProblemList, problemsListProps);
+      }
       ReactDOM.render(problemsReactElem, elem.find('.panel-content')[0]);
     }
   }