From 15e2d3a29b0d1a304965e34f114a911e5a7abdb3 Mon Sep 17 00:00:00 2001
From: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Date: Mon, 20 Mar 2023 08:05:47 +0100
Subject: Odlux Update

Add eslint and custom icons update

Issue-ID: CCSDK-3871
Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586
Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>
---
 .../src/actions/maintenenceActions.ts              |  34 ++-
 .../src/assets/icons/maintenanceAppIcon.svg        |  50 ++++
 .../src/components/editMaintenenceEntryDialog.tsx  | 103 +++++----
 .../src/components/refreshMaintenanceEntries.tsx   |  62 +++--
 .../src/handlers/maintenanceAppRootHandler.ts      |  10 +-
 .../src/handlers/maintenanceEntriesHandler.ts      |  35 +++
 .../src/handlers/maintenenceEntriesHandler.ts      |  35 ---
 .../src/models/maintenanceEntryType.ts             |  33 +++
 .../src/models/maintenenceEntryType.ts             |  33 ---
 .../apps/maintenanceApp/src/pluginMaintenance.tsx  |  18 +-
 .../src/services/maintenenceService.ts             |  46 ++--
 .../apps/maintenanceApp/src/utils/timeUtils.ts     |   4 +-
 .../maintenanceApp/src/views/maintenanceView.tsx   | 246 ++++++++++++++++++++
 .../maintenanceApp/src/views/maintenenceView.tsx   | 254 ---------------------
 14 files changed, 500 insertions(+), 463 deletions(-)
 create mode 100644 sdnr/wt/odlux/apps/maintenanceApp/src/assets/icons/maintenanceAppIcon.svg
 create mode 100644 sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenanceEntriesHandler.ts
 delete mode 100644 sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenenceEntriesHandler.ts
 create mode 100644 sdnr/wt/odlux/apps/maintenanceApp/src/models/maintenanceEntryType.ts
 delete mode 100644 sdnr/wt/odlux/apps/maintenanceApp/src/models/maintenenceEntryType.ts
 create mode 100644 sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenanceView.tsx
 delete mode 100644 sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx

(limited to 'sdnr/wt/odlux/apps/maintenanceApp/src')

diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/actions/maintenenceActions.ts b/sdnr/wt/odlux/apps/maintenanceApp/src/actions/maintenenceActions.ts
index 162d94367..740abff85 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/actions/maintenenceActions.ts
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/actions/maintenenceActions.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 /**
  * ============LICENSE_START========================================================================
  * ONAP : ccsdk feature sdnr wt odlux
@@ -15,16 +16,13 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
+import { AddSnackbarNotification } from '../../../../framework/src/actions/snackbarActions';
 import { Action } from '../../../../framework/src/flux/action';
 import { Dispatch } from '../../../../framework/src/flux/store';
-import { MaintenenceEntry, spoofSymbol } from '../models/maintenenceEntryType';
-
-import { AddSnackbarNotification } from '../../../../framework/src/actions/snackbarActions';
-import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-
 
+import { maintenanceEntriesReloadAction } from '../handlers/maintenanceEntriesHandler';
+import { MaintenanceEntry, spoofSymbol } from '../models/maintenanceEntryType';
 import { maintenenceService } from '../services/maintenenceService';
-import { maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler';
 
 export class BaseAction extends Action { }
 
@@ -32,7 +30,7 @@ export class LoadAllMainteneceEntriesAction extends BaseAction { }
 
 export class AllMainteneceEntriesLoadedAction extends BaseAction {
 
-  constructor (public maintenenceEntries: MaintenenceEntry[] | null, error?:string) {
+  constructor(public maintenenceEntries: MaintenanceEntry[] | null) {
     super();
 
   }
@@ -40,39 +38,39 @@ export class AllMainteneceEntriesLoadedAction extends BaseAction {
 
 
 export class UpdateMaintenanceEntry extends BaseAction {
-  constructor(public maintenenceEntry: MaintenenceEntry) {
+  constructor(public maintenenceEntry: MaintenanceEntry) {
     super();
   }
 }
 
 /** Represents an async thunk action creator to add an element to the maintenence entries. */
-export const addOrUpdateMaintenenceEntryAsyncActionCreator = (entry: MaintenenceEntry) => (dispatch: Dispatch) => {
+export const addOrUpdateMaintenenceEntryAsyncActionCreator = (entry: MaintenanceEntry) => (dispatch: Dispatch) => {
   maintenenceService.writeMaintenenceEntry(entry).then(result => {
     result && window.setTimeout(() => {
       // dispatch(loadAllMountedNetworkElementsAsync);
       dispatch(new UpdateMaintenanceEntry(entry));
-      dispatch(new AddSnackbarNotification({ message: `Successfully ${result && result.created ? "created" : "updated"} maintenance settings for [${entry.nodeId}]`, options: { variant: 'success' } }));
+      dispatch(new AddSnackbarNotification({ message: `Successfully ${result && result.created ? 'created' : 'updated'} maintenance settings for [${entry.nodeId}]`, options: { variant: 'success' } }));
     }, 900);
-    dispatch(maintenanceEntriesReloadAction)
+    dispatch(maintenanceEntriesReloadAction);
   });
 };
 
 /** Represents an async thunk action creator to delete an element from the maintenence entries. */
-export const removeFromMaintenenceEntrysAsyncActionCreator = (entry: MaintenenceEntry) => (dispatch: Dispatch) => {
+export const removeFromMaintenenceEntrysAsyncActionCreator = (entry: MaintenanceEntry) => (dispatch: Dispatch) => {
   maintenenceService.deleteMaintenenceEntry(entry).then(result => {
     result && window.setTimeout(() => {
       dispatch(new UpdateMaintenanceEntry({
         [spoofSymbol]: true,
-        _id: entry._id,
+        mId: entry.mId,
         nodeId: entry.nodeId,
-        description: "",
-        start: "",
-        end: "",
-        active: false
+        description: '',
+        start: '',
+        end: '',
+        active: false,
       }));
       dispatch(new AddSnackbarNotification({ message: `Successfully removed [${entry.nodeId}]`, options: { variant: 'success' } }));
     }, 900);
-    dispatch(maintenanceEntriesReloadAction)
+    dispatch(maintenanceEntriesReloadAction);
   });
 };
 
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/assets/icons/maintenanceAppIcon.svg b/sdnr/wt/odlux/apps/maintenanceApp/src/assets/icons/maintenanceAppIcon.svg
new file mode 100644
index 000000000..8b99a5e7f
--- /dev/null
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/assets/icons/maintenanceAppIcon.svg
@@ -0,0 +1,50 @@
+<!-- highstreet technologies GmbH colour scheme 
+	Grey	#565656
+	LBlue #36A9E1
+	DBlue #246DA2
+	Green #003F2C / #006C4B
+	Yellw #C8D400
+	Red 	#D81036
+-->
+
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 684.000000 684.000000">
+
+<g transform="translate(0.000000,684.000000) scale(0.100000,-0.100000)">
+
+<path fill="#565656" d="M3044 6693 c-12 -2 -33 -17 -48 -32 -35 -37 -55 -136 -96 -476 -17
+-142 -32 -260 -33 -260 -1 -1 -60 -19 -132 -40 -243 -71 -406 -139 -600 -250
+-99 -57 -120 -66 -138 -57 -12 6 -124 91 -249 189 -124 98 -252 193 -283 212
+-57 34 -57 34 -89 17 -81 -43 -421 -374 -513 -500 -24 -32 -43 -67 -43 -78 0
+-36 98 -173 337 -472 57 -70 103 -132 103 -138 0 -5 -17 -35 -39 -66 -98 -144
+-275 -566 -301 -715 -14 -78 26 -65 -335 -112 -384 -51 -423 -62 -447 -125 -5
+-14 -9 -179 -9 -376 0 -414 0 -416 78 -433 43 -10 213 -35 518 -77 183 -25
+167 -12 221 -182 75 -238 160 -433 278 -637 l35 -61 -175 -219 c-206 -259
+-274 -357 -274 -393 0 -22 50 -76 258 -282 142 -141 275 -269 295 -284 l36
+-28 38 23 c62 38 177 124 380 286 l193 153 92 -57 c168 -102 383 -193 633
+-269 66 -19 123 -39 127 -43 9 -8 19 -76 53 -361 14 -113 33 -243 42 -289 23
+-119 0 -114 455 -113 237 0 373 4 386 11 44 23 61 101 106 485 l32 269 149 46
+c227 71 395 139 395 160 0 5 -125 127 -277 272 -194 186 -283 263 -297 262
+-12 -1 -75 -11 -141 -23 -318 -56 -700 -29 -973 69 -278 101 -476 226 -685
+435 -275 275 -445 609 -504 988 -23 152 -23 432 1 586 60 394 215 705 493 984
+166 169 314 278 498 368 292 143 539 191 912 176 194 -8 297 -24 446 -72 485
+-156 879 -500 1098 -959 134 -278 196 -617 170 -918 -6 -73 -21 -186 -33 -251
+l-22 -119 274 -268 c268 -261 275 -268 292 -248 23 27 88 198 133 351 31 104
+41 127 59 132 11 3 131 19 266 36 402 50 463 65 477 118 5 15 8 192 8 393 0
+353 -1 368 -20 389 -36 40 -79 49 -469 100 -132 18 -249 36 -261 40 -18 7 -29
+33 -59 137 -66 223 -139 392 -292 669 l-28 51 126 159 c193 246 265 343 294
+399 l27 52 -31 45 c-101 147 -505 538 -555 538 -30 0 -234 -146 -506 -362
+l-104 -82 -51 28 c-244 136 -390 201 -606 271 -63 21 -136 46 -161 57 l-46 19
+-36 297 c-50 403 -58 430 -136 452 -34 9 -671 12 -717 3z"/>
+
+<path fill="#006C4B" d="M3080 4653 c-77 -8 -195 -35 -232 -54 -21 -10 -45 -30 -54 -44 -15
+-23 -15 -27 0 -49 22 -35 111 -101 277 -207 247 -158 343 -239 384 -326 35
+-74 -5 -237 -108 -438 -40 -77 -68 -116 -122 -170 -77 -77 -194 -145 -249
+-145 -39 0 -127 48 -339 184 -194 124 -291 176 -330 176 -60 0 -105 -86 -86
+-167 28 -127 262 -492 423 -662 101 -106 236 -191 333 -211 27 -5 138 -14 248
+-20 372 -20 506 -66 689 -240 87 -83 629 -652 1291 -1355 181 -192 439 -465
+573 -607 244 -255 245 -256 281 -251 220 32 406 139 512 295 50 73 98 174 106
+222 5 32 0 42 -53 108 -113 140 -296 342 -1073 1183 -513 554 -980 1066 -1074
+1178 -117 137 -174 252 -196 394 -6 39 -15 171 -21 294 -6 123 -15 257 -20
+297 -28 207 -209 414 -464 532 -97 45 -172 66 -286 80 -78 9 -330 11 -410 3z"/>
+</g>
+</svg>
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/components/editMaintenenceEntryDialog.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/components/editMaintenenceEntryDialog.tsx
index 829289224..9ab147ca7 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/components/editMaintenenceEntryDialog.tsx
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/components/editMaintenenceEntryDialog.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 /**
  * ============LICENSE_START========================================================================
  * ONAP : ccsdk feature sdnr wt odlux
@@ -18,90 +19,89 @@
 import * as React from 'react';
 
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
 
-import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
+import { FormControl, InputLabel, MenuItem, Select, Typography } from '@mui/material';
 import {
   addOrUpdateMaintenenceEntryAsyncActionCreator,
-  removeFromMaintenenceEntrysAsyncActionCreator
+  removeFromMaintenenceEntrysAsyncActionCreator,
 } from '../actions/maintenenceActions';
-
-import { MaintenenceEntry } from '../models/maintenenceEntryType';
-import { FormControl, InputLabel, Select, MenuItem, Typography } from '@mui/material';
+import { MaintenanceEntry } from '../models/maintenanceEntryType';
 
 export enum EditMaintenenceEntryDialogMode {
-  None = "none",
-  AddMaintenenceEntry = "addMaintenenceEntry",
-  EditMaintenenceEntry = "editMaintenenceEntry",
-  RemoveMaintenenceEntry = "removeMaintenenceEntry"
+  None = 'none',
+  AddMaintenenceEntry = 'addMaintenenceEntry',
+  EditMaintenenceEntry = 'editMaintenenceEntry',
+  RemoveMaintenenceEntry = 'removeMaintenenceEntry',
 }
 
 const mapDispatch = (dispatcher: IDispatcher) => ({
-  addOrUpdateMaintenenceEntry: (entry: MaintenenceEntry) => {
+  addOrUpdateMaintenenceEntry: (entry: MaintenanceEntry) => {
     dispatcher.dispatch(addOrUpdateMaintenenceEntryAsyncActionCreator(entry));
   },
-  removeMaintenenceEntry: (entry: MaintenenceEntry) => {
+  removeMaintenenceEntry: (entry: MaintenanceEntry) => {
     dispatcher.dispatch(removeFromMaintenenceEntrysAsyncActionCreator(entry));
   },
 });
 
 type DialogSettings = {
-  dialogTitle: string,
-  dialogDescription: string,
-  applyButtonText: string,
-  cancelButtonText: string,
-  enableMountIdEditor: boolean,
-  enableTimeEditor: boolean,
-}
+  dialogTitle: string;
+  dialogDescription: string;
+  applyButtonText: string;
+  cancelButtonText: string;
+  enableMountIdEditor: boolean;
+  enableTimeEditor: boolean;
+};
 
 const settings: { [key: string]: DialogSettings } = {
   [EditMaintenenceEntryDialogMode.None]: {
-    dialogTitle: "",
-    dialogDescription: "",
-    applyButtonText: "",
-    cancelButtonText: "",
+    dialogTitle: '',
+    dialogDescription: '',
+    applyButtonText: '',
+    cancelButtonText: '',
     enableMountIdEditor: false,
     enableTimeEditor: false,
   },
   [EditMaintenenceEntryDialogMode.AddMaintenenceEntry]: {
-    dialogTitle: "Add new maintenence entry",
-    dialogDescription: "",
-    applyButtonText: "Add",
-    cancelButtonText: "Cancel",
+    dialogTitle: 'Add new maintenence entry',
+    dialogDescription: '',
+    applyButtonText: 'Add',
+    cancelButtonText: 'Cancel',
     enableMountIdEditor: true,
     enableTimeEditor: true,
   },
   [EditMaintenenceEntryDialogMode.EditMaintenenceEntry]: {
-    dialogTitle: "Edit maintenence entry",
-    dialogDescription: "",
-    applyButtonText: "Save",
-    cancelButtonText: "Cancel",
+    dialogTitle: 'Edit maintenence entry',
+    dialogDescription: '',
+    applyButtonText: 'Save',
+    cancelButtonText: 'Cancel',
     enableMountIdEditor: false,
     enableTimeEditor: true,
   },
   [EditMaintenenceEntryDialogMode.RemoveMaintenenceEntry]: {
-    dialogTitle: "Remove maintenence entry",
-    dialogDescription: "",
-    applyButtonText: "Remove",
-    cancelButtonText: "Cancel",
+    dialogTitle: 'Remove maintenence entry',
+    dialogDescription: '',
+    applyButtonText: 'Remove',
+    cancelButtonText: 'Cancel',
     enableMountIdEditor: false,
     enableTimeEditor: false,
   },
-}
+};
 
 type EditMaintenenceEntryDIalogComponentProps = Connect<undefined, typeof mapDispatch> & {
   mode: EditMaintenenceEntryDialogMode;
-  initialMaintenenceEntry: MaintenenceEntry;
+  initialMaintenenceEntry: MaintenanceEntry;
   onClose: () => void;
 };
 
-type EditMaintenenceEntryDIalogComponentState = MaintenenceEntry & { isErrorVisible: boolean };
+type EditMaintenenceEntryDIalogComponentState = MaintenanceEntry & { isErrorVisible: boolean };
 
 class EditMaintenenceEntryDIalogComponent extends React.Component<EditMaintenenceEntryDIalogComponentProps, EditMaintenenceEntryDIalogComponentState> {
   constructor(props: EditMaintenenceEntryDIalogComponentProps) {
@@ -109,7 +109,7 @@ class EditMaintenenceEntryDIalogComponent extends React.Component<EditMaintenenc
 
     this.state = {
       ...this.props.initialMaintenenceEntry,
-      isErrorVisible: false
+      isErrorVisible: false,
     };
   }
 
@@ -122,10 +122,12 @@ class EditMaintenenceEntryDIalogComponent extends React.Component<EditMaintenenc
           <DialogContentText>
             {setting.dialogDescription}
           </DialogContentText>
-          <TextField variant="standard"  disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.nodeId} onChange={(event) => { this.setState({ nodeId: event.target.value }); }} />
+          <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.nodeId} onChange={(event) => { this.setState({ nodeId: event.target.value }); }} />
           {this.state.isErrorVisible && <Typography variant="body1" color="error" >Name must not be empty.</Typography>}
-          <TextField variant="standard"  disabled={!setting.enableTimeEditor} spellCheck={false} autoFocus margin="dense" id="start" label="Start (Local DateTime)" type="datetime-local" fullWidth value={this.state.start} onChange={(event) => { this.setState({ start: event.target.value }); }} />
-          <TextField variant="standard"  disabled={!setting.enableTimeEditor} spellCheck={false} autoFocus margin="dense" id="end" label="End (Local DateTime)" type="datetime-local" fullWidth value={this.state.end} onChange={(event) => { this.setState({ end: event.target.value }); }} />
+          <TextField variant="standard" disabled={!setting.enableTimeEditor} spellCheck={false} autoFocus margin="dense" id="start"
+            label="Start (Local DateTime)" type="datetime-local" fullWidth value={this.state.start} onChange={(event) => { this.setState({ start: event.target.value }); }} />
+          <TextField variant="standard" disabled={!setting.enableTimeEditor} spellCheck={false} autoFocus margin="dense" id="end"
+            label="End (Local DateTime)" type="datetime-local" fullWidth value={this.state.end} onChange={(event) => { this.setState({ end: event.target.value }); }} />
           <FormControl variant="standard" fullWidth disabled={!setting.enableTimeEditor}>
             <InputLabel htmlFor="active">Active</InputLabel>
             <Select variant="standard" value={this.state.active || false} onChange={(event) => {
@@ -143,12 +145,12 @@ class EditMaintenenceEntryDIalogComponent extends React.Component<EditMaintenenc
               this.setState({ isErrorVisible: true });
             } else {
               this.onApply({
-                _id: this.state._id || this.state.nodeId,
+                mId: this.state.mId || this.state.nodeId,
                 nodeId: this.state.nodeId,
                 description: this.state.description,
                 start: this.state.start,
                 end: this.state.end,
-                active: this.state.active
+                active: this.state.active,
               });
               this.setState({ isErrorVisible: false });
             }
@@ -164,10 +166,10 @@ class EditMaintenenceEntryDIalogComponent extends React.Component<EditMaintenenc
           }} color="secondary"> {setting.cancelButtonText} </Button>
         </DialogActions>
       </Dialog>
-    )
+    );
   }
 
-  private onApply = (entry: MaintenenceEntry) => {
+  private onApply = (entry: MaintenanceEntry) => {
     this.props.onClose && this.props.onClose();
     switch (this.props.mode) {
       case EditMaintenenceEntryDialogMode.AddMaintenenceEntry:
@@ -185,14 +187,15 @@ class EditMaintenenceEntryDIalogComponent extends React.Component<EditMaintenenc
 
   private onCancel = () => {
     this.props.onClose && this.props.onClose();
-  }
+  };
 
-  static getDerivedStateFromProps(props: EditMaintenenceEntryDIalogComponentProps, state: EditMaintenenceEntryDIalogComponentState & { _initialMaintenenceEntry: MaintenenceEntry }): EditMaintenenceEntryDIalogComponentState & { _initialMaintenenceEntry: MaintenenceEntry } {
-    if (props.initialMaintenenceEntry !== state._initialMaintenenceEntry) {
+  static getDerivedStateFromProps(props: EditMaintenenceEntryDIalogComponentProps, state: EditMaintenenceEntryDIalogComponentState & { initialMaintenenceEntrie: MaintenanceEntry }): EditMaintenenceEntryDIalogComponentState & { initialMaintenenceEntrie: MaintenanceEntry } {
+    if (props.initialMaintenenceEntry !== state.initialMaintenenceEntrie) {
+      // eslint-disable-next-line no-param-reassign
       state = {
         ...state,
         ...props.initialMaintenenceEntry,
-        _initialMaintenenceEntry: props.initialMaintenenceEntry,
+        initialMaintenenceEntrie: props.initialMaintenenceEntry,
       };
     }
     return state;
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/components/refreshMaintenanceEntries.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/components/refreshMaintenanceEntries.tsx
index c66b6f460..e8bd635dd 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/components/refreshMaintenanceEntries.tsx
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/components/refreshMaintenanceEntries.tsx
@@ -24,78 +24,74 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 
-import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
-import { maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler';
-import { MaintenenceEntry } from '../models/maintenenceEntryType';
+import { maintenanceEntriesReloadAction } from '../handlers/maintenanceEntriesHandler';
+import { MaintenanceEntry } from '../models/maintenanceEntryType';
 
 export enum RefreshMaintenanceEntriesDialogMode {
-  None = "none",
-  RefreshMaintenanceEntriesTable = "RefreshMaintenanceEntriesTable",
+  None = 'none',
+  RefreshMaintenanceEntriesTable = 'RefreshMaintenanceEntriesTable',
 }
 
 const mapDispatch = (dispatcher: IDispatcher) => ({
-  refreshMaintenanceEntries: () => dispatcher.dispatch(maintenanceEntriesReloadAction)
+  refreshMaintenanceEntries: () => dispatcher.dispatch(maintenanceEntriesReloadAction),
 });
 
 type DialogSettings = {
-  dialogTitle: string,
-  dialogDescription: string,
-  applyButtonText: string,
-  cancelButtonText: string,
-  enableMountIdEditor: boolean,
-  enableUsernameEditor: boolean,
-  enableExtendedEditor: boolean,
-}
+  dialogTitle: string;
+  dialogDescription: string;
+  applyButtonText: string;
+  cancelButtonText: string;
+  enableMountIdEditor: boolean;
+  enableUsernameEditor: boolean;
+  enableExtendedEditor: boolean;
+};
 
 const settings: { [key: string]: DialogSettings } = {
   [RefreshMaintenanceEntriesDialogMode.None]: {
-    dialogTitle: "",
-    dialogDescription: "",
-    applyButtonText: "",
-    cancelButtonText: "",
+    dialogTitle: '',
+    dialogDescription: '',
+    applyButtonText: '',
+    cancelButtonText: '',
     enableMountIdEditor: false,
     enableUsernameEditor: false,
     enableExtendedEditor: false,
   },
   [RefreshMaintenanceEntriesDialogMode.RefreshMaintenanceEntriesTable]: {
-    dialogTitle: "Do you want to refresh Maintenance Entries?",
-    dialogDescription: "",
-    applyButtonText: "Yes",
-    cancelButtonText: "Cancel",
+    dialogTitle: 'Do you want to refresh Maintenance Entries?',
+    dialogDescription: '',
+    applyButtonText: 'Yes',
+    cancelButtonText: 'Cancel',
     enableMountIdEditor: true,
     enableUsernameEditor: true,
     enableExtendedEditor: true,
-  }
-}
+  },
+};
 
 type RefreshMaintenanceEntriesDialogComponentProps = Connect<undefined, typeof mapDispatch> & {
   mode: RefreshMaintenanceEntriesDialogMode;
   onClose: () => void;
 };
 
-type RefreshMaintenanceEntriesDialogComponentState = MaintenenceEntry & { isNameValid: boolean, isHostSet: boolean };
+type RefreshMaintenanceEntriesDialogComponentState = MaintenanceEntry & { isNameValid: boolean; isHostSet: boolean };
 
 class RefreshMaintenanceEntriesDialogComponent extends React.Component<RefreshMaintenanceEntriesDialogComponentProps, RefreshMaintenanceEntriesDialogComponentState> {
-  constructor(props: RefreshMaintenanceEntriesDialogComponentProps) {
-    super(props);
-  }
-
   render(): JSX.Element {
     const setting = settings[this.props.mode];
     return (
       <Dialog open={this.props.mode !== RefreshMaintenanceEntriesDialogMode.None}>
-        <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, "-").toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle>
+        <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) => {
+          <Button aria-label="dialog-confirm-button" onClick={() => {
             this.onRefresh();
           }} color="inherit" > {setting.applyButtonText} </Button>
-          <Button aria-label="dialog-cancel-button" onClick={(event) => {
+          <Button aria-label="dialog-cancel-button" onClick={() => {
             this.onCancel();
           }} color="secondary"> {setting.cancelButtonText} </Button>
         </DialogActions>
@@ -110,7 +106,7 @@ class RefreshMaintenanceEntriesDialogComponent extends React.Component<RefreshMa
 
   private onCancel = () => {
     this.props.onClose();
-  }
+  };
 }
 
 export const RefreshMaintenanceEntriesDialog = connect(undefined, mapDispatch)(RefreshMaintenanceEntriesDialogComponent);
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenanceAppRootHandler.ts b/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenanceAppRootHandler.ts
index 71b4bf70d..ced7f2160 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenanceAppRootHandler.ts
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenanceAppRootHandler.ts
@@ -19,22 +19,20 @@
 
 import { combineActionHandler } from '../../../../framework/src/flux/middleware';
 
-import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-
-import { IMaintenanceEntriesState, maintenanceEntriesActionHandler } from './maintenenceEntriesHandler';
+import { IMaintenanceEntriesState, maintenanceEntriesActionHandler } from './maintenanceEntriesHandler';
 
 export interface IMaintenanceAppStoreState {
-  maintenenceEntries : IMaintenanceEntriesState
+  maintenanceEntries : IMaintenanceEntriesState;
 }
 
 declare module '../../../../framework/src/store/applicationStore' {
   interface IApplicationStoreState {
-    maintenance: IMaintenanceAppStoreState
+    maintenance: IMaintenanceAppStoreState;
   }
 }
 
 const actionHandlers = {
-  maintenenceEntries: maintenanceEntriesActionHandler
+  maintenanceEntries: maintenanceEntriesActionHandler,
 };
 
 export const maintenanceAppRootHandler = combineActionHandler<IMaintenanceAppStoreState>(actionHandlers);
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenanceEntriesHandler.ts b/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenanceEntriesHandler.ts
new file mode 100644
index 000000000..c3fe51e80
--- /dev/null
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenanceEntriesHandler.ts
@@ -0,0 +1,35 @@
+/**
+ * ============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 { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { MaintenanceEntry } from '../models/maintenanceEntryType';
+export interface IMaintenanceEntriesState extends IExternalTableState<MaintenanceEntry> { }
+
+// create elastic search material data fetch handler
+const maintenanceEntriesSearchHandler = createSearchDataHandler<MaintenanceEntry>('maintenance');
+
+export const {
+  actionHandler: maintenanceEntriesActionHandler,
+  createActions: createmaintenanceEntriesActions,
+  createProperties: createmaintenanceEntriesProperties,
+  reloadAction: maintenanceEntriesReloadAction,
+
+  // set value action, to change a value
+} = createExternal<MaintenanceEntry>(maintenanceEntriesSearchHandler, appState => appState.maintenance.maintenanceEntries);
+
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenenceEntriesHandler.ts b/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenenceEntriesHandler.ts
deleted file mode 100644
index 445541889..000000000
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/handlers/maintenenceEntriesHandler.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * ============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 { createExternal,IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
-import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
-
-import { MaintenenceEntry } from '../models/maintenenceEntryType';
-export interface IMaintenanceEntriesState extends IExternalTableState<MaintenenceEntry> { }
-
-// create eleactic search material data fetch handler
-const maintenanceEntriesSearchHandler = createSearchDataHandler<MaintenenceEntry>('maintenance');
-
-export const {
-  actionHandler: maintenanceEntriesActionHandler,
-  createActions: createmaintenanceEntriesActions,
-  createProperties: createmaintenanceEntriesProperties,
-  reloadAction: maintenanceEntriesReloadAction,
-
-  // set value action, to change a value
-} = createExternal<MaintenenceEntry>(maintenanceEntriesSearchHandler, appState => appState.maintenance.maintenenceEntries);
-
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/models/maintenanceEntryType.ts b/sdnr/wt/odlux/apps/maintenanceApp/src/models/maintenanceEntryType.ts
new file mode 100644
index 000000000..27cdc8c12
--- /dev/null
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/models/maintenanceEntryType.ts
@@ -0,0 +1,33 @@
+/**
+ * ============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==========================================================================
+ */
+/** Represents the elestic search db type for maintenence enrties */
+
+
+export const spoofSymbol = Symbol('Spoof');
+
+/** Represents the type for an maintenence entry. */
+export type MaintenanceEntry = {
+  mId: string;
+  nodeId: string;
+  description?: string;
+  end: string;
+  start: string;
+  active: boolean;
+  [spoofSymbol]?: boolean;
+};
+
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/models/maintenenceEntryType.ts b/sdnr/wt/odlux/apps/maintenanceApp/src/models/maintenenceEntryType.ts
deleted file mode 100644
index 989bfbdc3..000000000
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/models/maintenenceEntryType.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * ============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==========================================================================
- */
-/** Represents the elestic search db type for maintenence enrties */
-
-
-export const spoofSymbol = Symbol("Spoof");
-
-/** Represents the type for an maintenence entry. */
-export type MaintenenceEntry = {
-  _id: string;
-  nodeId: string;
-  description?: string,
-  end: string,
-  start: string
-  active: boolean
-  [spoofSymbol]?: boolean;
-}
-
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/pluginMaintenance.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/pluginMaintenance.tsx
index e6ab977b3..0f686cb84 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/pluginMaintenance.tsx
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/pluginMaintenance.tsx
@@ -17,27 +17,27 @@
  */
 // app configuration and main entry point for the app
 
-import * as React from "react";
-
-import { faLock } from '@fortawesome/free-solid-svg-icons';  // select app icon
+import React, { FC } from 'react';
 
 import applicationManager from '../../../framework/src/services/applicationManager';
 
 import { maintenanceAppRootHandler } from './handlers/maintenanceAppRootHandler';
 
-import MaintenenceView from "./views/maintenenceView";
+import { MaintenanceView } from './views/maintenanceView';
+
+const appIcon = require('./assets/icons/maintenanceAppIcon.svg');  // select app icon
 
-const App : React.SFC = (props) => {
-  return <MaintenenceView />
+const App : FC = () => {
+  return <MaintenanceView />;
 };
 
 export function register() {
   applicationManager.registerApplication({
-    name: "maintenance",
-    icon: faLock,
+    name: 'maintenance',
+    icon: appIcon,
     rootComponent: App,
     rootActionHandler: maintenanceAppRootHandler,
-    menuEntry: "Maintenance"
+    menuEntry: 'Maintenance',
   });
 }
 
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/services/maintenenceService.ts b/sdnr/wt/odlux/apps/maintenanceApp/src/services/maintenenceService.ts
index 613b4786d..5fdccc349 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/services/maintenenceService.ts
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/services/maintenenceService.ts
@@ -15,15 +15,15 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
+import { DeleteResponse, PostResponse } from '../../../../framework/src/models/elasticSearch';
 import { requestRest } from '../../../../framework/src/services/restService';
-import { Result, HitEntry, PostResponse, DeleteResponse } from '../../../../framework/src/models/elasticSearch';
-
-import { MaintenenceEntry } from '../models/maintenenceEntryType';
-import { convertToLocaleString, convertToGMTString, convertToISODateString } from '../utils/timeUtils';
 import { convertPropertyNames, replaceUpperCase } from '../../../../framework/src/utilities/yangHelper';
+import { MaintenanceEntry } from '../models/maintenanceEntryType';
+
+import { convertToISODateString } from '../utils/timeUtils';
 
 
-export const maintenenceEntryDatabasePath = "mwtn/maintenancemode";
+export const maintenenceEntryDatabasePath = 'mwtn/maintenancemode';
 
 /**
  * Represents a web api accessor service for all maintenence entries related actions.
@@ -33,37 +33,37 @@ class MaintenenceService {
   /**
   * Adds or updates one maintenence entry to the backend.
   */
-  public async writeMaintenenceEntry(maintenenceEntry: MaintenenceEntry): Promise<PostResponse | null> {
-    const path = `/rests/operations/data-provider:create-maintenance`;
+  public async writeMaintenenceEntry(maintenenceEntry: MaintenanceEntry): Promise<PostResponse | null> {
+    const path = '/rests/operations/data-provider:create-maintenance';
 
     const query = {
-      "id": maintenenceEntry._id,
-      "node-id": maintenenceEntry.nodeId,
-      "active": maintenenceEntry.active,
-      "description": maintenenceEntry.description,
-      "end": convertToISODateString(maintenenceEntry.end),
-      "start": convertToISODateString(maintenenceEntry.start)
+      'id': maintenenceEntry.mId,
+      'node-id': maintenenceEntry.nodeId,
+      'active': maintenenceEntry.active,
+      'description': maintenenceEntry.description,
+      'end': convertToISODateString(maintenenceEntry.end),
+      'start': convertToISODateString(maintenenceEntry.start),
     };
 
-    const result = await requestRest<PostResponse>(path, { method: "POST", body: JSON.stringify(convertPropertyNames({ "data-provider:input": query }, replaceUpperCase)) });
+    const result = await requestRest<PostResponse>(path, { method: 'POST', body: JSON.stringify(convertPropertyNames({ 'data-provider:input': query }, replaceUpperCase)) });
     return result || null;
   }
 
   /**
   * Deletes one maintenence entry by its mountId from the backend.
   */
-  public async deleteMaintenenceEntry(maintenenceEntry: MaintenenceEntry): Promise<(DeleteResponse) | null> {
-    const path = `/rests/operations/data-provider:delete-maintenance`;
+  public async deleteMaintenenceEntry(maintenenceEntry: MaintenanceEntry): Promise<(DeleteResponse) | null> {
+    const path = '/rests/operations/data-provider:delete-maintenance';
 
     const query = {
-      "id": maintenenceEntry._id,
-      "node-id": maintenenceEntry.nodeId,
-      "active": maintenenceEntry.active,
-      "description": maintenenceEntry.description,
-      "end": convertToISODateString(maintenenceEntry.end),
-      "start": convertToISODateString(maintenenceEntry.start)
+      'id': maintenenceEntry.mId,
+      'node-id': maintenenceEntry.nodeId,
+      'active': maintenenceEntry.active,
+      'description': maintenenceEntry.description,
+      'end': convertToISODateString(maintenenceEntry.end),
+      'start': convertToISODateString(maintenenceEntry.start),
     };
-    const result = await requestRest<DeleteResponse>(path, { method: "POST", body: JSON.stringify(convertPropertyNames({ "data-provider:input": query }, replaceUpperCase)) });
+    const result = await requestRest<DeleteResponse>(path, { method: 'POST', body: JSON.stringify(convertPropertyNames({ 'data-provider:input': query }, replaceUpperCase)) });
     return result || null;
   }
 }
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/utils/timeUtils.ts b/sdnr/wt/odlux/apps/maintenanceApp/src/utils/timeUtils.ts
index 676be1a38..0fde5fcad 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/utils/timeUtils.ts
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/utils/timeUtils.ts
@@ -27,7 +27,7 @@ export function convertToGMTString(dateString: string): string {
     '+00:00';
 }
 
-export function convertToLocaleString(rawDate: string| number): string {
+export function convertToLocaleString(rawDate: string | number): string {
   const date = new Date(rawDate);
   const pad = (n: number) => (n < 10) ? '0' + n : n;
 
@@ -38,7 +38,7 @@ export function convertToLocaleString(rawDate: string| number): string {
     ':' + pad(date.getMinutes());
 }
 
-export function convertToISODateString(rawDate: string| number): string {
+export function convertToISODateString(rawDate: string | number): string {
   const date = new Date(rawDate);
   const displayDate = date.toISOString();
   return displayDate.replace(/\.[0-9]{2}/, '.');
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenanceView.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenanceView.tsx
new file mode 100644
index 000000000..d54d63c04
--- /dev/null
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenanceView.tsx
@@ -0,0 +1,246 @@
+/**
+ * ============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 React from 'react';
+
+import { faBan } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import AddIcon from '@mui/icons-material/Add';
+import EditIcon from '@mui/icons-material/Edit';
+import Refresh from '@mui/icons-material/Refresh';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import { Divider, MenuItem, Theme, Typography } from '@mui/material';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+
+import MaterialTable, { ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import EditMaintenenceEntryDialog, { EditMaintenenceEntryDialogMode } from '../components/editMaintenenceEntryDialog';
+import RefreshMaintenanceEntriesDialog, { RefreshMaintenanceEntriesDialogMode } from '../components/refreshMaintenanceEntries';
+import { createmaintenanceEntriesActions, createmaintenanceEntriesProperties, maintenanceEntriesReloadAction } from '../handlers/maintenanceEntriesHandler';
+import { MaintenanceEntry } from '../models/maintenanceEntryType';
+import { convertToLocaleString } from '../utils/timeUtils';
+
+const styles = (theme: Theme) => createStyles({
+  button: {
+    margin: 0,
+    padding: '6px 6px',
+    minWidth: 'unset',
+  },
+  spacer: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    display: 'inline',
+  },
+});
+
+const MaintenanceEntriesTable = MaterialTable as MaterialTableCtorType<MaintenanceEntry>;
+
+const mapProps = (state: IApplicationStoreState) => ({
+  maintenanceEntriesProperties: createmaintenanceEntriesProperties(state),
+});
+
+const mapDispatcher = (dispatcher: IDispatcher) => ({
+  maintenanceEntriesActions: createmaintenanceEntriesActions(dispatcher.dispatch),
+  onLoadMaintenanceEntries: async () => {
+    await dispatcher.dispatch(maintenanceEntriesReloadAction);
+  },
+});
+
+const emptyMaintenenceEntry: MaintenanceEntry = {
+  mId: '',
+  nodeId: '',
+  description: '',
+  start: convertToLocaleString(new Date().valueOf()),
+  end: convertToLocaleString(new Date().valueOf()),
+  active: false,
+};
+
+type MaintenanceViewComponentProps = Connect<typeof mapProps, typeof mapDispatcher> & WithStyles<typeof styles> & {};
+
+type MaintenenceViewComponentState = {
+  maintenenceEntryToEdit: MaintenanceEntry;
+  maintenanceEntryEditorMode: EditMaintenenceEntryDialogMode;
+  refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode;
+};
+
+let initialSorted = false;
+
+class MaintenenceViewComponent extends React.Component<MaintenanceViewComponentProps, MaintenenceViewComponentState> {
+
+  constructor(props: MaintenanceViewComponentProps) {
+    super(props);
+
+    this.state = {
+      maintenenceEntryToEdit: emptyMaintenenceEntry,
+      maintenanceEntryEditorMode: EditMaintenenceEntryDialogMode.None,
+      refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode.None,
+    };
+
+  }
+
+  getContextMenu(rowData: MaintenanceEntry): JSX.Element[] {
+    let buttonArray = [
+      <MenuItem aria-label={'1hr-from-now'} onClick={event => this.onOpenPlus1hEditMaintenenceEntryDialog(event, rowData)}><Typography>+1h</Typography></MenuItem>,
+      <MenuItem aria-label={'8hr-from-now'} onClick={event => this.onOpenPlus8hEditMaintenenceEntryDialog(event, rowData)}><Typography>+8h</Typography></MenuItem>,
+      <Divider />,
+      <MenuItem aria-label={'edit'} onClick={event => this.onOpenEditMaintenenceEntryDialog(event, rowData)}><EditIcon /><Typography>Edit</Typography></MenuItem>,
+      <MenuItem aria-label={'remove'} onClick={event => this.onOpenRemoveMaintenenceEntryDialog(event, rowData)}><RemoveIcon /><Typography>Remove</Typography></MenuItem>,
+    ];
+    return buttonArray;
+  }
+
+  render() {
+    const addMaintenenceEntryAction = {
+      icon: AddIcon, tooltip: 'Add', ariaLabel:'add-element', onClick: () => {
+        const startTime = (new Date().valueOf());
+        const endTime = startTime;
+        this.setState({
+          maintenenceEntryToEdit: {
+            ...emptyMaintenenceEntry,
+            start: convertToLocaleString(startTime),
+            end: convertToLocaleString(endTime),
+          },
+          maintenanceEntryEditorMode: EditMaintenenceEntryDialogMode.AddMaintenenceEntry,
+        });
+      },
+    };
+
+    const refreshMaintenanceEntriesAction = {
+      icon: Refresh, tooltip: 'Refresh Maintenance Entries', ariaLabel: 'refresh', onClick: () => {
+        this.setState({
+          refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode.RefreshMaintenanceEntriesTable,
+        });
+      },
+    };
+
+    const now = new Date().valueOf();
+    return (
+      <>
+        <MaintenanceEntriesTable stickyHeader tableId="maintenance-table" title={'Maintenance'} customActionButtons={[refreshMaintenanceEntriesAction, addMaintenenceEntryAction]} columns={
+          [
+            { property: 'nodeId', title: 'Node Name', type: ColumnType.text },
+            {
+              property: 'notifications', title: 'Notification', width: 50, align: 'center', type: ColumnType.custom, customControl: ({ rowData }) => (
+                rowData.active && (Date.parse(rowData.start).valueOf() <= now) && (Date.parse(rowData.end).valueOf() >= now) && <FontAwesomeIcon icon={faBan} /> || null
+              ),
+            },
+            { property: 'active', title: 'Activation State', type: ColumnType.boolean, labels: { 'true': 'active', 'false': 'not active' } },
+            { property: 'start', title: 'Start Date (UTC)', type: ColumnType.text },
+            { property: 'end', title: 'End Date (UTC)', type: ColumnType.text },
+          ]
+        } idProperty={'mId'}{...this.props.maintenanceEntriesActions} {...this.props.maintenanceEntriesProperties} asynchronus createContextMenu={rowData => {
+          return this.getContextMenu(rowData);
+        }} >
+        </MaintenanceEntriesTable>
+        <EditMaintenenceEntryDialog initialMaintenenceEntry={this.state.maintenenceEntryToEdit} mode={this.state.maintenanceEntryEditorMode}
+          onClose={this.onCloseEditMaintenenceEntryDialog} />
+        <RefreshMaintenanceEntriesDialog mode={this.state.refreshMaintenenceEntriesEditorMode}
+          onClose={this.onCloseRefreshMaintenenceEntryDialog} />
+      </>
+    );
+  }
+
+  public componentDidMount() {
+
+    if (!initialSorted) {
+      initialSorted = true;
+      this.props.maintenanceEntriesActions.onHandleRequestSort('node-id');
+    } else {
+      this.props.onLoadMaintenanceEntries();
+    }
+
+
+  }
+
+  private onOpenPlus1hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenanceEntry) => {
+    // event.preventDefault();
+    // event.stopPropagation();
+    const startTime = (new Date().valueOf());
+    const endTime = startTime + (1 * 60 * 60 * 1000);
+    this.setState({
+      maintenenceEntryToEdit: {
+        ...entry,
+        start: convertToLocaleString(startTime),
+        end: convertToLocaleString(endTime),
+      },
+      maintenanceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry,
+    });
+  };
+
+  private onOpenPlus8hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenanceEntry) => {
+    // event.preventDefault();
+    // event.stopPropagation();
+    const startTime = (new Date().valueOf());
+    const endTime = startTime + (8 * 60 * 60 * 1000);
+    this.setState({
+      maintenenceEntryToEdit: {
+        ...entry,
+        start: convertToLocaleString(startTime),
+        end: convertToLocaleString(endTime),
+      },
+      maintenanceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry,
+    });
+  };
+
+  private onOpenEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenanceEntry) => {
+    // event.preventDefault();
+    // event.stopPropagation();
+    const startTime = (new Date().valueOf());
+    const endTime = startTime;
+    this.setState({
+      maintenenceEntryToEdit: {
+        ...entry,
+        ...(entry.start && endTime ? { start: convertToLocaleString(entry.start), end: convertToLocaleString(entry.end) } : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) }),
+      },
+      maintenanceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry,
+    });
+  };
+
+  private onOpenRemoveMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenanceEntry) => {
+    // event.preventDefault();
+    // event.stopPropagation();
+    const startTime = (new Date().valueOf());
+    const endTime = startTime;
+    this.setState({
+      maintenenceEntryToEdit: {
+        ...entry,
+        ...(entry.start && endTime ? { start: convertToLocaleString(entry.start), end: convertToLocaleString(entry.end) } : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) }),
+      },
+      maintenanceEntryEditorMode: EditMaintenenceEntryDialogMode.RemoveMaintenenceEntry,
+    });
+  };
+
+  private onCloseEditMaintenenceEntryDialog = () => {
+    this.setState({
+      maintenenceEntryToEdit: emptyMaintenenceEntry,
+      maintenanceEntryEditorMode: EditMaintenenceEntryDialogMode.None,
+    });
+  };
+
+  private onCloseRefreshMaintenenceEntryDialog = () => {
+    this.setState({
+      refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode.None,
+    });
+  };
+}
+
+export const MaintenanceView = withStyles(styles)(connect(mapProps, mapDispatcher)(MaintenenceViewComponent));
+
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
deleted file mode 100644
index d040e3dda..000000000
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-/**
- * ============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 { Theme, Tooltip } from '@mui/material';
-
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
-
-import { faBan } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import AddIcon from '@mui/icons-material/Add';
-import EditIcon from '@mui/icons-material/Edit';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
-import Refresh from '@mui/icons-material/Refresh';
-import { MenuItem, Divider, Typography } from '@mui/material';
-
-import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
-import MaterialTable, { MaterialTableCtorType, ColumnType } from '../../../../framework/src/components/material-table';
-import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-
-import { MaintenenceEntry, spoofSymbol } from '../models/maintenenceEntryType';
-
-import EditMaintenenceEntryDialog, { EditMaintenenceEntryDialogMode } from '../components/editMaintenenceEntryDialog';
-import RefreshMaintenanceEntriesDialog, { RefreshMaintenanceEntriesDialogMode } from '../components/refreshMaintenanceEntries';
-import { convertToLocaleString } from '../utils/timeUtils';
-import { createmaintenanceEntriesActions, createmaintenanceEntriesProperties, maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler';
-
-const styles = (theme: Theme) => createStyles({
-  button: {
-    margin: 0,
-    padding: "6px 6px",
-    minWidth: 'unset'
-  },
-  spacer: {
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1),
-    display: "inline"
-  }
-});
-
-const MaintenenceEntriesTable = MaterialTable as MaterialTableCtorType<MaintenenceEntry>;
-
-const mapProps = (state: IApplicationStoreState) => ({
-  maintenanceEntriesProperties: createmaintenanceEntriesProperties(state)
-});
-
-const mapDispatcher = (dispatcher: IDispatcher) => ({
-  maintenanceEntriesActions: createmaintenanceEntriesActions(dispatcher.dispatch),
-  onLoadMaintenanceEntries: async () => {
-    await dispatcher.dispatch(maintenanceEntriesReloadAction)
-  }
-});
-
-const emptyMaintenenceEntry: MaintenenceEntry = {
-  _id: '',
-  nodeId: '',
-  description: '',
-  start: convertToLocaleString(new Date().valueOf()),
-  end: convertToLocaleString(new Date().valueOf()),
-  active: false,
-};
-
-type MaintenenceViewComponentProps = Connect<typeof mapProps, typeof mapDispatcher> & WithStyles<typeof styles> & {
-
-}
-
-type MaintenenceViewComponentState = {
-  maintenenceEntryToEdit: MaintenenceEntry;
-  maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode;
-  refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode;
-};
-
-let initialSorted = false;
-
-class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentProps, MaintenenceViewComponentState> {
-
-  constructor(props: MaintenenceViewComponentProps) {
-    super(props);
-
-    this.state = {
-      maintenenceEntryToEdit: emptyMaintenenceEntry,
-      maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.None,
-      refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode.None
-    };
-
-  }
-
-  getContextMenu(rowData: MaintenenceEntry): JSX.Element[] {
-    let buttonArray = [
-      <MenuItem aria-label={"1hr-from-now"} onClick={event => this.onOpenPlus1hEditMaintenenceEntryDialog(event, rowData)}><Typography>+1h</Typography></MenuItem>,
-      <MenuItem aria-label={"8hr-from-now"} onClick={event => this.onOpenPlus8hEditMaintenenceEntryDialog(event, rowData)}><Typography>+8h</Typography></MenuItem>,
-      <Divider />,
-      <MenuItem aria-label={"edit"} onClick={event => this.onOpenEditMaintenenceEntryDialog(event, rowData)}><EditIcon /><Typography>Edit</Typography></MenuItem>,
-      <MenuItem aria-label={"remove"} onClick={event => this.onOpenRemoveMaintenenceEntryDialog(event, rowData)}><RemoveIcon /><Typography>Remove</Typography></MenuItem>
-    ];
-    return buttonArray;
-  }
-
-  render() {
-    const { classes } = this.props;
-    const addMaintenenceEntryAction = {
-      icon: AddIcon, tooltip: 'Add', ariaLabel:'add-element', onClick: () => {
-        const startTime = (new Date().valueOf());
-        const endTime = startTime;
-        this.setState({
-          maintenenceEntryToEdit: {
-            ...emptyMaintenenceEntry,
-            start: convertToLocaleString(startTime),
-            end: convertToLocaleString(endTime),
-          },
-          maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.AddMaintenenceEntry
-        });
-      }
-    };
-
-    const refreshMaintenanceEntriesAction = {
-      icon: Refresh, tooltip: 'Refresh Maintenance Entries', ariaLabel: 'refresh', onClick: () => {
-        this.setState({
-          refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode.RefreshMaintenanceEntriesTable
-        });
-      }
-    };
-
-    const now = new Date().valueOf();
-    return (
-      <>
-        <MaintenenceEntriesTable stickyHeader tableId="maintenance-table" title={"Maintenance"} customActionButtons={[refreshMaintenanceEntriesAction, addMaintenenceEntryAction]} columns={
-          [
-            { property: "nodeId", title: "Node Name", type: ColumnType.text },
-            {
-              property: "notifications", title: "Notification", width: 50, align: "center", type: ColumnType.custom, customControl: ({ rowData }) => (
-                rowData.active && (Date.parse(rowData.start).valueOf() <= now) && (Date.parse(rowData.end).valueOf() >= now) && <FontAwesomeIcon icon={faBan} /> || null
-              )
-            },
-            { property: "active", title: "Activation State", type: ColumnType.boolean, labels: { "true": "active", "false": "not active" }, },
-            { property: "start", title: "Start Date (UTC)", type: ColumnType.text },
-            { property: "end", title: "End Date (UTC)", type: ColumnType.text }
-          ]
-        } idProperty={'_id'}{...this.props.maintenanceEntriesActions} {...this.props.maintenanceEntriesProperties} asynchronus createContextMenu={rowData => {
-          return this.getContextMenu(rowData);
-        }} >
-        </MaintenenceEntriesTable>
-        <EditMaintenenceEntryDialog initialMaintenenceEntry={this.state.maintenenceEntryToEdit} mode={this.state.maintenenceEntryEditorMode}
-          onClose={this.onCloseEditMaintenenceEntryDialog} />
-        <RefreshMaintenanceEntriesDialog mode={this.state.refreshMaintenenceEntriesEditorMode}
-          onClose={this.onCloseRefreshMaintenenceEntryDialog} />
-      </>
-    );
-  }
-
-  public componentDidMount() {
-
-    if (!initialSorted) {
-      initialSorted = true;
-      this.props.maintenanceEntriesActions.onHandleRequestSort("node-id");
-    } else {
-      this.props.onLoadMaintenanceEntries();
-    }
-
-
-  }
-
-  private onOpenPlus1hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
-    // event.preventDefault();
-    // event.stopPropagation();
-    const startTime = (new Date().valueOf());
-    const endTime = startTime + (1 * 60 * 60 * 1000);
-    this.setState({
-      maintenenceEntryToEdit: {
-        ...entry,
-        start: convertToLocaleString(startTime),
-        end: convertToLocaleString(endTime),
-      },
-      maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
-    });
-  }
-
-  private onOpenPlus8hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
-    // event.preventDefault();
-    // event.stopPropagation();
-    const startTime = (new Date().valueOf());
-    const endTime = startTime + (8 * 60 * 60 * 1000);
-    this.setState({
-      maintenenceEntryToEdit: {
-        ...entry,
-        start: convertToLocaleString(startTime),
-        end: convertToLocaleString(endTime),
-      },
-      maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
-    });
-  }
-
-  private onOpenEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
-    // event.preventDefault();
-    // event.stopPropagation();
-    const startTime = (new Date().valueOf());
-    const endTime = startTime;
-    this.setState({
-      maintenenceEntryToEdit: {
-        ...entry,
-        ...(entry.start && endTime ? { start: convertToLocaleString(entry.start), end: convertToLocaleString(entry.end) } : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) })
-      },
-      maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
-    });
-  }
-
-  private onOpenRemoveMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
-    // event.preventDefault();
-    // event.stopPropagation();
-    const startTime = (new Date().valueOf());
-    const endTime = startTime;
-    this.setState({
-      maintenenceEntryToEdit: {
-        ...entry,
-        ...(entry.start && endTime ? { start: convertToLocaleString(entry.start), end: convertToLocaleString(entry.end) } : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) })
-      },
-      maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.RemoveMaintenenceEntry
-    });
-  }
-
-  private onCloseEditMaintenenceEntryDialog = () => {
-    this.setState({
-      maintenenceEntryToEdit: emptyMaintenenceEntry,
-      maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.None,
-    });
-  }
-
-  private onCloseRefreshMaintenenceEntryDialog = () => {
-    this.setState({
-      refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode.None,
-    });
-  }
-}
-
-export const MaintenenceView = withStyles(styles)(connect(mapProps, mapDispatcher)(MaintenenceViewComponent));
-export default MaintenenceView;
-- 
cgit 1.2.3-korg