Updated Sparky to add ECOMP functionality Browse, Specialized Search, BYOQ, and the Builder FE Updates

Issue-ID: AAI-3250
Change-Id: I576e37f77f7e9b40d72e4a5e7de645e9f62bc7d2
Signed-off-by: wr148d <wr148d@att.com>

4 files changed, 198 insertions, 0 deletions

diff --git a/src/app/browse/Browse.jsx b/src/app/browse/Browse.jsx
new file mode 100644
index 0000000..918388a
--- /dev/null
+++ b/src/app/browse/Browse.jsx
@@ -0,0 +1,83 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T 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 React, { Component } from 'react';
+import BrowseGallery from './BrowseGallery.jsx';
+import { GlobalExtConstants }  from 'utils/GlobalExtConstants.js';
+import {ExportExcel} from 'utils/ExportExcel.js';
+
+let INVLIST = GlobalExtConstants.INVLIST;
+let getDescriptionForNodes = ExportExcel.getDescriptionForNodes;
+
+/**
+ *  The Browse container is responsible for the browse page in the app.
+ *  This container displays all the different node types you can explore,
+ *  and provides links to navigate to the Model container where you can explore
+ *  specific nodes.
+ */
+
+let invList = null;
+
+class Browse extends Component {
+  
+  render() {
+    // Grab the inv list json file, map all the node types and sort it
+    const invKeys = Object.keys(INVLIST.INVENTORYLIST);
+
+    invList = invKeys.map(item => {
+      return { item: item, detail: INVLIST.INVENTORYLIST[item] };
+    });
+
+
+    invList.sort((a, b) => {
+      var displayA = a.detail.display.toLowerCase();
+      var displayB = b.detail.display.toLowerCase();
+
+      if (displayA < displayB) {
+        return -1;
+      }
+
+      if (displayA > displayB) {
+        return 1;
+      }
+
+      return 0;
+    });
+
+    let nodesDesc=getDescriptionForNodes();
+    return (
+     <div>
+        <header className='addPadding jumbotron my-4'>
+          <h1 className='display-2'>Browse Network Elements</h1>
+          <p className='lead'>
+            On this page you have the ability to browse the entire inventory of the database by network element type. Simply choose the network element type you would like to browse.
+          </p>
+        </header>
+        <div className='browse-content'>
+          <BrowseGallery
+            invList={invList} 
+            descriptionList={nodesDesc}/>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Browse;
diff --git a/src/app/browse/BrowseCard.jsx b/src/app/browse/BrowseCard.jsx
new file mode 100644
index 0000000..dafb878
--- /dev/null
+++ b/src/app/browse/BrowseCard.jsx
@@ -0,0 +1,45 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T 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 React from 'react';
+import Col from 'react-bootstrap/lib/Col';
+import { Link } from 'react-router-dom';
+
+const BrowseCard = (props) => (
+<Link to={'/model/' + props.browseModel}>
+  <Col lg={2} md={3} sm={4}>
+    <div className='card' title={props.browseDesc}>
+      <div className='card-content browse-card-content'>
+        <i className={props.browseIcon} aria-hidden='true'> </i>
+        <div className='card-block'>
+          <h3 className='card-title'>
+            {props.browseName}
+          </h3>
+        </div>
+      </div>
+      <div className='card-footer'>
+          <button type='button' className='btn btn-outline-primary'>Browse</button>
+      </div>
+    </div>
+  </Col>
+  </Link>
+);
+
+export default BrowseCard;
diff --git a/src/app/browse/BrowseConstants.js b/src/app/browse/BrowseConstants.js
new file mode 100644
index 0000000..4060806
--- /dev/null
+++ b/src/app/browse/BrowseConstants.js
@@ -0,0 +1,19 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T 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=========================================================
+ */
diff --git a/src/app/browse/BrowseGallery.jsx b/src/app/browse/BrowseGallery.jsx
new file mode 100644
index 0000000..6ead03c
--- /dev/null
+++ b/src/app/browse/BrowseGallery.jsx
@@ -0,0 +1,51 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T 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 React from 'react';
+import BrowseCard from 'app/browse/BrowseCard.jsx';
+import Grid from 'react-bootstrap/lib/Grid';
+import Row from 'react-bootstrap/lib/Row';
+
+const browseGallery = (props) => {
+	
+	// Build all the BrowseCards
+	const cards = props.invList.map((item) => {
+		return (
+			<BrowseCard
+				key={item.item}
+				browseItem={item.item}
+				browseName={item.detail.display}
+				browseModel={item.detail.modelPath}
+				browseIcon={item.detail.icon}
+				browsePath={item.detail.apiPath} 
+				browseDesc={props.descriptionList[0][item.detail.modelPath]}/>
+		);
+	});
+	// Return jsx to caller
+	return (
+		<Grid>
+			<Row className='show-grid'>
+				{cards}
+			</Row>
+		</Grid>
+	);
+};
+
+export default browseGallery;