fixup! refactor: migrate TenantOverview to ts

krosy1337 · krosy1337 · commit 4f4ed43e49bb · 2023-08-24T18:36:32.000+03:00
diff --git a/src/components/InfoViewer/InfoViewer.tsx b/src/components/InfoViewer/InfoViewer.tsx
@@ -4,8 +4,8 @@ import cn from 'bem-cn-lite';
 import './InfoViewer.scss';
 
 export interface InfoViewerItem {
-    label?: ReactNode;
-    value?: ReactNode;
+    label: ReactNode;
+    value: ReactNode;
 }
 
 interface InfoViewerProps {
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
@@ -8,14 +8,15 @@ import {InfoViewer} from '../../../../components/InfoViewer';
 import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
 import {Tablet} from '../../../../components/Tablet';
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
-import type {TTenant} from '../../../../types/api/tenant';
 import {formatCPU} from '../../../../utils';
 import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
 import {bytesToGB} from '../../../../utils/utils';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {ETabletVolatileState} from '../../../../types/api/tenant';
 import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant';
 
+import i18n from './i18n';
 import './TenantOverview.scss';
 
 const b = cn('tenant-overview');
@@ -39,20 +40,15 @@ export function TenantOverview({tenantName, additionalTenantInfo}: TenantOvervie
         [dispatch, tenantName],
     );
 
-    useAutofetcher(
-        (isBackground) => {
-            fetchTenant(isBackground);
-        },
-        [fetchTenant],
-        autorefresh,
-    );
+    useAutofetcher(fetchTenant, [fetchTenant], autorefresh);
 
     const {
         Metrics = {},
         PoolStats,
         StateStats = [],
         MemoryUsed,
         Name,
+        State,
         CoresUsed,
         StorageGroups,
         StorageAllocatedSize,
@@ -63,14 +59,15 @@ export function TenantOverview({tenantName, additionalTenantInfo}: TenantOvervie
     const tenantType = mapDatabaseTypeToDBName(Type);
     const memoryRaw = MemoryUsed ?? Metrics.Memory;
 
-    const memory = (memoryRaw && bytesToGB(memoryRaw)) || 'no data';
-    const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || 'no data';
-    const storageGroups = StorageGroups ?? 'no data';
-    const blobStorage = (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || 'no data';
+    const memory = (memoryRaw && bytesToGB(memoryRaw)) || i18n('no-data');
+    const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || i18n('no-data');
+    const storageGroups = StorageGroups ?? i18n('no-data');
+    const blobStorage =
+        (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || i18n('no-data');
     const storageEfficiency =
         Metrics.Storage && StorageAllocatedSize
             ? `${((parseInt(Metrics.Storage) * 100) / parseInt(StorageAllocatedSize)).toFixed(2)}%`
-            : 'no data';
+            : i18n('no-data');
 
     const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
 
@@ -86,21 +83,22 @@ export function TenantOverview({tenantName, additionalTenantInfo}: TenantOvervie
         {label: 'Storage efficiency', value: storageEfficiency},
     ];
 
-    const tabletsInfo = StateStats.map((info) => {
-        if (info.VolatileState)
-            return {label: TABLET_STATES[info.VolatileState], value: info.Count};
-        return {};
+    const tabletsInfo = StateStats.filter(
+        (item): item is {VolatileState: ETabletVolatileState; Count: number} => {
+            return item.VolatileState !== undefined && item.Count !== undefined;
+        },
+    ).map((info) => {
+        return {label: TABLET_STATES[info.VolatileState], value: info.Count};
     });
 
-    const renderName = (tenant?: TTenant) => {
-        const {Name = TENANT_DEFAULT_TITLE, State} = tenant || {};
+    const renderName = () => {
         return (
             <div className={b('tenant-name-wrapper')}>
                 <EntityStatus
                     status={State}
-                    name={Name}
+                    name={Name || TENANT_DEFAULT_TITLE}
                     withLeftTrim
-                    hasClipboardButton={tenant}
+                    hasClipboardButton={!!tenant}
                     clipboardButtonAlwaysVisible
                 />
             </div>
@@ -119,7 +117,7 @@ export function TenantOverview({tenantName, additionalTenantInfo}: TenantOvervie
         <div className={b()}>
             <div className={b('top-label')}>{tenantType}</div>
             <div className={b('top')}>
-                {renderName(tenant)}
+                {renderName()}
                 {tenant && additionalTenantInfo && additionalTenantInfo(tenant.Name, tenant.Type)}
             </div>
             <div className={b('system-tablets')}>
@@ -130,19 +128,19 @@ export function TenantOverview({tenantName, additionalTenantInfo}: TenantOvervie
             </div>
             <div className={b('common-info')}>
                 <div>
-                    <div className={b('section-title')}>Pools</div>
+                    <div className={b('section-title')}>{i18n('title.pools')}</div>
                     {PoolStats ? (
                         <div className={b('section', {pools: true})}>
                             {PoolStats.map((pool, poolIndex) => (
                                 <PoolUsage key={poolIndex} data={pool} />
                             ))}
                         </div>
                     ) : (
-                        <div className="error">no pools data</div>
+                        <div className="error">{i18n('no-pools-data')}</div>
                     )}
                 </div>
                 <InfoViewer
-                    title="Metrics"
+                    title={i18n('title.metrics')}
                     className={b('section', {metrics: true})}
                     info={metricsInfo}
                 />
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
@@ -0,0 +1,7 @@
+{
+  "no-data": "No data",
+  "no-pools-data": "No pools data",
+
+  "title.pools": "Pools",
+  "title.metrics": "Metrics"
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/index.ts b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/index.ts
@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-diagnostics-tenant-overview';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json
@@ -0,0 +1,7 @@
+{
+  "no-data": "Нет данных",
+  "no-pools-data": "Нет данных о пулах",
+
+  "title.pools": "Пулы",
+  "title.metrics": "Метрики"
+}
diff --git a/src/containers/Tenants/Tenants.tsx b/src/containers/Tenants/Tenants.tsx
@@ -106,7 +106,9 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                                     backend,
                                 })}
                             />
-                            {additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}
+                            {row.Name &&
+                                row.Type &&
+                                additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}
                         </div>
                     );
                 },
diff --git a/src/services/api.ts b/src/services/api.ts
@@ -76,12 +76,16 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             cluster_name: clusterName,
         });
     }
-    getTenantInfo({path}: {path: string}) {
-        return this.get<TTenantInfo>(this.getPath('/viewer/json/tenantinfo'), {
-            path,
-            tablets: true,
-            storage: true,
-        });
+    getTenantInfo({path}: {path: string}, {concurrentId}: AxiosOptions = {}) {
+        return this.get<TTenantInfo>(
+            this.getPath('/viewer/json/tenantinfo'),
+            {
+                path,
+                tablets: true,
+                storage: true,
+            },
+            {concurrentId: concurrentId || `getTenantInfo|${path}`},
+        );
     }
     getNodes(
         {
diff --git a/src/store/reducers/tenant/tenant.ts b/src/store/reducers/tenant/tenant.ts
@@ -44,6 +44,10 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
         }
 
         case FETCH_TENANT.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
@@ -99,7 +103,7 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
 
 export const getTenantInfo = ({path}: {path: string}) => {
     return createApiRequest({
-        request: window.api.getTenantInfo({path}),
+        request: window.api.getTenantInfo({path}, {concurrentId: 'getTenantInfo'}),
         actions: FETCH_TENANT,
         dataHandler: (tenantData): TTenant | undefined => {
             return tenantData.TenantInfo?.[0];
diff --git a/src/store/reducers/tenants/selectors.ts b/src/store/reducers/tenants/selectors.ts
@@ -24,7 +24,7 @@ const filterTenantsByProblems = (tenants: PreparedTenant[], problemFilter: Probl
 const filteredTenantsBySearch = (tenants: PreparedTenant[], searchQuery: string) => {
     return tenants.filter((item) => {
         const re = new RegExp(escapeRegExp(searchQuery), 'i');
-        return re.test(item.Name) || re.test(item.controlPlaneName);
+        return re.test(item.Name || '') || re.test(item.controlPlaneName);
     });
 };
 
diff --git a/src/store/reducers/tenants/utils.ts b/src/store/reducers/tenants/utils.ts
@@ -2,7 +2,7 @@ import type {TTenant} from '../../../types/api/tenant';
 import {isNumeric} from '../../../utils/utils';
 
 const getControlPlaneValue = (tenant: TTenant) => {
-    const parts = tenant.Name.split('/');
+    const parts = tenant.Name ? tenant.Name.split('/') : [];
     const defaultValue = parts.length ? parts[parts.length - 1] : '—';
     const controlPlaneName = tenant.ControlPlane?.name;
 
diff --git a/src/types/api/tenant.ts b/src/types/api/tenant.ts
@@ -22,38 +22,38 @@ export interface TTenantInfo {
 }
 
 export interface TTenant {
-    Name: string;
-    Id: string;
-    Type: ETenantType;
-    State: State;
+    Name?: string;
+    Id?: string;
+    Type?: ETenantType;
+    State?: State;
     StateStats?: THiveDomainStatsStateCount[];
-    Metrics: TMetrics;
+    Metrics?: TMetrics;
     NodeIds?: number[];
-    AliveNodes: number;
-    Resources: TTenantResources;
+    AliveNodes?: number;
+    Resources?: TTenantResources;
     /** uint64 */
-    CreateTime: string;
-    Owner: string;
+    CreateTime?: string;
+    Owner?: string;
     Users?: string[];
     PoolStats?: TPoolStats[];
-    UserAttributes: Record<string, string>;
-    Overall: EFlag;
+    UserAttributes?: Record<string, string>;
+    Overall?: EFlag;
     SystemTablets?: TTabletStateInfo[];
-    ResourceId: string;
+    ResourceId?: string;
     Tablets?: TTabletStateInfo[];
     /** uint64 */
-    StorageAllocatedSize: string;
+    StorageAllocatedSize?: string;
     /** uint64 */
-    StorageMinAvailableSize: string;
+    StorageMinAvailableSize?: string;
     Nodes?: TSystemStateInfo[];
     /** uint64 */
-    MemoryUsed: string;
+    MemoryUsed?: string;
     /** uint64 */
-    MemoryLimit: string;
+    MemoryLimit?: string;
     /** double */
-    CoresUsed: number;
+    CoresUsed?: number;
     /** uint64 */
-    StorageGroups: string;
+    StorageGroups?: string;
 
     MonitoringEndpoint?: string; // additional
     ControlPlane?: ControlPlane; // additional
@@ -139,7 +139,7 @@ enum State {
     'CONFIGURING' = 'CONFIGURING',
 }
 
-enum ETabletVolatileState {
+export enum ETabletVolatileState {
     'TABLET_VOLATILE_STATE_UNKNOWN' = 'TABLET_VOLATILE_STATE_UNKNOWN',
     'TABLET_VOLATILE_STATE_STOPPED' = 'TABLET_VOLATILE_STATE_STOPPED',
     'TABLET_VOLATILE_STATE_BOOTING' = 'TABLET_VOLATILE_STATE_BOOTING',

Original file line number	Diff line number	Diff line change
`@@ -4,8 +4,8 @@ import cn from 'bem-cn-lite';`
`4`	`4`	`import './InfoViewer.scss';`
`5`	`5`
`6`	`6`	`export interface InfoViewerItem {`
`7`		`- label?: ReactNode;`
`8`		`- value?: ReactNode;`
	`7`	`+ label: ReactNode;`
	`8`	`+ value: ReactNode;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`interface InfoViewerProps {`