diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx
index 253af7dfe1..6db945b9bc 100644
--- a/frontend/src/container/AllError/index.tsx
+++ b/frontend/src/container/AllError/index.tsx
@@ -1,12 +1,25 @@
-import { notification, Table, TableProps, Tooltip, Typography } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import {
+ Button,
+ Card,
+ Input,
+ notification,
+ Space,
+ Table,
+ TableProps,
+ Tooltip,
+ Typography,
+} from 'antd';
+import { ColumnType } from 'antd/es/table';
import { ColumnsType } from 'antd/lib/table';
+import { FilterConfirmProps } from 'antd/lib/table/interface';
import getAll from 'api/errors/getAll';
import getErrorCounts from 'api/errors/getErrorCounts';
import ROUTES from 'constants/routes';
import dayjs from 'dayjs';
import createQueryParams from 'lib/createQueryParams';
import history from 'lib/history';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useQueries } from 'react-query';
import { useSelector } from 'react-redux';
@@ -93,11 +106,87 @@ function AllErrors(): JSX.Element {
{dayjs(value).format('DD/MM/YYYY HH:mm:ss A')}
);
+ const filterIcon = useCallback(() => , []);
+
+ const handleSearch = (
+ confirm: (param?: FilterConfirmProps) => void,
+ ): VoidFunction => (): void => {
+ confirm();
+ };
+
+ const filterDropdownWrapper = useCallback(
+ ({ setSelectedKeys, selectedKeys, confirm, placeholder }) => {
+ return (
+
+
+
+ setSelectedKeys(e.target.value ? [e.target.value] : [])
+ }
+ allowClear
+ onPressEnter={handleSearch(confirm)}
+ />
+ }
+ size="small"
+ >
+ Search
+
+
+
+ );
+ },
+ [],
+ );
+
+ const onExceptionTypeFilter = useCallback(
+ (value, record: Exception): boolean => {
+ if (record.exceptionType && typeof value === 'string') {
+ return record.exceptionType.toLowerCase().includes(value.toLowerCase());
+ }
+ return false;
+ },
+ [],
+ );
+
+ const onApplicationTypeFilter = useCallback(
+ (value, record: Exception): boolean => {
+ if (record.serviceName && typeof value === 'string') {
+ return record.serviceName.toLowerCase().includes(value.toLowerCase());
+ }
+ return false;
+ },
+ [],
+ );
+
+ const getFilter = useCallback(
+ (
+ onFilter: ColumnType['onFilter'],
+ placeholder: string,
+ ): ColumnType => ({
+ onFilter,
+ filterIcon,
+ filterDropdown: ({ confirm, selectedKeys, setSelectedKeys }): JSX.Element =>
+ filterDropdownWrapper({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ placeholder,
+ }),
+ }),
+ [filterIcon, filterDropdownWrapper],
+ );
+
const columns: ColumnsType = [
{
title: 'Exception Type',
dataIndex: 'exceptionType',
key: 'exceptionType',
+ ...getFilter(onExceptionTypeFilter, 'Search By Exception'),
render: (value, record): JSX.Element => (
value}>