From e83645a49c2563954f59836880f774aa78c4893e Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Tue, 29 Oct 2024 17:48:21 +0300
Subject: [PATCH] fix(Cluster): use /capabilities to show dashboard

---
 src/containers/Cluster/Cluster.tsx            | 16 ++++++----
 .../ClusterDashboard/ClusterDashboard.tsx     | 32 ++++++++-----------
 src/store/reducers/capabilities/hooks.ts      |  3 ++
 src/types/api/capabilities.ts                 |  1 +
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx
index 83b3ccf69..81105958f 100644
--- a/src/containers/Cluster/Cluster.tsx
+++ b/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"
diff --git a/src/containers/Cluster/ClusterDashboard/ClusterDashboard.tsx b/src/containers/Cluster/ClusterDashboard/ClusterDashboard.tsx
index 660899b75..eb1b982db 100644
--- a/src/containers/Cluster/ClusterDashboard/ClusterDashboard.tsx
+++ b/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)) {
diff --git a/src/store/reducers/capabilities/hooks.ts b/src/store/reducers/capabilities/hooks.ts
index 321d5a413..2ee301f81 100644
--- a/src/store/reducers/capabilities/hooks.ts
+++ b/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;
+};
diff --git a/src/types/api/capabilities.ts b/src/types/api/capabilities.ts
index 36b829acb..cb40134f9 100644
--- a/src/types/api/capabilities.ts
+++ b/src/types/api/capabilities.ts
@@ -12,4 +12,5 @@ export type Capability =
     | '/storage/groups'
     | '/viewer/query'
     | '/viewer/feature_flags'
+    | '/viewer/cluster'
     | '/viewer/nodes';