diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css index b9c6c264..be7b14a4 100644 --- a/client/src/components/Logs/Logs.css +++ b/client/src/components/Logs/Logs.css @@ -1,7 +1,26 @@ -.rt-tr-group .red { - background-color: #fff4f2; +.logs__row { + display: flex; + align-items: center; } -.ReactTable .rt-th, .ReactTable .rt-td { - overflow: visible; -} \ No newline at end of file +.logs__row--overflow { + overflow: hidden; +} + +.logs__row .list-unstyled { + margin-bottom: 0; + overflow: hidden; +} + +.logs__text, +.logs__row .list-unstyled li { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.logs__row .tooltip-custom { + top: 0; + margin-left: 0; + margin-right: 5px; +} diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js index ab0c43a5..86eeb0ae 100644 --- a/client/src/components/Logs/index.js +++ b/client/src/components/Logs/index.js @@ -5,9 +5,8 @@ import { saveAs } from 'file-saver/FileSaver'; import PageTitle from '../ui/PageTitle'; import Card from '../ui/Card'; import Loading from '../ui/Loading'; -import './Logs.css'; import Tooltip from '../ui/Tooltip'; - +import './Logs.css'; const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt'; @@ -37,14 +36,25 @@ class Logs extends Component { const columns = [{ Header: 'Time', accessor: 'time', - maxWidth: 150, + maxWidth: 110, }, { Header: 'Domain name', accessor: 'domain', + Cell: (row) => { + const response = row.value; + + return ( +
+
+ {response} +
+
+ ); + }, }, { Header: 'Type', accessor: 'type', - maxWidth: 100, + maxWidth: 60, }, { Header: 'Response', accessor: 'response', @@ -54,20 +64,25 @@ class Logs extends Component { const rule = row && row.original && row.original.rule; if (responses.length > 0) { const liNodes = responses.map((response, index) => - (
  • {response}
  • )); - return ( + (
  • {response}
  • )); + return ( +
    { this.renderTooltip(isFiltered, rule)} - ); +
    + ); } - return ( - { this.renderTooltip(isFiltered, rule) } - Empty - ); + return ( +
    + { this.renderTooltip(isFiltered, rule) } + Empty +
    + ); }, }, { Header: 'Client', accessor: 'client', + maxWidth: 250, }, ]; diff --git a/client/src/components/ui/ReactTable.css b/client/src/components/ui/ReactTable.css index fdedd9f2..79fa6421 100644 --- a/client/src/components/ui/ReactTable.css +++ b/client/src/components/ui/ReactTable.css @@ -1,4 +1,9 @@ .ReactTable .rt-th, .ReactTable .rt-td { padding: 10px 15px; + overflow: visible; +} + +.rt-tr-group .red { + background-color: #fff4f2; } diff --git a/client/src/components/ui/Tooltip.css b/client/src/components/ui/Tooltip.css index 30bf1199..a51b8842 100644 --- a/client/src/components/ui/Tooltip.css +++ b/client/src/components/ui/Tooltip.css @@ -5,6 +5,7 @@ vertical-align: middle; width: 18px; height: 18px; + flex-shrink: 0; margin-left: 5px; background-image: url("./svg/help-circle.svg"); background-size: 100%;