Skip to content

Commit

Permalink
[APM] Design - General layout updates (#32750) (#32802)
Browse files Browse the repository at this point in the history 
* Remove default background color

* Wrapping graphs and tables in EuiPanel

* Adding titles to Transactions and Errors list tables
  • Loading branch information
@formgeist
formgeist authored Mar 11, 2019
1 parent 05eb861 commit 75e4300
Show file tree
Hide file tree
Showing 11 changed files with 271 additions and 184 deletions.
98 changes: 50 additions & 48 deletions x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx
View file
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
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
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
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
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
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

0 comments on commit 75e4300

Please sign in to comment.