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

Merge pull request #958 from palash-signoz/style-trace-search

Browse Source 
bug: style-trace-search is fixed
This commit is contained in:
palash-signoz 2022-04-07 11:03:40 +05:30 committed by GitHub
commit 71cb70c62c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,6 +32,7 @@ function TagValue(props: TagValueProps): JSX.Element {
return ( return (
<SelectComponent <SelectComponent
value={selectedValues[0]}
onSelect={(value: unknown): void => { onSelect={(value: unknown): void => {
if (typeof value === 'string') { if (typeof value === 'string') {
setLocalSelectedTags((tags) => [ setLocalSelectedTags((tags) => [

18
frontend/src/container/Trace/Search/AllTags/index.tsx
View File

@ -116,14 +116,16 @@ function AllTags({
</Wrapper> </Wrapper>
<ButtonContainer> <ButtonContainer>
<Button onClick={onResetHandler}>Reset</Button> <Space align="start">
<Button <Button onClick={onResetHandler}>Reset</Button>
type="primary" <Button
onClick={onRunQueryHandler} type="primary"
icon={<CaretRightFilled />} onClick={onRunQueryHandler}
> icon={<CaretRightFilled />}
Run Query >
</Button> Run Query
</Button>
</Space>
</ButtonContainer> </ButtonContainer>
</Container> </Container>
); );

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

@ -6,7 +6,7 @@ export const Container = styled(Card)`
min-height: 20vh; min-height: 20vh;
width: 100%; width: 100%;
z-index: 2; z-index: 2;
position: absolute; position: absolute !important;
.ant-card-body { .ant-card-body {
padding-bottom: 0; padding-bottom: 0;
@ -35,20 +35,16 @@ export const Wrapper = styled.div`
} }
`; `;
export const ButtonContainer = styled.div` export const ButtonContainer = styled(Card)`
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
background-color: #303030;
padding-top: 11px;
padding-bottom: 11px;
padding-right: 38.01px;
margin-top: 1rem; padding-top: 11px !important;
padding-bottom: 11px !important;
padding-right: 38.01px !important;
> button:nth-child(1) { margin-top: 1rem !important;
margin-right: 1rem;
}
`; `;
export const CurrentTagsContainer = styled.div` export const CurrentTagsContainer = styled.div`

63
frontend/src/container/Trace/Search/index.tsx
View File

@ -1,5 +1,4 @@
import { CaretRightFilled } from '@ant-design/icons'; import { CaretRightFilled } from '@ant-design/icons';
import { Space } from 'antd';
import useClickOutside from 'hooks/useClickOutside'; import useClickOutside from 'hooks/useClickOutside';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { connect, useDispatch, useSelector } from 'react-redux'; import { connect, useDispatch, useSelector } from 'react-redux';
@ -113,41 +112,39 @@ function Search({
}; };
return ( return (
<Space direction="vertical" style={{ width: '100%' }}> <Container ref={tagRef}>
<Container ref={tagRef}> <SearchComponent
<SearchComponent onChange={(event): void => onChangeHandler(event.target.value)}
onChange={(event): void => onChangeHandler(event.target.value)} value={value}
value={value} allowClear
allowClear disabled={traces.filterLoading}
disabled={traces.filterLoading} onFocus={onFocusHandler}
onFocus={onFocusHandler} placeholder="Click to filter by tags"
placeholder="Click to filter by tags" type="search"
type="search" enterButton={<CaretRightFilled />}
enterButton={<CaretRightFilled />} onSearch={(string): void => {
onSearch={(string): void => { if (string.length === 0) {
if (string.length === 0) { updateTagVisibility(false);
updateTagVisibility(false); updateFilters([]);
updateFilters([]); return;
return; }
}
const { isError, payload } = parseQueryToTags(string); const { isError, payload } = parseQueryToTags(string);
if (isError) { if (isError) {
updateTagIsError(true); updateTagIsError(true);
} else { } else {
updateTagIsError(false); updateTagIsError(false);
updateTagVisibility(false); updateTagVisibility(false);
updateFilters(payload); updateFilters(payload);
} }
}} }}
/> />
{traces.isTagModalOpen && ( {traces.isTagModalOpen && (
<Tags updateFilters={updateFilters} onChangeHandler={onChangeHandler} /> <Tags updateFilters={updateFilters} onChangeHandler={onChangeHandler} />
)} )}
</Container> </Container>
</Space>
); );
} }

1
frontend/src/container/Trace/Search/styles.ts
View File

@ -6,6 +6,7 @@ const { Search } = Input;
export const Container = styled.div` export const Container = styled.div`
display: flex; display: flex;
position: relative; position: relative;
width: 100%;
`; `;
export const SearchComponent = styled(Search)` export const SearchComponent = styled(Search)`