Skip to content

Commit 75cd907

Browse files
krosy1337krosy1337
authored
refactor: migrate TenantOverview to ts (#519)
1 parent c526471 commit 75cd907

File tree

14 files changed

+238
-248
lines changed

14 files changed

+238
-248
lines changed

‎src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import type {EPathType} from '../../../../types/api/schema';
88
import {Icon} from '../../../../components/Icon';
99
import Overview from '../Overview/Overview';
1010
import {Healthcheck} from '../Healthcheck';
11-
//@ts-ignore
12-
import TenantOverview from '../TenantOverview/TenantOverview';
11+
import {TenantOverview} from '../TenantOverview/TenantOverview';
1312

1413
import './DetailedOverview.scss';
1514

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

Lines changed: 0 additions & 213 deletions
This file was deleted.

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import cn from 'bem-cn-lite';
2+
import {useCallback} from 'react';
3+
import {useDispatch} from 'react-redux';
4+
5+
import {Loader} from '@gravity-ui/uikit';
6+
7+
import {InfoViewer} from '../../../../components/InfoViewer';
8+
import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
9+
import {Tablet} from '../../../../components/Tablet';
10+
import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
11+
import {formatCPU} from '../../../../utils';
12+
import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
13+
import {bytesToGB} from '../../../../utils/utils';
14+
import {mapDatabaseTypeToDBName} from '../../utils/schema';
15+
import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
16+
import {ETabletVolatileState} from '../../../../types/api/tenant';
17+
import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant';
18+
19+
import i18n from './i18n';
20+
import './TenantOverview.scss';
21+
22+
const b = cn('tenant-overview');
23+
24+
interface TenantOverviewProps {
25+
tenantName: string;
26+
additionalTenantInfo?: any;
27+
}
28+
29+
export function TenantOverview({tenantName, additionalTenantInfo}: TenantOverviewProps) {
30+
const {tenant, loading, wasLoaded} = useTypedSelector((state) => state.tenant);
31+
const {autorefresh} = useTypedSelector((state) => state.schema);
32+
const dispatch = useDispatch();
33+
const fetchTenant = useCallback(
34+
(isBackground = true) => {
35+
if (!isBackground) {
36+
dispatch(setDataWasNotLoaded());
37+
}
38+
dispatch(getTenantInfo({path: tenantName}));
39+
},
40+
[dispatch, tenantName],
41+
);
42+
43+
useAutofetcher(fetchTenant, [fetchTenant], autorefresh);
44+
45+
const {
46+
Metrics = {},
47+
PoolStats,
48+
StateStats = [],
49+
MemoryUsed,
50+
Name,
51+
State,
52+
CoresUsed,
53+
StorageGroups,
54+
StorageAllocatedSize,
55+
Type,
56+
SystemTablets,
57+
} = tenant || {};
58+
59+
const tenantType = mapDatabaseTypeToDBName(Type);
60+
const memoryRaw = MemoryUsed ?? Metrics.Memory;
61+
62+
const memory = (memoryRaw && bytesToGB(memoryRaw)) || i18n('no-data');
63+
const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || i18n('no-data');
64+
const storageGroups = StorageGroups ?? i18n('no-data');
65+
const blobStorage =
66+
(StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || i18n('no-data');
67+
const storageEfficiency =
68+
Metrics.Storage && StorageAllocatedSize
69+
? `${((parseInt(Metrics.Storage) * 100) / parseInt(StorageAllocatedSize)).toFixed(2)}%`
70+
: i18n('no-data');
71+
72+
const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
73+
74+
const cpu = formatCPU(cpuRaw);
75+
76+
const metricsInfo = [
77+
{label: 'Type', value: Type},
78+
{label: 'Memory', value: memory},
79+
{label: 'CPU', value: cpu},
80+
{label: 'Tablet storage', value: storage},
81+
{label: 'Storage groups', value: storageGroups},
82+
{label: 'Blob storage', value: blobStorage},
83+
{label: 'Storage efficiency', value: storageEfficiency},
84+
];
85+
86+
const tabletsInfo = StateStats.filter(
87+
(item): item is {VolatileState: ETabletVolatileState; Count: number} => {
88+
return item.VolatileState !== undefined && item.Count !== undefined;
89+
},
90+
).map((info) => {
91+
return {label: TABLET_STATES[info.VolatileState], value: info.Count};
92+
});
93+
94+
const renderName = () => {
95+
return (
96+
<div className={b('tenant-name-wrapper')}>
97+
<EntityStatus
98+
status={State}
99+
name={Name || TENANT_DEFAULT_TITLE}
100+
withLeftTrim
101+
hasClipboardButton={Boolean(tenant)}
102+
clipboardButtonAlwaysVisible
103+
/>
104+
</div>
105+
);
106+
};
107+
108+
if (loading && !wasLoaded) {
109+
return (
110+
<div className={b('loader')}>
111+
<Loader size="m" />
112+
</div>
113+
);
114+
}
115+
116+
return (
117+
<div className={b()}>
118+
<div className={b('top-label')}>{tenantType}</div>
119+
<div className={b('top')}>
120+
{renderName()}
121+
{tenant && additionalTenantInfo && additionalTenantInfo(tenant.Name, tenant.Type)}
122+
</div>
123+
<div className={b('system-tablets')}>
124+
{SystemTablets &&
125+
SystemTablets.map((tablet, tabletIndex) => (
126+
<Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
127+
))}
128+
</div>
129+
<div className={b('common-info')}>
130+
<div>
131+
<div className={b('section-title')}>{i18n('title.pools')}</div>
132+
{PoolStats ? (
133+
<div className={b('section', {pools: true})}>
134+
{PoolStats.map((pool, poolIndex) => (
135+
<PoolUsage key={poolIndex} data={pool} />
136+
))}
137+
</div>
138+
) : (
139+
<div className="error">{i18n('no-pools-data')}</div>
140+
)}
141+
</div>
142+
<InfoViewer
143+
title={i18n('title.metrics')}
144+
className={b('section', {metrics: true})}
145+
info={metricsInfo}
146+
/>
147+
148+
<div className={b('section')}>
149+
<InfoViewer info={tabletsInfo} title="Tablets" />
150+
</div>
151+
</div>
152+
</div>
153+
);
154+
}

‎src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"no-data": "No data",
3+
"no-pools-data": "No pools data",
4+
5+
"title.pools": "Pools",
6+
"title.metrics": "Metrics"
7+
}

‎src/containers/Tenant/Diagnostics/TenantOverview/i18n/index.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {i18n, Lang} from '../../../../../utils/i18n';
2+
3+
import en from './en.json';
4+
import ru from './ru.json';
5+
6+
const COMPONENT = 'ydb-diagnostics-tenant-overview';
7+
8+
i18n.registerKeyset(Lang.En, COMPONENT, en);
9+
i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
10+
11+
export default i18n.keyset(COMPONENT);

0 commit comments

Comments
 (0)