@patternfly/patternfly 6.0.0-alpha.197 → 6.0.0-alpha.199

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/components/MenuToggle/menu-toggle.css +6 -0
  2. package/components/MenuToggle/menu-toggle.scss +7 -0
  3. package/components/_index.css +6 -0
  4. package/docs/components/MenuToggle/examples/MenuToggle.md +94 -1
  5. package/docs/demos/AboutModal/examples/AboutModal.md +358 -3
  6. package/docs/demos/Alert/examples/Alert.md +1351 -64
  7. package/docs/demos/BackToTop/examples/BackToTop.md +426 -6
  8. package/docs/demos/Banner/examples/Banner.md +895 -14
  9. package/docs/demos/CardView/examples/CardView.md +1092 -23
  10. package/docs/demos/Dashboard/examples/Dashboard.md +1597 -32
  11. package/docs/demos/DataList/examples/DataList.md +4031 -64
  12. package/docs/demos/DescriptionList/examples/DescriptionList.md +1523 -471
  13. package/docs/demos/Drawer/examples/Drawer.md +1849 -35
  14. package/docs/demos/JumpLinks/examples/JumpLinks.md +2326 -86
  15. package/docs/demos/Masthead/examples/Masthead.md +608 -8
  16. package/docs/demos/Modal/examples/Modal.md +2126 -196
  17. package/docs/demos/Nav/examples/Nav.md +1988 -22
  18. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4415 -35
  19. package/docs/demos/Page/examples/Page.md +4112 -104
  20. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6303 -269
  21. package/docs/demos/Skeleton/examples/Skeleton.md +412 -15
  22. package/docs/demos/Table/examples/Table.md +15873 -416
  23. package/docs/demos/Tabs/examples/Tabs.md +3635 -518
  24. package/docs/demos/Toolbar/examples/Toolbar.md +1812 -92
  25. package/docs/demos/Wizard/examples/Wizard.md +5289 -666
  26. package/package.json +1 -1
  27. package/patternfly-no-globals.css +6 -0
  28. package/patternfly.css +6 -0
  29. package/patternfly.min.css +1 -1
  30. package/patternfly.min.css.map +1 -1
@@ -6,36 +6,1601 @@ cssPrefix: pf-d-dashboard
6
6
 
7
7
  ### Basic
8
8
 
9
- ```hbs isFullscreen
10
- {{> page-template page-template--id="dashboard-demo"}}
11
-
12
- {{#*inline "page-template-section"}}
13
- {{#> page-main-section page-main-section--IsLimitWidth=true}}
14
- {{#> grid grid--modifier="pf-m-gutter"}}
15
- {{> card-template-expandable-status card-template-expandable-status--id=(concat page-template--id '-expandable-status-card-1')}}
16
- {{#> grid-item grid-item--modifier="pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl" grid-item--attribute='style="--pf-v6-l-grid--item--Order-on-lg:3"'}}
17
- {{#> l-flex l-flex--modifier="pf-m-column"}}
18
- {{> card-template-status card-template-status--id=(concat page-template--id '-status-card-1')}} <!-- inventory -->
19
- {{> card-template-line-chart card-template-line-chart--id=(concat page-template--id '-line-chart-card-1')}}
20
- {{> card-template-metrics card-template-metrics--id=(concat page-template--id '-metrics-card-1')}}
21
- {{/l-flex}}
22
- {{/grid-item}}
23
- {{#> grid-item grid-item--modifier="pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl" grid-item--attribute='style="--pf-v6-l-grid--item--Order-on-lg:2"'}}
24
- {{#> l-flex l-flex--modifier="pf-m-column pf-m-row-on-md pf-m-column-on-lg"}}
25
- {{#> l-flex-item l-flex-item--modifier="pf-m-flex-1"}}
26
- {{> card-template-details card-template-details--id=(concat page-template--id '-details-card-1')}}
27
- {{/l-flex-item}}
28
- {{#> l-flex-item l-flex-item--modifier="pf-m-flex-1"}}
29
- {{> card-template-data-list card-template-data-list--id=(concat page-template--id '-data-list-card-1')}}
30
- {{/l-flex-item}}
31
- {{/l-flex}}
32
- {{/grid-item}}
33
- {{#> grid-item grid-item--modifier="pf-m-4-col-on-lg pf-m-3-col-on-2xl" grid-item--attribute='style="--pf-v6-l-grid--item--Order-on-lg:4"'}}
34
- {{#> l-flex l-flex--modifier="pf-m-column"}}
35
- {{> card-template-events card-template-events--id=(concat page-template--id '-events-card-1')}}
36
- {{/l-flex}}
37
- {{/grid-item}}
38
- {{/grid}}
39
- {{/page-main-section}}
40
- {{/inline}}
9
+ ```html isFullscreen
10
+ <div class="pf-v6-c-page" id="dashboard-demo">
11
+ <div class="pf-v6-c-skip-to-content">
12
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content-dashboard-demo">
13
+ <span class="pf-v6-c-button__text">Skip to content</span>
14
+ </a>
15
+ </div>
16
+ <header class="pf-v6-c-masthead" id="dashboard-demo-masthead">
17
+ <span class="pf-v6-c-masthead__toggle">
18
+ <button
19
+ class="pf-v6-c-button pf-m-plain"
20
+ type="button"
21
+ aria-label="Global navigation"
22
+ >
23
+ <span class="pf-v6-c-button__icon">
24
+ <i class="fas fa-bars" aria-hidden="true"></i>
25
+ </span>
26
+ </button>
27
+ </span>
28
+ <div class="pf-v6-c-masthead__main">
29
+ <a class="pf-v6-c-masthead__brand" href="#">
30
+ <svg height="37px" viewBox="0 0 679 158">
31
+ <title>PF-HorizontalLogo-Color</title>
32
+ <defs>
33
+ <linearGradient
34
+ x1="68%"
35
+ y1="2.25860997e-13%"
36
+ x2="32%"
37
+ y2="100%"
38
+ id="linearGradient-dashboard-demo-masthead"
39
+ >
40
+ <stop stop-color="#2B9AF3" offset="0%" />
41
+ <stop
42
+ stop-color="#73BCF7"
43
+ stop-opacity="0.502212631"
44
+ offset="100%"
45
+ />
46
+ </linearGradient>
47
+ </defs>
48
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
49
+ <g
50
+ transform="translate(206.000000, 45.750000)"
51
+ fill="var(--pf-t--global--text--color--regular)"
52
+ fill-rule="nonzero"
53
+ >
54
+ <path
55
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
56
+ />
57
+ <path
58
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
59
+ />
60
+ <path
61
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
62
+ />
63
+ <path
64
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
65
+ />
66
+ <path
67
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
68
+ />
69
+ <path
70
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
71
+ />
72
+ <path
73
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
74
+ />
75
+ <polygon
76
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
77
+ />
78
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
79
+ <path
80
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
81
+ />
82
+ </g>
83
+ <g transform="translate(0.000000, 0.000000)">
84
+ <path
85
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
86
+ fill="#0066CC"
87
+ />
88
+ <path
89
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
90
+ fill="url(#linearGradient-dashboard-demo-masthead)"
91
+ />
92
+ <path
93
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
94
+ fill="url(#linearGradient-dashboard-demo-masthead)"
95
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
96
+ />
97
+ </g>
98
+ </g>
99
+ </svg>
100
+ </a>
101
+ </div>
102
+ <div class="pf-v6-c-masthead__content">
103
+ <div
104
+ class="pf-v6-c-toolbar pf-m-static"
105
+ id="dashboard-demo-masthead-toolbar"
106
+ >
107
+ <div class="pf-v6-c-toolbar__content">
108
+ <div class="pf-v6-c-toolbar__content-section">
109
+ <div
110
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
111
+ >
112
+ <div
113
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
114
+ >
115
+ <div class="pf-v6-c-toolbar__item">
116
+ <button
117
+ class="pf-v6-c-menu-toggle pf-m-plain"
118
+ type="button"
119
+ aria-expanded="false"
120
+ aria-label="Application launcher"
121
+ >
122
+ <span class="pf-v6-c-menu-toggle__icon">
123
+ <i class="fas fa-th" aria-hidden="true"></i>
124
+ </span>
125
+ </button>
126
+ </div>
127
+ <div class="pf-v6-c-toolbar__item">
128
+ <button
129
+ class="pf-v6-c-menu-toggle pf-m-plain"
130
+ type="button"
131
+ aria-expanded="false"
132
+ aria-label="Settings"
133
+ >
134
+ <span class="pf-v6-c-menu-toggle__icon">
135
+ <i class="fas fa-cog" aria-hidden="true"></i>
136
+ </span>
137
+ </button>
138
+ </div>
139
+ <div class="pf-v6-c-toolbar__item">
140
+ <button
141
+ class="pf-v6-c-menu-toggle pf-m-plain"
142
+ type="button"
143
+ aria-expanded="false"
144
+ aria-label="Help"
145
+ >
146
+ <span class="pf-v6-c-menu-toggle__icon">
147
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
148
+ </span>
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
154
+ <button
155
+ class="pf-v6-c-menu-toggle pf-m-plain"
156
+ type="button"
157
+ aria-expanded="false"
158
+ aria-label="Actions"
159
+ >
160
+ <span class="pf-v6-c-menu-toggle__icon">
161
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
162
+ </span>
163
+ </button>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </header>
171
+ <div class="pf-v6-c-page__sidebar">
172
+ <div class="pf-v6-c-page__sidebar-body">
173
+ <nav
174
+ class="pf-v6-c-nav"
175
+ id="dashboard-demo-primary-nav"
176
+ aria-label="Global"
177
+ >
178
+ <ul class="pf-v6-c-nav__list" role="list">
179
+ <li class="pf-v6-c-nav__item">
180
+ <a href="#" class="pf-v6-c-nav__link">
181
+ <span class="pf-v6-c-nav__link-text">System panel</span>
182
+ </a>
183
+ </li>
184
+ <li class="pf-v6-c-nav__item">
185
+ <a
186
+ href="#"
187
+ class="pf-v6-c-nav__link pf-m-current"
188
+ aria-current="page"
189
+ >
190
+ <span class="pf-v6-c-nav__link-text">Policy</span>
191
+ </a>
192
+ </li>
193
+ <li class="pf-v6-c-nav__item">
194
+ <a href="#" class="pf-v6-c-nav__link">
195
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
196
+ </a>
197
+ </li>
198
+ <li class="pf-v6-c-nav__item">
199
+ <a href="#" class="pf-v6-c-nav__link">
200
+ <span class="pf-v6-c-nav__link-text">Network services</span>
201
+ </a>
202
+ </li>
203
+ <li class="pf-v6-c-nav__item">
204
+ <a href="#" class="pf-v6-c-nav__link">
205
+ <span class="pf-v6-c-nav__link-text">Server</span>
206
+ </a>
207
+ </li>
208
+ </ul>
209
+ </nav>
210
+ </div>
211
+ </div>
212
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
213
+ <main
214
+ class="pf-v6-c-page__main"
215
+ tabindex="-1"
216
+ id="main-content-dashboard-demo"
217
+ >
218
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
219
+ <div class="pf-v6-c-page__main-body">
220
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
221
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
222
+ <li class="pf-v6-c-breadcrumb__item">
223
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
224
+ </li>
225
+ <li class="pf-v6-c-breadcrumb__item">
226
+ <span class="pf-v6-c-breadcrumb__item-divider">
227
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
228
+ </span>
229
+
230
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
231
+ </li>
232
+ <li class="pf-v6-c-breadcrumb__item">
233
+ <span class="pf-v6-c-breadcrumb__item-divider">
234
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
235
+ </span>
236
+
237
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
238
+ </li>
239
+ <li class="pf-v6-c-breadcrumb__item">
240
+ <span class="pf-v6-c-breadcrumb__item-divider">
241
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
242
+ </span>
243
+
244
+ <a
245
+ href="#"
246
+ class="pf-v6-c-breadcrumb__link pf-m-current"
247
+ aria-current="page"
248
+ >Section landing</a>
249
+ </li>
250
+ </ol>
251
+ </nav>
252
+ </div>
253
+ </section>
254
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
255
+ <div class="pf-v6-c-page__main-body">
256
+ <div class="pf-v6-c-content">
257
+ <h1>Main title</h1>
258
+ <p>This is a full page demo.</p>
259
+ </div>
260
+ </div>
261
+ </section>
262
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
263
+ <div class="pf-v6-c-page__main-body">
264
+ <div class="pf-v6-l-grid pf-m-gutter">
265
+ <div class="pf-v6-c-card pf-m-expanded">
266
+ <div class="pf-v6-c-card__header">
267
+ <div class="pf-v6-c-card__header-toggle">
268
+ <button
269
+ class="pf-v6-c-button pf-m-plain"
270
+ id&#x26;#x3D;&#x26;quot;dashboard-demo-expandable-status-card-1-toggle&#x26;quot;
271
+ type="button"
272
+ aria-labelledby="dashboard-demo-expandable-status-card-1-title dashboard-demo-expandable-status-card-1-toggle"
273
+ aria-label="Details"
274
+ >
275
+ <span class="pf-v6-c-button__icon pf-m-start">
276
+ <span class="pf-v6-c-card__header-toggle-icon">
277
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
278
+ </span>
279
+ </span>
280
+ </button>
281
+ </div>
282
+ <div class="pf-v6-c-card__actions">
283
+ <button
284
+ class="pf-v6-c-menu-toggle pf-m-plain"
285
+ type="button"
286
+ aria-expanded="false"
287
+ aria-label="Menu toggle"
288
+ id="dashboard-demo-expandable-status-card-1-toggle"
289
+ >
290
+ <span class="pf-v6-c-menu-toggle__icon">
291
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
292
+ </span>
293
+ </button>
294
+ </div>
295
+ <div
296
+ class="pf-v6-c-card__title"
297
+ id="dashboard-demo-expandable-status-card-1-title"
298
+ >
299
+ <h2 class="pf-v6-c-title pf-m-xl">Improve recommended pathways</h2>
300
+ </div>
301
+ </div>
302
+ <div class="pf-v6-c-card__expandable-content">
303
+ <div class="pf-v6-l-flex pf-m-column pf-m-row-on-md">
304
+ <div
305
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
306
+ >
307
+ <div class="pf-v6-c-card pf-m-plain">
308
+ <div class="pf-v6-c-card__body">
309
+ <div
310
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
311
+ >
312
+ <div
313
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
314
+ >
315
+ <div class="pf-v6-c-label-group">
316
+ <div class="pf-v6-c-label-group__main">
317
+ <ul
318
+ class="pf-v6-c-label-group__list"
319
+ role="list"
320
+ aria-label="Group of labels"
321
+ >
322
+ <li class="pf-v6-c-label-group__list-item">
323
+ <span
324
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
325
+ >
326
+ <span class="pf-v6-c-label__content">
327
+ <span class="pf-v6-c-label__icon">
328
+ <i
329
+ class="pf-v6-pficon pf-v6-pficon-port"
330
+ aria-hidden="true"
331
+ ></i>
332
+ </span>
333
+ <span
334
+ class="pf-v6-c-label__text"
335
+ >Performance</span>
336
+ </span>
337
+ </span>
338
+ </li>
339
+ </ul>
340
+ </div>
341
+ </div>
342
+ <a href="#">378 systems</a>
343
+ </div>
344
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
345
+ <p>Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance</p>
346
+ </div>
347
+ <div
348
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
349
+ style="row-gap: var(--pf-6-global--spacer--md);"
350
+ >
351
+ <div
352
+ class="pf-v6-l-flex__item"
353
+ style="margin-block-end: -.25em"
354
+ >
355
+ <span class="pf-v6-c-label pf-m-red">
356
+ <span class="pf-v6-c-label__content">
357
+ <span class="pf-v6-c-label__text">Incident</span>
358
+ </span>
359
+ </span>
360
+ </div>
361
+ <div
362
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
363
+ style="row-gap: var(--pf-6-global--spacer--md);"
364
+ >
365
+ <i
366
+ class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
367
+ style="line-height: 1"
368
+ aria-hidden="true"
369
+ ></i>
370
+ <p class="pf-v6-u-color-200">
371
+ System reboot
372
+ <b class="pf-v6-u-color-100">is not</b> required
373
+ </p>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ <div class="pf-v6-c-card__footer">
379
+ <a
380
+ class="pf-v6-c-button pf-m-inline pf-m-link"
381
+ href="#"
382
+ >
383
+ <span class="pf-v6-c-button__text">View pathway</span>
384
+ <span class="pf-v6-c-button__icon pf-m-end">
385
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
386
+ </span>
387
+ </a>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ <hr
392
+ class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl"
393
+ />
394
+ <div
395
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
396
+ >
397
+ <div class="pf-v6-c-card pf-m-plain">
398
+ <div class="pf-v6-c-card__body">
399
+ <div
400
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
401
+ >
402
+ <div
403
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
404
+ >
405
+ <div class="pf-v6-c-label-group">
406
+ <div class="pf-v6-c-label-group__main">
407
+ <ul
408
+ class="pf-v6-c-label-group__list"
409
+ role="list"
410
+ aria-label="Group of labels"
411
+ >
412
+ <li class="pf-v6-c-label-group__list-item">
413
+ <span
414
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
415
+ >
416
+ <span class="pf-v6-c-label__content">
417
+ <span class="pf-v6-c-label__icon">
418
+ <i
419
+ class="fas fa-cube"
420
+ aria-hidden="true"
421
+ ></i>
422
+ </span>
423
+ <span
424
+ class="pf-v6-c-label__text"
425
+ >Stablility</span>
426
+ </span>
427
+ </span>
428
+ </li>
429
+ <li class="pf-v6-c-label-group__list-item">
430
+ <button
431
+ class="pf-v6-c-label pf-m-overflow"
432
+ type="button"
433
+ >
434
+ <span class="pf-v6-c-label__content">
435
+ <span class="pf-v6-c-label__text">1 more</span>
436
+ </span>
437
+ </button>
438
+ </li>
439
+ </ul>
440
+ </div>
441
+ </div>
442
+ <a href="#">211 systems</a>
443
+ </div>
444
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
445
+ <p>Adjust your networking configuration to get ahead of network perfomance degradations and packet losses</p>
446
+ </div>
447
+ <div
448
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
449
+ style="row-gap: var(--pf-6-global--spacer--md);"
450
+ >
451
+ <div
452
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
453
+ style="row-gap: var(--pf-6-global--spacer--md);"
454
+ >
455
+ <i
456
+ class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-danger-color-100"
457
+ style="line-height: 1"
458
+ aria-hidden="true"
459
+ ></i>
460
+ <p class="pf-v6-u-color-200">
461
+ System reboot
462
+ <b class="pf-v6-u-color-100">is</b> required
463
+ </p>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ <div class="pf-v6-c-card__footer">
469
+ <a
470
+ class="pf-v6-c-button pf-m-inline pf-m-link"
471
+ href="#"
472
+ >
473
+ <span class="pf-v6-c-button__text">View pathway</span>
474
+ <span class="pf-v6-c-button__icon pf-m-end">
475
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
476
+ </span>
477
+ </a>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ <hr
482
+ class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl"
483
+ />
484
+ <div
485
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
486
+ >
487
+ <div class="pf-v6-c-card pf-m-plain">
488
+ <div class="pf-v6-c-card__body">
489
+ <div
490
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
491
+ >
492
+ <div
493
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
494
+ >
495
+ <div class="pf-v6-c-label-group">
496
+ <div class="pf-v6-c-label-group__main">
497
+ <ul
498
+ class="pf-v6-c-label-group__list"
499
+ role="list"
500
+ aria-label="Group of labels"
501
+ >
502
+ <li class="pf-v6-c-label-group__list-item">
503
+ <span
504
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
505
+ >
506
+ <span class="pf-v6-c-label__content">
507
+ <span class="pf-v6-c-label__icon">
508
+ <i
509
+ class="pf-v6-pficon pf-v6-pficon-automation"
510
+ aria-hidden="true"
511
+ ></i>
512
+ </span>
513
+ <span
514
+ class="pf-v6-c-label__text"
515
+ >Availability</span>
516
+ </span>
517
+ </span>
518
+ </li>
519
+ </ul>
520
+ </div>
521
+ </div>
522
+ <a href="#">166 systems</a>
523
+ </div>
524
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
525
+ <p>Fine tune your Oracle DB configuration to improve database performance and avoid process failure</p>
526
+ </div>
527
+ <div
528
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
529
+ style="row-gap: var(--pf-6-global--spacer--md);"
530
+ >
531
+ <div
532
+ class="pf-v6-l-flex__item"
533
+ style="margin-block-end: -.25em"
534
+ >
535
+ <span class="pf-v6-c-label pf-m-red">
536
+ <span class="pf-v6-c-label__content">
537
+ <span class="pf-v6-c-label__text">Incident</span>
538
+ </span>
539
+ </span>
540
+ </div>
541
+ <div
542
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
543
+ style="row-gap: var(--pf-6-global--spacer--md);"
544
+ >
545
+ <i
546
+ class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
547
+ style="line-height: 1"
548
+ aria-hidden="true"
549
+ ></i>
550
+ <p class="pf-v6-u-color-200">
551
+ System reboot
552
+ <b class="pf-v6-u-color-100">is not</b> required
553
+ </p>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ <div class="pf-v6-c-card__footer">
559
+ <a
560
+ class="pf-v6-c-button pf-m-inline pf-m-link"
561
+ href="#"
562
+ >
563
+ <span class="pf-v6-c-button__text">View pathway</span>
564
+ <span class="pf-v6-c-button__icon pf-m-end">
565
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
566
+ </span>
567
+ </a>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ <div
575
+ class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl"
576
+ style="--pf-v6-l-grid--item--Order-on-lg:3"
577
+ >
578
+ <div class="pf-v6-l-flex pf-m-column">
579
+ <div
580
+ class="pf-v6-c-card pf-m-expanded"
581
+ id="dashboard-demo-status-card-1"
582
+ >
583
+ <div class="pf-v6-c-card__header">
584
+ <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
585
+ </div>
586
+ <div class="pf-v6-c-card__body">
587
+ <div
588
+ class="pf-v6-l-gallery pf-m-gutter"
589
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 100%; --pf-v6-l-gallery--GridTemplateColumns--min-on-sm: 180px; --pf-v6-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v6-l-gallery--GridTemplateColumns--max-on-sm: 1fr;"
590
+ >
591
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
592
+ <div class="pf-v6-l-flex__item">
593
+ <i
594
+ class="fas fa-check-circle pf-v6-u-success-color-100"
595
+ aria-hidden="true"
596
+ ></i>
597
+ </div>
598
+ <div class="pf-v6-l-flex__item">
599
+ <span>Cluster</span>
600
+ </div>
601
+ </div>
602
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
603
+ <div class="pf-v6-l-flex__item">
604
+ <i
605
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
606
+ aria-hidden="true"
607
+ ></i>
608
+ </div>
609
+ <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
610
+ <span class="popover-parent">
611
+ <a href="#">Control Panel</a>
612
+ </span>
613
+ </div>
614
+ </div>
615
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
616
+ <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
617
+ <i
618
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
619
+ aria-hidden="true"
620
+ ></i>
621
+ </div>
622
+ <div
623
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
624
+ >
625
+ <div class="pf-v6-l-flex__item">
626
+ <a href="#">Operators</a>
627
+ </div>
628
+ <div class="pf-v6-l-flex__item">
629
+ <span class="pf-v6-u-text-color-subtle">1 degraded</span>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
634
+ <div class="pf-v6-l-flex__item">
635
+ <i
636
+ class="fas fa-check-circle pf-v6-u-success-color-100"
637
+ aria-hidden="true"
638
+ ></i>
639
+ </div>
640
+ <div
641
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
642
+ >
643
+ <div class="pf-v6-l-flex__item">
644
+ <a href="#">Image Vulnerabilities</a>
645
+ </div>
646
+ <div class="pf-v6-l-flex__item">
647
+ <span class="pf-v6-u-color-200">0 vulnerabilities</span>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
652
+ <div class="pf-v6-l-flex__item">
653
+ <i
654
+ class="fas fa-check-circle pf-v6-u-success-color-100"
655
+ aria-hidden="true"
656
+ ></i>
657
+ </div>
658
+ <div
659
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
660
+ >
661
+ <div class="pf-v6-l-flex__item">
662
+ <a href="#">Storage</a>
663
+ </div>
664
+ <div class="pf-v6-l-flex__item">
665
+ <span class="pf-v6-u-color-200">Degraded</span>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
670
+ <div class="pf-v6-l-flex__item">
671
+ <i
672
+ class="fas fa-check-circle pf-v6-u-success-color-100"
673
+ aria-hidden="true"
674
+ ></i>
675
+ </div>
676
+ <div
677
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
678
+ >
679
+ <div class="pf-v6-l-flex__item">
680
+ <a href="#">Hardware</a>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
685
+ <div class="pf-v6-l-flex__item">
686
+ <i
687
+ class="fas fa-check-circle pf-v6-u-success-color-100"
688
+ aria-hidden="true"
689
+ ></i>
690
+ </div>
691
+ <div
692
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
693
+ >
694
+ <div class="pf-v6-l-flex__item">
695
+ <a href="#">Insights</a>
696
+ </div>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ <hr class="pf-v6-c-divider" />
702
+ <div class="pf-v6-c-notification-drawer">
703
+ <div class="pf-v6-c-notification-drawer__body">
704
+ <section class="pf-v6-c-notification-drawer__group">
705
+ <button
706
+ class="pf-v6-c-notification-drawer__group-toggle"
707
+ aria-expanded="false"
708
+ >
709
+ <div
710
+ class="pf-v6-c-notification-drawer__group-toggle-title"
711
+ >
712
+ <div class="pf-v6-l-flex">
713
+ <div
714
+ class="pf-v6-l-flex__item pf-m-spacer-md"
715
+ >Notifications</div>
716
+ <div class="pf-v6-c-label-group">
717
+ <div class="pf-v6-c-label-group__main">
718
+ <ul
719
+ class="pf-v6-c-label-group__list"
720
+ role="list"
721
+ aria-label="Group of labels"
722
+ >
723
+ <li class="pf-v6-c-label-group__list-item">
724
+ <span class="pf-v6-c-label pf-m-red">
725
+ <span class="pf-v6-c-label__content">
726
+ <span class="pf-v6-c-label__icon">
727
+ <i
728
+ class="fas fa-fw fa-exclamation-circle"
729
+ aria-hidden="true"
730
+ ></i>
731
+ </span>
732
+ <span class="pf-v6-c-label__text">1</span>
733
+ </span>
734
+ </span>
735
+ </li>
736
+ <li class="pf-v6-c-label-group__list-item">
737
+ <span class="pf-v6-c-label pf-m-orange">
738
+ <span class="pf-v6-c-label__content">
739
+ <span class="pf-v6-c-label__icon">
740
+ <i
741
+ class="fas fa-fw fa-exclamation-circle"
742
+ aria-hidden="true"
743
+ ></i>
744
+ </span>
745
+ <span class="pf-v6-c-label__text">1</span>
746
+ </span>
747
+ </span>
748
+ </li>
749
+ <li class="pf-v6-c-label-group__list-item">
750
+ <span class="pf-v6-c-label pf-m-green">
751
+ <span class="pf-v6-c-label__content">
752
+ <span class="pf-v6-c-label__icon">
753
+ <i
754
+ class="fas fa-fw fa-check-circle"
755
+ aria-hidden="true"
756
+ ></i>
757
+ </span>
758
+ <span class="pf-v6-c-label__text">3</span>
759
+ </span>
760
+ </span>
761
+ </li>
762
+ <li class="pf-v6-c-label-group__list-item">
763
+ <span class="pf-v6-c-label pf-m-blue">
764
+ <span class="pf-v6-c-label__content">
765
+ <span class="pf-v6-c-label__icon">
766
+ <i
767
+ class="fas fa-fw fa-info-circle"
768
+ aria-hidden="true"
769
+ ></i>
770
+ </span>
771
+ <span class="pf-v6-c-label__text">3</span>
772
+ </span>
773
+ </span>
774
+ </li>
775
+ <li class="pf-v6-c-label-group__list-item">
776
+ <span class="pf-v6-c-label pf-m-teal">
777
+ <span class="pf-v6-c-label__content">
778
+ <span class="pf-v6-c-label__icon">
779
+ <i
780
+ class="fas fa-fw fa-bell"
781
+ aria-hidden="true"
782
+ ></i>
783
+ </span>
784
+ <span class="pf-v6-c-label__text">3</span>
785
+ </span>
786
+ </span>
787
+ </li>
788
+ </ul>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ <span
794
+ class="pf-v6-c-notification-drawer__group-toggle-icon"
795
+ >
796
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
797
+ </span>
798
+ </button>
799
+ <ul
800
+ class="pf-v6-c-notification-drawer__list"
801
+ role="list"
802
+ hidden
803
+ >
804
+ <li
805
+ class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
806
+ tabindex="0"
807
+ >
808
+ <div
809
+ class="pf-v6-c-notification-drawer__list-item-header"
810
+ >
811
+ <span
812
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
813
+ >
814
+ <i
815
+ class="fas fa-exclamation-circle"
816
+ aria-hidden="true"
817
+ ></i>
818
+ </span>
819
+ <h2
820
+ class="pf-v6-c-notification-drawer__list-item-header-title"
821
+ >
822
+ <span
823
+ class="pf-v6-screen-reader"
824
+ >Danger notification:</span>
825
+ Critical alert regarding control plane
826
+ </h2>
827
+ </div>
828
+ <div
829
+ class="pf-v6-c-notification-drawer__list-item-description"
830
+ >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>
831
+ </li>
832
+ <li
833
+ class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning"
834
+ tabindex="0"
835
+ >
836
+ <div
837
+ class="pf-v6-c-notification-drawer__list-item-header"
838
+ >
839
+ <span
840
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
841
+ >
842
+ <i
843
+ class="fas fa-exclamation-triangle"
844
+ aria-hidden="true"
845
+ ></i>
846
+ </span>
847
+ <h2
848
+ class="pf-v6-c-notification-drawer__list-item-header-title"
849
+ >
850
+ <span
851
+ class="pf-v6-screen-reader"
852
+ >Warning notification:</span>
853
+ Warning alert
854
+ </h2>
855
+ </div>
856
+ <div
857
+ class="pf-v6-c-notification-drawer__list-item-description"
858
+ >This is a warning notification description.</div>
859
+ </li>
860
+ </ul>
861
+ </section>
862
+ </div>
863
+ </div>
864
+ </div>
865
+ <!-- inventory -->
866
+ <div class="pf-v6-c-card" id="dashboard-demo-line-chart-card-1">
867
+ <div class="pf-v6-c-card__header">
868
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
869
+ <button
870
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
871
+ type="button"
872
+ aria-expanded="false"
873
+ id="dashboard-demo-line-chart-card-1-select-dropdown"
874
+ >
875
+ <span class="pf-v6-c-menu-toggle__text">24 hours</span>
876
+ <span class="pf-v6-c-menu-toggle__controls">
877
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
878
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
879
+ </span>
880
+ </span>
881
+ </button>
882
+ </div>
883
+ <div
884
+ class="pf-v6-c-card__title"
885
+ id="dashboard-demo-line-chart-card-1-title"
886
+ >
887
+ <h2 class="pf-v6-c-title pf-m-xl">Cluster utilizations</h2>
888
+ </div>
889
+ </div>
890
+ <div
891
+ class="pf-v6-c-card pf-m-plain pf-m-expanded"
892
+ id="dashboard-demo-line-chart-card-1-group-1"
893
+ >
894
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
895
+ <div class="pf-v6-c-card__header-toggle">
896
+ <button
897
+ class="pf-v6-c-button pf-m-plain"
898
+ id&#x26;#x3D;&#x26;quot;dashboard-demo-line-chart-card-1-group-1-toggle&#x26;quot;
899
+ type="button"
900
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-1-title dashboard-demo-line-chart-card-1-group-1-toggle"
901
+ aria-label="Details"
902
+ >
903
+ <span class="pf-v6-c-button__icon pf-m-start">
904
+ <span class="pf-v6-c-card__header-toggle-icon">
905
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
906
+ </span>
907
+ </span>
908
+ </button>
909
+ </div>
910
+ <div class="pf-v6-c-card__title">
911
+ <h2
912
+ class="pf-v6-c-card__title-text"
913
+ id="dashboard-demo-line-chart-card-1-group-1-title"
914
+ >CPU 1</h2>
915
+ </div>
916
+ </div>
917
+ <div class="pf-v6-c-card__expandable-content">
918
+ <div class="pf-v6-c-card__body">
919
+ <div class="pf-v6-l-grid pf-m-gutter">
920
+ <div class="pf-v6-l-grid pf-m-gutter">
921
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
922
+ <div
923
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
924
+ >
925
+ <div class="pf-v6-l-flex__item">
926
+ <b>Temperature</b>
927
+ </div>
928
+ <hr
929
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
930
+ />
931
+ <div class="pf-v6-l-flex__item">
932
+ <span>64C</span>
933
+ </div>
934
+ </div>
935
+ </div>
936
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
937
+ <div class="pf-v6-l-grid pf-m-gutter">
938
+ <div class="pf-v6-l-grid__item pf-m-2-col">
939
+ <div
940
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
941
+ >
942
+ <div class="pf-v6-l-flex__item">100C</div>
943
+ <div class="pf-v6-l-flex__item">50C</div>
944
+ <div class="pf-v6-l-flex__item">0C</div>
945
+ </div>
946
+ </div>
947
+ <div class="pf-v6-l-grid__item pf-m-10-col">
948
+ <div class="ws-chart">
949
+ <img
950
+ src="/assets/images/img_line-chart-2.png"
951
+ alt="Line chart"
952
+ />
953
+ </div>
954
+ </div>
955
+ </div>
956
+ </div>
957
+ </div>
958
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
959
+ <div class="pf-v6-l-grid pf-m-gutter">
960
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
961
+ <div
962
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
963
+ >
964
+ <div class="pf-v6-l-flex__item">
965
+ <b>Speed</b>
966
+ </div>
967
+ <hr
968
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
969
+ />
970
+ <div class="pf-v6-l-flex__item">
971
+ <span>2.3Ghz</span>
972
+ </div>
973
+ </div>
974
+ </div>
975
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
976
+ <div class="pf-v6-l-grid pf-m-gutter">
977
+ <div class="pf-v6-l-grid__item pf-m-2-col">
978
+ <div
979
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
980
+ >
981
+ <div class="pf-v6-l-flex__item">36hz</div>
982
+ <div class="pf-v6-l-flex__item">1.5Ghz</div>
983
+ <div class="pf-v6-l-flex__item">0Ghz</div>
984
+ </div>
985
+ </div>
986
+ <div class="pf-v6-l-grid__item pf-m-10-col">
987
+ <div class="ws-chart">
988
+ <img
989
+ src="/assets/images/img_line-chart-2.png"
990
+ alt="Line chart"
991
+ />
992
+ </div>
993
+ </div>
994
+ </div>
995
+ </div>
996
+ </div>
997
+ </div>
998
+ </div>
999
+ </div>
1000
+ </div>
1001
+ <div
1002
+ class="pf-v6-c-card pf-m-plain"
1003
+ id="dashboard-demo-line-chart-card-1-group-2"
1004
+ >
1005
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1006
+ <div class="pf-v6-c-card__header-toggle">
1007
+ <button
1008
+ class="pf-v6-c-button pf-m-plain"
1009
+ id&#x26;#x3D;&#x26;quot;dashboard-demo-line-chart-card-1-group-2-toggle&#x26;quot;
1010
+ type="button"
1011
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-2-title dashboard-demo-line-chart-card-1-group-2-toggle"
1012
+ aria-label="Details"
1013
+ >
1014
+ <span class="pf-v6-c-button__icon pf-m-start">
1015
+ <span class="pf-v6-c-card__header-toggle-icon">
1016
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1017
+ </span>
1018
+ </span>
1019
+ </button>
1020
+ </div>
1021
+ <div class="pf-v6-c-card__title">
1022
+ <h2
1023
+ class="pf-v6-c-card__title-text"
1024
+ id="dashboard-demo-line-chart-card-1-group-2-title"
1025
+ >Pod count</h2>
1026
+ </div>
1027
+ </div>
1028
+ </div>
1029
+ <div
1030
+ class="pf-v6-c-card pf-m-plain"
1031
+ id="dashboard-demo-line-chart-card-1-group-3"
1032
+ >
1033
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1034
+ <div class="pf-v6-c-card__header-toggle">
1035
+ <button
1036
+ class="pf-v6-c-button pf-m-plain"
1037
+ id&#x26;#x3D;&#x26;quot;dashboard-demo-line-chart-card-1-group-3-toggle&#x26;quot;
1038
+ type="button"
1039
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-3-title dashboard-demo-line-chart-card-1-group-3-toggle"
1040
+ aria-label="Details"
1041
+ >
1042
+ <span class="pf-v6-c-button__icon pf-m-start">
1043
+ <span class="pf-v6-c-card__header-toggle-icon">
1044
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1045
+ </span>
1046
+ </span>
1047
+ </button>
1048
+ </div>
1049
+ <div class="pf-v6-c-card__title">
1050
+ <h2
1051
+ class="pf-v6-c-card__title-text"
1052
+ id="dashboard-demo-line-chart-card-1-group-3-title"
1053
+ >Memory</h2>
1054
+ </div>
1055
+ </div>
1056
+ </div>
1057
+ </div>
1058
+ <div class="pf-v6-c-card">
1059
+ <div class="pf-v6-c-card__title">
1060
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by severity</h2>
1061
+ </div>
1062
+ <div class="pf-v6-c-card__body">
1063
+ <div class="pf-v6-l-flex pf-m-inline-flex">
1064
+ <div class="pf-v6-l-grid pf-m-gutter pf-m-all-3-col">
1065
+ <div
1066
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1067
+ >
1068
+ <span
1069
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1070
+ >2</span>
1071
+ <span class="pf-v6-u-font-color-200">Critical</span>
1072
+ </div>
1073
+ <div
1074
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1075
+ >
1076
+ <span
1077
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1078
+ >5</span>
1079
+ <span class="pf-v6-u-font-color-200">Important</span>
1080
+ </div>
1081
+ <div
1082
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1083
+ >
1084
+ <span
1085
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1086
+ >7</span>
1087
+ <span class="pf-v6-u-font-color-200">Moderate</span>
1088
+ </div>
1089
+ <div
1090
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1091
+ >
1092
+ <span
1093
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1094
+ >12</span>
1095
+ <span class="pf-v6-u-font-color-200">Low</span>
1096
+ </div>
1097
+ </div>
1098
+ </div>
1099
+ </div>
1100
+ <div class="pf-v6-c-card__title">
1101
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by category</h2>
1102
+ </div>
1103
+ <div class="pf-v6-c-card__body">
1104
+ <img
1105
+ src="/assets/images/img_pie-chart-with-legend.png"
1106
+ alt="Pie chart"
1107
+ width="450"
1108
+ />
1109
+ </div>
1110
+ <div class="pf-v6-c-card__footer">
1111
+ <a href="#">View more</a>
1112
+ </div>
1113
+ </div>
1114
+ </div>
1115
+ </div>
1116
+ <div
1117
+ class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1118
+ style="--pf-v6-l-grid--item--Order-on-lg:2"
1119
+ >
1120
+ <div
1121
+ class="pf-v6-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg"
1122
+ >
1123
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1124
+ <div class="pf-v6-c-card" id="dashboard-demo-details-card-1">
1125
+ <div class="pf-v6-c-card__title">
1126
+ <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
1127
+ </div>
1128
+ <div class="pf-v6-c-card__body">
1129
+ <dl class="pf-v6-c-description-list">
1130
+ <div class="pf-v6-c-description-list__group">
1131
+ <dt
1132
+ class="pf-v6-c-description-list__term"
1133
+ >Cluster API Address</dt>
1134
+ <dd class="pf-v6-c-description-list__description">
1135
+ <div class="pf-v6-c-description-list__text">
1136
+ <a href="#">https://api1.devcluster.openshift.com</a>
1137
+ </div>
1138
+ </dd>
1139
+ </div>
1140
+ <div class="pf-v6-c-description-list__group">
1141
+ <dt class="pf-v6-c-description-list__term">Cluster ID</dt>
1142
+ <dd class="pf-v6-c-description-list__description">
1143
+ <div
1144
+ class="pf-v6-c-description-list__text"
1145
+ >63b97ac1-b850-41d9-8820-239becde9e86</div>
1146
+ </dd>
1147
+ </div>
1148
+ <div class="pf-v6-c-description-list__group">
1149
+ <dt class="pf-v6-c-description-list__term">Provider</dt>
1150
+ <dd class="pf-v6-c-description-list__description">
1151
+ <div class="pf-v6-c-description-list__text">AWS</div>
1152
+ </dd>
1153
+ </div>
1154
+ <div class="pf-v6-c-description-list__group">
1155
+ <dt
1156
+ class="pf-v6-c-description-list__term"
1157
+ >OpenShift Version</dt>
1158
+ <dd class="pf-v6-c-description-list__description">
1159
+ <div
1160
+ class="pf-v6-c-description-list__text"
1161
+ >4.5.0.ci-2020-06-16-015028</div>
1162
+ </dd>
1163
+ </div>
1164
+ <div class="pf-v6-c-description-list__group">
1165
+ <dt
1166
+ class="pf-v6-c-description-list__term"
1167
+ >Update Channel</dt>
1168
+ <dd class="pf-v6-c-description-list__description">
1169
+ <div
1170
+ class="pf-v6-c-description-list__text"
1171
+ >stable-4.5</div>
1172
+ </dd>
1173
+ </div>
1174
+ </dl>
1175
+ </div>
1176
+ <hr class="pf-v6-c-divider" />
1177
+ <div class="pf-v6-c-card__footer">
1178
+ <a href="#">View Settings</a>
1179
+ </div>
1180
+ </div>
1181
+ </div>
1182
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1183
+ <div
1184
+ class="pf-v6-c-card"
1185
+ id="dashboard-demo-data-list-card-1"
1186
+ >
1187
+ <div
1188
+ class="pf-v6-c-card__header pf-v6-u-align-items-flex-start"
1189
+ >
1190
+ <div
1191
+ class="pf-v6-c-card__title"
1192
+ id="dashboard-demo-data-list-card-1-title1"
1193
+ >
1194
+ <h2 class="pf-v6-c-title pf-m-lg">Inventory</h2>
1195
+ </div>
1196
+ </div>
1197
+ <ul
1198
+ class="pf-v6-c-data-list pf-m-grid-none"
1199
+ role="list"
1200
+ aria-label="Simple data list example"
1201
+ id="dashboard-demo-data-list-card-1-data-list"
1202
+ >
1203
+ <li
1204
+ class="pf-v6-c-data-list__item"
1205
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-1"
1206
+ >
1207
+ <div class="pf-v6-c-data-list__item-row">
1208
+ <div class="pf-v6-c-data-list__item-content">
1209
+ <div
1210
+ class="pf-v6-c-data-list__cell"
1211
+ id="dashboard-demo-data-list-card-1-data-list-item-1"
1212
+ >3 Nodes</div>
1213
+ <div
1214
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1215
+ >
1216
+ <a href="#">
1217
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1218
+ <span>3</span>
1219
+ <i
1220
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1221
+ aria-hidden="true"
1222
+ ></i>
1223
+ </div>
1224
+ </a>
1225
+ </div>
1226
+ </div>
1227
+ </div>
1228
+ </li>
1229
+ <li
1230
+ class="pf-v6-c-data-list__item"
1231
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-2"
1232
+ >
1233
+ <div class="pf-v6-c-data-list__item-row">
1234
+ <div class="pf-v6-c-data-list__item-content">
1235
+ <div
1236
+ class="pf-v6-c-data-list__cell"
1237
+ id="dashboard-demo-data-list-card-1-data-list-item-2"
1238
+ >8 Disks</div>
1239
+ <div
1240
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1241
+ >
1242
+ <a href="#">
1243
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1244
+ <span>8</span>
1245
+ <i
1246
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1247
+ aria-hidden="true"
1248
+ ></i>
1249
+ </div>
1250
+ </a>
1251
+ </div>
1252
+ </div>
1253
+ </div>
1254
+ </li>
1255
+ <li
1256
+ class="pf-v6-c-data-list__item"
1257
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-3"
1258
+ >
1259
+ <div class="pf-v6-c-data-list__item-row">
1260
+ <div class="pf-v6-c-data-list__item-content">
1261
+ <div
1262
+ class="pf-v6-c-data-list__cell"
1263
+ id="dashboard-demo-data-list-card-1-data-list-item-3"
1264
+ >20 Pods</div>
1265
+ <div
1266
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1267
+ >
1268
+ <a href="#">
1269
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1270
+ <span>20</span>
1271
+ <i
1272
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1273
+ aria-hidden="true"
1274
+ ></i>
1275
+ </div>
1276
+ </a>
1277
+ </div>
1278
+ </div>
1279
+ </div>
1280
+ </li>
1281
+ <li
1282
+ class="pf-v6-c-data-list__item"
1283
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-4"
1284
+ >
1285
+ <div class="pf-v6-c-data-list__item-row">
1286
+ <div class="pf-v6-c-data-list__item-content">
1287
+ <div
1288
+ class="pf-v6-c-data-list__cell"
1289
+ id="dashboard-demo-data-list-card-1-data-list-item-4"
1290
+ >12 PVs</div>
1291
+ <div
1292
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1293
+ >
1294
+ <a href="#">
1295
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1296
+ <span>12</span>
1297
+ <i
1298
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1299
+ aria-hidden="true"
1300
+ ></i>
1301
+ </div>
1302
+ </a>
1303
+ </div>
1304
+ </div>
1305
+ </div>
1306
+ </li>
1307
+ <li
1308
+ class="pf-v6-c-data-list__item"
1309
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-5"
1310
+ >
1311
+ <div class="pf-v6-c-data-list__item-row">
1312
+ <div class="pf-v6-c-data-list__item-content">
1313
+ <div
1314
+ class="pf-v6-c-data-list__cell"
1315
+ id="dashboard-demo-data-list-card-1-data-list-item-5"
1316
+ >18 PVCs</div>
1317
+ <div
1318
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1319
+ >
1320
+ <a href="#">
1321
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1322
+ <span>18</span>
1323
+ <i
1324
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1325
+ aria-hidden="true"
1326
+ ></i>
1327
+ </div>
1328
+ </a>
1329
+ </div>
1330
+ </div>
1331
+ </div>
1332
+ </li>
1333
+ </ul>
1334
+ </div>
1335
+ </div>
1336
+ </div>
1337
+ </div>
1338
+ <div
1339
+ class="pf-v6-l-grid__item pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1340
+ style="--pf-v6-l-grid--item--Order-on-lg:4"
1341
+ >
1342
+ <div class="pf-v6-l-flex pf-m-column">
1343
+ <div class="pf-v6-c-card" id="dashboard-demo-events-card-1">
1344
+ <div class="pf-v6-c-card__header">
1345
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1346
+ <button
1347
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1348
+ type="button"
1349
+ aria-expanded="false"
1350
+ id="dashboard-demo-events-card-1-select-dropdown"
1351
+ >
1352
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
1353
+ <span class="pf-v6-c-menu-toggle__controls">
1354
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1355
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1356
+ </span>
1357
+ </span>
1358
+ </button>
1359
+ </div>
1360
+ <div
1361
+ class="pf-v6-c-card__title"
1362
+ id="dashboard-demo-events-card-1-title1"
1363
+ style="padding-block-start: 3px;"
1364
+ >
1365
+ <h2 class="pf-v6-c-title pf-m-xl">Events</h2>
1366
+ </div>
1367
+ </div>
1368
+ <div class="pf-v6-c-card__body">
1369
+ <dl class="pf-v6-c-description-list pf-m-compact">
1370
+ <div class="pf-v6-c-description-list__group">
1371
+ <dt class="pf-v6-c-description-list__term">
1372
+ <div class="pf-v6-l-flex pf-m-nowrap">
1373
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1374
+ <i
1375
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1376
+ aria-hidden="true"
1377
+ ></i>
1378
+ </div>
1379
+ <div
1380
+ class="pf-v6-l-flex__item"
1381
+ >Readiness probe failed</div>
1382
+ </div>
1383
+ </dt>
1384
+ <dd class="pf-v6-c-description-list__description">
1385
+ <div
1386
+ class="pf-v6-c-description-list__text"
1387
+ >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
1388
+ </dd>
1389
+ <dd class="pf-v6-c-description-list__description">
1390
+ <div class="pf-v6-c-description-list__text">
1391
+ <time
1392
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1393
+ >Jun 17, 11:02 am</time>
1394
+ </div>
1395
+ </dd>
1396
+ </div>
1397
+ <div class="pf-v6-c-description-list__group">
1398
+ <dt class="pf-v6-c-description-list__term">
1399
+ <div class="pf-v6-l-flex pf-m-nowrap">
1400
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1401
+ <i
1402
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1403
+ aria-hidden="true"
1404
+ ></i>
1405
+ </div>
1406
+ <div
1407
+ class="pf-v6-l-flex__item"
1408
+ >Successful assignment</div>
1409
+ </div>
1410
+ </dt>
1411
+ <dd class="pf-v6-c-description-list__description">
1412
+ <div
1413
+ class="pf-v6-c-description-list__text"
1414
+ >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
1415
+ </dd>
1416
+ <dd class="pf-v6-c-description-list__description">
1417
+ <div class="pf-v6-c-description-list__text">
1418
+ <time
1419
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1420
+ >Jun 17, 11:13 am</time>
1421
+ </div>
1422
+ </dd>
1423
+ </div>
1424
+ <div class="pf-v6-c-description-list__group">
1425
+ <dt class="pf-v6-c-description-list__term">
1426
+ <div class="pf-v6-l-flex pf-m-nowrap">
1427
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1428
+ <svg
1429
+ class="pf-v6-c-spinner pf-m-md"
1430
+ role="progressbar"
1431
+ viewBox="0 0 100 100"
1432
+ aria-label="Loading"
1433
+ >
1434
+ <circle
1435
+ class="pf-v6-c-spinner__path"
1436
+ cx="50"
1437
+ cy="50"
1438
+ r="45"
1439
+ fill="none"
1440
+ />
1441
+ </svg>
1442
+ </div>
1443
+ <div class="pf-v6-l-flex__item">Pulling image</div>
1444
+ </div>
1445
+ </dt>
1446
+ <dd class="pf-v6-c-description-list__description">
1447
+ <div
1448
+ class="pf-v6-c-description-list__text"
1449
+ >Pulling image "openshift/hello-openshift"</div>
1450
+ </dd>
1451
+ <dd class="pf-v6-c-description-list__description">
1452
+ <div class="pf-v6-c-description-list__text">
1453
+ <time
1454
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1455
+ >Jun 17, 10:59 am</time>
1456
+ </div>
1457
+ </dd>
1458
+ </div>
1459
+ <div class="pf-v6-c-description-list__group">
1460
+ <dt class="pf-v6-c-description-list__term">
1461
+ <div class="pf-v6-l-flex pf-m-nowrap">
1462
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1463
+ <i
1464
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1465
+ aria-hidden="true"
1466
+ ></i>
1467
+ </div>
1468
+ <div class="pf-v6-l-flex__item">Created container</div>
1469
+ </div>
1470
+ </dt>
1471
+ <dd class="pf-v6-c-description-list__description">
1472
+ <div
1473
+ class="pf-v6-c-description-list__text"
1474
+ >Created container hello-openshift</div>
1475
+ </dd>
1476
+ <dd class="pf-v6-c-description-list__description">
1477
+ <div class="pf-v6-c-description-list__text">
1478
+ <time
1479
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1480
+ >Jun 17, 10:45 am</time>
1481
+ </div>
1482
+ </dd>
1483
+ </div>
1484
+
1485
+ <div class="pf-v6-c-description-list__group">
1486
+ <dt class="pf-v6-c-description-list__term">
1487
+ <div class="pf-v6-l-flex pf-m-nowrap">
1488
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1489
+ <i
1490
+ class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
1491
+ aria-hidden="true"
1492
+ ></i>
1493
+ </div>
1494
+ <div
1495
+ class="pf-v6-l-flex__item"
1496
+ >CPU utilitization over 50%</div>
1497
+ </div>
1498
+ </dt>
1499
+ <dd class="pf-v6-c-description-list__description">
1500
+ <div
1501
+ class="pf-v6-c-description-list__text"
1502
+ >Migrated 2 pods to other hosts</div>
1503
+ </dd>
1504
+ <dd class="pf-v6-c-description-list__description">
1505
+ <div class="pf-v6-c-description-list__text">
1506
+ <time
1507
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1508
+ >Jun 17, 10:33 am</time>
1509
+ </div>
1510
+ </dd>
1511
+ </div>
1512
+
1513
+ <div class="pf-v6-c-description-list__group">
1514
+ <dt class="pf-v6-c-description-list__term">
1515
+ <div class="pf-v6-l-flex pf-m-nowrap">
1516
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1517
+ <i
1518
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1519
+ aria-hidden="true"
1520
+ ></i>
1521
+ </div>
1522
+ <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1523
+ </div>
1524
+ </dt>
1525
+ <dd class="pf-v6-c-description-list__description">
1526
+ <div
1527
+ class="pf-v6-c-description-list__text"
1528
+ >Rebuild initiated as Disk 5 failed</div>
1529
+ </dd>
1530
+ <dd class="pf-v6-c-description-list__description">
1531
+ <div class="pf-v6-c-description-list__text">
1532
+ <time
1533
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1534
+ >Jun 17, 10:33 am</time>
1535
+ </div>
1536
+ </dd>
1537
+ </div>
1538
+
1539
+ <div class="pf-v6-c-description-list__group">
1540
+ <dt class="pf-v6-c-description-list__term">
1541
+ <div class="pf-v6-l-flex pf-m-nowrap">
1542
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1543
+ <i
1544
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1545
+ aria-hidden="true"
1546
+ ></i>
1547
+ </div>
1548
+ <div class="pf-v6-l-flex__item">Created container</div>
1549
+ </div>
1550
+ </dt>
1551
+ <dd class="pf-v6-c-description-list__description">
1552
+ <div
1553
+ class="pf-v6-c-description-list__text"
1554
+ >Created container hello-openshift-123</div>
1555
+ </dd>
1556
+ <dd class="pf-v6-c-description-list__description">
1557
+ <div class="pf-v6-c-description-list__text">
1558
+ <time
1559
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1560
+ >Jun 17, 10:31 am</time>
1561
+ </div>
1562
+ </dd>
1563
+ </div>
1564
+
1565
+ <div class="pf-v6-c-description-list__group">
1566
+ <dt class="pf-v6-c-description-list__term">
1567
+ <div class="pf-v6-l-flex pf-m-nowrap">
1568
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1569
+ <i
1570
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1571
+ aria-hidden="true"
1572
+ ></i>
1573
+ </div>
1574
+ <div class="pf-v6-l-flex__item">Created container</div>
1575
+ </div>
1576
+ </dt>
1577
+ <dd class="pf-v6-c-description-list__description">
1578
+ <div
1579
+ class="pf-v6-c-description-list__text"
1580
+ >Created container hello-openshift-456</div>
1581
+ </dd>
1582
+ <dd class="pf-v6-c-description-list__description">
1583
+ <div class="pf-v6-c-description-list__text">
1584
+ <time
1585
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1586
+ >Jun 17, 10:30 am</time>
1587
+ </div>
1588
+ </dd>
1589
+ </div>
1590
+ </dl>
1591
+ </div>
1592
+ <hr class="pf-v6-c-divider" />
1593
+ <div class="pf-v6-c-card__footer">
1594
+ <a href="#">View all events</a>
1595
+ </div>
1596
+ </div>
1597
+ </div>
1598
+ </div>
1599
+ </div>
1600
+ </div>
1601
+ </section>
1602
+ </main>
1603
+ </div>
1604
+ </div>
1605
+
41
1606
  ```