From 21e4a946cd24b8a03ea577352f0271ebf7669ffa Mon Sep 17 00:00:00 2001 From: Michael DÜrre Date: Thu, 8 Apr 2021 07:27:18 +0200 Subject: update odlux for notification change MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit update due new notification protocol Issue-ID: CCSDK-3253 Signed-off-by: Michael DÜrre Change-Id: Iad65459fdc18603cd1ddbd97bb2211308744bd8b --- sdnr/wt/odlux/apps/faultApp/package.json | 12 +-- .../src/components/refreshAlarmLogDialog.tsx | 117 +++++++++++++++++++++ .../components/refreshCurrentProblemsDialog.tsx | 117 +++++++++++++++++++++ .../apps/faultApp/src/views/faultApplication.tsx | 103 +++++++++++++----- 4 files changed, 317 insertions(+), 32 deletions(-) create mode 100644 sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx create mode 100644 sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentProblemsDialog.tsx (limited to 'sdnr/wt/odlux/apps/faultApp') 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 & { + mode: RefreshAlarmLogDialogMode; + onClose: () => void; +}; + +type RefreshAlarmLogDialogComponentState = Fault & { isNameValid: boolean, isHostSet: boolean }; + +class RefreshAlarmLogDialogComponent extends React.Component { + constructor(props: RefreshAlarmLogDialogComponentProps) { + super(props); + } + + render(): JSX.Element { + const setting = settings[this.props.mode]; + return ( + + {setting.dialogTitle} + + + {setting.dialogDescription} + + + + + + + + ) + } + + 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 & { + mode: RefreshCurrentProblemsDialogMode; + onClose: () => void; +}; + +type RefreshCurrentProblemsDialogComponentState = Fault & { isNameValid: boolean, isHostSet: boolean }; + +class RefreshCurrentProblemsDialogComponent extends React.Component { + constructor(props: RefreshCurrentProblemsDialogComponentProps) { + super(props); + } + + render(): JSX.Element { + const setting = settings[this.props.mode]; + return ( + + {setting.dialogTitle} + + + {setting.dialogDescription} + + + + + + + + ) + } + + 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 { @@ -127,10 +138,27 @@ class FaultApplicationComponent extends React.Component { + 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 { - activePanelId === 'CurrentProblem' && + activePanelId === 'CurrentProblem' && + <> + + + } {activePanelId === 'AlarmNotifications' && @@ -168,18 +203,24 @@ class FaultApplicationComponent extends React.Component + {activePanelId === 'AlarmLog' && + <> + + + } { @@ -207,6 +248,16 @@ class FaultApplicationComponent extends React.Component { + this.setState({ + refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.None + }); + } + private onCloseRefreshCurrentProblemsDialog = () => { + this.setState({ + refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode.None + }); + } } export const FaultApplication = withRouter(connect(mapProps, mapDisp)(FaultApplicationComponent)); -- cgit 1.2.3-korg