Wizard: Drop the WizardV1
This commit is contained in:
Ondrej Ezr
Klara Simickova
parent
54d09d636e
commit
5fcc80d2db
75 changed files with 103 additions and 11588 deletions
|
|
@ -17,14 +17,11 @@ import {
|
|||
PlusCircleIcon,
|
||||
SearchIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
CREATING_IMAGES_WITH_IB_SERVICE_URL,
|
||||
MANAGING_WITH_DNF_URL,
|
||||
} from '../../constants';
|
||||
import { resolveRelPath } from '../../Utilities/path';
|
||||
import { useExperimentalFlag } from '../../Utilities/useExperimentalFlag';
|
||||
import { BuildImagesButton } from '../Blueprints/BuildImagesButton';
|
||||
|
||||
type ImagesEmptyStateProps = {
|
||||
|
|
@ -57,84 +54,58 @@ const EmptyBlueprintsImagesTable = () => (
|
|||
);
|
||||
|
||||
const EmptyImagesTable = () => {
|
||||
const experimentalFlag = useExperimentalFlag();
|
||||
return (
|
||||
<Bullseye>
|
||||
<EmptyState variant={EmptyStateVariant.lg} data-testid="empty-state">
|
||||
{experimentalFlag ? (
|
||||
<>
|
||||
<EmptyStateHeader
|
||||
titleText="No images"
|
||||
icon={<EmptyStateIcon icon={SearchIcon} />}
|
||||
headingLevel="h4"
|
||||
/>
|
||||
<EmptyStateBody>
|
||||
<Text>Images are BLANK. Create blueprints to create images.</Text>
|
||||
</EmptyStateBody>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EmptyStateHeader
|
||||
titleText="Create an RPM-DNF image"
|
||||
icon={<EmptyStateIcon icon={PlusCircleIcon} />}
|
||||
headingLevel="h4"
|
||||
/>
|
||||
<EmptyStateBody>
|
||||
<Text>
|
||||
Image builder is a tool for creating deployment-ready customized
|
||||
system images: installation disks, virtual machines, cloud
|
||||
vendor-specific images, and others. By using image builder, you
|
||||
can create these images faster than with manual procedures
|
||||
because it eliminates the specific configurations required for
|
||||
each output type.
|
||||
</Text>
|
||||
<br />
|
||||
<Text>
|
||||
With RPM-DNF, you can manage the system software by using the
|
||||
DNF package manager and updated RPM packages. This is a simple
|
||||
and adaptive method of managing and modifying the system over
|
||||
its lifecycle.
|
||||
</Text>
|
||||
<br />
|
||||
<Text>
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<ExternalLinkAltIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={MANAGING_WITH_DNF_URL}
|
||||
>
|
||||
Learn more about managing images with DNF
|
||||
</Button>
|
||||
</Text>
|
||||
</EmptyStateBody>
|
||||
<EmptyStateFooter>
|
||||
<Link
|
||||
to={resolveRelPath('imagewizard')}
|
||||
className="pf-c-button pf-m-primary"
|
||||
data-testid="create-image-action-empty-state"
|
||||
<>
|
||||
<EmptyStateHeader
|
||||
titleText="No images"
|
||||
icon={<EmptyStateIcon icon={SearchIcon} />}
|
||||
headingLevel="h4"
|
||||
/>
|
||||
<EmptyStateBody>
|
||||
<Text>
|
||||
Image builder is a tool for creating deployment-ready customized
|
||||
system images: installation disks, virtual machines, cloud
|
||||
vendor-specific images, and others. By using image builder, you
|
||||
can create these images faster than with manual procedures because
|
||||
it eliminates the specific configurations required for each output
|
||||
type.
|
||||
</Text>
|
||||
<Text>
|
||||
There are no images yet. Create a blueprint to create images.
|
||||
</Text>
|
||||
<Text>
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<ExternalLinkAltIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={MANAGING_WITH_DNF_URL}
|
||||
>
|
||||
Create image
|
||||
</Link>
|
||||
<EmptyStateActions>
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<ExternalLinkAltIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={CREATING_IMAGES_WITH_IB_SERVICE_URL}
|
||||
className="pf-u-pt-md"
|
||||
>
|
||||
Image builder for RPM-DNF documentation
|
||||
</Button>
|
||||
</EmptyStateActions>
|
||||
</EmptyStateFooter>
|
||||
</>
|
||||
)}
|
||||
Learn more about managing images with DNF
|
||||
</Button>
|
||||
</Text>
|
||||
</EmptyStateBody>
|
||||
<EmptyStateFooter>
|
||||
<EmptyStateActions>
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<ExternalLinkAltIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={CREATING_IMAGES_WITH_IB_SERVICE_URL}
|
||||
className="pf-u-pt-md"
|
||||
>
|
||||
Image builder for RPM-DNF documentation
|
||||
</Button>
|
||||
</EmptyStateActions>
|
||||
</EmptyStateFooter>
|
||||
</>
|
||||
</EmptyState>
|
||||
</Bullseye>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -68,7 +68,6 @@ import {
|
|||
timestampToDisplayString,
|
||||
timestampToDisplayStringDetailed,
|
||||
} from '../../Utilities/time';
|
||||
import { useExperimentalFlag } from '../../Utilities/useExperimentalFlag';
|
||||
|
||||
const ImagesTable = () => {
|
||||
const [page, setPage] = useState(1);
|
||||
|
|
@ -93,7 +92,6 @@ const ImagesTable = () => {
|
|||
}),
|
||||
}
|
||||
);
|
||||
const experimentalFlag = useExperimentalFlag();
|
||||
const onSetPage: OnSetPage = (_, page) => setPage(page);
|
||||
|
||||
const onPerPageSelect: OnSetPage = (_, perPage) => {
|
||||
|
|
@ -198,7 +196,7 @@ const ImagesTable = () => {
|
|||
<Th>Updated</Th>
|
||||
<Th>OS</Th>
|
||||
<Th>Target</Th>
|
||||
{experimentalFlag && <Th>Version</Th>}
|
||||
<Th>Version</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Instance</Th>
|
||||
<Th aria-label="Actions menu" />
|
||||
|
|
@ -407,7 +405,6 @@ type AwsRowPropTypes = {
|
|||
|
||||
const AwsRow = ({ compose, composeStatus, rowIndex }: AwsRowPropTypes) => {
|
||||
const navigate = useNavigate();
|
||||
const experimentalFlag = useExperimentalFlag();
|
||||
|
||||
const target = <AwsTarget compose={compose} />;
|
||||
|
||||
|
|
@ -418,9 +415,7 @@ const AwsRow = ({ compose, composeStatus, rowIndex }: AwsRowPropTypes) => {
|
|||
const details = <AwsDetails compose={compose} />;
|
||||
|
||||
const actions = (
|
||||
<ActionsColumn
|
||||
items={awsActions(compose, composeStatus, navigate, experimentalFlag)}
|
||||
/>
|
||||
<ActionsColumn items={awsActions(compose, composeStatus, navigate)} />
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -457,8 +452,6 @@ const Row = ({
|
|||
}: RowPropTypes) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const handleToggle = () => setIsExpanded(!isExpanded);
|
||||
const experimentalFlag = useExperimentalFlag();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Tbody key={compose.id} isExpanded={isExpanded}>
|
||||
|
|
@ -483,20 +476,16 @@ const Row = ({
|
|||
<Td dataLabel="Target">
|
||||
{target ? target : <Target compose={compose} />}
|
||||
</Td>
|
||||
{experimentalFlag && (
|
||||
<Td dataLabel="Version">
|
||||
<Badge isRead>{compose.blueprint_version || 'N/A'}</Badge>
|
||||
</Td>
|
||||
)}
|
||||
<Td dataLabel="Version">
|
||||
<Badge isRead>{compose.blueprint_version || 'N/A'}</Badge>
|
||||
</Td>
|
||||
<Td dataLabel="Status">{status}</Td>
|
||||
<Td dataLabel="Instance">{instance}</Td>
|
||||
<Td>
|
||||
{actions ? (
|
||||
actions
|
||||
) : (
|
||||
<ActionsColumn
|
||||
items={defaultActions(compose, navigate, experimentalFlag)}
|
||||
/>
|
||||
<ActionsColumn items={defaultActions(compose)} />
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
|
|
@ -509,21 +498,7 @@ const Row = ({
|
|||
);
|
||||
};
|
||||
|
||||
const defaultActions = (
|
||||
compose: ComposesResponseItem,
|
||||
navigate: NavigateFunction,
|
||||
experimentalFlag: boolean
|
||||
) => [
|
||||
...(experimentalFlag
|
||||
? []
|
||||
: [
|
||||
{
|
||||
title: 'Recreate image',
|
||||
onClick: () => {
|
||||
navigate(resolveRelPath(`imagewizard/${compose.id}`));
|
||||
},
|
||||
},
|
||||
]),
|
||||
const defaultActions = (compose: ComposesResponseItem) => [
|
||||
{
|
||||
title: (
|
||||
<a
|
||||
|
|
@ -542,15 +517,14 @@ const defaultActions = (
|
|||
const awsActions = (
|
||||
compose: ComposesResponseItem,
|
||||
status: ComposeStatus | undefined,
|
||||
navigate: NavigateFunction,
|
||||
experimentalFlag: boolean
|
||||
navigate: NavigateFunction
|
||||
) => [
|
||||
{
|
||||
title: 'Share to new region',
|
||||
onClick: () => navigate(resolveRelPath(`share/${compose.id}`)),
|
||||
isDisabled: status?.image_status.status === 'success' ? false : true,
|
||||
},
|
||||
...defaultActions(compose, navigate, experimentalFlag),
|
||||
...defaultActions(compose),
|
||||
];
|
||||
|
||||
export default ImagesTable;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {
|
|||
ToolbarItem,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
selectSelectedBlueprintId,
|
||||
|
|
@ -21,8 +20,6 @@ import {
|
|||
useGetBlueprintsQuery,
|
||||
useGetBlueprintComposesQuery,
|
||||
} from '../../store/imageBuilderApi';
|
||||
import { resolveRelPath } from '../../Utilities/path';
|
||||
import { useExperimentalFlag } from '../../Utilities/useExperimentalFlag';
|
||||
import { BlueprintActionsMenu } from '../Blueprints/BlueprintActionsMenu';
|
||||
import BlueprintVersionFilter from '../Blueprints/BlueprintVersionFilter';
|
||||
import { BuildImagesButton } from '../Blueprints/BuildImagesButton';
|
||||
|
|
@ -44,7 +41,6 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
|
|||
setPage,
|
||||
onPerPageSelect,
|
||||
}: imagesTableToolbarProps) => {
|
||||
const experimentalFlag = useExperimentalFlag();
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
|
||||
const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
|
||||
|
|
@ -98,27 +94,6 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
|
|||
/>
|
||||
);
|
||||
|
||||
if (!experimentalFlag) {
|
||||
return (
|
||||
<Toolbar>
|
||||
<ToolbarContent>
|
||||
<ToolbarItem>
|
||||
<Link
|
||||
to={resolveRelPath('imagewizard')}
|
||||
className="pf-c-button pf-m-primary"
|
||||
data-testid="create-image-action"
|
||||
>
|
||||
Create image
|
||||
</Link>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
|
||||
{pagination}
|
||||
</ToolbarItem>
|
||||
</ToolbarContent>
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
|
||||
const isBlueprintDistroCentos8 = () => {
|
||||
if (isSuccessBlueprintsCompose) {
|
||||
return blueprintsComposes.data[0].request.distribution === 'centos-8';
|
||||
|
|
@ -139,7 +114,7 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
|
|||
: 'All images'}
|
||||
</Title>
|
||||
</ToolbarContent>
|
||||
{itemCount > 0 && experimentalFlag && isBlueprintOutSync && (
|
||||
{itemCount > 0 && isBlueprintOutSync && (
|
||||
<Alert
|
||||
style={{
|
||||
margin:
|
||||
|
|
@ -164,25 +139,28 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
|
|||
ouiaId="centos-8-blueprint-alert"
|
||||
/>
|
||||
)}
|
||||
{selectedBlueprintId && (
|
||||
<ToolbarContent>
|
||||
<ToolbarItem>
|
||||
<BlueprintVersionFilter onFilterChange={() => setPage(1)} />
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<BuildImagesButton />
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<EditBlueprintButton />
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<BlueprintActionsMenu setShowDeleteModal={setShowDeleteModal} />
|
||||
</ToolbarItem>
|
||||
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
|
||||
{pagination}
|
||||
</ToolbarItem>
|
||||
</ToolbarContent>
|
||||
)}
|
||||
|
||||
<ToolbarContent>
|
||||
{selectedBlueprintId && (
|
||||
<>
|
||||
<ToolbarItem>
|
||||
<BlueprintVersionFilter onFilterChange={() => setPage(1)} />
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<BuildImagesButton />
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<EditBlueprintButton />
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<BlueprintActionsMenu setShowDeleteModal={setShowDeleteModal} />
|
||||
</ToolbarItem>
|
||||
</>
|
||||
)}
|
||||
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
|
||||
{pagination}
|
||||
</ToolbarItem>
|
||||
</ToolbarContent>
|
||||
</Toolbar>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ import {
|
|||
isOciUploadStatus,
|
||||
} from '../../store/typeGuards';
|
||||
import { resolveRelPath } from '../../Utilities/path';
|
||||
import { useExperimentalFlag } from '../../Utilities/useExperimentalFlag';
|
||||
import useProvisioningPermissions from '../../Utilities/useProvisioningPermissions';
|
||||
|
||||
type CloudInstancePropTypes = {
|
||||
|
|
@ -347,9 +346,6 @@ export const AwsS3Instance = ({
|
|||
composeId: compose.id,
|
||||
});
|
||||
|
||||
const navigate = useNavigate();
|
||||
const experimentalFlag = useExperimentalFlag();
|
||||
|
||||
if (!isSuccess) {
|
||||
return <Skeleton />;
|
||||
}
|
||||
|
|
@ -388,18 +384,6 @@ export const AwsS3Instance = ({
|
|||
)
|
||||
</Button>
|
||||
);
|
||||
} else if (isExpired && !experimentalFlag) {
|
||||
return (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
onClick={() => navigate(resolveRelPath(`imagewizard/${compose.id}`))}
|
||||
isInline
|
||||
>
|
||||
Recreate image
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue