Resolver Light Theme And Kibana Integration (#67859)

x-pack/plugins/security_solution/public/endpoint_alerts/view/test_helpers/render_alert_page.tsx

@@ -29,6 +29,7 @@ export const alertPageTestRender = () => {
 
   const depsStart = depsStartMock();
   depsStart.data.ui.SearchBar.mockImplementation(() => <div />);
+  const uiSettings = new Map();
 
   return {
     store,
@@ -47,7 +48,7 @@ export const alertPageTestRender = () => {
        */
       return reactTestingLibrary.render(
         <Provider store={store}>
-          <KibanaContextProvider services={{ data: depsStart.data }}>
+          <KibanaContextProvider services={{ data: depsStart.data, uiSettings }}>
             <I18nProvider>
               <Router history={history}>
                 <RouteCapture>

x-pack/plugins/security_solution/public/resolver/lib/date.test.ts

@@ -0,0 +1,98 @@
+/*
+ * 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 { getFriendlyElapsedTime } from './date';
+
+describe('date', () => {
+  describe('getFriendlyElapsedTime', () => {
+    const second = 1000;
+    const minute = second * 60;
+    const hour = minute * 60;
+    const day = hour * 24;
+    const week = day * 7;
+    const month = day * 30;
+    const year = day * 365;
+
+    const initialTime = new Date('6/1/2020').getTime();
+
+    const oneSecond = new Date(initialTime + 1 * second).getTime();
+    const oneMinute = new Date(initialTime + 1 * minute).getTime();
+    const oneHour = new Date(initialTime + 1 * hour).getTime();
+    const oneDay = new Date(initialTime + 1 * day).getTime();
+    const oneWeek = new Date(initialTime + 1 * week).getTime();
+    const oneMonth = new Date(initialTime + 1 * month).getTime();
+    const oneYear = new Date(initialTime + 1 * year).getTime();
+
+    const almostAMinute = new Date(initialTime + 59.9 * second).getTime();
+    const almostAnHour = new Date(initialTime + 59.9 * minute).getTime();
+    const almostADay = new Date(initialTime + 23.9 * hour).getTime();
+    const almostAWeek = new Date(initialTime + 6.9 * day).getTime();
+    const almostAMonth = new Date(initialTime + 3.9 * week).getTime();
+    const almostAYear = new Date(initialTime + 11.9 * month).getTime();
+    const threeYears = new Date(initialTime + 3 * year).getTime();
+
+    it('should return the correct singular relative time', () => {
+      expect(getFriendlyElapsedTime(initialTime, oneSecond)).toEqual({
+        duration: 1,
+        durationType: 'second',
+      });
+      expect(getFriendlyElapsedTime(initialTime, oneMinute)).toEqual({
+        duration: 1,
+        durationType: 'minute',
+      });
+      expect(getFriendlyElapsedTime(initialTime, oneHour)).toEqual({
+        duration: 1,
+        durationType: 'hour',
+      });
+      expect(getFriendlyElapsedTime(initialTime, oneDay)).toEqual({
+        duration: 1,
+        durationType: 'day',
+      });
+      expect(getFriendlyElapsedTime(initialTime, oneWeek)).toEqual({
+        duration: 1,
+        durationType: 'week',
+      });
+      expect(getFriendlyElapsedTime(initialTime, oneMonth)).toEqual({
+        duration: 1,
+        durationType: 'month',
+      });
+      expect(getFriendlyElapsedTime(initialTime, oneYear)).toEqual({
+        duration: 1,
+        durationType: 'year',
+      });
+    });
+
+    it('should return the correct pluralized relative time', () => {
+      expect(getFriendlyElapsedTime(initialTime, almostAMinute)).toEqual({
+        duration: 59,
+        durationType: 'seconds',
+      });
+      expect(getFriendlyElapsedTime(initialTime, almostAnHour)).toEqual({
+        duration: 59,
+        durationType: 'minutes',
+      });
+      expect(getFriendlyElapsedTime(initialTime, almostADay)).toEqual({
+        duration: 23,
+        durationType: 'hours',
+      });
+      expect(getFriendlyElapsedTime(initialTime, almostAWeek)).toEqual({
+        duration: 6,
+        durationType: 'days',
+      });
+      expect(getFriendlyElapsedTime(initialTime, almostAMonth)).toEqual({
+        duration: 3,
+        durationType: 'weeks',
+      });
+      expect(getFriendlyElapsedTime(initialTime, almostAYear)).toEqual({
+        duration: 11,
+        durationType: 'months',
+      });
+      expect(getFriendlyElapsedTime(initialTime, threeYears)).toEqual({
+        duration: 3,
+        durationType: 'years',
+      });
+    });
+  });
+});

x-pack/plugins/security_solution/public/resolver/lib/date.ts

@@ -0,0 +1,82 @@
+/*
+ * 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 { DurationDetails, DurationTypes } from '../types';
+
+/*
+ * Given two unix timestamps, it will return an object containing the time difference and properly pluralized friendly version of the time difference.
+ * i.e. a time difference of 1000ms will yield => { duration: 1, durationType: 'second' } and 10000ms will yield => { duration: 10, durationType: 'seconds' }
+ *
+ */
+export const getFriendlyElapsedTime = (
+  from: number | string,
+  to: number | string
+): DurationDetails | null => {
+  const startTime = typeof from === 'number' ? from : parseInt(from, 10);
+  const endTime = typeof to === 'number' ? to : parseInt(to, 10);
+  const elapsedTimeInMs = endTime - startTime;
+
+  if (Number.isNaN(elapsedTimeInMs)) {
+    return null;
+  }
+
+  const second = 1000;
+  const minute = second * 60;
+  const hour = minute * 60;
+  const day = hour * 24;
+  const week = day * 7;
+  const month = day * 30;
+  const year = day * 365;
+
+  let duration: number;
+  let singularType: DurationTypes;
+  let pluralType: DurationTypes;
+  switch (true) {
+    case elapsedTimeInMs >= year:
+      duration = elapsedTimeInMs / year;
+      singularType = 'year';
+      pluralType = 'years';
+      break;
+    case elapsedTimeInMs >= month:
+      duration = elapsedTimeInMs / month;
+      singularType = 'month';
+      pluralType = 'months';
+      break;
+    case elapsedTimeInMs >= week:
+      duration = elapsedTimeInMs / week;
+      singularType = 'week';
+      pluralType = 'weeks';
+      break;
+    case elapsedTimeInMs >= day:
+      duration = elapsedTimeInMs / day;
+      singularType = 'day';
+      pluralType = 'days';
+      break;
+    case elapsedTimeInMs >= hour:
+      duration = elapsedTimeInMs / hour;
+      singularType = 'hour';
+      pluralType = 'hours';
+      break;
+    case elapsedTimeInMs >= minute:
+      duration = elapsedTimeInMs / minute;
+      singularType = 'minute';
+      pluralType = 'minutes';
+      break;
+    case elapsedTimeInMs >= second:
+      duration = elapsedTimeInMs / second;
+      singularType = 'second';
+      pluralType = 'seconds';
+      break;
+    default:
+      duration = elapsedTimeInMs;
+      singularType = 'millisecond';
+      pluralType = 'milliseconds';
+      break;
+  }
+
+  const durationType = duration > 1 ? pluralType : singularType;
+  return { duration: Math.floor(duration), durationType };
+};

x-pack/plugins/security_solution/public/resolver/store/camera/scaling_constants.ts

@@ -12,12 +12,12 @@ export const minimum = 0.5;
 /**
  * The maximum allowed value for the camera scale. This is greatest scale that we will ever render something at.
  */
-export const maximum = 6;
+export const maximum = 2;
 
 /**
  * The curve of the zoom function growth rate. The higher the scale factor is, the higher the zoom rate will be.
  */
-export const zoomCurveRate = 4;
+export const zoomCurveRate = 2;
 
 /**
  * The size, in world units, of a 'nudge' as caused by clicking the up, right, down, or left panning buttons.

x-pack/plugins/security_solution/public/resolver/store/camera/zooming.test.ts

@@ -70,12 +70,12 @@ describe('zooming', () => {
         expect(actual).toMatchInlineSnapshot(`
           Object {
             "maximum": Array [
-              25.000000000000007,
-              16.666666666666668,
+              75,
+              50,
             ],
             "minimum": Array [
-              -25,
-              -16.666666666666668,
+              -75,
+              -50,
             ],
           }
         `);