fix(ClusterDashboard): hide dashboard if /cluster handler version less 5 (#1535)

Author: Raubzeug

src/containers/Cluster/ClusterDashboard/ClusterDashboard.tsx

@@ -3,8 +3,7 @@ import {Flex, Text} from '@gravity-ui/uikit';
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import {Tags} from '../../../components/Tags';
 import type {ClusterGroupsStats} from '../../../store/reducers/cluster/types';
-import {isClusterInfoV2} from '../../../types/api/cluster';
-import type {TClusterInfo} from '../../../types/api/cluster';
+import type {TClusterInfo, TClusterInfoV2} from '../../../types/api/cluster';
 import type {IResponseError} from '../../../types/api/error';
 import {valueIsDefined} from '../../../utils';
 import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
@@ -24,6 +23,13 @@ import {
 
 import './ClusterDashboard.scss';
 
+// fixed CPU calculation
+export function isClusterInfoV5(info?: TClusterInfo): info is TClusterInfoV2 {
+    return info
+        ? 'Version' in info && typeof info.Version === 'number' && info.Version >= 5
+        : false;
+}
+
 interface AmountProps {
     value?: number | string;
 }
@@ -39,43 +45,44 @@ function Amount({value}: AmountProps) {
     );
 }
 
-interface ClusterDashboardProps {
-    cluster: TClusterInfo;
+interface ClusterDashboardProps<T = TClusterInfo> {
+    cluster: T;
     groupStats?: ClusterGroupsStats;
     loading?: boolean;
     error?: IResponseError | string;
 }
 
-export function ClusterDashboard(props: ClusterDashboardProps) {
+export function ClusterDashboard({cluster, ...props}: ClusterDashboardProps) {
+    const isSupportedClusterResponse = isClusterInfoV5(cluster);
+    if (!isSupportedClusterResponse) {
+        return null;
+    }
     if (props.error) {
         return <ResponseError error={props.error} className={b('error')} />;
     }
     return (
         <div className={b()}>
             <Flex gap={4} wrap>
                 <Flex gap={4} wrap="nowrap">
-                    <ClusterDoughnuts {...props} />
+                    <ClusterDoughnuts {...props} cluster={cluster} />
                 </Flex>
                 <div className={b('cards-container')}>
-                    <ClusterDashboardCards {...props} />
+                    <ClusterDashboardCards {...props} cluster={cluster} />
                 </div>
             </Flex>
         </div>
     );
 }
 
-function ClusterDoughnuts({cluster, loading}: ClusterDashboardProps) {
+function ClusterDoughnuts({cluster, loading}: ClusterDashboardProps<TClusterInfoV2>) {
     if (loading) {
         return <ClusterDashboardSkeleton />;
     }
     const metricsCards = [];
-    if (isClusterInfoV2(cluster)) {
-        const {CoresUsed, NumberOfCpus} = cluster;
-        if (valueIsDefined(CoresUsed) && valueIsDefined(NumberOfCpus)) {
-            metricsCards.push(
-                <ClusterMetricsCores value={CoresUsed} capacity={NumberOfCpus} key="cores" />,
-            );
-        }
+    const {CoresUsed, NumberOfCpus, CoresTotal} = cluster;
+    const total = CoresTotal ?? NumberOfCpus;
+    if (valueIsDefined(CoresUsed) && valueIsDefined(total)) {
+        metricsCards.push(<ClusterMetricsCores value={CoresUsed} capacity={total} key="cores" />);
     }
     const {StorageTotal, StorageUsed} = cluster;
     if (valueIsDefined(StorageTotal) && valueIsDefined(StorageUsed)) {

src/containers/Cluster/ClusterInfo/utils.tsx

@@ -63,7 +63,7 @@ export const getInfo = (
         const nodesStates = arrayNodesStates.map(([state, count]) => {
             return (
                 <NodesState state={state as EFlag} key={state}>
-                    {count}
+                    {formatNumber(count)}
                 </NodesState>
             );
         });

src/types/api/cluster.ts

@@ -77,6 +77,7 @@ export interface TClusterInfoV2 extends TClusterInfoV1 {
     Version?: number;
     /** value is uint64 */
     CoresUsed?: string;
+    CoresTotal?: number;
 }
 
 export type TClusterInfo = TClusterInfoV1 | TClusterInfoV2;