diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/faultApp')
4 files changed, 317 insertions, 32 deletions
diff --git a/sdnr/wt/odlux/apps/faultApp/package.json b/sdnr/wt/odlux/apps/faultApp/package.json index 70952530c..5d1439b85 100644 --- a/sdnr/wt/odlux/apps/faultApp/package.json +++ b/sdnr/wt/odlux/apps/faultApp/package.json @@ -24,17 +24,17 @@ "@odlux/framework": "*" }, "peerDependencies": { - "@types/react": "16.9.19", - "@types/react-dom": "16.9.5", - "@types/react-router-dom": "4.3.1", + "@types/react": "17.0.3", + "@types/react-dom": "17.0.2", + "@types/react-router-dom": "5.1.7", "@material-ui/core": "4.11.0", "@material-ui/icons": "4.9.1", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", "jquery": "3.3.1", - "react": "16.12.0", - "react-dom": "16.12.0", - "react-router-dom": "4.3.1" + "react": "17.0.1", + "react-dom": "17.0.1", + "react-router-dom": "5.2.0" } }
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx new file mode 100644 index 000000000..1d1b34cf2 --- /dev/null +++ b/sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx @@ -0,0 +1,117 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ +import * as React from 'react'; + +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import DialogTitle from '@material-ui/core/DialogTitle'; + +import { alarmLogEntriesReloadAction } from '../handlers/alarmLogEntriesHandler'; +import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; + +import { Fault } from '../models/fault'; + +export enum RefreshAlarmLogDialogMode { + None = "none", + RefreshAlarmLogTable = "RefreshAlarmLogTable", +} + +const mapDispatch = (dispatcher: IDispatcher) => ({ + refreshAlarmLog: () => dispatcher.dispatch(alarmLogEntriesReloadAction) +}); + +type DialogSettings = { + dialogTitle: string, + dialogDescription: string, + applyButtonText: string, + cancelButtonText: string, + enableMountIdEditor: boolean, + enableUsernameEditor: boolean, + enableExtendedEditor: boolean, +} + +const settings: { [key: string]: DialogSettings } = { + [RefreshAlarmLogDialogMode.None]: { + dialogTitle: "", + dialogDescription: "", + applyButtonText: "", + cancelButtonText: "", + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, + [RefreshAlarmLogDialogMode.RefreshAlarmLogTable]: { + dialogTitle: "Do you want to refresh the Alarm Log?", + dialogDescription: "", + applyButtonText: "Yes", + cancelButtonText: "Cancel", + enableMountIdEditor: true, + enableUsernameEditor: true, + enableExtendedEditor: true, + } +} + +type RefreshAlarmLogDialogComponentProps = Connect<undefined, typeof mapDispatch> & { + mode: RefreshAlarmLogDialogMode; + onClose: () => void; +}; + +type RefreshAlarmLogDialogComponentState = Fault & { isNameValid: boolean, isHostSet: boolean }; + +class RefreshAlarmLogDialogComponent extends React.Component<RefreshAlarmLogDialogComponentProps, RefreshAlarmLogDialogComponentState> { + constructor(props: RefreshAlarmLogDialogComponentProps) { + super(props); + } + + render(): JSX.Element { + const setting = settings[this.props.mode]; + return ( + <Dialog open={this.props.mode !== RefreshAlarmLogDialogMode.None}> + <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, "-").toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle> + <DialogContent> + <DialogContentText> + {setting.dialogDescription} + </DialogContentText> + </DialogContent> + <DialogActions> + <Button aria-label="dialog-confirm-button" onClick={(event) => { + this.onRefresh(); + }} > {setting.applyButtonText} </Button> + <Button aria-label="dialog-cancel-button" onClick={(event) => { + this.onCancel(); + }} color="secondary"> {setting.cancelButtonText} </Button> + </DialogActions> + </Dialog> + ) + } + + private onRefresh = () => { + this.props.refreshAlarmLog(); + this.props.onClose(); + }; + + private onCancel = () => { + this.props.onClose(); + } +} + +export const RefreshAlarmLogDialog = connect(undefined, mapDispatch)(RefreshAlarmLogDialogComponent); +export default RefreshAlarmLogDialog;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentProblemsDialog.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentProblemsDialog.tsx new file mode 100644 index 000000000..c49722077 --- /dev/null +++ b/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentProblemsDialog.tsx @@ -0,0 +1,117 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ +import * as React from 'react'; + +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import DialogTitle from '@material-ui/core/DialogTitle'; + +import { currentProblemsReloadAction } from '../handlers/currentProblemsHandler'; +import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; + +import { Fault } from '../models/fault'; + +export enum RefreshCurrentProblemsDialogMode { + None = "none", + RefreshCurrentProblemsTable = "RefreshCurrentProblemsTable", +} + +const mapDispatch = (dispatcher: IDispatcher) => ({ + refreshCurrentProblems: () => dispatcher.dispatch(currentProblemsReloadAction) +}); + +type DialogSettings = { + dialogTitle: string, + dialogDescription: string, + applyButtonText: string, + cancelButtonText: string, + enableMountIdEditor: boolean, + enableUsernameEditor: boolean, + enableExtendedEditor: boolean, +} + +const settings: { [key: string]: DialogSettings } = { + [RefreshCurrentProblemsDialogMode.None]: { + dialogTitle: "", + dialogDescription: "", + applyButtonText: "", + cancelButtonText: "", + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, + [RefreshCurrentProblemsDialogMode.RefreshCurrentProblemsTable]: { + dialogTitle: "Do you want to refresh the Current Problems List?", + dialogDescription: "", + applyButtonText: "Yes", + cancelButtonText: "Cancel", + enableMountIdEditor: true, + enableUsernameEditor: true, + enableExtendedEditor: true, + } +} + +type RefreshCurrentProblemsDialogComponentProps = Connect<undefined, typeof mapDispatch> & { + mode: RefreshCurrentProblemsDialogMode; + onClose: () => void; +}; + +type RefreshCurrentProblemsDialogComponentState = Fault & { isNameValid: boolean, isHostSet: boolean }; + +class RefreshCurrentProblemsDialogComponent extends React.Component<RefreshCurrentProblemsDialogComponentProps, RefreshCurrentProblemsDialogComponentState> { + constructor(props: RefreshCurrentProblemsDialogComponentProps) { + super(props); + } + + render(): JSX.Element { + const setting = settings[this.props.mode]; + return ( + <Dialog open={this.props.mode !== RefreshCurrentProblemsDialogMode.None}> + <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, "-").toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle> + <DialogContent> + <DialogContentText> + {setting.dialogDescription} + </DialogContentText> + </DialogContent> + <DialogActions> + <Button aria-label="dialog-confirm-button" onClick={(event) => { + this.onRefresh(); + }} > {setting.applyButtonText} </Button> + <Button aria-label="dialog-cancel-button" onClick={(event) => { + this.onCancel(); + }} color="secondary"> {setting.cancelButtonText} </Button> + </DialogActions> + </Dialog> + ) + } + + private onRefresh = () => { + this.props.refreshCurrentProblems(); + this.props.onClose(); + }; + + private onCancel = () => { + this.props.onClose(); + } +} + +export const RefreshCurrentProblemsDialog = connect(undefined, mapDispatch)(RefreshCurrentProblemsDialogComponent); +export default RefreshCurrentProblemsDialog;
\ No newline at end of file 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)); |