/
githubmirror
/
ydb-embedded-ui
Обзор
Документация
Войти
/
githubmirror
/
ydb-embedded-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/components/PoolUsage/PoolUsage.tsx
49 строк
1 KB
Valerii Sidorenko
feat!: update to uikit 6 (#789)
10 апр 2024, 16:48
Не верифицирован
10 апр 2024, 16:48
1a3154d
Код
Авторство
О чём код?
import type {TPoolStats} from '../../types/api/nodes'; import {cn} from '../../utils/cn'; import './PoolUsage.scss'; const b = cn('ydb-pool-usage'); const getLineType = (fillWidth: number) => { let fillColor = 'green'; if (fillWidth > 60 && fillWidth <= 80) { fillColor = 'yellow'; } else if (fillWidth > 80) { fillColor = 'red'; } return fillColor; }; interface PoolUsageProps { data?: TPoolStats; } export const PoolUsage = ({data: pool = {}}: PoolUsageProps) => { const {Threads, Name = 'Unknown', Usage = 0} = pool; const dataExist = Usage && Threads; const value = Math.floor(Usage * 100); const fillWidth = value > 100 ? 100 : value; return ( <div className={b()}> <div className={b('info')}> <div className={b('pool-name')}>{Name}</div> {dataExist && ( <div className={b('value')}> <div className={b('percents')}>{value < 1 ? '<1' : value}%</div> <div className={b('threads')}>(×{Threads})</div> </div> )} </div> <div className={b('visual')}> <div className={b('usage-line', {type: getLineType(fillWidth)})} style={{width: `${fillWidth}%`}} /> </div> </div> ); };