[Uptime] Reintroduce a column for url (#55451)

* Reintroduce a column for url. * Reintroduce original URL column. * Update busted test snapshots. * Truncate long URLs. Co-authored-by: Elastic Machine <[email protected]>
elastic · Jan 27, 2020 · 1df0190 · 1df0190
1 parent 8fe39ae
commit 1df0190
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/...lic/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/...lic/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
diff --git a/...nts/functional/monitor_list/__tests__/__snapshots__/monitor_list_pagination.test.tsx.snap b/...nts/functional/monitor_list/__tests__/__snapshots__/monitor_list_pagination.test.tsx.snap
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
@@ -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<MonitorListQueryResult> & 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) => (
+        <TruncatedEuiLink href={url} target="_blank" color="text">
+          {url} <EuiIcon size="s" type="popout" color="subbdued" />
+        </TruncatedEuiLink>
+      ),
+    },
     {
       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
@@ -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',
+});