GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 10:49:03 +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 { @media only screen and (min-width: 768px) {
white-space: normal; .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 React from "react";
import { Table, Button } from "antd"; import { Table, Button, Tooltip } from "antd";
import { connect } from "react-redux"; import { connect } from "react-redux";
import styled from "styled-components"; import styled from "styled-components";
import { useHistory, useParams } from "react-router-dom"; import { useHistory, useParams } from "react-router-dom";
@ -12,8 +12,11 @@ import "./TopEndpointsTable.css";
const Wrapper = styled.div` const Wrapper = styled.div`
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 20px; padding-left: 8px;
padding-right: 20px; padding-right: 8px;
@media only screen and (max-width: 767px) {
padding: 0;
}
.ant-table table { .ant-table table {
font-size: 12px; font-size: 12px;
} }
@ -23,6 +26,9 @@ const Wrapper = styled.div`
.ant-table-thead > tr > th { .ant-table-thead > tr > th {
padding: 10px; padding: 10px;
} }
.ant-table-column-sorters {
padding: 6px;
}
`; `;
interface TopEndpointsTableProps { interface TopEndpointsTableProps {
@ -59,13 +65,15 @@ const _TopEndpointsTable = (props: TopEndpointsTableProps) => {
key: "name", key: "name",
render: (text: string) => ( render: (text: string) => (
<Button <Tooltip placement="topLeft" title={text}>
className="topEndpointsButton" <Button
type="link" className="topEndpointsButton"
onClick={() => handleOnClick(text)} type="link"
> onClick={() => handleOnClick(text)}
{text} >
</Button> {text}
</Button>
</Tooltip>
), ),
}, },
{ {