src/app/browse/Browse.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import React, { Component } from 'react';
  22 import BrowseGallery from './BrowseGallery.jsx';
  23 import { GlobalExtConstants }  from 'utils/GlobalExtConstants.js';
  24 import {ExportExcel} from 'utils/ExportExcel.js';
  25
  26 let INVLIST = GlobalExtConstants.INVLIST;
  27 let getDescriptionForNodes = ExportExcel.getDescriptionForNodes;
  28
  29 /**
  30  *  The Browse container is responsible for the browse page in the app.
  31  *  This container displays all the different node types you can explore,
  32  *  and provides links to navigate to the Model container where you can explore
  33  *  specific nodes.
  34  */
  35
  36 let invList = null;
  37
  38 class Browse extends Component {
  39
  40   render() {
  41     // Grab the inv list json file, map all the node types and sort it
  42     const invKeys = Object.keys(INVLIST.INVENTORYLIST);
  43
  44     invList = invKeys.map(item => {
  45       return { item: item, detail: INVLIST.INVENTORYLIST[item] };
  46     });
  47
  48
  49     invList.sort((a, b) => {
  50       var displayA = a.detail.display.toLowerCase();
  51       var displayB = b.detail.display.toLowerCase();
  52
  53       if (displayA < displayB) {
  54         return -1;
  55       }
  56
  57       if (displayA > displayB) {
  58         return 1;
  59       }
  60
  61       return 0;
  62     });
  63
  64     let nodesDesc=getDescriptionForNodes();
  65     return (
  66      <div>
  67         <header className='addPadding jumbotron my-4'>
  68           <h1 className='display-2'>Browse Network Elements</h1>
  69           <p className='lead'>
  70             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.
  71           </p>
  72         </header>
  73         <div className='browse-content'>
  74           <BrowseGallery
  75             invList={invList}
  76             descriptionList={nodesDesc}/>
  77         </div>
  78       </div>
  79     );
  80   }
  81 }
  82
  83 export default Browse;