Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ import {Flex} from '@gravity-ui/uikit';
import {Link, useLocation} from 'react-router-dom';

import {parseQuery} from '../../../../../routes';
import {
useCapabilitiesLoaded,
useStorageGroupsHandlerAvailable,
} from '../../../../../store/reducers/capabilities/hooks';
import {storageApi} from '../../../../../store/reducers/storage/storage';
import {TENANT_METRICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
import type {TenantMetricsTab} from '../../../../../store/reducers/tenant/types';
import type {
Expand All @@ -11,7 +16,7 @@ import type {
} from '../../../../../store/reducers/tenants/utils';
import {cn} from '../../../../../utils/cn';
import {SHOW_NETWORK_UTILIZATION} from '../../../../../utils/constants';
import {useSetting, useTypedSelector} from '../../../../../utils/hooks';
import {useAutoRefreshInterval, useSetting, useTypedSelector} from '../../../../../utils/hooks';
import {calculateMetricAggregates} from '../../../../../utils/metrics';
import {
formatCoresLegend,
Expand All @@ -27,6 +32,7 @@ import './MetricsTabs.scss';
const b = cn('tenant-metrics-tabs');

interface MetricsTabsProps {
tenantName: string;
poolsCpuStats?: TenantPoolsStats[];
memoryStats?: TenantMetricStats[];
blobStorageStats?: TenantStorageStats[];
Expand All @@ -35,6 +41,7 @@ interface MetricsTabsProps {
}

export function MetricsTabs({
tenantName,
poolsCpuStats,
memoryStats,
blobStorageStats,
Expand All @@ -45,6 +52,25 @@ export function MetricsTabs({
const {metricsTab} = useTypedSelector((state) => state.tenant);
const queryParams = parseQuery(location);

// Fetch storage groups data to get correct count (only if groups handler available)
const capabilitiesLoaded = useCapabilitiesLoaded();
const groupsHandlerAvailable = useStorageGroupsHandlerAvailable();
const [autoRefreshInterval] = useAutoRefreshInterval();

const {currentData: storageGroupsData} = storageApi.useGetStorageGroupsInfoQuery(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have StorageGroups inside tenant data, there is no need to use storage handler

https://github.com/ydb-platform/ydb-embedded-ui/blob/main/src/types/api/tenant.ts#L56

{
tenant: tenantName,
shouldUseGroupsHandler: groupsHandlerAvailable,
with: 'all',
limit: 0,
Copy link

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting limit to 0 may be unexpected behavior. Consider using a more explicit parameter name or documenting this intent, as it's unclear whether this means 'no limit' or 'return no items'.

Suggested change
limit: 0,
limit: NO_LIMIT,

Copilot uses AI. Check for mistakes.
fieldsRequired: [],
Copy link

Copilot AI Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using an empty array for fieldsRequired when only the total count is needed may result in unnecessary data transfer. Consider if there's a more specific way to request only count data.

Suggested change
fieldsRequired: [],
fieldsRequired: ['count'],

Copilot uses AI. Check for mistakes.
},
{
pollingInterval: autoRefreshInterval,
skip: !capabilitiesLoaded || !groupsHandlerAvailable,
},
);

const tabLinks: Record<TenantMetricsTab, string> = {
[TENANT_METRICS_TABS_IDS.cpu]: getTenantPath({
...queryParams,
Expand Down Expand Up @@ -73,7 +99,9 @@ export function MetricsTabs({
// Calculate storage metrics using utility
const storageStats = tabletStorageStats || blobStorageStats || [];
const storageMetrics = calculateMetricAggregates(storageStats);
const storageGroupCount = storageStats.length;

// Get correct storage groups count from API (only if groups handler available)
const storageGroupCount = groupsHandlerAvailable ? (storageGroupsData?.total ?? 0) : undefined;

// Calculate memory metrics using utility
const memoryMetrics = calculateMetricAggregates(memoryStats);
Expand All @@ -91,8 +119,7 @@ export function MetricsTabs({
>
<Link to={tabLinks.cpu} className={b('link')}>
<TabCard
label={i18n('cards.cpu-label')}
sublabel={i18n('context_cpu-load')}
text={i18n('context_cpu-load')}
value={cpuMetrics.totalUsed}
limit={cpuMetrics.totalLimit}
legendFormatter={formatCoresLegend}
Expand All @@ -108,8 +135,11 @@ export function MetricsTabs({
>
<Link to={tabLinks.storage} className={b('link')}>
<TabCard
label={i18n('cards.storage-label')}
sublabel={i18n('context_storage-groups', {count: storageGroupCount})}
text={
storageGroupCount === undefined
? i18n('cards.storage-label')
: i18n('context_storage-groups', {count: storageGroupCount})
}
value={storageMetrics.totalUsed}
limit={storageMetrics.totalLimit}
legendFormatter={formatStorageLegend}
Expand All @@ -125,8 +155,7 @@ export function MetricsTabs({
>
<Link to={tabLinks.memory} className={b('link')}>
<TabCard
label={i18n('cards.memory-label')}
sublabel={i18n('context_memory-used')}
text={i18n('context_memory-used')}
value={memoryMetrics.totalUsed}
limit={memoryMetrics.totalLimit}
legendFormatter={formatStorageLegend}
Expand All @@ -143,8 +172,7 @@ export function MetricsTabs({
>
<Link to={tabLinks.network} className={b('link')}>
<TabCard
label={i18n('cards.network-label')}
sublabel={i18n('context_network-usage')}
text={i18n('context_network-usage')}
value={networkMetrics.totalUsed}
limit={networkMetrics.totalLimit}
legendFormatter={formatSpeedLegend}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,15 @@ import './TabCard.scss';
const b = cn('tenant-tab-card');

interface TabCardProps {
label: string;
sublabel?: string;
text: string;
value: number;
limit: number;
active?: boolean;
helpText?: string;
legendFormatter: (params: {value: number; capacity: number}) => string;
}

export function TabCard({
label,
sublabel,
value,
limit,
active,
helpText,
legendFormatter,
}: TabCardProps) {
export function TabCard({text, value, limit, active, helpText, legendFormatter}: TabCardProps) {
const {status, percents, legend, fill} = getDiagramValues({
value,
capacity: limit,
Expand Down Expand Up @@ -61,7 +52,7 @@ export function TabCard({
note={helpText}
noteIconSize="s"
>
{sublabel || label}
{text}
</DoughnutMetrics.Legend>
</div>
</Flex>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,7 @@ export function TenantOverview({
<HealthcheckPreview tenantName={tenantName} />
<QueriesActivityBar tenantName={tenantName} />
<MetricsTabs
tenantName={tenantName}
poolsCpuStats={poolsStats}
memoryStats={memoryStats}
blobStorageStats={blobStorageStats}
Expand Down
Loading