Design clean-up for 6.5, Part Deux (#24862)
* Fixes active tab state * Removes beta labels from ML and search bar * Reverts visual regression with right-to-left timeline fix * Creates space for agent marks beneath tick marks * Fixes ordering problem with timeline transaction icons * Updates string 0 to be an integer instead for CSS bottom value
This commit is contained in:
Jason Rhodes
GitHub
parent
57d0e1d22a
commit
be34592e68
9 changed files with 35 additions and 47 deletions
|
|
@ -68,7 +68,7 @@ export const TransactionPropertiesTable: React.SFC<
|
|||
})
|
||||
});
|
||||
}}
|
||||
selected={currentTab === key}
|
||||
isSelected={currentTab === key}
|
||||
key={key}
|
||||
>
|
||||
{capitalize(key)}
|
||||
|
|
|
|||
|
|
@ -33,15 +33,19 @@ const ItemBar = styled<ItemBarProps, any>('div')`
|
|||
height: ${px(unit)};
|
||||
left: ${props => props.left}%;
|
||||
width: ${props => props.width}%;
|
||||
min-width: '2px';
|
||||
min-width: 2px;
|
||||
background-color: ${props => props.color};
|
||||
`;
|
||||
|
||||
// Note: "direction: rtl;" is here to prevent text from running off of
|
||||
// the right edge and instead pushing it to the left. For an example of
|
||||
// how this works, see here: https://codepen.io/sqren/pen/JrXNjY
|
||||
const SpanLabel = styled<{ left: number }, any>('div')`
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
left: ${props => `${props.left}%`};
|
||||
width: ${props => `${100 - props.left}%`};
|
||||
direction: rtl;
|
||||
text-align: left;
|
||||
margin: ${px(units.quarter)} 0 0;
|
||||
font-family: ${fontFamilyCode};
|
||||
|
|
@ -115,6 +119,9 @@ export function WaterfallItem({
|
|||
const left = (item.offset / totalDuration) * 100;
|
||||
const Label = item.docType === 'transaction' ? TransactionLabel : SpanLabel;
|
||||
|
||||
// Note: the <Prefix> appears *after* the item name in the DOM order
|
||||
// because this label is styled with "direction: rtl;" so that the name
|
||||
// itself doesn't flow outside the box to the right.
|
||||
return (
|
||||
<Container
|
||||
item={item}
|
||||
|
|
@ -124,8 +131,7 @@ export function WaterfallItem({
|
|||
>
|
||||
<ItemBar left={left} width={width} color={color} type={item.docType} />
|
||||
<Label left={left}>
|
||||
<Prefix item={item} />
|
||||
{item.name}
|
||||
{item.name} <Prefix item={item} />
|
||||
</Label>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default class DynamicBaselineButton extends Component {
|
|||
title: 'Machine Learning',
|
||||
items: [
|
||||
{
|
||||
name: 'Anomaly detection (BETA)',
|
||||
name: 'Anomaly detection',
|
||||
icon: <EuiIcon type="stats" size="m" />,
|
||||
onClick: () => {
|
||||
this.closePopover();
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@ import {
|
|||
EuiFlyoutHeader,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
EuiSpacer,
|
||||
EuiBetaBadge
|
||||
EuiSpacer
|
||||
} from '@elastic/eui';
|
||||
import { KibanaLink, ViewMLJob } from '../../../../utils/url';
|
||||
|
||||
|
|
@ -120,10 +119,6 @@ export default class DynamicBaselineFlyout extends Component {
|
|||
<h2>Enable anomaly detection on response times</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiBetaBadge
|
||||
label="Beta"
|
||||
tooltipContent="This feature is currently in beta. Please help us by reporting any bugs."
|
||||
/>
|
||||
</EuiFlyoutHeader>
|
||||
<EuiFlyoutBody>
|
||||
{hasDynamicBaseline && (
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ exports[`MLButton should render initial state 1`] = `
|
|||
size="m"
|
||||
type="stats"
|
||||
/>,
|
||||
"name": "Anomaly detection (BETA)",
|
||||
"name": "Anomaly detection",
|
||||
"onClick": [Function],
|
||||
},
|
||||
Object {
|
||||
|
|
|
|||
|
|
@ -6,11 +6,9 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import Suggestions from './Suggestions';
|
||||
import ClickOutside from './ClickOutside';
|
||||
import { EuiFieldSearch, EuiProgress, EuiToolTip } from '@elastic/eui';
|
||||
import { units, fontSizes, colors } from '../../../../style/variables';
|
||||
import { EuiFieldSearch, EuiProgress } from '@elastic/eui';
|
||||
|
||||
const KEY_CODES = {
|
||||
LEFT: 37,
|
||||
|
|
@ -22,16 +20,6 @@ const KEY_CODES = {
|
|||
TAB: 9
|
||||
};
|
||||
|
||||
const BetaLabel = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: ${fontSizes.small};
|
||||
transform: translateY(calc(-100% - ${units.quarter}px));
|
||||
cursor: pointer;
|
||||
color: ${colors.gray2};
|
||||
`;
|
||||
|
||||
export class Typeahead extends Component {
|
||||
state = {
|
||||
isSuggestionsVisible: false,
|
||||
|
|
@ -173,12 +161,6 @@ export class Typeahead extends Component {
|
|||
style={{ position: 'relative' }}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<BetaLabel>
|
||||
<EuiToolTip content="The Query bar feature is still in beta. Help us report any issues or bugs by using the APM feedback link in the top.">
|
||||
<div>Beta</div>
|
||||
</EuiToolTip>
|
||||
</BetaLabel>
|
||||
|
||||
<EuiFieldSearch
|
||||
fullWidth
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function AgentMarker({ agentMark, x }) {
|
|||
style={{
|
||||
position: 'absolute',
|
||||
left: px(x - legendWidth / 2),
|
||||
bottom: '-6px'
|
||||
bottom: 0
|
||||
}}
|
||||
>
|
||||
<EuiToolTip
|
||||
|
|
|
|||
|
|
@ -55,12 +55,17 @@ function TimelineAxis({ plotValues, agentMarks }) {
|
|||
tickSize={0}
|
||||
tickValues={xAxisTickValues}
|
||||
tickFormat={tickFormat}
|
||||
tickPadding={20}
|
||||
style={{
|
||||
text: { fill: colors.gray3 }
|
||||
}}
|
||||
/>
|
||||
|
||||
<LastTickValue x={xScale(xMax)} value={tickFormat(xMax)} />
|
||||
<LastTickValue
|
||||
x={xScale(xMax)}
|
||||
value={tickFormat(xMax)}
|
||||
marginTop={28}
|
||||
/>
|
||||
|
||||
{agentMarks.map(agentMark => (
|
||||
<AgentMarker
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
0
|
||||
</text>
|
||||
|
|
@ -172,7 +172,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
20 ms
|
||||
</text>
|
||||
|
|
@ -214,7 +214,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
40 ms
|
||||
</text>
|
||||
|
|
@ -256,7 +256,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
60 ms
|
||||
</text>
|
||||
|
|
@ -298,7 +298,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
80 ms
|
||||
</text>
|
||||
|
|
@ -340,7 +340,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
100 ms
|
||||
</text>
|
||||
|
|
@ -382,7 +382,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
120 ms
|
||||
</text>
|
||||
|
|
@ -424,7 +424,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
140 ms
|
||||
</text>
|
||||
|
|
@ -466,7 +466,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
160 ms
|
||||
</text>
|
||||
|
|
@ -508,7 +508,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
}
|
||||
}
|
||||
textAnchor="middle"
|
||||
transform="translate(0, -8)"
|
||||
transform="translate(0, -20)"
|
||||
>
|
||||
180 ms
|
||||
</text>
|
||||
|
|
@ -516,7 +516,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
</g>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(950, 100)"
|
||||
transform="translate(950, 28)"
|
||||
>
|
||||
<text
|
||||
dy="0"
|
||||
|
|
@ -530,7 +530,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
<div
|
||||
style={
|
||||
Object {
|
||||
"bottom": "-6px",
|
||||
"bottom": "0",
|
||||
"left": "484.2043232706185px",
|
||||
"position": "absolute",
|
||||
}
|
||||
|
|
@ -560,7 +560,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
<div
|
||||
style={
|
||||
Object {
|
||||
"bottom": "-6px",
|
||||
"bottom": "0",
|
||||
"left": "528.1747555976804px",
|
||||
"position": "absolute",
|
||||
}
|
||||
|
|
@ -590,7 +590,7 @@ exports[`Timeline should render with data 1`] = `
|
|||
<div
|
||||
style={
|
||||
Object {
|
||||
"bottom": "-6px",
|
||||
"bottom": "0",
|
||||
"left": "879.9382142141751px",
|
||||
"position": "absolute",
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue