diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/connectApp/src/components')
| -rw-r--r-- | sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx | 281 | ||||
| -rw-r--r-- | sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx | 14 |
2 files changed, 151 insertions, 144 deletions
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx index df8515e58..9b71eb354 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx @@ -15,142 +15,145 @@ * 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 Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; -import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; - -import { NetworkElementConnection } from '../models/networkElementConnection'; -import { AvailableCapabilities } from '../models/yangCapabilitiesType' - -export enum InfoNetworkElementDialogMode { - None = "none", - InfoNetworkElement = "infoNetworkElement" -} - -const mapDispatch = (dispatcher: IDispatcher) => ({ -}); - -type DialogSettings = { - dialogTitle: string, - dialogDescription: string, - cancelButtonText: string, -} - -const settings: { [key: string]: DialogSettings } = { - [InfoNetworkElementDialogMode.None]: { - dialogTitle: "", - dialogDescription: "", - cancelButtonText: "", - }, - [InfoNetworkElementDialogMode.InfoNetworkElement]: { - dialogTitle: "Yang capabilities of the network element", - dialogDescription: "Available capabilities of the network element", - cancelButtonText: "OK", - } -} - -type InfoNetworkElementDialogComponentProps = Connect<undefined, typeof mapDispatch> & { - mode: InfoNetworkElementDialogMode; - initialNetworkElement: NetworkElementConnection; - onClose: () => void; -}; - -type InfoNetworkElementDialogComponentState = NetworkElementConnection; - -class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkElementDialogComponentProps, InfoNetworkElementDialogComponentState> { - constructor(props: InfoNetworkElementDialogComponentProps) { - super(props); - - this.state = { - nodeId: this.props.initialNetworkElement.nodeId, - isRequired: false, - host: this.props.initialNetworkElement.host, - port: this.props.initialNetworkElement.port, - }; - } - - render(): JSX.Element { - const setting = settings[this.props.mode]; - const availableCapabilities = this.props.state.connect.elementInfo.elementInfo["netconf-node-topology:available-capabilities"]["available-capability"]; - let yangCapabilities: AvailableCapabilities[] = []; - - availableCapabilities.forEach(value => { - const capabilty = value.capability; - const indexRevision = capabilty.indexOf("revision="); - const indexModule = capabilty.indexOf(")", indexRevision); - if (indexRevision > 0 && indexModule > 0) { - yangCapabilities.push({ - module: capabilty.substr(indexModule + 1), - revision: capabilty.substr(indexRevision + 9, 10) - }); - } - }); - - yangCapabilities = yangCapabilities.sort((a,b) => a.module === b.module ? 0 : a.module > b.module ? 1 : -1); - - return ( - <Dialog open={this.props.mode !== InfoNetworkElementDialogMode.None}> - <DialogTitle id="form-dialog-title">{setting.dialogTitle}</DialogTitle> - <DialogContent> - <DialogContentText> - {setting.dialogDescription + " " + this.state.nodeId} - </DialogContentText> - <Table aria-label="yang-capabilities-table"> - <TableHead> - <TableRow> - <TableCell align="right">S.No</TableCell> - <TableCell >Module</TableCell> - <TableCell >Revision</TableCell> - </TableRow> - </TableHead> - <TableBody> - {yangCapabilities.map((yang, index) => ( - <TableRow aria-label="yang-capabilities-row"> - <TableCell>{index + 1}</TableCell> - <TableCell aria-label="yang-module"><a href={`/yang-schema/${yang.module}`} target={"_blank"}> {yang.module} </a></TableCell> - <TableCell aria-label="yang-revision">{yang.revision}</TableCell> - </TableRow> - ))} - </TableBody> - </Table> - </DialogContent> - <DialogActions> - <Button aria-label="ok-button" onClick={(event) => { - this.onCancel(); - event.preventDefault(); - event.stopPropagation(); - }} color="secondary"> {setting.cancelButtonText} </Button> - </DialogActions> - </Dialog> - ) - } - - private onCancel = () => { - this.props.onClose(); - } - - static getDerivedStateFromProps(props: InfoNetworkElementDialogComponentProps, state: InfoNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection }): InfoNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection } { - if (props.initialNetworkElement !== state._initialNetworkElement) { - state = { - ...state, - ...props.initialNetworkElement, - _initialNetworkElement: props.initialNetworkElement, - }; - } - return state; - } -} - -export const InfoNetworkElementDialog = connect(undefined, mapDispatch)(InfoNetworkElementDialogComponent); -export default InfoNetworkElementDialog;
\ No newline at end of file + 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 DialogTitle from '@material-ui/core/DialogTitle'; + import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; + import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; + + import { NetworkElementConnection } from '../models/networkElementConnection'; + import { AvailableCapabilities } from '../models/yangCapabilitiesType' + + export enum InfoNetworkElementDialogMode { + None = "none", + InfoNetworkElement = "infoNetworkElement" + } + + const mapDispatch = (dispatcher: IDispatcher) => ({ + }); + + + const InfoElementTable = MaterialTable as MaterialTableCtorType<AvailableCapabilities>; + + type DialogSettings = { + dialogTitle: string, + dialogDescription: string, + cancelButtonText: string, + } + + const settings: { [key: string]: DialogSettings } = { + [InfoNetworkElementDialogMode.None]: { + dialogTitle: "", + dialogDescription: "", + cancelButtonText: "", + }, + [InfoNetworkElementDialogMode.InfoNetworkElement]: { + dialogTitle: "Yang capabilities of the network element", + dialogDescription: "", + cancelButtonText: "OK", + } + } + + type InfoNetworkElementDialogComponentProps = Connect<undefined, typeof mapDispatch> & { + mode: InfoNetworkElementDialogMode; + initialNetworkElement: NetworkElementConnection; + onClose: () => void; + }; + + type InfoNetworkElementDialogComponentState = NetworkElementConnection; + + class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkElementDialogComponentProps, InfoNetworkElementDialogComponentState> { + constructor(props: InfoNetworkElementDialogComponentProps) { + super(props); + + this.state = { + nodeId: this.props.initialNetworkElement.nodeId, + isRequired: false, + host: this.props.initialNetworkElement.host, + port: this.props.initialNetworkElement.port, + }; + } + + render(): JSX.Element { + const setting = settings[this.props.mode]; + const availableCapabilities = this.props.state.connect.elementInfo.elementInfo["netconf-node-topology:available-capabilities"]["available-capability"]; + let yangFeatures = this.props.state.connect.elementFeatureInfo.elementFeatureInfo; + let yangCapabilities: AvailableCapabilities[] = []; + + availableCapabilities.forEach(value => { + const capabilty = value.capability; + const indexRevision = capabilty.indexOf("revision="); + const indexModule = capabilty.indexOf(")", indexRevision); + if (indexRevision > 0 && indexModule > 0) { + let moduleName = capabilty.substr(indexModule + 1); + let ModuleFeaturesList; + for(let index = 0; index < yangFeatures.length; index++) { + if(yangFeatures[index].name == moduleName) { + ModuleFeaturesList = yangFeatures[index].feature? yangFeatures[index].feature : null; + break; + } + } + const featuresListCommaSeparated= ModuleFeaturesList? ModuleFeaturesList.toString() : "" + let featuresList = featuresListCommaSeparated.replace(',',', '); + + yangCapabilities.push({ + module: moduleName, + revision: capabilty.substr(indexRevision + 9, 10), + features: featuresList + }); + } + }); + + yangCapabilities = yangCapabilities.sort((a,b) => a.module === b.module ? 0 : a.module > b.module ? 1 : -1); + + return ( + <> + <Dialog open={this.props.mode !== InfoNetworkElementDialogMode.None} > + <DialogTitle id="form-dialog-title">{setting.dialogTitle + ' - ' + this.state.nodeId}</DialogTitle> + <InfoElementTable stickyHeader tableId="info-element-table" asynchronus columns={[ + { property: "module", title: "Module", type: ColumnType.text, width:900 }, + { + property: "revision", title: "Revision", type: ColumnType.custom, customControl: ({ rowData }) => { + return ( + <div> + <a href={'/yang-schema/' + rowData.module + '/' + rowData.revision} target="_blank" > {rowData.revision} </a> + </div> + ) + } + }, + { property: "features", title: "Features", type: ColumnType.text, width:500 }, + ]} idProperty="id" rows={yangCapabilities} > + </InfoElementTable> + <DialogActions> + <Button aria-label="ok-button" onClick={(event) => { + this.onCancel(); + event.preventDefault(); + event.stopPropagation(); + }} color="secondary"> {setting.cancelButtonText} </Button> + </DialogActions> + </Dialog> + </> + ) + } + + private onCancel = () => { + this.props.onClose(); + } + + static getDerivedStateFromProps(props: InfoNetworkElementDialogComponentProps, state: InfoNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection }): InfoNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection } { + if (props.initialNetworkElement !== state._initialNetworkElement) { + state = { + ...state, + ...props.initialNetworkElement, + _initialNetworkElement: props.initialNetworkElement, + }; + } + return state; + } + } + + export const InfoNetworkElementDialog = connect(undefined, mapDispatch)(InfoNetworkElementDialogComponent); + export default InfoNetworkElementDialog;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx index 84a22a99a..73706f678 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx @@ -36,12 +36,12 @@ import { NavigateToApplication } from '../../../../framework/src/actions/navigat import { createNetworkElementsActions, createNetworkElementsProperties } from '../handlers/networkElementsHandler'; import { NetworkElementConnection } from '../models/networkElementConnection'; -import { TopologyNode } from '../models/topologyNetconf'; +import { ModuleSet, TopologyNode } from '../models/topologyNetconf'; import EditNetworkElementDialog, { EditNetworkElementDialogMode } from './editNetworkElementDialog'; import RefreshNetworkElementsDialog, { RefreshNetworkElementsDialogMode } from './refreshNetworkElementsDialog'; import InfoNetworkElementDialog, { InfoNetworkElementDialogMode } from './infoNetworkElementDialog'; -import { loadAllInfoElementAsync } from '../actions/infoNetworkElementActions'; +import { loadAllInfoElementAsync, loadAllInfoElementFeaturesAsync } from '../actions/infoNetworkElementActions'; import { connectService } from '../services/connectService'; import { getAccessPolicyByUrl } from '../../../../framework/src/services/restService'; @@ -92,6 +92,7 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ networkElementsActions: createNetworkElementsActions(dispatcher.dispatch), navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)), networkElementInfo: async (nodeId: string) => await dispatcher.dispatch(loadAllInfoElementAsync(nodeId)), + networkElementFeaturesInfo: async (nodeId: string) => await dispatcher.dispatch(loadAllInfoElementFeaturesAsync(nodeId)) }); type NetworkElementsListComponentProps = WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch>; @@ -100,7 +101,8 @@ type NetworkElementsListComponentState = { networkElementEditorMode: EditNetworkElementDialogMode, refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode, infoNetworkElementEditorMode: InfoNetworkElementDialogMode, - elementInfo: TopologyNode | null + elementInfo: TopologyNode | null, + elementInfoFeature: ModuleSet | null } const emptyRequireNetworkElement: NetworkElementConnection = { id: "", nodeId: "", host: "", port: 0, status: "Disconnected", isRequired: false }; @@ -117,6 +119,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement networkElementEditorMode: EditNetworkElementDialogMode.None, refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.None, elementInfo: null, + elementInfoFeature:null, infoNetworkElementEditorMode: InfoNetworkElementDialogMode.None }; } @@ -164,7 +167,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement const canAdd = true; const addRequireNetworkElementAction = { - icon: AddIcon, tooltip: 'Add', onClick: () => { + icon: AddIcon, tooltip: 'Add', ariaLabel:"add-element", onClick: () => { this.setState({ networkElementEditorMode: EditNetworkElementDialogMode.AddNewNetworkElement, networkElementToEdit: emptyRequireNetworkElement, @@ -173,7 +176,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement }; const refreshNetworkElementsAction = { - icon: Refresh, tooltip: 'Refresh Network Elements table', onClick: () => { + icon: Refresh, tooltip: 'Refresh Network Elements table', ariaLabel:'refresh', onClick: () => { this.setState({ refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.RefreshNetworkElementsTable }); @@ -266,6 +269,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement private onOpenInfoNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => { this.props.networkElementInfo(element.nodeId); + this.props.networkElementFeaturesInfo(element.nodeId); this.setState({ networkElementToEdit: element, infoNetworkElementEditorMode: InfoNetworkElementDialogMode.InfoNetworkElement, |