--- id: Card section: components --- import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon'; import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons'; import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts'; import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100'; ## Demos ### Horizontal card grid The following demo shows how you may use a `` within a card for scenarios that require multiple subsections. ```js import React from 'react'; import { Card, CardHeader, CardActions, CardTitle, CardBody, CardExpandableContent, Level, LabelGroup, Label, Dropdown, DropdownItem, KebabToggle, Grid, Flex, List, ListItem, Button } from '@patternfly/react-core'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; class CardGridDemo extends React.Component { constructor(props) { super(props); this.state = { isCardExpanded: false, isDropdownOpen: false }; this.onCardExpand = () => { this.setState({ isCardExpanded: !this.state.isCardExpanded }); }; this.onActionToggle = isDropdownOpen => { this.setState({ isDropdownOpen }); }; this.onActionSelect = event => { this.setState({ isDropdownOpen: !this.state.isDropdownOpen }); }; } render() { const { isCardExpanded, isDropdownOpen } = this.state; const dropdownItems = [ Action 1 , Action 2 , Disabled Action 3 , Action 4 ]; return ( } isOpen={isDropdownOpen} isPlain dropdownItems={dropdownItems} position="right" /> {isCardExpanded && Getting Started} {!isCardExpanded && ( Getting Started )}

Continue setting up your cluster to access all you cain in the Console

Add identity provider Configure alert receivers Configure default ingress certificate

Tour some of the key features around the console

Tour the console Getting started with Serverless

Get started with features using our step-by-step documentation

Getting started with Serverless Explore virtualization Build pipelines

Learn about new features within the Console and get started with demo apps

See what's possible with the Explore page OpenShift 4.5: Top Tasks Try a demo app ); } } ``` ### Horizontal split The following demo shows how you may utilize `` to split a card into two halves, one with an image, and one with text content. ```js import React from 'react'; import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '@patternfly/react-core'; CardHorizontalSplitDemo = () => { return ( Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu, tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget. ); }; ``` ### Details card ```js import React from 'react'; import { Card, CardTitle, CardBody, CardFooter, Gallery, Title, DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, Divider } from '@patternfly/react-core'; CardDetailsDemo = () => { return ( Details Cluster API Address https://api1.devcluster.openshift.com Cluster ID 63b97ac1-b850-41d9-8820-239becde9e86 Provide AWS OpenShift Version 4.5.0.ci-2020-06-16-015028 Update Channel stable-4.5 View Settings Details Cluster API Address https://api2.devcluster.openshift.com Cluster ID 08908908-b850-41d9-8820-239becde9e86 Provider Azure OpenShift Version 4.5.0.ci-2020-06-16-015026 Update Channel stable-4.4 View Settings ); }; ``` ### Aggregate status card ```ts import * as React from 'react'; import { Card, CardBody, CardTitle, Divider, Flex, FlexItem, Gallery, Grid, GridItem, Stack } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon'; import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon'; const cardData = { iconOnly: [ { title: '5 Clusters', content: [ { icon: } ], layout: 'icon' }, { title: '15 Clusters', content: [ { icon: } ], layout: 'icon' }, { title: '3 Clusters', content: [ { icon: } ], layout: 'icon' } ], iconWithCount: [ { title: '10 Hosts', content: [ { icon: , count: 2 }, { icon: , count: 1 } ], layout: 'multiIcon' }, { title: '50 Hosts', content: [ { icon: , count: 5 }, { icon: , count: 12 } ], layout: 'multiIcon' }, { title: '12 Hosts', content: [ { icon: , count: 3 }, { icon: , count: 7 } ], layout: 'multiIcon' } ], withSubtitle: [ { title: '13 Hosts', content: [ { icon: , status: '2 errors', subtitle: 'subtitle' }, { icon: , status: '1 warning', subtitle: 'subtitle' } ], layout: 'withSubtitle' }, { title: '3 Hosts', content: [ { icon: , status: '2 successes', subtitle: 'subtitle' }, { icon: , status: '3 warnings', subtitle: 'subtitle' } ], layout: 'withSubtitle' }, { title: '50 Hosts', content: [ { icon: , status: '7 warnings', subtitle: 'subtitle' }, { icon: , status: '1 error', subtitle: 'subtitle' } ], layout: 'withSubtitle' } ] }; // eslint-disable-next-line @typescript-eslint/no-unused-vars const AggregateStatusCards: React.FunctionComponent = () => { const renderContent = (content, layout) => { if (layout === 'icon') { return content[0].icon; } if (layout === 'multiIcon') { return ( {content.map(({ icon, count }, index: number) => ( {icon} {count} {content.length > 1 && index === 0 && ( )} ))} ); } if (layout === 'withSubtitle') { return ( {content.map(({ icon, status, subtitle }, index) => ( {icon} {status} {subtitle} ))} ); } }; return ( {Object.keys(cardData).map((cardGroup, groupIndex) => { let galleryWidth; let cardAlign; let titleAlign; if (cardGroup === 'withSubtitle') { galleryWidth = '260px'; cardAlign = ''; titleAlign = 'center'; } else { cardAlign = 'center'; } return ( {cardData[cardGroup].map(({ title, content, layout }, cardIndex) => ( {title} {renderContent(content, layout)} ))} ); })} ); }; ``` ### Status ```ts import * as React from 'react'; import { Alert, Card, CardBody, CardHeader, Divider, Flex, FlexItem, Grid, GridItem, Label, NotificationDrawer, NotificationDrawerBody, NotificationDrawerGroup, NotificationDrawerList, NotificationDrawerListItem, NotificationDrawerListItemBody, NotificationDrawerListItemHeader, Popover, Title } from '@patternfly/react-core'; import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon'; // eslint-disable-next-line @typescript-eslint/no-unused-vars const StatusPlain: React.FunctionComponent = () => { const [drawerExpanded, setDrawerExpanded] = React.useState(false); const handleDrawerToggleClick = () => { setDrawerExpanded(!drawerExpanded); }; const [rowsExpanded, setRowsExpanded] = React.useState([false, false, false]); const handleToggleExpand = (_: any, rowIndex: number) => { const newRowsExpanded = [...rowsExpanded]; newRowsExpanded[rowIndex] = !rowsExpanded[rowIndex]; setRowsExpanded(newRowsExpanded); }; const header = ( Status ); const columns = ['Components', 'Response Rate']; const rows = [ { content: ['API Servers', '20%'], child: ( ) }, { content: ['Controller Managers', '100%'], child: ( ) }, { content: ['etcd', '91%'], child: ( ) } ]; const popoverBodyContent = ( <>
Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.
{columns.map((column, columnIndex) => ( {column} ))} {rows.map((row, rowIndex) => { const parentRow = ( {row.content.map((cell, cellIndex) => ( {cell} ))} ); const childRow = row.child ? ( {row.child} ) : null; return ( {parentRow} {childRow} ); })} ); const body = ( Cluster e.preventDefault()}> Control Panel Operators 1 degraded Image Vulnerabilities 0 vulnerabilities ); const drawerTitle = ( Notifications ); const drawer = ( This is a long description to show how the title will wrap if it is long and wraps to multiple lines. This is a warning notification description. ); return ( {header} {body} {drawer} ); }; ``` ### Status Tabbed ```ts import * as React from 'react'; import { Card, CardBody, CardHeader, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Flex, FlexItem, Grid, GridItem, Spinner, Tab, TabContent, Tabs, TabTitleText, Title } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; const descriptionListData = [ { status: 'Running', resourceName: 'Resource name that is long and can wrap', detail: '121 Systems', icon: }, { status: 'Ready', resourceName: 'Resource name that is long and can wrap', detail: '123 Systems', icon: }, { status: 'Running', resourceName: 'Resource name that is long and can wrap', detail: '122 Systems', icon: }, { status: 'Ready', resourceName: 'Resource name that is long and can wrap', detail: '124 Systems', icon: } ]; const Status: React.FunctionComponent = () => { const [activeTabKey, setActiveTabKey] = React.useState(0); const handleTabClick = (event: React.MouseEvent, tabIndex: number) => { setActiveTabKey(tabIndex); }; const tabContent = ( {descriptionListData.map(({ status, resourceName, detail, icon }, index) => ( {icon} {status} {resourceName}
{detail}
 ))} ); return ( <> Status {[1, 2, 3].map((tab, tabIndex) => ( {`Object ${tabIndex + 1}`}} tabContentId={`tabContent${tabIndex}`} /> ))} {[1, 2, 3].map((tab, tabIndex) => ( ))} ); }; ``` ### Utilization card 1 ```ts import React from 'react'; import { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem, Flex, FlexItem, Stack, StackItem, Divider } from '@patternfly/react-core'; import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts'; Top Utilized Clusters Cluster-1204 27.3 cores available `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={100} maxDomain={{ y: 9 }} padding={0} width={400} > View details Abcdef-1204 50.6 cores available `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={100} maxDomain={{ y: 9 }} padding={0} width={400} > View details View all clusters ; ``` ### Utilization card 2 ```ts import React from 'react'; import { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem, Flex, FlexItem, Stack, StackItem, Divider } from '@patternfly/react-core'; import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts'; Top Utilized Clusters Cluster-1204 27.3 cores available `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={100} maxDomain={{ y: 9 }} padding={0} width={400} > Abcdef-1204 50.6 cores available `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={100} maxDomain={{ y: 9 }} padding={0} width={400} > View all clusters ; ``` ### Utilization card 3 ```ts import React from 'react'; import { Card, CardTitle, CardHeader, CardActions, CardBody, CardFooter, Title, Gallery, GalleryItem, Flex, FlexItem, Stack, StackItem, Divider, Select, SelectOption } from '@patternfly/react-core'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts'; import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100'; const UtilizationCard3: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const selectItems = [ , , , ]; return ( Note: Custom CSS is used in this demo to align the card title and select toggle text to{' '} baseline alignment.

Recommendations System 25 incidents detected } /> } /> } /> } /> See details ); }; ``` ### Utilization card 4 ```ts import React from 'react'; import { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem } from '@patternfly/react-core'; import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts'; CPU Usage (datum.x ? datum.x : null)} padding={{ bottom: 0, left: 10, right: 150, top: 0 }} width={350} > (datum.x ? `${datum.x}: ${datum.y}%` : null)} legendData={[{ name: `Capacity: 80%` }, { name: 'Warning at 60%' }, { name: 'Danger at 90%' }]} legendOrientation="vertical" title="80%" subTitle="of 100 GBps" thresholds={[{ value: 60 }, { value: 90 }]} /> {' '} See details ; ``` ### Nested cards ```js import React from 'react'; import { Card, CardHeader, CardTitle, CardBody, CardExpandableContent, Checkbox, Title, Divider, Grid, GridItem, Flex, FlexItem } from '@patternfly/react-core'; import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts'; CardNestedDemo = () => { const [isCardExpanded1, onCardExpand1] = React.useState(true); const [isCardExpanded2, onCardExpand2] = React.useState(false); const [isCardExpanded3, onCardExpand3] = React.useState(false); const [isToggleOnRight, onCheckClick] = React.useState(false); return ( <>
onCheckClick(!isToggleOnRight)} />
{' '} Hardware Monitor{' '} onCardExpand1(!isCardExpanded1)} isToggleRightAligned={isToggleOnRight} toggleButtonProps={{ id: 'toggle-button-1', 'aria-label': 'Details', 'aria-labelledby': 'nested-cards-toggle-group-1-title toggle-button-1', 'aria-expanded': isCardExpanded1 }} > CPU 1 Temperature 64C
100C
50C
0C
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz
3.6Ghz
1.5Ghz
0GHZ
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > onCardExpand3(!isCardExpanded3)} isToggleRightAligned={isToggleOnRight} toggleButtonProps={{ id: 'toggle-button-2', 'aria-label': 'Details', 'aria-labelledby': 'nested-cards-toggle-group-2-title toggle-button-2', 'aria-expanded': isCardExpanded3 }} > CPU 2 Temperature 64C
100C
50C
0C
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz
3.6Ghz
1.5Ghz
0GHZ
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > onCardExpand2(!isCardExpanded2)} isToggleRightAligned={isToggleOnRight} toggleButtonProps={{ id: 'toggle-button-3', 'aria-label': 'Details', 'aria-labelledby': 'nested-cards-toggle-group-3-title toggle-button-3', 'aria-expanded': isCardExpanded2 }} > CPU 3 Temperature 64C
100C
50C
0C
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz
3.6Ghz
1.5Ghz
0GHZ
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > ); }; ``` ### With accordion ```ts import React from 'react'; import { Card, CardTitle, CardBody, CardHeader, Title, Accordion, AccordionItem, AccordionToggle, AccordionContent, Divider, Grid, GridItem, Flex, FlexItem } from '@patternfly/react-core'; import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts'; const AccordionCard: React.FunctionComponent = () => { const [openCPU, setOpenCPU] = React.useState('cpu1'); return ( Hardware Monitor { if (openCPU === 'cpu1') { setOpenCPU(null); } else { setOpenCPU('cpu1'); } }} isExpanded={openCPU === 'cpu1'} > CPU 1 Temperature 64C
100C
50C
0C
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz
3.6Ghz
1.5Ghz
0GHZ
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > { if (openCPU === 'cpu2') { setOpenCPU(null); } else { setOpenCPU('cpu2'); } }} isExpanded={openCPU === 'cpu2'} > CPU 2 Temperature 64C
100C
50C
0C
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz
3.6Ghz
1.5Ghz
0GHZ
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > { if (openCPU === 'cpu3') { setOpenCPU(null); } else { setOpenCPU('cpu3'); } }} isExpanded={openCPU === 'cpu3'} > CPU 3 Temperature 64C
100C
50C
0C
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz
3.6Ghz
1.5Ghz
0GHZ
 `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > ); }; ``` ### Trend card 1 ```ts import React from 'react'; import { Card, CardTitle, CardBody, CardHeader, CardActions, Title, Gallery, GalleryItem, Flex, FlexItem, Divider, Select, SelectOption } from '@patternfly/react-core'; import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts'; const TrendCard1: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const selectItems = [ , , , ]; return ( Note: Custom CSS is used in this demo to align the card title and select toggle text to{' '} baseline alignment.

1,050,765 IOPS Workload `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={100} maxDomain={{ y: 9 }} padding={0} width={400} > ); }; ``` ### Trend card 2 ```ts import React from 'react'; import { Card, CardTitle, CardFooter, CardHeader, Title, Gallery, GalleryItem, Flex, FlexItem } from '@patternfly/react-core'; import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts'; 842 TB Storage capacity `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={100} maxDomain={{ y: 9 }} padding={0} width={400} > Action 1 Action 2 ; ``` ### Log view ```js import React from 'react'; import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Gallery, Title, DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, Select, SelectOption, Divider } from '@patternfly/react-core'; CardLogViewDemo = () => { const [isOpen, setIsOpen] = React.useState(false); const onActionSelect = event => { setIsOpen(!isOpen); }; const onActionToggle = isOpen => { setIsOpen(isOpen); }; const selectItems = [ , , , ]; return ( Note: Custom CSS is used in this demo to align the card title and select toggle text to{' '} baseline alignment.

Activity Readiness probe failed Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused Successful assignment Successfully assigned default/example to ip-10-0-130-149.ec2.internal Pulling image Pulling image "openshift/hello-openshift" Created container Created container hello-openshift View all activity ); }; ``` ### Events view ```js import React from 'react'; import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Gallery, Flex, FlexItem, Title, DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, Spinner, Select, SelectOption, Divider } from '@patternfly/react-core'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; CardEventViewDemo = () => { const [isOpen, setIsOpen] = React.useState(false); const onActionSelect = event => { setIsOpen(!isOpen); }; const onActionToggle = isOpen => { setIsOpen(isOpen); }; const selectItems = [ , , ]; return ( Note: Custom CSS is used in this demo to align the card title and select toggle text to{' '} baseline alignment.

Events Readiness probe failed Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused Successful assignment Successfully assigned default/example to ip-10-0-130-149.ec2.internal Pulling image Pulling image "openshift/hello-openshift" Created container Created container hello-openshift View all events ); }; ```