From bd2be32876a1c153a9913c51b9788626b7d6ca71 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 2 Jan 2020 16:36:07 -0500 Subject: [PATCH] [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. --- .eslintrc.js | 7 ---- .../functional/charts/donut_chart.tsx | 2 +- .../functional/charts/snapshot_histogram.tsx | 7 ++-- .../components/functional/kuery_bar/index.tsx | 2 +- .../location_map/embeddables/embedded_map.tsx | 42 +++++++++---------- .../components/functional/monitor_charts.tsx | 2 +- .../monitor_list_drawer.tsx | 10 +++-- .../monitor_status_details.tsx | 2 +- .../__snapshots__/ping_list.test.tsx.snap | 2 +- .../ping_list/__tests__/ping_list.test.tsx | 1 - .../functional/ping_list/ping_list.tsx | 28 ++++++------- .../public/components/functional/snapshot.tsx | 2 +- .../higher_order/uptime_graphql_query.tsx | 3 ++ .../plugins/uptime/public/pages/monitor.tsx | 12 +++--- .../plugins/uptime/public/pages/overview.tsx | 2 +- .../plugins/uptime/public/uptime_app.tsx | 2 +- 16 files changed, 60 insertions(+), 66 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 7dd0860aac04e1..03a674993ab507 100644 --- a/.eslintrc.js +++ b/.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 diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx index 76c3bd5d4c50d6..e2705e7cbacb31 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx +++ b/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 ( diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx index 37edd208712456..bacd06dbe162d5 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx @@ -61,6 +61,9 @@ export const SnapshotHistogramComponent: React.FC = ({ 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 @@ -104,10 +107,6 @@ export const SnapshotHistogramComponent: React.FC = ({ queryResult: { histogram, interval }, } = data; - const { - colors: { danger, gray }, - } = useContext(UptimeSettingsContext); - const downMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.downMonitorsId', { defaultMessage: 'Down Monitors', }); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx index da392660eb70e8..72e88d28240737 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx +++ b/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(); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx index a5578d9e056671..93de1d478fb836 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx +++ b/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(); + const embeddableRoot: React.RefObject = 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 = React.createRef(); + }, [embeddable, embeddableRoot]); return ( diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx index 7d8e788f49ea00..809618f07a6c1d 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx +++ b/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 ( diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx index 12f6f47f01b497..d793e60dcd089b 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx +++ b/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); diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx index cf337eaec4bbc1..ed67c6364e9580 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx +++ b/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 ( diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap index a2e31a0f33d39f..692675baa89502 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap @@ -145,7 +145,7 @@ exports[`PingList component renders sorted list without errors 1`] = ` "render": [Function], }, Object { - "align": "center", + "align": "right", "field": "http.response.status_code", "name": "Response code", "render": [Function], diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx index 43adc4da85f32f..ba07d6c63b36cd 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx +++ b/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={AllLocationOption.value} diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/ping_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/ping_list.tsx index 496cb67ec06c5d..71b1255b3b37e0 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/ping_list.tsx +++ b/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, @@ -21,15 +22,14 @@ 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 { @@ -40,7 +40,6 @@ interface PingListProps { onSelectedStatusChange: (status: string | undefined) => void; onSelectedLocationChange: (location: any) => void; onPageCountChange: (itemCount: number) => void; - onUpdateApp: () => void; pageSize: number; selectedOption: string; selectedLocation: string | undefined; @@ -76,17 +75,12 @@ export const PingListComponent = ({ onPageCountChange, onSelectedLocationChange, onSelectedStatusChange, - onUpdateApp, pageSize, selectedOption, selectedLocation, }: Props) => { const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState({}); - useEffect(() => { - onUpdateApp(); - }, [selectedOption]); - const statusOptions = [ { text: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', { @@ -181,16 +175,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', }), @@ -306,7 +300,9 @@ export const PingListComponent = ({ itemId="id" itemIdToExpandedRowMap={itemIdToExpandedRowMap} pagination={pagination} - onChange={(criteria: Criteria) => onPageCountChange(criteria.page!.size)} + onChange={(criteria: CriteriaWithPagination) => + onPageCountChange(criteria.page!.size) + } /> diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx index e0d282a5348a0f..4c1b482b198aff 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx @@ -92,7 +92,7 @@ export const Container: React.FC = ({ }: Props) => { useEffect(() => { loadSnapshotCount(dateRangeStart, dateRangeEnd, filters, statusFilter); - }, [dateRangeStart, dateRangeEnd, filters, lastRefresh, statusFilter]); + }, [dateRangeStart, dateRangeEnd, filters, lastRefresh, loadSnapshotCount, statusFilter]); return ; }; diff --git a/x-pack/legacy/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx b/x-pack/legacy/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx index 219f92ce36e634..6839050cec7a8b 100644 --- a/x-pack/legacy/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx @@ -75,6 +75,9 @@ export function withUptimeGraphQL(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]); diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx index 8c5fced2f28649..8c5649f680fcb5 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx @@ -63,7 +63,7 @@ export const MonitorPage = ({ setHeadingText(heading); } }); - }, [params]); + }, [monitorId, params, query, setBreadcrumbs, setHeadingText]); const [selectedLocation, setSelectedLocation] = useState(undefined); @@ -76,7 +76,7 @@ export const MonitorPage = ({ useEffect(() => { logMonitorPageLoad(); - }, []); + }, [logMonitorPageLoad]); useTrackPageview({ app: 'uptime', path: 'monitor' }); useTrackPageview({ app: 'uptime', path: 'monitor', delay: 15000 }); @@ -103,10 +103,10 @@ export const MonitorPage = ({ - updateUrlParams({ selectedPingStatus: selectedStatus || '' }) - } - onUpdateApp={refreshApp} + onSelectedStatusChange={(selectedStatus: string | undefined) => { + updateUrlParams({ selectedPingStatus: selectedStatus || '' }); + refreshApp(); + }} pageSize={pingListPageCount} selectedOption={selectedPingStatus} selectedLocation={selectedLocation} diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx index 561cc934a9b761..8e72f964ed1289 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx +++ b/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 }); diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx index 456aff1f9a24d7..f72055c52255d8 100644 --- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx +++ b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx @@ -111,7 +111,7 @@ const Application = (props: UptimeAppProps) => { } : undefined ); - }, []); + }, [canSave, renderGlobalHelpControls, setBadge]); useEffect(() => { document.title = getTitle();