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

[APM] Replace side nav with tabs on Settings page #101460

Merged
merged 7 commits into from
Jun 9, 2021
Merged

[APM] Replace side nav with tabs on Settings page #101460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2f72c72
Add tabs to settings page
sorenlouv Jun 7, 2021
273cd7b
Fix tests
sorenlouv Jun 7, 2021
1d9efcd
fix i18n
sorenlouv Jun 7, 2021
62123d8
Revert Settings title
sorenlouv Jun 9, 2021
d073984
Remove redundant title
sorenlouv Jun 9, 2021
fcc9be8
Fix tsc
sorenlouv Jun 9, 2021
42c426c
i18n fixes
sorenlouv Jun 9, 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
23 changes: 3 additions & 20 deletions ...app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,7 @@
* 2.0.
*/

import {
EuiTitle,
EuiSpacer,
EuiPanel,
EuiFlexGroup,
EuiFlexItem,
EuiButton,
} from '@elastic/eui';
import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
import React from 'react';
import { i18n } from '@kbn/i18n';
import { isString } from 'lodash';
Expand Down Expand Up @@ -100,17 +93,7 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
);

return (
<EuiPanel paddingSize="m">
<EuiTitle size="xs">
<h3>
{i18n.translate('xpack.apm.agentConfig.servicePage.title', {
defaultMessage: 'Choose service',
})}
</h3>
</EuiTitle>

<EuiSpacer size="m" />

<>
{/* Service name options */}
<FormRowSelect
title={i18n.translate(
Expand Down Expand Up @@ -207,6 +190,6 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</>
);
}
113 changes: 44 additions & 69 deletions ...p/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,10 @@ import {
EuiForm,
EuiHealth,
EuiLoadingSpinner,
EuiPanel,
EuiSpacer,
EuiStat,
EuiText,
EuiTitle,
EuiHorizontalRule,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useMemo, useState } from 'react';
Expand Down Expand Up @@ -136,79 +135,55 @@ export function SettingsPage({
}}
>
{/* Selected Service panel */}
<EuiPanel paddingSize="m">
<EuiTitle size="s">
<h3>
{i18n.translate('xpack.apm.agentConfig.chooseService.title', {
defaultMessage: 'Choose service',
})}
</h3>
</EuiTitle>

<EuiSpacer size="m" />

<EuiFlexGroup>
<EuiFlexItem>
<EuiStat
titleSize="xs"
title={
isLoading ? '-' : getOptionLabel(newConfig.service.name)
}
description={i18n.translate(
'xpack.apm.agentConfig.chooseService.service.name.label',
{ defaultMessage: 'Service name' }
)}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
titleSize="xs"
title={
isLoading
? '-'
: getOptionLabel(newConfig.service.environment)
}
description={i18n.translate(
'xpack.apm.agentConfig.chooseService.service.environment.label',
{ defaultMessage: 'Environment' }
)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{!isEditMode && (
<EuiButton onClick={onClickEdit} iconType="pencil">
{i18n.translate(
'xpack.apm.agentConfig.chooseService.editButton',
{ defaultMessage: 'Edit' }
)}
</EuiButton>
<EuiFlexGroup>
<EuiFlexItem>
<EuiStat
titleSize="xs"
title={isLoading ? '-' : getOptionLabel(newConfig.service.name)}
description={i18n.translate(
'xpack.apm.agentConfig.chooseService.service.name.label',
{ defaultMessage: 'Service name' }
)}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
titleSize="xs"
title={
isLoading
? '-'
: getOptionLabel(newConfig.service.environment)
}
description={i18n.translate(
'xpack.apm.agentConfig.chooseService.service.environment.label',
{ defaultMessage: 'Environment' }
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{!isEditMode && (
<EuiButton onClick={onClickEdit} iconType="pencil">
{i18n.translate(
'xpack.apm.agentConfig.chooseService.editButton',
{ defaultMessage: 'Edit' }
)}
</EuiButton>
)}
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="m" />
<EuiHorizontalRule />

{/* Settings panel */}
<EuiPanel paddingSize="m">
<EuiTitle size="s">
<h3>
{i18n.translate('xpack.apm.agentConfig.settings.title', {
defaultMessage: 'Configuration options',
})}
</h3>
</EuiTitle>

<EuiSpacer size="m" />

{isLoading ? (
<div style={{ textAlign: 'center' }}>
<EuiLoadingSpinner size="m" />
</div>
) : (
renderSettings({ unsavedChanges, newConfig, setNewConfig })
)}
</EuiPanel>
{isLoading ? (
<div style={{ textAlign: 'center' }}>
<EuiLoadingSpinner size="m" />
</div>
) : (
renderSettings({ unsavedChanges, newConfig, setNewConfig })
)}
</form>
</EuiForm>
<EuiSpacer size="xxl" />
Expand Down
16 changes: 9 additions & 7 deletions ...public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,15 @@ export function AgentConfigurationCreateEdit({

return (
<>
<EuiTitle>
<EuiText color="subdued">
{i18n.translate('xpack.apm.agentConfig.newConfig.description', {
defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
})}
</EuiText>

<EuiSpacer size="m" />

<EuiTitle size="s">
<h2>
{isEditMode
? i18n.translate('xpack.apm.agentConfig.editConfigTitle', {
Expand All @@ -121,12 +129,6 @@ export function AgentConfigurationCreateEdit({
</h2>
</EuiTitle>

<EuiText size="s">
{i18n.translate('xpack.apm.agentConfig.newConfig.description', {
defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
})}
</EuiText>

<EuiSpacer size="m" />

{pageStep === 'choose-service-step' && (
Expand Down
53 changes: 22 additions & 31 deletions x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
EuiButton,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiTitle,
EuiText,
Expand Down Expand Up @@ -42,44 +41,36 @@ export function AgentConfigurations() {

return (
<>
<EuiTitle>
<h2>
{i18n.translate('xpack.apm.agentConfig.titleText', {
defaultMessage: 'Agent central configuration',
})}
</h2>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText color="subdued">
{i18n.translate('xpack.apm.settings.agentConfig.descriptionText', {
defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
})}
</EuiText>
<EuiSpacer size="l" />
<EuiPanel>
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h2>
{i18n.translate(
'xpack.apm.agentConfig.configurationsPanelTitle',
{ defaultMessage: 'Configurations' }
)}
</h2>
</EuiTitle>
</EuiFlexItem>

{hasConfigurations ? <CreateConfigurationButton /> : null}
</EuiFlexGroup>
<EuiSpacer size="m" />

<EuiSpacer size="m" />
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h2>
{i18n.translate(
'xpack.apm.agentConfig.configurationsPanelTitle',
{ defaultMessage: 'Configurations' }
)}
</h2>
</EuiTitle>
</EuiFlexItem>

{hasConfigurations ? <CreateConfigurationButton /> : null}
</EuiFlexGroup>

<EuiSpacer size="m" />

<AgentConfigurationList
status={status}
configurations={data.configurations}
refetch={refetch}
/>
</EuiPanel>
<AgentConfigurationList
status={status}
configurations={data.configurations}
refetch={refetch}
/>
</>
);
}
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe('ApmIndices', () => {

expect(getByText('Indices')).toMatchInlineSnapshot(`
<h2
class="euiTitle euiTitle--medium"
class="euiTitle euiTitle--small"
>
Indices
</h2>
Expand Down
Loading