From 2c4196270abc540f841ab5492061d29fb5184ad5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ester=20Mart=C3=AD=20Vilaseca?= Date: Mon, 29 Nov 2021 17:06:25 +0100 Subject: [PATCH] [Unified Observability] Add feature flag for the new overview page (#119193) * Add feature flag to display a blank overview page when enabled * Add tests for overview page feature flag * Fix types * Fix more types * Remove duplicated BucketSize type * fix linter Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../public/application/application.test.tsx | 8 +- .../components/app/section/apm/index.test.tsx | 8 +- .../components/app/section/ux/index.test.tsx | 8 +- .../public/hooks/use_time_range.test.ts | 16 ++- x-pack/plugins/observability/public/index.ts | 6 +- .../public/pages/overview/index.test.tsx | 51 +++++++ .../public/pages/overview/index.tsx | 131 ++--------------- .../pages/overview/old_overview_page.tsx | 136 ++++++++++++++++++ .../pages/overview/overview.stories.tsx | 6 +- .../public/pages/overview/overview_page.tsx | 82 +++++++++++ .../public/utils/test_helper.tsx | 8 +- x-pack/plugins/observability/server/index.ts | 1 + 12 files changed, 333 insertions(+), 128 deletions(-) create mode 100644 x-pack/plugins/observability/public/pages/overview/index.test.tsx create mode 100644 x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx create mode 100644 x-pack/plugins/observability/public/pages/overview/overview_page.tsx diff --git a/x-pack/plugins/observability/public/application/application.test.tsx b/x-pack/plugins/observability/public/application/application.test.tsx index 6b5863c8b122ac..dddc44c3c26ea2 100644 --- a/x-pack/plugins/observability/public/application/application.test.tsx +++ b/x-pack/plugins/observability/public/application/application.test.tsx @@ -46,7 +46,13 @@ describe('renderApp', () => { uiSettings: { get: () => false }, http: { basePath: { prepend: (path: string) => path } }, } as unknown as CoreStart; - const config = { unsafe: { alertingExperience: { enabled: true }, cases: { enabled: true } } }; + const config = { + unsafe: { + alertingExperience: { enabled: true }, + cases: { enabled: true }, + overviewNext: { enabled: false }, + }, + }; const params = { element: window.document.createElement('div'), history: createMemoryHistory(), diff --git a/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx b/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx index c9c2ed549a1c3d..35835cd0bc8e6a 100644 --- a/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx +++ b/x-pack/plugins/observability/public/components/app/section/apm/index.test.tsx @@ -42,7 +42,13 @@ describe('APMSection', () => { http: { basePath: { prepend: jest.fn() } }, } as unknown as CoreStart, appMountParameters: {} as AppMountParameters, - config: { unsafe: { alertingExperience: { enabled: true }, cases: { enabled: true } } }, + config: { + unsafe: { + alertingExperience: { enabled: true }, + cases: { enabled: true }, + overviewNext: { enabled: false }, + }, + }, observabilityRuleTypeRegistry: createObservabilityRuleTypeRegistryMock(), plugins: { data: { diff --git a/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx b/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx index 8a99b6a53cf063..b4dda3ed3559e6 100644 --- a/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx +++ b/x-pack/plugins/observability/public/components/app/section/ux/index.test.tsx @@ -42,7 +42,13 @@ describe('UXSection', () => { http: { basePath: { prepend: jest.fn() } }, } as unknown as CoreStart, appMountParameters: {} as AppMountParameters, - config: { unsafe: { alertingExperience: { enabled: true }, cases: { enabled: true } } }, + config: { + unsafe: { + alertingExperience: { enabled: true }, + cases: { enabled: true }, + overviewNext: { enabled: false }, + }, + }, plugins: { data: { query: { diff --git a/x-pack/plugins/observability/public/hooks/use_time_range.test.ts b/x-pack/plugins/observability/public/hooks/use_time_range.test.ts index bf513d8a1a99a0..bbf3096e551075 100644 --- a/x-pack/plugins/observability/public/hooks/use_time_range.test.ts +++ b/x-pack/plugins/observability/public/hooks/use_time_range.test.ts @@ -24,7 +24,13 @@ describe('useTimeRange', () => { jest.spyOn(pluginContext, 'usePluginContext').mockImplementation(() => ({ core: {} as CoreStart, appMountParameters: {} as AppMountParameters, - config: { unsafe: { alertingExperience: { enabled: true }, cases: { enabled: true } } }, + config: { + unsafe: { + alertingExperience: { enabled: true }, + cases: { enabled: true }, + overviewNext: { enabled: false }, + }, + }, plugins: { data: { query: { @@ -67,7 +73,13 @@ describe('useTimeRange', () => { jest.spyOn(pluginContext, 'usePluginContext').mockImplementation(() => ({ core: {} as CoreStart, appMountParameters: {} as AppMountParameters, - config: { unsafe: { alertingExperience: { enabled: true }, cases: { enabled: true } } }, + config: { + unsafe: { + alertingExperience: { enabled: true }, + cases: { enabled: true }, + overviewNext: { enabled: false }, + }, + }, plugins: { data: { query: { diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts index 0dab3e51357171..7646ac9bec9bb1 100644 --- a/x-pack/plugins/observability/public/index.ts +++ b/x-pack/plugins/observability/public/index.ts @@ -26,7 +26,11 @@ export type { export { enableInspectEsQueries } from '../common/ui_settings_keys'; export interface ConfigSchema { - unsafe: { alertingExperience: { enabled: boolean }; cases: { enabled: boolean } }; + unsafe: { + alertingExperience: { enabled: boolean }; + cases: { enabled: boolean }; + overviewNext: { enabled: boolean }; + }; } export const plugin: PluginInitializer< diff --git a/x-pack/plugins/observability/public/pages/overview/index.test.tsx b/x-pack/plugins/observability/public/pages/overview/index.test.tsx new file mode 100644 index 00000000000000..b37ed1d873ba7f --- /dev/null +++ b/x-pack/plugins/observability/public/pages/overview/index.test.tsx @@ -0,0 +1,51 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import React from 'react'; +import { shallow } from 'enzyme'; +import * as PluginContext from '../../hooks/use_plugin_context'; +import { PluginContextValue } from '../../context/plugin_context'; +import { OverviewPage } from './'; +import { OverviewPage as OldOverviewPage } from './old_overview_page'; +import { OverviewPage as NewOverviewPage } from './overview_page'; + +describe('Overview page', () => { + it('should render the old overview page when feature flag is disabled', () => { + const pluginContext = { + config: { + unsafe: { + overviewNext: { enabled: false }, + }, + }, + }; + + jest + .spyOn(PluginContext, 'usePluginContext') + .mockReturnValue(pluginContext as PluginContextValue); + + const component = shallow(); + expect(component.find(OldOverviewPage)).toHaveLength(1); + expect(component.find(NewOverviewPage)).toHaveLength(0); + }); + + it('should render the new overview page when feature flag is enabled', () => { + const pluginContext = { + config: { + unsafe: { + overviewNext: { enabled: true }, + }, + }, + }; + + jest + .spyOn(PluginContext, 'usePluginContext') + .mockReturnValue(pluginContext as PluginContextValue); + + const component = shallow(); + expect(component.find(OldOverviewPage)).toHaveLength(0); + expect(component.find(NewOverviewPage)).toHaveLength(1); + }); +}); diff --git a/x-pack/plugins/observability/public/pages/overview/index.tsx b/x-pack/plugins/observability/public/pages/overview/index.tsx index 7100a0552876d0..cc38445e3a0f28 100644 --- a/x-pack/plugins/observability/public/pages/overview/index.tsx +++ b/x-pack/plugins/observability/public/pages/overview/index.tsx @@ -4,133 +4,24 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiPanel } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; import React from 'react'; -import { useTrackPageview } from '../..'; -import { EmptySections } from '../../components/app/empty_sections'; -import { ObservabilityHeaderMenu } from '../../components/app/header'; -import { NewsFeed } from '../../components/app/news_feed'; -import { Resources } from '../../components/app/resources'; -import { AlertsSection } from '../../components/app/section/alerts'; -import { DatePicker } from '../../components/shared/date_picker'; -import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; -import { useFetcher } from '../../hooks/use_fetcher'; -import { useHasData } from '../../hooks/use_has_data'; -import { usePluginContext } from '../../hooks/use_plugin_context'; -import { useTimeRange } from '../../hooks/use_time_range'; import { RouteParams } from '../../routes'; -import { getNewsFeed } from '../../services/get_news_feed'; -import { getBucketSize } from '../../utils/get_bucket_size'; -import { getNoDataConfig } from '../../utils/no_data_config'; -import { DataSections } from './data_sections'; -import { LoadingObservability } from './loading_observability'; +import { usePluginContext } from '../../hooks/use_plugin_context'; +import { OverviewPage as OldOverviewPage } from './old_overview_page'; +import { OverviewPage as NewOverviewPage } from './overview_page'; + +export type { BucketSize } from './old_overview_page'; interface Props { routeParams: RouteParams<'/overview'>; } -export type BucketSize = ReturnType; -function calculateBucketSize({ start, end }: { start?: number; end?: number }) { - if (start && end) { - return getBucketSize({ start, end, minInterval: '60s' }); - } -} - -export function OverviewPage({ routeParams }: Props) { - useTrackPageview({ app: 'observability-overview', path: 'overview' }); - useTrackPageview({ app: 'observability-overview', path: 'overview', delay: 15000 }); - useBreadcrumbs([ - { - text: i18n.translate('xpack.observability.breadcrumbs.overviewLinkText', { - defaultMessage: 'Overview', - }), - }, - ]); - - const { core, ObservabilityPageTemplate } = usePluginContext(); - - const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange(); - const relativeTime = { start: relativeStart, end: relativeEnd }; - const absoluteTime = { start: absoluteStart, end: absoluteEnd }; +export function OverviewPage(props: Props) { + const { config } = usePluginContext(); - const { data: newsFeed } = useFetcher(() => getNewsFeed({ core }), [core]); - - const { hasDataMap, hasAnyData, isAllRequestsComplete } = useHasData(); - - if (hasAnyData === undefined) { - return ; + if (config.unsafe.overviewNext.enabled) { + return ; + } else { + return ; } - - const hasData = hasAnyData === true || (isAllRequestsComplete === false ? undefined : false); - - const noDataConfig = getNoDataConfig({ - hasData, - basePath: core.http.basePath, - docsLink: core.docLinks.links.observability.guide, - }); - - const { refreshInterval = 10000, refreshPaused = true } = routeParams.query; - - const bucketSize = calculateBucketSize({ - start: absoluteTime.start, - end: absoluteTime.end, - }); - - return ( - , - ], - } - : undefined - } - > - {hasData && ( - <> - - - - {/* Data sections */} - {hasAnyData && } - - - - - {/* Resources / What's New sections */} - - - - {!!newsFeed?.items?.length && } - - - {hasDataMap?.alert?.hasData && ( - - - - - - )} - - - - - )} - - ); } - -const overviewPageTitle = i18n.translate('xpack.observability.overview.pageTitle', { - defaultMessage: 'Overview', -}); diff --git a/x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx b/x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx new file mode 100644 index 00000000000000..7100a0552876d0 --- /dev/null +++ b/x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx @@ -0,0 +1,136 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiPanel } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import { useTrackPageview } from '../..'; +import { EmptySections } from '../../components/app/empty_sections'; +import { ObservabilityHeaderMenu } from '../../components/app/header'; +import { NewsFeed } from '../../components/app/news_feed'; +import { Resources } from '../../components/app/resources'; +import { AlertsSection } from '../../components/app/section/alerts'; +import { DatePicker } from '../../components/shared/date_picker'; +import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; +import { useFetcher } from '../../hooks/use_fetcher'; +import { useHasData } from '../../hooks/use_has_data'; +import { usePluginContext } from '../../hooks/use_plugin_context'; +import { useTimeRange } from '../../hooks/use_time_range'; +import { RouteParams } from '../../routes'; +import { getNewsFeed } from '../../services/get_news_feed'; +import { getBucketSize } from '../../utils/get_bucket_size'; +import { getNoDataConfig } from '../../utils/no_data_config'; +import { DataSections } from './data_sections'; +import { LoadingObservability } from './loading_observability'; + +interface Props { + routeParams: RouteParams<'/overview'>; +} +export type BucketSize = ReturnType; +function calculateBucketSize({ start, end }: { start?: number; end?: number }) { + if (start && end) { + return getBucketSize({ start, end, minInterval: '60s' }); + } +} + +export function OverviewPage({ routeParams }: Props) { + useTrackPageview({ app: 'observability-overview', path: 'overview' }); + useTrackPageview({ app: 'observability-overview', path: 'overview', delay: 15000 }); + useBreadcrumbs([ + { + text: i18n.translate('xpack.observability.breadcrumbs.overviewLinkText', { + defaultMessage: 'Overview', + }), + }, + ]); + + const { core, ObservabilityPageTemplate } = usePluginContext(); + + const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange(); + + const relativeTime = { start: relativeStart, end: relativeEnd }; + const absoluteTime = { start: absoluteStart, end: absoluteEnd }; + + const { data: newsFeed } = useFetcher(() => getNewsFeed({ core }), [core]); + + const { hasDataMap, hasAnyData, isAllRequestsComplete } = useHasData(); + + if (hasAnyData === undefined) { + return ; + } + + const hasData = hasAnyData === true || (isAllRequestsComplete === false ? undefined : false); + + const noDataConfig = getNoDataConfig({ + hasData, + basePath: core.http.basePath, + docsLink: core.docLinks.links.observability.guide, + }); + + const { refreshInterval = 10000, refreshPaused = true } = routeParams.query; + + const bucketSize = calculateBucketSize({ + start: absoluteTime.start, + end: absoluteTime.end, + }); + + return ( + , + ], + } + : undefined + } + > + {hasData && ( + <> + + + + {/* Data sections */} + {hasAnyData && } + + + + + {/* Resources / What's New sections */} + + + + {!!newsFeed?.items?.length && } + + + {hasDataMap?.alert?.hasData && ( + + + + + + )} + + + + + )} + + ); +} + +const overviewPageTitle = i18n.translate('xpack.observability.overview.pageTitle', { + defaultMessage: 'Overview', +}); diff --git a/x-pack/plugins/observability/public/pages/overview/overview.stories.tsx b/x-pack/plugins/observability/public/pages/overview/overview.stories.tsx index 6549e892cab12c..6213ea3e66d400 100644 --- a/x-pack/plugins/observability/public/pages/overview/overview.stories.tsx +++ b/x-pack/plugins/observability/public/pages/overview/overview.stories.tsx @@ -66,7 +66,11 @@ const withCore = makeDecorator({ setHeaderActionMenu: () => {}, } as unknown as AppMountParameters, config: { - unsafe: { alertingExperience: { enabled: true }, cases: { enabled: true } }, + unsafe: { + alertingExperience: { enabled: true }, + cases: { enabled: true }, + overviewNext: { enabled: false }, + }, }, core: options as CoreStart, plugins: { diff --git a/x-pack/plugins/observability/public/pages/overview/overview_page.tsx b/x-pack/plugins/observability/public/pages/overview/overview_page.tsx new file mode 100644 index 00000000000000..f4cdec680af947 --- /dev/null +++ b/x-pack/plugins/observability/public/pages/overview/overview_page.tsx @@ -0,0 +1,82 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import { useTrackPageview } from '../..'; +import { DatePicker } from '../../components/shared/date_picker'; +import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; +import { useHasData } from '../../hooks/use_has_data'; +import { usePluginContext } from '../../hooks/use_plugin_context'; +import { useTimeRange } from '../../hooks/use_time_range'; +import { RouteParams } from '../../routes'; +import { getNoDataConfig } from '../../utils/no_data_config'; +import { LoadingObservability } from './loading_observability'; + +interface Props { + routeParams: RouteParams<'/overview'>; +} + +export function OverviewPage({ routeParams }: Props) { + useTrackPageview({ app: 'observability-overview', path: 'overview' }); + useTrackPageview({ app: 'observability-overview', path: 'overview', delay: 15000 }); + useBreadcrumbs([ + { + text: i18n.translate('xpack.observability.breadcrumbs.overviewLinkText', { + defaultMessage: 'Overview', + }), + }, + ]); + + const { core, ObservabilityPageTemplate } = usePluginContext(); + + const { relativeStart, relativeEnd } = useTimeRange(); + + const relativeTime = { start: relativeStart, end: relativeEnd }; + + const { hasAnyData, isAllRequestsComplete } = useHasData(); + + if (hasAnyData === undefined) { + return ; + } + + const hasData = hasAnyData === true || (isAllRequestsComplete === false ? undefined : false); + + const noDataConfig = getNoDataConfig({ + hasData, + basePath: core.http.basePath, + docsLink: core.docLinks.links.observability.guide, + }); + + const { refreshInterval = 10000, refreshPaused = true } = routeParams.query; + + return ( + , + ], + } + : undefined + } + > + {hasData &&
New observability content goes here
} + + ); +} + +const overviewPageTitle = i18n.translate('xpack.observability.overview.pageTitle', { + defaultMessage: 'Overview', +}); diff --git a/x-pack/plugins/observability/public/utils/test_helper.tsx b/x-pack/plugins/observability/public/utils/test_helper.tsx index 544f3feecb2bbd..a3ec446e5c3075 100644 --- a/x-pack/plugins/observability/public/utils/test_helper.tsx +++ b/x-pack/plugins/observability/public/utils/test_helper.tsx @@ -34,7 +34,13 @@ export const core = { }, } as unknown as CoreStart; -const config = { unsafe: { alertingExperience: { enabled: true }, cases: { enabled: true } } }; +const config = { + unsafe: { + alertingExperience: { enabled: true }, + cases: { enabled: true }, + overviewNext: { enabled: false }, + }, +}; const plugins = { data: { query: { timefilter: { timefilter: { setTime: jest.fn() } } } }, diff --git a/x-pack/plugins/observability/server/index.ts b/x-pack/plugins/observability/server/index.ts index d99cf0865c0dd0..51204c7512a3d5 100644 --- a/x-pack/plugins/observability/server/index.ts +++ b/x-pack/plugins/observability/server/index.ts @@ -34,6 +34,7 @@ export const config: PluginConfigDescriptor = { unsafe: schema.object({ alertingExperience: schema.object({ enabled: schema.boolean({ defaultValue: true }) }), cases: schema.object({ enabled: schema.boolean({ defaultValue: true }) }), + overviewNext: schema.object({ enabled: schema.boolean({ defaultValue: false }) }), }), }), };