@patternfly/react-core#CardTitle JavaScript Examples
The following examples show how to use
@patternfly/react-core#CardTitle.
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: CardBuilder.js From tasks-frontend with Apache License 2.0 | 6 votes |
|
CardBuilder = ({ children, cardClass }) => {
if (!Array.isArray(children)) {
children = [children];
}
return (
<Card className={cardClass}>
<CardTitle className={findChild(children, 'title').props.className}>
{findChild(children, 'title')}
</CardTitle>
<CardBody className={findChild(children, 'body').props.className}>
{findChild(children, 'body')}
</CardBody>
<CardFooter className={findChild(children, 'footer').props.className}>
{findChild(children, 'footer')}
</CardFooter>
</Card>
);
}
Example #2
| Source File: RoutingTab.js From cockpit-wicked with GNU General Public License v2.0 | 6 votes |
|
RoutingTab = () => {
const dispatch = useNetworkDispatch();
const { routes } = useNetworkState();
useEffect(() => { fetchRoutes(dispatch) }, [dispatch]);
const routesList = routes ? Object.values(routes) : [];
const routesNotFound = () => (
<EmptyState>
<EmptyStateIcon icon={InfoCircleIcon} />
<Title headingLevel="h4" size="lg">
{_('No user-defined routes were found.')}
</Title>
<AddRoute />
</EmptyState>
);
if (routesList.length === 0) {
return routesNotFound();
}
return (
<Card>
<CardHeader>
<CardActions>
<AddRoute />
</CardActions>
<CardTitle>
<Text component={TextVariants.h2}>{_("User-defined Routes")}</Text>
</CardTitle>
</CardHeader>
<CardBody>
<RoutesList routes={routesList} />
</CardBody>
</Card>
);
}
Example #3
| Source File: AvailableImagesTile.js From edge-frontend with Apache License 2.0 | 5 votes |
|
AvailableImageTileBase = ({ children }) => (
<Card className="tiles-card">
<CardTitle>Available images</CardTitle>
{children}
</Card>
)
Example #4
| Source File: DeviceSummaryTile.js From edge-frontend with Apache License 2.0 | 5 votes |
|
DeviceSummaryTileBase = ({
orphaned,
active,
noReports,
neverReported,
}) => (
<Card className="tiles-card">
<CardTitle>Device summary</CardTitle>
<CardBody>
<Grid>
<GridItem span={6}>
<Stack hasGutter>
<StackItem>
<Button isDisabled isInline className="pf-u-pr-md" variant="link">
{active}
</Button>{' '}
Active
</StackItem>
<StackItem>
<Button isDisabled isInline className="pf-u-pr-md" variant="link">
{orphaned}
</Button>{' '}
Orphaned
</StackItem>
</Stack>
</GridItem>
<GridItem span={6}>
<Stack hasGutter>
<StackItem>
<Button isDisabled isInline className="pf-u-pr-md" variant="link">
{noReports}
</Button>
Stale
</StackItem>
<StackItem>
<Button isDisabled isInline className="pf-u-pr-md" variant="link">
{neverReported}
</Button>
Registered but never reported
</StackItem>
</Stack>
</GridItem>
</Grid>
</CardBody>
</Card>
)
Example #5
| Source File: DeviceSummaryTile.js From edge-frontend with Apache License 2.0 | 5 votes |
|
DeviceSummaryTile = () => {
const { isLoading, hasError, data } = useSelector(
({ deviceSummaryReducer }) => ({
isLoading:
deviceSummaryReducer?.isLoading !== undefined
? deviceSummaryReducer?.isLoading
: true,
hasError: deviceSummaryReducer?.hasError || false,
data: deviceSummaryReducer?.data || null,
}),
shallowEqual
);
if (isLoading) {
return (
<Card className="tiles-card">
<CardTitle>Device summary information</CardTitle>
<CardBody>
<Bullseye>
<Spinner />
</Bullseye>
</CardBody>
</Card>
);
}
if (hasError) {
return (
<Card className="tiles-card">
<CardTitle>Device summary information</CardTitle>
<CardBody>{data}</CardBody>
</Card>
);
}
return (
<DeviceSummaryTileBase
orphaned={data['orphaned']}
active={data['active']}
noReports={data['noReports']}
neverReported={data['neverReported']}
/>
);
}
Example #6
| Source File: InterfacesTab.js From cockpit-wicked with GNU General Public License v2.0 | 5 votes |
|
InterfacesTab = () => {
const dispatch = useNetworkDispatch();
const { interfaces, connections } = useNetworkState();
useEffect(() => {
fetchConnections(dispatch);
fetchInterfaces(dispatch);
listenToInterfacesChanges(dispatch);
}, [dispatch]);
const managedInterfacesList = interfaces ? Object.values(interfaces).filter((i) => i.managed || !i.virtual) : [];
const unmanagedInterfacesList = interfaces ? Object.values(interfaces).filter((i) => !managedInterfacesList.includes(i)) : [];
const connectionsList = connections ? Object.values(connections) : [];
const renderUnmanagedInterfaces = () => {
if (unmanagedInterfacesList.length === 0) return;
return (
<Card>
<CardHeader>
<CardActions />
<CardTitle>
<Text component={TextVariants.h2}>{_("Unmanaged Interfaces")}</Text>
</CardTitle>
</CardHeader>
<CardBody>
<UnmanagedInterfacesList interfaces={unmanagedInterfacesList} />
</CardBody>
</Card>
);
};
return (
<>
<Card>
<CardHeader>
<CardActions>
<AddConnectionMenu />
</CardActions>
<CardTitle>
<Text component={TextVariants.h2}>{_("Interfaces")}</Text>
</CardTitle>
</CardHeader>
<CardBody>
<InterfacesList interfaces={managedInterfacesList} connections={connectionsList} />
</CardBody>
</Card>
{ renderUnmanagedInterfaces() }
</>
);
}
Example #7
| Source File: AccessRequestDetailsPage.js From access-requests-frontend with Apache License 2.0 | 4 votes |
|
BaseAccessRequestDetailsPage = ({ isInternal }) => {
const [request, setRequest] = React.useState();
const { requestId } = useParams();
const dispatch = useDispatch();
React.useEffect(() => {
apiInstance
.get(
`${API_BASE}/cross-account-requests/${requestId}/${
isInternal ? '?query_by=user_id' : '?query_by=target_account'
}`,
{ headers: { Accept: 'application/json' } }
)
.then((res) => {
if (res.errors) {
throw Error(res.errors.map((e) => e.detail).join('\n'));
}
setRequest(res);
})
.catch((err) => {
dispatch(
addNotification({
variant: 'danger',
title: 'Could not load access request',
description: err.message,
})
);
});
}, []);
// Modal actions
const [openModal, setOpenModal] = React.useState({ type: null });
const onModalClose = () => setOpenModal({ type: null });
const actions = getInternalActions(
request && request.status,
requestId,
setOpenModal
);
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const requestDisplayProps = [
...(isInternal
? ['request_id', 'target_account']
: ['first_name', 'last_name']),
'start_date',
'end_date',
'created',
];
return (
<React.Fragment>
<PageSection variant="light">
<Breadcrumb>
<BreadcrumbItem
render={() => (
<Link to={isInternal ? '/' : '/access-requests'}>
{!isInternal && 'Red Hat '}Access Requests
</Link>
)}
/>
<BreadcrumbItem>{requestId}</BreadcrumbItem>
</Breadcrumb>
<Flex direction={{ default: 'column', md: 'row' }}>
<FlexItem grow={{ default: 'grow' }}>
<Title headingLevel="h1" size="2xl" className="pf-u-pt-md">
{requestId}
</Title>
</FlexItem>
{isInternal && actions.items.length > 0 && (
<FlexItem alignSelf={{ default: 'alignRight' }}>
<Dropdown
position="right"
toggle={
<KebabToggle
onToggle={() => setIsDropdownOpen(!isDropdownOpen)}
id="actions-toggle"
/>
}
isOpen={isDropdownOpen}
isPlain
dropdownItems={actions.items.map(({ title, onClick }) => (
<DropdownItem
key={title}
component="button"
onClick={onClick}
>
{title}
</DropdownItem>
))}
isDisabled={actions.disable}
/>
</FlexItem>
)}
</Flex>
</PageSection>
<PageSection>
<Flex
spaceItems={{ xl: 'spaceItemsLg' }}
direction={{ default: 'column', lg: 'row' }}
>
<FlexItem
flex={{ default: 'flex_1' }}
alignSelf={{ default: 'alignSelfStretch' }}
>
<Card ouiaId="request-details" style={{ height: '100%' }}>
<CardTitle>
<Title headingLevel="h2" size="xl">
Request details
</Title>
</CardTitle>
<CardBody>
{!request ? (
<Spinner size="xl" />
) : (
<React.Fragment>
<div className="pf-u-pb-md">
{isInternal ? (
<div>
<label>
<b>Request status</b>
</label>
<br />
<Label
className="pf-u-mt-sm"
{...getLabelProps(request.status)}
>
{capitalize(request.status)}
</Label>
</div>
) : (
<React.Fragment>
<label>
<b>Request decision</b>
</label>
<br />
<StatusLabel
requestId={requestId}
status={request.status}
/>
</React.Fragment>
)}
</div>
{requestDisplayProps.map((prop, key) => (
<div className="pf-u-pb-md" key={key}>
<label>
<b>
{capitalize(
prop.replace(/_/g, ' ').replace('id', 'ID')
)}
</b>
</label>
<br />
<div>{request[prop]}</div>
</div>
))}
</React.Fragment>
)}
</CardBody>
</Card>
</FlexItem>
<FlexItem
flex={{ default: 'flex_3' }}
grow={{ default: 'grow' }}
alignSelf={{ default: 'alignSelfStretch' }}
>
<Card ouiaId="request-roles" style={{ height: '100%' }}>
<CardTitle>
<Title headingLevel="h2" size="xl">
Roles requested
</Title>
</CardTitle>
<CardBody>
{!request ? (
<Spinner size="xl" />
) : (
<MUARolesTable roles={request.roles} />
)}
</CardBody>
</Card>
</FlexItem>
</Flex>
</PageSection>
{openModal.type === 'cancel' && (
<CancelRequestModal requestId={requestId} onClose={onModalClose} />
)}
{openModal.type === 'edit' && (
<EditRequestModal
variant="edit"
requestId={requestId}
onClose={onModalClose}
/>
)}
</React.Fragment>
);
}
