Skip to content

Commit

Permalink
[APM] Replace side nav with tabs on Settings page (#101460) (#101803)
Browse files Browse the repository at this point in the history 
Co-authored-by: Casper Hübertz <[email protected]>

Co-authored-by: Casper Hübertz <[email protected]>
  • Loading branch information
@sorenlouv @formgeist
sorenlouv and formgeist authored Jun 9, 2021
1 parent aa2b43d commit 5f01e72
Show file tree
Hide file tree
Showing 18 changed files with 384 additions and 478 deletions.
23 changes: 3 additions & 20 deletions ...app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx
View file
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
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
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
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
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

0 comments on commit 5f01e72

Please sign in to comment.