From 617dbabee25e8ad7fc44e919805de0e7e3f53b85 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 27 Jan 2020 16:24:29 -0700 Subject: [PATCH] [Uptime] Reintroduce a column for url (#55451) (#56074) * Reintroduce a column for url. * Reintroduce original URL column. * Update busted test snapshots. * Truncate long URLs. Co-authored-by: Elastic Machine Co-authored-by: Elastic Machine --- .../__snapshots__/monitor_list.test.tsx.snap | 12 +++++++++ .../monitor_list_pagination.test.tsx.snap | 12 +++++++++ .../functional/monitor_list/monitor_list.tsx | 25 ++++++++++++++++--- .../functional/monitor_list/translations.ts | 4 +++ 4 files changed, 50 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap index e32771faf5912c..1de49f12236992 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap @@ -36,6 +36,12 @@ exports[`MonitorList component renders a no items message when no data is provid "sortable": true, "width": "30%", }, + Object { + "aligh": "left", + "field": "state.url.full", + "name": "Url", + "render": [Function], + }, Object { "align": "center", "field": "histogram.points", @@ -128,6 +134,12 @@ exports[`MonitorList component renders the monitor list 1`] = ` "sortable": true, "width": "30%", }, + Object { + "aligh": "left", + "field": "state.url.full", + "name": "Url", + "render": [Function], + }, Object { "align": "center", "field": "histogram.points", diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list_pagination.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list_pagination.test.tsx.snap index a2cae3e1e3b6b7..aa9d3a3ed0d8c8 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list_pagination.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list_pagination.test.tsx.snap @@ -36,6 +36,12 @@ exports[`MonitorList component renders a no items message when no data is provid "sortable": true, "width": "30%", }, + Object { + "aligh": "left", + "field": "state.url.full", + "name": "Url", + "render": [Function], + }, Object { "align": "center", "field": "histogram.points", @@ -128,6 +134,12 @@ exports[`MonitorList component renders the monitor list 1`] = ` "sortable": true, "width": "30%", }, + Object { + "aligh": "left", + "field": "state.url.full", + "name": "Url", + "render": [Function], + }, Object { "align": "center", "field": "histogram.points", diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx index b1b25baf7d8737..1d0930f1faaefc 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx @@ -5,17 +5,20 @@ */ import { + EuiButtonIcon, EuiBasicTable, EuiFlexGroup, - EuiPanel, - EuiTitle, - EuiButtonIcon, EuiFlexItem, + EuiIcon, + EuiLink, + EuiPanel, EuiSpacer, + EuiTitle, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { get } from 'lodash'; import React, { useState, Fragment } from 'react'; +import styled from 'styled-components'; import { withUptimeGraphQL, UptimeGraphQLQueryProps } from '../../higher_order'; import { monitorStatesQuery } from '../../../queries/monitor_states_query'; import { @@ -47,6 +50,12 @@ interface MonitorListProps { type Props = UptimeGraphQLQueryProps & MonitorListProps; +const TruncatedEuiLink = styled(EuiLink)` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; + export const MonitorListComponent = (props: Props) => { const { absoluteStartDate, @@ -99,6 +108,16 @@ export const MonitorListComponent = (props: Props) => { ), sortable: true, }, + { + aligh: 'left' as const, + field: 'state.url.full', + name: labels.URL, + render: (url: string, summary: MonitorSummary) => ( + + {url} + + ), + }, { align: 'center' as const, field: 'histogram.points', diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/translations.ts b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/translations.ts index 9f17f6d7f27b00..beacdec1ae2654 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/translations.ts +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/translations.ts @@ -52,3 +52,7 @@ export const NO_DATA_MESSAGE = i18n.translate('xpack.uptime.monitorList.noItemMe defaultMessage: 'No uptime monitors found', description: 'This message is shown if the monitors table is rendered but has no items.', }); + +export const URL = i18n.translate('xpack.uptime.monitorList.table.url.name', { + defaultMessage: 'Url', +});