diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx new file mode 100644 index 0000000000..bb9d66f54e --- /dev/null +++ b/src/containers/Operations/Operations.tsx @@ -0,0 +1,72 @@ +import React from 'react'; + +import {AccessDenied} from '../../components/Errors/403'; +import {isAccessError} from '../../components/Errors/PageError/PageError'; +import {ResponseError} from '../../components/Errors/ResponseError'; +import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable'; +import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout'; +import {operationListApi} from '../../store/reducers/operationList'; +import {useAutoRefreshInterval} from '../../utils/hooks'; + +import {OperationsControls} from './OperationsControls'; +import {getColumns} from './columns'; +import i18n from './i18n'; +import {b} from './shared'; +import {useOperationsQueryParams} from './useOperationsQueryParams'; + +interface OperationsProps { + database: string; +} + +export function Operations({database}: OperationsProps) { + const [autoRefreshInterval] = useAutoRefreshInterval(); + + const {kind, searchValue, pageSize, pageToken, handleKindChange, handleSearchChange} = + useOperationsQueryParams(); + + const {data, isFetching, error} = operationListApi.useGetOperationListQuery( + {database, kind, page_size: pageSize, page_token: pageToken}, + { + pollingInterval: autoRefreshInterval, + }, + ); + + const filteredOperations = React.useMemo(() => { + if (!data?.operations) { + return []; + } + return data.operations.filter((op) => + op.id?.toLowerCase().includes(searchValue.toLowerCase()), + ); + }, [data?.operations, searchValue]); + + if (isAccessError(error)) { + return ; + } + + return ( + + + + + {error ? : null} + + {data ? ( + + ) : null} + + + ); +} diff --git a/src/containers/Operations/OperationsControls.tsx b/src/containers/Operations/OperationsControls.tsx new file mode 100644 index 0000000000..f0d203e342 --- /dev/null +++ b/src/containers/Operations/OperationsControls.tsx @@ -0,0 +1,53 @@ +import React from 'react'; + +import {Select} from '@gravity-ui/uikit'; + +import {EntitiesCount} from '../../components/EntitiesCount'; +import {Search} from '../../components/Search'; +import type {OperationKind} from '../../types/api/operationList'; + +import {OPERATION_KINDS} from './constants'; +import i18n from './i18n'; +import {b} from './shared'; + +interface OperationsControlsProps { + kind: OperationKind; + searchValue: string; + entitiesCountCurrent: number; + entitiesCountTotal?: number; + entitiesLoading: boolean; + handleKindChange: (kind: OperationKind) => void; + handleSearchChange: (value: string) => void; +} + +export function OperationsControls({ + kind, + searchValue, + entitiesCountCurrent, + entitiesCountTotal, + entitiesLoading, + handleKindChange, + handleSearchChange, +}: OperationsControlsProps) { + return ( + + +