[Uptime] Improve duration chart (#58404) (#59548)

* use differential colors for duration chart

* remove duration chart gql

* update type

* type fix

* fix tyoe

* update translation

* update test

* update conflicts

* type checking

* update snaps

* PR feedback

* PR feedback

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: shahzad31

x-pack/legacy/plugins/uptime/common/graphql/introspection.json

@@ -8,6 +8,7 @@
 // Scalars
 // ====================================================
 
+
 export type UnsignedInteger = any;
 
 // ====================================================
@@ -18,14 +19,6 @@ export interface Query {
   /** Get a list of all recorded pings for all monitors */
   allPings: PingResults;
 
-  getMonitors?: LatestMonitorsResult | null;
-
-  getSnapshot?: Snapshot | null;
-
-  getMonitorChartsData?: MonitorChart | null;
-  /** Fetch the most recent event data for a monitor ID, date range, location. */
-  getLatestMonitors: Ping[];
-
   /** Fetches the current state of Uptime monitors for the given parameters. */
   getMonitorStates?: MonitorSummaryResult | null;
   /** Fetches details about the uptime index. */
@@ -376,32 +369,6 @@ export interface DocCount {
   count: UnsignedInteger;
 }
 
-export interface LatestMonitorsResult {
-  monitors?: LatestMonitor[] | null;
-}
-/** Represents the latest recorded information about a monitor. */
-export interface LatestMonitor {
-  /** The ID of the monitor represented by this data. */
-  id: MonitorKey;
-  /** Information from the latest document. */
-  ping?: Ping | null;
-  /** Buckets of recent up count status data. */
-  upSeries?: MonitorSeriesPoint[] | null;
-  /** Buckets of recent down count status data. */
-  downSeries?: MonitorSeriesPoint[] | null;
-}
-
-export interface MonitorKey {
-  key: string;
-
-  url?: string | null;
-}
-
-export interface MonitorSeriesPoint {
-  x?: UnsignedInteger | null;
-
-  y?: number | null;
-}
 
 export interface Snapshot {
   counts: SnapshotCount;
@@ -416,42 +383,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 +550,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/graphql/types.ts

@@ -4,4 +4,42 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/** Represents a bucket of monitor status information. */
+export interface StatusData {
+  /** The timeseries point for this status data. */
+  x: number;
+  /** 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: number;
+  /** 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 MonitorDurationResult {
+  /** 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/common/types/index.ts

@@ -4,18 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export type UnsignedInteger = any;
-
 export interface HistogramDataPoint {
   upCount?: number | null;
 
   downCount?: number | null;
 
-  x?: UnsignedInteger | null;
+  x?: number | null;
 
-  x0?: UnsignedInteger | null;
+  x0?: number | null;
 
-  y?: UnsignedInteger | null;
+  y?: number | null;
 }
 
 export interface GetPingHistogramParams {

x-pack/legacy/plugins/uptime/common/types/ping/histogram.ts

@@ -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/charts/monitor_duration.tsx

@@ -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';