cloudConfig: error component
Add an error component to improve the UI when there is an issue reading the `osbuild-worker.toml` file.
This commit is contained in:
parent
ecc1c2c8cd
commit
73ffb97414
1 changed files with 44 additions and 9 deletions
|
|
@ -1,6 +1,18 @@
|
||||||
import React, { useCallback, useEffect } from 'react';
|
import React, { MouseEventHandler, useCallback, useEffect } from 'react';
|
||||||
|
|
||||||
import { PageSection, Wizard, WizardStep } from '@patternfly/react-core';
|
import {
|
||||||
|
Button,
|
||||||
|
EmptyState,
|
||||||
|
EmptyStateActions,
|
||||||
|
EmptyStateBody,
|
||||||
|
EmptyStateFooter,
|
||||||
|
EmptyStateVariant,
|
||||||
|
PageSection,
|
||||||
|
Title,
|
||||||
|
Wizard,
|
||||||
|
WizardStep,
|
||||||
|
} from '@patternfly/react-core';
|
||||||
|
import { ExclamationIcon } from '@patternfly/react-icons';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
import { AWSConfig } from './AWSConfig';
|
import { AWSConfig } from './AWSConfig';
|
||||||
|
|
@ -17,6 +29,35 @@ import { useAppDispatch } from '../../store/hooks';
|
||||||
import { resolveRelPath } from '../../Utilities/path';
|
import { resolveRelPath } from '../../Utilities/path';
|
||||||
import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
|
import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
|
||||||
|
|
||||||
|
const ConfigError = ({
|
||||||
|
onClose,
|
||||||
|
}: {
|
||||||
|
onClose: MouseEventHandler<HTMLButtonElement>;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<EmptyState
|
||||||
|
variant={EmptyStateVariant.xl}
|
||||||
|
icon={ExclamationIcon}
|
||||||
|
color="#C9190B"
|
||||||
|
>
|
||||||
|
<Title headingLevel="h4" size="lg">
|
||||||
|
Error
|
||||||
|
</Title>
|
||||||
|
<EmptyStateBody>
|
||||||
|
There was an error reading the `/etc/osbuild-worker/osbuild-worker.toml`
|
||||||
|
config file
|
||||||
|
</EmptyStateBody>
|
||||||
|
<EmptyStateFooter>
|
||||||
|
<EmptyStateActions>
|
||||||
|
<Button variant="primary" onClick={onClose}>
|
||||||
|
Go back
|
||||||
|
</Button>
|
||||||
|
</EmptyStateActions>
|
||||||
|
</EmptyStateFooter>
|
||||||
|
</EmptyState>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const CloudProviderConfig = () => {
|
export const CloudProviderConfig = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
@ -48,13 +89,7 @@ export const CloudProviderConfig = () => {
|
||||||
}, [data, initAWSConfig]);
|
}, [data, initAWSConfig]);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
// TODO: improve error alert
|
return <ConfigError onClose={handleClose} />;
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
There was an error reading the `/etc/osbuild-worker/osbuild-worker.toml`
|
|
||||||
config file
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue