skyquake/framework/widgets/nfvi-metric-bars/nfviMetricBars.jsx

/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */
import React from 'react';
import './nfviMetricBars.scss';
class MetricChart extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    let html;
    let byteSize = 1e+9;
    let utilization = this.props.utilization;
    // let utilization = (1 > this.props.utilization) ? Math.round(this.props.utilization * 100) : this.props.utilization;
    let isVCPU = (this.props.label == "VCPU");
    let label;
    if (isVCPU) {
      label = this.props.total;
    } else {
      var num = this.props.used / byteSize;
      label = Math.round(num * 100) / 100 + ' / ' +  Math.round(this.props.total / byteSize) + 'GB';
    }
    html = (
            <div className="nvfi-metric-container">
              <div className="nfvi-metric-chart">
                <div className="nfvi-metric-chart-value">{utilization}%</div>
                <div className="nfvi-metric-chart-bar" style={{height: utilization + '%'}}></div>
              </div>
              <div className="nfvi-metric-value">{label}</div>
              <div className="nfvi-metric-label">{this.props.label}</div>
            </div>
            );
    return html;
  }
}

class nfviMetrics extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let html;
    let nfviMetrics = this.props.metrics.map(function(metric, k) {
      //Do not display network metrics
      if("outgoing" in metric || "incoming" in metric){
        return
      } else {
        return (<MetricChart key={k} utilization={metric.utilization} label={metric.label} total={metric.total} used={metric.used}/>)
      }
    });
    html = (
      <div className="nfvi-metrics-tray">
        {nfviMetrics}
      </div>
    )
    return html;
  }
}
nfviMetrics.defaultProps = {
  metrics: []
}



export default nfviMetrics;