refactor(PoolsGraph): migrate to ts, use ContentWithPopup (#406)

Author: artemmufazalov

src/components/PoolBar/PoolBar.js

@@ -1,4 +1,4 @@
-.pool-bar {
+.ydb-pool-bar {
     position: relative;
 
     width: 6px;
@@ -10,6 +10,11 @@
     border: 1px solid;
     border-radius: 1px;
 
+    &__popup-content {
+        width: 170px;
+        padding: 10px;
+    }
+
     &:last-child {
         margin-right: 0;
     }

src/components/PoolBar/PoolBar.scss

@@ -0,0 +1,39 @@
+import block from 'bem-cn-lite';
+
+import type {TPoolStats} from '../../types/api/nodes';
+
+import {ContentWithPopup} from '../ContentWithPopup/ContentWithPopup';
+import {PoolTooltipContent} from '../TooltipsContent';
+
+import './PoolBar.scss';
+
+const b = block('ydb-pool-bar');
+
+const getBarType = (usage: number) => {
+    if (usage >= 75) {
+        return 'danger';
+    } else if (usage >= 50 && usage < 75) {
+        return 'warning';
+    } else {
+        return 'normal';
+    }
+};
+
+interface PoolBarProps {
+    data?: TPoolStats;
+}
+
+export const PoolBar = ({data = {}}: PoolBarProps) => {
+    const {Usage: usage = 0} = data;
+    const usagePercents = Math.min(usage * 100, 100);
+    const type = getBarType(usagePercents);
+
+    return (
+        <ContentWithPopup
+            className={b({type})}
+            content={<PoolTooltipContent data={data} className={b('popup-content')} />}
+        >
+            <div style={{height: `${usagePercents}%`}} className={b('value', {type})} />
+        </ContentWithPopup>
+    );
+};

src/components/PoolBar/PoolBar.tsx

@@ -1,3 +1,3 @@
-.pools-graph {
+.ydb-pools-graph {
     display: flex;
 }

src/components/PoolsGraph/PoolsGraph.js

@@ -0,0 +1,23 @@
+import block from 'bem-cn-lite';
+
+import type {TPoolStats} from '../../types/api/nodes';
+
+import {PoolBar} from '../PoolBar/PoolBar';
+
+import './PoolsGraph.scss';
+
+const b = block('ydb-pools-graph');
+
+interface PoolsGraphProps {
+    pools?: TPoolStats[];
+}
+
+export const PoolsGraph = ({pools = []}: PoolsGraphProps) => {
+    return (
+        <div className={b()}>
+            {pools.map((item, index) => (
+                <PoolBar key={index} data={item} />
+            ))}
+        </div>
+    );
+};

src/components/PoolsGraph/PoolsGraph.scss

@@ -0,0 +1,24 @@
+import type {TPoolStats} from '../../../types/api/nodes';
+
+import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
+
+const formatPool = createInfoFormatter<TPoolStats>({
+    values: {
+        Usage: (value) => value && `${(Number(value) * 100).toFixed(2)} %`,
+    },
+    labels: {
+        Name: 'Pool',
+    },
+    defaultValueFormatter: (value) => value && String(value),
+});
+
+interface PoolTooltipContentProps {
+    data?: TPoolStats;
+    className?: string;
+}
+
+export const PoolTooltipContent = ({data = {}, className}: PoolTooltipContentProps) => {
+    const info = formatObject(formatPool, data);
+
+    return <InfoViewer className={className} info={info} dots={false} size={'s'} />;
+};

src/components/PoolsGraph/PoolsGraph.tsx

@@ -1,2 +1,3 @@
 export * from './NodeEndpointsTooltipContent/NodeEndpointsTooltipContent';
 export * from './TabletTooltipContent/TabletTooltipContent';
+export * from './PoolTooltipContent/PoolTooltipContent';

src/components/TooltipsContent/PoolTooltipContent/PoolTooltipContent.tsx

@@ -31,7 +31,6 @@ import {
     getComputeNodes,
 } from '../../store/reducers/nodes';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';
 
@@ -129,18 +128,8 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
         );
     };
 
-    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
-        dispatch(showTooltip(...args));
-    };
-
-    const onHideTooltip = () => {
-        dispatch(hideTooltip());
-    };
-
     const renderTable = () => {
         const columns = getNodesColumns({
-            showTooltip: onShowTooltip,
-            hideTooltip: onHideTooltip,
             getNodeRef: additionalNodesInfo.getNodeRef,
         });
 

src/components/TooltipsContent/index.ts

@@ -1,7 +1,7 @@
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Popover} from '@gravity-ui/uikit';
 
-import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
+import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
@@ -10,21 +10,13 @@ import type {NodeAddress} from '../../utils/nodes';
 import {formatBytesToGigabyte} from '../../utils/index';
 
 import type {INodesPreparedEntity} from '../../types/store/nodes';
-import {showTooltip as externalShowTooltip} from '../../store/reducers/tooltip';
 
 interface GetNodesColumnsProps {
-    showTooltip: (...args: Parameters<typeof externalShowTooltip>) => void;
-    hideTooltip: VoidFunction;
     tabletsPath?: string;
     getNodeRef?: (node?: NodeAddress) => string;
 }
 
-export function getNodesColumns({
-    showTooltip,
-    hideTooltip,
-    tabletsPath,
-    getNodeRef,
-}: GetNodesColumnsProps) {
+export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {
     const columns: Column<INodesPreparedEntity>[] = [
         {
             name: 'NodeId',
@@ -96,16 +88,7 @@ export function getNodesColumns({
                     }
                 }, 0),
             defaultOrder: DataTable.DESCENDING,
-            render: ({row}) =>
-                row.PoolStats ? (
-                    <PoolsGraph
-                        onMouseEnter={showTooltip}
-                        onMouseLeave={hideTooltip}
-                        pools={row.PoolStats}
-                    />
-                ) : (
-                    '—'
-                ),
+            render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
             align: DataTable.LEFT,
             width: '120px',
         },