skyquake/framework/widgets/nfvi-metric-bars/nfviMetricBars.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 './nfviMetricBars.scss';
  21 class MetricChart extends React.Component {
  22   constructor(props) {
  23     super(props)
  24   }
  25   render() {
  26     let html;
  27     let byteSize = 1e+9;
  28     let utilization = this.props.utilization;
  29     // let utilization = (1 > this.props.utilization) ? Math.round(this.props.utilization * 100) : this.props.utilization;
  30     let isVCPU = (this.props.label == "VCPU");
  31     let label;
  32     if (isVCPU) {
  33       label = this.props.total;
  34     } else {
  35       var num = this.props.used / byteSize;
  36       label = Math.round(num * 100) / 100 + ' / ' +  Math.round(this.props.total / byteSize) + 'GB';
  37     }
  38     html = (
  39             <div className="nvfi-metric-container">
  40               <div className="nfvi-metric-chart">
  41                 <div className="nfvi-metric-chart-value">{utilization}%</div>
  42                 <div className="nfvi-metric-chart-bar" style={{height: utilization + '%'}}></div>
  43               </div>
  44               <div className="nfvi-metric-value">{label}</div>
  45               <div className="nfvi-metric-label">{this.props.label}</div>
  46             </div>
  47             );
  48     return html;
  49   }
  50 }
  51
  52 class nfviMetrics extends React.Component {
  53   constructor(props) {
  54     super(props);
  55   }
  56   render() {
  57     let html;
  58     let nfviMetrics = this.props.metrics.map(function(metric, k) {
  59       //Do not display network metrics
  60       if("outgoing" in metric || "incoming" in metric){
  61         return
  62       } else {
  63         return (<MetricChart key={k} utilization={metric.utilization} label={metric.label} total={metric.total} used={metric.used}/>)
  64       }
  65     });
  66     html = (
  67       <div className="nfvi-metrics-tray">
  68         {nfviMetrics}
  69       </div>
  70     )
  71     return html;
  72   }
  73 }
  74 nfviMetrics.defaultProps = {
  75   metrics: []
  76 }
  77
  78
  79
  80 export default nfviMetrics;