observe-front-ui/app/scripts/components/nodes-resources/node-resources-metric-box-info.js

import React from 'react';


export default class NodeResourcesMetricBoxInfo extends React.Component {
  humanizedMetricInfo() {
    const {
      humanizedTotalCapacity, humanizedAbsoluteConsumption,
      humanizedRelativeConsumption, showCapacity, format
    } = this.props.metricSummary.toJS();
    const showExtendedInfo = showCapacity && format !== 'percent';

    return (
      <span>
        <strong>
          {showExtendedInfo ? humanizedRelativeConsumption : humanizedAbsoluteConsumption}
        </strong>
        {' '}
used
        {showExtendedInfo
          && (
          <i>
            {' - '}
(
            {humanizedAbsoluteConsumption}
            {' '}
/
            <strong>{humanizedTotalCapacity}</strong>
)
          </i>
          )
        }
      </span>
    );
  }

  render() {
    const { width, x, y } = this.props;
    return (
      <foreignObject x={x} y={y} width={width} height="45px">
        <div className="node-resources-metric-box-info">
          <span className="wrapper label truncate">{this.props.label}</span>
          <span className="wrapper consumption truncate">{this.humanizedMetricInfo()}</span>
        </div>
      </foreignObject>
    );
  }
}