From 3c740f655f258be5781930aa1c89c5825ecad5fa 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 | 30 ++++++------- .../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, 61 insertions(+), 67 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 6d399e195a2522b..187983dd75896c7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -195,13 +195,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 76c3bd5d4c50d64..e2705e7cbacb312 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 c8b57edb3cf8b48..3c6158ba542b183 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 da392660eb70e83..72e88d282407375 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 a5578d9e056671c..93de1d478fb836d 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 7d8e788f49ea00d..809618f07a6c1d7 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 12f6f47f01b497f..d793e60dcd089b4 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 cf337eaec4bbc12..ed67c6364e95807 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 f3969a71e463778..29233047aa02f37 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 @@ -167,7 +167,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 b2c4ed18933acb5..5fe22eac03559b1 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={BaseLocationOptions} 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 6d98c6a6bd5db5b..b0f36a9370bd89f 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, @@ -22,15 +23,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 { @@ -41,7 +41,6 @@ interface PingListProps { onSelectedStatusChange: (status: string | null) => 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({}); - 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', }), @@ -309,7 +303,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 e0d282a5348a0f2..4c1b482b198affa 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 219f92ce36e634c..6839050cec7a8b1 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 3124121adbdee6e..bfd1fa652269260 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx +++ b/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( 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 = ({ - 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 561cc934a9b7611..8e72f964ed12892 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 de56caf58007bec..6a28e3e1d5090af 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]); const refreshApp = () => { const refreshTime = Date.now();