LandingPage: Add edge images table
This commit adds the edge images table as a federated module, gated behind a feature flag. the configuration is for dev environment to work with federation modules locally
This commit is contained in:
mgold1234
Lucas Garfield
parent
422ee62d9e
commit
27c620939a
5 changed files with 185 additions and 87 deletions
|
|
@ -6,6 +6,9 @@ import {
|
|||
Button,
|
||||
ExpandableSection,
|
||||
Popover,
|
||||
Tabs,
|
||||
Tab,
|
||||
TabTitleText,
|
||||
Text,
|
||||
TextContent,
|
||||
} from '@patternfly/react-core';
|
||||
|
|
@ -17,11 +20,13 @@ import {
|
|||
PageHeaderTitle,
|
||||
} from '@redhat-cloud-services/frontend-components';
|
||||
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
|
||||
import { useFlag } from '@unleash/proxy-client-react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
import './LandingPage.scss';
|
||||
|
||||
import { useGetEnvironment } from '../../Utilities/useGetEnvironment';
|
||||
import EdgeImagesTable from '../edge/ImagesTable';
|
||||
import ImagesTable from '../ImagesTable/ImagesTable';
|
||||
import DocumentationButton from '../sharedComponents/DocumentationButton';
|
||||
|
||||
|
|
@ -32,7 +37,97 @@ export const LandingPage = () => {
|
|||
const { quickStarts } = useChrome();
|
||||
const { isBeta } = useGetEnvironment();
|
||||
const activateQuickstart = (qs) => () => quickStarts.activateQuickstart(qs);
|
||||
|
||||
const [activeTabKey, setActiveTabkey] = useState(0);
|
||||
const handleTabClick = (_event, tabIndex) => setActiveTabkey(tabIndex);
|
||||
const edgeParityFlag = useFlag('edgeParity.image-list');
|
||||
const traditionalImageList = (
|
||||
<section className="pf-l-page__main-section pf-c-page__main-section">
|
||||
{!isBeta() && showBetaAlert && (
|
||||
<Alert
|
||||
className="pf-u-mb-xl"
|
||||
isInline
|
||||
variant="default"
|
||||
title="Try new features in our Preview environment."
|
||||
actionClose={
|
||||
<AlertActionCloseButton onClose={() => setShowBetaAlert(false)} />
|
||||
}
|
||||
actionLinks={
|
||||
<Button
|
||||
isInline
|
||||
component="a"
|
||||
variant="link"
|
||||
href="/preview/insights/image-builder/landing"
|
||||
>
|
||||
Enter Preview environment
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<p>
|
||||
Launch Amazon Web Services or Microsoft Azure hosts to the cloud
|
||||
from the console.
|
||||
</p>
|
||||
<p>
|
||||
Link custom repositories and build any supported image with custom
|
||||
content.
|
||||
</p>
|
||||
</Alert>
|
||||
)}
|
||||
{isBeta() && (
|
||||
<ExpandableSection
|
||||
className="pf-m-light pf-u-mb-xl expand-section"
|
||||
toggleText="Help get started with Preview features"
|
||||
onToggle={setShowHint}
|
||||
isExpanded={showHint}
|
||||
displaySize="large"
|
||||
>
|
||||
<p className="pf-u-pb-sm">
|
||||
For help getting started, access the quick starts for our Preview
|
||||
features.
|
||||
</p>
|
||||
<p className="pf-u-pt-sm">
|
||||
<Button
|
||||
icon={<ArrowRightIcon />}
|
||||
iconPosition="right"
|
||||
variant="link"
|
||||
isInline
|
||||
component="a"
|
||||
onClick={activateQuickstart('insights-launch-aws')}
|
||||
className="pf-u-font-weight-bold"
|
||||
>
|
||||
Launch an AWS Image
|
||||
</Button>
|
||||
</p>
|
||||
<p className="pf-u-pt-sm">
|
||||
<Button
|
||||
icon={<ArrowRightIcon />}
|
||||
iconPosition="right"
|
||||
variant="link"
|
||||
isInline
|
||||
component="a"
|
||||
onClick={activateQuickstart('insights-launch-azure')}
|
||||
className="pf-u-font-weight-bold"
|
||||
>
|
||||
Launch an Azure Image
|
||||
</Button>
|
||||
</p>
|
||||
<p className="pf-u-pt-sm">
|
||||
<Button
|
||||
icon={<ArrowRightIcon />}
|
||||
iconPosition="right"
|
||||
variant="link"
|
||||
isInline
|
||||
component="a"
|
||||
onClick={activateQuickstart('insights-custom-repos')}
|
||||
className="pf-u-font-weight-bold"
|
||||
>
|
||||
Build an Image with Custom Content
|
||||
</Button>
|
||||
</p>
|
||||
</ExpandableSection>
|
||||
)}
|
||||
<ImagesTable />
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<React.Fragment>
|
||||
<PageHeader>
|
||||
|
|
@ -59,95 +154,30 @@ export const LandingPage = () => {
|
|||
</Popover>
|
||||
<OpenSourceBadge repositoriesURL="https://www.osbuild.org/guides/image-builder-service/architecture.html" />
|
||||
</PageHeader>
|
||||
<section className="pf-l-page__main-section pf-c-page__main-section">
|
||||
{!isBeta() && showBetaAlert && (
|
||||
<Alert
|
||||
className="pf-u-mb-xl"
|
||||
isInline
|
||||
variant="default"
|
||||
title="Try new features in our Preview environment."
|
||||
actionClose={
|
||||
<AlertActionCloseButton onClose={() => setShowBetaAlert(false)} />
|
||||
}
|
||||
actionLinks={
|
||||
<Button
|
||||
isInline
|
||||
component="a"
|
||||
variant="link"
|
||||
href="/preview/insights/image-builder/landing"
|
||||
>
|
||||
Enter Preview environment
|
||||
</Button>
|
||||
}
|
||||
{edgeParityFlag ? (
|
||||
<Tabs
|
||||
className="pf-c-tabs pf-c-page-header pf-c-table"
|
||||
activeKey={activeTabKey}
|
||||
onSelect={handleTabClick}
|
||||
>
|
||||
<Tab
|
||||
eventKey={0}
|
||||
title={<TabTitleText>Traditional (RPM - DNF)</TabTitleText>}
|
||||
>
|
||||
<p>
|
||||
Launch Amazon Web Services or Microsoft Azure hosts to the cloud
|
||||
from the console.
|
||||
</p>
|
||||
<p>
|
||||
Link custom repositories and build any supported image with custom
|
||||
content.
|
||||
</p>
|
||||
</Alert>
|
||||
)}
|
||||
{isBeta() && (
|
||||
<ExpandableSection
|
||||
className="pf-m-light pf-u-mb-xl expand-section"
|
||||
toggleText="Help get started with Preview features"
|
||||
onToggle={setShowHint}
|
||||
isExpanded={showHint}
|
||||
displaySize="large"
|
||||
{traditionalImageList}
|
||||
</Tab>
|
||||
<Tab
|
||||
eventKey={1}
|
||||
title={<TabTitleText>Immutable (OSTree)</TabTitleText>}
|
||||
>
|
||||
<p className="pf-u-pb-sm">
|
||||
For help getting started, access the quick starts for our Preview
|
||||
features.
|
||||
</p>
|
||||
<p className="pf-u-pt-sm">
|
||||
<Button
|
||||
icon={<ArrowRightIcon />}
|
||||
iconPosition="right"
|
||||
variant="link"
|
||||
isInline
|
||||
component="a"
|
||||
onClick={activateQuickstart('insights-launch-aws')}
|
||||
className="pf-u-font-weight-bold"
|
||||
>
|
||||
Launch an AWS Image
|
||||
</Button>
|
||||
</p>
|
||||
<p className="pf-u-pt-sm">
|
||||
<Button
|
||||
icon={<ArrowRightIcon />}
|
||||
iconPosition="right"
|
||||
variant="link"
|
||||
isInline
|
||||
component="a"
|
||||
onClick={activateQuickstart('insights-launch-azure')}
|
||||
className="pf-u-font-weight-bold"
|
||||
>
|
||||
Launch an Azure Image
|
||||
</Button>
|
||||
</p>
|
||||
<p className="pf-u-pt-sm">
|
||||
<Button
|
||||
icon={<ArrowRightIcon />}
|
||||
iconPosition="right"
|
||||
variant="link"
|
||||
isInline
|
||||
component="a"
|
||||
onClick={activateQuickstart('insights-custom-repos')}
|
||||
className="pf-u-font-weight-bold"
|
||||
>
|
||||
Build an Image with Custom Content
|
||||
</Button>
|
||||
</p>
|
||||
</ExpandableSection>
|
||||
)}
|
||||
<ImagesTable />
|
||||
</section>
|
||||
<EdgeImagesTable />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
) : (
|
||||
traditionalImageList
|
||||
)}
|
||||
<Outlet />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default LandingPage;
|
||||
|
|
|
|||
38
src/Components/edge/ImagesTable.js
Normal file
38
src/Components/edge/ImagesTable.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
|
||||
import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
|
||||
import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState';
|
||||
import Unavailable from '@redhat-cloud-services/frontend-components/Unavailable';
|
||||
import { useFlag } from '@unleash/proxy-client-react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
getNotificationProp,
|
||||
manageEdgeImagesUrlName,
|
||||
} from '../../Utilities/edge';
|
||||
import { resolveRelPath } from '../../Utilities/path';
|
||||
|
||||
const ImagesTable = () => {
|
||||
const dispatch = useDispatch();
|
||||
const notificationProp = getNotificationProp(dispatch);
|
||||
const edgeParityFlag = useFlag('edgeParity.image-list');
|
||||
|
||||
return edgeParityFlag ? (
|
||||
<AsyncComponent
|
||||
appName="edge"
|
||||
module="./Images"
|
||||
ErrorComponent={<ErrorState />}
|
||||
navigateProp={useNavigate}
|
||||
locationProp={useLocation}
|
||||
showHeaderProp={false}
|
||||
notificationProp={notificationProp}
|
||||
pathPrefix={resolveRelPath('')}
|
||||
urlName={manageEdgeImagesUrlName}
|
||||
/>
|
||||
) : (
|
||||
<Unavailable />
|
||||
);
|
||||
};
|
||||
|
||||
export default ImagesTable;
|
||||
Loading…
Add table
Add a link
Reference in a new issue