diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_status_tags.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_status_tags.tsx index 923bf2c68cc56a..e2855f78262e75 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_status_tags.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_status_tags.tsx @@ -66,44 +66,57 @@ export const LocationStatusTags = ({ locations }: Props) => { return a.label > b.label ? 1 : b.label > a.label ? -1 : 0; }); - moment.updateLocale('en', { - 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 tagLabel = (item: StatusTag, ind: number, color: string) => { + return ( + + + + {item.label} + + + + {moment(item.timestamp).fromNow()} + + + ); + }; - const tagLabel = (item: StatusTag, ind: number, color: string) => ( - - - - {item.label} - - - - {moment(item.timestamp).fromNow()} - - - ); + const prevLocal: string = moment.locale() ?? 'en'; - return ( - <> + 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 tags = ( {downLocations.map((item, ind) => tagLabel(item, ind, danger))} {upLocations.map((item, ind) => tagLabel(item, ind, gray))} + ); + + // Need to reset locale so it doesn't effect other parts of the app + moment.locale(prevLocal); + return tags; + }; + + return ( + <> + {renderTags()} {locations.length > 7 && (