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

fix: overflow issue in service page graphs (#4300)

Browse Source
This commit is contained in:
Yunus M 2023-12-29 13:11:23 +05:30 committed by GitHub
parent cfc239e3c9
commit d688399b91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
View File

@ -1,3 +1,5 @@
import '../GridCardLayout.styles.scss';
import { Skeleton, Typography } from 'antd';
import cx from 'classnames';
import { ToggleGraphProps } from 'components/Graph/types';

12
frontend/src/container/MetricsApplication/Tabs/Overview.tsx
View File

@ -32,19 +32,13 @@ import {
errorPercentage,
operationPerSec,
} from '../MetricsPageQueries/OverviewQueries';
import {
Card,
Col,
ColApDexContainer,
ColErrorContainer,
Row,
} from '../styles';
import { Col, ColApDexContainer, ColErrorContainer, Row } from '../styles';
import ApDex from './Overview/ApDex';
import ServiceOverview from './Overview/ServiceOverview';
import TopLevelOperation from './Overview/TopLevelOperations';
import TopOperation from './Overview/TopOperation';
import TopOperationMetrics from './Overview/TopOperationMetrics';
import { Button } from './styles';
import { Button, Card } from './styles';
import { IServiceName } from './types';
import {
handleNonInQueryRange,
@ -276,7 +270,7 @@ function Application(): JSX.Element {
<Col span={12}>
<Card>
{isSpanMetricEnabled ? <TopOperationMetrics /> : <TopOperation />}
{isSpanMetricEnabled ? <TopOperationMetrics /> : <TopOperation />}{' '}
</Card>
</Col>
</Row>

8
frontend/src/container/MetricsApplication/Tabs/styles.ts
View File

@ -1,4 +1,4 @@
import { Button as ButtonComponent } from 'antd';
import { Button as ButtonComponent, Card as CardComponent } from 'antd';
import styled from 'styled-components';
export const Button = styled(ButtonComponent)`
@ -8,3 +8,9 @@ export const Button = styled(ButtonComponent)`
display: none;
}
`;
export const Card = styled(CardComponent)`
.ant-card-body {
padding: 10px;
}
`;

8
frontend/src/container/MetricsApplication/styles.ts
View File

@ -8,12 +8,13 @@ import styled from 'styled-components';
export const Card = styled(CardComponent)`
&&& {
padding: 10px;
height: 40vh;
overflow: hidden;
}
.ant-card-body {
height: calc(100% - 40px);
padding: 0;
min-height: 40vh;
}
`;
@ -38,7 +39,8 @@ export const ColErrorContainer = styled(ColComponent)`
`;
export const GraphContainer = styled.div`
height: 40vh;
min-height: calc(40vh - 40px);
height: calc(100% - 40px);
`;
export const GraphTitle = styled(Typography)`