diff options
author | Herbert Eiselt <herbert.eiselt@highstreet-technologies.com> | 2019-02-11 14:54:12 +0100 |
---|---|---|
committer | Herbert Eiselt <herbert.eiselt@highstreet-technologies.com> | 2019-02-11 14:54:53 +0100 |
commit | 3d202a04b99f0e61b6ccf8b7a5610e1a15ca58e7 (patch) | |
tree | ab756cfa8de5eced886d3947423d198be8c0ce62 /sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx | |
parent | 12a8c669f52c0e84d580c078cee849b25133b585 (diff) |
Add sdnr wt odlux
Add complete sdnr wireless transport app odlux core and apps
Change-Id: I5dcbfb8f3b790e3bda7c8df67bd69d81958f65e5
Issue-ID: SDNC-576
Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx new file mode 100644 index 000000000..432103128 --- /dev/null +++ b/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx @@ -0,0 +1,196 @@ +import * as React from 'react'; +import { Theme, createStyles, WithStyles, withStyles, Tooltip } from '@material-ui/core'; + +import AddIcon from '@material-ui/icons/Add'; +import LinkOffIcon from '@material-ui/icons/LinkOff'; +import AddCircleIcon from '@material-ui/icons/AddCircleOutline'; + +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; + +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect'; +import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; + +import { RequiredNetworkElementType } from '../models/requiredNetworkElements'; +import { IMountedNetworkElementsState } from '../handlers/mountedNetworkElementsHandler'; +import EditNetworkElementDialog, { EditNetworkElementDialogMode } from './editNetworkElementDialog'; +import { NetworkElementBaseType } from 'models/networkElementBase'; + + +const styles = (theme: Theme) => createStyles({ + button: { + margin: 0, + padding: "6px 6px", + minWidth: 'unset' + }, + spacer: { + marginLeft: theme.spacing.unit, + marginRight: theme.spacing.unit, + display: "inline" + } +}); + +const mapProps = ({ connectApp: state }: IApplicationStoreState) => ({ + mountedNetworkElements: state.mountedNetworkElements +}); + +const mapDispatch = (dispatcher: IDispatcher) => ({ + navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)), +}); +type UnknownNetworkElementDisplayType = NetworkElementBaseType & { + connectionStatus: string, + coreModelRev: string, + airInterfaceRev: string +} + +type UnknownNetworkElementsListProps = WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch> & {} + +type UnknownNetworkElementsListState = { + + unknownNetworkElements: UnknownNetworkElementDisplayType[]; + + networkElementToEdit: RequiredNetworkElementType; + networkElementEditorMode: EditNetworkElementDialogMode; +} + + +const emptyRequireNetworkElement = { mountId: '', host: '', port: 0 }; +const UnknownNetworkElementTable = MaterialTable as MaterialTableCtorType<UnknownNetworkElementDisplayType>; +export class UnknownNetworkElementsListComponent extends React.Component<UnknownNetworkElementsListProps, UnknownNetworkElementsListState> { + + constructor(props: UnknownNetworkElementsListProps) { + super(props); + + this.state = { + unknownNetworkElements: [], + networkElementToEdit: emptyRequireNetworkElement, + networkElementEditorMode: EditNetworkElementDialogMode.None, + }; + } + + static getDerivedStateFromProps(props: UnknownNetworkElementsListProps, state: UnknownNetworkElementsListState & { _mountedNetworkElements: IMountedNetworkElementsState }) { + if (props.mountedNetworkElements != state._mountedNetworkElements) { + state.unknownNetworkElements = props.mountedNetworkElements.elements.filter(element => !element.required).map(element => { + + // handle onfCoreModelRevision + const onfCoreModelRevision = element.capabilities.find((cap) => { + return cap.module === 'core-model' || cap.module === 'CoreModel-CoreNetworkModule-ObjectClasses' ; + }); + const onfAirInterfaceRevision = element.capabilities.find((cap) => { + return cap.module === 'microwave-model' || cap.module === 'MicrowaveModel-ObjectClasses-AirInterface' ; + }); + return { + mountId: element.mountId, + host: element.host, + port: element.port, + connectionStatus: element.connectionStatus, + coreModelRev: onfCoreModelRevision && onfCoreModelRevision.revision || 'unknown', + airInterfaceRev: onfAirInterfaceRevision && onfAirInterfaceRevision.revision || 'unknown' + } + } + ); + } + return state; + } + + render(): JSX.Element { + const { classes } = this.props; + const { networkElementToEdit, networkElementEditorMode, unknownNetworkElements } = this.state; + const addRequireNetworkElementAction = { + icon: AddIcon, tooltip: 'Add', onClick: () => { + this.setState({ + networkElementEditorMode: EditNetworkElementDialogMode.MountNetworkElementToUnknonwNetworkElements, + networkElementToEdit: emptyRequireNetworkElement, + }); + } + }; + return ( + <> + <UnknownNetworkElementTable customActionButtons={ [addRequireNetworkElementAction] } asynchronus rows={ unknownNetworkElements } columns={ [ + { property: "mountId", title: "Name", type: ColumnType.text }, + { property: "connectionStatus", title: "Connection Status", type: ColumnType.text }, + { property: "host", title: "Host", type: ColumnType.text }, + { property: "port", title: "Port", type: ColumnType.text }, + { property: "coreModelRev", title: "Core Model", type: ColumnType.text }, + { property: "airInterfaceRev", title: "Air interface", type: ColumnType.text }, + { + property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => ( + <> + <div className={ classes.spacer }> + <Tooltip title={ "Unmount" } ><IconButton className={ classes.button } onClick={ event => this.onOpenUnmountdNetworkElementsDialog(event, rowData) } ><LinkOffIcon /></IconButton></Tooltip> + <Tooltip title={ "Add to required" } ><IconButton className={ classes.button } onClick={ event => this.onOpenAddToRequiredNetworkElementsDialog(event, rowData) } ><AddCircleIcon /></IconButton></Tooltip> + </div> + <div className={ classes.spacer }> + <Tooltip title={ "Info" } ><Button className={ classes.button } >I</Button></Tooltip> + </div> + <div className={ classes.spacer }> + <div className={ classes.spacer }> + <Tooltip title={ "Fault" } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("faultApp", rowData) } >F</Button></Tooltip> + <Tooltip title={ "Configure" } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("configureApp", rowData) } >C</Button></Tooltip> + <Tooltip title={ "Accounting " } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("accountingApp", rowData) }>A</Button></Tooltip> + <Tooltip title={ "Performance" } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("performanceApp", rowData) }>P</Button></Tooltip> + <Tooltip title={ "Security" } ><Button className={ classes.button } onClick={ this.navigateToApplicationHandlerCreator("securityApp", rowData) }>S</Button></Tooltip> + </div> + </div> + </> + ) + }, + ] } idProperty="mountId" > + </UnknownNetworkElementTable> + + <EditNetworkElementDialog + mode={ networkElementEditorMode } + initialNetworkElement={ networkElementToEdit } + onClose={ this.onCloseEditNetworkElementDialog } + /> + </> + ); + }; + + private onOpenAddToRequiredNetworkElementsDialog = (event: React.MouseEvent<HTMLElement>, element: UnknownNetworkElementDisplayType) => { + this.setState({ + networkElementToEdit: { + mountId: element.mountId, + host: element.host, + port: element.port, + username: 'admin', + password: 'admin', + }, + networkElementEditorMode: EditNetworkElementDialogMode.UnknownNetworkElementToRequiredNetworkElements + }); + event.preventDefault(); + event.stopPropagation(); + } + + private onOpenUnmountdNetworkElementsDialog = (event: React.MouseEvent<HTMLElement>, element: UnknownNetworkElementDisplayType) => { + this.setState({ + networkElementToEdit: { + mountId: element.mountId, + host: element.host, + port: element.port + }, + networkElementEditorMode: EditNetworkElementDialogMode.UnmountNetworkElement + }); + event.preventDefault(); + event.stopPropagation(); + } + + private onCloseEditNetworkElementDialog = () => { + this.setState({ + networkElementEditorMode: EditNetworkElementDialogMode.None, + networkElementToEdit: emptyRequireNetworkElement, + }); + } + + private navigateToApplicationHandlerCreator = (applicationName: string, element: NetworkElementBaseType) => (event: React.MouseEvent<HTMLElement>) => { + this.props.navigateToApplication(applicationName, element.mountId); + event.preventDefault(); + event.stopPropagation(); + } + +} + +export const UnknownNetworkElementsList = withStyles(styles)(connect(mapProps, mapDispatch)(UnknownNetworkElementsListComponent)); +export default UnknownNetworkElementsList; |