Truncate long URLs.

elastic · Jan 27, 2020 · 0bc9787 · 0bc9787
1 parent 6bd9e85
commit 0bc9787
Showing 1 changed file with 9 additions and 2 deletions.
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
@@ -18,6 +18,7 @@ import {
 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 {
@@ -49,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,
@@ -106,9 +113,9 @@ export const MonitorListComponent = (props: Props) => {
       field: 'state.url.full',
       name: labels.URL,
       render: (url: string, summary: MonitorSummary) => (
-        <EuiLink href={url} target="_blank" color="text">
+        <TruncatedEuiLink href={url} target="_blank" color="text">
           {url} <EuiIcon size="s" type="popout" color="subbdued" />
-        </EuiLink>
+        </TruncatedEuiLink>
       ),
     },
     {