skyquake/framework/widgets/transmit-receive/transmit-receive.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 './transmit-receive.scss'
  21 class TransmitReceive extends React.Component {
  22   constructor(props) {
  23     super(props)
  24   }
  25   // getDigits(number) {
  26   //   return Math.log(number) * Math.LOG10E + 1 | 0;
  27   // }
  28   getUnits(number) {
  29     if (number < Math.pow(10,3)) {
  30       return [number, ''];
  31     } else if (number < Math.pow(10,6)) {
  32       return [(number / Math.pow(10,3)), 'K'];
  33     } else if (number < Math.pow(10,9)) {
  34       return [(number / Math.pow(10,6)), 'M'];
  35     } else if (number < Math.pow(10,12)) {
  36       return [(number / Math.pow(10,9)), 'G'];
  37     } else if (number < Math.pow(10,15)) {
  38       return [(number / Math.pow(10,12)), 'T'];
  39     } else if (number < Math.pow(10,18)) {
  40       return [(number / Math.pow(10,15)), 'P'];
  41     } else if (number < Math.pow(10,21)) {
  42       return [(number / Math.pow(10,18)), 'E'];
  43     } else if (number < Math.pow(10,24)) {
  44       return [(number / Math.pow(10,21)), 'Z'];
  45     } else if (number < Math.pow(10,27)) {
  46       return [(number / Math.pow(10,24)), 'Z'];
  47     } else {
  48       return [(number / Math.pow(10,27)), 'Y'];
  49     }
  50   }
  51
  52   shouldComponentUpdate(nextProps, nextState) {
  53     if (JSON.stringify(this.props.data) === JSON.stringify(nextProps.data)) {
  54       return false;
  55     }
  56     return true;
  57   }
  58
  59   render() {
  60     let html;
  61
  62     html = (
  63             <div className="transmit-receive-container">
  64               <div className="transmit-container">
  65                 <div className="label">{this.props.data.outgoing.label}</div>
  66                 <div className="measure">{this.getUnits(this.props.data.outgoing.bytes)[0].toFixed(1)}</div><div className="units">{this.getUnits(this.props.data.outgoing.bytes)[1]}B</div>
  67                 <div className="measure">{this.getUnits(this.props.data.outgoing.packets)[0].toFixed(1)}</div><div className="units">{this.getUnits(this.props.data.outgoing.packets)[1]}P</div>
  68                 <div className="measure">{this.getUnits(this.props.data.outgoing['byte-rate'])[0].toFixed(1)}</div><div className="units">{this.getUnits(this.props.data.outgoing['byte-rate'])[1]}BPS</div>
  69                 <div className="measure">{this.getUnits(this.props.data.outgoing['packet-rate'])[0].toFixed(1)}</div><div className="units">{this.getUnits(this.props.data.outgoing['packet-rate'])[1]}PPS</div>
  70               </div>
  71               <div className="receive-container">
  72                 <div className="label">{this.props.data.incoming.label}</div>
  73                 <div className="measure">{this.getUnits(this.props.data.incoming.bytes)[0].toFixed(1)}</div><div className="units">{this.getUnits(this.props.data.incoming.bytes)[1]}B</div>
  74                 <div className="measure">{this.getUnits(this.props.data.incoming.packets)[0].toFixed(1)}</div><div className="units">{this.getUnits(this.props.data.incoming.packets)[1]}P</div>
  75                 <div className="measure">{this.getUnits(this.props.data.incoming['byte-rate'])[0].toFixed(1)}</div><div className="units">{this.getUnits(this.props.data.incoming['byte-rate'])[1]}BPS</div>
  76                 <div className="measure">{this.getUnits(this.props.data.incoming['packet-rate'])[0].toFixed(1)}</div><div className="units">{this.getUnits(this.props.data.incoming['packet-rate'])[1]}PPS</div>
  77               </div>
  78             </div>
  79             );
  80     return html;
  81   }
  82 }
  83
  84
  85 export default TransmitReceive;