[Uptime] Fix/location map hide layer view control (#53568)

* hide layer control and added loc tags

* update test

* remove unused comment

* remove capitalization

* style fix

* update types

Co-authored-by: Elastic Machine <[email protected]>

Author: shahzad31

x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/__mocks__/mock.ts renamed to x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/__tests__/__mocks__/mock.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import lowPolyLayerFeatures from '../low_poly_layer.json';
+import lowPolyLayerFeatures from '../../low_poly_layer.json';
 
 export const mockDownPointsLayer = {
   id: 'down_points',

x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/map_config.test.ts renamed to x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/__tests__/map_config.test.ts

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getLayerList } from './map_config';
+import { getLayerList } from '../map_config';
 import { mockLayerList } from './__mocks__/mock';
-import { LocationPoint } from './embedded_map';
+import { LocationPoint } from '../embedded_map';
 
 jest.mock('uuid', () => {
   return {
@@ -33,7 +33,7 @@ describe('map_config', () => {
 
   describe('#getLayerList', () => {
     test('it returns the low poly layer', () => {
-      const layerList = getLayerList(upPoints, downPoints);
+      const layerList = getLayerList(upPoints, downPoints, { danger: '#BC261E', gray: '#000' });
       expect(layerList).toStrictEqual(mockLayerList);
     });
   });

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import uuid from 'uuid';
 import styled from 'styled-components';
 
@@ -15,6 +15,7 @@ import { MAP_SAVED_OBJECT_TYPE } from '../../../../../../maps/common/constants';
 
 import { MapEmbeddable } from './types';
 import { getLayerList } from './map_config';
+import { UptimeSettingsContext } from '../../../../contexts';
 
 export interface EmbeddedMapProps {
   upPoints: LocationPoint[];
@@ -45,6 +46,7 @@ const EmbeddedPanel = styled.div`
 `;
 
 export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
+  const { colors } = useContext(UptimeSettingsContext);
   const [embeddable, setEmbeddable] = useState<MapEmbeddable>();
   const embeddableRoot: React.RefObject<HTMLDivElement> = React.createRef();
   const factory = start.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE);
@@ -58,16 +60,18 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
     viewMode: 'view',
     isLayerTOCOpen: false,
     hideFilterActions: true,
-    mapCenter: { lon: 11, lat: 47, zoom: 0 },
+    mapCenter: { lon: 11, lat: 20, zoom: 0 },
     disableInteractive: true,
     disableTooltipControl: true,
     hideToolbarOverlay: true,
+    hideLayerControl: true,
+    hideViewControl: true,
   };
 
   useEffect(() => {
     async function setupEmbeddable() {
       const mapState = {
-        layerList: getLayerList(upPoints, downPoints),
+        layerList: getLayerList(upPoints, downPoints, colors),
         title: i18n.MAP_TITLE,
       };
       // @ts-ignore
@@ -82,9 +86,9 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
 
   useEffect(() => {
     if (embeddable) {
-      embeddable.setLayerList(getLayerList(upPoints, downPoints));
+      embeddable.setLayerList(getLayerList(upPoints, downPoints, colors));
     }
-  }, [upPoints, downPoints, embeddable]);
+  }, [upPoints, downPoints, embeddable, colors]);
 
   useEffect(() => {
     if (embeddableRoot.current && embeddable) {

x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/map_config.ts

@@ -12,8 +12,12 @@ import { LocationPoint } from './embedded_map';
  * destination, and line layer for each of the provided indexPatterns
  *
  */
-export const getLayerList = (upPoints: LocationPoint[], downPoints: LocationPoint[]) => {
-  return [getLowPolyLayer(), getDownPointsLayer(downPoints), getUpPointsLayer(upPoints)];
+export const getLayerList = (
+  upPoints: LocationPoint[],
+  downPoints: LocationPoint[],
+  { gray, danger }: { gray: string; danger: string }
+) => {
+  return [getLowPolyLayer(), getDownPointsLayer(downPoints, danger), getUpPointsLayer(upPoints)];
 };
 
 export const getLowPolyLayer = () => {
@@ -62,7 +66,7 @@ export const getLowPolyLayer = () => {
   };
 };
 
-export const getDownPointsLayer = (downPoints: LocationPoint[]) => {
+export const getDownPointsLayer = (downPoints: LocationPoint[], dangerColor: string) => {
   const features = downPoints?.map(point => ({
     type: 'feature',
     geometry: {
@@ -87,7 +91,7 @@ export const getDownPointsLayer = (downPoints: LocationPoint[]) => {
         fillColor: {
           type: 'STATIC',
           options: {
-            color: '#BC261E',
+            color: dangerColor,
           },
         },
         lineColor: {

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

@@ -6,15 +6,19 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { LocationStatusTags } from './location_status_tags';
 import { EmbeddedMap, LocationPoint } from './embeddables/embedded_map';
+import { MonitorLocations } from '../../../../common/runtime_types';
 
 const MapPanel = styled.div`
-  height: 400px;
+  height: 240px;
   width: 520px;
+  margin-right: 10px;
 `;
 
 interface LocationMapProps {
-  monitorLocations: any;
+  monitorLocations: MonitorLocations;
 }
 
 export const LocationMap = ({ monitorLocations }: LocationMapProps) => {
@@ -31,8 +35,15 @@ export const LocationMap = ({ monitorLocations }: LocationMapProps) => {
     });
   }
   return (
-    <MapPanel>
-      <EmbeddedMap upPoints={upPoints} downPoints={downPoints} />
-    </MapPanel>
+    <EuiFlexGroup>
+      <EuiFlexItem grow={false}>
+        <LocationStatusTags locations={monitorLocations?.locations || []} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={true}>
+        <MapPanel>
+          <EmbeddedMap upPoints={upPoints} downPoints={downPoints} />
+        </MapPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };

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

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { EuiBadge, EuiText } from '@elastic/eui';
+import { UptimeSettingsContext } from '../../../contexts';
+import { MonitorLocation } from '../../../../common/runtime_types';
+
+const TextStyle = styled.div`
+  font-weight: 600;
+`;
+
+const BadgeItem = styled.div`
+  margin-bottom: 5px;
+`;
+
+const TagContainer = styled.div`
+  padding: 10px;
+  max-height: 200px;
+  overflow: hidden;
+`;
+
+interface Props {
+  locations: MonitorLocation[];
+}
+
+export const LocationStatusTags = ({ locations }: Props) => {
+  const {
+    colors: { gray, danger },
+  } = useContext(UptimeSettingsContext);
+
+  const upLocs: string[] = [];
+  const downLocs: string[] = [];
+
+  locations.forEach((item: any) => {
+    if (item.summary.down === 0) {
+      upLocs.push(item.geo.name);
+    } else {
+      downLocs.push(item.geo.name);
+    }
+  });
+
+  return (
+    <TagContainer>
+      <span>
+        {downLocs.map((item, ind) => (
+          <BadgeItem key={ind}>
+            <EuiBadge color={danger}>
+              <EuiText size="m">
+                <TextStyle>{item}</TextStyle>
+              </EuiText>
+            </EuiBadge>
+          </BadgeItem>
+        ))}
+      </span>
+      <span>
+        {upLocs.map((item, ind) => (
+          <BadgeItem key={ind}>
+            <EuiBadge color={gray}>
+              <EuiText size="m">
+                <TextStyle>{item}</TextStyle>
+              </EuiText>
+            </EuiBadge>
+          </BadgeItem>
+        ))}
+      </span>
+    </TagContainer>
+  );
+};