problems: able to change font size

src/panel-triggers/components/Problems.tsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import ReactTable from 'react-table';
+import classNames from 'classnames';
 import * as utils from '../../datasource-zabbix/utils';
 import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag } from '../types';
 import EventTag from './EventTag';
@@ -11,6 +12,7 @@ export interface ProblemListProps {
   panelOptions: ProblemsPanelOptions;
   loading?: boolean;
   timeRange?: GFTimeRange;
+  fontSize?: number;
   getProblemEvents: (ids: string[]) => ZBXEvent[];
   onProblemAck?: (problem: Trigger, data: AckProblemData) => void;
   onTagClick?: (tag: ZBXTag, datasource: string) => void;
@@ -99,9 +101,11 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
     // console.log(this.props.problems);
     const columns = this.buildColumns();
     this.rootWidth = this.rootRef && this.rootRef.clientWidth;
+    const { fontSize } = this.props;
+    const panelClass = classNames('panel-problems', { [`font-size--${fontSize}`]: fontSize });
 
     return (
-      <div className="panel-problems" ref={this.setRootRef}>
+      <div className={panelClass} ref={this.setRootRef}>
         <ReactTable
           data={this.props.problems}
           columns={columns}

src/panel-triggers/triggers_panel_ctrl.js

@@ -724,6 +724,9 @@ export class TriggerPanelCtrl extends PanelCtrl {
       const timeFrom = Math.ceil(dateMath.parse(ctrl.range.from) / 1000);
       const timeTo = Math.ceil(dateMath.parse(ctrl.range.to) / 1000);
 
+      const fontSize = parseInt(panel.fontSize.slice(0, panel.fontSize.length - 1));
+      const fontSizeProp = fontSize && fontSize !== 100 ? fontSize : null;
+
       let panelOptions = {};
       for (let prop in PANEL_DEFAULTS) {
         panelOptions[prop] = ctrl.panel[prop];
@@ -733,6 +736,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
         panelOptions,
         timeRange: { timeFrom, timeTo },
         loading: ctrl.loading,
+        fontSize: fontSizeProp,
         getProblemEvents: ctrl.getProblemEvents.bind(ctrl),
         onProblemAck: (trigger, data) => {
           const message = data.message;

src/sass/_panel-problems.scss

@@ -508,6 +508,36 @@
     //   animation: all 1s ease;
     // }
   }
+
+  @for $i from 8 through 9 {
+    .item-#{$i} { width: 2em * $i; }
+    &.font-size--#{$i * 10} .rt-table {
+      font-size: 1% * $i * 10;
+
+      & .rt-tr .rt-td.custom-expander i {
+        font-size: 1.2rem * $i / 10;
+      }
+
+      .problem-details-container.show {
+        font-size: 13px;
+      }
+    }
+  }
+
+  @for $i from 11 through 25 {
+    .item-#{$i} { width: 2em * $i; }
+    &.font-size--#{$i * 10} .rt-table {
+      font-size: 1% * $i * 10;
+
+      & .rt-tr .rt-td.custom-expander i {
+        font-size: 1.2rem * $i / 10;
+      }
+
+      .problem-details-container.show {
+        font-size: 13px;
+      }
+    }
+  }
 }
 
 .zbx-ack-modal {