particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(HMS-3386): add blueprints initial layout

Browse source
This commit is contained in:
Amir 2024-01-18 18:28:20 +02:00 • committed by Lucas Garfield
parent 0982cbe8db
commit c2e7c34d6e
10 changed files with 398 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

131
src/Components/sharedComponents/ImageBuilderHeader.tsx
View file

@ -1,6 +1,13 @@
import React from 'react';
import { Button, Popover, Text, TextContent } from '@patternfly/react-core';
import {
Button,
Popover,
Text,
TextContent,
Flex,
FlexItem,
} from '@patternfly/react-core';
import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
// eslint-disable-next-line rulesdir/disallow-fec-relative-imports
import {
@ -16,62 +23,72 @@ export const ImageBuilderHeader = () => {
<>
{/*@ts-ignore*/}
<PageHeader>
<PageHeaderTitle className="title" title="Image Builder" />
<Popover
minWidth="35rem"
headerContent={'About image builder'}
bodyContent={
<TextContent>
<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 make these images faster than manual procedures because it
eliminates the specific configurations required for each output
type.
</Text>
<Text>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_rhel_images_using_the_image_builder_service'
}
>
Image builder for RPM-DNF documentation
</Button>
</Text>
<Text>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://access.redhat.com/documentation/en-us/edge_management/2022/html/create_rhel_for_edge_images_and_configure_automated_management/index'
}
>
Image builder for OSTree documentation
</Button>
</Text>
</TextContent>
}
>
<Button
variant="plain"
aria-label="About image builder"
className="pf-u-pl-sm header-button"
>
<HelpIcon />
</Button>
</Popover>
<OpenSourceBadge repositoriesURL="https://www.osbuild.org/guides/image-builder-service/architecture.html" />
<Flex>
<FlexItem>
<PageHeaderTitle className="title" title="Images" />
<Popover
minWidth="35rem"
headerContent={'About image builder'}
bodyContent={
<TextContent>
<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 make these images faster than manual
procedures because it eliminates the specific configurations
required for each output type.
</Text>
<Text>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_rhel_images_using_the_image_builder_service'
}
>
Image builder for RPM-DNF documentation
</Button>
</Text>
<Text>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://access.redhat.com/documentation/en-us/edge_management/2022/html/create_rhel_for_edge_images_and_configure_automated_management/index'
}
>
Image builder for OSTree documentation
</Button>
</Text>
</TextContent>
}
>
<Button
variant="plain"
aria-label="About image builder"
className="pf-u-pl-sm header-button"
>
<HelpIcon />
</Button>
</Popover>
<OpenSourceBadge repositoriesURL="https://www.osbuild.org/guides/image-builder-service/architecture.html" />
</FlexItem>
<FlexItem align={{ default: 'alignRight' }}>
<Button>New blueprint</Button>
</FlexItem>
<FlexItem>
<Button isDisabled>Build images</Button>
</FlexItem>
</Flex>
</PageHeader>
</>
);