diff --git a/src/panel-triggers/components/Problems.tsx b/src/panel-triggers/components/Problems.tsx index a53e01c..c89fc6e 100644 --- a/src/panel-triggers/components/Problems.tsx +++ b/src/panel-triggers/components/Problems.tsx @@ -30,7 +30,7 @@ interface ProblemListState { page: number; } -export class ProblemList extends PureComponent { +export default class ProblemList extends PureComponent { rootWidth: number; rootRef: any; diff --git a/src/panel-triggers/options_tab.js b/src/panel-triggers/options_tab.js index e5ac26e..acf7c50 100644 --- a/src/panel-triggers/options_tab.js +++ b/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: 'severity', value: 'priority' } + { text: 'last change', value: 'lastchange' }, + { text: 'severity', value: 'priority' } ]; this.showEventsFields = [ - { text: 'All', value: [0,1] }, - { text: 'OK', value: [0] }, + { text: 'All', value: [0,1] }, + { text: 'OK', value: [0] }, { text: 'Problems', value: 1 } ]; } diff --git a/src/panel-triggers/partials/options_tab.html b/src/panel-triggers/partials/options_tab.html index 59cd979..8c7b590 100644 --- a/src/panel-triggers/partials/options_tab.html +++ b/src/panel-triggers/partials/options_tab.html @@ -37,7 +37,8 @@ checked="ctrl.panel.statusField" on-change="ctrl.render()"> - - -
View options
+
+ +
+ +
+
diff --git a/src/panel-triggers/triggers_panel_ctrl.js b/src/panel-triggers/triggers_panel_ctrl.js index c91bcfc..9b5c691 100644 --- a/src/panel-triggers/triggers_panel_ctrl.js +++ b/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]); } }