ydb-embedded-ui 4.21.1 → 4.23.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [4.23.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.22.0...v4.23.0) (2023-12-06)
+
+
+### Features
+
+* **ClusterInfo:** display groups stats ([#598](https://github.com/ydb-platform/ydb-embedded-ui/issues/598)) ([c31d048](https://github.com/ydb-platform/ydb-embedded-ui/commit/c31d0480a1b91cf01a660fd1d9726c6708f7c252))
+* **TenantOverview:** add links to sections titles ([#599](https://github.com/ydb-platform/ydb-embedded-ui/issues/599)) ([30401fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/30401fa354d90943bc4af4ddbf65466ce10381f9))
+
+
+### Bug Fixes
+
+* **Schema:** display keys in right order ([#596](https://github.com/ydb-platform/ydb-embedded-ui/issues/596)) ([c99b7e2](https://github.com/ydb-platform/ydb-embedded-ui/commit/c99b7e2e97acffc1cab450dfbf758c38b8b6e4d5))
+
+## [4.22.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.21.1...v4.22.0) (2023-11-27)
+
+
+### Features
+
+* **Query:** enable queries with multiple resultsets ([#595](https://github.com/ydb-platform/ydb-embedded-ui/issues/595)) ([2eedfb6](https://github.com/ydb-platform/ydb-embedded-ui/commit/2eedfb6ec3be932c7399bb67de901798c0b31b50))
+* **TenantOverview:** add columns to memory table ([#593](https://github.com/ydb-platform/ydb-embedded-ui/issues/593)) ([6379577](https://github.com/ydb-platform/ydb-embedded-ui/commit/6379577782cfa69de9fb39640d2a143f1670be39))
+
+
+### Bug Fixes
+
+* fix disks developer UI links for paths with nodeId ([#594](https://github.com/ydb-platform/ydb-embedded-ui/issues/594)) ([7f5a783](https://github.com/ydb-platform/ydb-embedded-ui/commit/7f5a78393d0c23e584ad73040fd0e73d404e5d01))
+* **TopShards:** sort by InFlightTxCount ([#591](https://github.com/ydb-platform/ydb-embedded-ui/issues/591)) ([eb3592d](https://github.com/ydb-platform/ydb-embedded-ui/commit/eb3592d69a465814de27e8b1e368b34cc60fed2f))
+
 ## [4.21.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.21.0...v4.21.1) (2023-11-17)
 
 

package/dist/components/ProgressViewer/ProgressViewer.tsx

@@ -44,7 +44,7 @@ Props description:
 interface ProgressViewerProps {
     value?: number | string;
     capacity?: number | string;
-    formatValues?: (value?: number, capacity?: number) => (string | undefined)[];
+    formatValues?: (value?: number, capacity?: number) => (string | number | undefined)[];
     percents?: boolean;
     className?: string;
     size?: ProgressViewerSize;

package/dist/components/VirtualTable/TableChunk.tsx

@@ -1,8 +1,9 @@
 import {useEffect, useRef, memo} from 'react';
 
+import {getArray} from '../../utils';
+
 import type {Column, Chunk, GetRowClassName} from './types';
 import {LoadingTableRow, TableRow} from './TableRow';
-import {getArray} from './utils';
 
 // With original memo generic types are lost
 const typedMemo: <T>(Component: T) => T = memo;

package/dist/components/VirtualTable/VirtualTable.tsx

@@ -1,6 +1,7 @@
 import {useState, useReducer, useRef, useCallback, useEffect} from 'react';
 
 import type {IResponseError} from '../../types/api/error';
+import {getArray} from '../../utils';
 
 import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
 import {ResponseError} from '../Errors/ResponseError';
@@ -31,7 +32,6 @@ import {TableHead} from './TableHead';
 import {TableChunk} from './TableChunk';
 import {EmptyTableRow} from './TableRow';
 import {useIntersectionObserver} from './useIntersectionObserver';
-import {getArray} from './utils';
 import i18n from './i18n';
 import {b} from './shared';
 

package/dist/containers/Cluster/Cluster.tsx

@@ -68,6 +68,7 @@ function Cluster({
         loading: clusterLoading,
         wasLoaded: clusterWasLoaded,
         error: clusterError,
+        groupsStats,
     } = useTypedSelector((state) => state.cluster);
     const {
         nodes,
@@ -135,6 +136,7 @@ function Cluster({
         <div className={b()} ref={container}>
             <ClusterInfo
                 cluster={cluster}
+                groupsStats={groupsStats}
                 versionsValues={versionsValues}
                 loading={infoLoading}
                 error={clusterError}

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -49,10 +49,6 @@
         }
     }
 
-    &__metric-field {
-        margin-top: -8px;
-    }
-
     &__system-tablets {
         display: flex;
         flex-wrap: wrap;
@@ -83,7 +79,6 @@
         margin-left: 15px;
         padding: 0 !important;
     }
-
     &__links {
         display: flex;
         flex-flow: row wrap;
@@ -91,6 +86,20 @@
         gap: 12px;
     }
 
+    &__storage-groups-stats {
+        display: flex;
+        flex-direction: column;
+        gap: 11px;
+    }
+
+    &__groups-stats-bar {
+        cursor: pointer;
+    }
+
+    &__groups-stats-popup-content {
+        padding: 12px;
+    }
+
     &__clipboard-button {
         display: flex;
         align-items: center;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -10,6 +10,7 @@ import {Tablet} from '../../../components/Tablet';
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import {ExternalLinkWithIcon} from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
 import {IconWrapper as Icon} from '../../../components/Icon/Icon';
+import {ContentWithPopup} from '../../../components/ContentWithPopup/ContentWithPopup';
 
 import type {IResponseError} from '../../../types/api/error';
 import type {AdditionalClusterProps, ClusterLink} from '../../../types/additionalProps';
@@ -18,14 +19,21 @@ import type {TClusterInfo} from '../../../types/api/cluster';
 import {backend, customBackend} from '../../../store';
 import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
 import {useSetting, useTypedSelector} from '../../../utils/hooks';
+import {formatBytes, getSizeWithSignificantDigits} from '../../../utils/bytesParsers';
 import {
     CLUSTER_DEFAULT_TITLE,
     CLUSTER_INFO_HIDDEN_KEY,
     DEVELOPER_UI_TITLE,
 } from '../../../utils/constants';
+import type {
+    ClusterGroupsStats,
+    DiskErasureGroupsStats,
+    DiskGroupsStats,
+} from '../../../store/reducers/cluster/types';
 
 import {VersionsBar} from '../VersionsBar/VersionsBar';
 import {ClusterInfoSkeleton} from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
+import i18n from '../i18n';
 
 import {compareTablets} from './utils';
 
@@ -33,9 +41,85 @@ import './ClusterInfo.scss';
 
 const b = block('cluster-info');
 
+interface GroupsStatsPopupContentProps {
+    stats: DiskErasureGroupsStats;
+}
+
+const GroupsStatsPopupContent = ({stats}: GroupsStatsPopupContentProps) => {
+    const {diskType, erasure, allocatedSize, availableSize} = stats;
+
+    const sizeToConvert = getSizeWithSignificantDigits(Math.max(allocatedSize, availableSize), 2);
+
+    const convertedAllocatedSize = formatBytes({value: allocatedSize, size: sizeToConvert});
+    const convertedAvailableSize = formatBytes({value: availableSize, size: sizeToConvert});
+
+    const usage = Math.round((allocatedSize / (allocatedSize + availableSize)) * 100);
+
+    const info = [
+        {
+            label: i18n('disk-type'),
+            value: diskType,
+        },
+        {
+            label: i18n('erasure'),
+            value: erasure,
+        },
+        {
+            label: i18n('allocated'),
+            value: convertedAllocatedSize,
+        },
+        {
+            label: i18n('available'),
+            value: convertedAvailableSize,
+        },
+        {
+            label: i18n('usage'),
+            value: usage + '%',
+        },
+    ];
+
+    return (
+        <InfoViewer dots={true} info={info} className={b('groups-stats-popup-content')} size="s" />
+    );
+};
+
+interface DiskGroupsStatsProps {
+    stats: DiskGroupsStats;
+}
+
+const DiskGroupsStatsBars = ({stats}: DiskGroupsStatsProps) => {
+    return (
+        <div className={b('storage-groups-stats')}>
+            {Object.values(stats).map((erasureStats) => (
+                <ContentWithPopup
+                    placement={['right']}
+                    key={erasureStats.erasure}
+                    content={<GroupsStatsPopupContent stats={erasureStats} />}
+                >
+                    <ProgressViewer
+                        className={b('groups-stats-bar')}
+                        value={erasureStats.createdGroups}
+                        capacity={erasureStats.totalGroups}
+                    />
+                </ContentWithPopup>
+            ))}
+        </div>
+    );
+};
+
+const getGroupsStatsFields = (groupsStats: ClusterGroupsStats) => {
+    return Object.keys(groupsStats).map((diskType) => {
+        return {
+            label: i18n('storage-groups', {diskType}),
+            value: <DiskGroupsStatsBars stats={groupsStats[diskType]} />,
+        };
+    });
+};
+
 const getInfo = (
     cluster: TClusterInfo,
     versionsValues: VersionValue[],
+    groupsStats: ClusterGroupsStats,
     additionalInfo: InfoViewerItem[],
     links: ClusterLink[],
 ) => {
@@ -43,14 +127,14 @@ const getInfo = (
 
     if (cluster.DataCenters) {
         info.push({
-            label: 'DC',
+            label: i18n('dc'),
             value: <Tags tags={cluster.DataCenters} />,
         });
     }
 
     if (cluster.SystemTablets) {
         info.push({
-            label: 'Tablets',
+            label: i18n('tablets'),
             value: (
                 <div className={b('system-tablets')}>
                     {cluster.SystemTablets.sort(compareTablets).map((tablet, tabletIndex) => (
@@ -63,46 +147,40 @@ const getInfo = (
 
     if (cluster.Tenants) {
         info.push({
-            label: 'Databases',
+            label: i18n('databases'),
             value: cluster.Tenants,
         });
     }
 
     info.push(
         {
-            label: 'Nodes',
-            value: (
-                <ProgressViewer
-                    className={b('metric-field')}
-                    value={cluster?.NodesAlive}
-                    capacity={cluster?.NodesTotal}
-                />
-            ),
+            label: i18n('nodes'),
+            value: <ProgressViewer value={cluster?.NodesAlive} capacity={cluster?.NodesTotal} />,
         },
         {
-            label: 'Load',
-            value: (
-                <ProgressViewer
-                    className={b('metric-field')}
-                    value={cluster?.LoadAverage}
-                    capacity={cluster?.NumberOfCpus}
-                />
-            ),
+            label: i18n('load'),
+            value: <ProgressViewer value={cluster?.LoadAverage} capacity={cluster?.NumberOfCpus} />,
         },
         {
-            label: 'Storage',
+            label: i18n('storage-size'),
             value: (
                 <ProgressViewer
-                    className={b('metric-field')}
                     value={cluster?.StorageUsed}
                     capacity={cluster?.StorageTotal}
                     formatValues={formatStorageValues}
                 />
             ),
         },
+    );
+
+    if (Object.keys(groupsStats).length) {
+        info.push(...getGroupsStatsFields(groupsStats));
+    }
+
+    info.push(
         ...additionalInfo,
         {
-            label: 'Links',
+            label: i18n('links'),
             value: (
                 <div className={b('links')}>
                     {links.map(({title, url}) => (
@@ -112,7 +190,7 @@ const getInfo = (
             ),
         },
         {
-            label: 'Versions',
+            label: i18n('versions'),
             value: <VersionsBar versionsValues={versionsValues} />,
         },
     );
@@ -123,6 +201,7 @@ const getInfo = (
 interface ClusterInfoProps {
     cluster?: TClusterInfo;
     versionsValues?: VersionValue[];
+    groupsStats?: ClusterGroupsStats;
     loading?: boolean;
     error?: IResponseError;
     additionalClusterProps?: AdditionalClusterProps;
@@ -131,6 +210,7 @@ interface ClusterInfoProps {
 export const ClusterInfo = ({
     cluster = {},
     versionsValues = [],
+    groupsStats = {},
     loading,
     error,
     additionalClusterProps = {},
@@ -151,7 +231,7 @@ export const ClusterInfo = ({
 
     const {info = [], links = []} = additionalClusterProps;
 
-    const clusterInfo = getInfo(cluster, versionsValues, info, [
+    const clusterInfo = getInfo(cluster, versionsValues, groupsStats, info, [
         {title: DEVELOPER_UI_TITLE, url: internalLink},
         ...links,
     ]);

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.tsx

@@ -18,7 +18,7 @@ interface ClusterInfoSkeletonProps {
     rows?: number;
 }
 
-export const ClusterInfoSkeleton = ({rows = 7, className}: ClusterInfoSkeletonProps) => (
+export const ClusterInfoSkeleton = ({rows = 8, className}: ClusterInfoSkeletonProps) => (
     <div className={b(null, className)}>
         {[...new Array(rows)].map((_, index) => (
             <div className={b('row')} key={`skeleton-row-${index}`}>

package/dist/containers/Cluster/i18n/en.json

@@ -0,0 +1,16 @@
+{
+  "disk-type": "Disk Type",
+  "erasure": "Erasure",
+  "allocated": "Allocated",
+  "available": "Available",
+  "usage": "Usage",
+  "dc": "DC",
+  "tablets": "Tablets",
+  "databases": "Databases",
+  "nodes": "Nodes",
+  "load": "Load",
+  "storage-size": "Storage size",
+  "storage-groups": "Storage groups, {{diskType}}",
+  "links": "Links",
+  "versions": "Versions"
+}

package/dist/containers/Cluster/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-cluster';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Cluster/i18n/ru.json

@@ -0,0 +1,16 @@
+{
+  "disk-type": "Тип диска",
+  "erasure": "Режим",
+  "allocated": "Использовано",
+  "available": "Доступно",
+  "usage": "Потребление",
+  "dc": "ДЦ",
+  "tablets": "Таблетки",
+  "databases": "Базы данных",
+  "nodes": "Узлы",
+  "load": "Нагрузка",
+  "storage-size": "Размер хранилища",
+  "storage-groups": "Группы хранения, {{diskType}}",
+  "links": "Ссылки",
+  "versions": "Версии"
+}

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -16,7 +16,10 @@ import {bytesToGB} from '../../../utils/utils';
 import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskType} from '../../../utils/pdisk';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-import {createPDiskDeveloperUILink, createVDiskDeveloperUILink} from '../../../utils/developerUI';
+import {
+    createPDiskDeveloperUILink,
+    createVDiskDeveloperUILink,
+} from '../../../utils/developerUI/developerUI';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import InfoViewer, {type InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
 import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -28,6 +28,9 @@ const NODES_COLUMNS_IDS = {
     Tablets: 'Tablets',
     TopNodesLoadAverage: 'TopNodesLoadAverage',
     TopNodesMemory: 'TopNodesMemory',
+    SharedCacheUsage: 'SharedCacheUsage',
+    MemoryUsedInAlloc: 'MemoryUsedInAlloc',
+    TotalSessions: 'TotalSessions',
 };
 
 interface GetNodesColumnsProps {
@@ -184,23 +187,61 @@ const topNodesLoadAverageColumn: NodesColumn = {
 
 const topNodesMemoryColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.TopNodesMemory,
-    header: 'Memory',
-    render: ({row}) =>
-        row.MemoryUsed ? (
-            <ProgressViewer
-                value={row.MemoryUsed}
-                capacity={row.MemoryLimit}
-                formatValues={formatStorageValuesToGb}
-                colorizeProgress={true}
-            />
-        ) : (
-            '—'
-        ),
+    header: 'Process',
+    render: ({row}) => (
+        <ProgressViewer
+            value={row.MemoryUsed}
+            capacity={row.MemoryLimit}
+            formatValues={formatStorageValuesToGb}
+            colorizeProgress={true}
+        />
+    ),
+    align: DataTable.LEFT,
+    width: 140,
+    sortable: false,
+};
+
+const sharedCacheUsageColumn: NodesColumn = {
+    name: NODES_COLUMNS_IDS.SharedCacheUsage,
+    header: 'Tablet Cache',
+    render: ({row}) => (
+        <ProgressViewer
+            value={row.SharedCacheUsed}
+            capacity={row.SharedCacheLimit}
+            formatValues={formatStorageValuesToGb}
+            colorizeProgress={true}
+        />
+    ),
+    align: DataTable.LEFT,
+    width: 140,
+    sortable: false,
+};
+
+const memoryUsedInAllocColumn: NodesColumn = {
+    name: NODES_COLUMNS_IDS.MemoryUsedInAlloc,
+    header: 'Query Runtime',
+    render: ({row}) => (
+        <ProgressViewer
+            value={row.MemoryUsedInAlloc}
+            capacity={row.MemoryLimit}
+            formatValues={formatStorageValuesToGb}
+            colorizeProgress={true}
+        />
+    ),
     align: DataTable.LEFT,
     width: 140,
     sortable: false,
 };
 
+const sessionsColumn: NodesColumn = {
+    name: NODES_COLUMNS_IDS.TotalSessions,
+    header: 'Sessions',
+    render: ({row}) => row.TotalSessions ?? '—',
+    align: DataTable.RIGHT,
+    width: 100,
+    sortable: false,
+};
+
 export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps): NodesColumn[] {
     return [
         nodeIdColumn,
@@ -241,8 +282,11 @@ export function getTopNodesByMemoryColumns({
         nodeIdColumn,
         getHostColumn(getNodeRef),
         uptimeColumn,
-        topNodesMemoryColumn,
         topNodesLoadAverageColumn,
+        topNodesMemoryColumn,
+        sharedCacheUsageColumn,
+        memoryUsedInAllocColumn,
+        sessionsColumn,
         getTabletsColumn(tabletsPath),
     ];
 }

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -18,6 +18,8 @@ import {changeFilter, ProblemFilterValues} from '../../../../store/reducers/sett
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
+import {getConnectedNodesCount} from './utils';
+
 import './Network.scss';
 
 const b = cn('network');
@@ -145,11 +147,6 @@ class Network extends React.Component {
         );
     };
 
-    getConnectedNodesCount = (peers) => {
-        const res = peers?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
-        return res;
-    };
-
     renderNodes = (nodes, isRight) => {
         const {showId, showRacks, clickedNode} = this.state;
         let problemNodesCount = 0;
@@ -171,9 +168,7 @@ class Network extends React.Component {
                                           let capacity, connected;
                                           if (!isRight && nodeInfo?.Peers) {
                                               capacity = Object.keys(nodeInfo?.Peers).length;
-                                              connected = this.getConnectedNodesCount(
-                                                  nodeInfo?.Peers,
-                                              );
+                                              connected = getConnectedNodesCount(nodeInfo?.Peers);
                                           }
 
                                           if (
@@ -214,7 +209,7 @@ class Network extends React.Component {
                                   let capacity, connected;
                                   if (!isRight) {
                                       capacity = nodeInfo?.Peers?.length;
-                                      connected = this.getConnectedNodesCount(nodeInfo?.Peers);
+                                      connected = getConnectedNodesCount(nodeInfo?.Peers);
                                   }
 
                                   if (
@@ -234,7 +229,7 @@ class Network extends React.Component {
                                               capacity={nodeInfo?.Peers && nodeInfo?.Peers.length}
                                               connected={
                                                   nodeInfo?.Peers &&
-                                                  this.getConnectedNodesCount(nodeInfo?.Peers)
+                                                  getConnectedNodesCount(nodeInfo?.Peers)
                                               }
                                               onMouseEnter={showTooltip}
                                               onMouseLeave={hideTooltip}

package/dist/containers/Tenant/Diagnostics/Network/utils.ts

@@ -0,0 +1,6 @@
+import type {TNetNodePeerInfo} from '../../../../types/api/netInfo';
+
+// determine how many nodes have status Connected "true"
+export const getConnectedNodesCount = (peers: TNetNodePeerInfo[] | undefined) => {
+    return peers?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
+};

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

@@ -1,16 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useCallback} from 'react';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     getTopNodesByCpu,
     selectTopNodesByCpu,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
 import {getTopNodesByCpuColumns} from '../../../../Nodes/getNodesColumns';
-import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
 import i18n from '../i18n';
 
 interface TopNodesByCpuProps {
@@ -21,6 +25,8 @@ interface TopNodesByCpuProps {
 export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByCpu);
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const topNodes = useTypedSelector(selectTopNodesByCpu);
@@ -39,11 +45,20 @@ export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps)
 
     useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-pools-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topNodes || []}
             columns={columns}
-            title="Top nodes by pools usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}