From c5509f0cf7c708f850dd1e82697014f353555a54 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 18 Nov 2019 09:35:54 -0500 Subject: [PATCH 1/8] Delete uptime eslint rules. --- .eslintrc.js | 44 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 7dd0860aac04e..f190e287920b5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -190,13 +190,53 @@ module.exports = { }, }, { - files: ['x-pack/legacy/plugins/uptime/**/*.{js,ts,tsx}'], + files: ['x-pack/legacy/plugins/watcher/**/*.{js,ts,tsx}'], rules: { - 'react-hooks/exhaustive-deps': 'off', 'react-hooks/rules-of-hooks': 'off', + 'react-hooks/exhaustive-deps': 'off', }, }, + /** + * Prettier + */ + { + files: [ + '.eslintrc.js', + 'packages/kbn-utility-types/**/*', + 'packages/kbn-eslint-plugin-eslint/**/*', + 'packages/kbn-config-schema/**/*', + 'packages/kbn-pm/**/*', + 'packages/kbn-es/**/*', + 'packages/elastic-datemath/**/*', + 'packages/kbn-i18n/**/*', + 'packages/kbn-dev-utils/**/*', + 'packages/kbn-plugin-helpers/**/*', + 'packages/kbn-plugin-generator/**/*', + 'packages/kbn-test-subj-selector/**/*', + 'packages/kbn-test/**/*', + 'packages/kbn-eslint-import-resolver-kibana/**/*', + 'src/legacy/server/saved_objects/**/*', + 'x-pack/legacy/plugins/apm/**/*', + 'x-pack/legacy/plugins/canvas/**/*', + '**/*.{ts,tsx}', + 'src/legacy/core_plugins/metrics/**/*.js', + ], + plugins: ['prettier'], + rules: Object.assign( + { + 'prettier/prettier': [ + 'error', + { + endOfLine: 'auto', + }, + ], + }, + require('eslint-config-prettier').rules, + require('eslint-config-prettier/react').rules + ), + }, + /** * Files that require Apache 2.0 headers, settings * are overridden below for files that require Elastic From a3d68a43ba85d30b06565e57d69b58450ac456a8 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 18 Nov 2019 11:22:52 -0500 Subject: [PATCH 2/8] Update hooks usage to adhere to new eslint rules. --- .../functional/charts/donut_chart.tsx | 2 +- .../functional/charts/snapshot_histogram.tsx | 7 ++-- .../components/functional/kuery_bar/index.tsx | 2 +- .../components/functional/monitor_charts.tsx | 2 +- .../functional/ping_list/ping_list.tsx | 39 +++++++++++-------- .../higher_order/uptime_graphql_query.tsx | 3 ++ .../plugins/uptime/public/pages/monitor.tsx | 4 +- .../plugins/uptime/public/pages/overview.tsx | 2 +- .../plugins/uptime/public/uptime_app.tsx | 2 +- 9 files changed, 36 insertions(+), 27 deletions(-) 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 76c3bd5d4c50d..e2705e7cbacb3 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 37edd20871245..bacd06dbe162d 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 da392660eb70e..72e88d2824073 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/monitor_charts.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx index 7d8e788f49ea0..809618f07a6c1 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/ping_list/ping_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/ping_list/ping_list.tsx index 496cb67ec06c5..7a86fdefb7823 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 @@ -85,7 +85,7 @@ export const PingListComponent = ({ useEffect(() => { onUpdateApp(); - }, [selectedOption]); + }, [onUpdateApp, selectedOption]); const statusOptions = [ { @@ -181,21 +181,28 @@ 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 - ); - if (hasStatus) { - columns.push({ - field: 'http.response.status_code', - align: 'center', - name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', { - defaultMessage: 'Response code', - }), - render: (statusCode: string) => {statusCode}, - }); + useEffect(() => { + onUpdateApp(); + }, [onUpdateApp, selectedOption]); + let pings: Ping[] = []; + if (data && data.allPings && data.allPings.pings) { + pings = data.allPings.pings; + const hasStatus: boolean = pings.reduce( + (hasHttpStatus: boolean, currentPing: Ping) => + hasHttpStatus || !!get(currentPing, 'http.response.status_code'), + false + ); + if (hasStatus) { + columns.push({ + field: 'http.response.status_code', + // @ts-ignore "align" property missing on type definition for column type + align: 'right', + name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', { + defaultMessage: 'Response code', + }), + render: (statusCode: string) => {statusCode}, + }); + } } columns.push({ 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 219f92ce36e63..6839050cec7a8 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 8c5fced2f2864..85458e973e6cc 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 }); diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx index 561cc934a9b76..8e72f964ed128 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 456aff1f9a24d..f72055c52255d 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(); From d190dc227a02829c13c0c68aa562b04bf74673a1 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 18 Dec 2019 12:21:14 -0500 Subject: [PATCH 3/8] Delete code accidentally added during rebase. --- .eslintrc.js | 40 ---------------------------------------- 1 file changed, 40 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index f190e287920b5..4cf98485912b6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -197,46 +197,6 @@ module.exports = { }, }, - /** - * Prettier - */ - { - files: [ - '.eslintrc.js', - 'packages/kbn-utility-types/**/*', - 'packages/kbn-eslint-plugin-eslint/**/*', - 'packages/kbn-config-schema/**/*', - 'packages/kbn-pm/**/*', - 'packages/kbn-es/**/*', - 'packages/elastic-datemath/**/*', - 'packages/kbn-i18n/**/*', - 'packages/kbn-dev-utils/**/*', - 'packages/kbn-plugin-helpers/**/*', - 'packages/kbn-plugin-generator/**/*', - 'packages/kbn-test-subj-selector/**/*', - 'packages/kbn-test/**/*', - 'packages/kbn-eslint-import-resolver-kibana/**/*', - 'src/legacy/server/saved_objects/**/*', - 'x-pack/legacy/plugins/apm/**/*', - 'x-pack/legacy/plugins/canvas/**/*', - '**/*.{ts,tsx}', - 'src/legacy/core_plugins/metrics/**/*.js', - ], - plugins: ['prettier'], - rules: Object.assign( - { - 'prettier/prettier': [ - 'error', - { - endOfLine: 'auto', - }, - ], - }, - require('eslint-config-prettier').rules, - require('eslint-config-prettier/react').rules - ), - }, - /** * Files that require Apache 2.0 headers, settings * are overridden below for files that require Elastic From 80ae816e90484b0b27d984956f8925cf03154894 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 18 Dec 2019 12:22:33 -0500 Subject: [PATCH 4/8] WIP trying things. --- .eslintrc.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4cf98485912b6..03a674993ab50 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -189,13 +189,6 @@ module.exports = { 'react-hooks/exhaustive-deps': 'off', }, }, - { - files: ['x-pack/legacy/plugins/watcher/**/*.{js,ts,tsx}'], - rules: { - 'react-hooks/rules-of-hooks': 'off', - 'react-hooks/exhaustive-deps': 'off', - }, - }, /** * Files that require Apache 2.0 headers, settings From a2d18333e778ce74226ea613c272cec53702eacf Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 18 Dec 2019 13:52:07 -0500 Subject: [PATCH 5/8] Clean up types and hook usage to comply with kibana eslint rules. --- .../__tests__/__snapshots__/ping_list.test.tsx.snap | 2 +- .../ping_list/__tests__/ping_list.test.tsx | 1 - .../components/functional/ping_list/ping_list.tsx | 13 +------------ .../legacy/plugins/uptime/public/pages/monitor.tsx | 8 ++++---- 4 files changed, 6 insertions(+), 18 deletions(-) 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 a2e31a0f33d39..692675baa8950 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 43adc4da85f32..ba07d6c63b36c 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 7a86fdefb7823..2a1c4b3f748c8 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 @@ -21,9 +21,7 @@ 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 { Ping, PingResults } from '../../../../common/graphql/types'; import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper'; import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order'; @@ -40,7 +38,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 +73,12 @@ export const PingListComponent = ({ onPageCountChange, onSelectedLocationChange, onSelectedStatusChange, - onUpdateApp, pageSize, selectedOption, selectedLocation, }: Props) => { const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState({}); - useEffect(() => { - onUpdateApp(); - }, [onUpdateApp, selectedOption]); - const statusOptions = [ { text: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', { @@ -181,9 +173,6 @@ export const PingListComponent = ({ render: (error: string) => error ?? '-', }, ]; - useEffect(() => { - onUpdateApp(); - }, [onUpdateApp, selectedOption]); let pings: Ping[] = []; if (data && data.allPings && data.allPings.pings) { pings = data.allPings.pings; diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx index 85458e973e6cc..8c5649f680fcb 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx @@ -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} From 89cc45590b373cd72d142925e3a17cccf1ddc987 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 18 Dec 2019 14:21:02 -0500 Subject: [PATCH 6/8] Clean up code. --- .../functional/ping_list/ping_list.tsx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) 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 2a1c4b3f748c8..71b1255b3b37e 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,12 +23,13 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { get } from 'lodash'; import moment from 'moment'; 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 { @@ -173,25 +175,21 @@ export const PingListComponent = ({ render: (error: string) => error ?? '-', }, ]; - let pings: Ping[] = []; - if (data && data.allPings && data.allPings.pings) { - pings = data.allPings.pings; - const hasStatus: boolean = pings.reduce( - (hasHttpStatus: boolean, currentPing: Ping) => - hasHttpStatus || !!get(currentPing, 'http.response.status_code'), - false - ); - if (hasStatus) { - columns.push({ - field: 'http.response.status_code', - // @ts-ignore "align" property missing on type definition for column type - align: 'right', - name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', { - defaultMessage: 'Response code', - }), - render: (statusCode: string) => {statusCode}, - }); - } + const pings: Ping[] = data?.allPings?.pings ?? []; + 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: 'right', + name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', { + defaultMessage: 'Response code', + }), + render: (statusCode: string) => {statusCode}, + }); } columns.push({ @@ -302,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) + } /> From 0dc6590e0380637db1c3751713521456c3393274 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 18 Dec 2019 16:01:20 -0500 Subject: [PATCH 7/8] Update new useEffect hooks that are missing dependencies. --- .../location_map/embeddables/embedded_map.tsx | 42 +++++++++---------- .../monitor_list_drawer.tsx | 10 +++-- .../monitor_status_details.tsx | 2 +- .../public/components/functional/snapshot.tsx | 2 +- 4 files changed, 29 insertions(+), 27 deletions(-) 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 a5578d9e05667..b2f77458aa11b 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,19 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => { setEmbeddable(embeddableObject); } setupEmbeddable(); - }, []); + }, [downPoints, factory, input, upPoints]); useEffect(() => { if (embeddable) { embeddable.setLayerList(getLayerList(upPoints, downPoints)); } - }, [upPoints, downPoints]); + }, [embeddable, upPoints, downPoints]); 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_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 12f6f47f01b49..d793e60dcd089 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 cf337eaec4bbc..ed67c6364e958 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/snapshot.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx index e0d282a5348a0..4c1b482b198af 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 ; }; From 97b1f43d88af0ad2c456541d21599d154994c75c Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 19 Dec 2019 14:20:28 -0500 Subject: [PATCH 8/8] Fix edits that broke a page. --- .../functional/location_map/embeddables/embedded_map.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 b2f77458aa11b..93de1d478fb83 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 @@ -76,13 +76,15 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => { setEmbeddable(embeddableObject); } setupEmbeddable(); - }, [downPoints, factory, input, upPoints]); + // 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)); } - }, [embeddable, upPoints, downPoints]); + }, [upPoints, downPoints, embeddable]); useEffect(() => { if (embeddableRoot.current && embeddable) {