From 286d46edbe470012743b2e9dc9ff3ffdd10f38ac Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Wed, 18 May 2022 22:22:12 +0530
Subject: [PATCH] feat: topend point table is fixed

---
 .../MetricsApplication/Tabs/Application.tsx       | 14 +++++++-------
 .../container/MetricsApplication/Tabs/styles.ts   |  5 -----
 .../MetricsApplication/TopEndpointsTable.tsx      | 15 +++++----------
 3 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/frontend/src/container/MetricsApplication/Tabs/Application.tsx b/frontend/src/container/MetricsApplication/Tabs/Application.tsx
index b7c44efac4..fbc1a855ac 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Application.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Application.tsx
@@ -16,7 +16,7 @@ import MetricReducer from 'types/reducer/metrics';
 
 import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
 import TopEndpointsTable from '../TopEndpointsTable';
-import { Button, TableContainerCard } from './styles';
+import { Button } from './styles';
 
 function Application({ getWidget }: DashboardProps): JSX.Element {
 	const { servicename } = useParams<{ servicename?: string }>();
@@ -48,7 +48,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 		);
 	};
 
-	const onClickhandler = async (
+	const onClickHandler = async (
 		event: ChartEvent,
 		elements: ActiveElement[],
 		chart: Chart,
@@ -119,7 +119,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 						<GraphContainer>
 							<Graph
 								onClickHandler={(ChartEvent, activeElements, chart, data): void => {
-									onClickhandler(ChartEvent, activeElements, chart, data, 'Application');
+									onClickHandler(ChartEvent, activeElements, chart, data, 'Application');
 								}}
 								name="application_latency"
 								type="line"
@@ -189,7 +189,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 								name="request_per_sec"
 								fullViewOptions={false}
 								onClickHandler={(event, element, chart, data): void => {
-									onClickhandler(event, element, chart, data, 'Request');
+									onClickHandler(event, element, chart, data, 'Request');
 								}}
 								widget={getWidget([
 									{
@@ -223,7 +223,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 								name="error_percentage_%"
 								fullViewOptions={false}
 								onClickHandler={(ChartEvent, activeElements, chart, data): void => {
-									onClickhandler(ChartEvent, activeElements, chart, data, 'Error');
+									onClickHandler(ChartEvent, activeElements, chart, data, 'Error');
 								}}
 								widget={getWidget([
 									{
@@ -238,9 +238,9 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 				</Col>
 
 				<Col span={12}>
-					<TableContainerCard>
+					<Card>
 						<TopEndpointsTable data={topEndPoints} />
-					</TableContainerCard>
+					</Card>
 				</Col>
 			</Row>
 		</>
diff --git a/frontend/src/container/MetricsApplication/Tabs/styles.ts b/frontend/src/container/MetricsApplication/Tabs/styles.ts
index bf89345063..017ab95419 100644
--- a/frontend/src/container/MetricsApplication/Tabs/styles.ts
+++ b/frontend/src/container/MetricsApplication/Tabs/styles.ts
@@ -1,8 +1,6 @@
 import { Button as ButtonComponent } from 'antd';
 import styled from 'styled-components';
 
-import { Card } from '../styles';
-
 export const Button = styled(ButtonComponent)`
 	&&& {
 		position: absolute;
@@ -10,6 +8,3 @@ export const Button = styled(ButtonComponent)`
 		display: none;
 	}
 `;
-export const TableContainerCard = styled(Card)`
-	overflow-x: auto;
-`;
diff --git a/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx b/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx
index 9eb189e0ba..5ede2d9c6a 100644
--- a/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx
+++ b/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx
@@ -1,4 +1,4 @@
-import { Button, Table, Tooltip } from 'antd';
+import { Table, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -51,17 +51,12 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
 			title: 'Name',
 			dataIndex: 'name',
 			key: 'name',
-
-			// eslint-disable-next-line react/display-name
+			ellipsis: true,
 			render: (text: string): JSX.Element => (
 				<Tooltip placement="topLeft" title={text}>
-					<Button
-						className="topEndpointsButton"
-						type="link"
-						onClick={(): void => handleOnClick(text)}
-					>
+					<Typography.Link onClick={(): void => handleOnClick(text)}>
 						{text}
-					</Button>
+					</Typography.Link>
 				</Tooltip>
 			),
 		},
@@ -101,9 +96,9 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
 			title={(): string => {
 				return 'Top Endpoints';
 			}}
+			tableLayout="fixed"
 			dataSource={data}
 			columns={columns}
-			pagination={false}
 			rowKey="name"
 		/>
 	);