fix(Cluster): use /capabilities to show dashboard (#1556)

Author: Raubzeug

src/containers/Cluster/Cluster.tsx

@@ -9,6 +9,7 @@ import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefres
 import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../components/InternalLink';
 import routes, {getLocationObjectFromHref} from '../../routes';
+import {useClusterDashboardAvailable} from '../../store/reducers/capabilities/hooks';
 import {
     clusterApi,
     selectClusterTabletsWithFqdn,
@@ -54,6 +55,7 @@ export function Cluster({
     additionalVersionsProps,
 }: ClusterProps) {
     const container = React.useRef<HTMLDivElement>(null);
+    const isClusterDashboardAvailable = useClusterDashboardAvailable();
 
     const dispatch = useTypedDispatch();
 
@@ -123,12 +125,14 @@ export function Cluster({
             <div className={b('sticky-wrapper')}>
                 <AutoRefreshControl className={b('auto-refresh-control')} />
             </div>
-            <ClusterDashboard
-                cluster={cluster}
-                groupStats={groupsStats}
-                loading={infoLoading}
-                error={clusterError || cluster?.error}
-            />
+            {isClusterDashboardAvailable && (
+                <ClusterDashboard
+                    cluster={cluster}
+                    groupStats={groupsStats}
+                    loading={infoLoading}
+                    error={clusterError || cluster?.error}
+                />
+            )}
             <div className={b('tabs-sticky-wrapper')}>
                 <Tabs
                     size="l"

src/containers/Cluster/ClusterDashboard/ClusterDashboard.tsx

@@ -3,7 +3,8 @@ 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 type {TClusterInfo, TClusterInfoV2} from '../../../types/api/cluster';
+import {isClusterInfoV2} from '../../../types/api/cluster';
+import type {TClusterInfo} from '../../../types/api/cluster';
 import type {IResponseError} from '../../../types/api/error';
 import {valueIsDefined} from '../../../utils';
 import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
@@ -23,13 +24,6 @@ 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;
 }
@@ -45,18 +39,14 @@ function Amount({value}: AmountProps) {
     );
 }
 
-interface ClusterDashboardProps<T = TClusterInfo> {
-    cluster: T;
+interface ClusterDashboardProps {
+    cluster: TClusterInfo;
     groupStats?: ClusterGroupsStats;
     loading?: boolean;
     error?: IResponseError | string;
 }
 
 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')} />;
     }
@@ -74,15 +64,19 @@ export function ClusterDashboard({cluster, ...props}: ClusterDashboardProps) {
     );
 }
 
-function ClusterDoughnuts({cluster, loading}: ClusterDashboardProps<TClusterInfoV2>) {
+function ClusterDoughnuts({cluster, loading}: ClusterDashboardProps) {
     if (loading) {
         return <ClusterDashboardSkeleton />;
     }
     const metricsCards = [];
-    const {CoresUsed, NumberOfCpus, CoresTotal} = cluster;
-    const total = CoresTotal ?? NumberOfCpus;
-    if (valueIsDefined(CoresUsed) && valueIsDefined(total)) {
-        metricsCards.push(<ClusterMetricsCores value={CoresUsed} capacity={total} key="cores" />);
+    if (isClusterInfoV2(cluster)) {
+        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/store/reducers/capabilities/hooks.ts

@@ -42,3 +42,6 @@ export const useViewerNodesHandlerHasGrouping = () => {
 export const useFeatureFlagsAvailable = () => {
     return useGetFeatureVersion('/viewer/feature_flags') > 1;
 };
+export const useClusterDashboardAvailable = () => {
+    return useGetFeatureVersion('/viewer/cluster') > 4;
+};

src/types/api/capabilities.ts

@@ -12,4 +12,5 @@ export type Capability =
     | '/storage/groups'
     | '/viewer/query'
     | '/viewer/feature_flags'
+    | '/viewer/cluster'
     | '/viewer/nodes';