[Uptime] Added location overview in monitor in status column (#55720) (…

…#56549)

* Reintroduce a column for url.

* Reintroduce original URL column.

* added location overview column

* fix types

* update snaps

* Update busted test snapshots.

* Update x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_status_column.tsx

Co-Authored-By: Justin Kambic <justin.kambic@elastic.co>

* update test

* rename

* update mobile layout

* update column laytout

* fixed i18n

* remove icon

Co-authored-by: Justin Kambic <justin.kambic@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Justin Kambic <justin.kambic@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/uptime/common/constants/index.ts

@@ -11,4 +11,4 @@ export { INDEX_NAMES } from './index_names';
 export * from './capabilities';
 export { PLUGIN } from './plugin';
 export { QUERY, STATES } from './query';
-export * from './constants';
+export * from './ui';

x-pack/legacy/plugins/uptime/common/constants/ui.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export enum STATUS {
+  UP = 'up',
+  DOWN = 'down',
+}
+
+export const UNNAMED_LOCATION = 'Unnamed-location';
+
+export const SHORT_TS_LOCALE = 'en-short-locale';
+
+export const SHORT_TIMESPAN_LOCALE = {
+  relativeTime: {
+    future: 'in %s',
+    past: '%s ago',
+    s: '%ds',
+    ss: '%ss',
+    m: '%dm',
+    mm: '%dm',
+    h: '%dh',
+    hh: '%dh',
+    d: '%dd',
+    dd: '%dd',
+    M: '%d Mon',
+    MM: '%d Mon',
+    y: '%d Yr',
+    yy: '%d Yr',
+  },
+};

x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx

@@ -53,7 +53,7 @@ export const MonitorBarSeries = ({
   const id = 'downSeries';
 
   return seriesHasDownValues(histogramSeries) ? (
-    <div style={{ height: 50, width: '100%', maxWidth: '1200px' }}>
+    <div style={{ height: 50, width: '100%', maxWidth: '1200px', marginRight: 15 }}>
       <Chart>
         <Settings xDomain={{ min: absoluteStartDate, max: absoluteEndDate }} />
         <Axis

x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_status_tags.tsx

@@ -11,6 +11,7 @@ import { EuiBadge, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { UptimeThemeContext } from '../../../contexts';
 import { MonitorLocation } from '../../../../common/runtime_types';
+import { SHORT_TIMESPAN_LOCALE, SHORT_TS_LOCALE } from '../../../../common/constants';
 
 const TimeStampSpan = styled.span`
   display: inline-block;
@@ -84,24 +85,11 @@ export const LocationStatusTags = ({ locations }: Props) => {
   const prevLocal: string = moment.locale() ?? 'en';
 
   const renderTags = () => {
-    moment.defineLocale('en-tag', {
-      relativeTime: {
-        future: 'in %s',
-        past: '%s ago',
-        s: '%ds',
-        ss: '%ss',
-        m: '%dm',
-        mm: '%dm',
-        h: '%dh',
-        hh: '%dh',
-        d: '%dd',
-        dd: '%dd',
-        M: '%d Mon',
-        MM: '%d Mon',
-        y: '%d Yr',
-        yy: '%d Yr',
-      },
-    });
+    const shortLocale = moment.locale(SHORT_TS_LOCALE) === SHORT_TS_LOCALE;
+    if (!shortLocale) {
+      moment.defineLocale(SHORT_TS_LOCALE, SHORT_TIMESPAN_LOCALE);
+    }
+
     const tags = (
       <TagContainer>
         <span>{downLocations.map((item, ind) => tagLabel(item, ind, danger))}</span>