diff --git a/src/components/DiskPageTitle/DiskPageTitle.scss b/src/components/EntityPageTitle/EntityPageTitle.scss
similarity index 92%
rename from src/components/DiskPageTitle/DiskPageTitle.scss
rename to src/components/EntityPageTitle/EntityPageTitle.scss
index e19c68db6..54b8b7fd3 100644
--- a/src/components/DiskPageTitle/DiskPageTitle.scss
+++ b/src/components/EntityPageTitle/EntityPageTitle.scss
@@ -1,6 +1,6 @@
@import '../../styles/mixins.scss';
-.ydb-disk-page-title {
+.ydb-entity-page-title {
display: flex;
flex-flow: row nowrap;
align-items: baseline;
diff --git a/src/components/DiskPageTitle/DiskPageTitle.tsx b/src/components/EntityPageTitle/EntityPageTitle.tsx
similarity index 62%
rename from src/components/DiskPageTitle/DiskPageTitle.tsx
rename to src/components/EntityPageTitle/EntityPageTitle.tsx
index 05534f58b..d94956941 100644
--- a/src/components/DiskPageTitle/DiskPageTitle.tsx
+++ b/src/components/EntityPageTitle/EntityPageTitle.tsx
@@ -2,23 +2,31 @@ import type {EFlag} from '../../types/api/enums';
import {cn} from '../../utils/cn';
import {StatusIcon} from '../StatusIcon/StatusIcon';
-import './DiskPageTitle.scss';
+import './EntityPageTitle.scss';
-const b = cn('ydb-disk-page-title');
+const b = cn('ydb-entity-page-title');
-interface DiskPageTitleProps {
+interface EntityPageTitleProps {
entityName: React.ReactNode;
status: EFlag;
id: React.ReactNode;
className?: string;
+ children?: React.ReactNode;
}
-export function DiskPageTitle({entityName, status, id, className}: DiskPageTitleProps) {
+export function EntityPageTitle({
+ entityName,
+ status,
+ id,
+ className,
+ children,
+}: EntityPageTitleProps) {
return (
{entityName}
{id}
+ {children}
);
}
diff --git a/src/components/PageMeta/PageMeta.scss b/src/components/PageMeta/PageMeta.scss
index 1f5c2c9fd..7f1452c97 100644
--- a/src/components/PageMeta/PageMeta.scss
+++ b/src/components/PageMeta/PageMeta.scss
@@ -1,16 +1,19 @@
@import '../../styles//mixins.scss';
.ydb-page-meta {
- display: flex;
- flex-flow: row nowrap;
+ &__info {
+ display: flex;
+ flex-grow: 1;
+ flex-flow: row nowrap;
- height: var(--g-text-body-2-line-height);
+ height: var(--g-text-body-2-line-height);
- text-wrap: nowrap;
+ text-wrap: nowrap;
- color: var(--g-color-text-primary);
+ color: var(--g-color-text-primary);
- @include body-2-typography();
+ @include body-2-typography();
+ }
&__skeleton {
width: 80%;
diff --git a/src/components/PageMeta/PageMeta.tsx b/src/components/PageMeta/PageMeta.tsx
index e9291fd1d..4dd5a7485 100644
--- a/src/components/PageMeta/PageMeta.tsx
+++ b/src/components/PageMeta/PageMeta.tsx
@@ -1,6 +1,8 @@
-import {Skeleton} from '@gravity-ui/uikit';
+import {Flex} from '@gravity-ui/uikit';
import {cn} from '../../utils/cn';
+import {AutoRefreshControl} from '../AutoRefreshControl/AutoRefreshControl';
+import {Skeleton} from '../Skeleton/Skeleton';
import './PageMeta.scss';
@@ -12,7 +14,7 @@ interface PageMetaProps {
loading?: boolean;
}
-export function PageMeta({items, loading, className}: PageMetaProps) {
+export function PageMeta({items, loading}: PageMetaProps) {
const renderContent = () => {
if (loading) {
return ;
@@ -21,5 +23,19 @@ export function PageMeta({items, loading, className}: PageMetaProps) {
return items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0');
};
- return {renderContent()}
;
+ return {renderContent()}
;
+}
+
+export function PageMetaWithAutorefresh({className, ...rest}: PageMetaProps) {
+ return (
+
+
+
+
+ );
}
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
new file mode 100644
index 000000000..56f6449d0
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -0,0 +1,16 @@
+import {Skeleton as KitSkeleton} from '@gravity-ui/uikit';
+
+import {useDelayed} from '../../utils/hooks/useDelayed';
+
+interface SkeletonProps {
+ delay?: number;
+ className?: string;
+}
+
+export const Skeleton = ({delay = 600, className}: SkeletonProps) => {
+ const show = useDelayed(delay);
+ if (!show) {
+ return null;
+ }
+ return ;
+};
diff --git a/src/containers/PDiskPage/PDiskPage.scss b/src/containers/PDiskPage/PDiskPage.scss
index e6522d6ca..9c4b21895 100644
--- a/src/containers/PDiskPage/PDiskPage.scss
+++ b/src/containers/PDiskPage/PDiskPage.scss
@@ -20,13 +20,6 @@
left: 0;
}
- &__meta {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: var(--g-spacing-4);
- }
-
&__controls {
display: flex;
align-items: center;
diff --git a/src/containers/PDiskPage/PDiskPage.tsx b/src/containers/PDiskPage/PDiskPage.tsx
index 0273f7372..34f2d5970 100644
--- a/src/containers/PDiskPage/PDiskPage.tsx
+++ b/src/containers/PDiskPage/PDiskPage.tsx
@@ -7,14 +7,13 @@ import {Helmet} from 'react-helmet-async';
import {StringParam, useQueryParams} from 'use-query-params';
import {z} from 'zod';
-import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import {DiskPageTitle} from '../../components/DiskPageTitle/DiskPageTitle';
+import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
import {ResponseError} from '../../components/Errors/ResponseError';
import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
import {InternalLink} from '../../components/InternalLink/InternalLink';
import {PDiskInfo} from '../../components/PDiskInfo/PDiskInfo';
-import {PageMeta} from '../../components/PageMeta/PageMeta';
+import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
import {getPDiskPagePath} from '../../routes';
import {api} from '../../store/reducers/api';
import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
@@ -125,16 +124,17 @@ export function PDiskPage() {
const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
return (
-
+
);
};
const renderPageTitle = () => {
return (
-
@@ -129,7 +128,7 @@ export function VDiskPage() {
const renderPageTitle = () => {
return (
-
{vDiskPageKeyset('evict-vdisk-button')}
-
);
};