;
+ value: number;
+ limit: number;
legendFormatter: (params: {value: number; capacity: number}) => string;
}
-export function TabCard({text, value, limit, active, helpText, legendFormatter}: TabCardProps) {
- const {status, percents, legend, fill} = getDiagramValues({
- value,
- capacity: limit,
- legendFormatter,
- });
+interface TabCardServerlessProps extends TabCardBaseProps {
+ databaseType: 'Serverless';
+}
+
+type TabCardProps = TabCardDefaultProps | TabCardServerlessProps;
+function isServerlessProps(props: TabCardProps): props is TabCardServerlessProps {
+ return props.databaseType === 'Serverless';
+}
+
+function TabCardContainer({active, children}: {active?: boolean; children: React.ReactNode}) {
return (
-
-
-
- {percents}
-
-
-
-
- {legend}
-
-
- {text}
-
-
-
+ {children}
);
}
+
+const TabCardDefaultContent = React.memo(function TabCardDefaultContent({
+ text,
+ value,
+ limit,
+ helpText,
+ legendFormatter,
+}: {
+ text: string;
+ value: number;
+ limit: number;
+ helpText?: string;
+ legendFormatter: (params: {value: number; capacity: number}) => string;
+}) {
+ const diagram = useMemo(
+ () => getDiagramValues({value, capacity: limit, legendFormatter}),
+ [value, limit, legendFormatter],
+ );
+
+ const {status, percents, legend, fill} = diagram;
+
+ return (
+
+
+ {percents}
+
+
+ {legend}
+
+ {text}
+
+
+
+ );
+});
+
+const TabCardServerlessContent = React.memo(function TabCardServerlessContent({
+ text,
+ helpText,
+ subtitle,
+}: {
+ text: string;
+ helpText?: string;
+ subtitle?: string;
+}) {
+ return (
+
+
+ {text}
+
+ {subtitle ? (
+
+ {subtitle}
+
+ ) : null}
+
+ );
+});
+
+export function TabCard(props: TabCardProps) {
+ const {active} = props;
+
+ return (
+
+ {isServerlessProps(props) ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx
index b04026f366..7aeba979dd 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx
@@ -3,6 +3,7 @@ import {Flex} from '@gravity-ui/uikit';
import {setTopQueriesFilters} from '../../../../../store/reducers/executeTopQueries/executeTopQueries';
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import type {ETenantType} from '../../../../../types/api/tenant';
import {useTypedDispatch} from '../../../../../utils/hooks';
import {useDiagnosticsPageLinkGetter} from '../../../Diagnostics/DiagnosticsPages';
import {StatsWrapper} from '../StatsWrapper/StatsWrapper';
@@ -18,9 +19,10 @@ import {cpuDashboardConfig} from './cpuDashboardConfig';
interface TenantCpuProps {
tenantName: string;
additionalNodesProps?: AdditionalNodesProps;
+ databaseType?: ETenantType;
}
-export function TenantCpu({tenantName, additionalNodesProps}: TenantCpuProps) {
+export function TenantCpu({tenantName, additionalNodesProps, databaseType}: TenantCpuProps) {
const dispatch = useTypedDispatch();
const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
@@ -28,21 +30,33 @@ export function TenantCpu({tenantName, additionalNodesProps}: TenantCpuProps) {
const topShardsLink = getDiagnosticsPageLink(TENANT_DIAGNOSTICS_TABS_IDS.topShards);
const topQueriesLink = getDiagnosticsPageLink(TENANT_DIAGNOSTICS_TABS_IDS.topQueries);
+ const isServerless = databaseType === 'Serverless';
+
return (
-
-
-
-
-
-
-
+ {!isServerless && (
+ <>
+
+
+
+
+
+
+
+
+ )}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
index 1256fafc68..90512455bd 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
@@ -24,6 +24,10 @@
line-height: 24px;
}
+ &__serverless-tag-label {
+ margin-left: var(--g-spacing-1);
+ }
+
&__info {
position: sticky;
left: 0;
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
index 1638a3033d..9f70bb2da6 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
@@ -1,4 +1,4 @@
-import {Button, Flex, Icon} from '@gravity-ui/uikit';
+import {Button, Flex, HelpMark, Icon, Label} from '@gravity-ui/uikit';
import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
@@ -21,6 +21,7 @@ import {TenantCpu} from './TenantCpu/TenantCpu';
import {TenantMemory} from './TenantMemory/TenantMemory';
import {TenantNetwork} from './TenantNetwork/TenantNetwork';
import {TenantStorage} from './TenantStorage/TenantStorage';
+import i18n from './i18n';
import {b} from './utils';
import './TenantOverview.scss';
@@ -48,6 +49,13 @@ export function TenantOverview({
);
const tenantLoading = isFetching && tenant === undefined;
const {Name, Type, Overall} = tenant || {};
+ const isServerless = Type === 'Serverless';
+ const activeMetricsTab =
+ isServerless &&
+ metricsTab !== TENANT_METRICS_TABS_IDS.cpu &&
+ metricsTab !== TENANT_METRICS_TABS_IDS.storage
+ ? TENANT_METRICS_TABS_IDS.cpu
+ : metricsTab;
const tenantType = mapDatabaseTypeToDBName(Type);
// FIXME: remove after correct data is added to tenantInfo
@@ -111,22 +119,41 @@ export function TenantOverview({
hasClipboardButton={Boolean(tenant)}
clipboardButtonAlwaysVisible
/>
+ {isServerless ? (
+
+
+
+ ) : null}
);
};
const renderTabContent = () => {
- switch (metricsTab) {
+ switch (activeMetricsTab) {
case TENANT_METRICS_TABS_IDS.cpu: {
return (
);
}
case TENANT_METRICS_TABS_IDS.storage: {
- return ;
+ return (
+
+ );
}
case TENANT_METRICS_TABS_IDS.memory: {
return (
@@ -146,6 +173,9 @@ export function TenantOverview({
/>
);
}
+ default: {
+ return null;
+ }
}
};
@@ -186,6 +216,8 @@ export function TenantOverview({
? Number(tenantData.StorageGroups)
: undefined
}
+ databaseType={Type}
+ activeTab={activeMetricsTab}
/>