[Uptime] Refactor folder structure (#63442)

* update structure

* update connected structure

* update connected structure

* update code structure

* update types

* update imports

* update folder

* update trans

* fixed snapshot

* updated code

* refacto monitor list container

* update types

Co-authored-by: Elastic Machine <[email protected]>

x-pack/legacy/plugins/uptime/common/constants/chart_format_limits.ts

@@ -11,7 +11,7 @@ const WEEK = DAY * 7;
 const MONTH = WEEK * 4;
 
 /**
- * These contsants are used by the charting code to determine
+ * These constants are used by the charting code to determine
  * what label should be applied to chart axes so as to help users
  * understand the timeseries data they're being shown.
  */

x-pack/legacy/plugins/uptime/common/constants/context_defaults.ts

@@ -11,7 +11,7 @@ import { CursorDirection, SortOrder } from '../runtime_types';
  */
 export const CONTEXT_DEFAULTS = {
   /**
-   * The application cannot assume a basepath.
+   * The application cannot assume a basePath.
    */
   BASE_PATH: '',
 

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

@@ -33,7 +33,6 @@ export const DateRangeType = t.type({
 });
 
 export type Summary = t.TypeOf<typeof SummaryType>;
-export type CheckGeo = t.TypeOf<typeof CheckGeoType>;
 export type Location = t.TypeOf<typeof LocationType>;
 export type StatesIndexStatus = t.TypeOf<typeof StatesIndexStatusType>;
 export type DateRange = t.TypeOf<typeof DateRangeType>;

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

@@ -35,3 +35,7 @@ export interface MonitorDurationResult {
   /** The average values for the monitor duration. */
   locationDurationLines: LocationDurationLine[];
 }
+
+export interface MonitorIdParam {
+  monitorId: string;
+}

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

@@ -4,23 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  LegacyCoreStart,
-  LegacyCoreSetup,
-  PluginInitializerContext,
-  AppMountParameters,
-} from 'src/core/public';
-import { PluginsStart, PluginsSetup } from 'ui/new_platform/new_platform';
+import { LegacyCoreSetup, PluginInitializerContext, AppMountParameters } from 'src/core/public';
+import { PluginsSetup } from 'ui/new_platform/new_platform';
 import { FeatureCatalogueCategory } from '../../../../../../src/plugins/home/public';
 import { UMFrontendLibs } from '../lib/lib';
 import { PLUGIN } from '../../common/constants';
 import { getKibanaFrameworkAdapter } from '../lib/adapters/framework/new_platform_adapter';
 
-export interface StartObject {
-  core: LegacyCoreStart;
-  plugins: PluginsStart;
-}
-
 export interface SetupObject {
   core: LegacyCoreSetup;
   plugins: PluginsSetup;

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/chart_wrapper.test.tsx → x-pack/legacy/plugins/uptime/public/components/common/charts/__tests__/chart_wrapper.test.tsx

@@ -10,7 +10,7 @@ import { mount } from 'enzyme';
 import { nextTick } from 'test_utils/enzyme_helpers';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { ChartWrapper } from '../chart_wrapper';
-import { SnapshotHeading } from '../../snapshot_heading';
+import { SnapshotHeading } from '../../../overview/snapshot/snapshot_heading';
 import { DonutChart } from '../donut_chart';
 const SNAPSHOT_CHART_WIDTH = 144;
 const SNAPSHOT_CHART_HEIGHT = 144;

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/duration_charts.test.tsx → x-pack/legacy/plugins/uptime/public/components/common/charts/__tests__/duration_charts.test.tsx

@@ -50,7 +50,6 @@ describe('MonitorCharts component', () => {
     const component = shallowWithRouter(
       <DurationChartComponent
         loading={false}
-        hasMLJob={false}
         anomalies={null}
         locationDurationLines={chartResponse.monitorChartsData.locationDurationLines}
       />

x-pack/legacy/plugins/uptime/public/components/common/charts/duration_chart.tsx

@@ -0,0 +1,122 @@
+/*
+ * 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, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import moment from 'moment';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { Axis, Chart, Position, timeFormatter, Settings, SeriesIdentifier } from '@elastic/charts';
+import { getChartDateLabel } from '../../../lib/helper';
+import { LocationDurationLine } from '../../../../common/types';
+import { DurationLineSeriesList } from './duration_line_series_list';
+import { ChartWrapper } from './chart_wrapper';
+import { useUrlParams } from '../../../hooks';
+import { getTickFormat } from './get_tick_format';
+import { ChartEmptyState } from './chart_empty_state';
+import { DurationAnomaliesBar } from './duration_line_bar_list';
+import { AnomalyRecords } from '../../../state/actions';
+
+interface DurationChartProps {
+  /**
+   * Timeseries data that is used to express an average line series
+   * on the duration chart. One entry per location
+   */
+  locationDurationLines: LocationDurationLine[];
+
+  /**
+   * To represent the loading spinner on chart
+   */
+  loading: boolean;
+
+  anomalies: AnomalyRecords | null;
+}
+
+/**
+ * This chart is intended to visualize monitor duration performance over time to
+ * the users in a helpful way. Its x-axis is based on a timeseries, the y-axis is in
+ * milliseconds.
+ * @param props The props required for this component to render properly
+ */
+export const DurationChartComponent = ({
+  locationDurationLines,
+  anomalies,
+  loading,
+}: DurationChartProps) => {
+  const hasLines = locationDurationLines.length > 0;
+  const [getUrlParams, updateUrlParams] = useUrlParams();
+  const { absoluteDateRangeStart: min, absoluteDateRangeEnd: max } = getUrlParams();
+
+  const [hiddenLegends, setHiddenLegends] = useState<string[]>([]);
+
+  const onBrushEnd = (minX: number, maxX: number) => {
+    updateUrlParams({
+      dateRangeStart: moment(minX).toISOString(),
+      dateRangeEnd: moment(maxX).toISOString(),
+    });
+  };
+
+  const legendToggleVisibility = (legendItem: SeriesIdentifier | null) => {
+    if (legendItem) {
+      setHiddenLegends(prevState => {
+        if (prevState.includes(legendItem.specId)) {
+          return [...prevState.filter(item => item !== legendItem.specId)];
+        } else {
+          return [...prevState, legendItem.specId];
+        }
+      });
+    }
+  };
+
+  return (
+    <ChartWrapper height="400px" loading={loading}>
+      {hasLines ? (
+        <Chart>
+          <Settings
+            xDomain={{ min, max }}
+            showLegend
+            showLegendExtra
+            legendPosition={Position.Bottom}
+            onBrushEnd={onBrushEnd}
+            onLegendItemClick={legendToggleVisibility}
+          />
+          <Axis
+            id="bottom"
+            position={Position.Bottom}
+            showOverlappingTicks={true}
+            tickFormat={timeFormatter(getChartDateLabel(min, max))}
+            title={i18n.translate('xpack.uptime.monitorCharts.durationChart.bottomAxis.title', {
+              defaultMessage: 'Timestamp',
+            })}
+          />
+          <Axis
+            domain={{ min: 0 }}
+            id="left"
+            position={Position.Left}
+            tickFormat={d => getTickFormat(d)}
+            title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', {
+              defaultMessage: 'Duration ms',
+            })}
+          />
+          <DurationLineSeriesList lines={locationDurationLines} />
+          <DurationAnomaliesBar anomalies={anomalies} hiddenLegends={hiddenLegends} />
+        </Chart>
+      ) : (
+        <ChartEmptyState
+          body={
+            <FormattedMessage
+              id="xpack.uptime.durationChart.emptyPrompt.description"
+              defaultMessage="This monitor has never been {emphasizedText} during the selected time range."
+              values={{ emphasizedText: <strong>up</strong> }}
+            />
+          }
+          title={i18n.translate('xpack.uptime.durationChart.emptyPrompt.title', {
+            defaultMessage: 'No duration data available',
+          })}
+        />
+      )}
+    </ChartWrapper>
+  );
+};

x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_line_series_list.tsx → x-pack/legacy/plugins/uptime/public/components/common/charts/duration_line_series_list.tsx

@@ -21,7 +21,7 @@ export const DurationLineSeriesList = ({ lines }: Props) => (
         // this id is used for the line chart representing the average duration length
         data={line.map(({ x, y }) => [x, microsToMillis(y || null)])}
         id={`loc-avg-${name}`}
-        key={`locline-${name}`}
+        key={`loc-line-${name}`}
         name={name}
         xAccessor={0}
         xScaleType="time"

x-pack/legacy/plugins/uptime/public/components/functional/uptime_date_picker.tsx → x-pack/legacy/plugins/uptime/public/components/common/uptime_date_picker.tsx

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiSuperDatePicker } from '@elastic/eui';
 import React, { useContext } from 'react';
+import { EuiSuperDatePicker } from '@elastic/eui';
 import { useUrlParams } from '../../hooks';
 import { CLIENT_DEFAULTS } from '../../../common/constants';
 import { UptimeRefreshContext, UptimeSettingsContext } from '../../contexts';