diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/maintenanceApp')
3 files changed, 171 insertions, 35 deletions
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/package.json b/sdnr/wt/odlux/apps/maintenanceApp/package.json index da5b3d288..d2980f1dc 100644 --- a/sdnr/wt/odlux/apps/maintenanceApp/package.json +++ b/sdnr/wt/odlux/apps/maintenanceApp/package.json @@ -25,17 +25,17 @@ "@odlux/connect-app": "*" }, "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/maintenanceApp/src/components/refreshMaintenanceEntries.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/components/refreshMaintenanceEntries.tsx new file mode 100644 index 000000000..1a00c70c4 --- /dev/null +++ b/sdnr/wt/odlux/apps/maintenanceApp/src/components/refreshMaintenanceEntries.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 { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; + +import { maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler'; +import { MaintenenceEntry } from '../models/maintenenceEntryType'; + +export enum RefreshMaintenanceEntriesDialogMode { + None = "none", + RefreshMaintenanceEntriesTable = "RefreshMaintenanceEntriesTable", +} + +const mapDispatch = (dispatcher: IDispatcher) => ({ + refreshMaintenanceEntries: () => dispatcher.dispatch(maintenanceEntriesReloadAction) +}); + +type DialogSettings = { + 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: "", + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, + [RefreshMaintenanceEntriesDialogMode.RefreshMaintenanceEntriesTable]: { + 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 }; + +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> + <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.refreshMaintenanceEntries(); + this.props.onClose(); + }; + + private onCancel = () => { + this.props.onClose(); + } +} + +export const RefreshMaintenanceEntriesDialog = connect(undefined, mapDispatch)(RefreshMaintenanceEntriesDialogComponent); +export default RefreshMaintenanceEntriesDialog;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx index f52d46d81..6b5071d90 100644 --- a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx +++ b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx @@ -25,9 +25,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import AddIcon from '@material-ui/icons/Add'; import EditIcon from '@material-ui/icons/Edit'; import RemoveIcon from '@material-ui/icons/RemoveCircleOutline'; - -import Button from '@material-ui/core/Button'; -import IconButton from '@material-ui/core/IconButton'; +import Refresh from '@material-ui/icons/Refresh'; +import { MenuItem, Divider, Typography } from '@material-ui/core'; import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; import MaterialTable, { MaterialTableCtorType, ColumnType } from '../../../../framework/src/components/material-table'; @@ -36,6 +35,7 @@ import { IApplicationStoreState } from '../../../../framework/src/store/applicat 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'; @@ -81,6 +81,7 @@ type MaintenenceViewComponentProps = Connect<typeof mapProps, typeof mapDispatch type MaintenenceViewComponentState = { maintenenceEntryToEdit: MaintenenceEntry; maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode; + refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode; }; let initialSorted = false; @@ -93,10 +94,22 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP 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 = { @@ -113,10 +126,19 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP }); } }; + + const refreshMaintenanceEntriesAction = { + icon: Refresh, tooltip: 'Refresh Maintenance Entries', onClick: () => { + this.setState({ + refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode.RefreshMaintenanceEntriesTable + }); + } + }; + const now = new Date().valueOf(); return ( <> - <MaintenenceEntriesTable stickyHeader tableId="maintenance-table" title={"Maintenance"} customActionButtons={[addMaintenenceEntryAction]} columns={ + <MaintenenceEntriesTable stickyHeader tableId="maintenance-table" title={"Maintenance"} customActionButtons={[refreshMaintenanceEntriesAction, addMaintenenceEntryAction]} columns={ [ { property: "nodeId", title: "Node Name", type: ColumnType.text }, { @@ -126,25 +148,16 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP }, { 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> - </> - ) - }, + { property: "end", title: "End Date (UTC)", type: ColumnType.text } ] - } idProperty={'_id'}{...this.props.maintenanceEntriesActions} {...this.props.maintenanceEntriesProperties} asynchronus > </MaintenenceEntriesTable> + } 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} /> </> ); } @@ -162,8 +175,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP } private onOpenPlus1hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => { - event.preventDefault(); - event.stopPropagation(); + // event.preventDefault(); + // event.stopPropagation(); const startTime = (new Date().valueOf()); const endTime = startTime + (1 * 60 * 60 * 1000); this.setState({ @@ -177,8 +190,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP } private onOpenPlus8hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => { - event.preventDefault(); - event.stopPropagation(); + // event.preventDefault(); + // event.stopPropagation(); const startTime = (new Date().valueOf()); const endTime = startTime + (8 * 60 * 60 * 1000); this.setState({ @@ -192,8 +205,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP } private onOpenEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => { - event.preventDefault(); - event.stopPropagation(); + // event.preventDefault(); + // event.stopPropagation(); const startTime = (new Date().valueOf()); const endTime = startTime; this.setState({ @@ -208,8 +221,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP } private onOpenRemoveMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => { - event.preventDefault(); - event.stopPropagation(); + // event.preventDefault(); + // event.stopPropagation(); const startTime = (new Date().valueOf()); const endTime = startTime; this.setState({ @@ -229,7 +242,13 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.None, }); } + + private onCloseRefreshMaintenenceEntryDialog = () => { + this.setState({ + refreshMaintenenceEntriesEditorMode: RefreshMaintenanceEntriesDialogMode.None, + }); + } } export const MaintenenceView = withStyles(styles)(connect(mapProps, mapDispatcher)(MaintenenceViewComponent)); -export default MaintenenceView;
\ No newline at end of file +export default MaintenenceView; |