From 4b187dd02bf700780ecc9accab7305df71040915 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Mon, 11 May 2020 20:27:08 +0200 Subject: [PATCH 1/4] call index pattern only once --- .../components/overview/kuery_bar/index.ts | 2 +- .../overview/kuery_bar/kuery_bar.tsx | 15 ++---- .../kuery_bar/kuery_bar_container.tsx | 21 --------- .../overview/kuery_bar/use_index_pattern.ts | 23 +++++++++ .../overview/monitor_list/monitor_list.tsx | 36 ++++---------- .../monitor_list/monitor_list_container.tsx | 47 +++++++++++++++---- .../overview/overview_container.tsx | 11 ++++- .../plugins/uptime/public/pages/overview.tsx | 1 + .../uptime/public/state/selectors/index.ts | 2 +- 9 files changed, 83 insertions(+), 75 deletions(-) delete mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar_container.tsx create mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/use_index_pattern.ts diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/index.ts b/x-pack/plugins/uptime/public/components/overview/kuery_bar/index.ts index 60801a0ab705a..6539e960f5a59 100644 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/index.ts +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/index.ts @@ -5,4 +5,4 @@ */ export { KueryBarComponent } from './kuery_bar'; -export { KueryBar } from './kuery_bar_container'; +export { KueryBar } from './kuery_bar'; diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx index 792fff4c7cdca..a82d87760ccb2 100644 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx @@ -17,6 +17,7 @@ import { QuerySuggestion, DataPublicPluginSetup, } from '../../../../../../../src/plugins/data/public'; +import { useIndexPattern } from './use_index_pattern'; const Container = styled.div` margin-bottom: 10px; @@ -36,24 +37,14 @@ interface Props { 'aria-label': string; autocomplete: DataPublicPluginSetup['autocomplete']; 'data-test-subj': string; - loadIndexPattern: () => void; - indexPattern: IIndexPattern | null; - loading: boolean; } -export function KueryBarComponent({ +export function KueryBar({ 'aria-label': ariaLabel, autocomplete: autocompleteService, 'data-test-subj': dataTestSubj, - loadIndexPattern, - indexPattern, - loading, }: Props) { - useEffect(() => { - if (!indexPattern) { - loadIndexPattern(); - } - }, [indexPattern, loadIndexPattern]); + const { loading, index_pattern: indexPattern } = useIndexPattern(); const [state, setState] = useState({ suggestions: [], diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar_container.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar_container.tsx deleted file mode 100644 index 5e1e184b2d6e6..0000000000000 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar_container.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* - * 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 { connect } from 'react-redux'; -import { AppState } from '../../../state'; -import { selectIndexPattern } from '../../../state/selectors'; -import { getIndexPattern } from '../../../state/actions'; -import { KueryBarComponent } from './kuery_bar'; - -const mapStateToProps = (state: AppState) => ({ ...selectIndexPattern(state) }); - -const mapDispatchToProps = (dispatch: any) => ({ - loadIndexPattern: () => { - dispatch(getIndexPattern({})); - }, -}); - -export const KueryBar = connect(mapStateToProps, mapDispatchToProps)(KueryBarComponent); diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/use_index_pattern.ts b/x-pack/plugins/uptime/public/components/overview/kuery_bar/use_index_pattern.ts new file mode 100644 index 0000000000000..db01f5e10193c --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/use_index_pattern.ts @@ -0,0 +1,23 @@ +/* + * 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 { useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { getIndexPattern } from '../../../state/actions'; +import { selectIndexPattern } from '../../../state/selectors'; + +export const useIndexPattern = () => { + const dispatch = useDispatch(); + const indexPattern = useSelector(selectIndexPattern); + + useEffect(() => { + if (!indexPattern) { + dispatch(getIndexPattern()); + } + }, [indexPattern, dispatch]); + + return indexPattern; +}; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx index ae07cd8dddfb4..bf9bc3d1d4bfe 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx @@ -33,9 +33,9 @@ import { CertStatusColumn } from './cert_status_column'; import { MonitorListHeader } from './monitor_list_header'; interface Props extends MonitorListProps { - lastRefresh: number; + pageSize: number; + setPageSize: (val: number) => void; monitorList: MonitorList; - getMonitorList: (params: FetchMonitorStatesQueryArgs) => void; } const TruncatedEuiLink = styled(EuiLink)` @@ -56,36 +56,16 @@ const getPageSizeValue = () => { export const MonitorListComponent: React.FC = ({ filters, - getMonitorList, - lastRefresh, monitorList: { list, error, loading }, linkParameters, + pageSize, + setPageSize, }) => { - const [pageSize, setPageSize] = useState(getPageSizeValue()); - const [drawerIds, updateDrawerIds] = useState([]); - - const [getUrlValues] = useUrlParams(); - const { dateRangeStart, dateRangeEnd, pagination, statusFilter } = getUrlValues(); - useEffect(() => { - getMonitorList({ - dateRangeStart, - dateRangeEnd, - filters, - pageSize, - pagination, - statusFilter, - }); - }, [ - getMonitorList, - dateRangeStart, - dateRangeEnd, - filters, - lastRefresh, - pageSize, - pagination, - statusFilter, - ]); + setPageSize(getPageSizeValue()); + }, [setPageSize]); + + const [drawerIds, updateDrawerIds] = useState([]); const items = list.summaries ?? []; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx index 6fb880e28c734..710a58d67bcdd 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx @@ -4,12 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useCallback } from 'react'; +import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { getMonitorList } from '../../../state/actions'; -import { FetchMonitorStatesQueryArgs } from '../../../../common/runtime_types'; import { monitorListSelector } from '../../../state/selectors'; import { MonitorListComponent } from './monitor_list'; +import { useUrlParams } from '../../../hooks'; export interface MonitorListProps { filters?: string; @@ -17,18 +17,45 @@ export interface MonitorListProps { } export const MonitorList: React.FC = props => { + const { filters } = props; + + const [pageSize, setPageSize] = useState(10); + const dispatch = useDispatch(); - const dispatchCallback = useCallback( - (params: FetchMonitorStatesQueryArgs) => { - dispatch(getMonitorList(params)); - }, - [dispatch] - ); + const [getUrlValues] = useUrlParams(); + const { dateRangeStart, dateRangeEnd, pagination, statusFilter } = getUrlValues(); + + const { lastRefresh, monitorList } = useSelector(monitorListSelector); - const monitorListState = useSelector(monitorListSelector); + useEffect(() => { + dispatch( + getMonitorList({ + dateRangeStart, + dateRangeEnd, + filters, + pageSize, + pagination, + statusFilter, + }) + ); + }, [ + dispatch, + dateRangeStart, + dateRangeEnd, + filters, + lastRefresh, + pageSize, + pagination, + statusFilter, + ]); return ( - + ); }; diff --git a/x-pack/plugins/uptime/public/components/overview/overview_container.tsx b/x-pack/plugins/uptime/public/components/overview/overview_container.tsx index 320536bc63b3c..8834f875ec29f 100644 --- a/x-pack/plugins/uptime/public/components/overview/overview_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/overview_container.tsx @@ -17,12 +17,19 @@ export interface OverviewPageProps { export const OverviewPage: React.FC = props => { const dispatch = useDispatch(); + const setEsKueryFilters = useCallback( (esFilters: string) => dispatch(setEsKueryString(esFilters)), [dispatch] ); - const indexPattern = useSelector(selectIndexPattern); + const { index_pattern: indexPattern, loading } = useSelector(selectIndexPattern); + return ( - + ); }; diff --git a/x-pack/plugins/uptime/public/pages/overview.tsx b/x-pack/plugins/uptime/public/pages/overview.tsx index 65f64aa7352a9..1752ad2872fa2 100644 --- a/x-pack/plugins/uptime/public/pages/overview.tsx +++ b/x-pack/plugins/uptime/public/pages/overview.tsx @@ -57,6 +57,7 @@ export const OverviewPageComponent = ({ autocomplete, indexPattern, setEsKueryFi }); useBreadcrumbs([]); // No extra breadcrumbs on overview + return ( <> diff --git a/x-pack/plugins/uptime/public/state/selectors/index.ts b/x-pack/plugins/uptime/public/state/selectors/index.ts index 2b7eabe727ad1..fc9097c0adaaf 100644 --- a/x-pack/plugins/uptime/public/state/selectors/index.ts +++ b/x-pack/plugins/uptime/public/state/selectors/index.ts @@ -27,7 +27,7 @@ export const monitorStatusSelector = (state: AppState) => state.monitorStatus.st export const selectDynamicSettings = (state: AppState) => state.dynamicSettings; export const selectIndexPattern = ({ indexPattern }: AppState) => { - return { indexPattern: indexPattern.index_pattern, loading: indexPattern.loading }; + return indexPattern; }; export const selectPingHistogram = ({ ping, ui }: AppState) => { From 4f854f2a793c2235882bf049597a83db15c0fef8 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 12 May 2020 03:53:39 +0200 Subject: [PATCH 2/4] optimize rendering --- .../ping_histogram_container.tsx | 11 +- .../monitor/ping_list/ping_list_container.tsx | 13 +- .../filters_expression_select.tsx | 4 +- .../__snapshots__/empty_state.test.tsx.snap | 327 +++++++++++++++--- .../overview/empty_state/empty_state.tsx | 79 +++-- .../filter_group/filter_group_container.tsx | 5 +- .../components/overview/kuery_bar/index.ts | 1 - .../overview/kuery_bar/kuery_bar.tsx | 2 +- .../__snapshots__/monitor_list.test.tsx.snap | 26 +- .../__tests__/monitor_list.test.tsx | 28 +- .../overview/monitor_list/monitor_list.tsx | 3 +- .../monitor_list/monitor_list_container.tsx | 7 +- .../overview/snapshot/snapshot_container.tsx | 10 +- .../contexts/uptime_refresh_context.tsx | 4 - .../__snapshots__/overview.test.tsx.snap | 3 +- .../public/pages/__tests__/overview.test.tsx | 1 + .../plugins/uptime/public/pages/overview.tsx | 89 ++--- .../plugins/uptime/public/state/actions/ui.ts | 2 - .../__tests__/__snapshots__/ui.test.ts.snap | 12 - .../state/reducers/__tests__/ui.test.ts | 27 +- .../uptime/public/state/reducers/ui.ts | 8 - .../state/selectors/__tests__/index.test.ts | 1 - .../uptime/public/state/selectors/index.ts | 54 +-- 23 files changed, 441 insertions(+), 276 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx index ad855419d8865..263a0c0426e40 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx @@ -4,14 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect } from 'react'; +import React, { useContext, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { PingHistogramComponent } from '../../common/charts'; import { getPingHistogram } from '../../../state/actions'; -import { selectPingHistogram } from '../../../state/selectors'; +import { esKuerySelector, selectPingHistogram } from '../../../state/selectors'; import { useGetUrlParams } from '../../../hooks'; import { useMonitorId } from '../../../hooks'; import { ResponsiveWrapperProps, withResponsiveWrapper } from '../../common/higher_order'; +import { UptimeRefreshContext } from '../../../contexts'; interface Props { height: string; @@ -28,7 +29,11 @@ const Container: React.FC = ({ height }) => { const dispatch = useDispatch(); const monitorId = useMonitorId(); - const { loading, data, esKuery, lastRefresh } = useSelector(selectPingHistogram); + const { lastRefresh } = useContext(UptimeRefreshContext); + + const esKuery = useSelector(esKuerySelector); + + const { loading, pingHistogram: data } = useSelector(selectPingHistogram); useEffect(() => { dispatch(getPingHistogram({ monitorId, dateStart, dateEnd, filters: esKuery })); diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_container.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_container.tsx index 3c3caab365e3a..4d4bb175be9a8 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_container.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_container.tsx @@ -9,7 +9,7 @@ import React, { useContext, useCallback } from 'react'; import { selectPingList } from '../../../state/selectors'; import { getPings } from '../../../state/actions'; import { GetPingsParams } from '../../../../common/runtime_types'; -import { UptimeSettingsContext } from '../../../contexts'; +import { UptimeRefreshContext, UptimeSettingsContext } from '../../../contexts'; import { PingListComponent } from './index'; export interface PingListProps { @@ -18,14 +18,13 @@ export interface PingListProps { export const PingList = (props: PingListProps) => { const { - lastRefresh, - pings: { - error, - loading, - pingList: { locations, pings, total }, - }, + error, + loading, + pingList: { locations, pings, total }, } = useSelector(selectPingList); + const { lastRefresh } = useContext(UptimeRefreshContext); + const { dateRangeStart: drs, dateRangeEnd: dre } = useContext(UptimeSettingsContext); const dispatch = useDispatch(); diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx index 8298f202b9458..f3ed2fd0ed0f1 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx +++ b/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx @@ -24,7 +24,9 @@ export const FiltersExpressionsSelect: React.FC = ({ newFilters, onRemoveFilter, }) => { - const { tags, ports, schemes, locations } = useSelector(overviewFiltersSelector); + const { + filters: { tags, ports, schemes, locations }, + } = useSelector(overviewFiltersSelector); const [updatedFieldValues, setUpdatedFieldValues] = useState<{ fieldName: string; diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap index d0e7af24e1c1b..48dbe212f6923 100644 --- a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap @@ -583,65 +583,298 @@ exports[`EmptyState component doesn't render child components when count is fals loading={false} statesIndexStatus={null} > - - - - - -

- Loading… -

- - - } + , + } + } + /> + } + > +
- - - +
+ + +
- + + + + + + + + + + + + } + body={ + +

+ +

+

+ +

+ + } + iconType="logoUptime" + title={ + +

+ , + } + } + /> +

+ + } > - - -
- - -

- Loading… -

- + +
+ + +
+ + + + + +

+ , + } + } + > + No indices found matching pattern + + +

+ + + +
+ + +
+

+ + If you have not setup heartbeat yet, you can setup heartbeat to start monitoring your services. + +

+

+ + If you have setup heartbeat and confirmed data is being sent to Elasticsearch, update your index pattern settings and insure they are aligned with your Heartbeat config. + +

+
+ + + + + - - - + +
+
- - + + `; diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/empty_state.tsx b/x-pack/plugins/uptime/public/components/overview/empty_state/empty_state.tsx index d38f203739cea..71779646d0a38 100644 --- a/x-pack/plugins/uptime/public/components/overview/empty_state/empty_state.tsx +++ b/x-pack/plugins/uptime/public/components/overview/empty_state/empty_state.tsx @@ -30,43 +30,46 @@ export const EmptyStateComponent = ({ if (errors?.length) { return ; } - if (!loading && statesIndexStatus) { - const { indexExists, docCount } = statesIndexStatus; - if (!indexExists) { - return ( - {settings?.heartbeatIndices} }} - /> - } - /> - ); - } else if (indexExists && docCount === 0) { - return ( - {settings?.heartbeatIndices} }} - /> - } - /> - ); - } - /** - * We choose to render the children any time the count > 0, even if - * the component is loading. If we render the loading state for this component, - * it will blow away the state of child components and trigger an ugly - * jittery UX any time the components refresh. This way we'll keep the stale - * state displayed during the fetching process. - */ - return {children}; + const { indexExists, docCount } = statesIndexStatus ?? {}; + + if (loading && (!indexExists || docCount === 0 || !statesIndexStatus)) { + return ; + } + + if (!indexExists) { + return ( + {settings?.heartbeatIndices} }} + /> + } + /> + ); + } else if (indexExists && docCount === 0) { + return ( + {settings?.heartbeatIndices} }} + /> + } + /> + ); } - return ; + /** + * We choose to render the children any time the count > 0, even if + * the component is loading. If we render the loading state for this component, + * it will blow away the state of child components and trigger an ugly + * jittery UX any time the components refresh. This way we'll keep the stale + * state displayed during the fetching process. + */ + return {children}; + // } }; diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group_container.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group_container.tsx index 67cb89745269e..928e790028ba0 100644 --- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group_container.tsx @@ -11,7 +11,7 @@ import { parseFiltersMap } from './parse_filter_map'; import { fetchOverviewFilters } from '../../../state/actions'; import { FilterGroupComponent } from './index'; import { UptimeRefreshContext } from '../../../contexts'; -import { filterGroupDataSelector } from '../../../state/selectors'; +import { esKuerySelector, overviewFiltersSelector } from '../../../state/selectors'; interface Props { esFilters?: string; @@ -20,7 +20,8 @@ interface Props { export const FilterGroup: React.FC = ({ esFilters }: Props) => { const { lastRefresh } = useContext(UptimeRefreshContext); - const { esKuery, filters: overviewFilters, loading } = useSelector(filterGroupDataSelector); + const { filters: overviewFilters, loading } = useSelector(overviewFiltersSelector); + const esKuery = useSelector(esKuerySelector); const { dateRangeStart, dateRangeEnd, statusFilter, filters: urlFilters } = useGetUrlParams(); diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/index.ts b/x-pack/plugins/uptime/public/components/overview/kuery_bar/index.ts index 6539e960f5a59..20c729da3f5b5 100644 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/index.ts +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/index.ts @@ -4,5 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { KueryBarComponent } from './kuery_bar'; export { KueryBar } from './kuery_bar'; diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx index a82d87760ccb2..512b6f4292abe 100644 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { uniqueId, startsWith } from 'lodash'; import { EuiCallOut } from '@elastic/eui'; import styled from 'styled-components'; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap index 727cf2518549d..29880c59b8417 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap @@ -52,8 +52,6 @@ exports[`MonitorList component MonitorListPagination component renders a no item } > `; @@ -121,8 +121,6 @@ exports[`MonitorList component MonitorListPagination component renders the pagin } > `; @@ -252,8 +252,6 @@ exports[`MonitorList component renders a no items message when no data is provid } > `; @@ -321,8 +321,6 @@ exports[`MonitorList component renders error list 1`] = ` } > `; @@ -453,8 +453,6 @@ exports[`MonitorList component renders loading state 1`] = ` } > `; @@ -1177,7 +1177,7 @@ exports[`MonitorList component renders the monitor list 1`] = ` - Rows per page: 25 + Rows per page: 10 @@ -1282,8 +1282,6 @@ exports[`MonitorList component shallow renders the monitor list 1`] = ` } > `; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx index 9dd44f5176664..cf6d137e8692b 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx @@ -106,8 +106,8 @@ describe('MonitorList component', () => { const component = shallowWithRouter( ); @@ -126,8 +126,8 @@ describe('MonitorList component', () => { }, loading: true, }} - lastRefresh={123} - getMonitorList={jest.fn()} + pageSize={10} + setPageSize={jest.fn()} /> ); expect(component).toMatchSnapshot(); @@ -137,8 +137,8 @@ describe('MonitorList component', () => { const component = renderWithRouter( ); @@ -149,8 +149,8 @@ describe('MonitorList component', () => { const component = shallowWithRouter( ); @@ -161,8 +161,8 @@ describe('MonitorList component', () => { const component = shallowWithRouter( ); @@ -260,8 +260,8 @@ describe('MonitorList component', () => { }, loading: false, }} - lastRefresh={123} - getMonitorList={jest.fn()} + pageSize={10} + setPageSize={jest.fn()} /> ); @@ -280,8 +280,8 @@ describe('MonitorList component', () => { }, loading: false, }} - lastRefresh={123} - getMonitorList={jest.fn()} + pageSize={10} + setPageSize={jest.fn()} /> ); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx index bf9bc3d1d4bfe..720f0f9347e6e 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx @@ -16,7 +16,7 @@ import { } from '@elastic/eui'; import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; -import { HistogramPoint, FetchMonitorStatesQueryArgs } from '../../../../common/runtime_types'; +import { HistogramPoint } from '../../../../common/runtime_types'; import { MonitorSummary } from '../../../../common/runtime_types'; import { MonitorListStatusColumn } from './monitor_list_status_column'; import { ExpandedRowMap } from './types'; @@ -28,7 +28,6 @@ import { MonitorListPageSizeSelect } from './monitor_list_page_size_select'; import { MonitorListDrawer } from './monitor_list_drawer/list_drawer_container'; import { MonitorListProps } from './monitor_list_container'; import { MonitorList } from '../../../state/reducers/monitor_list'; -import { useUrlParams } from '../../../hooks'; import { CertStatusColumn } from './cert_status_column'; import { MonitorListHeader } from './monitor_list_header'; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx index 710a58d67bcdd..2336206efd7bf 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx @@ -4,12 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { getMonitorList } from '../../../state/actions'; import { monitorListSelector } from '../../../state/selectors'; import { MonitorListComponent } from './monitor_list'; import { useUrlParams } from '../../../hooks'; +import { UptimeRefreshContext } from '../../../contexts'; export interface MonitorListProps { filters?: string; @@ -26,7 +27,9 @@ export const MonitorList: React.FC = props => { const [getUrlValues] = useUrlParams(); const { dateRangeStart, dateRangeEnd, pagination, statusFilter } = getUrlValues(); - const { lastRefresh, monitorList } = useSelector(monitorListSelector); + const { lastRefresh } = useContext(UptimeRefreshContext); + + const monitorList = useSelector(monitorListSelector); useEffect(() => { dispatch( diff --git a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx index 0fd52f0a0be4f..faa1311b20d20 100644 --- a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx @@ -4,12 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect } from 'react'; +import React, { useContext, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useGetUrlParams } from '../../../hooks'; import { getSnapshotCountAction } from '../../../state/actions'; import { SnapshotComponent } from './snapshot'; -import { snapshotDataSelector } from '../../../state/selectors'; +import { esKuerySelector, snapshotDataSelector } from '../../../state/selectors'; +import { UptimeRefreshContext } from '../../../contexts'; interface Props { /** @@ -21,7 +22,10 @@ interface Props { export const Snapshot: React.FC = ({ height }: Props) => { const { dateRangeStart, dateRangeEnd } = useGetUrlParams(); - const { count, lastRefresh, loading, esKuery } = useSelector(snapshotDataSelector); + const { lastRefresh } = useContext(UptimeRefreshContext); + + const { count, loading } = useSelector(snapshotDataSelector); + const esKuery = useSelector(esKuerySelector); const dispatch = useDispatch(); diff --git a/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx b/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx index 8e406f621f648..b78a6492e2dcd 100644 --- a/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx +++ b/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx @@ -5,8 +5,6 @@ */ import React, { createContext, useMemo, useState } from 'react'; -import { store } from '../state'; -import { triggerAppRefresh } from '../state/actions'; interface UptimeRefreshContext { lastRefresh: number; @@ -28,8 +26,6 @@ export const UptimeRefreshContextProvider: React.FC = ({ children }) => { const refreshApp = () => { const refreshTime = Date.now(); setLastRefresh(refreshTime); - // @ts-ignore - store.dispatch(triggerAppRefresh(refreshTime)); }; const value = useMemo(() => { diff --git a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap index 71b3fb5c7146a..cb132b5a542da 100644 --- a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap +++ b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/overview.test.tsx.snap @@ -51,7 +51,7 @@ exports[`MonitorPage shallow renders expected elements for valid props 1`] = ` } } > - diff --git a/x-pack/plugins/uptime/public/pages/__tests__/overview.test.tsx b/x-pack/plugins/uptime/public/pages/__tests__/overview.test.tsx index 86713c606c1bb..e2f0b6f250b0e 100644 --- a/x-pack/plugins/uptime/public/pages/__tests__/overview.test.tsx +++ b/x-pack/plugins/uptime/public/pages/__tests__/overview.test.tsx @@ -102,6 +102,7 @@ describe('MonitorPage', () => { autocomplete={autocomplete} indexPattern={indexPattern} setEsKueryFilters={jest.fn()} + loading={false} /> ) ).toMatchSnapshot(); diff --git a/x-pack/plugins/uptime/public/pages/overview.tsx b/x-pack/plugins/uptime/public/pages/overview.tsx index 1752ad2872fa2..bf42680a18ae4 100644 --- a/x-pack/plugins/uptime/public/pages/overview.tsx +++ b/x-pack/plugins/uptime/public/pages/overview.tsx @@ -21,6 +21,7 @@ import { StatusPanel } from '../components/overview/status_panel'; import { OverviewPageProps } from '../components/overview/overview_container'; interface Props extends OverviewPageProps { + loading: boolean; indexPattern: IIndexPattern | null; setEsKueryFilters: (esFilters: string) => void; } @@ -34,54 +35,56 @@ const EuiFlexItemStyled = styled(EuiFlexItem)` } `; -export const OverviewPageComponent = ({ autocomplete, indexPattern, setEsKueryFilters }: Props) => { - const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useGetUrlParams(); - const { search, filters: urlFilters } = params; +export const OverviewPageComponent = React.memo( + ({ autocomplete, indexPattern, setEsKueryFilters, loading }: Props) => { + const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useGetUrlParams(); + const { search, filters: urlFilters } = params; - useUptimeTelemetry(UptimePage.Overview); + useUptimeTelemetry(UptimePage.Overview); - useTrackPageview({ app: 'uptime', path: 'overview' }); - useTrackPageview({ app: 'uptime', path: 'overview', delay: 15000 }); + useTrackPageview({ app: 'uptime', path: 'overview' }); + useTrackPageview({ app: 'uptime', path: 'overview', delay: 15000 }); - const [esFilters, error] = useUpdateKueryString(indexPattern, search, urlFilters); + const [esFilters, error] = useUpdateKueryString(indexPattern, search, urlFilters); - useEffect(() => { - setEsKueryFilters(esFilters ?? ''); - }, [esFilters, setEsKueryFilters]); + useEffect(() => { + setEsKueryFilters(esFilters ?? ''); + }, [esFilters, setEsKueryFilters]); - const linkParameters = stringifyUrlParams(params, true); + const linkParameters = stringifyUrlParams(params, true); - const heading = i18n.translate('xpack.uptime.overviewPage.headerText', { - defaultMessage: 'Overview', - description: `The text that will be displayed in the app's heading when the Overview page loads.`, - }); + const heading = i18n.translate('xpack.uptime.overviewPage.headerText', { + defaultMessage: 'Overview', + description: `The text that will be displayed in the app's heading when the Overview page loads.`, + }); - useBreadcrumbs([]); // No extra breadcrumbs on overview + useBreadcrumbs([]); // No extra breadcrumbs on overview - return ( - <> - - - - - - - - - - {error && } - - - - - - - - ); -}; + return ( + <> + + + + + + + + + + {error && !loading && } + + + + + + + + ); + } +); diff --git a/x-pack/plugins/uptime/public/state/actions/ui.ts b/x-pack/plugins/uptime/public/state/actions/ui.ts index 80e8796843ac2..0d21e177d3e40 100644 --- a/x-pack/plugins/uptime/public/state/actions/ui.ts +++ b/x-pack/plugins/uptime/public/state/actions/ui.ts @@ -18,8 +18,6 @@ export const setAlertFlyoutType = createAction('SET ALERT FLYOUT TYPE'); export const setBasePath = createAction('SET BASE PATH'); -export const triggerAppRefresh = createAction('REFRESH APP'); - export const setEsKueryString = createAction('SET ES KUERY STRING'); export const toggleIntegrationsPopover = createAction( diff --git a/x-pack/plugins/uptime/public/state/reducers/__tests__/__snapshots__/ui.test.ts.snap b/x-pack/plugins/uptime/public/state/reducers/__tests__/__snapshots__/ui.test.ts.snap index 1dc4e45606c60..f8faf78fbc504 100644 --- a/x-pack/plugins/uptime/public/state/reducers/__tests__/__snapshots__/ui.test.ts.snap +++ b/x-pack/plugins/uptime/public/state/reducers/__tests__/__snapshots__/ui.test.ts.snap @@ -9,7 +9,6 @@ Object { "id": "popover-2", "open": true, }, - "lastRefresh": 125, } `; @@ -19,16 +18,5 @@ Object { "basePath": "yyz", "esKuery": "", "integrationsPopoverOpen": null, - "lastRefresh": 125, -} -`; - -exports[`ui reducer updates the refresh value 1`] = ` -Object { - "alertFlyoutVisible": false, - "basePath": "abc", - "esKuery": "", - "integrationsPopoverOpen": null, - "lastRefresh": 125, } `; diff --git a/x-pack/plugins/uptime/public/state/reducers/__tests__/ui.test.ts b/x-pack/plugins/uptime/public/state/reducers/__tests__/ui.test.ts index 3c134366347aa..94bc626088c84 100644 --- a/x-pack/plugins/uptime/public/state/reducers/__tests__/ui.test.ts +++ b/x-pack/plugins/uptime/public/state/reducers/__tests__/ui.test.ts @@ -4,12 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { - setBasePath, - toggleIntegrationsPopover, - triggerAppRefresh, - setAlertFlyoutVisible, -} from '../../actions'; +import { setBasePath, toggleIntegrationsPopover, setAlertFlyoutVisible } from '../../actions'; import { uiReducer } from '../ui'; import { Action } from 'redux-actions'; @@ -23,7 +18,6 @@ describe('ui reducer', () => { basePath: 'abc', esKuery: '', integrationsPopoverOpen: null, - lastRefresh: 125, }, action ) @@ -42,23 +36,6 @@ describe('ui reducer', () => { basePath: '', esKuery: '', integrationsPopoverOpen: null, - lastRefresh: 125, - }, - action - ) - ).toMatchSnapshot(); - }); - - it('updates the refresh value', () => { - const action = triggerAppRefresh(125) as Action; - expect( - uiReducer( - { - alertFlyoutVisible: false, - basePath: 'abc', - esKuery: '', - integrationsPopoverOpen: null, - lastRefresh: 125, }, action ) @@ -74,7 +51,6 @@ describe('ui reducer', () => { basePath: '', esKuery: '', integrationsPopoverOpen: null, - lastRefresh: 125, }, action ) @@ -84,7 +60,6 @@ describe('ui reducer', () => { "basePath": "", "esKuery": "", "integrationsPopoverOpen": null, - "lastRefresh": 125, } `); }); diff --git a/x-pack/plugins/uptime/public/state/reducers/ui.ts b/x-pack/plugins/uptime/public/state/reducers/ui.ts index 82c2bfe2c0cec..9e7bc2ad02723 100644 --- a/x-pack/plugins/uptime/public/state/reducers/ui.ts +++ b/x-pack/plugins/uptime/public/state/reducers/ui.ts @@ -10,7 +10,6 @@ import { toggleIntegrationsPopover, setBasePath, setEsKueryString, - triggerAppRefresh, UiPayload, setAlertFlyoutType, setAlertFlyoutVisible, @@ -22,7 +21,6 @@ export interface UiState { basePath: string; esKuery: string; integrationsPopoverOpen: PopoverState | null; - lastRefresh: number; } const initialState: UiState = { @@ -30,7 +28,6 @@ const initialState: UiState = { basePath: '', esKuery: '', integrationsPopoverOpen: null, - lastRefresh: Date.now(), }; export const uiReducer = handleActions( @@ -50,11 +47,6 @@ export const uiReducer = handleActions( basePath: action.payload as string, }), - [String(triggerAppRefresh)]: (state, action: Action) => ({ - ...state, - lastRefresh: action.payload as number, - }), - [String(setEsKueryString)]: (state, action: Action) => ({ ...state, esKuery: action.payload as string, diff --git a/x-pack/plugins/uptime/public/state/selectors/__tests__/index.test.ts b/x-pack/plugins/uptime/public/state/selectors/__tests__/index.test.ts index 1c4c12f5f52d2..d8121e29d0cae 100644 --- a/x-pack/plugins/uptime/public/state/selectors/__tests__/index.test.ts +++ b/x-pack/plugins/uptime/public/state/selectors/__tests__/index.test.ts @@ -44,7 +44,6 @@ describe('state selectors', () => { basePath: 'yyz', esKuery: '', integrationsPopoverOpen: null, - lastRefresh: 125, }, monitorStatus: { status: null, diff --git a/x-pack/plugins/uptime/public/state/selectors/index.ts b/x-pack/plugins/uptime/public/state/selectors/index.ts index fc9097c0adaaf..1d1eb61a563d2 100644 --- a/x-pack/plugins/uptime/public/state/selectors/index.ts +++ b/x-pack/plugins/uptime/public/state/selectors/index.ts @@ -26,33 +26,13 @@ export const monitorStatusSelector = (state: AppState) => state.monitorStatus.st export const selectDynamicSettings = (state: AppState) => state.dynamicSettings; -export const selectIndexPattern = ({ indexPattern }: AppState) => { - return indexPattern; -}; +export const selectIndexPattern = ({ indexPattern }: AppState) => indexPattern; -export const selectPingHistogram = ({ ping, ui }: AppState) => { - return { - data: ping.pingHistogram, - loading: ping.loading, - lastRefresh: ui.lastRefresh, - esKuery: ui.esKuery, - }; -}; +export const selectPingHistogram = ({ ping }: AppState) => ping; -export const selectPingList = ({ pingList, ui: { lastRefresh } }: AppState) => ({ - pings: pingList, - lastRefresh, -}); +export const selectPingList = ({ pingList }: AppState) => pingList; -export const snapshotDataSelector = ({ - snapshot: { count, loading }, - ui: { lastRefresh, esKuery }, -}: AppState) => ({ - count, - lastRefresh, - loading, - esKuery, -}); +export const snapshotDataSelector = ({ snapshot }: AppState) => snapshot; const mlCapabilitiesSelector = (state: AppState) => state.ml.mlCapabilities.data; @@ -84,9 +64,7 @@ export const isMLJobDeletedSelector = ({ ml }: AppState) => ml.deleteJob; export const anomaliesSelector = ({ ml }: AppState) => ml.anomalies.data; -export const selectDurationLines = ({ monitorDuration }: AppState) => { - return monitorDuration; -}; +export const selectDurationLines = ({ monitorDuration }: AppState) => monitorDuration; export const selectAlertFlyoutVisibility = ({ ui: { alertFlyoutVisible } }: AppState) => alertFlyoutVisible; @@ -99,24 +77,10 @@ export const selectMonitorStatusAlert = ({ indexPattern, overviewFilters, ui }: locations: overviewFilters.filters.locations, }); -export const indexStatusSelector = ({ indexStatus }: AppState) => { - return indexStatus.indexStatus; -}; +export const indexStatusSelector = ({ indexStatus }: AppState) => indexStatus.indexStatus; -export const monitorListSelector = ({ monitorList, ui: { lastRefresh } }: AppState) => ({ - monitorList, - lastRefresh, -}); +export const monitorListSelector = ({ monitorList }: AppState) => monitorList; -export const overviewFiltersSelector = ({ overviewFilters }: AppState) => { - return overviewFilters.filters; -}; +export const overviewFiltersSelector = ({ overviewFilters }: AppState) => overviewFilters; -export const filterGroupDataSelector = ({ - overviewFilters: { loading, filters }, - ui: { esKuery }, -}: AppState) => ({ - esKuery, - filters, - loading, -}); +export const esKuerySelector = ({ ui: { esKuery } }: AppState) => esKuery; From 7c60a4d460e1fec55d03b97bdf0ddc7577bb848c Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 14 May 2020 01:12:56 +0200 Subject: [PATCH 3/4] fix type --- .../__tests__/__snapshots__/empty_state.test.tsx.snap | 6 +++--- x-pack/plugins/uptime/public/pages/overview.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap index fc02df6022511..ccf6ade66408a 100644 --- a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap @@ -638,7 +638,7 @@ exports[`EmptyState component doesn't render child components when count is fals { + ({ indexPattern, setEsKueryFilters, loading }: Props) => { const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useGetUrlParams(); const { search, filters: urlFilters } = params; From 72ec35e296f0319c08fa8ece40d95f791081ac4e Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 19 May 2020 04:43:59 +0200 Subject: [PATCH 4/4] fix page size issue --- .../overview/monitor_list/monitor_list.tsx | 16 +--------------- .../monitor_list/monitor_list_container.tsx | 12 +++++++++++- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx index 1e0811d8b346b..a0e7e78bc0c64 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx @@ -14,7 +14,7 @@ import { EuiPanel, EuiSpacer, } from '@elastic/eui'; -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import styled from 'styled-components'; import { HistogramPoint } from '../../../../common/runtime_types'; import { MonitorSummary } from '../../../../common/runtime_types'; @@ -43,16 +43,6 @@ const TruncatedEuiLink = styled(EuiLink)` text-overflow: ellipsis; `; -const DEFAULT_PAGE_SIZE = 10; -const LOCAL_STORAGE_KEY = 'xpack.uptime.monitorList.pageSize'; -const getPageSizeValue = () => { - const value = parseInt(localStorage.getItem(LOCAL_STORAGE_KEY) ?? '', 10); - if (isNaN(value)) { - return DEFAULT_PAGE_SIZE; - } - return value; -}; - export const MonitorListComponent: React.FC = ({ filters, monitorList: { list, error, loading }, @@ -60,10 +50,6 @@ export const MonitorListComponent: React.FC = ({ pageSize, setPageSize, }) => { - useEffect(() => { - setPageSize(getPageSizeValue()); - }, [setPageSize]); - const [drawerIds, updateDrawerIds] = useState([]); const items = list.summaries ?? []; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx index 2336206efd7bf..9aac7c9af5a82 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_container.tsx @@ -17,10 +17,20 @@ export interface MonitorListProps { linkParameters?: string; } +const DEFAULT_PAGE_SIZE = 10; +const LOCAL_STORAGE_KEY = 'xpack.uptime.monitorList.pageSize'; +const getPageSizeValue = () => { + const value = parseInt(localStorage.getItem(LOCAL_STORAGE_KEY) ?? '', 10); + if (isNaN(value)) { + return DEFAULT_PAGE_SIZE; + } + return value; +}; + export const MonitorList: React.FC = props => { const { filters } = props; - const [pageSize, setPageSize] = useState(10); + const [pageSize, setPageSize] = useState(getPageSizeValue); const dispatch = useDispatch();