sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx

   1 import * as React from 'react';
   2
   3 import { withRouter, RouteComponentProps } from 'react-router-dom';
   4
   5 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
   6 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
   7
   8 import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
   9 import { Panel } from '../../../../framework/src/components/material-ui';
  10
  11 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  12 import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
  13
  14 import { Fault } from '../models/fault';
  15 import { PanelId } from '../models/panelId';
  16
  17 import { createCurrentProblemsProperties, createCurrentProblemsActions, currentProblemsReloadAction } from '../handlers/currentProblemsHandler';
  18 import { createAlarmLogEntriesProperties, createAlarmLogEntriesActions, alarmLogEntriesReloadAction } from '../handlers/alarmLogEntriesHandler';
  19 import { SetPanelAction } from '../actions/panelChangeActions';
  20
  21 const mapProps = (state: IApplicationStoreState) => ({
  22   activePanel: state.fault.currentOpenPanel,
  23   currentProblemsProperties: createCurrentProblemsProperties(state),
  24   faultNotifications: state.fault.faultNotifications,
  25   alarmLogEntriesProperties: createAlarmLogEntriesProperties(state)
  26 });
  27
  28 const mapDisp = (dispatcher: IDispatcher) => ({
  29   currentProblemsActions: createCurrentProblemsActions(dispatcher.dispatch),
  30   alarmLogEntriesActions: createAlarmLogEntriesActions(dispatcher.dispatch),
  31   reloadCurrentProblems: () => dispatcher.dispatch(currentProblemsReloadAction),
  32   reloadAlarmLogEntries: () => dispatcher.dispatch(alarmLogEntriesReloadAction),
  33   setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId))
  34 });
  35
  36 type FaultApplicationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp>;
  37
  38
  39 const FaultTable = MaterialTable as MaterialTableCtorType<Fault>;
  40
  41 class FaultApplicationComponent extends React.Component<FaultApplicationComponentProps>{
  42
  43   render(): JSX.Element {
  44
  45     const { activePanel } = this.props;
  46
  47     const onTogglePanel = (panelId: PanelId) => {
  48       const nextActivePanel = panelId === this.props.activePanel ? null : panelId;
  49       this.props.setCurrentPanel(nextActivePanel);
  50
  51       switch (nextActivePanel) {
  52         case 'CurrentProblem':
  53           this.props.reloadCurrentProblems();
  54           break;
  55         case 'AlarmLog':
  56           this.props.reloadAlarmLogEntries();
  57           break;
  58         case 'AlarmNotifications':
  59         case null:
  60         default:
  61           // nothing to do
  62           break;
  63       }
  64     };
  65
  66     return (
  67       <>
  68         <Panel activePanel={ activePanel } panelId={ 'CurrentProblem' } onToggle={ onTogglePanel } title={ 'Current Problem List' }>
  69           <FaultTable idProperty={ '_id' }  columns={ [
  70               { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
  71               { property: "timeStamp", type: ColumnType.text, title: "Time Stamp" },
  72               { property: "nodeName", title: "Node Name", type: ColumnType.text },
  73               { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
  74               { property: "objectId", title: "Object Id", type: ColumnType.text } ,
  75               { property: "problem", title: "Alarm Type", type: ColumnType.text },
  76               { property: "severity", title: "Severity", type: ColumnType.text, width: "140px" },
  77               ] } { ...this.props.currentProblemsProperties } { ...this.props.currentProblemsActions }  />
  78         </Panel>
  79         <Panel activePanel={ activePanel } panelId={ 'AlarmNotifications' } onToggle={ onTogglePanel } title={ `Alarm Notifications ${this.props.faultNotifications.faults.length} since ${this.props.faultNotifications.since}` }>
  80           <FaultTable rows={ this.props.faultNotifications.faults } asynchronus columns={ [
  81             { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
  82             { property: "timeStamp", title: "Time Stamp" },
  83             { property: "nodeName", title: "Node Name" },
  84             { property: "counter", title: "Count", width: "100px" },
  85             { property: "objectId", title: "Object Id" },
  86             { property: "problem", title: "Alarm Type" },
  87             { property: "severity", title: "Severity", width: "140px" },
  88             ] } idProperty={ '_id' } />
  89         </Panel>
  90         <Panel activePanel={ activePanel } panelId={ 'AlarmLog' } onToggle={ onTogglePanel } title={ 'Alarm Log' }>
  91           <FaultTable idProperty={ '_id' } columns={ [
  92             { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
  93             { property: "timeStamp", title: "Time Stamp" },
  94             { property: "nodeName", title: "Node Name" },
  95             { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
  96             { property: "objectId", title: "Object Id" },
  97             { property: "problem", title: "Alarm Type" },
  98             { property: "severity", title: "Severity", width: "140px" },
  99           ] } { ...this.props.alarmLogEntriesProperties } { ...this.props.alarmLogEntriesActions }/>
 100          </Panel>
 101       </>
 102     );
 103   };
 104
 105   private renderIcon = (props: { rowData: Fault }) => {
 106     return (
 107       <FontAwesomeIcon icon={ faExclamationTriangle } />
 108     );
 109   };
 110
 111 }
 112
 113 export const FaultApplication = withRouter(connect(mapProps, mapDisp)(FaultApplicationComponent));
 114 export default FaultApplication;