From 2f32bf5fbe6e702a8bec517782cc2cf41708e95e Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 19 Apr 2021 05:36:31 -0400 Subject: [PATCH] [Exploratory view] integerate page views to exploratory view (#97258) (#97419) Co-authored-by: Shahzad --- .../app/RumDashboard/PageViewsTrend/index.tsx | 48 +++++++++++++++++-- .../components/empty_view.tsx | 25 ++++++++-- .../exploratory_view/exploratory_view.tsx | 4 +- .../series_builder/series_builder.tsx | 9 ++-- 4 files changed, 72 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx index 85df933bcb9e29..52668cf712b8c8 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx @@ -6,25 +6,37 @@ */ import React, { useState } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiTitle, +} from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import { useUrlParams } from '../../../../context/url_params_context/use_url_params'; import { useFetcher } from '../../../../hooks/use_fetcher'; import { I18LABELS } from '../translations'; import { BreakdownFilter } from '../Breakdowns/BreakdownFilter'; import { PageViewsChart } from '../Charts/PageViewsChart'; import { BreakdownItem } from '../../../../../typings/ui_filters'; +import { createExploratoryViewUrl } from '../../../../../../observability/public'; +import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public'; export function PageViewsTrend() { + const { + services: { http }, + } = useKibana(); + const { urlParams, uiFilters } = useUrlParams(); + const { serviceName } = uiFilters; - const { start, end, searchTerm } = urlParams; + const { start, end, searchTerm, rangeTo, rangeFrom } = urlParams; const [breakdown, setBreakdown] = useState(null); const { data, status } = useFetcher( (callApmApi) => { - const { serviceName } = uiFilters; - if (start && end && serviceName) { return callApmApi({ endpoint: 'GET /api/apm/rum-client/page-view-trends', @@ -45,7 +57,21 @@ export function PageViewsTrend() { } return Promise.resolve(undefined); }, - [end, start, uiFilters, breakdown, searchTerm] + [start, end, serviceName, uiFilters, searchTerm, breakdown] + ); + + const exploratoryViewLink = createExploratoryViewUrl( + { + [`${serviceName}-page-views`]: { + reportType: 'kpi', + time: { from: rangeFrom!, to: rangeTo! }, + reportDefinitions: { + 'service.name': serviceName?.[0] as string, + }, + ...(breakdown ? { breakdown: breakdown.fieldName } : {}), + }, + }, + http?.basePath.get() ); return ( @@ -63,6 +89,18 @@ export function PageViewsTrend() { dataTestSubj={'pvBreakdownFilter'} /> + + + + + diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx index 17f1b039667d0b..69b8b6eb89e468 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/components/empty_view.tsx @@ -6,27 +6,44 @@ */ import React from 'react'; -import { EuiImage } from '@elastic/eui'; +import { EuiImage, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui'; import styled from 'styled-components'; import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public'; +import { INITIATING_VIEW } from '../series_builder/series_builder'; -export function EmptyView() { +export function EmptyView({ loading }: { loading: boolean }) { const { services: { http }, } = useKibana(); return ( - + )} + + + {INITIATING_VIEW} ); } +const ImageWrap = styled(EuiImage)` + opacity: 0.4; +`; + const Wrapper = styled.div` text-align: center; - opacity: 0.4; height: 550px; + position: relative; `; diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx index 7b5dde852cf904..6bc91be876cf71 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx @@ -27,7 +27,7 @@ export function ExploratoryView() { null ); - const { loadIndexPattern } = useAppIndexPatternContext(); + const { loadIndexPattern, loading } = useAppIndexPatternContext(); const LensComponent = lens?.EmbeddableComponent; @@ -61,7 +61,7 @@ export function ExploratoryView() { attributes={lensAttributes} /> ) : ( - + )} diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/series_builder.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/series_builder.tsx index 5831b8be04c38c..db6e075cc90fba 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/series_builder.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/series_builder.tsx @@ -228,9 +228,12 @@ export function SeriesBuilder() { ); } -const INITIATING_VIEW = i18n.translate('xpack.observability.expView.seriesBuilder.initView', { - defaultMessage: 'Initiating view ...', -}); +export const INITIATING_VIEW = i18n.translate( + 'xpack.observability.expView.seriesBuilder.initView', + { + defaultMessage: 'Initiating view ...', + } +); const SELECT_REPORT_TYPE = i18n.translate( 'xpack.observability.expView.seriesBuilder.selectReportType',