feat: redesign Storage section

Author: astandrik

.github/copilot-instructions.md

@@ -0,0 +1,108 @@
+# GitHub Copilot Instructions for YDB Embedded UI
+
+> **Note**: This file contains project-specific instructions for GitHub Copilot code review and assistance.
+> These instructions are derived from AGENTS.md but formatted specifically for Copilot's consumption.
+> When updating project conventions, update both AGENTS.md (for human developers) and this file (for Copilot).
+
+## Project Overview
+
+This is a React-based monitoring and management interface for YDB clusters. The codebase follows specific patterns and conventions that must be maintained.
+
+## Tech Stack Requirements
+
+- Use React 18.3 with TypeScript 5.x
+- Use Redux Toolkit 2.x with RTK Query for state management
+- Use Gravity UI (@gravity-ui/uikit) 7.x for UI components
+- Use React Router v5 (NOT v6) for routing
+- Use Monaco Editor 0.52 for code editing features
+
+## Critical Coding Rules
+
+### API Architecture
+
+- NEVER call APIs directly - always use `window.api.module.method()` pattern
+- Use RTK Query's `injectEndpoints` pattern for API endpoints
+- Wrap `window.api` calls in RTK Query for proper state management
+
+### Component Patterns
+
+- Use BEM naming with `cn()` utility: `const b = cn('component-name')`
+- Use `PaginatedTable` component for all data tables
+- Tables require: columns, fetchData function, and unique tableName
+- Use virtual scrolling for large datasets
+
+### Internationalization (MANDATORY)
+
+- NEVER hardcode user-facing strings
+- ALWAYS create i18n entries in component's `i18n/` folder
+- Follow key format: `<context>_<content>` (e.g., `action_save`, `field_name`)
+- Register keysets with `registerKeysets()` using unique component name
+
+### State Management
+
+- Use Redux Toolkit with domain-based organization
+- NEVER mutate state in RTK Query - return new objects/arrays
+- Clear errors on user input in forms
+- Always handle loading states in UI
+
+### UI Components
+
+- Prefer Gravity UI components over custom implementations
+- Use `createToast` for notifications
+- Use `ResponseError` component for API errors
+- Use `Loader` and `TableSkeleton` for loading states
+
+### Form Handling
+
+- Always use controlled components with validation
+- Clear errors on user input
+- Validate before submission
+- Use Gravity UI form components with error states
+
+### Dialog/Modal Patterns
+
+- Use `@ebay/nice-modal-react` for complex modals
+- Use Gravity UI `Dialog` for simple dialogs
+- Always include loading states
+
+### Type Conventions
+
+- API types prefixed with 'T' (e.g., `TTenantInfo`, `TClusterInfo`)
+- Types located in `src/types/api/` directory
+
+### Performance Requirements
+
+- Use React.memo for expensive renders
+- Lazy load Monaco Editor
+- Batch API requests when possible
+- Use virtual scrolling for tables
+
+### Testing Patterns
+
+- Unit tests colocated in `__test__` directories
+- E2E tests use Playwright with page objects pattern
+- Use CSS class selectors for E2E element selection
+
+### Navigation (React Router v5)
+
+- Use React Router v5 hooks (`useHistory`, `useParams`)
+- Always validate route params exist before use
+
+## Common Utilities
+
+- Formatters: `formatBytes()`, `formatDateTime()` from `src/utils/dataFormatters/`
+- Time parsing: utilities in `src/utils/timeParsers/`
+- Query utilities: `src/utils/query.ts` for SQL/YQL helpers
+
+## Before Making Changes
+
+- Run `npm run lint` and `npm run typecheck` before committing
+- Follow conventional commit message format
+- Ensure all user-facing text is internationalized
+- Test with a local YDB instance when possible
+
+## Debugging Helpers
+
+- `window.api` - Access API methods in browser console
+- `window.ydbEditor` - Monaco editor instance
+- Enable request tracing with `DEV_ENABLE_TRACING_FOR_ALL_REQUESTS`

CONTRIBUTING.md

@@ -17,6 +17,14 @@ that cannot be merged.
 To make a contribution you should submit a pull request. There will probably be discussion about the pull request and,
 if any changes are needed, we would love to work with you to get your pull request merged.
 
+## Development Guidelines
+
+When making changes to coding conventions or project patterns:
+- Update `AGENTS.md` - This is the primary documentation for human developers
+- Update `.github/copilot-instructions.md` - This contains the same information formatted for GitHub Copilot
+
+Both files should be kept in sync to ensure consistent code generation and review by both humans and AI assistants.
+
 ## Other questions
 
 If you have any questions, please mail us at info@ydb.tech.

src/components/InfoViewer/InfoViewer.scss

@@ -1,3 +1,5 @@
+@use '../../styles/mixins.scss';
+
 .info-viewer {
     --ydb-info-viewer-font-size: var(--g-text-body-2-font-size);
     --ydb-info-viewer-line-height: var(--g-text-body-2-line-height);
@@ -28,6 +30,10 @@
 
         max-width: 100%;
         padding-top: 4px;
+
+        &:first-child {
+            padding-top: 0;
+        }
     }
 
     &__label {
@@ -88,4 +94,18 @@
             }
         }
     }
+
+    &_variant_storage {
+        .info-viewer__title {
+            margin: 0 0 var(--g-spacing-3);
+
+            color: var(--g-color-text-primary);
+            @include mixins.subheader-1-typography();
+        }
+
+        .info-viewer__label {
+            color: var(--g-color-text-secondary);
+            @include mixins.body-1-typography();
+        }
+    }
 }

src/components/InfoViewer/InfoViewer.tsx

@@ -16,6 +16,7 @@ export interface InfoViewerProps {
     info?: InfoViewerItem[];
     dots?: boolean;
     size?: 's';
+    variant?: 'default' | 'storage';
     className?: string;
     multilineLabels?: boolean;
     renderEmptyState?: (props?: Pick<InfoViewerProps, 'title' | 'size'>) => React.ReactNode;
@@ -28,6 +29,7 @@ export const InfoViewer = ({
     info,
     dots = true,
     size,
+    variant = 'default',
     className,
     multilineLabels,
     renderEmptyState,
@@ -37,7 +39,7 @@ export const InfoViewer = ({
     }
 
     return (
-        <div className={b({size}, className)}>
+        <div className={b({size, variant}, className)}>
             {title && <div className={b('title')}>{title}</div>}
             {info && info.length > 0 ? (
                 <div className={b('items')}>

src/components/ProgressViewer/ProgressViewer.scss

@@ -109,4 +109,31 @@
         font-size: var(--g-text-body-1-font-size);
         line-height: 36px;
     }
+
+    &_size_storage {
+        position: relative;
+
+        width: 400px;
+        min-width: unset;
+        height: 10px;
+        padding: 0;
+
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-private-white-100);
+
+        #{$block}__progress-container {
+            position: relative;
+
+            width: 100%;
+            height: 100%;
+
+            border-radius: inherit;
+            background: inherit;
+        }
+
+        #{$block}__line {
+            border-radius: var(--g-border-radius-xs);
+            background-color: var(--g-color-private-green-450);
+        }
+    }
 }

src/components/ProgressViewer/ProgressViewer.tsx

@@ -1,15 +1,17 @@
-import {useTheme} from '@gravity-ui/uikit';
+import {Flex, Text, useTheme} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 import {calculateProgressStatus} from '../../utils/progress';
 import {isNumeric} from '../../utils/utils';
 
+import i18n from './i18n';
+
 import './ProgressViewer.scss';
 
 const b = cn('progress-viewer');
 
-type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head';
+type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head' | 'storage';
 
 export type FormatProgressViewerValues = (
     value?: number,
@@ -107,7 +109,29 @@ export function ProgressViewer({
         return valueText;
     };
 
+    const isStorageVariant = size === 'storage';
+
     if (isNumeric(value)) {
+        if (isStorageVariant) {
+            const storageDisplayText =
+                isNumeric(capacity) && !hideCapacity
+                    ? i18n('value_of_capacity', {value: valueText, capacity: capacityText})
+                    : valueText;
+
+            return (
+                <Flex alignItems="center" gap="2" className={className}>
+                    <div className={b({size, theme, status})}>
+                        <div className={b('progress-container')}>
+                            <div className={b('line')} style={lineStyle}></div>
+                        </div>
+                    </div>
+                    <Text variant="body-2" color="secondary">
+                        {storageDisplayText}
+                    </Text>
+                </Flex>
+            );
+        }
+
         return (
             <div className={b({size, theme, status}, className)}>
                 <div className={b('line')} style={lineStyle}></div>
@@ -116,5 +140,5 @@ export function ProgressViewer({
         );
     }
 
-    return <div className={`${b({size})} ${className} error`}>no data</div>;
+    return <div className={`${b({size})} ${className} error`}>{i18n('no-data')}</div>;
 }

src/components/ProgressViewer/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "value_of_capacity": "{{value}} of {{capacity}}",
+  "no-data": "no data"
+}

src/components/ProgressViewer/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-progress-viewer';
+
+export default registerKeysets(COMPONENT, {en});

src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.scss renamed to src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.scss

@@ -75,20 +75,20 @@
  */
 
 @mixin tab-edge-filler($side) {
-    &.tenant-metrics-cards__link-container_active::after {
+    &.tenant-metrics-tabs__link-container_active::after {
         @include pseudo-active-filler($side);
     }
 
-    &:not(.tenant-metrics-cards__link-container_active)::after {
+    &:not(.tenant-metrics-tabs__link-container_active)::after {
         @include pseudo-inactive-filler($side);
     }
 
-    &:not(.tenant-metrics-cards__link-container_active)::before {
+    &:not(.tenant-metrics-tabs__link-container_active)::before {
         @include pseudo-background-fill($side);
     }
 }
 
-.tenant-metrics-cards {
+.tenant-metrics-tabs {
     // CSS Variables for consistent design system
     --tab-border-width: 1px;
     --tab-filler-size: 10px;
@@ -198,7 +198,7 @@
             }
         }
 
-        .tenant-metrics-cards__link {
+        .tenant-metrics-tabs__link {
             padding-bottom: var(--tab-border-compensation);
             @include tab-border-base(var(--g-color-line-generic));
         }

src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx renamed to src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.tsx

@@ -21,25 +21,25 @@ import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {TabCard} from '../TabCard/TabCard';
 import i18n from '../i18n';
 
-import './MetricsCards.scss';
+import './MetricsTabs.scss';
 
-const b = cn('tenant-metrics-cards');
+const b = cn('tenant-metrics-tabs');
 
-interface MetricsCardsProps {
+interface MetricsTabsProps {
     poolsCpuStats?: TenantPoolsStats[];
     memoryStats?: TenantMetricStats[];
     blobStorageStats?: TenantStorageStats[];
     tabletStorageStats?: TenantStorageStats[];
     networkStats?: TenantMetricStats[];
 }
 
-export function MetricsCards({
+export function MetricsTabs({
     poolsCpuStats,
     memoryStats,
     blobStorageStats,
     tabletStorageStats,
     networkStats,
-}: MetricsCardsProps) {
+}: MetricsTabsProps) {
     const location = useLocation();
     const {metricsTab} = useTypedSelector((state) => state.tenant);
     const queryParams = parseQuery(location);