ydb-embedded-ui 20.2.0 → 20.3.0

package/src/containers/Operations/columns.tsx

@@ -0,0 +1,266 @@
+import {Ban, CircleStop} from '@gravity-ui/icons';
+import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
+import {ActionTooltip, Flex, Icon, Text} from '@gravity-ui/uikit';
+
+import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
+import {operationsApi} from '../../store/reducers/operations';
+import type {
+    CompactMetadata,
+    IndexBuildMetadata,
+    OperationKind,
+    TOperation,
+} from '../../types/api/operations';
+import {EStatusCode} from '../../types/api/operations';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import createToast from '../../utils/createToast';
+import {formatDateTime, formatDurationMs} from '../../utils/dataFormatters/dataFormatters';
+import {parseProtobufTimestampToMs} from '../../utils/timeParsers';
+
+import {COLUMNS_NAMES, COLUMNS_TITLES} from './constants';
+import i18n from './i18n';
+import {getOperationProgress, isIndexBuildMetadata} from './utils';
+
+import './Operations.scss';
+
+function renderStatusCell(row: TOperation) {
+    const progress = getOperationProgress(row, i18n);
+
+    if (row.ready) {
+        if (!row.status) {
+            return EMPTY_DATA_PLACEHOLDER;
+        }
+
+        return (
+            <Text color={row.status === EStatusCode.SUCCESS ? 'positive' : 'danger'}>
+                {row.status}
+            </Text>
+        );
+    }
+
+    if (row.status && row.status !== EStatusCode.SUCCESS) {
+        return <Text color="danger">{row.status}</Text>;
+    }
+
+    if (progress !== null) {
+        return progress;
+    }
+
+    return i18n('label_in-progress');
+}
+
+export function getColumns({
+    database,
+    kind,
+}: {
+    database: string;
+    kind: OperationKind;
+}): DataTableColumn<TOperation>[] {
+    const isBuildIndex = kind === 'buildindex';
+    const isCompaction = kind === 'compaction';
+
+    // Helper function to get description tooltip content (buildindex-only)
+    const getDescriptionTooltip = (operation: TOperation): string => {
+        const {metadata} = operation;
+
+        if (!isIndexBuildMetadata(metadata) || !metadata.description) {
+            return '';
+        }
+
+        return JSON.stringify(metadata.description, null, 2);
+    };
+
+    const columns: DataTableColumn<TOperation>[] = [
+        {
+            name: COLUMNS_NAMES.ID,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.ID],
+            width: 340,
+            render: ({row}) => {
+                if (!row.id) {
+                    return EMPTY_DATA_PLACEHOLDER;
+                }
+
+                const tooltipContent = isBuildIndex ? getDescriptionTooltip(row) || row.id : row.id;
+
+                return (
+                    <CellWithPopover placement={['top', 'bottom']} content={tooltipContent}>
+                        {row.id}
+                    </CellWithPopover>
+                );
+            },
+        },
+        {
+            name: COLUMNS_NAMES.STATUS,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.STATUS],
+            render: ({row}) => {
+                return renderStatusCell(row);
+            },
+        },
+    ];
+
+    // Add state column for kinds that expose a state (buildindex, compaction)
+    if (isBuildIndex || isCompaction) {
+        columns.push({
+            name: COLUMNS_NAMES.STATE,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.STATE],
+            render: ({row}) => {
+                const metadata = row.metadata as IndexBuildMetadata | CompactMetadata | undefined;
+                if (!metadata?.state) {
+                    return EMPTY_DATA_PLACEHOLDER;
+                }
+                return metadata.state;
+            },
+        });
+    }
+
+    // Add standard columns
+    columns.push(
+        {
+            name: COLUMNS_NAMES.CREATED_BY,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.CREATED_BY],
+            render: ({row}) => {
+                if (!row.created_by) {
+                    return EMPTY_DATA_PLACEHOLDER;
+                }
+                return row.created_by;
+            },
+        },
+        {
+            name: COLUMNS_NAMES.CREATE_TIME,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.CREATE_TIME],
+            render: ({row}) => {
+                if (!row.create_time) {
+                    return EMPTY_DATA_PLACEHOLDER;
+                }
+                return formatDateTime(parseProtobufTimestampToMs(row.create_time));
+            },
+        },
+        {
+            name: COLUMNS_NAMES.END_TIME,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.END_TIME],
+            render: ({row}) => {
+                if (!row.end_time) {
+                    return EMPTY_DATA_PLACEHOLDER;
+                }
+                return formatDateTime(parseProtobufTimestampToMs(row.end_time));
+            },
+        },
+        {
+            name: COLUMNS_NAMES.DURATION,
+            header: COLUMNS_TITLES[COLUMNS_NAMES.DURATION],
+            render: ({row}) => {
+                let durationValue = 0;
+                if (!row.create_time) {
+                    return EMPTY_DATA_PLACEHOLDER;
+                }
+                const createTime = parseProtobufTimestampToMs(row.create_time);
+                if (row.end_time) {
+                    const endTime = parseProtobufTimestampToMs(row.end_time);
+                    durationValue = endTime - createTime;
+                } else {
+                    durationValue = Date.now() - createTime;
+                }
+
+                const safeDurationMs = durationValue < 0 ? 0 : durationValue;
+                const durationFormatted = formatDurationMs(safeDurationMs);
+
+                return row.end_time
+                    ? durationFormatted
+                    : i18n('label_duration-ongoing', {value: durationFormatted});
+            },
+        },
+    );
+
+    // Add Actions column
+    columns.push({
+        name: 'Actions',
+        sortable: false,
+        resizeable: false,
+        header: '',
+        render: ({row}) => {
+            return <OperationsActions operation={row} database={database} />;
+        },
+    });
+
+    return columns;
+}
+
+interface OperationsActionsProps {
+    operation: TOperation;
+    database: string;
+}
+
+function OperationsActions({operation, database}: OperationsActionsProps) {
+    const [cancelOperation, {isLoading: isCancelLoading}] =
+        operationsApi.useCancelOperationMutation();
+    const [forgetOperation, {isLoading: isForgetLoading}] =
+        operationsApi.useForgetOperationMutation();
+
+    const id = operation.id;
+    if (!id) {
+        return null;
+    }
+
+    const isForgetButtonDisabled = isForgetLoading;
+    const isCancelButtonDisabled = isCancelLoading || operation.ready === true;
+
+    return (
+        <Flex gap="2">
+            <ActionTooltip
+                title={i18n('header_forget')}
+                placement={['left', 'bottom']}
+                disabled={isForgetButtonDisabled}
+            >
+                <div>
+                    <ButtonWithConfirmDialog
+                        buttonView="outlined"
+                        dialogHeader={i18n('header_forget')}
+                        dialogText={i18n('text_forget')}
+                        onConfirmAction={() =>
+                            forgetOperation({id, database})
+                                .unwrap()
+                                .then(() => {
+                                    createToast({
+                                        name: 'Forgotten',
+                                        title: i18n('text_forgotten', {id}),
+                                        theme: 'success',
+                                    });
+                                })
+                        }
+                        buttonDisabled={isForgetButtonDisabled}
+                    >
+                        <Icon data={Ban} />
+                    </ButtonWithConfirmDialog>
+                </div>
+            </ActionTooltip>
+            <ActionTooltip
+                title={i18n('header_cancel')}
+                placement={['right', 'bottom']}
+                disabled={isCancelButtonDisabled}
+            >
+                <div>
+                    <ButtonWithConfirmDialog
+                        popoverDisabled={isCancelButtonDisabled}
+                        buttonView="outlined"
+                        dialogHeader={i18n('header_cancel')}
+                        dialogText={i18n('text_cancel')}
+                        onConfirmAction={() =>
+                            cancelOperation({id, database})
+                                .unwrap()
+                                .then(() => {
+                                    createToast({
+                                        name: 'Cancelled',
+                                        title: i18n('text_cancelled', {id}),
+                                        theme: 'success',
+                                    });
+                                })
+                        }
+                        buttonDisabled={isCancelButtonDisabled}
+                    >
+                        <Icon data={CircleStop} />
+                    </ButtonWithConfirmDialog>
+                </div>
+            </ActionTooltip>
+        </Flex>
+    );
+}

package/src/containers/Operations/constants.ts

@@ -0,0 +1,53 @@
+import type {OperationKind} from '../../types/api/operations';
+
+import i18n from './i18n';
+
+export const OPERATIONS_SELECTED_COLUMNS_KEY = 'selectedOperationColumns';
+
+export const COLUMNS_NAMES = {
+    ID: 'id',
+    STATUS: 'status',
+    CREATED_BY: 'created_by',
+    CREATE_TIME: 'create_time',
+    END_TIME: 'end_time',
+    DURATION: 'duration',
+    STATE: 'state',
+} as const;
+
+export const COLUMNS_TITLES = {
+    [COLUMNS_NAMES.ID]: i18n('column_operationId'),
+    [COLUMNS_NAMES.STATUS]: i18n('column_status'),
+    [COLUMNS_NAMES.CREATED_BY]: i18n('column_createdBy'),
+    [COLUMNS_NAMES.CREATE_TIME]: i18n('column_createTime'),
+    [COLUMNS_NAMES.END_TIME]: i18n('column_endTime'),
+    [COLUMNS_NAMES.DURATION]: i18n('column_duration'),
+    [COLUMNS_NAMES.STATE]: i18n('column_state'),
+} as const;
+
+export const BASE_COLUMNS = [
+    COLUMNS_NAMES.ID,
+    COLUMNS_NAMES.STATUS,
+    COLUMNS_NAMES.CREATED_BY,
+    COLUMNS_NAMES.CREATE_TIME,
+    COLUMNS_NAMES.END_TIME,
+    COLUMNS_NAMES.DURATION,
+];
+
+export const OPERATION_KINDS: {value: OperationKind; content: string}[] = [
+    {value: 'export', content: i18n('kind_export')},
+    {value: 'export/s3', content: i18n('kind_export_s3')},
+    {value: 'export/yt', content: i18n('kind_export_yt')},
+    {value: 'export/nfs', content: i18n('kind_export_nfs')},
+    {value: 'import/s3', content: i18n('kind_import_s3')},
+    {value: 'import/nfs', content: i18n('kind_import_nfs')},
+    {value: 'ss/backgrounds', content: i18n('kind_ssBackgrounds')},
+    {value: 'buildindex', content: i18n('kind_buildIndex')},
+    {value: 'compaction', content: i18n('kind_compaction')},
+    {value: 'incbackup', content: i18n('kind_incbackup')},
+    {value: 'restore', content: i18n('kind_restore')},
+];
+
+export const ANALYZE_OPERATION_KIND: {value: OperationKind; content: string} = {
+    value: 'analyze',
+    content: i18n('kind_analyze'),
+};

package/src/containers/Operations/i18n/en.json

@@ -0,0 +1,40 @@
+{
+  "title_empty": "No operations data",
+  "pleaceholder_search": "Search operations",
+  "placeholder_kind": "Select operation kind",
+  "kind_ssBackgrounds": "SS/Backgrounds",
+  "kind_export": "Export",
+  "kind_export_s3": "Export/S3",
+  "kind_export_yt": "Export/YT",
+  "kind_export_nfs": "Export/NFS",
+  "kind_import_s3": "Import/S3",
+  "kind_import_nfs": "Import/NFS",
+  "kind_buildIndex": "Build Index",
+  "kind_analyze": "Analyze",
+  "kind_compaction": "Compaction",
+  "kind_incbackup": "Incremental Backup",
+  "kind_restore": "Restore",
+  "column_operationId": "Operation ID",
+  "column_status": "Status",
+  "column_createdBy": "Created By",
+  "column_createTime": "Create Time",
+  "column_endTime": "End Time",
+  "column_duration": "Duration",
+  "column_state": "State",
+  "label_duration-ongoing": "{{value}} (ongoing)",
+  "label_in-progress": "In progress",
+  "value_progress_unspecified": "Unspecified",
+  "value_progress_preparing": "Preparing",
+  "value_progress_transfer_data": "Transferring Data",
+  "value_progress_build_indexes": "Building Indexes",
+  "value_progress_done": "Done",
+  "value_progress_cancellation": "Cancelling",
+  "value_progress_cancelled": "Cancelled",
+  "value_progress_create_changefeeds": "Creating Changefeeds",
+  "header_cancel": "Cancel operation",
+  "header_forget": "Forget operation",
+  "text_cancel": "The operation will be cancelled. Do you want to proceed?",
+  "text_forget": "The operation will be forgotten. Do you want to proceed?",
+  "text_forgotten": "The operation {{id}} has been forgotten",
+  "text_cancelled": "The operation {{id}} has been cancelled"
+}

package/src/containers/Operations/i18n/index.ts

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

package/src/containers/Operations/shared.ts

@@ -0,0 +1,3 @@
+import {cn} from '../../utils/cn';
+
+export const b = cn('operations');

package/src/containers/Operations/useOperationsInfiniteQuery.ts

@@ -0,0 +1,124 @@
+import React from 'react';
+
+import {throttle} from 'lodash';
+
+import {DEFAULT_PAGE_SIZE, operationsApi} from '../../store/reducers/operations';
+import type {OperationKind} from '../../types/api/operations';
+
+interface UseOperationsInfiniteQueryProps {
+    database: string;
+    kind: OperationKind;
+    pageSize?: number;
+    searchValue: string;
+    scrollContainerRef?: React.RefObject<HTMLElement>;
+}
+
+const DEFAULT_SCROLL_MARGIN = 100;
+
+export function useOperationsInfiniteQuery({
+    database,
+    kind,
+    pageSize = DEFAULT_PAGE_SIZE,
+    searchValue,
+    scrollContainerRef,
+}: UseOperationsInfiniteQueryProps) {
+    const {data, error, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage} =
+        operationsApi.useGetOperationListInfiniteQuery({
+            database,
+            kind,
+            page_size: pageSize,
+        });
+
+    // Flatten all pages into a single array of operations
+    const allOperations = React.useMemo(() => {
+        if (!data?.pages) {
+            return [];
+        }
+        // Each page is a TOperationList, so we need to extract operations from each
+        return data.pages.flatMap((page) => page.operations || []);
+    }, [data]);
+
+    const filteredOperations = React.useMemo(() => {
+        const preparedSearchValue = searchValue.trim().toLowerCase();
+
+        if (!preparedSearchValue) {
+            return allOperations;
+        }
+        return allOperations.filter((op) => op.id?.toLowerCase().includes(preparedSearchValue));
+    }, [allOperations, searchValue]);
+
+    // Auto-load more pages to fill viewport
+    const checkAndLoadMorePages = React.useCallback(async () => {
+        const scrollContainer = scrollContainerRef?.current;
+        if (!scrollContainer || !hasNextPage || isFetchingNextPage) {
+            return;
+        }
+
+        const {scrollHeight, clientHeight} = scrollContainer;
+        if (scrollHeight <= clientHeight) {
+            await fetchNextPage();
+        }
+    }, [scrollContainerRef, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    // Check after data updates
+    React.useLayoutEffect(() => {
+        if (!isFetchingNextPage) {
+            // RAF to ensure browser has completed layout and paint
+            const raf = requestAnimationFrame(() => {
+                checkAndLoadMorePages();
+            });
+            return () => cancelAnimationFrame(raf);
+        }
+
+        return undefined;
+    }, [data, isFetchingNextPage, checkAndLoadMorePages]);
+
+    // Scroll handler for infinite scrolling
+    const handleScroll = React.useCallback(() => {
+        const scrollContainer = scrollContainerRef?.current;
+        if (!scrollContainer) {
+            return;
+        }
+
+        const {scrollTop, scrollHeight, clientHeight} = scrollContainer;
+
+        if (
+            scrollHeight - scrollTop - clientHeight < DEFAULT_SCROLL_MARGIN &&
+            hasNextPage &&
+            !isFetchingNextPage
+        ) {
+            fetchNextPage();
+        }
+    }, [scrollContainerRef, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    React.useEffect(() => {
+        const scrollContainer = scrollContainerRef?.current;
+        if (!scrollContainer) {
+            return undefined;
+        }
+
+        scrollContainer.addEventListener('scroll', handleScroll);
+        return () => scrollContainer.removeEventListener('scroll', handleScroll);
+    }, [scrollContainerRef, handleScroll]);
+
+    // Resize handler to check if more content is needed when viewport changes
+    React.useEffect(() => {
+        const throttledHandleResize = throttle(checkAndLoadMorePages, 200, {
+            trailing: true,
+            leading: true,
+        });
+
+        window.addEventListener('resize', throttledHandleResize);
+        return () => {
+            throttledHandleResize.cancel();
+            window.removeEventListener('resize', throttledHandleResize);
+        };
+    }, [checkAndLoadMorePages]);
+
+    return {
+        operations: filteredOperations,
+        isLoading,
+        isLoadingMore: isFetchingNextPage,
+        error,
+    };
+}

package/src/containers/Operations/useOperationsQueryParams.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import {NumberParam, StringParam, useQueryParams} from 'use-query-params';
+import {z} from 'zod';
+
+import {useAnalyzeOperationAvailable} from '../../store/reducers/capabilities/hooks';
+import type {OperationKind} from '../../types/api/operations';
+
+const operationKindSchema = z
+    .enum([
+        'ss/backgrounds',
+        'export',
+        'export/s3',
+        'export/yt',
+        'export/nfs',
+        'import/s3',
+        'import/nfs',
+        'buildindex',
+        'analyze',
+        'compaction',
+        'incbackup',
+        'restore',
+    ])
+    .catch('buildindex');
+
+export function useOperationsQueryParams() {
+    const analyzeOperationAvailable = useAnalyzeOperationAvailable();
+    const [queryParams, setQueryParams] = useQueryParams({
+        kind: StringParam,
+        search: StringParam,
+        pageSize: NumberParam,
+        pageToken: StringParam,
+    });
+
+    const queryKind = operationKindSchema.parse(queryParams.kind) as OperationKind;
+    const kind = queryKind === 'analyze' && !analyzeOperationAvailable ? 'buildindex' : queryKind;
+    const searchValue = queryParams.search ?? '';
+    const pageSize = queryParams.pageSize ?? undefined;
+    const pageToken = queryParams.pageToken ?? undefined;
+
+    React.useEffect(() => {
+        if (queryKind !== kind) {
+            setQueryParams({kind}, 'replaceIn');
+        }
+    }, [kind, queryKind, setQueryParams]);
+
+    const handleKindChange = React.useCallback(
+        (value: OperationKind) => {
+            setQueryParams({kind: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    const handleSearchChange = React.useCallback(
+        (value: string) => {
+            setQueryParams({search: value || undefined}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    const handlePageSizeChange = React.useCallback(
+        (value: number) => {
+            setQueryParams({pageSize: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    const handlePageTokenChange = React.useCallback(
+        (value: string | undefined) => {
+            setQueryParams({pageToken: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    return {
+        kind,
+        analyzeOperationAvailable,
+        searchValue,
+        pageSize,
+        pageToken,
+        handleKindChange,
+        handleSearchChange,
+        handlePageSizeChange,
+        handlePageTokenChange,
+    };
+}