Skip to content

Commit

Permalink
Add search filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@devabhishekpal
devabhishekpal committed Oct 18, 2024
1 parent 01cefcb commit 71fd58f
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 8 deletions.
22 changes: 19 additions & 3 deletions ...ebapps/recon/ozone-recon-web/src/v2/components/tables/insights/containerMismatchTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,11 @@ import {
import { FilterFilled } from '@ant-design/icons';
import { ValueType } from 'react-select';

import Search from '@/v2/components/search/search';
import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
import { showDataFetchError } from '@/utils/common';
import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
import { useDebounce } from '@/v2/hooks/debounce.hook';
import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';

import {
Expand All @@ -46,7 +48,6 @@ import {
} from '@/v2/types/insights.types';



//-----Types-----
type ContainerMismatchTableProps = {
paginationConfig: TablePaginationConfig;
Expand All @@ -56,7 +57,7 @@ type ContainerMismatchTableProps = {
onRowExpand: (arg0: boolean, arg1: any) => void;
}


//-----Components------
const ContainerMismatchTable: React.FC<ContainerMismatchTableProps> = ({
paginationConfig,
limit,
Expand All @@ -67,8 +68,10 @@ const ContainerMismatchTable: React.FC<ContainerMismatchTableProps> = ({

const [loading, setLoading] = React.useState<boolean>(false);
const [data, setData] = React.useState<Container[]>();
const [searchTerm, setSearchTerm] = React.useState<string>('');

const cancelSignal = React.useRef<AbortController>();
const debouncedSearch = useDebounce(searchTerm, 300);

const handleExistAtChange: FilterMenuProps['onClick'] = ({ key }) => {
if (key === 'OM') {
Expand All @@ -78,6 +81,12 @@ const ContainerMismatchTable: React.FC<ContainerMismatchTableProps> = ({
}
}

function filterData(data: Container[] | undefined) {
return data?.filter(
(data: Container) => data.containerId.toString().includes(debouncedSearch)
);
}

const COLUMNS: ColumnsType<Container> = [
{
title: 'Container ID',
Expand Down Expand Up @@ -170,14 +179,21 @@ const ContainerMismatchTable: React.FC<ContainerMismatchTableProps> = ({
placeholder='Limit'
onChange={handleLimitChange} />
</div>
<Search
disabled={(data?.length ?? 0) < 1}
searchInput={searchTerm}
onSearchChange={
(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)
}
onChange={() => {}}/>
</div>
<Table
expandable={{
expandRowByClick: true,
expandedRowRender: expandedRowRender,
onExpand: onRowExpand
}}
dataSource={data}
dataSource={filterData(data)}
columns={COLUMNS}
loading={loading}
pagination={paginationConfig}
Expand Down
22 changes: 21 additions & 1 deletion ...ebapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingDirsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,24 @@ import Table, {
} from 'antd/es/table';
import { ValueType } from 'react-select';

import Search from '@/v2/components/search/search';
import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
import { byteToSize, showDataFetchError } from '@/utils/common';
import { getFormattedTime } from '@/v2/utils/momentUtils';
import { useDebounce } from '@/v2/hooks/debounce.hook';
import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';

import { DeletedDirInfo } from '@/v2/types/insights.types';

//-----Types------
type DeletePendingDirTableProps = {
paginationConfig: TablePaginationConfig
limit: Option;
handleLimitChange: (arg0: ValueType<Option, false>) => void;
}

//-----Constants------
const COLUMNS: ColumnsType<DeletedDirInfo> = [{
title: 'Directory Name',
dataIndex: 'key',
Expand All @@ -63,6 +67,7 @@ const COLUMNS: ColumnsType<DeletedDirInfo> = [{
render: (dataSize: number) => byteToSize(dataSize, 1)
}];

//-----Components------
const DeletePendingDirTable: React.FC<DeletePendingDirTableProps> = ({
limit,
paginationConfig,
Expand All @@ -71,8 +76,16 @@ const DeletePendingDirTable: React.FC<DeletePendingDirTableProps> = ({

const [loading, setLoading] = React.useState<boolean>(false);
const [data, setData] = React.useState<DeletedDirInfo[]>();
const [searchTerm, setSearchTerm] = React.useState<string>('');

const cancelSignal = React.useRef<AbortController>();
const debouncedSearch = useDebounce(searchTerm, 300);

function filterData(data: DeletedDirInfo[] | undefined) {
return data?.filter(
(data: DeletedDirInfo) => data.key.includes(debouncedSearch)
);
}

function loadData() {
setLoading(true);
Expand Down Expand Up @@ -107,10 +120,17 @@ const DeletePendingDirTable: React.FC<DeletePendingDirTableProps> = ({
placeholder='Limit'
onChange={handleLimitChange} />
</div>
<Search
disabled={(data?.length ?? 0) < 1}
searchInput={searchTerm}
onSearchChange={
(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)
}
onChange={() => { }} />
</div>
<Table
loading={loading}
dataSource={data}
dataSource={filterData(data)}
columns={COLUMNS}
pagination={paginationConfig}
rowKey='key'
Expand Down
19 changes: 18 additions & 1 deletion ...ebapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingKeysTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,12 @@ import Table, {
} from 'antd/es/table';
import { ValueType } from 'react-select';

import Search from '@/v2/components/search/search';
import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
import ExpandedPendingKeysTable from '@/v2/components/tables/insights/expandedPendingKeysTable';
import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
import { byteToSize, showDataFetchError } from '@/utils/common';
import { useDebounce } from '@/v2/hooks/debounce.hook';
import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';

import {
Expand Down Expand Up @@ -88,8 +90,16 @@ const DeletePendingKeysTable: React.FC<DeletePendingKeysTableProps> = ({
}) => {
const [loading, setLoading] = React.useState<boolean>(false);
const [data, setData] = React.useState<DeletePendingKeysColumns[]>();
const [searchTerm, setSearchTerm] = React.useState<string>('');

const cancelSignal = React.useRef<AbortController>();
const debouncedSearch = useDebounce(searchTerm, 300);

function filterData(data: DeletePendingKeysColumns[] | undefined) {
return data?.filter(
(data: DeletePendingKeysColumns) => data.keyName.includes(debouncedSearch)
);
}

function expandedRowRender(record: DeletePendingKeysColumns) {
console.log(expandedDeletePendingKeys);
Expand Down Expand Up @@ -157,13 +167,20 @@ const DeletePendingKeysTable: React.FC<DeletePendingKeysTableProps> = ({
placeholder='Limit'
onChange={handleLimitChange} />
</div>
<Search
disabled={(data?.length ?? 0) < 1}
searchInput={searchTerm}
onSearchChange={
(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)
}
onChange={() => { }} />
</div>
<Table
expandable={{
expandRowByClick: true,
expandedRowRender: expandedRowRender
}}
dataSource={data}
dataSource={filterData(data)}
columns={COLUMNS}
loading={loading}
pagination={paginationConfig}
Expand Down
19 changes: 18 additions & 1 deletion ...pps/recon/ozone-recon-web/src/v2/components/tables/insights/deletedContainerKeysTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,11 @@ import Table, {
} from 'antd/es/table';
import { ValueType } from 'react-select';

import Search from '@/v2/components/search/search';
import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
import { showDataFetchError } from '@/utils/common';
import { useDebounce } from '@/v2/hooks/debounce.hook';
import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';

import {
Expand Down Expand Up @@ -85,8 +87,16 @@ const DeletedContainerKeysTable: React.FC<DeletedContainerKeysTableProps> = ({

const [loading, setLoading] = React.useState<boolean>(false);
const [data, setData] = React.useState<Container[]>();
const [searchTerm, setSearchTerm] = React.useState<string>('');

const cancelSignal = React.useRef<AbortController>();
const debouncedSearch = useDebounce(searchTerm, 300);

function filterData(data: Container[] | undefined) {
return data?.filter(
(data: Container) => data.containerId.toString().includes(debouncedSearch)
);
}

function fetchDeletedKeys() {
const { request, controller } = AxiosGetHelper(
Expand Down Expand Up @@ -125,14 +135,21 @@ const DeletedContainerKeysTable: React.FC<DeletedContainerKeysTableProps> = ({
placeholder='Limit'
onChange={handleLimitChange} />
</div>
<Search
disabled={(data?.length ?? 0) < 1}
searchInput={searchTerm}
onSearchChange={
(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)
}
onChange={() => { }} />
</div>
<Table
expandable={{
expandRowByClick: true,
expandedRowRender: expandedRowRender,
onExpand: onRowExpand
}}
dataSource={data}
dataSource={filterData(data)}
columns={COLUMNS}
loading={loading}
pagination={paginationConfig}
Expand Down
2 changes: 2 additions & 0 deletions ...rces/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/expandedKeyTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { MismatchKeys } from '@/v2/types/insights.types';

const size = filesize.partial({ standard: 'iec' });

//-----Types------
type ExpandedKeyTableProps = {
loading: boolean;
data: MismatchKeys[];
Expand Down Expand Up @@ -72,6 +73,7 @@ const COLUMNS: ColumnsType<MismatchKeys> = [
}
];

//-----Components------
const ExpandedKeyTable: React.FC<ExpandedKeyTableProps> = ({
loading,
data,
Expand Down
1 change: 0 additions & 1 deletion ...apps/recon/ozone-recon-web/src/v2/components/tables/insights/expandedPendingKeysTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ const COLUMNS: ColumnsType<DeletePendingKey> = [{
}
}]


//--------Component--------
const ExpandedPendingKeysTable: React.FC<ExpandedPendingKeysTableProps> = ({
data,
Expand Down
20 changes: 19 additions & 1 deletion ...sources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/openKeysTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,12 @@ import { MenuProps } from 'antd/es/menu';
import { FilterFilled } from '@ant-design/icons';
import { ValueType } from 'react-select';

import Search from '@/v2/components/search/search';
import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
import { byteToSize, showDataFetchError } from '@/utils/common';
import { getFormattedTime } from '@/v2/utils/momentUtils';
import { useDebounce } from '@/v2/hooks/debounce.hook';
import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';

import { OpenKeys, OpenKeysResponse } from '@/v2/types/insights.types';
Expand All @@ -47,15 +49,24 @@ type OpenKeysTableProps = {
handleLimitChange: (arg0: ValueType<Option, false>) => void;
}

//-----Components------
const OpenKeysTable: React.FC<OpenKeysTableProps> = ({
limit,
paginationConfig,
handleLimitChange
}) => {
const [loading, setLoading] = React.useState<boolean>(false);
const [data, setData] = React.useState<OpenKeys[]>();
const [searchTerm, setSearchTerm] = React.useState<string>('');

const cancelSignal = React.useRef<AbortController>();
const debouncedSearch = useDebounce(searchTerm, 300);

function filterData(data: OpenKeys[] | undefined) {
return data?.filter(
(data: OpenKeys) => data.path.includes(debouncedSearch)
);
}

function fetchOpenKeys(isFso: boolean) {
setLoading(true);
Expand Down Expand Up @@ -179,9 +190,16 @@ const OpenKeysTable: React.FC<OpenKeysTableProps> = ({
placeholder='Limit'
onChange={handleLimitChange} />
</div>
<Search
disabled={(data?.length ?? 0) < 1}
searchInput={searchTerm}
onSearchChange={
(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)
}
onChange={() => { }} />
</div>
<Table
dataSource={data}
dataSource={filterData(data)}
columns={COLUMNS}
loading={loading}
rowKey='key'
Expand Down

0 comments on commit 71fd58f

Please sign in to comment.