skyquake/plugins/launchpad/src/launchpad_card/launchpadControls.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 RWslider from 'widgets/input-range-slider/input-range-slider.jsx';
  21 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
  22 import CardActions from './launchpadCardActions.js';
  23
  24 let currentID, lastSelected;
  25
  26 function isTabNode(node) {
  27   return node.nodeName === 'LI' && node.getAttribute('role') === 'tab';
  28 }
  29 class launchpadControls extends React.Component {
  30   constructor(props, context) {
  31     super(props, context);
  32     this.state = {
  33       controlSets:  this.props.controlSets,
  34       selectedIndex: 0,
  35       currentId: 0
  36     };
  37     this.handleInputUpdate = this.handleInputUpdate.bind(this);
  38     this.handleSelected = this.handleSelected.bind(this);
  39     this.handleSameTab = this.handleSameTab.bind(this);
  40   }
  41   handleSelected(index,last) {
  42       this.state.selectedIndex = index;
  43   }
  44   //If same Tab is clicked, default to empty tab contents
  45   handleSameTab(e) {
  46     var node = e.target.parentNode;
  47     var isTab = isTabNode(node);
  48     if(isTab) {
  49        if(node.id == currentID) {
  50         this.state.selectedIndex = 0;
  51         currentID = null;
  52         this.forceUpdate();
  53       } else {
  54         currentID = node.id
  55       }
  56     }
  57   }
  58   componentWillReceiveProps(nextProps) {
  59     if((!this.state.controlSets && nextProps.controlSets) || this.state.controlSets && !nextProps.controlSets) {
  60       this.state.controlSets = nextProps.controlSets;
  61     };
  62
  63   }
  64   shouldComponentUpdate(nextProps, nextState) {
  65     // console.log(this.props, nextProps);
  66     // console.log(this.state, nextState)
  67     return true;
  68   }
  69   handleInputUpdate(gIndex, groupID, cIndex, options, value) {
  70     this.state.controlSets[gIndex][groupID]['control-param'][cIndex].value = value;
  71     CardActions.updateControlInput(options, value)
  72   }
  73   render() {
  74     let self = this;
  75     if(!this.state.controlSets) {
  76       return (<div></div>)
  77     } else {
  78       return (
  79         <div className="launchpadCard_controls" onClick={self.handleSameTab}>
  80         {
  81           this.state.controlSets.map(function(group, gIndex) {
  82             for(let id in group) {
  83               return (
  84                 <Tabs key={gIndex} selectedIndex={self.state.selectedIndex}  onSelect={self.handleSelected}>
  85
  86                   <TabList>
  87                     <Tab>
  88                       {
  89                         group[id]['action-param'].map(function(action, aIndex) {
  90                           return (
  91                             <button key={aIndex} className="light small" title={action.name}>{action.name}</button>
  92                           )
  93                         })
  94                       }
  95                     </Tab>
  96                     {
  97                       group[id]['control-param'].map(function(control, cIndex) {
  98                         return (
  99                           <Tab key={cIndex}>
 100                           <span  title={control.name}>
 101                             {control.name} : {control.value || control["current-value"]} {control.units}
 102                             </span>
 103                           </Tab>
 104                         )
 105                       })
 106                     }
 107                   </TabList>
 108                   <TabPanel actionplaceholder>
 109                   </TabPanel>
 110                   {
 111                     group[id]['control-param'].map(function(control, cIndex) {
 112                       return (
 113                         <TabPanel key={cIndex}>
 114                           <RWslider {...control} handleInputUpdate={self.handleInputUpdate.bind(self, gIndex, id, cIndex, {operation:control.operation,
 115                             url:control.url
 116                           })}/>
 117                         </TabPanel>
 118                       )
 119                     })
 120                   }
 121                 </Tabs>
 122               )
 123             }
 124           })
 125         }
 126         </div>
 127       )
 128     }
 129   }
 130 };
 131
 132 export default launchpadControls;
 133
 134
 135 /**
 136  *
 137  *   grouping control-param {
 138     list control-param {
 139       description
 140           "List of control parameters to manage and
 141            update the running configuration of the VNF";
 142       key id;
 143
 144       leaf id {
 145         type string;
 146       }
 147
 148       leaf name {
 149         type string;
 150       }
 151
 152       leaf description {
 153         type string;
 154       }
 155
 156       leaf group-tag {
 157         description "A simple tag to group control parameters";
 158         type string;
 159       }
 160
 161       leaf min-value {
 162         description
 163             "Minimum value for the parameter";
 164         type uint64;
 165       }
 166
 167       leaf max-value {
 168         description
 169             "Maxium value for the parameter";
 170         type uint64;
 171       }
 172
 173       leaf step-value {
 174         description
 175             "Step value for the parameter";
 176         type uint64;
 177       }
 178
 179       leaf units {
 180         type string;
 181       }
 182
 183       leaf widget-type {
 184         type manotypes:widget-type;
 185       }
 186     }
 187   }
 188  */