feat(Cluster): add Tablets tab

Author: Raubzeug

src/containers/Cluster/Cluster.tsx

@@ -26,6 +26,7 @@ import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {parseVersionsToVersionToColorMap} from '../../utils/versions';
 import {NodesWrapper} from '../Nodes/NodesWrapper';
 import {StorageWrapper} from '../Storage/StorageWrapper';
+import {TabletsTable} from '../Tablets/TabletsTable';
 import {Tenants} from '../Tenants/Tenants';
 import {Versions} from '../Versions/Versions';
 
@@ -153,6 +154,19 @@ export function Cluster({
                         additionalClusterProps={additionalClusterProps}
                     />
                 </Route>
+                <Route
+                    path={
+                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets)).pathname
+                    }
+                >
+                    <div className={b('tablets')}>
+                        <div className={b('fake-block')} />
+                        <TabletsTable
+                            tablets={cluster.SystemTablets ?? []}
+                            className={b('tablets-table')}
+                        />
+                    </div>
+                </Route>
                 <Route
                     path={
                         getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants)).pathname

src/containers/Cluster/utils.tsx

@@ -7,6 +7,7 @@ export const clusterTabsIds = {
     nodes: 'nodes',
     storage: 'storage',
     versions: 'versions',
+    tablets: 'tablets',
 } as const;
 
 export type ClusterTab = ValueOf<typeof clusterTabsIds>;
@@ -32,8 +33,12 @@ const versions = {
     id: clusterTabsIds.versions,
     title: 'Versions',
 };
+const tablets = {
+    id: clusterTabsIds.tablets,
+    title: 'Tablets',
+};
 
-export const clusterTabs = [overview, tenants, nodes, storage, versions];
+export const clusterTabs = [overview, tenants, nodes, storage, tablets, versions];
 
 export function isClusterTab(tab: any): tab is ClusterTab {
     return Object.values(clusterTabsIds).includes(tab);

src/containers/Tablets/Tablets.tsx

@@ -1,174 +1,16 @@
-import {ArrowsRotateRight} from '@gravity-ui/icons';
-import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
-import {Icon, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 
-import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import {DeveloperUILinkButton} from '../../components/DeveloperUILinkButton/DeveloperUILinkButton';
-import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
-import {InternalLink} from '../../components/InternalLink';
-import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
-import {TabletState} from '../../components/TabletState/TabletState';
-import {getTabletPagePath} from '../../routes';
-import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
-import {tabletApi} from '../../store/reducers/tablet';
 import {selectTabletsWithFqdn, tabletsApi} from '../../store/reducers/tablets';
-import {ETabletState} from '../../types/api/tablet';
-import type {TTabletStateInfo} from '../../types/api/tablet';
 import type {TabletsApiRequestParams} from '../../types/store/tablets';
 import {cn} from '../../utils/cn';
-import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
-import {calcUptime} from '../../utils/dataFormatters/dataFormatters';
-import {createTabletDeveloperUIHref} from '../../utils/developerUI/developerUI';
 import {useAutoRefreshInterval, useTypedSelector} from '../../utils/hooks';
-import {getDefaultNodePath} from '../Node/NodePages';
 
-import i18n from './i18n';
+import {TabletsTable} from './TabletsTable';
 
 const b = cn('tablets');
 
-function getColumns({database}: {database?: string}) {
-    const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
-        {
-            name: 'Type',
-            get header() {
-                return i18n('Type');
-            },
-            render: ({row}) => {
-                const isFollower = row.Leader === false;
-                return (
-                    <span>
-                        {row.Type} {isFollower ? <Text color="secondary">follower</Text> : ''}
-                    </span>
-                );
-            },
-        },
-        {
-            name: 'TabletId',
-            width: 220,
-            get header() {
-                return i18n('Tablet');
-            },
-            render: ({row}) => {
-                if (!row.TabletId) {
-                    return EMPTY_DATA_PLACEHOLDER;
-                }
-
-                const tabletPath = getTabletPagePath(row.TabletId, {
-                    nodeId: row.NodeId,
-                    type: row.Type,
-                    tenantName: database,
-                });
-
-                return (
-                    <EntityStatus
-                        name={row.TabletId?.toString()}
-                        path={tabletPath}
-                        hasClipboardButton
-                        showStatus={false}
-                        additionalControls={
-                            <DeveloperUILinkButton
-                                href={createTabletDeveloperUIHref(row.TabletId)}
-                            />
-                        }
-                    />
-                );
-            },
-        },
-        {
-            name: 'State',
-            get header() {
-                return i18n('State');
-            },
-            render: ({row}) => {
-                return <TabletState state={row.State} />;
-            },
-        },
-        {
-            name: 'NodeId',
-            get header() {
-                return i18n('Node ID');
-            },
-            render: ({row}) => {
-                const nodePath =
-                    row.NodeId === undefined ? undefined : getDefaultNodePath(row.NodeId);
-                return <InternalLink to={nodePath}>{row.NodeId}</InternalLink>;
-            },
-            align: 'right',
-        },
-        {
-            name: 'fqdn',
-            get header() {
-                return i18n('Node FQDN');
-            },
-            render: ({row}) => {
-                if (!row.fqdn) {
-                    return <span>—</span>;
-                }
-                return <EntityStatus name={row.fqdn} showStatus={false} hasClipboardButton />;
-            },
-        },
-        {
-            name: 'Generation',
-            get header() {
-                return i18n('Generation');
-            },
-            align: 'right',
-        },
-        {
-            name: 'Uptime',
-            get header() {
-                return i18n('Uptime');
-            },
-            render: ({row}) => {
-                return calcUptime(row.ChangeTime);
-            },
-            sortAccessor: (row) => -Number(row.ChangeTime),
-            align: 'right',
-        },
-        {
-            name: 'Actions',
-            sortable: false,
-            resizeable: false,
-            header: '',
-            render: ({row}) => {
-                return <TabletActions {...row} />;
-            },
-        },
-    ];
-    return columns;
-}
-
-function TabletActions(tablet: TTabletStateInfo) {
-    const isDisabledRestart = tablet.State === ETabletState.Stopped;
-    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
-    const [killTablet] = tabletApi.useKillTabletMutation();
-
-    const id = tablet.TabletId;
-    if (!id) {
-        return null;
-    }
-
-    return (
-        <ButtonWithConfirmDialog
-            buttonView="outlined"
-            dialogHeader={i18n('dialog.kill-header')}
-            dialogText={i18n('dialog.kill-text')}
-            onConfirmAction={() => {
-                return killTablet({id}).unwrap();
-            }}
-            buttonDisabled={isDisabledRestart || !isUserAllowedToMakeChanges}
-            withPopover
-            popoverContent={i18n('controls.kill-not-allowed')}
-            popoverDisabled={isUserAllowedToMakeChanges}
-        >
-            <Icon data={ArrowsRotateRight} />
-        </ButtonWithConfirmDialog>
-    );
-}
-
 interface TabletsProps {
     path?: string;
     database?: string;
@@ -203,14 +45,7 @@ export function Tablets({nodeId, path, database, className}: TabletsProps) {
     return (
         <div className={b(null, className)}>
             {error ? <ResponseError error={error} /> : null}
-            {currentData ? (
-                <ResizeableDataTable
-                    columns={getColumns({database})}
-                    data={tablets}
-                    settings={DEFAULT_TABLE_SETTINGS}
-                    emptyDataMessage={i18n('noTabletsData')}
-                />
-            ) : null}
+            {currentData ? <TabletsTable tablets={tablets} database={database} /> : null}
         </div>
     );
 }