diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/eventLogApp')
3 files changed, 171 insertions, 18 deletions
diff --git a/sdnr/wt/odlux/apps/eventLogApp/package.json b/sdnr/wt/odlux/apps/eventLogApp/package.json index 4e98a1756..dfcebfe63 100644 --- a/sdnr/wt/odlux/apps/eventLogApp/package.json +++ b/sdnr/wt/odlux/apps/eventLogApp/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/eventLogApp/src/components/refreshEventLogDialog.tsx b/sdnr/wt/odlux/apps/eventLogApp/src/components/refreshEventLogDialog.tsx new file mode 100644 index 000000000..7d86e9f04 --- /dev/null +++ b/sdnr/wt/odlux/apps/eventLogApp/src/components/refreshEventLogDialog.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 { eventLogReloadAction } from '../handlers/eventLogHandler'; +import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; + +import { EventLogType } from '../models/eventLogType'; + +export enum RefreshEventLogDialogMode { + None = "none", + RefreshEventLogTable = "RefreshEventLogTable", +} + +const mapDispatch = (dispatcher: IDispatcher) => ({ + refreshEventLog: () => dispatcher.dispatch(eventLogReloadAction) +}); + +type DialogSettings = { + dialogTitle: string, + dialogDescription: string, + applyButtonText: string, + cancelButtonText: string, + enableMountIdEditor: boolean, + enableUsernameEditor: boolean, + enableExtendedEditor: boolean, +} + +const settings: { [key: string]: DialogSettings } = { + [RefreshEventLogDialogMode.None]: { + dialogTitle: "", + dialogDescription: "", + applyButtonText: "", + cancelButtonText: "", + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, + [RefreshEventLogDialogMode.RefreshEventLogTable]: { + dialogTitle: "Do you want to refresh the Event Log?", + dialogDescription: "", + applyButtonText: "Yes", + cancelButtonText: "Cancel", + enableMountIdEditor: true, + enableUsernameEditor: true, + enableExtendedEditor: true, + } +} + +type RefreshEventLogDialogComponentProps = Connect<undefined, typeof mapDispatch> & { + mode: RefreshEventLogDialogMode; + onClose: () => void; +}; + +type RefreshEventLogDialogComponentState = EventLogType & { isNameValid: boolean, isHostSet: boolean }; + +class RefreshEventLogDialogComponent extends React.Component<RefreshEventLogDialogComponentProps, RefreshEventLogDialogComponentState> { + constructor(props: RefreshEventLogDialogComponentProps) { + super(props); + } + + render(): JSX.Element { + const setting = settings[this.props.mode]; + return ( + <Dialog open={this.props.mode !== RefreshEventLogDialogMode.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.refreshEventLog(); + this.props.onClose(); + }; + + private onCancel = () => { + this.props.onClose(); + } +} + +export const RefreshEventLogDialog = connect(undefined, mapDispatch)(RefreshEventLogDialogComponent); +export default RefreshEventLogDialog;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx b/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx index 3d81e4e46..748c66e51 100644 --- a/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx +++ b/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx @@ -19,10 +19,12 @@ import * as React from "react"; import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import Refresh from '@material-ui/icons/Refresh'; import { EventLogType } from '../models/eventLogType'; import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; import { createEventLogProperties, createEventLogActions } from "../handlers/eventLogHandler"; +import RefreshEventLogDialog, { RefreshEventLogDialogMode } from '../components/refreshEventLogDialog'; const EventLogTable = MaterialTable as MaterialTableCtorType<EventLogType & { _id: string }>; @@ -35,22 +37,56 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ eventLogActions: createEventLogActions(dispatcher.dispatch) }); +type EventLogComponentProps = Connect<typeof mapProps, typeof mapDispatch>; +type EventLogComponentState = { + refreshEventLogEditorMode: RefreshEventLogDialogMode +} let initalSorted = false; -class EventLogComponent extends React.Component<Connect<typeof mapProps, typeof mapDispatch>> { - render() { - return <EventLogTable stickyHeader title="Event Log" tableId="event-log-table" idProperty="_id" columns={[ - { property: "nodeId", title: "Node Name" }, - { property: "counter", title: "Counter" }, - { property: "timestamp", title: "Timestamp" }, - { property: "objectId", title: "Object ID" }, - { property: "attributeName", title: "Attribute Name" }, - { property: "newValue", title: "Message" }, - { property: "sourceType", title: "Source" } - ]} {...this.props.eventLogActions} {...this.props.eventLogProperties} > - </EventLogTable> +class EventLogComponent extends React.Component<EventLogComponentProps, EventLogComponentState> { + constructor(props: EventLogComponentProps) { + super(props); + + this.state = { + refreshEventLogEditorMode: RefreshEventLogDialogMode.None + }; + } + + render(): JSX.Element { + + const refreshEventLogAction = { + icon: Refresh, tooltip: 'Refresh Event log', onClick: () => { + this.setState({ + refreshEventLogEditorMode: RefreshEventLogDialogMode.RefreshEventLogTable + }); + } + }; + return ( + <> + <EventLogTable stickyHeader title="Event Log" tableId="event-log-table" idProperty="_id" customActionButtons={[refreshEventLogAction]} + columns={[ + { property: "nodeId", title: "Node Name" }, + { property: "counter", title: "Counter" }, + { property: "timestamp", title: "Timestamp" }, + { property: "objectId", title: "Object ID" }, + { property: "attributeName", title: "Attribute Name" }, + { property: "newValue", title: "Message" }, + { property: "sourceType", title: "Source" } + ]} {...this.props.eventLogActions} {...this.props.eventLogProperties} > + </EventLogTable> + <RefreshEventLogDialog + mode={this.state.refreshEventLogEditorMode} + onClose={this.onCloseRefreshEventLogDialog} + /> + </> + ) } + private onCloseRefreshEventLogDialog = () => { + this.setState({ + refreshEventLogEditorMode: RefreshEventLogDialogMode.None + }); + } componentDidMount() { if (!initalSorted) { |