[Uptime] Improve duration chart

x-pack/legacy/plugins/uptime/common/graphql/types.ts

@@ -8,6 +8,8 @@
 // Scalars
 // ====================================================
 
+import { MonitorChart } from '../types';
+
 export type UnsignedInteger = any;
 
 // ====================================================
@@ -416,42 +418,6 @@ export interface SnapshotCount {
 }
 
 
-/** The data used to populate the monitor charts. */
-export interface MonitorChart {
-  /** The average values for the monitor duration. */
-  locationDurationLines: LocationDurationLine[];
-  /** The counts of up/down checks for the monitor. */
-  status: StatusData[];
-  /** The maximum status doc count in this chart. */
-  statusMaxCount: number;
-  /** The maximum duration value in this chart. */
-  durationMaxValue: number;
-}
-
-export interface LocationDurationLine {
-  name: string;
-
-  line: MonitorDurationAveragePoint[];
-}
-/** Represents the average monitor duration ms at a point in time. */
-export interface MonitorDurationAveragePoint {
-  /** The timeseries value for this point. */
-  x: UnsignedInteger;
-  /** The average duration ms for the monitor. */
-  y?: number | null;
-}
-/** Represents a bucket of monitor status information. */
-export interface StatusData {
-  /** The timeseries point for this status data. */
-  x: UnsignedInteger;
-  /** The value of up counts for this point. */
-  up?: number | null;
-  /** The value for down counts for this point. */
-  down?: number | null;
-  /** The total down counts for this point. */
-  total?: number | null;
-}
-
 /** The primary object returned for monitor states. */
 export interface MonitorSummaryResult {
   /** Used to go to the next page of results */
@@ -619,16 +585,6 @@ export interface AllPingsQueryArgs {
   location?: string | null;
 }
 
-export interface GetMonitorChartsDataQueryArgs {
-  monitorId: string;
-
-  dateRangeStart: string;
-
-  dateRangeEnd: string;
-
-  location?: string | null;
-}
-
 export interface GetMonitorStatesQueryArgs {
   dateRangeStart: string;
 

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

@@ -4,4 +4,44 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export type UnsignedInteger = any;
+
+/** Represents a bucket of monitor status information. */
+export interface StatusData {
+  /** The timeseries point for this status data. */
+  x: UnsignedInteger;
+  /** The value of up counts for this point. */
+  up?: number | null;
+  /** The value for down counts for this point. */
+  down?: number | null;
+  /** The total down counts for this point. */
+  total?: number | null;
+}
+
+/** Represents the average monitor duration ms at a point in time. */
+export interface MonitorDurationAveragePoint {
+  /** The timeseries value for this point. */
+  x: UnsignedInteger;
+  /** The average duration ms for the monitor. */
+  y?: number | null;
+}
+
+export interface LocationDurationLine {
+  name: string;
+
+  line: MonitorDurationAveragePoint[];
+}
+
+/** The data used to populate the monitor charts. */
+export interface MonitorChart {
+  /** The average values for the monitor duration. */
+  locationDurationLines: LocationDurationLine[];
+  /** The counts of up/down checks for the monitor. */
+  status: StatusData[];
+  /** The maximum status doc count in this chart. */
+  statusMaxCount: number;
+  /** The maximum duration value in this chart. */
+  durationMaxValue: number;
+}
+
 export * from './ping/histogram';

x-pack/legacy/plugins/uptime/public/components/connected/charts/monitor_duration.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useUrlParams } from '../../../hooks';
+import { getMonitorDurationAction } from '../../../state/actions';
+import { DurationChartComponent } from '../../functional/charts';
+import { selectDurationLines } from '../../../state/selectors';
+import { UptimeRefreshContext } from '../../../contexts';
+
+interface Props {
+  monitorId: string;
+}
+
+export const DurationChart: React.FC<Props> = ({ monitorId }: Props) => {
+  const [getUrlParams] = useUrlParams();
+  const { dateRangeStart, dateRangeEnd } = getUrlParams();
+
+  const { monitor_duration, loading } = useSelector(selectDurationLines);
+
+  const dispatch = useDispatch();
+
+  const { lastRefresh } = useContext(UptimeRefreshContext);
+
+  useEffect(() => {
+    dispatch(
+      getMonitorDurationAction({ monitorId, dateStart: dateRangeStart, dateEnd: dateRangeEnd })
+    );
+  }, [dateRangeStart, dateRangeEnd, dispatch, lastRefresh, monitorId]);
+
+  return (
+    <DurationChartComponent
+      locationDurationLines={monitor_duration?.locationDurationLines ?? []}
+      loading={loading}
+    />
+  );
+};

x-pack/legacy/plugins/uptime/public/components/connected/index.ts

@@ -12,3 +12,4 @@ export { MonitorStatusDetails } from './monitor/status_details_container';
 export { MonitorStatusBar } from './monitor/status_bar_container';
 export { MonitorListDrawer } from './monitor/list_drawer_container';
 export { MonitorListActionsPopover } from './monitor/drawer_popover_container';
+export { DurationChart } from './charts/monitor_duration';

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx

@@ -6,8 +6,7 @@
 
 import React from 'react';
 import DateMath from '@elastic/datemath';
-import { MonitorChartsComponent } from '../monitor_charts';
-import { MonitorChart } from '../../../../common/graphql/types';
+import { MonitorCharts } from '../monitor_charts';
 import { shallowWithRouter } from '../../../lib';
 
 describe('MonitorCharts component', () => {
@@ -23,56 +22,8 @@ describe('MonitorCharts component', () => {
     jest.clearAllMocks();
   });
 
-  const chartResponse: { monitorChartsData: MonitorChart } = {
-    monitorChartsData: {
-      locationDurationLines: [
-        {
-          name: 'somewhere',
-          line: [
-            { x: 1548697620000, y: 743928.2027027027 },
-            { x: 1548697920000, y: 766840.0133333333 },
-            { x: 1548698220000, y: 786970.8266666667 },
-            { x: 1548698520000, y: 781064.7808219178 },
-            { x: 1548698820000, y: 741563.04 },
-            { x: 1548699120000, y: 759354.6756756756 },
-            { x: 1548699420000, y: 737533.3866666667 },
-            { x: 1548699720000, y: 728669.0266666666 },
-            { x: 1548700020000, y: 719951.64 },
-            { x: 1548700320000, y: 769181.7866666666 },
-            { x: 1548700620000, y: 740805.2666666667 },
-          ],
-        },
-      ],
-      status: [
-        { x: 1548697620000, up: 74, down: null, total: 74 },
-        { x: 1548697920000, up: 75, down: null, total: 75 },
-        { x: 1548698220000, up: 75, down: null, total: 75 },
-        { x: 1548698520000, up: 73, down: null, total: 73 },
-        { x: 1548698820000, up: 75, down: null, total: 75 },
-        { x: 1548699120000, up: 74, down: null, total: 74 },
-        { x: 1548699420000, up: 75, down: null, total: 75 },
-        { x: 1548699720000, up: 75, down: null, total: 75 },
-        { x: 1548700020000, up: 75, down: null, total: 75 },
-        { x: 1548700320000, up: 75, down: null, total: 75 },
-        { x: 1548700620000, up: 75, down: null, total: 75 },
-      ],
-      statusMaxCount: 75,
-      durationMaxValue: 6669234,
-    },
-  };
-
   it('renders the component without errors', () => {
-    const component = shallowWithRouter(
-      <MonitorChartsComponent
-        danger="dangerColor"
-        data={{ monitorChartsData: chartResponse.monitorChartsData }}
-        loading={false}
-        mean="mean"
-        range="range"
-        success="success"
-        monitorId="something"
-      />
-    );
+    const component = shallowWithRouter(<MonitorCharts monitorId="something" />);
     expect(component).toMatchSnapshot();
   });
 });