GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-10-14 10:51:28 +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 { Skeleton, Typography } from 'antd';
import cx from 'classnames'; import cx from 'classnames';
import { ToggleGraphProps } from 'components/Graph/types'; import { ToggleGraphProps } from 'components/Graph/types';

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

@ -32,19 +32,13 @@ import {
errorPercentage, errorPercentage,
operationPerSec, operationPerSec,
} from '../MetricsPageQueries/OverviewQueries'; } from '../MetricsPageQueries/OverviewQueries';
import { import { Col, ColApDexContainer, ColErrorContainer, Row } from '../styles';
Card,
Col,
ColApDexContainer,
ColErrorContainer,
Row,
} from '../styles';
import ApDex from './Overview/ApDex'; import ApDex from './Overview/ApDex';
import ServiceOverview from './Overview/ServiceOverview'; import ServiceOverview from './Overview/ServiceOverview';
import TopLevelOperation from './Overview/TopLevelOperations'; import TopLevelOperation from './Overview/TopLevelOperations';
import TopOperation from './Overview/TopOperation'; import TopOperation from './Overview/TopOperation';
import TopOperationMetrics from './Overview/TopOperationMetrics'; import TopOperationMetrics from './Overview/TopOperationMetrics';
import { Button } from './styles'; import { Button, Card } from './styles';
import { IServiceName } from './types'; import { IServiceName } from './types';
import { import {
handleNonInQueryRange, handleNonInQueryRange,
@ -276,7 +270,7 @@ function Application(): JSX.Element {
<Col span={12}> <Col span={12}>
<Card> <Card>
{isSpanMetricEnabled ? <TopOperationMetrics /> : <TopOperation />} {isSpanMetricEnabled ? <TopOperationMetrics /> : <TopOperation />}{' '}
</Card> </Card>
</Col> </Col>
</Row> </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'; import styled from 'styled-components';
export const Button = styled(ButtonComponent)` export const Button = styled(ButtonComponent)`
@ -8,3 +8,9 @@ export const Button = styled(ButtonComponent)`
display: none; 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)` export const Card = styled(CardComponent)`
&&& { &&& {
padding: 10px; height: 40vh;
overflow: hidden;
} }
.ant-card-body { .ant-card-body {
height: calc(100% - 40px);
padding: 0; padding: 0;
min-height: 40vh;
} }
`; `;
@ -38,7 +39,8 @@ export const ColErrorContainer = styled(ColComponent)`
`; `;
export const GraphContainer = styled.div` export const GraphContainer = styled.div`
height: 40vh; min-height: calc(40vh - 40px);
height: calc(100% - 40px);
`; `;
export const GraphTitle = styled(Typography)` export const GraphTitle = styled(Typography)`