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

feat(css): add tooltip to button hover & fix css

Browse Source
This commit is contained in:
Nidhi Tandon 2021-05-24 21:48:01 +05:30
parent 4173258d0a
commit 239c2cb859
2 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/modules/Metrics/TopEndpointsTable.css
View File

@ -1,3 +1,12 @@
.topEndpointsButton {
white-space: normal;
@media only screen and (min-width: 768px) {
.topEndpointsButton {
white-space: nowrap;
padding: 0;
}
.topEndpointsButton span {
text-overflow: ellipsis;
overflow: hidden;
max-width: 120px;
}
}

28
frontend/src/modules/Metrics/TopEndpointsTable.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { Table, Button } from "antd";
import { Table, Button, Tooltip } from "antd";
import { connect } from "react-redux";
import styled from "styled-components";
import { useHistory, useParams } from "react-router-dom";
@ -12,8 +12,11 @@ import "./TopEndpointsTable.css";
const Wrapper = styled.div`
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-left: 8px;
padding-right: 8px;
@media only screen and (max-width: 767px) {
padding: 0;
}
.ant-table table {
font-size: 12px;
}
@ -23,6 +26,9 @@ const Wrapper = styled.div`
.ant-table-thead > tr > th {
padding: 10px;
}
.ant-table-column-sorters {
padding: 6px;
}
`;
interface TopEndpointsTableProps {
@ -59,13 +65,15 @@ const _TopEndpointsTable = (props: TopEndpointsTableProps) => {
key: "name",
render: (text: string) => (
<Button
className="topEndpointsButton"
type="link"
onClick={() => handleOnClick(text)}
>
{text}
</Button>
<Tooltip placement="topLeft" title={text}>
<Button
className="topEndpointsButton"
type="link"
onClick={() => handleOnClick(text)}
>
{text}
</Button>
</Tooltip>
),
},
{