Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[APM] Design - General layout updates #32750

Merged
merged 5 commits into from
Mar 8, 2019
Merged

[APM] Design - General layout updates #32750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f134f2a
Remove default background color
formgeist Mar 8, 2019
1ce8d94
Wrapping graphs and tables in EuiPanel
formgeist Mar 8, 2019
98908b4
Updated snapshots
formgeist Mar 8, 2019
2297ec7
Adding titles to tables
formgeist Mar 8, 2019
aebf063
Updated snapshots
formgeist Mar 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 50 additions & 48 deletions x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx
View file
Open in desktop
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 { EuiBadge, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import { EuiBadge, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import { Location } from 'history';
Expand Down Expand Up @@ -112,57 +112,59 @@ export function ErrorGroupDetailsView({ urlParams, location }: Props) {

<EuiSpacer size="s" />

{showDetails && (
<Titles>
<EuiText>
{logMessage && (
<Fragment>
<Label>
{i18n.translate(
'xpack.apm.errorGroupDetails.logMessageLabel',
{
defaultMessage: 'Log message'
}
)}
</Label>
<Message>{logMessage}</Message>
</Fragment>
)}
<Label>
{i18n.translate(
'xpack.apm.errorGroupDetails.exceptionMessageLabel',
{
defaultMessage: 'Exception message'
}
<EuiPanel>
{showDetails && (
<Titles>
<EuiText>
{logMessage && (
<Fragment>
<Label>
{i18n.translate(
'xpack.apm.errorGroupDetails.logMessageLabel',
{
defaultMessage: 'Log message'
}
)}
</Label>
<Message>{logMessage}</Message>
</Fragment>
)}
</Label>
<Message>{excMessage || NOT_AVAILABLE_LABEL}</Message>
<Label>
{i18n.translate(
'xpack.apm.errorGroupDetails.culpritLabel',
<Label>
{i18n.translate(
'xpack.apm.errorGroupDetails.exceptionMessageLabel',
{
defaultMessage: 'Exception message'
}
)}
</Label>
<Message>{excMessage || NOT_AVAILABLE_LABEL}</Message>
<Label>
{i18n.translate(
'xpack.apm.errorGroupDetails.culpritLabel',
{
defaultMessage: 'Culprit'
}
)}
</Label>
<Culprit>{culprit || NOT_AVAILABLE_LABEL}</Culprit>
</EuiText>
</Titles>
)}
<ErrorDistributionRequest
urlParams={urlParams}
render={({ data }) => (
<ErrorDistribution
distribution={data}
title={i18n.translate(
'xpack.apm.errorGroupDetails.occurrencesChartLabel',
{
defaultMessage: 'Culprit'
defaultMessage: 'Occurrences'
}
)}
</Label>
<Culprit>{culprit || NOT_AVAILABLE_LABEL}</Culprit>
</EuiText>
</Titles>
)}
<ErrorDistributionRequest
urlParams={urlParams}
render={({ data }) => (
<ErrorDistribution
distribution={data}
title={i18n.translate(
'xpack.apm.errorGroupDetails.occurrencesChartLabel',
{
defaultMessage: 'Occurrences'
}
)}
/>
)}
/>
/>
)}
/>
</EuiPanel>
{showDetails && (
<DetailView
errorGroup={errorGroup}
Expand Down
64 changes: 39 additions & 25 deletions x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiTitle
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { Location } from 'history';
import React from 'react';
Expand All @@ -27,35 +33,43 @@ const ErrorGroupOverview: React.SFC<ErrorGroupOverviewProps> = ({
<React.Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<ErrorDistributionRequest
urlParams={urlParams}
render={({ data }) => (
<ErrorDistribution
distribution={data}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
{
defaultMessage: 'Error occurrences'
}
)}
/>
)}
/>
<EuiPanel>
<ErrorDistributionRequest
urlParams={urlParams}
render={({ data }) => (
<ErrorDistribution
distribution={data}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
{
defaultMessage: 'Error occurrences'
}
)}
/>
)}
/>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="l" />

<ErrorGroupOverviewRequest
urlParams={urlParams}
render={({ data }) => (
<ErrorGroupList
urlParams={urlParams}
items={data}
location={location}
/>
)}
/>
<EuiPanel>
<EuiTitle size="xs">
<h3>Errors</h3>
</EuiTitle>
<EuiSpacer size="s" />
<ErrorGroupOverviewRequest
urlParams={urlParams}
render={({ data }) => (
<ErrorGroupList
urlParams={urlParams}
items={data}
location={location}
/>
)}
/>
</EuiPanel>
</React.Fragment>
);
};
Expand Down
55 changes: 31 additions & 24 deletions x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceMetrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -42,28 +43,30 @@ export function ServiceMetrics({ urlParams, location }: ServiceMetricsProps) {
)}
/>

<EuiSpacer size="xxl" />
<EuiSpacer size="l" />

<EuiFlexGroup>
<EuiFlexItem>
<ErrorDistributionRequest
urlParams={urlParams}
render={({ data }) => (
<ErrorDistribution
distribution={data}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
{
defaultMessage: 'Error occurrences'
}
)}
/>
)}
/>
<EuiPanel>
<ErrorDistributionRequest
urlParams={urlParams}
render={({ data }) => (
<ErrorDistribution
distribution={data}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
{
defaultMessage: 'Error occurrences'
}
)}
/>
)}
/>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="xxl" />
<EuiSpacer size="l" />

<MetricsChartDataRequest
urlParams={urlParams}
Expand All @@ -73,16 +76,20 @@ export function ServiceMetrics({ urlParams, location }: ServiceMetricsProps) {
render={hoverXHandlers => (
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<CPUUsageChart
data={data.cpu}
hoverXHandlers={hoverXHandlers}
/>
<EuiPanel>
<CPUUsageChart
data={data.cpu}
hoverXHandlers={hoverXHandlers}
/>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<MemoryUsageChart
data={data.memory}
hoverXHandlers={hoverXHandlers}
/>
<EuiPanel>
<MemoryUsageChart
data={data.memory}
hoverXHandlers={hoverXHandlers}
/>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGrid>
)}
Expand Down
16 changes: 12 additions & 4 deletions ...public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Service Overview -> View should render when historical data is found 1`] = `
<div>
<EuiPanel
grow={true}
hasShadow={false}
paddingSize="m"
>
<ServiceListRequest
render={[Function]}
/>
</div>
</EuiPanel>
`;

exports[`Service Overview -> View should render when historical data is found 2`] = `
Expand All @@ -18,11 +22,15 @@ Object {
`;

exports[`Service Overview -> View should render when historical data is not found 1`] = `
<div>
<EuiPanel
grow={true}
hasShadow={false}
paddingSize="m"
>
<ServiceListRequest
render={[Function]}
/>
</div>
</EuiPanel>
`;

exports[`Service Overview -> View should render when historical data is not found 2`] = `
Expand Down
5 changes: 3 additions & 2 deletions x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiPanel } from '@elastic/eui';
import React, { Component } from 'react';
import { RRRRenderResponse } from 'react-redux-request';
import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
Expand Down Expand Up @@ -42,7 +43,7 @@ export class ServiceOverview extends Component<Props, State> {
// to make it easier to test -- mapStateToProps uses the RRR selector so the data
// is the same either way
return (
<div>
<EuiPanel>
<ServiceListRequest
urlParams={urlParams}
render={() => (
Expand All @@ -56,7 +57,7 @@ export class ServiceOverview extends Component<Props, State> {
/>
)}
/>
</div>
</EuiPanel>
);
}
}
35 changes: 19 additions & 16 deletions x-pack/plugins/apm/public/components/app/TraceOverview/view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiPanel } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { RRRRenderResponse } from 'react-redux-request';
Expand All @@ -20,21 +21,23 @@ export function TraceOverview(props: Props) {
const { urlParams } = props;

return (
<TraceListRequest
urlParams={urlParams}
render={({ data, status }: RRRRenderResponse<TraceListAPIResponse>) => (
<TraceList
items={data}
isLoading={status === 'LOADING'}
noItemsMessage={
<EmptyMessage
heading={i18n.translate('xpack.apm.tracesTable.notFoundLabel', {
defaultMessage: 'No traces found for this query'
})}
/>
}
/>
)}
/>
<EuiPanel>
<TraceListRequest
urlParams={urlParams}
render={({ data, status }: RRRRenderResponse<TraceListAPIResponse>) => (
<TraceList
items={data}
isLoading={status === 'LOADING'}
noItemsMessage={
<EmptyMessage
heading={i18n.translate('xpack.apm.tracesTable.notFoundLabel', {
defaultMessage: 'No traces found for this query'
})}
/>
}
/>
)}
/>
</EuiPanel>
);
}
Loading