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 Utils from 'utils/utils.js';
  24
  25 import './recordNavigator.scss';
  26
  27 export default class RecordNavigator extends React.Component{
  28   constructor(props) {
  29     super(props)
  30   }
  31   handleImageError = (e) => {
  32       console.log('Bad logo path, using default');
  33       e.target.src = require('style/img/catalog-default.svg');
  34   }
  35
  36   getDescriptorTypeFromRecordType = (recordType) => {
  37       if (recordType == 'nsr') {
  38           return 'nsd';
  39       } else if (recordType == 'vnfr') {
  40           return 'vnfd';
  41       }
  42
  43       return null;
  44   }
  45
  46   getDescriptorIdFromRecord = (record) => {
  47       if (record.type && record.type == 'nsr') {
  48           return record.nsd && record.nsd.id;
  49       } else if (record.type && record.type == 'vnfr') {
  50           return record.vnfd && record.vnfd.id;
  51       }
  52
  53       return null;
  54   }
  55
  56   render(){
  57     let navClass = 'catalogItems';
  58
  59     let self = this;
  60     let html;
  61     let className = this.props.isLoading ? 'loading' : '';
  62     let nav = [];
  63
  64     this.props.nav.map(function(n, k) {
  65       let itemClassName = navClass + '_item';
  66       let catalog_name = (n.type == 'nsr' ? <span>({n.nsd_name})</span> : '');
  67       let scalingGroupClass = '';
  68       let scalingGroupTitleClass = '';
  69       let scalingGroupTitle = '';
  70       let navObj = [];
  71       if (n.scalingGroupName) {
  72         scalingGroupClass = navClass + ' -is-scaled';
  73         scalingGroupTitleClass = scalingGroupClass + '_title';
  74         scalingGroupTitle = n.scalingGroupName + '_' + n.scalingGroupInstanceId;
  75         n.vnfr && n.vnfr.map((vnfr, vnfrIndex) => {
  76           let iClassName = itemClassName;
  77           if(vnfr.id == self.props.activeNavID) {
  78             iClassName += ' -is-selected';
  79           }
  80           navObj.push(
  81             <div key={'id' + k + '-' + vnfr.id}  onClick={self.props.loadRecord.bind(self,vnfr)} className={iClassName}>
  82               <img
  83                   onError={self.handleImageError}
  84                   src={Utils.cleanImageDataURI(vnfr.logo, self.getDescriptorTypeFromRecordType(vnfr.type), getDescriptorIdFromRecord(vnfr))}
  85               />
  86               <section id={vnfr.id}>
  87               <h1 title={vnfr.name}>{vnfr.name}</h1>
  88                 <h2>{vnfr.type}</h2>
  89               </section>
  90             </div>
  91           )
  92         });
  93       } else {
  94         if(n.id == self.props.activeNavID) {
  95           itemClassName += ' -is-selected';
  96         }
  97         navObj.push(
  98           <div key={'id' + k + '-' + n.id}  onClick={self.props.loadRecord.bind(self,n)} className={itemClassName}>
  99             <img
 100                 onError={self.handleImageError}
 101                 src={Utils.cleanImageDataURI(n.logo, self.getDescriptorTypeFromRecordType(n.type), self.getDescriptorIdFromRecord(n))}
 102             />
 103             <section id={n.id}>
 104             <h1 title={n.name}>{n.name}</h1>
 105               <h2>{n.type}</h2>
 106             </section>
 107           </div>
 108         );
 109       }
 110       nav.push(
 111         <li className={scalingGroupClass} key={"scalingGroupTile-" + k}>
 112           <div className={scalingGroupTitleClass}>
 113             {scalingGroupTitle}
 114           </div>
 115           {navObj}
 116         </li>
 117       )
 118     })
 119     if(this.props.isLoading) {
 120         html = <DashboardCard className="loading" showHeader={true} title="Loading..."><LoadingIndicator size={10} show={true} /></DashboardCard>
 121     } else {
 122         html = (
 123           <DashboardCard showHeader={true} title="Select Record" className={"recordNavigator" + className}>
 124             <ul className="catalogItems">
 125               {
 126                 nav
 127               }
 128             </ul>
 129           </DashboardCard>
 130         );
 131     }
 132     return html;
 133   }
 134 }
 135 RecordNavigator.defaultProps = {
 136   nav: []
 137 }
 138
 139