@patternfly/react-core#Page JavaScript Examples
The following examples show how to use
@patternfly/react-core#Page.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ibutsu-page.js From ibutsu-server with MIT License | 6 votes |
|
render() {
document.title = this.props.title || 'Ibutsu';
return (
<React.Fragment>
<AlertGroup isToast>
{this.state.notifications.map((notification) => (
<Alert key={notification.key} variant={notification.type} title={notification.title} actionLinks={notification.action} isLiveRegion>
{notification.message}
</Alert>
))}
</AlertGroup>
<Page header={<IbutsuHeader eventEmitter={this.props.eventEmitter} version={this.state.version} />} sidebar={<PageSidebar nav={this.props.navigation} theme="dark" />} isManagedSidebar={true} style={{position: "relative"}}>
{this.props.children}
</Page>
</React.Fragment>
);
}
Example #2
| Source File: Layout.js From operate-first.github.io-old with GNU General Public License v3.0 | 6 votes |
|
Layout = ({ location, srcLink, banner, children }) => {
const [isNavOpen, setIsNavOpen] = useState(true);
const onNavToggle = () => {
setIsNavOpen(!isNavOpen);
};
return (
<Page
header={<Header isNavOpen={isNavOpen} onNavToggle={onNavToggle} location={location} />}
sidebar={<NavSidebar isNavOpen={isNavOpen} location={location} />}
isManagedSidebar
className="layout"
>
{banner && (
<PageSection className="banner">
<TextContent>
<section dangerouslySetInnerHTML={{ __html: banner.html }} />
</TextContent>
</PageSection>
)}
{children}
<PageSection isFilled className="ofc-text-center" variant={PageSectionVariants.dark}>
<TextContent>
<Button variant="primary" isLarge component="a" href={srcLink} target="_contribute">
Contribute to this page
</Button>
</TextContent>
</PageSection>
<Footer />
</Page>
);
}
Example #3
| Source File: app.jsx From cockpit-certificates with GNU Lesser General Public License v2.1 | 5 votes |
|
render() {
const { certmongerService, startErrorMessage, cas, certs, toExpireCerts, expiredCerts } = this.state;
if (expiredCerts > 0) {
page_status.set_own({
type: "error",
title: cockpit.format(cockpit.ngettext("$0 certificate has expired",
"$0 certificates have expired",
expiredCerts), expiredCerts),
details: []
});
} else if (toExpireCerts > 0) {
page_status.set_own({
type: "warning",
title: cockpit.format(cockpit.ngettext("$0 certificate expires soon",
"$0 certificates expire soon",
toExpireCerts), toExpireCerts),
details: []
});
}
const certificatesBody = (
<CertificateList cas={cas} certs={certs} addAlert={this.addAlert} appOnValueChanged={this.onValueChanged} />
);
const emptyStateBody = (
<EmptyState service={ certmongerService }
serviceName={ CERTMONGER_SERVICE_NAME }
errorMessage={ startErrorMessage }
updateService={ () => this.updateCertmongerService() } />
);
const body = () => {
if (!certmongerService || !certmongerService.exists || !certmongerService.state || certmongerService.state !== "running")
return emptyStateBody;
return certificatesBody;
};
return (
<Page>
<PageSection variant={PageSectionVariants.light}>
{ body() }
<AlertGroup isToast>
{this.state.alerts.map((danger, index) => (
<Alert isLiveRegion
variant={AlertVariant.danger}
title={danger.title}
actionClose={
<AlertActionCloseButton variantLabel="danger alert"
onClose={() => this.removeAlert(index)} />
}
key={index}>
{_("Error message: ") + danger.message}
</Alert>
))}
</AlertGroup>
</PageSection>
</Page>
);
}
Example #4
| Source File: app.jsx From cockpit-wicked with GNU General Public License v2.0 | 5 votes |
|
Application = () => {
const [checkingService, setCheckingService] = useState(true);
const [serviceReady, setServiceReady] = useState(false);
const [activeTabKey, setActiveTabKey] = useState(0);
const handleTabClick = (event, tabIndex) => {
setActiveTabKey(tabIndex);
};
const renderTabs = () => {
return (
<Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
<Tab eventKey={0} title={<TabTitleText>{_("Interfaces")}</TabTitleText>}>
<InterfacesTab />
</Tab>
<Tab eventKey={1} title={<TabTitleText>{_("Routing")}</TabTitleText>}>
<RoutingTab />
</Tab>
<Tab eventKey={2} title={<TabTitleText>{_("DNS")}</TabTitleText>}>
<DnsTab />
</Tab>
</Tabs>
);
};
const renderContent = () => {
if (checkingService) return null;
if (serviceReady) return renderTabs();
return <InactiveServicePage />;
};
useEffect(() => {
serviceIsActive()
.then(result => {
setCheckingService(false);
setServiceReady(result);
});
}, []);
return (
<NetworkProvider>
<Page className="network">
{ checkingService && <StatusBar showSpinner>{_("Checking if service is active...")}</StatusBar> }
<PageSection>
{ renderContent() }
</PageSection>
</Page>
</NetworkProvider>
);
}
Example #5
| Source File: Details.js From content-preview with Apache License 2.0 | 4 votes |
|
Details = ({
match,
fetchContentDetails,
details,
fetchContentDetailsHits,
contentDetailsHits
}) => {
const [selectedListItem, setSelectedListItem] = useState(0);
const capitalize = (string) => string[0].toUpperCase() + string.substring(1);
const [expanded, setExpanded] = useState(true);
const pyFilter = (data) => {
const keysToInclude = Object.keys(data).filter(
(key) => !key.includes('__')
);
const arrayObj = keysToInclude.map((key) => ({ [key]: data[key] }));
return Object.assign({}, ...arrayObj);
};
const selectedPyData =
selectedListItem >= 1 && pyFilter(contentDetailsHits[selectedListItem - 1]);
const detailHref = `https://access.redhat.com/node/${details.node_id}`;
const [freeStyle, setFreeStyle] = useState('');
const [freeStyleValidated, setFreeStyleValidated] = useState('default');
const [validFreeStyle, setValidFreeStyle] = useState('');
const [helperText, setHelperText] = useState('Please enter valid JSON');
const [kbaDetailsData, setLbaDetailsData] = useState({});
const [kbaLoading, setKbaLoading] = useState(true);
const freeStyleChange = (input) => {
let isValid;
const parser = (input) => {
try {
return JSON.parse(input);
} catch (error) {
return false;
}
};
if (input.length > 0) {
const validInput = parser(input);
if (validInput) {
isValid = 'success';
setValidFreeStyle(validInput);
setHelperText('Valid JSON! ?');
} else {
isValid = 'error';
setValidFreeStyle('');
}
} else {
isValid = 'default';
setValidFreeStyle('');
setHelperText('Please enter valid JSON');
}
setFreeStyleValidated(isValid);
setFreeStyle(input);
};
const severityLabelColor = (severity) =>
severity === 'ERROR'
? 'red'
: severity === 'WARN'
? 'orange'
: severity === 'INFO'
? 'purple'
: 'blue';
const fetchKbaDetails = async (kbaId) => {
try {
const kbaDetailsFetch = (
await API.get(
`https://access.redhat.com/hydra/rest/search/kcs?q=id:(${kbaId})&fl=view_uri,id,publishedTitle&rows=1&redhat_client=$ADVISOR`,
{},
{ credentials: 'include' }
)
).data.response.docs;
setLbaDetailsData(kbaDetailsFetch[0]);
setKbaLoading(false);
} catch (error) {
console.error(error, 'KBA fetch failed.');
}
};
const ruleDescription = (data, isGeneric) =>
typeof data === 'string' &&
Boolean(data) && (
<span className={isGeneric && 'genericOverride'}>
<Markdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>{data}</Markdown>
</span>
);
useEffect(() => {
const detailName = { name: match.params.recDetail };
fetchContentDetails(detailName);
fetchContentDetailsHits(detailName);
fetchKbaDetails(details.node_id);
}, [
fetchContentDetails,
match.params.recDetail,
fetchContentDetailsHits,
details.node_id
]);
return (
<Page
breadcrumb={
<Breadcrumb>
<BreadcrumbItem>
<Link to="/preview">Content Preview</Link>
</BreadcrumbItem>
<BreadcrumbHeading to="#">{`${match.params.recDetail}`}</BreadcrumbHeading>
</Breadcrumb>
}
>
<PageHeader>
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<PageHeaderTitle
title={
<>
{details.rule_id || 'loading...'}{' '}
{details.status !== undefined && (
<Label color={details.status === 'active' ? 'green' : 'red'}>
{capitalize(details.status)}
</Label>
)}{' '}
</>
}
/>
<Toolbar>
<HostSelector />
</Toolbar>
</Flex>
</PageHeader>
<PageSection>
<Grid hasGutter>
<GridItem span={6}>
<Stack hasGutter>
<Card>
<CardBody>
<ExpandableSection
toggleText={details.description}
onToggle={() => setExpanded(!expanded)}
isExpanded={expanded}
>
<Stack hasGutter>
<StackItem>
<p>
{`Publish Date: ${details.publish_date} | `}
{details.node_id ? (
<a href={detailHref}>{detailHref}</a>
) : (
<Label variant="outline" color="gray">
No node_id present
</Label>
)}
</p>
{(details.reboot_required ||
details.category ||
details.severity) && (
<LabelGroup>
{details.reboot_required && (
<Label variant="outline" color="gray">
Reboot required
</Label>
)}
{details.category && (
<Label variant="outline" color="gray">
{details.category}
</Label>
)}
{details.severity && (
<Label
variant="outline"
color={severityLabelColor(details.severity)}
>
{details.severity}
</Label>
)}
</LabelGroup>
)}
</StackItem>
<StackItem>
<Stack hasGutter>
<StackItem>
<strong>Name:</strong>
{ruleDescription(details.name)}
</StackItem>
<StackItem>
<strong>Summary:</strong>
{ruleDescription(details.summary)}
</StackItem>
<StackItem>
<strong>Generic:</strong>
{ruleDescription(details.generic, true)}
</StackItem>
</Stack>
</StackItem>
<StackItem>
<Form>
<FormGroup
label="Free Style JSON input:"
type="string"
helperText={helperText}
helperTextInvalid="Not valid JSON"
fieldId="selection"
validated={freeStyleValidated}
>
<TextArea
value={freeStyle}
onChange={freeStyleChange}
isRequired
validated={freeStyleValidated}
aria-label="free style JSON input"
/>
</FormGroup>
</Form>
</StackItem>
</Stack>
</ExpandableSection>
</CardBody>
</Card>
<DataList
className="pyDataList"
aria-label="selectable data list example"
selectedDataListItemId={selectedListItem}
onSelectDataListItem={(id) =>
id !== selectedListItem
? setSelectedListItem(id)
: setSelectedListItem(0)
}
>
{contentDetailsHits.map((item, key) => (
<DataListItem
aria-labelledby="selectable-action-item1"
key={key + 1}
id={key + 1}
>
<DataListItemRow className="overFlow">
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<Split hasGutter>
<SplitItem>
<b>{item.__name}</b>
</SplitItem>
<SplitItem>
<Label color="blue">{item.__source}</Label>
</SplitItem>
</Split>
<h5>{item.__date}</h5>
<pre>{JSON.stringify(pyFilter(item), null, 2)}</pre>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
))}
</DataList>
</Stack>
</GridItem>
<GridItem span={6}>
<ReportDetails
report={{
...details,
rule: details,
...(selectedPyData && { details: selectedPyData }),
...(validFreeStyle && { details: validFreeStyle }),
resolution: details.resolution
}}
kbaDetail={kbaDetailsData}
kbaLoading={kbaLoading}
/>
</GridItem>
</Grid>
</PageSection>
</Page>
);
}
Example #6
| Source File: index.js From sed-frontend with Apache License 2.0 | 4 votes |
|
SamplePage = () => {
const history = useHistory();
const { getRegistry } = useContext(RegistryContext);
const [confirmChangesOpen, setConfirmChangesOpen] = useState(false);
const [madeChanges, setMadeChanges] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const dataRef = useRef();
const dispatch = useDispatch();
const activeStateLoaded = useSelector(
({ activeStateReducer }) => activeStateReducer?.loaded
);
const { useOpenSCAP, enableCloudConnector, hasInsights } = useSelector(
({ activeStateReducer }) => ({
useOpenSCAP: activeStateReducer?.values?.useOpenSCAP,
enableCloudConnector: activeStateReducer?.values?.enableCloudConnector,
hasInsights: activeStateReducer?.values?.hasInsights,
}),
shallowEqual
);
const { systemsCount } = useSelector(
({ connectedSystemsReducer }) => ({
systemsLoaded: connectedSystemsReducer?.loaded,
systemsCount: connectedSystemsReducer?.total,
}),
shallowEqual
);
useEffect(() => {
getRegistry().register({
activeStateReducer,
logReducer,
connectedSystemsReducer,
});
dispatch(fetchCurrState());
dispatch(fetchConnectedHosts());
}, [getRegistry]);
useEffect(() => {
insights?.chrome?.appAction?.('cloud-connector-dashboard');
}, []);
return (
<React.Fragment>
<Route
exact
path={paths.logModal}
render={() => (
<Suspense
fallback={
<Bullseye>
<Spinner />
</Bullseye>
}
>
<ConnectLog />
</Suspense>
)}
/>
<PageHeader className="page-header">
<Split hasGutter className="page-title">
<SplitItem isFilled>
<Flex>
<FlexItem spacer={{ default: 'spacerSm' }}>
<PageHeaderTitle title="Remote Host Configuration Manager" />
</FlexItem>
<FlexItem>
<AboutRemoteHostConfigPopover />
</FlexItem>
</Flex>
</SplitItem>
<SplitItem>
<Button onClick={() => history.push(paths.logModal)} variant="link">
View log
</Button>
</SplitItem>
</Split>
<Stack hasGutter>
<StackItem>
Selections here affect Red Hat Enterprise Linux (RHEL) systems
connected to Red Hat with remote host configuration (rhc). Upon
saving changes, Ansible Playbooks are automatically pushed to
connected systems to update the configuration of the connection to
Red Hat.
</StackItem>
<StackItem>
<a
target="_blank"
rel="noopener noreferrer"
href={
'https://access.redhat.com/documentation/en-us/red_hat_insights/2022/html-single/red_hat_connector_configuration_guide/index'
}
>
Connecting with Red Hat
{<ExternalLinkAltIcon className="pf-u-ml-sm" />}
</a>
</StackItem>
</Stack>
</PageHeader>
<Page>
<div className="dashboard__content">
{activeStateLoaded ||
(useOpenSCAP !== undefined && enableCloudConnector !== undefined) ? (
<Services
madeChanges={madeChanges}
setConfirmChangesOpen={setConfirmChangesOpen}
setMadeChanges={setMadeChanges}
setIsEditing={setIsEditing}
isEditing={isEditing}
defaults={{
useOpenSCAP,
enableCloudConnector,
hasInsights,
}}
onChange={(data) => {
dataRef.current = data;
}}
/>
) : (
<Bullseye>
<Spinner className="pf-u-p-lg" size="xl" />
</Bullseye>
)}
</div>
</Page>
<ConfirmChangesModal
isOpen={confirmChangesOpen}
handleCancel={() => setConfirmChangesOpen(false)}
systemsCount={systemsCount}
data={dataRef.current}
handleConfirm={() => {
setConfirmChangesOpen(false);
(async () => {
const saveAction = saveCurrState(dataRef.current);
dispatch(saveAction);
await saveAction.payload;
dispatch(
addNotification({
variant: 'success',
title: 'Changes saved',
description:
'Your service enablement changes were applied to connected systems',
})
);
setMadeChanges(false);
setIsEditing(false);
})();
}}
/>
</React.Fragment>
);
}
