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

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));