[7.x] [Uptime] Delete uptime eslint rule skip (#50912) (#53916)

* [Uptime] Delete uptime eslint rule skip (#50912)

* Delete uptime eslint rules.

* Update hooks usage to adhere to new eslint rules.

* Delete code accidentally added during rebase.

* WIP trying things.

* Clean up types and hook usage to comply with kibana eslint rules.

* Clean up code.

* Update new useEffect hooks that are missing dependencies.

* Fix edits that broke a page.

* Update handler type to match interface.

.eslintrc.js

@@ -189,13 +189,6 @@ module.exports = {
         'react-hooks/exhaustive-deps': 'off',
       },
     },
-    {
-      files: ['x-pack/legacy/plugins/uptime/**/*.{js,ts,tsx}'],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-        'react-hooks/rules-of-hooks': 'off',
-      },
-    },
 
     /**
      * Files that require Apache 2.0 headers, settings

x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx

@@ -68,7 +68,7 @@ export const DonutChart = ({ height, down, up, width }: DonutChartProps) => {
         )
         .attr('fill', (d: any) => color(d.data.key));
     }
-  }, [chartElement.current, upCount, down]);
+  }, [danger, down, gray, height, upCount, width]);
   return (
     <EuiFlexGroup alignItems="center" responsive={false}>
       <EuiFlexItem grow={false}>

x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx

@@ -51,6 +51,9 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
   loading = false,
   height,
 }: Props) => {
+  const {
+    colors: { danger, gray },
+  } = useContext(UptimeSettingsContext);
   if (!data || !data.queryResult)
     /**
      * TODO: the Fragment, EuiTitle, and EuiPanel should be extracted to a dumb component
@@ -94,10 +97,6 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
     queryResult: { histogram, interval },
   } = data;
 
-  const {
-    colors: { danger, gray },
-  } = useContext(UptimeSettingsContext);
-
   const downMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.downMonitorsId', {
     defaultMessage: 'Down Monitors',
   });

x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx

@@ -80,7 +80,7 @@ export function KueryBar({ autocomplete }: Props) {
   useEffect(() => {
     getIndexPattern(basePath, (result: any) => setIndexPattern(toStaticIndexPattern(result)));
     setIsLoadingIndexPattern(false);
-  }, []);
+  }, [basePath]);
   const [getUrlParams, updateUrlParams] = useUrlParams();
   const { search: kuery } = getUrlParams();
 

x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx

@@ -46,6 +46,23 @@ const EmbeddedPanel = styled.div`
 
 export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
   const [embeddable, setEmbeddable] = useState<MapEmbeddable>();
+  const embeddableRoot: React.RefObject<HTMLDivElement> = React.createRef();
+  const factory = start.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE);
+
+  const input = {
+    id: uuid.v4(),
+    filters: [],
+    hidePanelTitles: true,
+    query: { query: '', language: 'kuery' },
+    refreshConfig: { value: 0, pause: false },
+    viewMode: 'view',
+    isLayerTOCOpen: false,
+    hideFilterActions: true,
+    mapCenter: { lon: 11, lat: 47, zoom: 0 },
+    disableInteractive: true,
+    disableTooltipControl: true,
+    hideToolbarOverlay: true,
+  };
 
   useEffect(() => {
     async function setupEmbeddable() {
@@ -59,38 +76,21 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
       setEmbeddable(embeddableObject);
     }
     setupEmbeddable();
+    // we want this effect to execute exactly once after the component mounts
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
     if (embeddable) {
       embeddable.setLayerList(getLayerList(upPoints, downPoints));
     }
-  }, [upPoints, downPoints]);
+  }, [upPoints, downPoints, embeddable]);
 
   useEffect(() => {
     if (embeddableRoot.current && embeddable) {
       embeddable.render(embeddableRoot.current);
     }
-  }, [embeddable]);
-
-  const factory = start.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE);
-
-  const input = {
-    id: uuid.v4(),
-    filters: [],
-    hidePanelTitles: true,
-    query: { query: '', language: 'kuery' },
-    refreshConfig: { value: 0, pause: false },
-    viewMode: 'view',
-    isLayerTOCOpen: false,
-    hideFilterActions: true,
-    mapCenter: { lon: 11, lat: 47, zoom: 0 },
-    disableInteractive: true,
-    disableTooltipControl: true,
-    hideToolbarOverlay: true,
-  };
-
-  const embeddableRoot: React.RefObject<HTMLDivElement> = React.createRef();
+  }, [embeddable, embeddableRoot]);
 
   return (
     <EmbeddedPanel>

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

@@ -39,12 +39,12 @@ export const MonitorChartsComponent = ({
   dateRangeEnd,
   loading,
 }: Props) => {
+  const [getUrlParams] = useUrlParams();
   if (data && data.monitorChartsData) {
     const {
       monitorChartsData: { locationDurationLines },
     } = data;
 
-    const [getUrlParams] = useUrlParams();
     const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
 
     return (

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx

@@ -49,12 +49,16 @@ export function MonitorListDrawerComponent({
   loadMonitorDetails,
   monitorDetails,
 }: MonitorListDrawerProps) {
+  const monitorId = summary?.monitor_id;
+  useEffect(() => {
+    if (monitorId) {
+      loadMonitorDetails(monitorId);
+    }
+  }, [loadMonitorDetails, monitorId]);
+
   if (!summary || !summary.state.checks) {
     return null;
   }
-  useEffect(() => {
-    loadMonitorDetails(summary.monitor_id);
-  }, []);
 
   const monitorUrl: string | undefined = get(summary.state.url, 'full', undefined);
 

x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx

@@ -28,7 +28,7 @@ export const MonitorStatusDetailsComponent = ({
 }: MonitorStatusBarProps) => {
   useEffect(() => {
     loadMonitorLocations(monitorId);
-  }, [monitorId, dateStart, dateEnd]);
+  }, [loadMonitorLocations, monitorId, dateStart, dateEnd]);
 
   return (
     <EuiPanel>

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

@@ -207,7 +207,6 @@ describe('PingList component', () => {
         onPageCountChange={jest.fn()}
         onSelectedLocationChange={(loc: EuiComboBoxOptionProps[]) => {}}
         onSelectedStatusChange={jest.fn()}
-        onUpdateApp={jest.fn()}
         pageSize={30}
         selectedOption="down"
         selectedLocation={BaseLocationOptions}

x-pack/legacy/plugins/uptime/public/components/functional/ping_list/ping_list.tsx

@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 import {
   EuiBadge,
   EuiBasicTable,
@@ -22,26 +23,24 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { get } from 'lodash';
 import moment from 'moment';
-import React, { Fragment, useEffect, useState } from 'react';
-// @ts-ignore formatNumber
-import { formatNumber } from '@elastic/eui/lib/services/format';
+import React, { Fragment, useState } from 'react';
+import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
 import { Ping, PingResults } from '../../../../common/graphql/types';
 import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
 import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
 import { pingsQuery } from '../../../queries';
 import { LocationName } from './../location_name';
-import { Criteria, Pagination } from './../monitor_list';
+import { Pagination } from './../monitor_list';
 import { PingListExpandedRowComponent } from './expanded_row';
 
 interface PingListQueryResult {
   allPings?: PingResults;
 }
 
 interface PingListProps {
-  onSelectedStatusChange: (status: string | null) => void;
+  onSelectedStatusChange: (status: string | undefined) => void;
   onSelectedLocationChange: (location: EuiComboBoxOptionProps[]) => void;
   onPageCountChange: (itemCount: number) => void;
-  onUpdateApp: () => void;
   pageSize: number;
   selectedOption: string;
   selectedLocation: EuiComboBoxOptionProps[];
@@ -77,18 +76,13 @@ export const PingListComponent = ({
   onPageCountChange,
   onSelectedLocationChange,
   onSelectedStatusChange,
-  onUpdateApp,
   pageSize,
   selectedOption,
   selectedLocation,
 }: Props) => {
   const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<ExpandedRowMap>({});
 
-  useEffect(() => {
-    onUpdateApp();
-  }, [selectedOption]);
-
-  const statusOptions: EuiComboBoxOptionProps[] = [
+  const statusOptions = [
     {
       label: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', {
         defaultMessage: 'All',
@@ -182,16 +176,16 @@ export const PingListComponent = ({
       render: (error: string) => error ?? '-',
     },
   ];
-
   const pings: Ping[] = data?.allPings?.pings ?? [];
-
-  const hasStatus: boolean = pings.some(
-    (currentPing: Ping) => !!currentPing?.http?.response?.status_code
+  const hasStatus: boolean = pings.reduce(
+    (hasHttpStatus: boolean, currentPing: Ping) =>
+      hasHttpStatus || !!currentPing.http?.response?.status_code,
+    false
   );
   if (hasStatus) {
     columns.push({
       field: 'http.response.status_code',
-      align: 'center',
+      align: 'right',
       name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', {
         defaultMessage: 'Response code',
       }),
@@ -266,7 +260,7 @@ export const PingListComponent = ({
                           if (typeof selectedOptions[0].value === 'string') {
                             onSelectedStatusChange(
                               // @ts-ignore it's definitely a string
-                              selectedOptions[0].value !== '' ? selectedOptions[0].value : null
+                              selectedOptions[0].value !== '' ? selectedOptions[0].value : undefined
                             );
                           }
                         }}
@@ -309,7 +303,9 @@ export const PingListComponent = ({
           itemId="id"
           itemIdToExpandedRowMap={itemIdToExpandedRowMap}
           pagination={pagination}
-          onChange={(criteria: Criteria) => onPageCountChange(criteria.page!.size)}
+          onChange={(criteria: CriteriaWithPagination<Ping>) =>
+            onPageCountChange(criteria.page!.size)
+          }
         />
       </EuiPanel>
     </Fragment>

x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx

@@ -92,7 +92,7 @@ export const Container: React.FC<Props> = ({
 }: Props) => {
   useEffect(() => {
     loadSnapshotCount(dateRangeStart, dateRangeEnd, filters, statusFilter);
-  }, [dateRangeStart, dateRangeEnd, filters, lastRefresh, statusFilter]);
+  }, [dateRangeStart, dateRangeEnd, filters, lastRefresh, loadSnapshotCount, statusFilter]);
   return <PresentationalComponent count={count} height={height} loading={loading} />;
 };
 

x-pack/legacy/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx

@@ -75,6 +75,9 @@ export function withUptimeGraphQL<T, P = {}>(WrappedComponent: any, query: any)
        * reassign the update function to do nothing with the returned values.
        */
       return () => {
+        // this component is planned to be deprecated, for the time being
+        // we will want to preserve this for the reason above.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         updateState = () => {};
       };
     }, [variables, lastRefresh]);

x-pack/legacy/plugins/uptime/public/pages/monitor.tsx

@@ -62,7 +62,7 @@ export const MonitorPage = ({
         setHeadingText(heading);
       }
     });
-  }, [params]);
+  }, [monitorId, params, query, setBreadcrumbs, setHeadingText]);
 
   const [selectedLocation, setSelectedLocation] = useState<EuiComboBoxOptionProps[]>(
     BaseLocationOptions
@@ -79,7 +79,7 @@ export const MonitorPage = ({
 
   useEffect(() => {
     logMonitorPageLoad();
-  }, []);
+  }, [logMonitorPageLoad]);
 
   useTrackPageview({ app: 'uptime', path: 'monitor' });
   useTrackPageview({ app: 'uptime', path: 'monitor', delay: 15000 });
@@ -106,10 +106,10 @@ export const MonitorPage = ({
       <PingList
         onPageCountChange={setPingListPageCount}
         onSelectedLocationChange={setSelectedLocation}
-        onSelectedStatusChange={(selectedStatus: string | null) =>
-          updateUrlParams({ selectedPingStatus: selectedStatus || '' })
-        }
-        onUpdateApp={refreshApp}
+        onSelectedStatusChange={(selectedStatus: string | undefined) => {
+          updateUrlParams({ selectedPingStatus: selectedStatus || '' });
+          refreshApp();
+        }}
         pageSize={pingListPageCount}
         selectedOption={selectedPingStatus}
         selectedLocation={selectedLocation}

x-pack/legacy/plugins/uptime/public/pages/overview.tsx

@@ -85,7 +85,7 @@ export const OverviewPage = ({
         })
       );
     }
-  }, []);
+  }, [basePath, logOverviewPageLoad, setBreadcrumbs, setHeadingText]);
 
   useTrackPageview({ app: 'uptime', path: 'overview' });
   useTrackPageview({ app: 'uptime', path: 'overview', delay: 15000 });

x-pack/legacy/plugins/uptime/public/uptime_app.tsx

@@ -111,7 +111,7 @@ const Application = (props: UptimeAppProps) => {
           }
         : undefined
     );
-  }, []);
+  }, [canSave, renderGlobalHelpControls, setBadge]);
 
   const refreshApp = () => {
     const refreshTime = Date.now();