Merge branch 'main' into astandrik.display-trace-level-selector-1147

ydb-platform · Aug 19, 2024 · 5e71713 · 5e71713
2 parents f0448ff + 7d544b7
commit 5e71713
Show file tree

Hide file tree

Showing 53 changed files with 892 additions and 682 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
diff --git a/src/.eslintrc b/src/.eslintrc
@@ -19,6 +19,17 @@
                 "selector": "ImportDeclaration[source.value='axios'] :matches(ImportSpecifier[imported.name='isAxiosError'])",
                 "message": "Please use isAxiosError from utils/response instead of axios",
             },
-          ],
+        ],
+        "no-restricted-imports": [
+            "error",
+            {
+                "patterns": [
+                    {
+                        "group": [".*/**/lib"],
+                        "message": "Please use direct imports instead",
+                    },
+                ],
+            },
+        ],
     },
 }
diff --git a/src/components/ElapsedTime/ElapsedTime.tsx b/src/components/ElapsedTime/ElapsedTime.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import {duration} from '@gravity-ui/date-utils';
 import {Label} from '@gravity-ui/uikit';
 
-import {HOUR_IN_SECONDS, SECOND_IN_MS, cn} from '../../lib';
+import {cn} from '../../utils/cn';
+import {HOUR_IN_SECONDS, SECOND_IN_MS} from '../../utils/constants';
 
 const b = cn('ydb-query-elapsed-time');
 

diff --git a/src/components/EntitiesCount/EntitiesCount.tsx b/src/components/EntitiesCount/EntitiesCount.tsx
@@ -1,7 +1,11 @@
 import {Label} from '@gravity-ui/uikit';
 
+import {cn} from '../../utils/cn';
+
 import i18n from './i18n';
 
+const b = cn('ydb-entities-count');
+
 interface EntitiesCountProps {
     current: number | string;
     total?: number | string;
@@ -28,7 +32,7 @@ export const EntitiesCount = ({total, current, label, loading, className}: Entit
     }
 
     return (
-        <Label theme="info" size="m" className={className}>
+        <Label theme="info" size="m" className={b(null, className)}>
             {content}
         </Label>
     );

diff --git a/...mponents/DiskPageTitle/DiskPageTitle.scss → ...ents/EntityPageTitle/EntityPageTitle.scss b/...mponents/DiskPageTitle/DiskPageTitle.scss → ...ents/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/...omponents/DiskPageTitle/DiskPageTitle.tsx → ...nents/EntityPageTitle/EntityPageTitle.tsx b/...omponents/DiskPageTitle/DiskPageTitle.tsx → ...nents/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 (
         <div className={b(null, className)}>
             <span className={b('prefix')}>{entityName}</span>
             <StatusIcon className={b('icon')} status={status} size="s" />
             {id}
+            {children}
         </div>
     );
 }
diff --git 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
@@ -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 <Skeleton className={b('skeleton')} />;
@@ -21,5 +23,19 @@ export function PageMeta({items, loading, className}: PageMetaProps) {
         return items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0');
     };
 
-    return <div className={b(null, className)}>{renderContent()}</div>;
+    return <div className={b('info')}>{renderContent()}</div>;
+}
+
+export function PageMetaWithAutorefresh({className, ...rest}: PageMetaProps) {
+    return (
+        <Flex
+            gap={1}
+            alignItems="center"
+            justifyContent="space-between"
+            className={b(null, className)}
+        >
+            <PageMeta {...rest} />
+            <AutoRefreshControl />
+        </Flex>
+    );
 }