Demos
Horizontal card grid
The following demo shows how you may use a <Grid> within a card for scenarios that require multiple subsections.
Getting Started
- Set up your cluster
- Guided tours
- Quick starts
Horizontal split
The following demo shows how you may utilize <Grid> to split a card into two halves, one with an image, and one with text content.
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
Details
- Cluster API Address
- Cluster ID
- 63b97ac1-b850-41d9-8820-239becde9e86
- Provide
- AWS
- OpenShift Version
- 4.5.0.ci-2020-06-16-015028
- Update Channel
- stable-4.5
Details
- Cluster API Address
- Cluster ID
- 08908908-b850-41d9-8820-239becde9e86
- Provider
- Azure
- OpenShift Version
- 4.5.0.ci-2020-06-16-015026
- Update Channel
- stable-4.4
Aggregate status card
5 Clusters
15 Clusters
3 Clusters
3 Hosts
2 successessubtitle
3 warningssubtitle
50 Hosts
7 warningssubtitle
1 errorsubtitle
Status
Status
- unread
Critical alert regarding control plane
This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - unread
Warning alert
This is a warning notification description.
Status Tabbed
Status
Running
- Resource name that is long and can wrap121 Systems
Ready
- Resource name that is long and can wrap123 Systems
Running
- Resource name that is long and can wrap122 Systems
Ready
- Resource name that is long and can wrap124 Systems
Running
- Resource name that is long and can wrap121 Systems
Ready
- Resource name that is long and can wrap123 Systems
Running
- Resource name that is long and can wrap122 Systems
Ready
- Resource name that is long and can wrap124 Systems
Running
- Resource name that is long and can wrap121 Systems
Ready
- Resource name that is long and can wrap123 Systems
Running
- Resource name that is long and can wrap122 Systems
Ready
- Resource name that is long and can wrap124 Systems
Utilization card 1
Top Utilized Clusters
Utilization card 2
Utilization card 3
Note: Custom CSS is used in this demo to align the card title and select toggle text to
baseline alignment. Recommendations
Trend card 1
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
Log view
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
Events view
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 source on GitHub
