*/
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 Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect } from '../../../../framework/src/flux/connect';
import { NetworkElementConnection } from '../models/networkElementConnection';
-import { AvailableCapabilities } from '../models/yangCapabilitiesType'
+import { AvailableCapabilities } from '../models/yangCapabilitiesType';
export enum InfoNetworkElementDialogMode {
- None = "none",
- InfoNetworkElement = "infoNetworkElement"
+ None = 'none',
+ InfoNetworkElement = 'infoNetworkElement',
}
-const mapDispatch = (dispatcher: IDispatcher) => ({
+const mapDispatch = () => ({
});
+const InfoElementTable = MaterialTable as MaterialTableCtorType<AvailableCapabilities>;
+
type DialogSettings = {
- dialogTitle: string,
- dialogDescription: string,
- cancelButtonText: string,
-}
+ dialogTitle: string;
+ dialogDescription: string;
+ cancelButtonText: string;
+};
const settings: { [key: string]: DialogSettings } = {
[InfoNetworkElementDialogMode.None]: {
- dialogTitle: "",
- dialogDescription: "",
- cancelButtonText: "",
+ dialogTitle: '',
+ dialogDescription: '',
+ cancelButtonText: '',
},
[InfoNetworkElementDialogMode.InfoNetworkElement]: {
- dialogTitle: "Yang capabilities of the network element",
- dialogDescription: "Available capabilities of the network element",
- cancelButtonText: "OK",
- }
-}
+ dialogTitle: 'YANG Capabilities of the Node',
+ dialogDescription: '',
+ cancelButtonText: 'OK',
+ },
+};
type InfoNetworkElementDialogComponentProps = Connect<undefined, typeof mapDispatch> & {
mode: InfoNetworkElementDialogMode;
render(): JSX.Element {
const setting = settings[this.props.mode];
- const availableCapabilities = this.props.state.connect.elementInfo.elementInfo["netconf-node-topology:available-capabilities"]["available-capability"];
+ 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);
+ const indexRevision = capabilty.indexOf('revision=');
+ const indexModule = capabilty.indexOf(')', indexRevision);
if (indexRevision > 0 && indexModule > 0) {
+ let moduleName = capabilty.substring(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: capabilty.substr(indexModule + 1),
- revision: capabilty.substr(indexRevision + 9, 10)
+ module: moduleName,
+ revision: capabilty.substring(indexRevision + 9, indexRevision + 19),
+ features: featuresList,
});
}
});
- yangCapabilities = yangCapabilities.sort((a,b) => a.module === b.module ? 0 : a.module > b.module ? 1 : -1);
+ 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>
- )
+ <>
+ <Dialog open={this.props.mode !== InfoNetworkElementDialogMode.None} >
+ <DialogTitle id="form-dialog-title">{`${setting.dialogTitle}: "${this.state.nodeId}"`}</DialogTitle>
+ <InfoElementTable stickyHeader isPopup tableId="info-element-table" asynchronus columns={[
+ { property: 'module', title: 'YANG Capability', 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 = {
+ static getDerivedStateFromProps(props: InfoNetworkElementDialogComponentProps, state: InfoNetworkElementDialogComponentState & { initialNetworkElement: NetworkElementConnection }): InfoNetworkElementDialogComponentState & { initialNetworkElement: NetworkElementConnection } {
+ let returnState = state;
+ if (props.initialNetworkElement !== state.initialNetworkElement) {
+ returnState = {
...state,
...props.initialNetworkElement,
- _initialNetworkElement: props.initialNetworkElement,
+ initialNetworkElement: props.initialNetworkElement,
};
}
- return state;
+ return returnState;
}
}
Code Review / ccsdk / features.git / blobdiff