GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 04:39:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: select tags key and value are updated to autocomplete filtering (#1267)

Browse Source 
* feat: select tags key and value are updated to autocomplete filtering
Co-authored-by: Palash gupta <palash@signoz.io>
This commit is contained in:
Palash 2022-06-23 19:11:19 +05:30 committed by GitHub
parent 4ed3295b80
commit 1ebf3dbf65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx
View File

@ -73,11 +73,24 @@ function TagsKey(props: TagsKeysProps): JSX.Element {
<AutoComplete
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={500}
style={{ width: 300 }}
options={options}
style={{ width: '100%' }}
value={selectedKey}
onChange={(value): void => {
if (options && options.find((option) => option.value === value)) {
allowClear
showSearch
options={options?.map((e) => ({
label: e.label?.toString(),
value: e.value,
}))}
filterOption={(inputValue, option): boolean =>
option?.label?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
}
onChange={(e): void => setSelectedKey(e)}
onSelect={(value: unknown): void => {
if (
typeof value === 'string' &&
options &&
options.find((option) => option.value === value)
) {
setSelectedKey(value);
setLocalSelectedTags((tags) => [
@ -89,8 +102,6 @@ function TagsKey(props: TagsKeysProps): JSX.Element {
},
...tags.slice(index + 1, tags.length),
]);
} else {
setSelectedKey('');
}
}}
>

31
frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx
View File

@ -1,13 +1,13 @@
import { Select } from 'antd';
import getTagValue from 'api/trace/getTagValue';
import React from 'react';
import React, { useState } from 'react';
import { useQuery } from 'react-query';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { GlobalReducer } from 'types/reducer/globalTime';
import { TraceReducer } from 'types/reducer/trace';
import { SelectComponent } from './styles';
import { AutoCompleteComponent } from './styles';
function TagValue(props: TagValueProps): JSX.Element {
const { tag, setLocalSelectedTags, index, tagKey } = props;
@ -16,6 +16,7 @@ function TagValue(props: TagValueProps): JSX.Element {
Operator: selectedOperator,
Values: selectedValues,
} = tag;
const [localValue, setLocalValue] = useState<string>(selectedValues[0]);
const globalReducer = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
@ -34,22 +35,38 @@ function TagValue(props: TagValueProps): JSX.Element {
);
return (
<SelectComponent
value={selectedValues[0]}
<AutoCompleteComponent
options={data?.payload?.map((e) => ({
label: e.tagValues,
value: e.tagValues,
}))}
allowClear
defaultOpen
showSearch
filterOption={(inputValue, option): boolean =>
option?.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
}
disabled={isLoading}
value={localValue}
onChange={(values): void => {
if (typeof values === 'string') {
setLocalValue(values);
}
}}
onSelect={(value: unknown): void => {
if (typeof value === 'string') {
setLocalValue(value);
setLocalSelectedTags((tags) => [
...tags.slice(0, index),
{
Key: selectedKey,
Operator: selectedOperator,
Values: [...selectedValues, value],
Values: [value],
},
...tags.slice(index + 1, tags.length),
]);
}
}}
loading={isLoading || false}
>
{data &&
data.payload &&
@ -58,7 +75,7 @@ function TagValue(props: TagValueProps): JSX.Element {
{suggestion.tagValues}
</Select.Option>
))}
</SelectComponent>
</AutoCompleteComponent>
);
}

21
frontend/src/container/Trace/Search/AllTags/Tag/styles.ts
View File

@ -1,4 +1,4 @@
import { Select, Space } from 'antd';
import { AutoComplete, Select, Space } from 'antd';
import styled from 'styled-components';
export const SpaceComponent = styled(Space)`
@ -9,18 +9,23 @@ export const SpaceComponent = styled(Space)`
export const SelectComponent = styled(Select)`
&&& {
min-width: 170px;
margin-right: 21.91px;
margin-left: 21.92px;
width: 100%;
}
`;
export const Container = styled.div`
export const Container = styled(Space)`
&&& {
display: flex;
margin-top: 1rem;
margin-bottom: 1rem;
}
.ant-space-item:not(:last-child, :nth-child(2)) {
width: 100%;
}
.ant-space-item:nth-child(2) {
width: 50%;
}
`;
export const IconContainer = styled.div`
@ -31,3 +36,9 @@ export const IconContainer = styled.div`
margin-left: 1.125rem;
`;
export const AutoCompleteComponent = styled(AutoComplete)`
&&& {
width: 100%;
}
`;