aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/faultApp
diff options
context:
space:
mode:
authorMichael DÜrre <michael.duerre@highstreet-technologies.com>2021-04-08 07:27:18 +0200
committerMichael DÜrre <michael.duerre@highstreet-technologies.com>2021-04-08 07:27:28 +0200
commit21e4a946cd24b8a03ea577352f0271ebf7669ffa (patch)
tree4227d8566770b75c2c25b67c764038288cacfe3d /sdnr/wt/odlux/apps/faultApp
parenta252be83694ae33260d99d5371ed48c1558aa2e8 (diff)
update odlux for notification change
update due new notification protocol Issue-ID: CCSDK-3253 Signed-off-by: Michael DÜrre <michael.duerre@highstreet-technologies.com> Change-Id: Iad65459fdc18603cd1ddbd97bb2211308744bd8b
Diffstat (limited to 'sdnr/wt/odlux/apps/faultApp')
-rw-r--r--sdnr/wt/odlux/apps/faultApp/package.json12
-rw-r--r--sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx117
-rw-r--r--sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentProblemsDialog.tsx117
-rw-r--r--sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx103
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));