maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Fleet] Wrap package policy editor errors in EuiErrorBoundary (#112263)

Browse source
This commit is contained in:
Nicolas Chaulet 2021-09-15 11:14:37 -04:00 committed by GitHub
parent a4229399f6
commit 584f92cc06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 158 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx
View file

@ -20,6 +20,7 @@ import {
EuiFlexItem,
EuiSpacer,
EuiLink,
EuiErrorBoundary,
} from '@elastic/eui';
import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
import type { ApplicationStart } from 'kibana/public';
@ -503,70 +504,75 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
return (
<CreatePackagePolicyPageLayout {...layoutProps} data-test-subj="createPackagePolicy">
{formState === 'CONFIRM' && agentPolicy && (
<ConfirmDeployAgentPolicyModal
agentCount={agentCount}
agentPolicy={agentPolicy}
onConfirm={onSubmit}
onCancel={() => setFormState('VALID')}
/>
)}
{packageInfo && (
<IntegrationBreadcrumb
pkgTitle={integrationInfo?.title || packageInfo.title}
pkgkey={pkgKeyFromPackageInfo(packageInfo)}
integration={integrationInfo?.name}
/>
)}
<StepsWithLessPadding steps={steps} />
<EuiSpacer size="xl" />
<EuiSpacer size="xl" />
<CustomEuiBottomBar data-test-subj="integrationsBottomBar">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{!isLoadingAgentPolicyStep && agentPolicy && packageInfo && formState === 'INVALID' ? (
<FormattedMessage
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
defaultMessage="Your integration policy has errors. Please fix them before saving."
/>
) : null}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
<EuiButtonEmpty
color="ghost"
href={cancelUrl}
onClick={cancelClickHandler}
data-test-subj="createPackagePolicyCancelButton"
>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
onClick={onSubmit}
isLoading={formState === 'LOADING'}
disabled={formState !== 'VALID'}
iconType="save"
color="primary"
fill
data-test-subj="createPackagePolicySaveButton"
>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.saveButton"
defaultMessage="Save integration"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</CustomEuiBottomBar>
<EuiErrorBoundary>
{formState === 'CONFIRM' && agentPolicy && (
<ConfirmDeployAgentPolicyModal
agentCount={agentCount}
agentPolicy={agentPolicy}
onConfirm={onSubmit}
onCancel={() => setFormState('VALID')}
/>
)}
{packageInfo && (
<IntegrationBreadcrumb
pkgTitle={integrationInfo?.title || packageInfo.title}
pkgkey={pkgKeyFromPackageInfo(packageInfo)}
integration={integrationInfo?.name}
/>
)}
<StepsWithLessPadding steps={steps} />
<EuiSpacer size="xl" />
<EuiSpacer size="xl" />
<CustomEuiBottomBar data-test-subj="integrationsBottomBar">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{!isLoadingAgentPolicyStep &&
agentPolicy &&
packageInfo &&
formState === 'INVALID' ? (
<FormattedMessage
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
defaultMessage="Your integration policy has errors. Please fix them before saving."
/>
) : null}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
<EuiButtonEmpty
color="ghost"
href={cancelUrl}
onClick={cancelClickHandler}
data-test-subj="createPackagePolicyCancelButton"
>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
onClick={onSubmit}
isLoading={formState === 'LOADING'}
disabled={formState !== 'VALID'}
iconType="save"
color="primary"
fill
data-test-subj="createPackagePolicySaveButton"
>
<FormattedMessage
id="xpack.fleet.createPackagePolicy.saveButton"
defaultMessage="Save integration"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</CustomEuiBottomBar>
</EuiErrorBoundary>
</CreatePackagePolicyPageLayout>
);
};

173
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx
View file

@ -25,6 +25,7 @@ import {
EuiFlyoutBody,
EuiFlyoutHeader,
EuiTitle,
EuiErrorBoundary,
} from '@elastic/eui';
import styled from 'styled-components';
@ -510,93 +511,95 @@ export const EditPackagePolicyForm = memo<{
return (
<CreatePackagePolicyPageLayout {...layoutProps} data-test-subj="editPackagePolicy">
{isLoadingData ? (
<Loading />
) : loadingError || !agentPolicy || !packageInfo ? (
<Error
title={
<FormattedMessage
id="xpack.fleet.editPackagePolicy.errorLoadingDataTitle"
defaultMessage="Error loading data"
/>
}
error={
loadingError ||
i18n.translate('xpack.fleet.editPackagePolicy.errorLoadingDataMessage', {
defaultMessage: 'There was an error loading this integration information',
})
}
/>
) : (
<>
<Breadcrumb
agentPolicyName={agentPolicy.name}
from={from}
packagePolicyName={packagePolicy.name}
pkgkey={pkgKeyFromPackageInfo(packageInfo)}
pkgTitle={packageInfo.title}
policyId={policyId}
<EuiErrorBoundary>
{isLoadingData ? (
<Loading />
) : loadingError || !agentPolicy || !packageInfo ? (
<Error
title={
<FormattedMessage
id="xpack.fleet.editPackagePolicy.errorLoadingDataTitle"
defaultMessage="Error loading data"
/>
}
error={
loadingError ||
i18n.translate('xpack.fleet.editPackagePolicy.errorLoadingDataMessage', {
defaultMessage: 'There was an error loading this integration information',
})
}
/>
{formState === 'CONFIRM' && (
<ConfirmDeployAgentPolicyModal
agentCount={agentCount}
agentPolicy={agentPolicy}
onConfirm={onSubmit}
onCancel={() => setFormState('VALID')}
) : (
<>
<Breadcrumb
agentPolicyName={agentPolicy.name}
from={from}
packagePolicyName={packagePolicy.name}
pkgkey={pkgKeyFromPackageInfo(packageInfo)}
pkgTitle={packageInfo.title}
policyId={policyId}
/>
)}
{isUpgrade && dryRunData && (
<>
<UpgradeStatusCallout dryRunData={dryRunData} />
<EuiSpacer size="xxl" />
</>
)}
{configurePackage}
{/* Extra space to accomodate the EuiBottomBar height */}
<EuiSpacer size="xxl" />
<EuiSpacer size="xxl" />
<EuiBottomBar>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{agentPolicy && packageInfo && formState === 'INVALID' ? (
<FormattedMessage
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
defaultMessage="Your integration policy has errors. Please fix them before saving."
/>
) : null}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="ghost" href={cancelUrl}>
<FormattedMessage
id="xpack.fleet.editPackagePolicy.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
onClick={onSubmit}
isLoading={formState === 'LOADING'}
disabled={formState !== 'VALID'}
iconType="save"
color="primary"
fill
data-test-subj="saveIntegration"
>
<FormattedMessage
id="xpack.fleet.editPackagePolicy.saveButton"
defaultMessage="Save integration"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
</>
)}
{formState === 'CONFIRM' && (
<ConfirmDeployAgentPolicyModal
agentCount={agentCount}
agentPolicy={agentPolicy}
onConfirm={onSubmit}
onCancel={() => setFormState('VALID')}
/>
)}
{isUpgrade && dryRunData && (
<>
<UpgradeStatusCallout dryRunData={dryRunData} />
<EuiSpacer size="xxl" />
</>
)}
{configurePackage}
{/* Extra space to accomodate the EuiBottomBar height */}
<EuiSpacer size="xxl" />
<EuiSpacer size="xxl" />
<EuiBottomBar>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{agentPolicy && packageInfo && formState === 'INVALID' ? (
<FormattedMessage
id="xpack.fleet.createPackagePolicy.errorOnSaveText"
defaultMessage="Your integration policy has errors. Please fix them before saving."
/>
) : null}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="ghost" href={cancelUrl}>
<FormattedMessage
id="xpack.fleet.editPackagePolicy.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
onClick={onSubmit}
isLoading={formState === 'LOADING'}
disabled={formState !== 'VALID'}
iconType="save"
color="primary"
fill
data-test-subj="saveIntegration"
>
<FormattedMessage
id="xpack.fleet.editPackagePolicy.saveButton"
defaultMessage="Save integration"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
</>
)}
</EuiErrorBoundary>
</CreatePackagePolicyPageLayout>
);
});