Skip to content

Commit

Permalink
[Uptime] Visitors breakdowns and enable rum view only via URL (#71428) (
Browse files Browse the repository at this point in the history
#71750)

Backports the following commits to 7.x:

[Uptime] Visitors breakdowns and enable rum view only via URL (#71428)
  • Loading branch information
shahzad31 authored Jul 15, 2020
1 parent 8b69faf commit 5cc8788
Show file tree
Hide file tree
Showing 26 changed files with 373 additions and 152 deletions.
24 changes: 8 additions & 16 deletions x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
Feature: RUM Dashboard

Scenario: Client metrics
Given a user browses the APM UI application for RUM Data
When the user inspects the real user monitoring tab
Then should redirect to rum dashboard
And should have correct client metrics
When a user browses the APM UI application for RUM Data
Then should have correct client metrics

Scenario Outline: Rum page filters
When the user filters by "<filterName>"
Expand All @@ -15,22 +13,16 @@ Feature: RUM Dashboard
| location |

Scenario: Page load distribution percentiles
Given a user browses the APM UI application for RUM Data
When the user inspects the real user monitoring tab
Then should redirect to rum dashboard
And should display percentile for page load chart
When a user browses the APM UI application for RUM Data
Then should display percentile for page load chart

Scenario: Page load distribution chart tooltip
Given a user browses the APM UI application for RUM Data
When the user inspects the real user monitoring tab
Then should redirect to rum dashboard
And should display tooltip on hover
When a user browses the APM UI application for RUM Data
Then should display tooltip on hover

Scenario: Page load distribution chart legends
Given a user browses the APM UI application for RUM Data
When the user inspects the real user monitoring tab
Then should redirect to rum dashboard
And should display chart legend
When a user browses the APM UI application for RUM Data
Then should display chart legend

Scenario: Breakdown filter
Given a user click page load breakdown filter
Expand Down
16 changes: 0 additions & 16 deletions x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
module.exports = {
"__version": "4.9.0",
"RUM Dashboard": {
"Client metrics": {
"1": "55 ",
"2": "0.08 sec",
"3": "0.01 sec"
},
"Rum page filters (example #1)": {
"1": "8 ",
"2": "0.08 sec",
Expand All @@ -16,19 +11,8 @@ module.exports = {
"2": "0.07 sec",
"3": "0.01 sec"
},
"Page load distribution percentiles": {
"1": "50th",
"2": "75th",
"3": "90th",
"4": "95th"
},
"Page load distribution chart legends": {
"1": "Overall"
},
"Service name filter": {
"1": "7 ",
"2": "0.07 sec",
"3": "0.01 sec"
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ When(`the user selected the breakdown`, () => {

Then(`breakdown series should appear in chart`, () => {
cy.get('.euiLoadingChart').should('not.be.visible');
cy.get('div.echLegendItem__label[title=Chrome] ')
cy.get('div.echLegendItem__label[title=Chrome] ', {
timeout: DEFAULT_TIMEOUT,
})
.invoke('text')
.should('eq', 'Chrome');
});
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
import { loginAndWaitForPage } from '../../../integration/helpers';

/** The default time in ms to wait for a Cypress command to complete */
Expand All @@ -14,50 +14,44 @@ Given(`a user browses the APM UI application for RUM Data`, () => {
// open service overview page
const RANGE_FROM = 'now-24h';
const RANGE_TO = 'now';
loginAndWaitForPage(`/app/apm#/services`, { from: RANGE_FROM, to: RANGE_TO });
});

When(`the user inspects the real user monitoring tab`, () => {
// click rum tab
cy.get(':contains(Real User Monitoring)', { timeout: DEFAULT_TIMEOUT })
.last()
.click({ force: true });
});

Then(`should redirect to rum dashboard`, () => {
cy.url().should('contain', `/app/apm#/rum-overview`);
loginAndWaitForPage(`/app/apm#/rum-preview`, {
from: RANGE_FROM,
to: RANGE_TO,
});
});

Then(`should have correct client metrics`, () => {
const clientMetrics = '[data-cy=client-metrics] .euiStat__title';

// wait for all loading to finish
cy.get('kbnLoadingIndicator').should('not.be.visible');
cy.get('.euiStat__title', { timeout: DEFAULT_TIMEOUT }).should('be.visible');
cy.get('.euiSelect-isLoading').should('not.be.visible');
cy.get('.euiStat__title-isLoading').should('not.be.visible');

cy.get(clientMetrics).eq(2).invoke('text').snapshot();
cy.get(clientMetrics).eq(2).should('have.text', '55 ');

cy.get(clientMetrics).eq(1).invoke('text').snapshot();
cy.get(clientMetrics).eq(1).should('have.text', '0.08 sec');

cy.get(clientMetrics).eq(0).invoke('text').snapshot();
cy.get(clientMetrics).eq(0).should('have.text', '0.01 sec');
});

Then(`should display percentile for page load chart`, () => {
const pMarkers = '[data-cy=percentile-markers] span';

cy.get('.euiLoadingChart').should('be.visible');
cy.get('.euiLoadingChart', { timeout: DEFAULT_TIMEOUT }).should('be.visible');

// wait for all loading to finish
cy.get('kbnLoadingIndicator').should('not.be.visible');
cy.get('.euiStat__title-isLoading').should('not.be.visible');

cy.get(pMarkers).eq(0).invoke('text').snapshot();
cy.get(pMarkers).eq(0).should('have.text', '50th');

cy.get(pMarkers).eq(1).invoke('text').snapshot();
cy.get(pMarkers).eq(1).should('have.text', '75th');

cy.get(pMarkers).eq(2).invoke('text').snapshot();
cy.get(pMarkers).eq(2).should('have.text', '90th');

cy.get(pMarkers).eq(3).invoke('text').snapshot();
cy.get(pMarkers).eq(3).should('have.text', '95th');
});

Then(`should display chart legend`, () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ Then(`it displays relevant client metrics`, () => {
cy.get('kbnLoadingIndicator').should('not.be.visible');
cy.get('.euiStat__title-isLoading').should('not.be.visible');

cy.get(clientMetrics).eq(2).invoke('text').snapshot();
cy.get(clientMetrics).eq(2).should('have.text', '7 ');

cy.get(clientMetrics).eq(1).invoke('text').snapshot();
cy.get(clientMetrics).eq(1).should('have.text', '0.07 sec');

cy.get(clientMetrics).eq(0).invoke('text').snapshot();
cy.get(clientMetrics).eq(0).should('have.text', '0.01 sec');
});
16 changes: 1 addition & 15 deletions x-pack/plugins/apm/public/components/app/Home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink'
import { ServiceMap } from '../ServiceMap';
import { ServiceOverview } from '../ServiceOverview';
import { TraceOverview } from '../TraceOverview';
import { RumOverview } from '../RumDashboard';
import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink';

function getHomeTabs({
serviceMapEnabled = true,
Expand Down Expand Up @@ -73,18 +71,6 @@ function getHomeTabs({
});
}

homeTabs.push({
link: (
<RumOverviewLink>
{i18n.translate('xpack.apm.home.rumTabLabel', {
defaultMessage: 'Real User Monitoring',
})}
</RumOverviewLink>
),
render: () => <RumOverview />,
name: 'rum-overview',
});

return homeTabs;
}

Expand All @@ -93,7 +79,7 @@ const SETTINGS_LINK_LABEL = i18n.translate('xpack.apm.settingsLinkLabel', {
});

interface Props {
tab: 'traces' | 'services' | 'service-map' | 'rum-overview';
tab: 'traces' | 'services' | 'service-map';
}

export function Home({ tab }: Props) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
EditAgentConfigurationRouteHandler,
CreateAgentConfigurationRouteHandler,
} from './route_handlers/agent_configuration';
import { RumHome } from '../../RumDashboard/RumHome';

const metricsBreadcrumb = i18n.translate('xpack.apm.breadcrumb.metricsTitle', {
defaultMessage: 'Metrics',
Expand Down Expand Up @@ -253,17 +254,8 @@ export const routes: BreadcrumbRoute[] = [
},
{
exact: true,
path: '/rum-overview',
component: () => <Home tab="rum-overview" />,
breadcrumb: i18n.translate('xpack.apm.home.rumOverview.title', {
defaultMessage: 'Real User Monitoring',
}),
name: RouteName.RUM_OVERVIEW,
},
{
exact: true,
path: '/services/:serviceName/rum-overview',
component: () => <ServiceDetails tab="rum-overview" />,
path: '/rum-preview',
component: () => <RumHome />,
breadcrumb: i18n.translate('xpack.apm.home.rumOverview.title', {
defaultMessage: 'Real User Monitoring',
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export const BreakdownGroup = ({
data-cy={`filter-breakdown-item_${name}`}
key={name + count}
onClick={onFilterItemClick(name)}
disabled={!selected && getSelItems().length > 0}
>
{name}
</EuiFilterSelectItem>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/*
* 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 React from 'react';
import {
Chart,
DARK_THEME,
Datum,
LIGHT_THEME,
Partition,
PartitionLayout,
Settings,
} from '@elastic/charts';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import {
EUI_CHARTS_THEME_DARK,
EUI_CHARTS_THEME_LIGHT,
} from '@elastic/eui/dist/eui_charts_theme';
import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
import { ChartWrapper } from '../ChartWrapper';

interface Props {
options?: Array<{
count: number;
name: string;
}>;
}

export const VisitorBreakdownChart = ({ options }: Props) => {
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');

return (
<ChartWrapper loading={false} height="220px">
<Chart>
<Settings
baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
theme={
darkMode
? EUI_CHARTS_THEME_DARK.theme
: EUI_CHARTS_THEME_LIGHT.theme
}
/>
<Partition
id="spec_1"
data={options || []}
valueAccessor={(d: Datum) => d.count as number}
valueGetter="percent"
percentFormatter={(d: number) =>
`${Math.round((d + Number.EPSILON) * 100) / 100}%`
}
layers={[
{
groupByRollup: (d: Datum) => d.name,
nodeLabel: (d: Datum) => d,
// fillLabel: { textInvertible: true },
shape: {
fillColor: (d) => {
const clrs = [
euiLightVars.euiColorVis1_behindText,
euiLightVars.euiColorVis0_behindText,
euiLightVars.euiColorVis2_behindText,
euiLightVars.euiColorVis3_behindText,
euiLightVars.euiColorVis4_behindText,
euiLightVars.euiColorVis5_behindText,
euiLightVars.euiColorVis6_behindText,
euiLightVars.euiColorVis7_behindText,
euiLightVars.euiColorVis8_behindText,
euiLightVars.euiColorVis9_behindText,
];
return clrs[d.sortIndex];
},
},
},
]}
config={{
partitionLayout: PartitionLayout.sunburst,
linkLabel: {
maxCount: 32,
fontSize: 14,
},
fontFamily: 'Arial',
margin: { top: 0, bottom: 0, left: 0, right: 0 },
minFontSize: 1,
idealFontSizeJump: 1.1,
outerSizeRatio: 0.9, // - 0.5 * Math.random(),
emptySizeRatio: 0,
circlePadding: 4,
}}
/>
</Chart>
</ChartWrapper>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export function ClientMetrics() {
},
});
}
return Promise.resolve(null);
},
[start, end, serviceName, uiFilters]
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export const PageLoadDistribution = () => {
},
});
}
return Promise.resolve(null);
},
[
end,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export const PageViewsTrend = () => {
},
});
}
return Promise.resolve(undefined);
},
[end, start, serviceName, uiFilters, breakdowns]
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ import { ClientMetrics } from './ClientMetrics';
import { PageViewsTrend } from './PageViewsTrend';
import { PageLoadDistribution } from './PageLoadDistribution';
import { I18LABELS } from './translations';
import { VisitorBreakdown } from './VisitorBreakdown';

export function RumDashboard() {
export const RumDashboard = () => {
return (
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexItem>
Expand All @@ -42,7 +43,15 @@ export function RumDashboard() {
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
<EuiSpacer size="s" />
<EuiPanel>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={3}>
<VisitorBreakdown />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
);
}
};
Loading

0 comments on commit 5cc8788

Please sign in to comment.