GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-30 23:52: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);
};
const debouncedFunction = useDebouncedFn(
(min, max) => {
updateDurationFilter(min as string, max as string);
},
1500,
undefined,
);
const debouncedFunction = useDebouncedFn((min, max) => {
updateDurationFilter(min as string, max as string);
}, 1500);
const onChangeMaxHandler: ChangeEventHandler<HTMLInputElement> = (event) => {
const { value } = event.target;

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

@ -182,9 +182,14 @@
.arrow-icon {
background-color: var(--bg-vanilla-100);
}
.sync-icon {
background-color: var(--bg-vanilla-100);
}
}
.section-card {
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 { CheckboxChangeEvent } from 'antd/es/checkbox';
import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
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 {
ChangeEvent,
@ -36,6 +35,7 @@ export function SectionBody(props: SectionBodyProps): JSX.Element {
const { type, setSelectedFilters, selectedFilters, handleRun } = props;
const [visibleItemsCount, setVisibleItemsCount] = useState(10);
const [searchFilter, setSearchFilter] = useState<string>('');
const [searchText, setSearchText] = useState<string>('');
const [checkedItems, setCheckedItems] = useState<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[], [])),
[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({
value: type,
searchText: debouncedSearchText,
searchText,
});
useEffect(() => {
@ -111,6 +114,7 @@ export function SectionBody(props: SectionBodyProps): JSX.Element {
const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
const inputValue = e.target.value;
setSearchFilter(inputValue);
handleDebouncedSearch(inputValue || '');
};
return (

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

@ -64,7 +64,7 @@
.trace-explorer-page {
.filter {
border: 1px solid var(--bg-vanilla-200);
background-color: var(--bg-vanilla-200);
background-color: var(--bg-vanilla-100);
}
.trace-explorer {
@ -79,4 +79,15 @@
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);
}
}
}