feat(Diagnostics): display tablets as table

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -18,7 +18,6 @@ import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
 import {Heatmap} from '../../Heatmap';
 import {NodesWrapper} from '../../Nodes/NodesWrapper';
 import {StorageWrapper} from '../../Storage/StorageWrapper';
-import {Tablets} from '../../Tablets';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {TenantTabsGroups} from '../TenantPages';
 import {isDatabaseEntityType} from '../utils/schema';
@@ -31,6 +30,7 @@ import {DATABASE_PAGES, getPagesByType} from './DiagnosticsPages';
 import {HotKeys} from './HotKeys/HotKeys';
 import {Network} from './Network/Network';
 import {Partitions} from './Partitions/Partitions';
+import {Tablets} from './Tablets/Tablets';
 import {TopQueries} from './TopQueries';
 import {TopShards} from './TopShards';
 

src/containers/Tenant/Diagnostics/Tablets/Tablets.tsx

@@ -0,0 +1,172 @@
+import {ArrowsRotateRight} from '@gravity-ui/icons';
+import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
+import {Icon, Label, Text} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+
+import {ButtonWithConfirmDialog} from '../../../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+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 routes, {createHref} from '../../../../routes';
+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} from '../../../../utils/constants';
+import {calcUptime} from '../../../../utils/dataFormatters/dataFormatters';
+import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {mapTabletStateToLabelTheme} from '../../../../utils/tablet';
+import {getDefaultNodePath} from '../../../Node/NodePages';
+
+import i18n from './i18n';
+
+const b = cn('tablets-table');
+
+const columns: DataTableColumn<TTabletStateInfo & {fqdn?: string}>[] = [
+    {
+        name: 'Type',
+        get header() {
+            return i18n('Type');
+        },
+        render: ({row}) => {
+            return (
+                <span>
+                    {row.Type} {row.Leader ? <Text color="secondary">leader</Text> : ''}
+                </span>
+            );
+        },
+    },
+    {
+        name: 'TabletId',
+        get header() {
+            return i18n('Tablet');
+        },
+        render: ({row}) => {
+            const tabletPath =
+                row.TabletId &&
+                createHref(routes.tablet, {id: row.TabletId}, {nodeId: row.NodeId, type: row.Type});
+
+            return <InternalLink to={tabletPath}>{row.TabletId}</InternalLink>;
+        },
+    },
+    {
+        name: 'State',
+        get header() {
+            return i18n('State');
+        },
+        render: ({row}) => {
+            return <Label theme={mapTabletStateToLabelTheme(row.State)}>{row.State}</Label>;
+        },
+    },
+    {
+        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} />;
+        },
+    },
+];
+
+function TabletActions(tablet: TTabletStateInfo) {
+    const isDisabledRestart = tablet.State === ETabletState.Stopped;
+    const dispatch = useTypedDispatch();
+    return (
+        <ButtonWithConfirmDialog
+            buttonView="outlined"
+            dialogContent={i18n('dialog.kill')}
+            onConfirmAction={() => {
+                return window.api.killTablet(tablet.TabletId);
+            }}
+            onConfirmActionSuccess={() => {
+                dispatch(tabletsApi.util.invalidateTags(['All']));
+            }}
+            buttonDisabled={isDisabledRestart}
+        >
+            <Icon data={ArrowsRotateRight} />
+        </ButtonWithConfirmDialog>
+    );
+}
+
+interface TabletsProps {
+    path?: string;
+    className?: string;
+}
+
+export function Tablets({path, className}: TabletsProps) {
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    let params: TabletsApiRequestParams | typeof skipToken = skipToken;
+    if (path) {
+        params = {path};
+    }
+    const {currentData, isFetching, error} = tabletsApi.useGetTabletsInfoQuery(params, {
+        pollingInterval: autorefresh,
+    });
+
+    const loading = isFetching && currentData === undefined;
+    const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, path || ''));
+
+    if (loading) {
+        return <TableSkeleton />;
+    }
+    if (error) {
+        return <ResponseError error={error} />;
+    }
+
+    return (
+        <div className={b(null, className)}>
+            <ResizeableDataTable
+                columns={columns}
+                data={tablets}
+                settings={DEFAULT_TABLE_SETTINGS}
+                emptyDataMessage={i18n('noTabletsData')}
+            />
+        </div>
+    );
+}

src/containers/Tenant/Diagnostics/Tablets/i18n/en.json

@@ -0,0 +1,11 @@
+{
+  "noTabletsData": "No tablets data",
+  "Type": "Type",
+  "Tablet": "Tablet",
+  "State": "State",
+  "Node ID": "Node ID",
+  "Node FQDN": "Node FQDN",
+  "Generation": "Generation",
+  "Uptime": "Uptime",
+  "dialog.kill": "The tablet will be restarted. Do you want to proceed?"
+}

src/containers/Tenant/Diagnostics/Tablets/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-tablets-table';
+
+export default registerKeysets(COMPONENT, {en});

src/store/reducers/tablets.ts

@@ -1,10 +1,12 @@
-import {createSlice} from '@reduxjs/toolkit';
+import {createSelector, createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
 
-import type {ETabletState, EType} from '../../types/api/tablet';
+import type {ETabletState, EType, TTabletStateInfo} from '../../types/api/tablet';
 import type {TabletsApiRequestParams, TabletsState} from '../../types/store/tablets';
+import type {RootState} from '../defaultStore';
 
 import {api} from './api';
+import {selectNodesMap} from './nodesList';
 
 const initialState: TabletsState = {
     stateFilter: [],
@@ -43,3 +45,31 @@ export const tabletsApi = api.injectEndpoints({
     }),
     overrideExisting: 'throw',
 });
+
+const getTabletsInfoSelector = createSelector(
+    (path: string) => path,
+    (path) => tabletsApi.endpoints.getTabletsInfo.select({path}),
+);
+
+const selectGetTabletsInfo = createSelector(
+    (state: RootState) => state,
+    (_state: RootState, path: string) => getTabletsInfoSelector(path),
+    (state, selectTabletsInfo) => selectTabletsInfo(state).data,
+);
+
+export const selectTabletsWithFqdn = createSelector(
+    (state: RootState, path: string) => selectGetTabletsInfo(state, path),
+    (state: RootState) => selectNodesMap(state),
+    (data, nodesMap): (TTabletStateInfo & {fqdn?: string})[] => {
+        if (!data?.TabletStateInfo) {
+            return [];
+        }
+        if (!nodesMap) {
+            return data.TabletStateInfo;
+        }
+        return data.TabletStateInfo.map((tablet) => {
+            const fqdn = tablet.NodeId === undefined ? undefined : nodesMap.get(tablet.NodeId);
+            return {...tablet, fqdn};
+        });
+    },
+);

src/utils/tablet.ts

@@ -1,3 +1,5 @@
+import type {LabelProps} from '@gravity-ui/uikit';
+
 import {EFlag} from '../types/api/enums';
 import {ETabletState} from '../types/api/tablet';
 
@@ -52,3 +54,18 @@ export const mapTabletStateToColorState = (state?: ETabletState | EFlag): EFlag
 
     return tabletStateToColorState[state];
 };
+
+export function mapTabletStateToLabelTheme(state?: ETabletState): LabelProps['theme'] {
+    if (!state) {
+        return 'unknown';
+    }
+    switch (state) {
+        case ETabletState.Dead:
+            return 'danger';
+        case ETabletState.Active:
+        case ETabletState.Deleted:
+            return 'success';
+        default:
+            return 'warning';
+    }
+}