packages/components/containers/vpn/OpenVPNConfigurationSection/LoadIndicator.js

   1 import PropTypes from 'prop-types';
   2 import { c } from 'ttag';
   3
   4 import CircularProgress from '@proton/components/components/progress/CircularProgress';
   5 import Tooltip from '@proton/components/components/tooltip/Tooltip';
   6
   7 const LoadIndicator = ({ server: { Load = 0 } }) => {
   8     // 1-49% load is GREEN color #5db039
   9     // 50-89% load is YELLOW color #eac819
  10     // 90-100% load is RED color #ec5858
  11     const className = Load < 50 ? '' : Load < 90 ? 'circle-bar--medium' : 'circle-bar--full';
  12     return (
  13         <span className="min-w-custom hidden md:inline" style={{ '--min-w-custom': '5em' }}>
  14             <Tooltip title={c('Info').t`Server load`}>
  15                 <div className="flex inline-flex *:self-center">
  16                     <CircularProgress progress={Load} size={22} className={className}>
  17                         <g className="circle-chart-info">
  18                             <rect x="17" y="14" width="1.55" height="9.1" className="circle-chart-percent" />
  19                             <rect x="17" y="11" width="1.55" height="1.53" className="circle-chart-percent" />
  20                         </g>
  21                     </CircularProgress>
  22                     <div className="ml-2">{Load}%</div>
  23                 </div>
  24             </Tooltip>
  25         </span>
  26     );
  27 };
  28
  29 LoadIndicator.propTypes = {
  30     server: PropTypes.shape({
  31         Load: PropTypes.number,
  32     }),
  33 };
  34
  35 export default LoadIndicator;