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 index 1d145506e64f2..813511b31761a 100644 --- 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) => type, }, { align: 'left' as const, field: 'attributes', - name: 'Tags', + name: i18n.translate('xpack.uptime.monitorManagement.monitorList.tags', { + defaultMessage: 'Tags', + }), render: ({ tags }: Partial) => (tags ? : null), }, { align: 'left' as const, field: 'attributes', - name: 'Schedule', + name: i18n.translate('xpack.uptime.monitorManagement.monitorList.locations', { + defaultMessage: 'Locations', + }), + render: ({ locations }: Partial) => + locations ? : null, + }, + { + align: 'left' as const, + field: 'attributes', + name: i18n.translate('xpack.uptime.monitorManagement.monitorList.schedule', { + defaultMessage: 'Schedule', + }), render: ({ schedule }: Partial) => `@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) => 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) => , }, ]; @@ -112,7 +135,9 @@ export const MonitorManagementList = ({ { + const [toDisplay, setToDisplay] = useState(INITIAL_LIMIT); + + const locationsToDisplay = locations.slice(0, toDisplay); + + return ( + + {locationsToDisplay.map((location: ServiceLocation) => ( + + {location.label} + + ))} + {locations.length > toDisplay && ( + { + setToDisplay(locations.length); + }} + onClickAriaLabel={EXPAND_LOCATIONS_LABEL} + > + +{locations.length - INITIAL_LIMIT} + + )} + + ); +}; 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 index ce6708abf9ade..279307975d588 100644 --- 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', +});