GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-31 21:02:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: trace-filter style and light mode fixes (#5142)

Browse Source 
* feat: trace-filter style and light mode fixes

* fix: removed duration option passed as undefined

* feat: fixed the debounced function on attribute values API call
This commit is contained in:
SagarRajput-7 2024-06-05 17:51:59 +05:30 committed by GitHub
parent 309ed3d1de
commit c703f5290a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/pages/TracesExplorer/Filter/DurationSection.tsx
View File

@ -66,13 +66,9 @@ export function DurationSection(props: DurationProps): JSX.Element {
setPreMax(max); setPreMax(max);
}; };
const debouncedFunction = useDebouncedFn( const debouncedFunction = useDebouncedFn((min, max) => {
(min, max) => { updateDurationFilter(min as string, max as string);
updateDurationFilter(min as string, max as string); }, 1500);
},
1500,
undefined,
);
const onChangeMaxHandler: ChangeEventHandler<HTMLInputElement> = (event) => { const onChangeMaxHandler: ChangeEventHandler<HTMLInputElement> = (event) => {
const { value } = event.target; const { value } = event.target;

5
frontend/src/pages/TracesExplorer/Filter/Filter.styles.scss
View File

@ -182,9 +182,14 @@
.arrow-icon { .arrow-icon {
background-color: var(--bg-vanilla-100); background-color: var(--bg-vanilla-100);
} }
.sync-icon {
background-color: var(--bg-vanilla-100);
}
} }
.section-card { .section-card {
background-color: var(--bg-vanilla-100); background-color: var(--bg-vanilla-100);
box-shadow: none;
} }
} }

12
frontend/src/pages/TracesExplorer/Filter/SectionContent.tsx
View File

@ -2,9 +2,8 @@ import './Filter.styles.scss';
import { Button, Card, Checkbox, Input, Tooltip } from 'antd'; import { Button, Card, Checkbox, Input, Tooltip } from 'antd';
import { CheckboxChangeEvent } from 'antd/es/checkbox'; import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
import { ParaGraph } from 'container/Trace/Filters/Panel/PanelBody/Common/styles'; import { ParaGraph } from 'container/Trace/Filters/Panel/PanelBody/Common/styles';
import useDebounce from 'hooks/useDebounce'; import useDebouncedFn from 'hooks/useDebouncedFunction';
import { defaultTo, isEmpty } from 'lodash-es'; import { defaultTo, isEmpty } from 'lodash-es';
import { import {
ChangeEvent, ChangeEvent,
@ -36,6 +35,7 @@ export function SectionBody(props: SectionBodyProps): JSX.Element {
const { type, setSelectedFilters, selectedFilters, handleRun } = props; const { type, setSelectedFilters, selectedFilters, handleRun } = props;
const [visibleItemsCount, setVisibleItemsCount] = useState(10); const [visibleItemsCount, setVisibleItemsCount] = useState(10);
const [searchFilter, setSearchFilter] = useState<string>(''); const [searchFilter, setSearchFilter] = useState<string>('');
const [searchText, setSearchText] = useState<string>('');
const [checkedItems, setCheckedItems] = useState<string[]>( const [checkedItems, setCheckedItems] = useState<string[]>(
defaultTo(selectedFilters?.[type]?.values as string[], []), defaultTo(selectedFilters?.[type]?.values as string[], []),
); );
@ -48,11 +48,14 @@ export function SectionBody(props: SectionBodyProps): JSX.Element {
setCheckedItems(defaultTo(selectedFilters?.[type]?.values as string[], [])), setCheckedItems(defaultTo(selectedFilters?.[type]?.values as string[], [])),
[selectedFilters, type], [selectedFilters, type],
); );
const debouncedSearchText = useDebounce(searchFilter, DEBOUNCE_DELAY);
const handleDebouncedSearch = useDebouncedFn((searchText): void => {
setSearchText(searchText as string);
}, 500);
const { isFetching: fetching, keys, results: res } = useGetAggregateValues({ const { isFetching: fetching, keys, results: res } = useGetAggregateValues({
value: type, value: type,
searchText: debouncedSearchText, searchText,
}); });
useEffect(() => { useEffect(() => {
@ -111,6 +114,7 @@ export function SectionBody(props: SectionBodyProps): JSX.Element {
const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => { const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
const inputValue = e.target.value; const inputValue = e.target.value;
setSearchFilter(inputValue); setSearchFilter(inputValue);
handleDebouncedSearch(inputValue || '');
}; };
return ( return (

13
frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss
View File

@ -64,7 +64,7 @@
.trace-explorer-page { .trace-explorer-page {
.filter { .filter {
border: 1px solid var(--bg-vanilla-200); border: 1px solid var(--bg-vanilla-200);
background-color: var(--bg-vanilla-200); background-color: var(--bg-vanilla-100);
} }
.trace-explorer { .trace-explorer {
@ -79,4 +79,15 @@
border-color: var(--bg-vanilla-200); border-color: var(--bg-vanilla-200);
} }
} }
.trace-explorer-header {
.filter-outlined-btn {
border-radius: 0px 2px 2px 0px;
border-top: 1px solid var(--bg-vanilla-200);
border-right: 1px solid var(--bg-vanilla-200);
border-bottom: 1px solid var(--bg-vanilla-200);
background: var(--bg-vanilla-100);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0);
}
}
} }