GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 14:58:57 +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 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>
</>

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

@ -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;
`;

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 { 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"
/>
);