diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx | 89 |
1 files changed, 65 insertions, 24 deletions
diff --git a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx index 9faa3566b..fd1c48ac5 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx +++ b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx @@ -28,12 +28,15 @@ 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 { Fault, FaultAlarmNotification } 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'; +import { Tooltip, IconButton } from '@material-ui/core'; +import RefreshIcon from '@material-ui/icons/Refresh'; +import ClearStuckAlarmsDialog, { ClearStuckAlarmsDialogMode } from '../components/clearStuckAlarmsDialog'; const mapProps = (state: IApplicationStoreState) => ({ activePanel: state.fault.currentOpenPanel, @@ -47,18 +50,50 @@ const mapDisp = (dispatcher: IDispatcher) => ({ alarmLogEntriesActions: createAlarmLogEntriesActions(dispatcher.dispatch), reloadCurrentProblems: () => dispatcher.dispatch(currentProblemsReloadAction), reloadAlarmLogEntries: () => dispatcher.dispatch(alarmLogEntriesReloadAction), - setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)) + setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)), }); type FaultApplicationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp>; +type FaultApplicationState = { + clearAlarmDialogMode: ClearStuckAlarmsDialogMode, + stuckAlarms: string[] +} + const FaultTable = MaterialTable as MaterialTableCtorType<Fault>; +const FaultAlarmNotificationTable = MaterialTable as MaterialTableCtorType<FaultAlarmNotification>; + + +class FaultApplicationComponent extends React.Component<FaultApplicationComponentProps, FaultApplicationState>{ + + /** + * + */ + constructor(props: FaultApplicationComponentProps) { + super(props); + this.state = { clearAlarmDialogMode: ClearStuckAlarmsDialogMode.None, stuckAlarms: [] } + } + + onDialogClose = () => { + this.setState({ clearAlarmDialogMode: ClearStuckAlarmsDialogMode.None, stuckAlarms: [] }) + } + + onDialogOpen = () => { + const stuckAlarms = [...new Set(this.props.currentProblemsProperties.rows.map(item => item.nodeId))]; + this.setState({ clearAlarmDialogMode: ClearStuckAlarmsDialogMode.Show, stuckAlarms: stuckAlarms }) + } + -class FaultApplicationComponent extends React.Component<FaultApplicationComponentProps>{ render(): JSX.Element { + const refreshButton = { + icon: RefreshIcon, tooltip: 'Clear stuck alarms', onClick: this.onDialogOpen + }; + const areFaultsAvailable = this.props.currentProblemsProperties.rows && this.props.currentProblemsProperties.rows.length > 0 + const customAction = areFaultsAvailable ? [refreshButton] : []; + const { activePanel } = this.props; const onTogglePanel = (panelId: PanelId) => { @@ -82,19 +117,19 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen 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 activePanel={activePanel} panelId={'CurrentProblem'} onToggle={onTogglePanel} title={'Current Problem List'}> + <FaultTable idProperty={'id'} customActionButtons={customAction} columns={[ + { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, + { property: "timestamp", type: ColumnType.text, title: "Time Stamp" }, + { property: "nodeId", 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} since ${this.props.faultNotifications.since}` }> - <FaultTable rows={ this.props.faultNotifications.faults } asynchronus columns={ [ + <Panel activePanel={activePanel} panelId={'AlarmNotifications'} onToggle={onTogglePanel} title={`Alarm Notifications ${this.props.faultNotifications.faults.length} since ${this.props.faultNotifications.since}`}> + <FaultAlarmNotificationTable 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" }, @@ -102,19 +137,25 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen { property: "objectId", title: "Object Id" }, { property: "problem", title: "Alarm Type" }, { property: "severity", title: "Severity", width: "140px" }, - ] } idProperty={ '_id' } /> + ]} idProperty={'id'} /> </Panel> - <Panel activePanel={ activePanel } panelId={ 'AlarmLog' } onToggle={ onTogglePanel } title={ 'Alarm Log' }> - <FaultTable idProperty={ '_id' } columns={ [ + <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: "timestamp", title: "Time Stamp" }, + { property: "nodeId", 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> + { property: "sourceType", title: "Source", width: "140px" }, + ]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} /> + </Panel> + { + this.state.clearAlarmDialogMode !== ClearStuckAlarmsDialogMode.None && <ClearStuckAlarmsDialog mode={this.state.clearAlarmDialogMode} numberDevices={this.state.stuckAlarms.length} stuckAlarms={this.state.stuckAlarms} onClose={this.onDialogClose} /> + + } + </> ); }; @@ -123,9 +164,9 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen this.props.alarmLogEntriesActions.onToggleFilter(); this.props.currentProblemsActions.onToggleFilter(); } - private renderIcon = (props: { rowData: Fault }) => { + private renderIcon = (props: { rowData: Fault | FaultAlarmNotification }) => { return ( - <FontAwesomeIcon icon={ faExclamationTriangle } /> + <FontAwesomeIcon icon={faExclamationTriangle} /> ); }; |