fix: update from typography link to react router dom link component to maintain global state (#5279)

This commit is contained in:
Yunus M 2024-06-20 11:34:27 +05:30 committed by GitHub
parent f3c2fb0246
commit 64e06ab3f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 6 deletions

View File

@ -1,7 +1,17 @@
.span-details-sider { .span-details-sider {
padding-top: 16px;
::-webkit-scrollbar {
width: 0.2em;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(18, 18, 18, 0.3);
}
&.dark { &.dark {
.ant-layout-sider-trigger { .ant-layout-sider-trigger {
background-color: black !important; background-color: #0b0c0e !important;
} }
} }

View File

@ -246,13 +246,14 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
<Sider <Sider
className={cx('span-details-sider', isDarkMode ? 'dark' : 'light')} className={cx('span-details-sider', isDarkMode ? 'dark' : 'light')}
style={{ background: isDarkMode ? '#000' : '#fff' }} style={{ background: isDarkMode ? '#0b0c0e' : '#fff' }}
theme={isDarkMode ? 'dark' : 'light'} theme={isDarkMode ? 'dark' : 'light'}
collapsible collapsible
collapsed={collapsed} collapsed={collapsed}
reverseArrow reverseArrow
width={300} width={300}
collapsedWidth={40} collapsedWidth={40}
defaultCollapsed
onCollapse={(value): void => setCollapsed(value)} onCollapse={(value): void => setCollapsed(value)}
> >
{!collapsed && ( {!collapsed && (

View File

@ -3,7 +3,7 @@ import { ColumnsType } from 'antd/es/table';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util'; import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination'; import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
import { generatePath } from 'react-router-dom'; import { generatePath, Link } from 'react-router-dom';
import { ListItem } from 'types/api/widgets/getQuery'; import { ListItem } from 'types/api/widgets/getQuery';
export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS]; export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
@ -38,14 +38,14 @@ export const columns: ColumnsType<ListItem['data']> = [
dataIndex: 'traceID', dataIndex: 'traceID',
key: 'traceID', key: 'traceID',
render: (traceID: string): JSX.Element => ( render: (traceID: string): JSX.Element => (
<Typography.Link <Link
href={generatePath(ROUTES.TRACE_DETAIL, { to={generatePath(ROUTES.TRACE_DETAIL, {
id: traceID, id: traceID,
})} })}
data-testid="trace-id" data-testid="trace-id"
> >
{traceID} {traceID}
</Typography.Link> </Link>
), ),
}, },
]; ];