github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[APM] Fixes EUI font update typography issues (#29831)

Browse source 
* Decreasing headings size for charts
* Updated Watcher flyout
This commit is contained in:
Casper Hübertz 2019-02-05 11:01:06 +01:00 • committed by GitHub
parent 915d3ad467
commit 2e37de7bc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 30 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.js
View file

@ -49,7 +49,7 @@ function Distribution({
return (
<div>
<EuiTitle size="s">
<EuiTitle size="xs">
<span>{title}</span>
</EuiTitle>
<Histogram

2
x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
View file

@ -35,7 +35,7 @@ const ErrorGroupOverview: React.SFC<ErrorGroupOverviewProps> = ({
<Distribution
distribution={data}
title={
<EuiTitle size="s">
<EuiTitle size="xs">
<span>
{i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',

2
x-pack/plugins/apm/public/components/app/ServiceDetails/CPUUsageChart.tsx
View file

@ -22,7 +22,7 @@ interface Props {
export function CPUUsageChart({ data, hoverXHandlers }: Props) {
return (
<React.Fragment>
<EuiTitle size="s">
<EuiTitle size="xs">
<span>
{i18n.translate(
'xpack.apm.serviceDetails.metrics.cpuUsageChartTitle',

2
x-pack/plugins/apm/public/components/app/ServiceDetails/MemoryUsageChart.tsx
View file

@ -22,7 +22,7 @@ interface Props {
export function MemoryUsageChart({ data, hoverXHandlers }: Props) {
return (
<React.Fragment>
<EuiTitle size="s">
<EuiTitle size="xs">
<span>
{i18n.translate(
'xpack.apm.serviceDetails.metrics.memoryUsageChartTitle',

34
x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx
View file

@ -315,14 +315,14 @@ export class WatcherFlyout extends Component<
</p>
<EuiForm>
<h3>
<h4>
{i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.conditionTitle',
{
defaultMessage: 'Condition'
}
)}
</h3>
</h4>
<EuiFormRow
label={i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.occurrencesThresholdLabel',
@ -346,17 +346,15 @@ export class WatcherFlyout extends Component<
onChange={this.onChangeThreshold}
/>
</EuiFormRow>
<h3>
<h4>
{i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.triggerScheduleTitle',
{
defaultMessage: 'Trigger schedule'
}
)}
</h3>
<p>
</h4>
<EuiText size="xs" color="subdued">
{i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.triggerScheduleDescription',
{
@ -364,8 +362,8 @@ export class WatcherFlyout extends Component<
'Choose the time interval for the report, when the threshold is exceeded.'
}
)}
</p>
</EuiText>
<EuiSpacer size="m" />
<EuiRadio
id="daily"
label={i18n.translate(
@ -377,9 +375,7 @@ export class WatcherFlyout extends Component<
onChange={() => this.onChangeSchedule('daily')}
checked={this.state.schedule === 'daily'}
/>
<EuiSpacer size="m" />
<EuiFormRow
helpText={i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.dailyReportHelpText',
@ -398,7 +394,6 @@ export class WatcherFlyout extends Component<
disabled={this.state.schedule !== 'daily'}
/>
</EuiFormRow>
<EuiRadio
id="interval"
label={i18n.translate(
@ -410,9 +405,7 @@ export class WatcherFlyout extends Component<
onChange={() => this.onChangeSchedule('interval')}
checked={this.state.schedule === 'interval'}
/>
<EuiSpacer size="m" />
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<SmallInput>
@ -465,16 +458,15 @@ export class WatcherFlyout extends Component<
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<h3>
<h4>
{i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.actionsTitle',
{
defaultMessage: 'Actions'
}
)}
</h3>
<p>
</h4>
<EuiText size="xs" color="subdued">
{i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.actionsDescription',
{
@ -482,7 +474,8 @@ export class WatcherFlyout extends Component<
'Reports can be sent by email or posted to a Slack channel. Each report will include the top 10 errors sorted by occurrence.'
}
)}
</p>
</EuiText>
<EuiSpacer size="m" />
<EuiSwitch
label={i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.sendEmailLabel',
@ -493,7 +486,6 @@ export class WatcherFlyout extends Component<
checked={this.state.actions.email}
onChange={() => this.onChangeAction('email')}
/>
<EuiSpacer size="m" />
{this.state.actions.email && (
<EuiFormRow
@ -532,7 +524,6 @@ export class WatcherFlyout extends Component<
/>
</EuiFormRow>
)}
<EuiSwitch
label={i18n.translate(
'xpack.apm.serviceDetails.enableErrorReportsPanel.sendSlackNotificationLabel',
@ -544,7 +535,6 @@ export class WatcherFlyout extends Component<
onChange={() => this.onChangeAction('slack')}
/>
<EuiSpacer size="m" />
{this.state.actions.slack && (
<EuiFormRow
label={i18n.translate(

2
x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceMetrics.tsx
View file

@ -54,7 +54,7 @@ export function ServiceMetrics({ urlParams, location }: ServiceMetricsProps) {
<Distribution
distribution={data}
title={
<EuiTitle size="s">
<EuiTitle size="xs">
<span>
{i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',

2
x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
View file

@ -130,7 +130,7 @@ export class Distribution extends Component<Props> {
return (
<div>
<EuiTitle size="s">
<EuiTitle size="xs">
<h5>
{i18n.translate(
'xpack.apm.transactionDetails.transactionsDurationDistributionChartTitle',

26
x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/WaterfallItem.tsx
View file

@ -7,7 +7,7 @@
import React from 'react';
import styled from 'styled-components';
import { EuiIcon, EuiText } from '@elastic/eui';
import { EuiIcon, EuiText, EuiTitle } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { asTime } from 'x-pack/plugins/apm/public/utils/formatters';
import { px, unit, units } from '../../../../../../style/variables';
@ -63,20 +63,10 @@ const ItemText = styled.span`
/* add margin to all direct descendants */
& > * {
margin-right: ${px(units.half)};
white-space: nowrap;
}
`;
const SpanNameLabel = styled.span`
color: ${theme.euiColorDarkShade};
font-weight: normal;
white-space: nowrap;
`;
const TransactionNameLabel = styled.span`
font-weight: 600;
white-space: nowrap;
`;
interface ITimelineMargins {
right: number;
left: number;
@ -139,10 +129,14 @@ function HttpStatusCode({ item }: { item: IWaterfallItem }) {
}
function NameLabel({ item }: { item: IWaterfallItem }) {
const StyledLabel =
item.docType === 'span' ? SpanNameLabel : TransactionNameLabel;
return <StyledLabel>{item.name}</StyledLabel>;
if (item.docType === 'span') {
return <EuiText size="s">{item.name}</EuiText>;
}
return (
<EuiTitle size="xxs">
<h5>{item.name}</h5>
</EuiTitle>
);
}
export function WaterfallItem({

4
x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/view.tsx
View file

@ -138,7 +138,7 @@ export class TransactionChartsView extends Component<TransactionChartProps> {
<ChartWrapper>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem>
<EuiTitle size="s">
<EuiTitle size="xs">
<span>{responseTimeLabel(transactionType)}</span>
</EuiTitle>
</EuiFlexItem>
@ -156,7 +156,7 @@ export class TransactionChartsView extends Component<TransactionChartProps> {
<EuiFlexItem style={{ flexShrink: 1 }}>
<ChartWrapper>
<EuiTitle size="s">
<EuiTitle size="xs">
<span>{tpmLabel(transactionType)}</span>
</EuiTitle>
<CustomPlot