[Monitor Management UI] Add "locations" column to monitor management …

…list table (#121454) (#121006)
elastic · Dec 21, 2021 · b49e8dd · b49e8dd
1 parent d69fd17
commit b49e8dd
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 7 deletions.
diff --git a/x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.tsx
@@ -5,11 +5,13 @@
  * 2.0.
  */
 import React, { useContext, useMemo, useCallback } from 'react';
+import { i18n } from '@kbn/i18n';
 import { EuiBasicTable, EuiPanel, EuiSpacer, EuiLink } from '@elastic/eui';
 import { MonitorManagementList as MonitorManagementListState } from '../../../state/reducers/monitor_management';
 import { MonitorFields } from '../../../../common/runtime_types';
 import { UptimeSettingsContext } from '../../../contexts';
 import { Actions } from './actions';
+import { MonitorLocations } from './monitor_locations';
 import { MonitorTags } from './tags';
 import * as labels from '../../overview/monitor_list/translations';
 
@@ -57,7 +59,9 @@ export const MonitorManagementList = ({
   const columns = [
     {
       align: 'left' as const,
-      name: 'Monitor name',
+      name: i18n.translate('xpack.uptime.monitorManagement.monitorList.monitorName', {
+        defaultMessage: 'Monitor name',
+      }),
       render: ({
         attributes: { name },
         id,
@@ -77,33 +81,52 @@ export const MonitorManagementList = ({
     {
       align: 'left' as const,
       field: 'attributes',
-      name: 'Monitor type',
+      name: i18n.translate('xpack.uptime.monitorManagement.monitorList.monitorType', {
+        defaultMessage: 'Monitor type',
+      }),
       render: ({ type }: Partial<MonitorFields>) => type,
     },
     {
       align: 'left' as const,
       field: 'attributes',
-      name: 'Tags',
+      name: i18n.translate('xpack.uptime.monitorManagement.monitorList.tags', {
+        defaultMessage: 'Tags',
+      }),
       render: ({ tags }: Partial<MonitorFields>) => (tags ? <MonitorTags tags={tags} /> : null),
     },
     {
       align: 'left' as const,
       field: 'attributes',
-      name: 'Schedule',
+      name: i18n.translate('xpack.uptime.monitorManagement.monitorList.locations', {
+        defaultMessage: 'Locations',
+      }),
+      render: ({ locations }: Partial<MonitorFields>) =>
+        locations ? <MonitorLocations locations={locations} /> : null,
+    },
+    {
+      align: 'left' as const,
+      field: 'attributes',
+      name: i18n.translate('xpack.uptime.monitorManagement.monitorList.schedule', {
+        defaultMessage: 'Schedule',
+      }),
       render: ({ schedule }: Partial<MonitorFields>) =>
         `@every ${schedule?.number}${schedule?.unit}`,
     },
     {
       align: 'left' as const,
       field: 'attributes',
-      name: 'URL',
+      name: i18n.translate('xpack.uptime.monitorManagement.monitorList.URL', {
+        defaultMessage: 'URL',
+      }),
       render: (attributes: Partial<MonitorFields>) => attributes.urls || attributes.hosts,
       truncateText: true,
     },
     {
       align: 'left' as const,
       field: 'id',
-      name: 'Actions',
+      name: i18n.translate('xpack.uptime.monitorManagement.monitorList.actions', {
+        defaultMessage: 'Actions',
+      }),
       render: (id: string) => <Actions id={id} setRefresh={setRefresh} />,
     },
   ];
@@ -112,7 +135,9 @@ export const MonitorManagementList = ({
     <EuiPanel hasBorder>
       <EuiSpacer size="m" />
       <EuiBasicTable
-        aria-label={'Monitor management list'}
+        aria-label={i18n.translate('xpack.uptime.monitorManagement.monitorList.title', {
+          defaultMessage: 'Monitor management list',
+        })}
         error={error?.message}
         loading={loading}
         isExpandable={true}

diff --git a/...ck/plugins/uptime/public/components/monitor_management/monitor_list/monitor_locations.tsx b/...ck/plugins/uptime/public/components/monitor_management/monitor_list/monitor_locations.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { EuiBadge, EuiBadgeGroup } from '@elastic/eui';
+import { ServiceLocations, ServiceLocation } from '../../../../common/runtime_types';
+import { EXPAND_LOCATIONS_LABEL } from '../../overview/monitor_list/columns/translations';
+
+interface Props {
+  locations: ServiceLocations;
+}
+
+const INITIAL_LIMIT = 3;
+
+export const MonitorLocations = ({ locations }: Props) => {
+  const [toDisplay, setToDisplay] = useState(INITIAL_LIMIT);
+
+  const locationsToDisplay = locations.slice(0, toDisplay);
+
+  return (
+    <EuiBadgeGroup>
+      {locationsToDisplay.map((location: ServiceLocation) => (
+        <EuiBadge
+          key={location.id}
+          color="hollow"
+          className="eui-textTruncate"
+          style={{ maxWidth: 120 }}
+        >
+          {location.label}
+        </EuiBadge>
+      ))}
+      {locations.length > toDisplay && (
+        <EuiBadge
+          color="hollow"
+          onClick={() => {
+            setToDisplay(locations.length);
+          }}
+          onClickAriaLabel={EXPAND_LOCATIONS_LABEL}
+        >
+          +{locations.length - INITIAL_LIMIT}
+        </EuiBadge>
+      )}
+    </EuiBadgeGroup>
+  );
+};
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts
@@ -18,3 +18,7 @@ export const DISABLE_STATUS_ALERT = i18n.translate('xpack.uptime.monitorList.dis
 export const EXPAND_TAGS_LABEL = i18n.translate('xpack.uptime.monitorList.tags.expand', {
   defaultMessage: 'Click to view remaining tags',
 });
+
+export const EXPAND_LOCATIONS_LABEL = i18n.translate('xpack.uptime.monitorList.locations.expand', {
+  defaultMessage: 'Click to view remaining locations',
+});