X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=sdnr%2Fwt%2Fodlux%2Fapps%2FconnectApp%2Fsrc%2Fcomponents%2FinfoNetworkElementDialog.tsx;h=4841b938954e6489182a48196228f6b2ebe71763;hb=refs%2Fchanges%2F89%2F133689%2F8;hp=df8515e58c942fed3c856291f0fd607005c54292;hpb=640c4e96c0ea3bff8932436ab8227c89912b72f9;p=ccsdk%2Ffeatures.git

diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
index df8515e58..4841b9389 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
@@ -17,48 +17,45 @@
  */
 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;
@@ -82,73 +79,80 @@ class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkEleme
 
   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;
   }
 }