import PropTypes from 'prop-types' ; import { c } from 'ttag' ; import { Tooltip , CircularProgress } from '../../../components' ; const LoadIndicator = ( { server : { Load = 0 } } ) => { const className = Load < 50 ? '' : Load < 90 ? 'circle-bar--medium' : 'circle-bar--full' ; return ( < span className = "min-w5e no-mobile" > < Tooltip title = { c ( 'Info' ) . t `Server load` } > < div className = "flex inline-flex-vcenter" > < CircularProgress progress = { Load } size = { 22 } className = { className } > < g className = "circle-chart-info" > < rect x = "17" y = "14" width = "1.55" height = "9.1" className = "circle-chart-percent" / > < rect x = "17" y = "11" width = "1.55" height = "1.53" className = "circle-chart-percent" / > < /g> < /CircularProgress> < div className = "ml0-5" > { Load } % < /div> < /div> < /Tooltip> < /span>); } ; LoadIndicator . propTypes = { server : PropTypes . shape ( { Load : PropTypes . number , } ) , } ; export default LoadIndicator ;