GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 23:35:58 +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 React, { useCallback, useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { ILogsReducer } from 'types/reducer/logs';
import { SearchFieldsActionBar } from './ActionBar';
import QueryBuilder from './QueryBuilder/QueryBuilder';
import Suggestions from './Suggestions';
import {
@ -68,24 +69,26 @@ function SearchFields({
[fieldsQuery, setFieldsQuery],
);
const applyUpdate = useCallback(
(e): void => {
e.preventDefault();
const flatParsedQuery = flatten(fieldsQuery);
const applyUpdate = useCallback((): void => {
const flatParsedQuery = flatten(fieldsQuery);
if (!fieldsQueryIsvalid(flatParsedQuery)) {
notification.error({
message: 'Please enter a valid criteria for each of the selected fields',
});
return;
}
if (!fieldsQueryIsvalid(flatParsedQuery)) {
notification.error({
message: 'Please enter a valid criteria for each of the selected fields',
});
return;
}
keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
updateParsedQuery(flatParsedQuery);
onDropDownToggleHandler(false)();
},
[onDropDownToggleHandler, fieldsQuery, updateParsedQuery],
);
keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
updateParsedQuery(flatParsedQuery);
onDropDownToggleHandler(false)();
}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery]);
const clearFilters = useCallback((): void => {
keyPrefixRef.current = hashCode(JSON.stringify([]));
updateParsedQuery([]);
onDropDownToggleHandler(false)();
}, [onDropDownToggleHandler, updateParsedQuery]);
return (
<>
@ -96,11 +99,11 @@ function SearchFields({
fieldsQuery={fieldsQuery}
setFieldsQuery={setFieldsQuery}
/>
<Row style={{ justifyContent: 'flex-end', paddingRight: '2.4rem' }}>
<Button type="primary" onClick={applyUpdate}>
Apply
</Button>
</Row>
<SearchFieldsActionBar
applyUpdate={applyUpdate}
clearFilters={clearFilters}
fieldsQuery={fieldsQuery}
/>
<Suggestions applySuggestion={addSuggestedField} />
</>
);