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