[7.x] Feature/issue 44550 new details panel and location map (#50518)

x-pack/legacy/plugins/uptime/common/runtime_types/common.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 * as t from 'io-ts';
+
+export const LocationType = t.partial({
+  lat: t.string,
+  lon: t.string,
+});
+
+export const CheckGeoType = t.partial({
+  name: t.string,
+  location: LocationType,
+});
+
+export const SummaryType = t.partial({
+  up: t.number,
+  down: t.number,
+  geo: CheckGeoType,
+});
+
+export type Summary = t.TypeOf<typeof SummaryType>;
+export type CheckGeo = t.TypeOf<typeof CheckGeoType>;
+export type Location = t.TypeOf<typeof LocationType>;

x-pack/legacy/plugins/uptime/common/runtime_types/index.ts

@@ -4,5 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export * from './common';
 export * from './snapshot';
 export * from './monitor/monitor_details';
+export * from './monitor/monitor_locations';

x-pack/legacy/plugins/uptime/common/runtime_types/monitor/monitor_locations.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 * as t from 'io-ts';
+import { CheckGeoType, SummaryType } from '../common';
+
+// IO type for validation
+export const MonitorLocationType = t.partial({
+  summary: SummaryType,
+  geo: CheckGeoType,
+});
+
+// Typescript type for type checking
+export type MonitorLocation = t.TypeOf<typeof MonitorLocationType>;
+
+export const MonitorLocationsType = t.intersection([
+  t.type({ monitorId: t.string }),
+  t.partial({ locations: t.array(MonitorLocationType) }),
+]);
+export type MonitorLocations = t.TypeOf<typeof MonitorLocationsType>;

x-pack/legacy/plugins/uptime/public/apps/index.ts

@@ -7,6 +7,7 @@
 import chrome from 'ui/chrome';
 import { npStart } from 'ui/new_platform';
 import { Plugin } from './plugin';
+import 'uiExports/embeddableFactories';
 
 new Plugin(
   { opaqueId: Symbol('uptime'), env: {} as any, config: { get: () => ({} as any) } },

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

@@ -0,0 +1,185 @@
+/*
+ * 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 lowPolyLayerFeatures from '../low_poly_layer.json';
+
+export const mockDownPointsLayer = {
+  id: 'down_points',
+  label: 'Down Locations',
+  sourceDescriptor: {
+    type: 'GEOJSON_FILE',
+    __featureCollection: {
+      features: [
+        {
+          type: 'feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [13.399262, 52.487239],
+          },
+        },
+        {
+          type: 'feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [13.399262, 55.487239],
+          },
+        },
+        {
+          type: 'feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [14.399262, 54.487239],
+          },
+        },
+      ],
+      type: 'FeatureCollection',
+    },
+  },
+  visible: true,
+  style: {
+    type: 'VECTOR',
+    properties: {
+      fillColor: {
+        type: 'STATIC',
+        options: {
+          color: '#BC261E',
+        },
+      },
+      lineColor: {
+        type: 'STATIC',
+        options: {
+          color: '#fff',
+        },
+      },
+      lineWidth: {
+        type: 'STATIC',
+        options: {
+          size: 2,
+        },
+      },
+      iconSize: {
+        type: 'STATIC',
+        options: {
+          size: 6,
+        },
+      },
+    },
+  },
+  type: 'VECTOR',
+};
+
+export const mockUpPointsLayer = {
+  id: 'up_points',
+  label: 'Up Locations',
+  sourceDescriptor: {
+    type: 'GEOJSON_FILE',
+    __featureCollection: {
+      features: [
+        {
+          type: 'feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [13.399262, 52.487239],
+          },
+        },
+        {
+          type: 'feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [13.399262, 55.487239],
+          },
+        },
+        {
+          type: 'feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [14.399262, 54.487239],
+          },
+        },
+      ],
+      type: 'FeatureCollection',
+    },
+  },
+  visible: true,
+  style: {
+    type: 'VECTOR',
+    properties: {
+      fillColor: {
+        type: 'STATIC',
+        options: {
+          color: '#98A2B2',
+        },
+      },
+      lineColor: {
+        type: 'STATIC',
+        options: {
+          color: '#fff',
+        },
+      },
+      lineWidth: {
+        type: 'STATIC',
+        options: {
+          size: 2,
+        },
+      },
+      iconSize: {
+        type: 'STATIC',
+        options: {
+          size: 6,
+        },
+      },
+    },
+  },
+  type: 'VECTOR',
+};
+
+export const mockLayerList = [
+  {
+    id: 'low_poly_layer',
+    label: 'World countries',
+    minZoom: 0,
+    maxZoom: 24,
+    alpha: 1,
+    sourceDescriptor: {
+      id: 'b7486535-171b-4d3b-bb2e-33c1a0a2854c',
+      type: 'GEOJSON_FILE',
+      __featureCollection: lowPolyLayerFeatures,
+    },
+    visible: true,
+    style: {
+      type: 'VECTOR',
+      properties: {
+        fillColor: {
+          type: 'STATIC',
+          options: {
+            color: '#cad3e4',
+          },
+        },
+        lineColor: {
+          type: 'STATIC',
+          options: {
+            color: '#fff',
+          },
+        },
+        lineWidth: {
+          type: 'STATIC',
+          options: {
+            size: 0,
+          },
+        },
+        iconSize: {
+          type: 'STATIC',
+          options: {
+            size: 6,
+          },
+        },
+      },
+    },
+    type: 'VECTOR',
+  },
+  mockDownPointsLayer,
+  mockUpPointsLayer,
+];