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] Correlations style polish in prep for release #92514

Merged
merged 8 commits into from
Feb 24, 2021
Merged

[APM] Correlations style polish in prep for release #92514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
383231e
[APM] Adjust impact bar size
formgeist Feb 23, 2021
5153219
[APM] Change intro copy to subdued color
formgeist Feb 23, 2021
a4da0e9
[APM] Remove icon from button
formgeist Feb 23, 2021
66b190d
[APM] Moved tabs to the FlyoutHeader
formgeist Feb 23, 2021
699891d
[APM] Reduced Callout size
formgeist Feb 23, 2021
5df46de
[APM] Reduced button size
formgeist Feb 23, 2021
93259e5
[APM] Removed spacers
formgeist Feb 23, 2021
fec7305
[APM] Updating latency and selected term viz colors
formgeist Feb 23, 2021
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
4 changes: 2 additions & 2 deletions x-pack/plugins/apm/public/components/app/correlations/correlations_table.tsx
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx
View file
Open in desktop
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
View file
Open in desktop
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
5 changes: 3 additions & 2 deletions x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx
View file
Open in desktop
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