Fix broken types, add a comment explaining some weird ts-related code.

elastic · Jan 17, 2020 · 4670f24 · 4670f24
1 parent c0aec2e
commit 4670f24
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/...acy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx b/...acy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx
@@ -19,10 +19,12 @@ import { getLayerList } from './map_config';
 import { UptimeThemeContext } from '../../../../contexts';
 
 export interface EmbeddedMapProps {
-  upPoints: Location[];
-  downPoints: Location[];
+  upPoints: LocationPoint[];
+  downPoints: LocationPoint[];
 }
 
+export type LocationPoint = Required<Location>;
+
 const EmbeddedPanel = styled.div`
   z-index: auto;
   flex: 1;

diff --git a/...legacy/plugins/uptime/public/components/functional/location_map/embeddables/map_config.ts b/...legacy/plugins/uptime/public/components/functional/location_map/embeddables/map_config.ts
@@ -5,7 +5,7 @@
  */
 
 import lowPolyLayerFeatures from './low_poly_layer.json';
-import { LocationPoint } from './embedded_map';
+import { LocationPoint } from './embedded_map.js';
 import { UptimeAppColors } from '../../../../uptime_app';
 
 /**
@@ -16,7 +16,7 @@ import { UptimeAppColors } from '../../../../uptime_app';
 export const getLayerList = (
   upPoints: LocationPoint[],
   downPoints: LocationPoint[],
-  { gray, danger }: Pick<UptimeAppColors, 'gray' | 'danger'>
+  { danger }: Pick<UptimeAppColors, 'danger'>
 ) => {
   return [getLowPolyLayer(), getDownPointsLayer(downPoints, danger), getUpPointsLayer(upPoints)];
 };

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_map.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_map.tsx
@@ -8,8 +8,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem, EuiErrorBoundary } from '@elastic/eui';
 import { LocationStatusTags } from './location_status_tags';
-import { EmbeddedMap } from './embeddables/embedded_map';
-import { Location, MonitorLocations, MonitorLocation } from '../../../../common/runtime_types';
+import { EmbeddedMap, LocationPoint } from './embeddables/embedded_map';
+import { MonitorLocations, MonitorLocation } from '../../../../common/runtime_types';
 import { UNNAMED_LOCATION } from '../../../../common/constants';
 import { LocationMissingWarning } from './location_missing';
 
@@ -26,20 +26,28 @@ interface LocationMapProps {
 }
 
 export const LocationMap = ({ monitorLocations }: LocationMapProps) => {
-  const upPoints: Location[] = [];
-  const downPoints: Location[] = [];
+  const upPoints: LocationPoint[] = [];
+  const downPoints: LocationPoint[] = [];
 
   let isGeoInfoMissing = false;
 
   if (monitorLocations?.locations) {
     monitorLocations.locations.forEach((item: MonitorLocation) => {
       if (item.geo?.name === UNNAMED_LOCATION || !item.geo?.location) {
         isGeoInfoMissing = true;
-      } else if (item.geo?.name !== UNNAMED_LOCATION) {
+      } else if (
+        item.geo?.name !== UNNAMED_LOCATION &&
+        !!item.geo.location.lat &&
+        !!item.geo.location.lon
+      ) {
+        // TypeScript doesn't infer that the above checks in this block's condition
+        // ensure that lat and lon are defined when we try to pass the location object directly,
+        // but if we destructure the values it does. Improvement to this block is welcome.
+        const { lat, lon } = item.geo.location;
         if (item?.summary?.down === 0) {
-          upPoints.push(item.geo.location);
+          upPoints.push({ lat, lon });
         } else {
-          downPoints.push(item.geo.location);
+          downPoints.push({ lat, lon });
         }
       }
     });