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

Merge pull request #1158 from palash-signoz/391-top-end-points

Browse Source 
feat: top end point table is fixed
This commit is contained in:
palash-signoz 2022-05-19 13:30:07 +05:30 committed by GitHub
commit 3f37fe4d60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/container/MetricsApplication/Tabs/Application.tsx
View File

@ -16,7 +16,7 @@ import MetricReducer from 'types/reducer/metrics';
import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles'; import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
import TopEndpointsTable from '../TopEndpointsTable'; import TopEndpointsTable from '../TopEndpointsTable';
import { Button, TableContainerCard } from './styles'; import { Button } from './styles';
function Application({ getWidget }: DashboardProps): JSX.Element { function Application({ getWidget }: DashboardProps): JSX.Element {
const { servicename } = useParams<{ servicename?: string }>(); const { servicename } = useParams<{ servicename?: string }>();
@ -48,7 +48,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
); );
}; };
const onClickhandler = async ( const onClickHandler = async (
event: ChartEvent, event: ChartEvent,
elements: ActiveElement[], elements: ActiveElement[],
chart: Chart, chart: Chart,
@ -119,7 +119,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
<GraphContainer> <GraphContainer>
<Graph <Graph
onClickHandler={(ChartEvent, activeElements, chart, data): void => { onClickHandler={(ChartEvent, activeElements, chart, data): void => {
onClickhandler(ChartEvent, activeElements, chart, data, 'Application'); onClickHandler(ChartEvent, activeElements, chart, data, 'Application');
}} }}
name="application_latency" name="application_latency"
type="line" type="line"
@ -189,7 +189,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
name="request_per_sec" name="request_per_sec"
fullViewOptions={false} fullViewOptions={false}
onClickHandler={(event, element, chart, data): void => { onClickHandler={(event, element, chart, data): void => {
onClickhandler(event, element, chart, data, 'Request'); onClickHandler(event, element, chart, data, 'Request');
}} }}
widget={getWidget([ widget={getWidget([
{ {
@ -223,7 +223,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
name="error_percentage_%" name="error_percentage_%"
fullViewOptions={false} fullViewOptions={false}
onClickHandler={(ChartEvent, activeElements, chart, data): void => { onClickHandler={(ChartEvent, activeElements, chart, data): void => {
onClickhandler(ChartEvent, activeElements, chart, data, 'Error'); onClickHandler(ChartEvent, activeElements, chart, data, 'Error');
}} }}
widget={getWidget([ widget={getWidget([
{ {
@ -238,9 +238,9 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
</Col> </Col>
<Col span={12}> <Col span={12}>
<TableContainerCard> <Card>
<TopEndpointsTable data={topEndPoints} /> <TopEndpointsTable data={topEndPoints} />
</TableContainerCard> </Card>
</Col> </Col>
</Row> </Row>
</> </>

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

@ -1,8 +1,6 @@
import { Button as ButtonComponent } from 'antd'; import { Button as ButtonComponent } from 'antd';
import styled from 'styled-components'; import styled from 'styled-components';
import { Card } from '../styles';
export const Button = styled(ButtonComponent)` export const Button = styled(ButtonComponent)`
&&& { &&& {
position: absolute; position: absolute;
@ -10,6 +8,3 @@ export const Button = styled(ButtonComponent)`
display: none; display: none;
} }
`; `;
export const TableContainerCard = styled(Card)`
overflow-x: auto;
`;

15
frontend/src/container/MetricsApplication/TopEndpointsTable.tsx
View File

@ -1,4 +1,4 @@
import { Button, Table, Tooltip } from 'antd'; import { Table, Tooltip, Typography } from 'antd';
import { ColumnsType } from 'antd/lib/table'; import { ColumnsType } from 'antd/lib/table';
import { METRICS_PAGE_QUERY_PARAM } from 'constants/query'; import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
@ -51,17 +51,12 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
title: 'Name', title: 'Name',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
ellipsis: true,
// eslint-disable-next-line react/display-name
render: (text: string): JSX.Element => ( render: (text: string): JSX.Element => (
<Tooltip placement="topLeft" title={text}> <Tooltip placement="topLeft" title={text}>
<Button <Typography.Link onClick={(): void => handleOnClick(text)}>
className="topEndpointsButton"
type="link"
onClick={(): void => handleOnClick(text)}
>
{text} {text}
</Button> </Typography.Link>
</Tooltip> </Tooltip>
), ),
}, },
@ -101,9 +96,9 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
title={(): string => { title={(): string => {
return 'Top Endpoints'; return 'Top Endpoints';
}} }}
tableLayout="fixed"
dataSource={data} dataSource={data}
columns={columns} columns={columns}
pagination={false}
rowKey="name" rowKey="name"
/> />
); );