Skip to content

Commit

Permalink
[Ingest Manager] Improve agent config list -> detail UI transition (#…
Browse files Browse the repository at this point in the history 
…73566)

* Improve agent config detail page loading state

* Show ID instead of loading icon

* Fix types
  • Loading branch information
@jen-huang
jen-huang authored Aug 4, 2020
1 parent 4031f55 commit 3cce216
Showing 1 changed file with 133 additions and 128 deletions.
261 changes: 133 additions & 128 deletions ...t_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiCallOut,
EuiText,
EuiSpacer,
EuiButtonEmpty,
Expand All @@ -24,7 +23,7 @@ import styled from 'styled-components';
import { AgentConfig, AgentConfigDetailsDeployAgentAction } from '../../../types';
import { PAGE_ROUTING_PATHS } from '../../../constants';
import { useGetOneAgentConfig, useLink, useBreadcrumbs, useCore } from '../../../hooks';
import { Loading } from '../../../components';
import { Loading, Error } from '../../../components';
import { WithHeaderLayout } from '../../../layouts';
import { ConfigRefreshContext, useGetAgentStatus, AgentStatusRefreshContext } from './hooks';
import { LinkedAgentCount, AgentConfigActionMenu } from '../components';
Expand Down Expand Up @@ -109,97 +108,98 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
}, [routeState, navigateToApp]);

const headerRightContent = useMemo(
() => (
<EuiFlexGroup justifyContent={'flexEnd'} direction="row">
{[
{
label: i18n.translate('xpack.ingestManager.configDetails.summary.revision', {
defaultMessage: 'Revision',
}),
content: agentConfig?.revision ?? 0,
},
{ isDivider: true },
{
label: i18n.translate('xpack.ingestManager.configDetails.summary.package_configs', {
defaultMessage: 'Integrations',
}),
content: (
<EuiI18nNumber
value={
(agentConfig &&
agentConfig.package_configs &&
agentConfig.package_configs.length) ||
0
}
/>
),
},
{ isDivider: true },
{
label: i18n.translate('xpack.ingestManager.configDetails.summary.usedBy', {
defaultMessage: 'Used by',
}),
content: (
<LinkedAgentCount
count={(agentStatus && agentStatus.total) || 0}
agentConfigId={(agentConfig && agentConfig.id) || ''}
/>
),
},
{ isDivider: true },
{
label: i18n.translate('xpack.ingestManager.configDetails.summary.lastUpdated', {
defaultMessage: 'Last updated on',
}),
content:
(agentConfig && (
<FormattedDate
value={agentConfig?.updated_at}
year="numeric"
month="short"
day="2-digit"
() =>
agentConfig ? (
<EuiFlexGroup justifyContent={'flexEnd'} direction="row">
{[
{
label: i18n.translate('xpack.ingestManager.configDetails.summary.revision', {
defaultMessage: 'Revision',
}),
content: agentConfig?.revision ?? 0,
},
{ isDivider: true },
{
label: i18n.translate('xpack.ingestManager.configDetails.summary.package_configs', {
defaultMessage: 'Integrations',
}),
content: (
<EuiI18nNumber
value={
(agentConfig &&
agentConfig.package_configs &&
agentConfig.package_configs.length) ||
0
}
/>
)) ||
'',
},
{ isDivider: true },
{
content: agentConfig && (
<AgentConfigActionMenu
config={agentConfig}
fullButton={true}
onCopySuccess={(newAgentConfig: AgentConfig) => {
history.push(getPath('configuration_details', { configId: newAgentConfig.id }));
}}
enrollmentFlyoutOpenByDefault={openEnrollmentFlyoutOpenByDefault}
onCancelEnrollment={
routeState && routeState.onDoneNavigateTo
? enrollmentCancelClickHandler
: undefined
}
/>
),
},
].map((item, index) => (
<EuiFlexItem grow={false} key={index}>
{item.isDivider ?? false ? (
<Divider />
) : item.label ? (
<EuiDescriptionList compressed textStyle="reverse" style={{ textAlign: 'right' }}>
<EuiDescriptionListTitle className="eui-textNoWrap">
{item.label}
</EuiDescriptionListTitle>
<EuiDescriptionListDescription className="eui-textNoWrap">
{item.content}
</EuiDescriptionListDescription>
</EuiDescriptionList>
) : (
item.content
)}
</EuiFlexItem>
))}
</EuiFlexGroup>
),
),
},
{ isDivider: true },
{
label: i18n.translate('xpack.ingestManager.configDetails.summary.usedBy', {
defaultMessage: 'Used by',
}),
content: (
<LinkedAgentCount
count={(agentStatus && agentStatus.total) || 0}
agentConfigId={(agentConfig && agentConfig.id) || ''}
/>
),
},
{ isDivider: true },
{
label: i18n.translate('xpack.ingestManager.configDetails.summary.lastUpdated', {
defaultMessage: 'Last updated on',
}),
content:
(agentConfig && (
<FormattedDate
value={agentConfig?.updated_at}
year="numeric"
month="short"
day="2-digit"
/>
)) ||
'',
},
{ isDivider: true },
{
content: agentConfig && (
<AgentConfigActionMenu
config={agentConfig}
fullButton={true}
onCopySuccess={(newAgentConfig: AgentConfig) => {
history.push(getPath('configuration_details', { configId: newAgentConfig.id }));
}}
enrollmentFlyoutOpenByDefault={openEnrollmentFlyoutOpenByDefault}
onCancelEnrollment={
routeState && routeState.onDoneNavigateTo
? enrollmentCancelClickHandler
: undefined
}
/>
),
},
].map((item, index) => (
<EuiFlexItem grow={false} key={index}>
{item.isDivider ?? false ? (
<Divider />
) : item.label ? (
<EuiDescriptionList compressed textStyle="reverse" style={{ textAlign: 'right' }}>
<EuiDescriptionListTitle className="eui-textNoWrap">
{item.label}
</EuiDescriptionListTitle>
<EuiDescriptionListDescription className="eui-textNoWrap">
{item.content}
</EuiDescriptionListDescription>
</EuiDescriptionList>
) : (
item.content
)}
</EuiFlexItem>
))}
</EuiFlexGroup>
) : undefined,
/* eslint-disable-next-line react-hooks/exhaustive-deps */
[agentConfig, configId, agentStatus]
);
Expand All @@ -225,45 +225,50 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
];
}, [getHref, configId, tabId]);

if (redirectToAgentConfigList) {
return <Redirect to="/" />;
}
const content = useMemo(() => {
if (redirectToAgentConfigList) {
return <Redirect to="/" />;
}

if (isLoading) {
return <Loading />;
}
if (isLoading) {
return <Loading />;
}

if (error) {
return (
<WithHeaderLayout>
<EuiCallOut
title={i18n.translate('xpack.ingestManager.configDetails.unexceptedErrorTitle', {
defaultMessage: 'An error happened while loading the config',
})}
color="danger"
iconType="alert"
>
<p>
<EuiText>{error.message}</EuiText>
</p>
</EuiCallOut>
</WithHeaderLayout>
);
}
if (error) {
return (
<Error
title={
<FormattedMessage
id="xpack.ingestManager.configDetails.unexceptedErrorTitle"
defaultMessage="An error happened while loading the config"
/>
}
error={error}
/>
);
}

if (!agentConfig) {
return (
<WithHeaderLayout>
<FormattedMessage
id="xpack.ingestManager.configDetails.configNotFoundErrorTitle"
defaultMessage="Config '{id}' not found"
values={{
id: configId,
}}
if (!agentConfig) {
return (
<Error
title={
<FormattedMessage
id="xpack.ingestManager.configDetails.unexceptedErrorTitle"
defaultMessage="An error happened while loading the config"
/>
}
error={i18n.translate('xpack.ingestManager.configDetails.configNotFoundErrorTitle', {
defaultMessage: "Config '{id}' not found",
values: {
id: configId,
},
})}
/>
</WithHeaderLayout>
);
}
);
}

return <AgentConfigDetailsContent agentConfig={agentConfig} />;
}, [agentConfig, configId, error, isLoading, redirectToAgentConfigList]);

return (
<ConfigRefreshContext.Provider value={{ refresh: refreshAgentConfig }}>
Expand All @@ -273,7 +278,7 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
rightColumn={headerRightContent}
tabs={(headerTabs as unknown) as EuiTabProps[]}
>
<AgentConfigDetailsContent agentConfig={agentConfig} />
{content}
</WithHeaderLayout>
</AgentStatusRefreshContext.Provider>
</ConfigRefreshContext.Provider>
Expand Down

0 comments on commit 3cce216

Please sign in to comment.