diff --git a/package-lock.json b/package-lock.json index 48437e1cd..cc8735762 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "@gravity-ui/navigation": "^2.16.0", "@gravity-ui/paranoid": "^2.0.1", "@gravity-ui/react-data-table": "^2.1.1", - "@gravity-ui/table": "^0.5.0", + "@gravity-ui/table": "^1.7.0", "@gravity-ui/uikit": "^6.33.0", "@gravity-ui/websql-autocomplete": "^12.1.2", "@hookform/resolvers": "^3.9.0", @@ -4031,18 +4031,20 @@ } }, "node_modules/@gravity-ui/table": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/table/-/table-0.5.0.tgz", - "integrity": "sha512-gBLQ1txA0g7TULPELfM1irVgnu6FYWPibH8DtCyaMRaQxFgwW+gkcRPNbkWl3Gmy5ibFXaa2Kfj3O8FzHjF6LQ==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/table/-/table-1.7.0.tgz", + "integrity": "sha512-qwC+eOGsONLcPlUCIg8JOqK9bz20P2LcA5DWbClGJLEw4kzHoVHU59jlCyLamhHaeGIclBz9KjN0XeLwgKdVHw==", "dependencies": { "@bem-react/classname": "^1.6.0", - "@tanstack/react-table": "^8.19.3", - "@tanstack/react-virtual": "^3.8.3" + "@tanstack/react-table": "^8.20.5", + "@tanstack/react-virtual": "^3.10.7" }, "peerDependencies": { "@dnd-kit/core": "^6.0.0", "@dnd-kit/sortable": "^8.0.0", - "@gravity-ui/uikit": "^5.0.0 || ^6.0.0", + "@gravity-ui/i18n": "^1.0.0", + "@gravity-ui/icons": "^2.0.0", + "@gravity-ui/uikit": "^6.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } @@ -5676,11 +5678,11 @@ } }, "node_modules/@tanstack/react-table": { - "version": "8.19.3", - "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.19.3.tgz", - "integrity": "sha512-MtgPZc4y+cCRtU16y1vh1myuyZ2OdkWgMEBzyjYsoMWMicKZGZvcDnub3Zwb6XF2pj9iRMvm1SO1n57lS0vXLw==", + "version": "8.20.5", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz", + "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==", "dependencies": { - "@tanstack/table-core": "8.19.3" + "@tanstack/table-core": "8.20.5" }, "engines": { "node": ">=12" @@ -5695,11 +5697,11 @@ } }, "node_modules/@tanstack/react-virtual": { - "version": "3.8.3", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.8.3.tgz", - "integrity": "sha512-9ICwbDUUzN99CJIGc373i8NLoj6zFTKI2Hlcmo0+lCSAhPQ5mxq4dGOMKmLYoEFyHcGQ64Bd6ZVbnPpM6lNK5w==", + "version": "3.10.9", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.9.tgz", + "integrity": "sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==", "dependencies": { - "@tanstack/virtual-core": "3.8.3" + "@tanstack/virtual-core": "3.10.9" }, "funding": { "type": "github", @@ -5711,9 +5713,9 @@ } }, "node_modules/@tanstack/table-core": { - "version": "8.19.3", - "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.19.3.tgz", - "integrity": "sha512-IqREj9ADoml9zCAouIG/5kCGoyIxPFdqdyoxis9FisXFi5vT+iYfEfLosq4xkU/iDbMcEuAj+X8dWRLvKYDNoQ==", + "version": "8.20.5", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz", + "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==", "engines": { "node": ">=12" }, @@ -5723,9 +5725,9 @@ } }, "node_modules/@tanstack/virtual-core": { - "version": "3.8.3", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.3.tgz", - "integrity": "sha512-vd2A2TnM5lbnWZnHi9B+L2gPtkSeOtJOAw358JqokIH1+v2J7vUAzFVPwB/wrye12RFOurffXu33plm4uQ+JBQ==", + "version": "3.10.9", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz", + "integrity": "sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" diff --git a/package.json b/package.json index e5fdbe555..33585f3eb 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@gravity-ui/navigation": "^2.16.0", "@gravity-ui/paranoid": "^2.0.1", "@gravity-ui/react-data-table": "^2.1.1", - "@gravity-ui/table": "^0.5.0", + "@gravity-ui/table": "^1.7.0", "@gravity-ui/uikit": "^6.33.0", "@gravity-ui/websql-autocomplete": "^12.1.2", "@hookform/resolvers": "^3.9.0", diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss new file mode 100644 index 000000000..c983714cb --- /dev/null +++ b/src/components/Table/Table.scss @@ -0,0 +1,60 @@ +@use '../../styles/mixins.scss'; + +.ydb-table { + $block: &; + --ydb-table-cell-height: 40px; + &__table-header-content { + display: inline-flex; + align-items: center; + + width: 100%; + height: 100%; + padding: var(--g-spacing-1) var(--g-spacing-2); + + border-bottom: 1px solid var(--g-color-line-generic); + } + &__table { + table-layout: fixed; + border-spacing: 0px; + border-collapse: collapse; + tr { + &:hover { + background-color: var(--g-color-base-simple-hover) !important; + } + } + tr:nth-of-type(2n + 1) { + background-color: var(--g-color-base-generic-ultralight); + } + } + &__table_width_max { + width: 100%; + } + &__table-header-cell { + height: var(--ydb-table-cell-height) !important; + padding: 0; + + text-align: left; + vertical-align: middle; + + background-color: var(--g-color-base-background); + @include mixins.text-subheader-2(); + &_align_right { + #{$block}__table-header-content { + justify-content: flex-end; + + text-align: right; + } + } + } + &__table-cell { + height: var(--ydb-table-cell-height) !important; + padding: 0; + @include mixins.text-body-2(); + &_align_right { + text-align: right; + } + &_vertical-align_top { + vertical-align: top; + } + } +} diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx new file mode 100644 index 000000000..dde10dda0 --- /dev/null +++ b/src/components/Table/Table.tsx @@ -0,0 +1,42 @@ +import type {BaseTableProps} from '@gravity-ui/table'; +import {BaseTable} from '@gravity-ui/table'; + +import {cn} from '../../utils/cn'; + +import './Table.scss'; + +const block = cn('ydb-table'); + +interface TableProps extends BaseTableProps { + width?: 'max' | 'auto'; + wrapperClassName?: string; +} + +interface ColumnHeaderProps { + children: React.ReactNode; + className?: string; +} + +export function ColumnHeader({children, className}: ColumnHeaderProps) { + return
{children}
; +} + +export function Table({className, width, wrapperClassName, ...props}: TableProps) { + return ( +
+ { + const align = column.columnDef.meta?.align; + return block('table-header-cell', {align}); + }} + cellClassName={(cell) => { + const align = cell?.column.columnDef.meta?.align; + const verticalAlign = cell?.column.columnDef.meta?.verticalAlign; + return block('table-cell', {align, 'vertical-align': verticalAlign}); + }} + className={block('table', {width}, className)} + {...props} + /> +
+ ); +} diff --git a/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss b/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss index 7d32d164a..c32adbbf7 100644 --- a/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss +++ b/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss @@ -2,58 +2,7 @@ .ydb-tablet-storage-info { $block: &; - &__table { - table-layout: fixed; - border-spacing: 0px; - border-collapse: collapse; - tr { - &:hover { - background-color: var(--g-color-base-simple-hover-solid) !important; - } - } - tr:nth-of-type(2n + 1) { - background-color: var(--g-color-base-generic-ultralight); - } - :is(#{$block}__table-header-cell) { - height: 40px; - padding: 0; - text-align: left; - - background-color: var(--g-color-base-background); - @include mixins.text-subheader-2(); - } - :is(#{$block}__table-cell) { - height: 40px; - padding: 0; - @include mixins.text-body-2(); - } - } - - &__table-header-cell { - &_align_right { - #{$block}__table-header-content { - justify-content: flex-end; - - text-align: right; - } - } - } - - &__table-header-content { - display: flex; - align-items: center; - - height: 100%; - padding: var(--g-spacing-1) var(--g-spacing-2); - - vertical-align: middle; - - border-bottom: 1px solid var(--g-color-line-generic); - } - :is(&__table-cell_align_right) { - text-align: right; - } &__metrics-cell { padding: var(--g-spacing-1) var(--g-spacing-2); diff --git a/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.tsx b/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.tsx index 719face4a..3bd680d0f 100644 --- a/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.tsx +++ b/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import {Table, useTable} from '@gravity-ui/table'; +import {useTable} from '@gravity-ui/table'; import type {ExpandedState} from '@tanstack/react-table'; +import {Table} from '../../../../components/Table/Table'; import type {TTabletHiveResponse} from '../../../../types/api/tablet'; import {getColumns} from './columns'; -import {b} from './shared'; import {prepareData} from './utils'; import './TabletStorageInfo.scss'; @@ -30,22 +30,5 @@ export function TabletStorageInfo({data}: TabletStorageInfoProps) { expanded, }, }); - return ( - //block wrapper for table -
- { - const align = column.columnDef.meta?.align; - return b('table-header-cell', {align}); - }} - cellClassName={(cell) => { - const align = cell?.column.columnDef.meta?.align; - const verticalAlign = cell?.column.columnDef.meta?.verticalAlign; - return b('table-cell', {align, 'vertical-align': verticalAlign}); - }} - className={b('table')} - /> - - ); + return
; } diff --git a/src/containers/Tablet/components/TabletStorageInfo/columns.tsx b/src/containers/Tablet/components/TabletStorageInfo/columns.tsx index 54d9c9b0c..409456c22 100644 --- a/src/containers/Tablet/components/TabletStorageInfo/columns.tsx +++ b/src/containers/Tablet/components/TabletStorageInfo/columns.tsx @@ -1,21 +1,13 @@ import {ArrowToggle, Button, Flex} from '@gravity-ui/uikit'; import type {CellContext, ColumnDef, Row} from '@tanstack/react-table'; +import {ColumnHeader} from '../../../../components/Table/Table'; import {formatTimestamp} from '../../../../utils/dataFormatters/dataFormatters'; import {tabletInfoKeyset} from './i18n'; import {b} from './shared'; import type {TabletStorageItem} from './types'; -interface ColumnHeaderProps { - name: string; - className?: string; -} - -function ColumnHeader({name, className}: ColumnHeaderProps) { - return
{name}
; -} - function metricsCell( info: CellContext, formatter?: (value: string | number) => string | number, @@ -57,24 +49,23 @@ export function getColumns(hasExpand?: boolean) { const columns: ColumnDef[] = [ { accessorKey: 'channelIndex', - header: () => , + header: () => {tabletInfoKeyset('label_channel-index')}, size: 50, cell: metricsCell, meta: {align: 'right'}, }, { accessorKey: 'storagePoolName', - header: () => , + header: () => {tabletInfoKeyset('label_storage-pool')}, size: 200, cell: metricsCell, }, { accessorKey: 'GroupID', header: () => ( - + + {tabletInfoKeyset('label_group-id')} + ), size: 100, cell: (info) => ( @@ -83,14 +74,14 @@ export function getColumns(hasExpand?: boolean) { }, { accessorKey: 'FromGeneration', - header: () => , + header: () => {tabletInfoKeyset('label_generation')}, size: 100, cell: metricsCell, meta: {align: 'right'}, }, { accessorKey: 'Timestamp', - header: () => , + header: () => {tabletInfoKeyset('label_timestamp')}, size: 200, cell: (info) => metricsCell(info, formatTimestamp), meta: {align: 'right'}, diff --git a/src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/OperationCell.tsx b/src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/OperationCell.tsx index 3be53f09b..ec36a4eae 100644 --- a/src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/OperationCell.tsx +++ b/src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/OperationCell.tsx @@ -97,7 +97,7 @@ export function OperationCell({row, depth = 0, params}: OperationCellProp className={block('operation-name')} > {dividers} - + {row.getCanExpand() && (
{ - const align = column.columnDef.meta?.align; - return block('table-header-cell', {align}); - }} - cellClassName={(cell) => { - const align = cell?.column.columnDef.meta?.align; - const verticalAlign = cell?.column.columnDef.meta?.verticalAlign; - return block('table-cell', {align, 'vertical-align': verticalAlign}); - }} - className={block('table')} - stickyHeader - /> - - ); + return
; }