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

* Reintroduce a column for url.

* Reintroduce original URL column.

* Update busted test snapshots.

* Truncate long URLs.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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',

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',
+});