ydb-embedded-ui 4.15.1 → 4.16.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.16.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.15.1...v4.16.0) (2023-08-25)
+
+
+### Features
+
+* add language setting ([#520](https://github.com/ydb-platform/ydb-embedded-ui/issues/520)) ([425c9ae](https://github.com/ydb-platform/ydb-embedded-ui/commit/425c9ae1fed83d7695d2a9288c2ef24c2807d8da))
+* **Diagnostics:** update Healthcheck design ([#509](https://github.com/ydb-platform/ydb-embedded-ui/issues/509)) ([e315ca4](https://github.com/ydb-platform/ydb-embedded-ui/commit/e315ca42ac6c9d1736aaa25e2dd90afc2bcb9a8e))
+* **Query:** support PostgreSQL syntax ([#515](https://github.com/ydb-platform/ydb-embedded-ui/issues/515)) ([0c8346e](https://github.com/ydb-platform/ydb-embedded-ui/commit/0c8346efc3643a8d201137901880f985dc100458))
+
+
+### Bug Fixes
+
+* **UserSettings:** update query mode setting description ([#521](https://github.com/ydb-platform/ydb-embedded-ui/issues/521)) ([c526471](https://github.com/ydb-platform/ydb-embedded-ui/commit/c52647192ff95d8fb9961479a85cc4d5a639d4e6))
+
 ## [4.15.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.15.0...v4.15.1) (2023-08-21)
 
 

package/dist/components/DiagnosticCard/DiagnosticCard.scss

@@ -0,0 +1,5 @@
+.diagnostic-card {
+    min-width: 200px;
+    max-width: 350px;
+    padding: 16px;
+}

package/dist/components/DiagnosticCard/DiagnosticCard.tsx

@@ -0,0 +1,17 @@
+import {ReactNode} from 'react';
+import cn from 'bem-cn-lite';
+
+import {Card} from '@gravity-ui/uikit';
+
+import './DiagnosticCard.scss';
+
+const b = cn('diagnostic-card');
+
+interface DiagnosticCardProps {
+    children?: ReactNode;
+    className?: string;
+}
+
+export function DiagnosticCard({children, className}: DiagnosticCardProps) {
+    return <Card className={b(null, className)}>{children}</Card>;
+}

package/dist/components/EntityStatus/EntityStatus.js

@@ -107,13 +107,13 @@ class EntityStatus extends React.Component {
         );
     }
     render() {
-        const {name, label, iconPath, hasClipboardButton, className} = this.props;
+        const {name, label, iconPath, hasClipboardButton, className, size, status} = this.props;
 
         return (
             <div className={b(null, className)} title={name}>
                 {iconPath ? this.renderStatusLink() : this.renderIcon()}
                 {label && (
-                    <span title={label} className={b('label')}>
+                    <span title={label} className={b('label', {size, state: status.toLowerCase()})}>
                         {label}
                     </span>
                 )}

package/dist/components/EntityStatus/EntityStatus.scss

@@ -47,6 +47,15 @@
         line-height: var(--yc-text-body-2-line-height);
 
         color: var(--yc-color-text-complementary);
+
+        &_size_m {
+            font-size: var(--yc-text-body-2-font-size);
+            line-height: var(--yc-text-body-2-line-height);
+        }
+
+        &_size_l {
+            font-size: var(--yc-text-header-2-font-size);
+        }
     }
 
     &__link {
@@ -89,6 +98,11 @@
             width: 18px;
             height: 18px;
         }
+
+        &_size_l {
+            width: 27px;
+            height: 27px;
+        }
     }
 
     &__status-color {
@@ -115,6 +129,7 @@
         }
     }
 
+    &__label,
     &__status-icon {
         &_state_blue {
             color: var(--yc-color-infographics-info-heavy);

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -8,8 +8,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import {Icon} from '../../../../components/Icon';
 import Overview from '../Overview/Overview';
 import {Healthcheck} from '../Healthcheck';
-//@ts-ignore
-import TenantOverview from '../TenantOverview/TenantOverview';
+import {TenantOverview} from '../TenantOverview/TenantOverview';
 
 import './DetailedOverview.scss';
 
@@ -25,12 +24,9 @@ const b = cn('kv-detailed-overview');
 function DetailedOverview(props: DetailedOverviewProps) {
     const [isModalVisible, setIsModalVisible] = useState(false);
 
-    const [expandedIssueId, setExpandedIssueId] = useState<string>();
-
     const {currentSchemaPath} = useSelector((state: any) => state.schema);
 
-    const openModalHandler = (id: string) => {
-        setExpandedIssueId(id);
+    const openModalHandler = () => {
         setIsModalVisible(true);
     };
 
@@ -41,11 +37,7 @@ function DetailedOverview(props: DetailedOverviewProps) {
     const renderModal = () => {
         return (
             <Modal open={isModalVisible} onClose={closeModalHandler} className={b('modal')}>
-                <Healthcheck
-                    tenant={props.tenantName}
-                    fetchData={false}
-                    expandedIssueId={expandedIssueId}
-                />
+                <Healthcheck tenant={props.tenantName} fetchData={false} />
                 <Button
                     className={b('close-modal-button')}
                     onClick={closeModalHandler}

package/dist/containers/Tenant/Diagnostics/Healthcheck/Details/Details.tsx

@@ -4,7 +4,9 @@ import {Button, Icon} from '@gravity-ui/uikit';
 
 import updateArrow from '../../../../../assets/icons/update-arrow.svg';
 
+import type {IResponseError} from '../../../../../types/api/error';
 import type {IIssuesTree} from '../../../../../types/store/healthcheck';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
 import IssueTree from '../IssuesViewer/IssueTree';
 
@@ -13,17 +15,14 @@ import i18n from '../i18n';
 const b = cn('healthcheck');
 
 interface DetailsProps {
-    issueTree?: IIssuesTree;
+    issueTrees?: IIssuesTree[];
     loading?: boolean;
     onUpdate: VoidFunction;
+    error?: IResponseError;
 }
 
 export const Details = (props: DetailsProps) => {
-    const {loading, onUpdate, issueTree} = props;
-
-    if (!issueTree) {
-        return null;
-    }
+    const {loading, onUpdate, issueTrees, error} = props;
 
     const renderHealthcheckHeader = () => {
         return (
@@ -38,18 +37,28 @@ export const Details = (props: DetailsProps) => {
         );
     };
 
-    const renderHealthcheckIssues = () => {
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
+        }
+
+        if (!issueTrees || !issueTrees.length) {
+            return i18n('status_message.ok');
+        }
+
         return (
-            <div className={b('issues-wrapper')}>
-                <IssueTree issueTree={issueTree} />
-            </div>
+            <>
+                {issueTrees.map((issueTree) => (
+                    <IssueTree key={issueTree.id} issueTree={issueTree} />
+                ))}
+            </>
         );
     };
 
     return (
         <div className={b('details')}>
             {renderHealthcheckHeader()}
-            {renderHealthcheckIssues()}
+            <div className={b('details-content-wrapper')}>{renderContent()}</div>
         </div>
     );
 };

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss

@@ -3,6 +3,8 @@
 @import '@gravity-ui/uikit/styles/mixins.scss';
 
 .healthcheck {
+    display: flex;
+
     &_expanded {
         // Since most of the inner containers have fixed width, we can set fixed width here as well
         // Thus we will get rid of unneeded layout shift when scrollbar appear
@@ -17,7 +19,7 @@
         margin-bottom: 15px;
     }
 
-    &__issues-wrapper {
+    &__details-content-wrapper {
         overflow-x: hidden;
         overflow-y: auto;
 
@@ -67,6 +69,17 @@
         line-height: 24px;
     }
 
+    &__issues-statistics {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        margin: 10px 0;
+
+        column-gap: 26px;
+        row-gap: 16px;
+    }
+
     &__self-check-status-indicator {
         padding: 0 8px;
 

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.tsx

@@ -8,40 +8,36 @@ import {SelfCheckResult} from '../../../../types/api/healthcheck';
 import {useTypedSelector, useAutofetcher} from '../../../../utils/hooks';
 import {
     getHealthcheckInfo,
-    selectIssuesTreeById,
-    selectIssuesTreesRoots,
+    selectIssuesStatistics,
+    selectIssuesTrees,
     setDataWasNotLoaded,
 } from '../../../../store/reducers/healthcheckInfo';
+import {DiagnosticCard} from '../../../../components/DiagnosticCard/DiagnosticCard';
 
 import {Details} from './Details';
 import {Preview} from './Preview';
 
-import i18n from './i18n';
 import './Healthcheck.scss';
 
 interface HealthcheckProps {
     tenant: string;
     preview?: boolean;
     fetchData?: boolean;
-    expandedIssueId?: string;
-    showMoreHandler?: (id: string) => void;
+    showMoreHandler?: VoidFunction;
 }
 
 const b = cn('healthcheck');
 
 export const Healthcheck = (props: HealthcheckProps) => {
-    const {tenant, preview, fetchData = true, showMoreHandler, expandedIssueId} = props;
+    const {tenant, preview, fetchData = true, showMoreHandler} = props;
 
     const dispatch = useDispatch();
 
     const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo);
     const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
 
-    const issuesTreesRoots = useTypedSelector(selectIssuesTreesRoots);
-    const expandedIssueTree = useTypedSelector((state) =>
-        selectIssuesTreeById(state, expandedIssueId),
-    );
-
+    const issuesStatistics = useTypedSelector(selectIssuesStatistics);
+    const issueTrees = useTypedSelector(selectIssuesTrees);
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const fetchHealthcheck = useCallback(
@@ -66,37 +62,30 @@ export const Healthcheck = (props: HealthcheckProps) => {
     );
 
     const renderContent = () => {
-        if (error) {
-            return error.statusText;
-        }
-
         if (loading && !wasLoaded) {
             return (
-                <div className={b('loader')}>
+                <DiagnosticCard className={b('loader')}>
                     <Loader size="m" />
-                </div>
+                </DiagnosticCard>
             );
         }
-
-        if (data && data['self_check_result']) {
-            return preview ? (
-                <Preview
-                    issuesTrees={issuesTreesRoots}
-                    selfCheckResult={selfCheckResult}
-                    loading={loading}
-                    onShowMore={showMoreHandler}
-                    onUpdate={fetchHealthcheck}
-                />
-            ) : (
-                <Details
-                    issueTree={expandedIssueTree}
-                    loading={loading}
-                    onUpdate={fetchHealthcheck}
-                />
-            );
-        }
-
-        return <div className="error">{i18n('no-data')}</div>;
+        return preview ? (
+            <Preview
+                issuesStatistics={issuesStatistics}
+                selfCheckResult={selfCheckResult}
+                loading={loading}
+                onShowMore={showMoreHandler}
+                onUpdate={fetchHealthcheck}
+                error={error}
+            />
+        ) : (
+            <Details
+                loading={loading}
+                onUpdate={fetchHealthcheck}
+                issueTrees={issueTrees}
+                error={error}
+            />
+        );
     };
 
     return <div className={b({expanded: !preview})}>{renderContent()}</div>;

package/dist/containers/Tenant/Diagnostics/Healthcheck/Preview/Preview.tsx

@@ -1,13 +1,14 @@
 import cn from 'bem-cn-lite';
 
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Link} from '@gravity-ui/uikit';
 
 import updateArrow from '../../../../../assets/icons/update-arrow.svg';
 
-import {SelfCheckResult} from '../../../../../types/api/healthcheck';
-import type {IIssuesTree} from '../../../../../types/store/healthcheck';
-
-import {PreviewItem} from './PreviewItem';
+import {SelfCheckResult, type StatusFlag} from '../../../../../types/api/healthcheck';
+import type {IResponseError} from '../../../../../types/api/error';
+import {DiagnosticCard} from '../../../../../components/DiagnosticCard/DiagnosticCard';
+import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
 import i18n from '../i18n';
 
@@ -15,21 +16,18 @@ const b = cn('healthcheck');
 
 interface PreviewProps {
     selfCheckResult: SelfCheckResult;
-    issuesTrees?: IIssuesTree[];
+    issuesStatistics?: [StatusFlag, number][];
     loading?: boolean;
-    onShowMore?: (id: string) => void;
+    onShowMore?: VoidFunction;
     onUpdate: VoidFunction;
+    error?: IResponseError;
 }
 
 export const Preview = (props: PreviewProps) => {
-    const {selfCheckResult, issuesTrees, loading, onShowMore, onUpdate} = props;
+    const {selfCheckResult, issuesStatistics, loading, onShowMore, onUpdate, error} = props;
 
     const isStatusOK = selfCheckResult === SelfCheckResult.GOOD;
 
-    if (!issuesTrees) {
-        return null;
-    }
-
     const renderStatus = () => {
         const modifier = selfCheckResult.toLowerCase();
 
@@ -46,26 +44,40 @@ export const Preview = (props: PreviewProps) => {
         );
     };
 
-    const renderFirstLevelIssues = () => {
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
+        }
+
         return (
             <div className={b('preview-content')}>
-                {isStatusOK
-                    ? i18n('status_message.ok')
-                    : issuesTrees?.map((issueTree) => (
-                          <PreviewItem
-                              key={issueTree.id}
-                              data={issueTree}
-                              onShowMore={onShowMore}
-                          />
-                      ))}
+                {isStatusOK || !issuesStatistics || !issuesStatistics.length ? (
+                    i18n('status_message.ok')
+                ) : (
+                    <>
+                        <div>Issues:</div>
+                        <div className={b('issues-statistics')}>
+                            {issuesStatistics.map(([status, count]) => (
+                                <EntityStatus
+                                    key={status}
+                                    mode="icons"
+                                    status={status}
+                                    label={count.toString()}
+                                    size="l"
+                                />
+                            ))}
+                        </div>
+                        <Link onClick={() => onShowMore?.()}>{i18n('label.show-details')}</Link>
+                    </>
+                )}
             </div>
         );
     };
 
     return (
-        <div className={b('preview')}>
+        <DiagnosticCard className={b('preview')}>
             {renderStatus()}
-            {renderFirstLevelIssues()}
-        </div>
+            {renderContent()}
+        </DiagnosticCard>
     );
 };

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -0,0 +1,154 @@
+import cn from 'bem-cn-lite';
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+
+import {Loader} from '@gravity-ui/uikit';
+
+import {InfoViewer} from '../../../../components/InfoViewer';
+import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
+import {Tablet} from '../../../../components/Tablet';
+import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
+import {formatCPU} from '../../../../utils';
+import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
+import {bytesToGB} from '../../../../utils/utils';
+import {mapDatabaseTypeToDBName} from '../../utils/schema';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {ETabletVolatileState} from '../../../../types/api/tenant';
+import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant';
+
+import i18n from './i18n';
+import './TenantOverview.scss';
+
+const b = cn('tenant-overview');
+
+interface TenantOverviewProps {
+    tenantName: string;
+    additionalTenantInfo?: any;
+}
+
+export function TenantOverview({tenantName, additionalTenantInfo}: TenantOverviewProps) {
+    const {tenant, loading, wasLoaded} = useTypedSelector((state) => state.tenant);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const dispatch = useDispatch();
+    const fetchTenant = useCallback(
+        (isBackground = true) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+            dispatch(getTenantInfo({path: tenantName}));
+        },
+        [dispatch, tenantName],
+    );
+
+    useAutofetcher(fetchTenant, [fetchTenant], autorefresh);
+
+    const {
+        Metrics = {},
+        PoolStats,
+        StateStats = [],
+        MemoryUsed,
+        Name,
+        State,
+        CoresUsed,
+        StorageGroups,
+        StorageAllocatedSize,
+        Type,
+        SystemTablets,
+    } = tenant || {};
+
+    const tenantType = mapDatabaseTypeToDBName(Type);
+    const memoryRaw = MemoryUsed ?? Metrics.Memory;
+
+    const memory = (memoryRaw && bytesToGB(memoryRaw)) || i18n('no-data');
+    const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || i18n('no-data');
+    const storageGroups = StorageGroups ?? i18n('no-data');
+    const blobStorage =
+        (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || i18n('no-data');
+    const storageEfficiency =
+        Metrics.Storage && StorageAllocatedSize
+            ? `${((parseInt(Metrics.Storage) * 100) / parseInt(StorageAllocatedSize)).toFixed(2)}%`
+            : i18n('no-data');
+
+    const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
+
+    const cpu = formatCPU(cpuRaw);
+
+    const metricsInfo = [
+        {label: 'Type', value: Type},
+        {label: 'Memory', value: memory},
+        {label: 'CPU', value: cpu},
+        {label: 'Tablet storage', value: storage},
+        {label: 'Storage groups', value: storageGroups},
+        {label: 'Blob storage', value: blobStorage},
+        {label: 'Storage efficiency', value: storageEfficiency},
+    ];
+
+    const tabletsInfo = StateStats.filter(
+        (item): item is {VolatileState: ETabletVolatileState; Count: number} => {
+            return item.VolatileState !== undefined && item.Count !== undefined;
+        },
+    ).map((info) => {
+        return {label: TABLET_STATES[info.VolatileState], value: info.Count};
+    });
+
+    const renderName = () => {
+        return (
+            <div className={b('tenant-name-wrapper')}>
+                <EntityStatus
+                    status={State}
+                    name={Name || TENANT_DEFAULT_TITLE}
+                    withLeftTrim
+                    hasClipboardButton={Boolean(tenant)}
+                    clipboardButtonAlwaysVisible
+                />
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('top-label')}>{tenantType}</div>
+            <div className={b('top')}>
+                {renderName()}
+                {tenant && additionalTenantInfo && additionalTenantInfo(tenant.Name, tenant.Type)}
+            </div>
+            <div className={b('system-tablets')}>
+                {SystemTablets &&
+                    SystemTablets.map((tablet, tabletIndex) => (
+                        <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
+                    ))}
+            </div>
+            <div className={b('common-info')}>
+                <div>
+                    <div className={b('section-title')}>{i18n('title.pools')}</div>
+                    {PoolStats ? (
+                        <div className={b('section', {pools: true})}>
+                            {PoolStats.map((pool, poolIndex) => (
+                                <PoolUsage key={poolIndex} data={pool} />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="error">{i18n('no-pools-data')}</div>
+                    )}
+                </div>
+                <InfoViewer
+                    title={i18n('title.metrics')}
+                    className={b('section', {metrics: true})}
+                    info={metricsInfo}
+                />
+
+                <div className={b('section')}>
+                    <InfoViewer info={tabletsInfo} title="Tablets" />
+                </div>
+            </div>
+        </div>
+    );
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "no-data": "No data",
+  "no-pools-data": "No pools data",
+
+  "title.pools": "Pools",
+  "title.metrics": "Metrics"
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-diagnostics-tenant-overview';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -0,0 +1,7 @@
+{
+  "no-data": "Нет данных",
+  "no-pools-data": "Нет данных о пулах",
+
+  "title.pools": "Пулы",
+  "title.metrics": "Метрики"
+}

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss

@@ -9,11 +9,14 @@
     @include flex-container();
     @include table-styles;
 
+    &__table-row {
+        cursor: pointer;
+    }
+
     &__query {
         overflow: hidden;
         flex-grow: 1;
 
-        cursor: pointer;
         white-space: pre;
         text-overflow: ellipsis;
     }