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')} - ); };