1 files changed, 40 insertions, 40 deletions
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
index d68205cd8..3b7879351 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
@@ -33,13 +33,11 @@ import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/co
 import MaterialTable, { MaterialTableCtorType, ColumnType } from '../../../../framework/src/components/material-table';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 
-import { loadAllMountedNetworkElementsAsync } from '../../../connectApp/src/actions/mountedNetworkElementsActions';
-
-import { loadAllMainteneceEntriesAsyncAction } from '../actions/maintenenceActions';
 import { MaintenenceEntry, spoofSymbol } from '../models/maintenenceEntryType';
 
 import EditMaintenenceEntryDialog, { EditMaintenenceEntryDialogMode } from '../components/editMaintenenceEntryDialog';
 import { convertToLocaleString } from '../utils/timeUtils';
+import { createmaintenanceEntriesActions, createmaintenanceEntriesProperties, maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler';
 
 const styles = (theme: Theme) => createStyles({
   button: {
@@ -48,8 +46,8 @@ const styles = (theme: Theme) => createStyles({
     minWidth: 'unset'
   },
   spacer: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     display: "inline"
   }
 });
@@ -57,20 +55,19 @@ const styles = (theme: Theme) => createStyles({
 const MaintenenceEntriesTable = MaterialTable as MaterialTableCtorType<MaintenenceEntry>;
 
 const mapProps = (state: IApplicationStoreState) => ({
-   maintenenceEntries: state.maintenance.maintenenceEntries.entries,
-   busy: state.maintenance.maintenenceEntries.busy
+  maintenanceEntriesProperties: createmaintenanceEntriesProperties(state)
 });
 
 const mapDispatcher = (dispatcher: IDispatcher) => ({
-  onLoadMenteneceEntries: async () => {
-    await dispatcher.dispatch(loadAllMountedNetworkElementsAsync)
-    dispatcher.dispatch(loadAllMainteneceEntriesAsyncAction);
+  maintenanceEntriesActions: createmaintenanceEntriesActions(dispatcher.dispatch),
+  onLoadMaintenanceEntries: async () => {
+    await dispatcher.dispatch(maintenanceEntriesReloadAction)
   }
 });
 
 const emptyMaintenenceEntry: MaintenenceEntry = {
   _id: '',
-  mountId: '',
+  nodeId: '',
   description: '',
   start: convertToLocaleString(new Date().valueOf()),
   end: convertToLocaleString(new Date().valueOf()),
@@ -88,7 +85,7 @@ type MaintenenceViewComponentState = {
 
 class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentProps, MaintenenceViewComponentState> {
 
-  constructor (props: MaintenenceViewComponentProps) {
+  constructor(props: MaintenenceViewComponentProps) {
     super(props);
 
     this.state = {
@@ -117,39 +114,42 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
     const now = new Date().valueOf();
     return (
       <>
-        <MaintenenceEntriesTable asynchronus rows={this.props.maintenenceEntries} customActionButtons={[ addMaintenenceEntryAction ]} columns={
-        [
-            { property: "mountId", title: "Mount Id", type: ColumnType.text },
+        <MaintenenceEntriesTable title={"Maintenance"} customActionButtons={[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", type: ColumnType.text },
-          { property: "end", title: "End Date", type: ColumnType.text },
-          { property: "actions", title: "Actions", type: ColumnType.custom, customControl : ({ rowData })=>(
-            <>
-              <div className={classes.spacer}>
-                <Tooltip title={"1h from now"} ><Button className={classes.button} onClick={ (event) => this.onOpenPlus1hEditMaintenenceEntryDialog(event, rowData)} >+1h</Button></Tooltip>
-                <Tooltip title={"8h from now"} ><Button className={classes.button} onClick={(event) => this.onOpenPlus8hEditMaintenenceEntryDialog(event, rowData)} >+8h</Button></Tooltip>
-              </div>
-              <div className={classes.spacer}>
-                <Tooltip title={"Edit"} ><IconButton className={classes.button} onClick={(event) => this.onOpenEditMaintenenceEntryDialog(event, rowData)} ><EditIcon /></IconButton></Tooltip>
-                <Tooltip title={"Remove"} ><IconButton disabled={ !!rowData[spoofSymbol] } className={classes.button} onClick={(event) => this.onOpenRemoveMaintenenceEntryDialog(event, rowData)} ><RemoveIcon /></IconButton></Tooltip>
-              </div>
-            </>
-          ) },
-        ]
-        } idProperty={'_id'}> </MaintenenceEntriesTable>
+            { 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 },
+            {
+              property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => (
+                <>
+                  <div className={classes.spacer}>
+                    <Tooltip title={"1h from now"} ><Button className={classes.button} onClick={(event) => this.onOpenPlus1hEditMaintenenceEntryDialog(event, rowData)} >+1h</Button></Tooltip>
+                    <Tooltip title={"8h from now"} ><Button className={classes.button} onClick={(event) => this.onOpenPlus8hEditMaintenenceEntryDialog(event, rowData)} >+8h</Button></Tooltip>
+                  </div>
+                  <div className={classes.spacer}>
+                    <Tooltip title={"Edit"} ><IconButton className={classes.button} onClick={(event) => this.onOpenEditMaintenenceEntryDialog(event, rowData)} ><EditIcon /></IconButton></Tooltip>
+                    <Tooltip title={"Remove"} ><IconButton disabled={!!rowData[spoofSymbol]} className={classes.button} onClick={(event) => this.onOpenRemoveMaintenenceEntryDialog(event, rowData)} ><RemoveIcon /></IconButton></Tooltip>
+                  </div>
+                </>
+              )
+            },
+          ]
+        } idProperty={'_id'}{...this.props.maintenanceEntriesActions} {...this.props.maintenanceEntriesProperties} asynchronus > </MaintenenceEntriesTable>
         <EditMaintenenceEntryDialog initialMaintenenceEntry={this.state.maintenenceEntryToEdit} mode={this.state.maintenenceEntryEditorMode}
-          onClose={ this.onCloseEditMaintenenceEntryDialog } />
-       </>
+          onClose={this.onCloseEditMaintenenceEntryDialog} />
+      </>
     );
   }
 
-  componentDidMount(){
-    this.props.onLoadMenteneceEntries();
+  public componentDidMount() {
+    this.props.maintenanceEntriesActions.onRefresh();
+    this.props.onLoadMaintenanceEntries();
   }
 
   private onOpenPlus1hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
@@ -186,13 +186,13 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
     event.preventDefault();
     event.stopPropagation();
     const startTime = (new Date().valueOf());
-    const endTime = startTime ;
+    const endTime = startTime;
     this.setState({
       maintenenceEntryToEdit: {
         ...entry,
         ...(entry.start && endTime)
-          ? { start: entry.start, end: entry.end }
-          : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime)}
+          ? { start: convertToLocaleString(entry.start), end: convertToLocaleString(entry.end) }
+          : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) }
       },
       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
     });
@@ -207,7 +207,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
       maintenenceEntryToEdit: {
         ...entry,
         ...(entry.start && endTime)
-          ? { start: entry.start, end: entry.end }
+          ? { start: convertToLocaleString(entry.start), end: convertToLocaleString(entry.end) }
           : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) }
       },
       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.RemoveMaintenenceEntry