From ce513955bbdf221d317d919898081ffdd3e0a7cd Mon Sep 17 00:00:00 2001 From: crazyplayy <48414755+crazyplayy@users.noreply.github.com> Date: Mon, 11 Sep 2023 16:50:54 +0100 Subject: [PATCH] Fix: Truncate "Title", "Label" and "Hostname" columns (#811) --- web/frontend/package.json | 1 + .../Agents/ListTable/AgentsListTable.js | 2 ++ .../AgentsListTable.test.js.snap | 4 ++-- .../SummaryTable/RunSummaryTable.js | 2 ++ .../RunConfigurationDeleteButton.js | 3 ++- .../Table/RunConfigurationsTable.js | 11 ++++++++--- .../RunConfigurationsTable.test.js.snap | 6 +++--- web/frontend/src/pages/Layout/layout.css | 19 ++++++++++++++++++- 8 files changed, 38 insertions(+), 10 deletions(-) diff --git a/web/frontend/package.json b/web/frontend/package.json index 36f35aa8..e32b273d 100644 --- a/web/frontend/package.json +++ b/web/frontend/package.json @@ -29,6 +29,7 @@ "react-chartjs-2": "^3.0.3", "react-dom": "^17.0.2", "react-error-boundary": "^4.0.10", + "react-resizable": "^3.0.5", "react-router-dom": "6.4.2" }, "devDependencies": { diff --git a/web/frontend/src/components/Agents/ListTable/AgentsListTable.js b/web/frontend/src/components/Agents/ListTable/AgentsListTable.js index 306cf4fb..9a116953 100644 --- a/web/frontend/src/components/Agents/ListTable/AgentsListTable.js +++ b/web/frontend/src/components/Agents/ListTable/AgentsListTable.js @@ -42,6 +42,8 @@ const AgentsListTable = ({ agents, isLoading, updateTestPlans }) => { title: "Hostname", dataIndex: "hostname", key: "hostname", + width: 400, + ellipsis: true, sorter: { compare: (recordA, recordB) => recordB.hostname.localeCompare(recordA.hostname) diff --git a/web/frontend/src/components/Agents/ListTable/__snapshots__/AgentsListTable.test.js.snap b/web/frontend/src/components/Agents/ListTable/__snapshots__/AgentsListTable.test.js.snap index d2fc8eb2..4580b397 100644 --- a/web/frontend/src/components/Agents/ListTable/__snapshots__/AgentsListTable.test.js.snap +++ b/web/frontend/src/components/Agents/ListTable/__snapshots__/AgentsListTable.test.js.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/Agents/ListTable should render AgentsListTable component 1`] = `"
Show Disabled Agents
Hostname
IP
Status
Created at
Updated at
agent hostnameagent IPCREATING05/24/2018 13:48:0405/24/2018 13:48:04
"`; +exports[`components/Agents/ListTable should render AgentsListTable component 1`] = `"
Show Disabled Agents
Hostname
IP
Status
Created at
Updated at
agent hostnameagent IPCREATING05/24/2018 13:48:0405/24/2018 13:48:04
"`; -exports[`components/Agents/ListTable should render AgentsListTable loader 1`] = `"
Show Disabled Agents
Hostname
IP
Status
Created at
Updated at
agent hostnameagent IPCREATING05/24/2018 13:48:0405/24/2018 13:48:04
"`; +exports[`components/Agents/ListTable should render AgentsListTable loader 1`] = `"
Show Disabled Agents
Hostname
IP
Status
Created at
Updated at
agent hostnameagent IPCREATING05/24/2018 13:48:0405/24/2018 13:48:04
"`; diff --git a/web/frontend/src/components/Run/RunningStatus/SummaryTable/RunSummaryTable.js b/web/frontend/src/components/Run/RunningStatus/SummaryTable/RunSummaryTable.js index 6755bf88..cdbe72b6 100644 --- a/web/frontend/src/components/Run/RunningStatus/SummaryTable/RunSummaryTable.js +++ b/web/frontend/src/components/Run/RunningStatus/SummaryTable/RunSummaryTable.js @@ -23,6 +23,8 @@ const RunSummaryTable = ({ runId, setLabelToShowGraph, setActiveTabKey }) => { title: "Label", dataIndex: "label", key: "label", + width: 300, + ellipsis: true, sorter: { compare: (recordA, recordB) => { if (recordA.url < recordB.label) { diff --git a/web/frontend/src/components/RunConfiguration/Table/DeleteButton/RunConfigurationDeleteButton.js b/web/frontend/src/components/RunConfiguration/Table/DeleteButton/RunConfigurationDeleteButton.js index 6a66273d..bf6871ba 100644 --- a/web/frontend/src/components/RunConfiguration/Table/DeleteButton/RunConfigurationDeleteButton.js +++ b/web/frontend/src/components/RunConfiguration/Table/DeleteButton/RunConfigurationDeleteButton.js @@ -1,3 +1,4 @@ +import { DeleteOutlined } from "@ant-design/icons"; import { Button, message, Popconfirm } from "antd"; import PropTypes from "prop-types"; @@ -26,7 +27,7 @@ const RunConfigurationDeleteButton = ({ runConfigurationId, refetch }) => ( }); }} > - diff --git a/web/frontend/src/components/RunConfiguration/Table/RunConfigurationsTable.js b/web/frontend/src/components/RunConfiguration/Table/RunConfigurationsTable.js index b673a02a..863d606e 100644 --- a/web/frontend/src/components/RunConfiguration/Table/RunConfigurationsTable.js +++ b/web/frontend/src/components/RunConfiguration/Table/RunConfigurationsTable.js @@ -1,3 +1,4 @@ +import { FolderOpenOutlined } from "@ant-design/icons"; import { Button, Col, Row, Space, Table } from "antd"; import moment from "moment"; import PropTypes from "prop-types"; @@ -12,7 +13,9 @@ const getColumns = (refetch) => [ { title: "Title", dataIndex: "title", - key: "title" + key: "title", + width: 500, + ellipsis: true }, { title: "Next Run", @@ -24,7 +27,7 @@ const getColumns = (refetch) => [ }, render: (text, record) => record.nextRun ? record.nextRun.format("L HH:mm") : null, - width: 180 + width: 80 }, { title: "Created", @@ -47,7 +50,9 @@ const getColumns = (refetch) => [ <> - +
Title
Next Run
Created
Action
Confgiuration title05/24/2018 13:48
"`; +exports[`components/RunConfiguration/Table should render RunConfigurationTable component 1`] = `"
Title
Next Run
Created
Action
Confgiuration title05/24/2018 13:48
"`; -exports[`components/RunConfiguration/Table should render RunConfigurationTable loader 1`] = `"
Title
Next Run
Created
Action
Confgiuration title05/24/2018 13:48
"`; +exports[`components/RunConfiguration/Table should render RunConfigurationTable loader 1`] = `"
Title
Next Run
Created
Action
Confgiuration title05/24/2018 13:48
"`; -exports[`components/RunConfiguration/Table should render RunConfigurationTable nextRun column 1`] = `"
Title
Next Run
Created
Action
Confgiuration title03/03/2022 13:5005/24/2018 13:48
Confgiuration title03/03/2022 13:0005/24/2018 13:48
Confgiuration title03/06/2022 10:0005/24/2018 13:48
"`; +exports[`components/RunConfiguration/Table should render RunConfigurationTable nextRun column 1`] = `"
Title
Next Run
Created
Action
Confgiuration title03/03/2022 13:5005/24/2018 13:48
Confgiuration title03/03/2022 13:0005/24/2018 13:48
Confgiuration title03/06/2022 10:0005/24/2018 13:48
"`; diff --git a/web/frontend/src/pages/Layout/layout.css b/web/frontend/src/pages/Layout/layout.css index 5ec7aca2..86c6dae8 100644 --- a/web/frontend/src/pages/Layout/layout.css +++ b/web/frontend/src/pages/Layout/layout.css @@ -55,8 +55,25 @@ main { align-items: center; } + +.react-resizable { + position: relative; + background-clip: padding-box; +} + +.react-resizable-handle { + position: absolute; + right: -5px; + bottom: 0; + z-index: 1; + width: 10px; + height: 100%; + cursor: col-resize; +} + .truncate-option { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -} \ No newline at end of file +} +