Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions src/containers/Cluster/Cluster.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -54,6 +55,7 @@ export function Cluster({
additionalVersionsProps,
}: ClusterProps) {
const container = React.useRef<HTMLDivElement>(null);
const isClusterDashboardAvailable = useClusterDashboardAvailable();

const dispatch = useTypedDispatch();

Expand Down Expand Up @@ -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"
Expand Down
32 changes: 13 additions & 19 deletions src/containers/Cluster/ClusterDashboard/ClusterDashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
}
Expand All @@ -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')} />;
}
Expand All @@ -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)) {
Expand Down
3 changes: 3 additions & 0 deletions src/store/reducers/capabilities/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,6 @@ export const useViewerNodesHandlerHasGrouping = () => {
export const useFeatureFlagsAvailable = () => {
return useGetFeatureVersion('/viewer/feature_flags') > 1;
};
export const useClusterDashboardAvailable = () => {
return useGetFeatureVersion('/viewer/cluster') > 4;
};
1 change: 1 addition & 0 deletions src/types/api/capabilities.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ export type Capability =
| '/storage/groups'
| '/viewer/query'
| '/viewer/feature_flags'
| '/viewer/cluster'
| '/viewer/nodes';
Loading