skyquake/plugins/launchpad/src/recordViewer/recordNavigator.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React from 'react';
  20 import RecordViewActions from './recordViewActions.js';
  21 import LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx';
  22 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
  23 import './recordNavigator.scss';
  24 import nsdImg from 'style/img/catalog-default.svg';
  25
  26 export default class RecordNavigator extends React.Component{
  27   constructor(props) {
  28     super(props)
  29   }
  30   render(){
  31     let navClass = 'catalogItems';
  32
  33     let self = this;
  34     let html;
  35     let className = this.props.isLoading ? 'loading' : '';
  36     let nav = [];
  37
  38     this.props.nav.map(function(n, k) {
  39       let itemClassName = navClass + '_item';
  40       let catalog_name = (n.type == 'nsr' ? <span>({n.nsd_name})</span> : '');
  41       let scalingGroupClass = '';
  42       let scalingGroupTitleClass = '';
  43       let scalingGroupTitle = '';
  44       let navObj = [];
  45       if (n.scalingGroupName) {
  46         scalingGroupClass = navClass + ' -is-scaled';
  47         scalingGroupTitleClass = scalingGroupClass + '_title';
  48         scalingGroupTitle = n.scalingGroupName + '_' + n.scalingGroupInstanceId;
  49         n.vnfr && n.vnfr.map((vnfr, vnfrIndex) => {
  50           let iClassName = itemClassName;
  51           if(vnfr.id == self.props.activeNavID) {
  52             iClassName += ' -is-selected';
  53           }
  54           navObj.push(
  55             <div key={'id' + k + '-' + vnfr.id}  onClick={self.props.loadRecord.bind(self,vnfr)} className={iClassName}>
  56               <img src={nsdImg} />
  57               <section id={vnfr.id}>
  58               <h1 title={vnfr.name}>{vnfr.name}</h1>
  59                 <h2>{vnfr.type}</h2>
  60               </section>
  61             </div>
  62           )
  63         });
  64       } else {
  65         if(n.id == self.props.activeNavID) {
  66           itemClassName += ' -is-selected';
  67         }
  68         navObj.push(
  69           <div key={'id' + k + '-' + n.id}  onClick={self.props.loadRecord.bind(self,n)} className={itemClassName}>
  70             <img src={nsdImg} />
  71             <section id={n.id}>
  72             <h1 title={n.name}>{n.name}</h1>
  73               <h2>{n.type}</h2>
  74             </section>
  75           </div>
  76         );
  77       }
  78       nav.push(
  79         <li className={scalingGroupClass} key={"scalingGroupTile-" + k}>
  80           <div className={scalingGroupTitleClass}>
  81             {scalingGroupTitle}
  82           </div>
  83           {navObj}
  84         </li>
  85       )
  86     })
  87     if(this.props.isLoading) {
  88         html = <DashboardCard className="loading" showHeader={true} title="Loading..."><LoadingIndicator size={10} show={true} /></DashboardCard>
  89     } else {
  90         html = (
  91           <DashboardCard showHeader={true} title="Select Record" className={"recordNavigator" + className}>
  92             <ul className="catalogItems">
  93               {
  94                 nav
  95               }
  96             </ul>
  97           </DashboardCard>
  98         );
  99     }
 100     return html;
 101   }
 102 }
 103 RecordNavigator.defaultProps = {
 104   nav: []
 105 }
 106
 107