GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 18:59:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve traces table ux by making the table scrollable (#6423)

Browse Source 
* fix: improve traces table ux by making the table scrollable

* chore: remove explicit scroll.x and modify the existing scroll.x from true to max-content

* fix(Traces Explorer): make trace explorer card full-width when collapsed, resizable when expanded
This commit is contained in:
Shaheer Kochai 2024-12-16 11:30:40 +04:30 committed by GitHub
parent 9a1cd65b73
commit b29359dee0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/container/TracesExplorer/ListView/index.tsx
View File

@ -154,7 +154,7 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element {
<ResizeTable <ResizeTable
tableLayout="fixed" tableLayout="fixed"
pagination={false} pagination={false}
scroll={{ x: true }} scroll={{ x: 'max-content' }}
loading={isFetching} loading={isFetching}
style={tableStyles} style={tableStyles}
dataSource={transformedQueryTableData} dataSource={transformedQueryTableData}

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

@ -59,6 +59,9 @@
border-color: var(--bg-slate-400); border-color: var(--bg-slate-400);
} }
.trace-explorer.filters-expanded {
width: calc(100% - 260px);
}
} }
.lightMode { .lightMode {

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

@ -5,6 +5,7 @@ import * as Sentry from '@sentry/react';
import { Button, Card, Tabs, Tooltip } from 'antd'; import { Button, Card, Tabs, Tooltip } from 'antd';
import logEvent from 'api/common/logEvent'; import logEvent from 'api/common/logEvent';
import axios from 'axios'; import axios from 'axios';
import cx from 'classnames';
import ExplorerCard from 'components/ExplorerCard/ExplorerCard'; import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
import { LOCALSTORAGE } from 'constants/localStorage'; import { LOCALSTORAGE } from 'constants/localStorage';
import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes'; import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
@ -244,7 +245,11 @@ function TracesExplorer(): JSX.Element {
<Card className="filter" hidden={!isOpen}> <Card className="filter" hidden={!isOpen}>
<Filter setOpen={setOpen} /> <Filter setOpen={setOpen} />
</Card> </Card>
<Card className="trace-explorer"> <Card
className={cx('trace-explorer', {
'filters-expanded': isOpen,
})}
>
<div className={`trace-explorer-header ${isOpen ? 'single-child' : ''}`}> <div className={`trace-explorer-header ${isOpen ? 'single-child' : ''}`}>
{!isOpen && ( {!isOpen && (
<Tooltip title="Expand filters" placement="right"> <Tooltip title="Expand filters" placement="right">