4 * Copyright 2016 RIFT.IO Inc
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
10 * http://www.apache.org/licenses/LICENSE-2.0
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.
19 import React from 'react';
20 import './nfviMetricBars.scss';
21 class MetricChart extends React.Component {
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");
33 label = this.props.total;
35 var num = this.props.used / byteSize;
36 label = Math.round(num * 100) / 100 + ' / ' + Math.round(this.props.total / byteSize) + 'GB';
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>
44 <div className="nfvi-metric-value">{label}</div>
45 <div className="nfvi-metric-label">{this.props.label}</div>
52 class nfviMetrics extends React.Component {
58 let nfviMetrics = this.props.metrics.map(function(metric, k) {
59 //Do not display network metrics
60 if("outgoing" in metric || "incoming" in metric){
63 return (<MetricChart key={k} utilization={metric.utilization} label={metric.label} total={metric.total} used={metric.used}/>)
67 <div className="nfvi-metrics-tray">
74 nfviMetrics.defaultProps = {
80 export default nfviMetrics;