diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/faultApp/src/views')
-rw-r--r-- | sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx | 103 |
1 files changed, 77 insertions, 26 deletions
diff --git a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx index 2c167c5b2..d313a2048 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx +++ b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx @@ -35,8 +35,12 @@ import { createCurrentProblemsProperties, createCurrentProblemsActions, currentP import { createAlarmLogEntriesProperties, createAlarmLogEntriesActions, alarmLogEntriesReloadAction } from '../handlers/alarmLogEntriesHandler'; import { setPanelAction } from '../actions/panelChangeActions'; import { Tooltip, IconButton, AppBar, Tabs, Tab } from '@material-ui/core'; -import RefreshIcon from '@material-ui/icons/Refresh'; +import Sync from '@material-ui/icons/Sync'; +import Refresh from '@material-ui/icons/Refresh'; + import ClearStuckAlarmsDialog, { ClearStuckAlarmsDialogMode } from '../components/clearStuckAlarmsDialog'; +import RefreshAlarmLogDialog, { RefreshAlarmLogDialogMode } from '../components/refreshAlarmLogDialog'; +import RefreshCurrentProblemsDialog, { RefreshCurrentProblemsDialogMode } from '../components/refreshCurrentProblemsDialog'; import { SetPartialUpdatesAction } from '../actions/partialUpdatesAction'; const mapProps = (state: IApplicationStoreState) => ({ @@ -61,7 +65,9 @@ type FaultApplicationComponentProps = RouteComponentProps & Connect<typeof mapPr type FaultApplicationState = { clearAlarmDialogMode: ClearStuckAlarmsDialogMode, - stuckAlarms: string[] + stuckAlarms: string[], + refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode, + refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode } @@ -78,7 +84,12 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen */ constructor(props: FaultApplicationComponentProps) { super(props); - this.state = { clearAlarmDialogMode: ClearStuckAlarmsDialogMode.None, stuckAlarms: [] } + this.state = { + clearAlarmDialogMode: ClearStuckAlarmsDialogMode.None, + stuckAlarms: [], + refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.None, + refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode.None + } } onDialogClose = () => { @@ -127,10 +138,27 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen render(): JSX.Element { const refreshButton = { - icon: RefreshIcon, tooltip: 'Clear stuck alarms', onClick: this.onDialogOpen + icon: Sync, tooltip: 'Clear stuck alarms', onClick: this.onDialogOpen + }; + + const refreshCurrentProblemsAction = { + icon: Refresh, tooltip: 'Refresh Current Problems List', onClick: () => { + this.setState({ + refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode.RefreshCurrentProblemsTable + }); + } + }; + + const refreshAlarmLogAction = { + icon: Refresh, tooltip: 'Refresh Alarm log table', onClick: () => { + this.setState({ + refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.RefreshAlarmLogTable + }); + } }; + const areFaultsAvailable = this.props.currentProblemsProperties.rows && this.props.currentProblemsProperties.rows.length > 0 - const customAction = areFaultsAvailable ? [refreshButton] : []; + const customActions = areFaultsAvailable ? [refreshButton, refreshCurrentProblemsAction] : [refreshCurrentProblemsAction]; const { panelId: activePanelId } = this.props; @@ -144,15 +172,22 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen </Tabs> </AppBar> { - activePanelId === 'CurrentProblem' && <FaultTable stickyHeader tableId="current-problems-table" idProperty={'id'} customActionButtons={customAction} columns={[ - { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, - { property: "timestamp", type: ColumnType.text, title: "Timestamp" }, - { 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} /> + activePanelId === 'CurrentProblem' && + <> + <FaultTable stickyHeader tableId="current-problems-table" idProperty={'id'} customActionButtons={customActions} columns={[ + { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, + { property: "timestamp", type: ColumnType.text, title: "Timestamp" }, + { 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} /> + <RefreshCurrentProblemsDialog + mode={this.state.refreshCurrentProblemsEditorMode} + onClose={this.onCloseRefreshCurrentProblemsDialog} + /> + </> } {activePanelId === 'AlarmNotifications' && @@ -168,18 +203,24 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen } - {activePanelId === 'AlarmLog' && - <FaultTable stickyHeader idProperty={'id'} tableId="alarm-log-table" - columns={[ - { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, - { property: "timestamp", title: "Timestamp" }, - { 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" }, - { property: "sourceType", title: "Source", width: "140px" }, - ]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} /> + {activePanelId === 'AlarmLog' && + <> + <FaultTable stickyHeader idProperty={'id'} tableId="alarm-log-table" customActionButtons={[refreshAlarmLogAction]} + columns={[ + { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, + { property: "timestamp", title: "Timestamp" }, + { 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" }, + { property: "sourceType", title: "Source", width: "140px" }, + ]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} /> + <RefreshAlarmLogDialog + mode={this.state.refreshAlarmLogEditorMode} + onClose={this.onCloseRefreshAlarmLogDialog} + /> + </> } { @@ -207,6 +248,16 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen ); }; + private onCloseRefreshAlarmLogDialog = () => { + this.setState({ + refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.None + }); + } + private onCloseRefreshCurrentProblemsDialog = () => { + this.setState({ + refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode.None + }); + } } export const FaultApplication = withRouter(connect(mapProps, mapDisp)(FaultApplicationComponent)); |