GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-16 11:35:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ui updates - traces explorer (#4555)

Browse Source
This commit is contained in:
Yunus M 2024-02-15 14:38:21 +05:30 committed by GitHub
parent 633b551e5d
commit 4e75479831
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 58 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/container/LogsContextList/LogsContextList.styles.scss
View File

@ -3,34 +3,30 @@
.show-more-button { .show-more-button {
position: absolute; position: absolute;
z-index: 1;
opacity: 1; opacity: 1;
z-index: 1;
cursor: pointer;
&.up { &.up {
top: 0; top: -1px;
left: -1px;
} }
&.down { &.down {
bottom: 0; bottom: -1px;
left: -1px;
}
&.disabled {
cursor: not-allowed;
} }
} }
.virtuoso-list { .virtuoso-list {
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0.1rem; width: 0.3rem;
height: 0.1rem; height: 0.3rem;
}
}
&.logs-context-list-asc {
.virtuoso-list {
padding-top: 16px;
}
}
&.logs-context-list-desc {
.virtuoso-list {
padding-bottom: 16px;
} }
} }
} }

44
frontend/src/container/LogsContextList/ShowButton.styles.scss
View File

@ -1,31 +1,31 @@
.show-more-button { .show-more-button {
background-color: var(--bg-slate-400); background-color: var(--bg-slate-400);
color: var(--bg-vanilla-100); color: var(--bg-vanilla-100);
display: flex; display: flex;
padding: 4px 8px; padding: 4px 8px;
align-items: center; align-items: center;
gap: 3px; gap: 3px;
border: none; border: none;
margin: 0; margin: 0;
} }
.show-more-button { .show-more-button {
&.disabled { &.disabled {
background-color: var(--bg-slate-200); background-color: var(--bg-slate-200);
color: var(--bg-vanilla-400); color: var(--bg-vanilla-400);
} }
} }
.lightMode { .lightMode {
.show-more-button { .show-more-button {
background-color: var(--bg-vanilla-300); background-color: var(--bg-vanilla-300);
color: var(--bg-slate-400); color: var(--bg-slate-400);
} }
.show-more-button { .show-more-button {
&.disabled { &.disabled {
background-color: var(--bg-vanilla-300); background-color: var(--bg-vanilla-300);
color: var(--bg-vanilla-400); color: var(--bg-vanilla-400);
} }
} }
} }

2
frontend/src/container/LogsContextList/ShowButton.tsx
View File

@ -41,7 +41,7 @@ function ShowButton({
onClick={onClick} onClick={onClick}
icon={getIcons()} icon={getIcons()}
className={cx( className={cx(
'show-more-button', 'show-more-button periscope-btn',
order === ORDERBY_FILTERS.ASC ? 'up' : 'down', order === ORDERBY_FILTERS.ASC ? 'up' : 'down',
isDisabled && 'disabled', isDisabled && 'disabled',
)} )}

1
frontend/src/container/TracesExplorer/Controls/styles.ts
View File

@ -5,4 +5,5 @@ export const Container = styled.div`
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 0.5rem; gap: 0.5rem;
margin: 4px 0;
`; `;

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

@ -2,6 +2,12 @@
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center; align-items: center;
margin: 1rem 0 0.5rem 0; margin: 8px 16px;
gap: 8px; gap: 8px;
} }
.traces-explorer-views {
.ant-tabs-tabpane {
padding: 0 8px;
}
}

2
frontend/src/pages/TracesExplorer/index.tsx
View File

@ -192,7 +192,7 @@ function TracesExplorer(): JSX.Element {
<QuerySection /> <QuerySection />
</ExplorerCard> </ExplorerCard>
<Container> <Container className="traces-explorer-views">
<ActionsWrapper> <ActionsWrapper>
<ExportPanel <ExportPanel
query={exportDefaultQuery} query={exportDefaultQuery}

12
frontend/src/pages/TracesModulePage/TracesModulePage.styles.scss
View File

@ -4,7 +4,7 @@
margin-bottom: 0px; margin-bottom: 0px;
&::before { &::before {
border-bottom: none !important; border-bottom: 1px solid var(--bg-slate-400) !important;
} }
} }
@ -15,3 +15,13 @@
gap: 8px; gap: 8px;
} }
} }
.lightMode {
.traces-module-container {
.ant-tabs-nav {
&::before {
border-bottom: 1px solid var(--bg-vanilla-300) !important;
}
}
}
}

2
frontend/src/pages/TracesModulePage/TracesModulePage.tsx
View File

@ -14,7 +14,7 @@ function TracesModulePage(): JSX.Element {
return ( return (
<div className="traces-module-container"> <div className="traces-module-container">
<RouteTab routes={routes} activeKey={pathname} history={history} />; <RouteTab routes={routes} activeKey={pathname} history={history} />
</div> </div>
); );
} }