refactor(PoolUsage): migrate to ts (#411)

Author: artemmufazalov

src/components/FullNodeViewer/FullNodeViewer.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
 import ProgressViewer from '../ProgressViewer/ProgressViewer';
-import PoolUsage from '../PoolUsage/PoolUsage';
+import {PoolUsage} from '../PoolUsage/PoolUsage';
 
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
 import {calcUptime} from '../../utils';

src/components/PoolUsage/PoolUsage.js

@@ -1,4 +1,4 @@
-.pool-usage {
+.ydb-pool-usage {
     font-size: var(--yc-text-body-2-font-size);
     line-height: var(--yc-text-body-2-line-height);
     &__info {

src/components/PoolUsage/PoolUsage.scss

@@ -0,0 +1,50 @@
+import block from 'bem-cn-lite';
+
+import type {TPoolStats} from '../../types/api/nodes';
+
+import './PoolUsage.scss';
+
+const b = block('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>
+    );
+};

src/components/PoolUsage/PoolUsage.tsx

@@ -6,7 +6,7 @@ import {Loader} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
-import PoolUsage from '../../../../components/PoolUsage/PoolUsage';
+import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
 import {Tablet} from '../../../../components/Tablet';
 
 import {getTenantInfo} from '../../../../store/reducers/tenant/tenant';