Skip to content

Commit

Permalink
[APM] Correlations style polish in prep for release (elastic#92514)
Browse files Browse the repository at this point in the history
- Removed the icon from the "View correlations" button
- Moved the tabs to the FlyoutHeader
- Removed unneeded spacers in the content
- Reduced the filtering by callout and button
- Made the introduction text color `subdued` to make it less noisy
- Reduced ImpactBar size and extended width so the bar itself is `100`
- Changed the selected term visualization color to `euiColorVis2` because the `euiColorAccent` is not great for visualizations.
- Changed the latency distribution visualization color to `euiColorVis1` to make it consistent with the Transactions visualization colors in the other charts.
  • Loading branch information
formgeist authored and kibanamachine committed Feb 24, 2021
1 parent a12ae72 commit 22877fd
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,14 @@ export function CorrelationsTable<T extends SignificantTerm>({
const history = useHistory();
const columns: Array<EuiBasicTableColumn<T>> = [
{
width: '100px',
width: '116px',
field: 'impact',
name: i18n.translate(
'xpack.apm.correlations.correlationsTable.impactLabel',
{ defaultMessage: 'Impact' }
),
render: (_: any, term: T) => {
return <ImpactBar value={term.impact * 100} />;
return <ImpactBar size="m" value={term.impact * 100} />;
},
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export function ErrorCorrelations({ onClose }: Props) {
<>
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiText size="s">
<EuiText size="s" color="subdued">
<p>
{i18n.translate('xpack.apm.correlations.error.description', {
defaultMessage:
Expand Down
33 changes: 15 additions & 18 deletions x-pack/plugins/apm/public/components/app/correlations/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ export function Correlations() {
onClick={() => {
setIsFlyoutVisible(true);
}}
iconType="visTagCloud"
>
{i18n.translate('xpack.apm.correlations.buttonLabel', {
defaultMessage: 'View correlations',
Expand Down Expand Up @@ -100,12 +99,25 @@ export function Correlations() {
/>
</h2>
</EuiTitle>
<EuiTabs style={{ marginBottom: '-25px' }}>
{tabs.map(({ key, label }) => (
<EuiTab
key={key}
isSelected={key === currentTab}
onClick={() => {
setCurrentTab(key);
}}
>
{label}
</EuiTab>
))}
</EuiTabs>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<CorrelationsMetricsLicenseCheck>
{urlParams.kuery ? (
<>
<EuiCallOut size="m">
<EuiCallOut size="s">
<span>
{i18n.translate(
'xpack.apm.correlations.filteringByLabel',
Expand All @@ -116,7 +128,7 @@ export function Correlations() {
<EuiLink
href={createHref(history, { query: { kuery: '' } })}
>
<EuiButtonEmpty iconType="cross">
<EuiButtonEmpty size="xs" iconType="cross">
{i18n.translate(
'xpack.apm.correlations.clearFiltersLabel',
{ defaultMessage: 'Clear' }
Expand All @@ -128,21 +140,6 @@ export function Correlations() {
</>
) : null}

<EuiSpacer />
<EuiTabs>
{tabs.map(({ key, label }) => (
<EuiTab
key={key}
isSelected={key === currentTab}
onClick={() => {
setCurrentTab(key);
}}
>
{label}
</EuiTab>
))}
</EuiTabs>
<EuiSpacer />
<TabContent onClose={() => setIsFlyoutVisible(false)} />
</CorrelationsMetricsLicenseCheck>
</EuiFlyoutBody>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export function LatencyCorrelations({ onClose }: Props) {
<>
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiText size="s">
<EuiText size="s" color="subdued">
<p>
{i18n.translate('xpack.apm.correlations.latency.description', {
defaultMessage:
Expand Down Expand Up @@ -249,6 +249,7 @@ function LatencyDistributionChart({
yScaleType={ScaleType.Linear}
xAccessor={'x'}
yAccessors={['y']}
color={theme.eui.euiColorVis1}
data={data?.overall?.distribution || []}
minBarHeight={5}
tickFormat={(d) => `${roundFloat(d)}%`}
Expand All @@ -270,7 +271,7 @@ function LatencyDistributionChart({
yScaleType={ScaleType.Linear}
xAccessor={'x'}
yAccessors={['y']}
color={theme.eui.euiColorAccent}
color={theme.eui.euiColorVis2}
data={getSelectedDistribution(data, selectedSignificantTerm)}
minBarHeight={5}
tickFormat={(d) => `${roundFloat(d)}%`}
Expand Down

0 comments on commit 22877fd

Please sign in to comment.