feat: add PDisk page (#759)

Author: artemmufazalov

src/components/EntityStatus/EntityStatus.scss

@@ -58,61 +58,7 @@
         }
     }
 
-    &__status-color,
-    &__status-icon {
-        flex-shrink: 0;
-
-        margin-right: 8px;
-
-        border-radius: 3px;
-        &_size_xs {
-            aspect-ratio: 1;
-
-            width: 12px;
-            height: 12px;
-        }
-        &_size_s {
-            aspect-ratio: 1;
-
-            width: 16px;
-            height: 16px;
-        }
-        &_size_m {
-            aspect-ratio: 1;
-
-            width: 18px;
-            height: 18px;
-        }
-
-        &_size_l {
-            width: 27px;
-            height: 27px;
-        }
-    }
-
-    &__status-color {
-        &_state_green {
-            background-color: var(--ydb-color-status-green);
-        }
-        &_state_yellow {
-            background-color: var(--ydb-color-status-yellow);
-        }
-        &_state_blue {
-            background-color: var(--ydb-color-status-blue);
-        }
-        &_state_red {
-            background-color: var(--ydb-color-status-red);
-        }
-        &_state_grey {
-            background-color: var(--ydb-color-status-grey);
-        }
-        &_state_orange {
-            background-color: var(--ydb-color-status-orange);
-        }
-    }
-
-    &__label,
-    &__status-icon {
+    &__label {
         &_state_blue {
             color: var(--ydb-color-status-blue);
         }

src/components/EntityStatus/EntityStatus.tsx

@@ -1,23 +1,13 @@
 import {Link} from 'react-router-dom';
 import cn from 'bem-cn-lite';
 
-import {Icon, Link as UIKitLink} from '@gravity-ui/uikit';
+import {Link as UIKitLink} from '@gravity-ui/uikit';
 
 import {EFlag} from '../../types/api/enums';
-import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg';
-import circleInfoIcon from '../../assets/icons/circle-info.svg';
-import circleTimesIcon from '../../assets/icons/circle-xmark.svg';
-import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import {StatusIcon, type StatusIconMode, type StatusIconSize} from '../StatusIcon/StatusIcon';
 import {ClipboardButton} from '../ClipboardButton';
 import './EntityStatus.scss';
 
-const icons = {
-    [EFlag.Blue]: circleInfoIcon,
-    [EFlag.Yellow]: circleExclamationIcon,
-    [EFlag.Orange]: triangleExclamationIcon,
-    [EFlag.Red]: circleTimesIcon,
-};
-
 const b = cn('entity-status');
 
 interface EntityStatusProps {
@@ -27,8 +17,8 @@ interface EntityStatusProps {
     path?: string;
     iconPath?: string;
 
-    size?: 'xs' | 's' | 'm' | 'l';
-    mode?: 'color' | 'icons';
+    size?: StatusIconSize;
+    mode?: StatusIconMode;
 
     showStatus?: boolean;
     externalLink?: boolean;
@@ -64,18 +54,7 @@ export function EntityStatus({
             return null;
         }
 
-        const modifiers = {state: status.toLowerCase(), size};
-
-        if (mode === 'icons' && status in icons) {
-            return (
-                <Icon
-                    className={b('status-icon', modifiers)}
-                    data={icons[status as keyof typeof icons]}
-                />
-            );
-        }
-
-        return <div className={b('status-color', modifiers)} />;
+        return <StatusIcon status={status} size={size} mode={mode} />;
     };
     const renderStatusLink = () => {
         return (

src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx

@@ -8,7 +8,7 @@ export interface InfoViewerItem {
     value: ReactNode;
 }
 
-interface InfoViewerProps {
+export interface InfoViewerProps {
     title?: string;
     info?: InfoViewerItem[];
     dots?: boolean;
@@ -20,7 +20,7 @@ interface InfoViewerProps {
 
 const b = cn('info-viewer');
 
-const InfoViewer = ({
+export const InfoViewer = ({
     title,
     info,
     dots = true,

src/components/InfoViewer/InfoViewer.tsx

@@ -1,10 +1,8 @@
-.ydb-cluster-info-skeleton {
+.ydb-info-viewer-skeleton {
     display: flex;
     flex-direction: column;
     gap: 16px;
 
-    margin-top: 5px;
-
     &__row {
         display: flex;
         align-items: flex-start;
@@ -39,10 +37,4 @@
         min-width: 200px;
         max-width: 20%;
     }
-
-    &__versions {
-        min-width: 400px;
-        max-width: 40%;
-        height: 36px;
-    }
 }

src/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.scss renamed to src/components/InfoViewerSkeleton/InfoViewerSkeleton.scss

@@ -2,9 +2,9 @@ import block from 'bem-cn-lite';
 
 import {Skeleton} from '@gravity-ui/uikit';
 
-import './ClusterInfoSkeleton.scss';
+import './InfoViewerSkeleton.scss';
 
-const b = block('ydb-cluster-info-skeleton');
+const b = block('ydb-info-viewer-skeleton');
 
 const SkeletonLabel = () => (
     <div className={b('label')}>
@@ -13,22 +13,18 @@ const SkeletonLabel = () => (
     </div>
 );
 
-interface ClusterInfoSkeletonProps {
+interface InfoViewerSkeletonProps {
     className?: string;
     rows?: number;
 }
 
-export const ClusterInfoSkeleton = ({rows = 8, className}: ClusterInfoSkeletonProps) => (
+export const InfoViewerSkeleton = ({rows = 8, className}: InfoViewerSkeletonProps) => (
     <div className={b(null, className)}>
         {[...new Array(rows)].map((_, index) => (
             <div className={b('row')} key={`skeleton-row-${index}`}>
                 <SkeletonLabel />
                 <Skeleton className={b('value')} />
             </div>
         ))}
-        <div className={b('row')} key="versions">
-            <SkeletonLabel />
-            <Skeleton className={b('versions')} />
-        </div>
     </div>
 );

src/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.tsx renamed to src/components/InfoViewerSkeleton/InfoViewerSkeleton.tsx

@@ -1,4 +1,4 @@
-.ydb-external-link-with-icon {
+.ydb-link-with-icon {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;

src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.scss renamed to src/components/LinkWithIcon/LinkWithIcon.scss

@@ -0,0 +1,40 @@
+import block from 'bem-cn-lite';
+
+import {Link} from '@gravity-ui/uikit';
+
+import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
+
+import {InternalLink} from '../InternalLink';
+import './LinkWithIcon.scss';
+
+const b = block('ydb-link-with-icon');
+
+interface ExternalLinkWithIconProps {
+    title: string;
+    url: string;
+    external?: boolean;
+}
+
+export const LinkWithIcon = ({title, url, external = true}: ExternalLinkWithIconProps) => {
+    const linkContent = (
+        <>
+            {title}
+            {'\u00a0'}
+            <ArrowUpRightFromSquare />
+        </>
+    );
+
+    if (external) {
+        return (
+            <Link href={url} target="_blank" className={b()}>
+                {linkContent}
+            </Link>
+        );
+    }
+
+    return (
+        <InternalLink to={url} className={b()}>
+            {linkContent}
+        </InternalLink>
+    );
+};

src/components/LinkWithIcon/LinkWithIcon.tsx

@@ -0,0 +1,8 @@
+.ydb-pdisk-info {
+    &__links {
+        display: flex;
+        flex-flow: row wrap;
+
+        gap: 12px;
+    }
+}