GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 17:35:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: added clear filters button (#1920)

Browse Source 
* fix: added clear filters button

* fix: removed console log


Co-authored-by: mindhash <mindhash@mindhashs-MacBook-Pro.local>
Co-authored-by: Pranay Prateek <pranay@signoz.io>
Co-authored-by: Ankit Nayan <ankit@signoz.io>
This commit is contained in:
Amol Umbark 2022-12-28 14:30:37 +05:30 committed by GitHub
parent 7f42b39684
commit 1916fc87b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Button, Row } from 'antd';
import React from 'react';
import { QueryFields } from './utils';
interface SearchFieldsActionBarProps {
fieldsQuery: QueryFields[][];
applyUpdate: () => void;
clearFilters: () => void;
}
export function SearchFieldsActionBar({
fieldsQuery,
applyUpdate,
clearFilters,
}: SearchFieldsActionBarProps): JSX.Element | null {
if (fieldsQuery.length === 0) {
return null;
}
return (
<Row style={{ justifyContent: 'flex-end', paddingRight: '2.4rem' }}>
<Button
type="default"
onClick={clearFilters}
style={{ marginRight: '1rem' }}
>
Clear Filter
</Button>
<Button type="primary" onClick={applyUpdate}>
Apply
</Button>
</Row>
);
}
export default SearchFieldsActionBar;

47
frontend/src/container/LogsSearchFilter/SearchFields/index.tsx
View File

@ -1,10 +1,11 @@
import { Button, notification, Row } from 'antd'; import { notification } from 'antd';
import { flatten } from 'lodash-es'; import { flatten } from 'lodash-es';
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
import { ILogsReducer } from 'types/reducer/logs'; import { ILogsReducer } from 'types/reducer/logs';
import { SearchFieldsActionBar } from './ActionBar';
import QueryBuilder from './QueryBuilder/QueryBuilder'; import QueryBuilder from './QueryBuilder/QueryBuilder';
import Suggestions from './Suggestions'; import Suggestions from './Suggestions';
import { import {
@ -68,24 +69,26 @@ function SearchFields({
[fieldsQuery, setFieldsQuery], [fieldsQuery, setFieldsQuery],
); );
const applyUpdate = useCallback( const applyUpdate = useCallback((): void => {
(e): void => { const flatParsedQuery = flatten(fieldsQuery);
e.preventDefault();
const flatParsedQuery = flatten(fieldsQuery);
if (!fieldsQueryIsvalid(flatParsedQuery)) { if (!fieldsQueryIsvalid(flatParsedQuery)) {
notification.error({ notification.error({
message: 'Please enter a valid criteria for each of the selected fields', message: 'Please enter a valid criteria for each of the selected fields',
}); });
return; return;
} }
keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery)); keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
updateParsedQuery(flatParsedQuery); updateParsedQuery(flatParsedQuery);
onDropDownToggleHandler(false)(); onDropDownToggleHandler(false)();
}, }, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery]);
[onDropDownToggleHandler, fieldsQuery, updateParsedQuery],
); const clearFilters = useCallback((): void => {
keyPrefixRef.current = hashCode(JSON.stringify([]));
updateParsedQuery([]);
onDropDownToggleHandler(false)();
}, [onDropDownToggleHandler, updateParsedQuery]);
return ( return (
<> <>
@ -96,11 +99,11 @@ function SearchFields({
fieldsQuery={fieldsQuery} fieldsQuery={fieldsQuery}
setFieldsQuery={setFieldsQuery} setFieldsQuery={setFieldsQuery}
/> />
<Row style={{ justifyContent: 'flex-end', paddingRight: '2.4rem' }}> <SearchFieldsActionBar
<Button type="primary" onClick={applyUpdate}> applyUpdate={applyUpdate}
Apply clearFilters={clearFilters}
</Button> fieldsQuery={fieldsQuery}
</Row> />
<Suggestions applySuggestion={addSuggestedField} /> <Suggestions applySuggestion={addSuggestedField} />
</> </>
); );