refactor(FullNodeViewer): migrate to ts (#455)

Author: artemmufazalov

src/components/FullNodeViewer/FullNodeViewer.js

@@ -0,0 +1,73 @@
+import cn from 'bem-cn-lite';
+
+import type {TSystemStateInfo} from '../../types/api/nodes';
+
+import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
+import {calcUptime} from '../../utils';
+
+import InfoViewer from '../InfoViewer/InfoViewer';
+import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import {PoolUsage} from '../PoolUsage/PoolUsage';
+
+import './FullNodeViewer.scss';
+
+const b = cn('full-node-viewer');
+
+interface FullNodeViewerProps {
+    node: TSystemStateInfo | undefined;
+    className?: string;
+}
+
+export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
+    const endpointsInfo = node?.Endpoints?.map(({Name, Address}) => ({
+        label: Name,
+        value: Address,
+    }));
+
+    const commonInfo = [
+        {label: 'Version', value: node?.Version},
+        {label: 'Uptime', value: calcUptime(node?.StartTime)},
+        {label: 'DC', value: node?.DataCenterDescription},
+        {label: 'Rack', value: node?.Rack},
+    ];
+
+    const averageInfo = node?.LoadAverage?.map((load, loadIndex) => ({
+        label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
+        value: <ProgressViewer value={load} percents={true} colorizeProgress={true} />,
+    }));
+
+    return (
+        <div className={`${b()} ${className}`}>
+            {node ? (
+                <div className={b('common-info')}>
+                    <div>
+                        <div className={b('section-title')}>Pools</div>
+                        <div className={b('section', {pools: true})}>
+                            {node?.PoolStats?.map((pool, poolIndex) => (
+                                <PoolUsage key={poolIndex} data={pool} />
+                            ))}
+                        </div>
+                    </div>
+
+                    {endpointsInfo && endpointsInfo.length && (
+                        <InfoViewer
+                            title="Endpoints"
+                            className={b('section')}
+                            info={endpointsInfo}
+                        />
+                    )}
+
+                    <InfoViewer title="Common info" className={b('section')} info={commonInfo} />
+
+                    <InfoViewer
+                        title="Load average"
+                        className={b('section', {average: true})}
+                        info={averageInfo}
+                    />
+                </div>
+            ) : (
+                <div className="error">no data</div>
+            )}
+        </div>
+    );
+};

src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -10,10 +10,10 @@ import {Link} from 'react-router-dom';
 import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';
 import {Tablets} from '../Tablets';
 import Storage from '../Storage/Storage';
-import NodeOverview from './NodeOverview/NodeOverview';
 import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
+import {FullNodeViewer} from '../../components/FullNodeViewer/FullNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
 import routes, {createHref, parseQuery} from '../../routes';
@@ -128,7 +128,7 @@ function Node(props: NodeProps) {
             }
 
             case OVERVIEW: {
-                return <NodeOverview node={node} className={b('overview-wrapper')} />;
+                return <FullNodeViewer node={node} className={b('overview-wrapper')} />;
             }
 
             case STRUCTURE: {