@patternfly/patternfly 4.182.2 → 4.183.0
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.
|
@@ -0,0 +1,2260 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: 'Dashboard'
|
|
3
|
+
beta: true
|
|
4
|
+
section: demos
|
|
5
|
+
cssPrefix: pf-d-dashboard
|
|
6
|
+
---## Examples
|
|
7
|
+
|
|
8
|
+
### Basic
|
|
9
|
+
|
|
10
|
+
```html isFullscreen
|
|
11
|
+
<div class="pf-c-page" id="dashboard-demo">
|
|
12
|
+
<a
|
|
13
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
14
|
+
href="#main-content-dashboard-demo"
|
|
15
|
+
>Skip to content</a>
|
|
16
|
+
|
|
17
|
+
<header class="pf-c-masthead" id="dashboard-demo-masthead">
|
|
18
|
+
<span class="pf-c-masthead__toggle">
|
|
19
|
+
<button
|
|
20
|
+
class="pf-c-button pf-m-plain"
|
|
21
|
+
type="button"
|
|
22
|
+
aria-label="Global navigation"
|
|
23
|
+
>
|
|
24
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
25
|
+
</button>
|
|
26
|
+
</span>
|
|
27
|
+
<div class="pf-c-masthead__main">
|
|
28
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
29
|
+
<picture
|
|
30
|
+
class="pf-c-brand pf-m-picture"
|
|
31
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
32
|
+
>
|
|
33
|
+
<source
|
|
34
|
+
media="(min-width: 768px)"
|
|
35
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
36
|
+
/>
|
|
37
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
38
|
+
<img
|
|
39
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
40
|
+
alt="Fallback patternFly default logo"
|
|
41
|
+
/>
|
|
42
|
+
</picture>
|
|
43
|
+
</a>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="pf-c-masthead__content">
|
|
46
|
+
<div
|
|
47
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
48
|
+
id="dashboard-demo-masthead-toolbar"
|
|
49
|
+
>
|
|
50
|
+
<div class="pf-c-toolbar__content">
|
|
51
|
+
<div class="pf-c-toolbar__content-section">
|
|
52
|
+
<div
|
|
53
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
54
|
+
>
|
|
55
|
+
<div class="pf-c-toolbar__item">
|
|
56
|
+
<button
|
|
57
|
+
class="pf-c-button pf-m-plain"
|
|
58
|
+
type="button"
|
|
59
|
+
aria-label="Notifications"
|
|
60
|
+
>
|
|
61
|
+
<span class="pf-c-notification-badge">
|
|
62
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
63
|
+
</span>
|
|
64
|
+
</button>
|
|
65
|
+
</div>
|
|
66
|
+
<div
|
|
67
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
68
|
+
>
|
|
69
|
+
<div class="pf-c-toolbar__item">
|
|
70
|
+
<nav
|
|
71
|
+
class="pf-c-app-launcher"
|
|
72
|
+
aria-label="Application launcher"
|
|
73
|
+
id="dashboard-demo-masthead-icon-group--app-launcher"
|
|
74
|
+
>
|
|
75
|
+
<button
|
|
76
|
+
class="pf-c-app-launcher__toggle"
|
|
77
|
+
type="button"
|
|
78
|
+
id="dashboard-demo-masthead-icon-group--app-launcher-button"
|
|
79
|
+
aria-expanded="false"
|
|
80
|
+
aria-label="Application launcher"
|
|
81
|
+
>
|
|
82
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
83
|
+
</button>
|
|
84
|
+
<div
|
|
85
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
86
|
+
hidden
|
|
87
|
+
>
|
|
88
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
89
|
+
<div class="pf-c-search-input">
|
|
90
|
+
<div class="pf-c-search-input__bar">
|
|
91
|
+
<span class="pf-c-search-input__text">
|
|
92
|
+
<span class="pf-c-search-input__icon">
|
|
93
|
+
<i
|
|
94
|
+
class="fas fa-search fa-fw"
|
|
95
|
+
aria-hidden="true"
|
|
96
|
+
></i>
|
|
97
|
+
</span>
|
|
98
|
+
<input
|
|
99
|
+
class="pf-c-search-input__text-input"
|
|
100
|
+
type="text"
|
|
101
|
+
placeholder="Filter by name"
|
|
102
|
+
aria-label="Filter by name"
|
|
103
|
+
/>
|
|
104
|
+
</span>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<section class="pf-c-app-launcher__group">
|
|
109
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
110
|
+
<ul>
|
|
111
|
+
<li
|
|
112
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
113
|
+
>
|
|
114
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
115
|
+
Link 1
|
|
116
|
+
<span
|
|
117
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
118
|
+
>
|
|
119
|
+
<i
|
|
120
|
+
class="fas fa-external-link-alt"
|
|
121
|
+
aria-hidden="true"
|
|
122
|
+
></i>
|
|
123
|
+
</span>
|
|
124
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
125
|
+
</a>
|
|
126
|
+
<button
|
|
127
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
128
|
+
type="button"
|
|
129
|
+
aria-label="Favorite"
|
|
130
|
+
>
|
|
131
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
132
|
+
</button>
|
|
133
|
+
</li>
|
|
134
|
+
<li
|
|
135
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
136
|
+
>
|
|
137
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
138
|
+
Link 2
|
|
139
|
+
<span
|
|
140
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
141
|
+
>
|
|
142
|
+
<i
|
|
143
|
+
class="fas fa-external-link-alt"
|
|
144
|
+
aria-hidden="true"
|
|
145
|
+
></i>
|
|
146
|
+
</span>
|
|
147
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
148
|
+
</a>
|
|
149
|
+
<button
|
|
150
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
151
|
+
type="button"
|
|
152
|
+
aria-label="Favorite"
|
|
153
|
+
>
|
|
154
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
155
|
+
</button>
|
|
156
|
+
</li>
|
|
157
|
+
</ul>
|
|
158
|
+
</section>
|
|
159
|
+
<hr class="pf-c-divider" />
|
|
160
|
+
<section class="pf-c-app-launcher__group">
|
|
161
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
162
|
+
<ul>
|
|
163
|
+
<li
|
|
164
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
165
|
+
>
|
|
166
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
167
|
+
Link 1
|
|
168
|
+
<span
|
|
169
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
170
|
+
>
|
|
171
|
+
<i
|
|
172
|
+
class="fas fa-external-link-alt"
|
|
173
|
+
aria-hidden="true"
|
|
174
|
+
></i>
|
|
175
|
+
</span>
|
|
176
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
177
|
+
</a>
|
|
178
|
+
<button
|
|
179
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
180
|
+
type="button"
|
|
181
|
+
aria-label="Favorite"
|
|
182
|
+
>
|
|
183
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
184
|
+
</button>
|
|
185
|
+
</li>
|
|
186
|
+
<li
|
|
187
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
188
|
+
>
|
|
189
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
190
|
+
Link 2
|
|
191
|
+
<span
|
|
192
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
193
|
+
>
|
|
194
|
+
<i
|
|
195
|
+
class="fas fa-external-link-alt"
|
|
196
|
+
aria-hidden="true"
|
|
197
|
+
></i>
|
|
198
|
+
</span>
|
|
199
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
200
|
+
</a>
|
|
201
|
+
<button
|
|
202
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
203
|
+
type="button"
|
|
204
|
+
aria-label="Favorite"
|
|
205
|
+
>
|
|
206
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
207
|
+
</button>
|
|
208
|
+
</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</section>
|
|
211
|
+
</div>
|
|
212
|
+
</nav>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="pf-c-toolbar__item">
|
|
215
|
+
<div class="pf-c-dropdown">
|
|
216
|
+
<button
|
|
217
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
218
|
+
id="dashboard-demo-masthead-settings-button"
|
|
219
|
+
aria-expanded="false"
|
|
220
|
+
type="button"
|
|
221
|
+
aria-label="Settings"
|
|
222
|
+
>
|
|
223
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
224
|
+
</button>
|
|
225
|
+
<ul
|
|
226
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
227
|
+
aria-labelledby="dashboard-demo-masthead-settings-button"
|
|
228
|
+
hidden
|
|
229
|
+
>
|
|
230
|
+
<li>
|
|
231
|
+
<button
|
|
232
|
+
class="pf-c-dropdown__menu-item"
|
|
233
|
+
type="button"
|
|
234
|
+
>Settings</button>
|
|
235
|
+
</li>
|
|
236
|
+
<li>
|
|
237
|
+
<button
|
|
238
|
+
class="pf-c-dropdown__menu-item"
|
|
239
|
+
type="button"
|
|
240
|
+
>Use the beta release</button>
|
|
241
|
+
</li>
|
|
242
|
+
</ul>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="pf-c-toolbar__item">
|
|
246
|
+
<div class="pf-c-dropdown">
|
|
247
|
+
<button
|
|
248
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
249
|
+
id="dashboard-demo-masthead-help-button"
|
|
250
|
+
aria-expanded="false"
|
|
251
|
+
type="button"
|
|
252
|
+
aria-label="Help"
|
|
253
|
+
>
|
|
254
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
255
|
+
</button>
|
|
256
|
+
<ul
|
|
257
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
258
|
+
aria-labelledby="dashboard-demo-masthead-help-button"
|
|
259
|
+
hidden
|
|
260
|
+
>
|
|
261
|
+
<li>
|
|
262
|
+
<button
|
|
263
|
+
class="pf-c-dropdown__menu-item"
|
|
264
|
+
type="button"
|
|
265
|
+
>Support options</button>
|
|
266
|
+
</li>
|
|
267
|
+
<li>
|
|
268
|
+
<button
|
|
269
|
+
class="pf-c-dropdown__menu-item"
|
|
270
|
+
type="button"
|
|
271
|
+
>Open support case</button>
|
|
272
|
+
</li>
|
|
273
|
+
<li>
|
|
274
|
+
<button
|
|
275
|
+
class="pf-c-dropdown__menu-item"
|
|
276
|
+
type="button"
|
|
277
|
+
>API documentation</button>
|
|
278
|
+
</li>
|
|
279
|
+
</ul>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
284
|
+
<div class="pf-c-dropdown">
|
|
285
|
+
<button
|
|
286
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
287
|
+
type="button"
|
|
288
|
+
aria-expanded="false"
|
|
289
|
+
aria-label="Actions"
|
|
290
|
+
>
|
|
291
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
292
|
+
</button>
|
|
293
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
294
|
+
<div class="pf-c-menu__content">
|
|
295
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
296
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
297
|
+
<li
|
|
298
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
299
|
+
role="none"
|
|
300
|
+
>
|
|
301
|
+
<button
|
|
302
|
+
class="pf-c-menu__item"
|
|
303
|
+
type="button"
|
|
304
|
+
disabled
|
|
305
|
+
role="menuitem"
|
|
306
|
+
>
|
|
307
|
+
<span class="pf-c-menu__item-description">
|
|
308
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
309
|
+
<div
|
|
310
|
+
class="pf-u-font-size-md"
|
|
311
|
+
>mshaksho@redhat.com</div>
|
|
312
|
+
</span>
|
|
313
|
+
</button>
|
|
314
|
+
</li>
|
|
315
|
+
<li
|
|
316
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
317
|
+
role="none"
|
|
318
|
+
>
|
|
319
|
+
<button
|
|
320
|
+
class="pf-c-menu__item"
|
|
321
|
+
type="button"
|
|
322
|
+
disabled
|
|
323
|
+
role="menuitem"
|
|
324
|
+
>
|
|
325
|
+
<span class="pf-c-menu__item-description">
|
|
326
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
327
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
328
|
+
</span>
|
|
329
|
+
</button>
|
|
330
|
+
</li>
|
|
331
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
332
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
333
|
+
<button
|
|
334
|
+
class="pf-c-menu__item"
|
|
335
|
+
type="button"
|
|
336
|
+
role="menuitem"
|
|
337
|
+
>
|
|
338
|
+
<span class="pf-c-menu__item-main">
|
|
339
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
340
|
+
</span>
|
|
341
|
+
</button>
|
|
342
|
+
</li>
|
|
343
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
344
|
+
<button
|
|
345
|
+
class="pf-c-menu__item"
|
|
346
|
+
type="button"
|
|
347
|
+
role="menuitem"
|
|
348
|
+
>
|
|
349
|
+
<span class="pf-c-menu__item-main">
|
|
350
|
+
<span
|
|
351
|
+
class="pf-c-menu__item-text"
|
|
352
|
+
>User management</span>
|
|
353
|
+
</span>
|
|
354
|
+
</button>
|
|
355
|
+
</li>
|
|
356
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
357
|
+
<button
|
|
358
|
+
class="pf-c-menu__item"
|
|
359
|
+
type="button"
|
|
360
|
+
role="menuitem"
|
|
361
|
+
>
|
|
362
|
+
<span class="pf-c-menu__item-main">
|
|
363
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
364
|
+
</span>
|
|
365
|
+
</button>
|
|
366
|
+
</li>
|
|
367
|
+
</ul>
|
|
368
|
+
</section>
|
|
369
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
370
|
+
<section class="pf-c-menu__group">
|
|
371
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
372
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
373
|
+
<button
|
|
374
|
+
class="pf-c-menu__item"
|
|
375
|
+
type="button"
|
|
376
|
+
role="menuitem"
|
|
377
|
+
aria-expanded="false"
|
|
378
|
+
>
|
|
379
|
+
<span class="pf-c-menu__item-main">
|
|
380
|
+
<span class="pf-c-menu__item-icon">
|
|
381
|
+
<i
|
|
382
|
+
class="fas fa-fw fa-cog"
|
|
383
|
+
aria-hidden="true"
|
|
384
|
+
></i>
|
|
385
|
+
</span>
|
|
386
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
387
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
388
|
+
<i class="fas fa-angle-right"></i>
|
|
389
|
+
</span>
|
|
390
|
+
</span>
|
|
391
|
+
</button>
|
|
392
|
+
<div class="pf-c-menu" hidden>
|
|
393
|
+
<div class="pf-c-menu__content">
|
|
394
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
395
|
+
<li
|
|
396
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
397
|
+
role="none"
|
|
398
|
+
>
|
|
399
|
+
<button
|
|
400
|
+
class="pf-c-menu__item"
|
|
401
|
+
type="button"
|
|
402
|
+
role="menuitem"
|
|
403
|
+
>
|
|
404
|
+
<span class="pf-c-menu__item-main">
|
|
405
|
+
<span
|
|
406
|
+
class="pf-c-menu__item-toggle-icon"
|
|
407
|
+
>
|
|
408
|
+
<i class="fas fa-angle-left"></i>
|
|
409
|
+
</span>
|
|
410
|
+
<span class="pf-c-menu__item-icon">
|
|
411
|
+
<i
|
|
412
|
+
class="fas fa-fw fa-cog"
|
|
413
|
+
aria-hidden="true"
|
|
414
|
+
></i>
|
|
415
|
+
</span>
|
|
416
|
+
<span
|
|
417
|
+
class="pf-c-menu__item-text"
|
|
418
|
+
>Settings</span>
|
|
419
|
+
</span>
|
|
420
|
+
</button>
|
|
421
|
+
</li>
|
|
422
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
423
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
424
|
+
<a
|
|
425
|
+
class="pf-c-menu__item"
|
|
426
|
+
href="#"
|
|
427
|
+
role="menuitem"
|
|
428
|
+
>
|
|
429
|
+
<span class="pf-c-menu__item-main">
|
|
430
|
+
<span
|
|
431
|
+
class="pf-c-menu__item-text"
|
|
432
|
+
>Customer support</span>
|
|
433
|
+
</span>
|
|
434
|
+
</a>
|
|
435
|
+
</li>
|
|
436
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
437
|
+
<a
|
|
438
|
+
class="pf-c-menu__item"
|
|
439
|
+
href="#"
|
|
440
|
+
role="menuitem"
|
|
441
|
+
>
|
|
442
|
+
<span class="pf-c-menu__item-main">
|
|
443
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
444
|
+
</span>
|
|
445
|
+
</a>
|
|
446
|
+
</li>
|
|
447
|
+
</ul>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
</li>
|
|
451
|
+
|
|
452
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
453
|
+
<button
|
|
454
|
+
class="pf-c-menu__item"
|
|
455
|
+
type="button"
|
|
456
|
+
role="menuitem"
|
|
457
|
+
aria-expanded="false"
|
|
458
|
+
>
|
|
459
|
+
<span class="pf-c-menu__item-main">
|
|
460
|
+
<span class="pf-c-menu__item-icon">
|
|
461
|
+
<i
|
|
462
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
463
|
+
aria-hidden="true"
|
|
464
|
+
></i>
|
|
465
|
+
</span>
|
|
466
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
467
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
468
|
+
<i class="fas fa-angle-right"></i>
|
|
469
|
+
</span>
|
|
470
|
+
</span>
|
|
471
|
+
</button>
|
|
472
|
+
<div class="pf-c-menu" hidden>
|
|
473
|
+
<div class="pf-c-menu__content">
|
|
474
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
475
|
+
<li
|
|
476
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
477
|
+
role="none"
|
|
478
|
+
>
|
|
479
|
+
<button
|
|
480
|
+
class="pf-c-menu__item"
|
|
481
|
+
type="button"
|
|
482
|
+
role="menuitem"
|
|
483
|
+
>
|
|
484
|
+
<span class="pf-c-menu__item-main">
|
|
485
|
+
<span
|
|
486
|
+
class="pf-c-menu__item-toggle-icon"
|
|
487
|
+
>
|
|
488
|
+
<i class="fas fa-angle-left"></i>
|
|
489
|
+
</span>
|
|
490
|
+
<span class="pf-c-menu__item-icon">
|
|
491
|
+
<i
|
|
492
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
493
|
+
aria-hidden="true"
|
|
494
|
+
></i>
|
|
495
|
+
</span>
|
|
496
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
497
|
+
</span>
|
|
498
|
+
</button>
|
|
499
|
+
</li>
|
|
500
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
501
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
502
|
+
<a
|
|
503
|
+
class="pf-c-menu__item"
|
|
504
|
+
href="#"
|
|
505
|
+
role="menuitem"
|
|
506
|
+
>
|
|
507
|
+
<span class="pf-c-menu__item-main">
|
|
508
|
+
<span
|
|
509
|
+
class="pf-c-menu__item-text"
|
|
510
|
+
>Support options</span>
|
|
511
|
+
</span>
|
|
512
|
+
</a>
|
|
513
|
+
</li>
|
|
514
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
515
|
+
<a
|
|
516
|
+
class="pf-c-menu__item"
|
|
517
|
+
href="#"
|
|
518
|
+
role="menuitem"
|
|
519
|
+
>
|
|
520
|
+
<span class="pf-c-menu__item-main">
|
|
521
|
+
<span
|
|
522
|
+
class="pf-c-menu__item-text"
|
|
523
|
+
>Open support case</span>
|
|
524
|
+
</span>
|
|
525
|
+
</a>
|
|
526
|
+
</li>
|
|
527
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
528
|
+
<a
|
|
529
|
+
class="pf-c-menu__item"
|
|
530
|
+
href="#"
|
|
531
|
+
role="menuitem"
|
|
532
|
+
>
|
|
533
|
+
<span class="pf-c-menu__item-main">
|
|
534
|
+
<span
|
|
535
|
+
class="pf-c-menu__item-text"
|
|
536
|
+
>API documentation</span>
|
|
537
|
+
</span>
|
|
538
|
+
</a>
|
|
539
|
+
</li>
|
|
540
|
+
</ul>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
</li>
|
|
544
|
+
|
|
545
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
546
|
+
<button
|
|
547
|
+
class="pf-c-menu__item"
|
|
548
|
+
type="button"
|
|
549
|
+
role="menuitem"
|
|
550
|
+
>
|
|
551
|
+
<span class="pf-c-menu__item-main">
|
|
552
|
+
<span class="pf-c-menu__item-icon">
|
|
553
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
554
|
+
</span>
|
|
555
|
+
<span
|
|
556
|
+
class="pf-c-menu__item-text"
|
|
557
|
+
>Application launcher</span>
|
|
558
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
559
|
+
<i class="fas fa-angle-right"></i>
|
|
560
|
+
</span>
|
|
561
|
+
</span>
|
|
562
|
+
</button>
|
|
563
|
+
<div class="pf-c-menu" hidden>
|
|
564
|
+
<div class="pf-c-menu__header">
|
|
565
|
+
<button
|
|
566
|
+
class="pf-c-menu__item"
|
|
567
|
+
type="button"
|
|
568
|
+
role="menuitem"
|
|
569
|
+
>
|
|
570
|
+
<span class="pf-c-menu__item-main">
|
|
571
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
572
|
+
<i class="fas fa-angle-left"></i>
|
|
573
|
+
</span>
|
|
574
|
+
<span class="pf-c-menu__item-icon">
|
|
575
|
+
<i
|
|
576
|
+
class="fas fa-fw fa-th"
|
|
577
|
+
aria-hidden="true"
|
|
578
|
+
></i>
|
|
579
|
+
</span>
|
|
580
|
+
<span
|
|
581
|
+
class="pf-c-menu__item-text"
|
|
582
|
+
>Application launcher</span>
|
|
583
|
+
</span>
|
|
584
|
+
</button>
|
|
585
|
+
</div>
|
|
586
|
+
<div class="pf-c-menu__search">
|
|
587
|
+
<div class="pf-c-menu__search-input">
|
|
588
|
+
<div class="pf-c-search-input">
|
|
589
|
+
<div class="pf-c-search-input__bar">
|
|
590
|
+
<span class="pf-c-search-input__text">
|
|
591
|
+
<span class="pf-c-search-input__icon">
|
|
592
|
+
<i
|
|
593
|
+
class="fas fa-search fa-fw"
|
|
594
|
+
aria-hidden="true"
|
|
595
|
+
></i>
|
|
596
|
+
</span>
|
|
597
|
+
<input
|
|
598
|
+
class="pf-c-search-input__text-input"
|
|
599
|
+
type="text"
|
|
600
|
+
placeholder="Search"
|
|
601
|
+
aria-label="Search"
|
|
602
|
+
/>
|
|
603
|
+
</span>
|
|
604
|
+
</div>
|
|
605
|
+
</div>
|
|
606
|
+
</div>
|
|
607
|
+
</div>
|
|
608
|
+
<hr class="pf-c-divider" />
|
|
609
|
+
<section class="pf-c-menu__group">
|
|
610
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
611
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
612
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
613
|
+
<a
|
|
614
|
+
class="pf-c-menu__item"
|
|
615
|
+
href="#"
|
|
616
|
+
role="menuitem"
|
|
617
|
+
>
|
|
618
|
+
<span class="pf-c-menu__item-main">
|
|
619
|
+
<span
|
|
620
|
+
class="pf-c-menu__item-text"
|
|
621
|
+
>Link 1</span>
|
|
622
|
+
</span>
|
|
623
|
+
</a>
|
|
624
|
+
<button
|
|
625
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
626
|
+
type="button"
|
|
627
|
+
aria-label="Starred"
|
|
628
|
+
>
|
|
629
|
+
<span class="pf-c-menu__item-action-icon">
|
|
630
|
+
<i
|
|
631
|
+
class="fas fa-star"
|
|
632
|
+
aria-hidden="true"
|
|
633
|
+
></i>
|
|
634
|
+
</span>
|
|
635
|
+
</button>
|
|
636
|
+
</li>
|
|
637
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
638
|
+
<a
|
|
639
|
+
class="pf-c-menu__item"
|
|
640
|
+
href="#"
|
|
641
|
+
role="menuitem"
|
|
642
|
+
target="_blank"
|
|
643
|
+
>
|
|
644
|
+
<span class="pf-c-menu__item-main">
|
|
645
|
+
<span
|
|
646
|
+
class="pf-c-menu__item-text"
|
|
647
|
+
>Link 2</span>
|
|
648
|
+
<span
|
|
649
|
+
class="pf-c-menu__item-external-icon"
|
|
650
|
+
>
|
|
651
|
+
<i
|
|
652
|
+
class="fas fa-external-link-alt"
|
|
653
|
+
aria-hidden="true"
|
|
654
|
+
></i>
|
|
655
|
+
</span>
|
|
656
|
+
<span
|
|
657
|
+
class="pf-screen-reader"
|
|
658
|
+
>(opens new window)</span>
|
|
659
|
+
</span>
|
|
660
|
+
</a>
|
|
661
|
+
<button
|
|
662
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
663
|
+
type="button"
|
|
664
|
+
aria-label="Not starred"
|
|
665
|
+
>
|
|
666
|
+
<span class="pf-c-menu__item-action-icon">
|
|
667
|
+
<i
|
|
668
|
+
class="fas fa-star"
|
|
669
|
+
aria-hidden="true"
|
|
670
|
+
></i>
|
|
671
|
+
</span>
|
|
672
|
+
</button>
|
|
673
|
+
</li>
|
|
674
|
+
</ul>
|
|
675
|
+
</section>
|
|
676
|
+
<hr class="pf-c-divider" />
|
|
677
|
+
<section class="pf-c-menu__group">
|
|
678
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
679
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
680
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
681
|
+
<a
|
|
682
|
+
class="pf-c-menu__item"
|
|
683
|
+
href="#"
|
|
684
|
+
role="menuitem"
|
|
685
|
+
>
|
|
686
|
+
<span class="pf-c-menu__item-main">
|
|
687
|
+
<span
|
|
688
|
+
class="pf-c-menu__item-text"
|
|
689
|
+
>Link 1</span>
|
|
690
|
+
</span>
|
|
691
|
+
</a>
|
|
692
|
+
<button
|
|
693
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
694
|
+
type="button"
|
|
695
|
+
aria-label="Not starred"
|
|
696
|
+
>
|
|
697
|
+
<span class="pf-c-menu__item-action-icon">
|
|
698
|
+
<i
|
|
699
|
+
class="fas fa-star"
|
|
700
|
+
aria-hidden="true"
|
|
701
|
+
></i>
|
|
702
|
+
</span>
|
|
703
|
+
</button>
|
|
704
|
+
</li>
|
|
705
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
706
|
+
<a
|
|
707
|
+
class="pf-c-menu__item"
|
|
708
|
+
href="#"
|
|
709
|
+
role="menuitem"
|
|
710
|
+
target="_blank"
|
|
711
|
+
>
|
|
712
|
+
<span class="pf-c-menu__item-main">
|
|
713
|
+
<span
|
|
714
|
+
class="pf-c-menu__item-text"
|
|
715
|
+
>Link 2</span>
|
|
716
|
+
<span
|
|
717
|
+
class="pf-c-menu__item-external-icon"
|
|
718
|
+
>
|
|
719
|
+
<i
|
|
720
|
+
class="fas fa-external-link-alt"
|
|
721
|
+
aria-hidden="true"
|
|
722
|
+
></i>
|
|
723
|
+
</span>
|
|
724
|
+
<span
|
|
725
|
+
class="pf-screen-reader"
|
|
726
|
+
>(opens new window)</span>
|
|
727
|
+
</span>
|
|
728
|
+
</a>
|
|
729
|
+
<button
|
|
730
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
731
|
+
type="button"
|
|
732
|
+
aria-label="Starred"
|
|
733
|
+
>
|
|
734
|
+
<span class="pf-c-menu__item-action-icon">
|
|
735
|
+
<i
|
|
736
|
+
class="fas fa-star"
|
|
737
|
+
aria-hidden="true"
|
|
738
|
+
></i>
|
|
739
|
+
</span>
|
|
740
|
+
</button>
|
|
741
|
+
</li>
|
|
742
|
+
</ul>
|
|
743
|
+
</section>
|
|
744
|
+
</div>
|
|
745
|
+
</li>
|
|
746
|
+
</ul>
|
|
747
|
+
</section>
|
|
748
|
+
</div>
|
|
749
|
+
</div>
|
|
750
|
+
</div>
|
|
751
|
+
</div>
|
|
752
|
+
</div>
|
|
753
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
754
|
+
<div
|
|
755
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
756
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
757
|
+
>
|
|
758
|
+
<button
|
|
759
|
+
class="pf-c-dropdown__toggle"
|
|
760
|
+
id="dashboard-demo-masthead-profile-button"
|
|
761
|
+
aria-expanded="false"
|
|
762
|
+
type="button"
|
|
763
|
+
>
|
|
764
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
765
|
+
<img
|
|
766
|
+
class="pf-c-avatar"
|
|
767
|
+
src="/assets/images/img_avatar.svg"
|
|
768
|
+
alt="Avatar image"
|
|
769
|
+
/>
|
|
770
|
+
</span>
|
|
771
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
772
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
773
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
774
|
+
</span>
|
|
775
|
+
</button>
|
|
776
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
777
|
+
<section class="pf-c-dropdown__group">
|
|
778
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
779
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
780
|
+
<div>123456789</div>
|
|
781
|
+
</div>
|
|
782
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
783
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
784
|
+
<div>mshaksho@redhat.com</div>
|
|
785
|
+
</div>
|
|
786
|
+
</section>
|
|
787
|
+
<hr class="pf-c-divider" />
|
|
788
|
+
<section class="pf-c-dropdown__group">
|
|
789
|
+
<ul>
|
|
790
|
+
<li>
|
|
791
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
792
|
+
</li>
|
|
793
|
+
<li>
|
|
794
|
+
<a
|
|
795
|
+
class="pf-c-dropdown__menu-item"
|
|
796
|
+
href="#"
|
|
797
|
+
>User management</a>
|
|
798
|
+
</li>
|
|
799
|
+
<li>
|
|
800
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
801
|
+
</li>
|
|
802
|
+
</ul>
|
|
803
|
+
</section>
|
|
804
|
+
</div>
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
</div>
|
|
808
|
+
</div>
|
|
809
|
+
</div>
|
|
810
|
+
</div>
|
|
811
|
+
</header>
|
|
812
|
+
<div class="pf-c-page__sidebar">
|
|
813
|
+
<div class="pf-c-page__sidebar-body">
|
|
814
|
+
<nav class="pf-c-nav" id="dashboard-demo-primary-nav" aria-label="Global">
|
|
815
|
+
<ul class="pf-c-nav__list">
|
|
816
|
+
<li class="pf-c-nav__item">
|
|
817
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
818
|
+
</li>
|
|
819
|
+
<li class="pf-c-nav__item">
|
|
820
|
+
<a
|
|
821
|
+
href="#"
|
|
822
|
+
class="pf-c-nav__link pf-m-current"
|
|
823
|
+
aria-current="page"
|
|
824
|
+
>Policy</a>
|
|
825
|
+
</li>
|
|
826
|
+
<li class="pf-c-nav__item">
|
|
827
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
828
|
+
</li>
|
|
829
|
+
<li class="pf-c-nav__item">
|
|
830
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
831
|
+
</li>
|
|
832
|
+
<li class="pf-c-nav__item">
|
|
833
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
834
|
+
</li>
|
|
835
|
+
</ul>
|
|
836
|
+
</nav>
|
|
837
|
+
</div>
|
|
838
|
+
</div>
|
|
839
|
+
<main class="pf-c-page__main" tabindex="-1" id="main-content-dashboard-demo">
|
|
840
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
841
|
+
<div class="pf-c-page__main-body">
|
|
842
|
+
<div class="pf-c-content">
|
|
843
|
+
<h1>Dashboard</h1>
|
|
844
|
+
</div>
|
|
845
|
+
</div>
|
|
846
|
+
</section>
|
|
847
|
+
|
|
848
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
849
|
+
<div class="pf-c-page__main-body">
|
|
850
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
851
|
+
<div class="pf-c-card pf-m-expanded">
|
|
852
|
+
<div class="pf-c-card__header">
|
|
853
|
+
<div class="pf-c-card__header-toggle">
|
|
854
|
+
<button
|
|
855
|
+
class="pf-c-button pf-m-plain"
|
|
856
|
+
type="button"
|
|
857
|
+
aria-label="Details"
|
|
858
|
+
id="dashboard-demo-expandable-status-card-1-toggle"
|
|
859
|
+
aria-labelledby="dashboard-demo-expandable-status-card-1-title dashboard-demo-expandable-status-card-1-toggle"
|
|
860
|
+
>
|
|
861
|
+
<span class="pf-c-card__header-toggle-icon">
|
|
862
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
863
|
+
</span>
|
|
864
|
+
</button>
|
|
865
|
+
</div>
|
|
866
|
+
<div class="pf-c-card__actions">
|
|
867
|
+
<div class="pf-c-dropdown">
|
|
868
|
+
<button
|
|
869
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
870
|
+
id="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
|
|
871
|
+
aria-expanded="false"
|
|
872
|
+
type="button"
|
|
873
|
+
aria-label="Actions"
|
|
874
|
+
>
|
|
875
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
876
|
+
</button>
|
|
877
|
+
<ul
|
|
878
|
+
class="pf-c-dropdown__menu"
|
|
879
|
+
aria-labelledby="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
|
|
880
|
+
hidden
|
|
881
|
+
>
|
|
882
|
+
<li>
|
|
883
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
884
|
+
</li>
|
|
885
|
+
<li>
|
|
886
|
+
<button
|
|
887
|
+
class="pf-c-dropdown__menu-item"
|
|
888
|
+
type="button"
|
|
889
|
+
>Action</button>
|
|
890
|
+
</li>
|
|
891
|
+
<li>
|
|
892
|
+
<a
|
|
893
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
894
|
+
href="#"
|
|
895
|
+
aria-disabled="true"
|
|
896
|
+
tabindex="-1"
|
|
897
|
+
>Disabled link</a>
|
|
898
|
+
</li>
|
|
899
|
+
<li>
|
|
900
|
+
<button
|
|
901
|
+
class="pf-c-dropdown__menu-item"
|
|
902
|
+
type="button"
|
|
903
|
+
disabled
|
|
904
|
+
>Disabled action</button>
|
|
905
|
+
</li>
|
|
906
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
907
|
+
<li>
|
|
908
|
+
<a
|
|
909
|
+
class="pf-c-dropdown__menu-item"
|
|
910
|
+
href="#"
|
|
911
|
+
>Separated link</a>
|
|
912
|
+
</li>
|
|
913
|
+
</ul>
|
|
914
|
+
</div>
|
|
915
|
+
</div>
|
|
916
|
+
<div
|
|
917
|
+
class="pf-c-card__title"
|
|
918
|
+
id="dashboard-demo-expandable-status-card-1-title"
|
|
919
|
+
>
|
|
920
|
+
<h2 class="pf-c-title pf-m-xl">Improve recommended pathways</h2>
|
|
921
|
+
</div>
|
|
922
|
+
</div>
|
|
923
|
+
<div class="pf-c-card__expandable-content">
|
|
924
|
+
<div class="pf-l-flex pf-m-column pf-m-row-on-md">
|
|
925
|
+
<div
|
|
926
|
+
class="pf-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
|
|
927
|
+
>
|
|
928
|
+
<div class="pf-c-card pf-m-plain">
|
|
929
|
+
<div class="pf-c-card__body">
|
|
930
|
+
<div
|
|
931
|
+
class="pf-l-flex pf-m-column pf-u-h-100 pf-m-space-items-sm"
|
|
932
|
+
>
|
|
933
|
+
<div
|
|
934
|
+
class="pf-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"
|
|
935
|
+
>
|
|
936
|
+
<div class="pf-c-label-group">
|
|
937
|
+
<div class="pf-c-label-group__main">
|
|
938
|
+
<ul
|
|
939
|
+
class="pf-c-label-group__list"
|
|
940
|
+
role="list"
|
|
941
|
+
aria-label="Group of labels"
|
|
942
|
+
>
|
|
943
|
+
<li class="pf-c-label-group__list-item">
|
|
944
|
+
<span
|
|
945
|
+
class="pf-c-label pf-m-blue pf-m-outline"
|
|
946
|
+
>
|
|
947
|
+
<span class="pf-c-label__content">
|
|
948
|
+
<span class="pf-c-label__icon">
|
|
949
|
+
<i
|
|
950
|
+
class="pf-icon pf-icon-port"
|
|
951
|
+
aria-hidden="true"
|
|
952
|
+
></i>
|
|
953
|
+
</span>
|
|
954
|
+
Performance
|
|
955
|
+
</span>
|
|
956
|
+
</span>
|
|
957
|
+
</li>
|
|
958
|
+
</ul>
|
|
959
|
+
</div>
|
|
960
|
+
</div>
|
|
961
|
+
<a href="#">378 systems</a>
|
|
962
|
+
</div>
|
|
963
|
+
<div class="pf-l-flex__item pf-m-spacer-md">
|
|
964
|
+
<p>Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance</p>
|
|
965
|
+
</div>
|
|
966
|
+
<div
|
|
967
|
+
class="pf-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"
|
|
968
|
+
style="row-gap: var(--pf-global--spacer--md);"
|
|
969
|
+
>
|
|
970
|
+
<div
|
|
971
|
+
class="pf-l-flex__item"
|
|
972
|
+
style="margin-bottom: -.25em"
|
|
973
|
+
>
|
|
974
|
+
<span class="pf-c-label pf-m-red">
|
|
975
|
+
<span class="pf-c-label__content">Incident</span>
|
|
976
|
+
</span>
|
|
977
|
+
</div>
|
|
978
|
+
<div
|
|
979
|
+
class="pf-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
|
|
980
|
+
style="row-gap: var(--pf-global--spacer--md);"
|
|
981
|
+
>
|
|
982
|
+
<i
|
|
983
|
+
class="pf-icon pf-icon-on pf-u-color-400"
|
|
984
|
+
style="line-height: 1"
|
|
985
|
+
aria-hidden="true"
|
|
986
|
+
></i>
|
|
987
|
+
<p class="pf-u-color-200">
|
|
988
|
+
System reboot
|
|
989
|
+
<b class="pf-u-color-100">is not</b> required
|
|
990
|
+
</p>
|
|
991
|
+
</div>
|
|
992
|
+
</div>
|
|
993
|
+
</div>
|
|
994
|
+
</div>
|
|
995
|
+
<div class="pf-c-card__footer">
|
|
996
|
+
<a class="pf-c-button pf-m-link pf-m-inline" href="#">
|
|
997
|
+
View pathway
|
|
998
|
+
<span class="pf-c-button__icon pf-m-end">
|
|
999
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
1000
|
+
</span>
|
|
1001
|
+
</a>
|
|
1002
|
+
</div>
|
|
1003
|
+
</div>
|
|
1004
|
+
</div>
|
|
1005
|
+
<hr class="pf-c-divider pf-m-vertical pf-m-inset-3xl" />
|
|
1006
|
+
<div
|
|
1007
|
+
class="pf-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
|
|
1008
|
+
>
|
|
1009
|
+
<div class="pf-c-card pf-m-plain">
|
|
1010
|
+
<div class="pf-c-card__body">
|
|
1011
|
+
<div
|
|
1012
|
+
class="pf-l-flex pf-m-column pf-u-h-100 pf-m-space-items-sm"
|
|
1013
|
+
>
|
|
1014
|
+
<div
|
|
1015
|
+
class="pf-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"
|
|
1016
|
+
>
|
|
1017
|
+
<div class="pf-c-label-group">
|
|
1018
|
+
<div class="pf-c-label-group__main">
|
|
1019
|
+
<ul
|
|
1020
|
+
class="pf-c-label-group__list"
|
|
1021
|
+
role="list"
|
|
1022
|
+
aria-label="Group of labels"
|
|
1023
|
+
>
|
|
1024
|
+
<li class="pf-c-label-group__list-item">
|
|
1025
|
+
<span
|
|
1026
|
+
class="pf-c-label pf-m-blue pf-m-outline"
|
|
1027
|
+
>
|
|
1028
|
+
<span class="pf-c-label__content">
|
|
1029
|
+
<span class="pf-c-label__icon">
|
|
1030
|
+
<i
|
|
1031
|
+
class="fas fa-cube"
|
|
1032
|
+
aria-hidden="true"
|
|
1033
|
+
></i>
|
|
1034
|
+
</span>
|
|
1035
|
+
Stablility
|
|
1036
|
+
</span>
|
|
1037
|
+
</span>
|
|
1038
|
+
</li>
|
|
1039
|
+
<li class="pf-c-label-group__list-item">
|
|
1040
|
+
<button class="pf-c-label pf-m-overflow">
|
|
1041
|
+
<span class="pf-c-label__content">1 more</span>
|
|
1042
|
+
</button>
|
|
1043
|
+
</li>
|
|
1044
|
+
</ul>
|
|
1045
|
+
</div>
|
|
1046
|
+
</div>
|
|
1047
|
+
<a href="#">211 systems</a>
|
|
1048
|
+
</div>
|
|
1049
|
+
<div class="pf-l-flex__item pf-m-spacer-md">
|
|
1050
|
+
<p>Adjust your networking configuration to get ahead of network perfomance degradations and packet losses</p>
|
|
1051
|
+
</div>
|
|
1052
|
+
<div
|
|
1053
|
+
class="pf-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"
|
|
1054
|
+
style="row-gap: var(--pf-global--spacer--md);"
|
|
1055
|
+
>
|
|
1056
|
+
<div
|
|
1057
|
+
class="pf-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
|
|
1058
|
+
style="row-gap: var(--pf-global--spacer--md);"
|
|
1059
|
+
>
|
|
1060
|
+
<i
|
|
1061
|
+
class="pf-icon pf-icon-on pf-u-danger-color-100"
|
|
1062
|
+
style="line-height: 1"
|
|
1063
|
+
aria-hidden="true"
|
|
1064
|
+
></i>
|
|
1065
|
+
<p class="pf-u-color-200">
|
|
1066
|
+
System reboot
|
|
1067
|
+
<b class="pf-u-color-100">is</b> required
|
|
1068
|
+
</p>
|
|
1069
|
+
</div>
|
|
1070
|
+
</div>
|
|
1071
|
+
</div>
|
|
1072
|
+
</div>
|
|
1073
|
+
<div class="pf-c-card__footer">
|
|
1074
|
+
<a class="pf-c-button pf-m-link pf-m-inline" href="#">
|
|
1075
|
+
View pathway
|
|
1076
|
+
<span class="pf-c-button__icon pf-m-end">
|
|
1077
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
1078
|
+
</span>
|
|
1079
|
+
</a>
|
|
1080
|
+
</div>
|
|
1081
|
+
</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
<hr class="pf-c-divider pf-m-vertical pf-m-inset-3xl" />
|
|
1084
|
+
<div
|
|
1085
|
+
class="pf-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
|
|
1086
|
+
>
|
|
1087
|
+
<div class="pf-c-card pf-m-plain">
|
|
1088
|
+
<div class="pf-c-card__body">
|
|
1089
|
+
<div
|
|
1090
|
+
class="pf-l-flex pf-m-column pf-u-h-100 pf-m-space-items-sm"
|
|
1091
|
+
>
|
|
1092
|
+
<div
|
|
1093
|
+
class="pf-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"
|
|
1094
|
+
>
|
|
1095
|
+
<div class="pf-c-label-group">
|
|
1096
|
+
<div class="pf-c-label-group__main">
|
|
1097
|
+
<ul
|
|
1098
|
+
class="pf-c-label-group__list"
|
|
1099
|
+
role="list"
|
|
1100
|
+
aria-label="Group of labels"
|
|
1101
|
+
>
|
|
1102
|
+
<li class="pf-c-label-group__list-item">
|
|
1103
|
+
<span
|
|
1104
|
+
class="pf-c-label pf-m-blue pf-m-outline"
|
|
1105
|
+
>
|
|
1106
|
+
<span class="pf-c-label__content">
|
|
1107
|
+
<span class="pf-c-label__icon">
|
|
1108
|
+
<i
|
|
1109
|
+
class="pf-icon pf-icon-automation"
|
|
1110
|
+
aria-hidden="true"
|
|
1111
|
+
></i>
|
|
1112
|
+
</span>
|
|
1113
|
+
Availability
|
|
1114
|
+
</span>
|
|
1115
|
+
</span>
|
|
1116
|
+
</li>
|
|
1117
|
+
</ul>
|
|
1118
|
+
</div>
|
|
1119
|
+
</div>
|
|
1120
|
+
<a href="#">166 systems</a>
|
|
1121
|
+
</div>
|
|
1122
|
+
<div class="pf-l-flex__item pf-m-spacer-md">
|
|
1123
|
+
<p>Fine tune your Oracle DB configuration to improve database performance and avoid process failure</p>
|
|
1124
|
+
</div>
|
|
1125
|
+
<div
|
|
1126
|
+
class="pf-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"
|
|
1127
|
+
style="row-gap: var(--pf-global--spacer--md);"
|
|
1128
|
+
>
|
|
1129
|
+
<div
|
|
1130
|
+
class="pf-l-flex__item"
|
|
1131
|
+
style="margin-bottom: -.25em"
|
|
1132
|
+
>
|
|
1133
|
+
<span class="pf-c-label pf-m-red">
|
|
1134
|
+
<span class="pf-c-label__content">Incident</span>
|
|
1135
|
+
</span>
|
|
1136
|
+
</div>
|
|
1137
|
+
<div
|
|
1138
|
+
class="pf-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
|
|
1139
|
+
style="row-gap: var(--pf-global--spacer--md);"
|
|
1140
|
+
>
|
|
1141
|
+
<i
|
|
1142
|
+
class="pf-icon pf-icon-on pf-u-color-400"
|
|
1143
|
+
style="line-height: 1"
|
|
1144
|
+
aria-hidden="true"
|
|
1145
|
+
></i>
|
|
1146
|
+
<p class="pf-u-color-200">
|
|
1147
|
+
System reboot
|
|
1148
|
+
<b class="pf-u-color-100">is not</b> required
|
|
1149
|
+
</p>
|
|
1150
|
+
</div>
|
|
1151
|
+
</div>
|
|
1152
|
+
</div>
|
|
1153
|
+
</div>
|
|
1154
|
+
<div class="pf-c-card__footer">
|
|
1155
|
+
<a class="pf-c-button pf-m-link pf-m-inline" href="#">
|
|
1156
|
+
View pathway
|
|
1157
|
+
<span class="pf-c-button__icon pf-m-end">
|
|
1158
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
1159
|
+
</span>
|
|
1160
|
+
</a>
|
|
1161
|
+
</div>
|
|
1162
|
+
</div>
|
|
1163
|
+
</div>
|
|
1164
|
+
</div>
|
|
1165
|
+
</div>
|
|
1166
|
+
</div>
|
|
1167
|
+
<div
|
|
1168
|
+
class="pf-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl"
|
|
1169
|
+
style="--pf-l-grid--item--Order-on-lg:3"
|
|
1170
|
+
>
|
|
1171
|
+
<div class="pf-l-flex pf-m-column">
|
|
1172
|
+
<div
|
|
1173
|
+
class="pf-c-card pf-m-expanded"
|
|
1174
|
+
id="dashboard-demo-status-card-1"
|
|
1175
|
+
>
|
|
1176
|
+
<div class="pf-c-card__header">
|
|
1177
|
+
<h2 class="pf-c-title pf-m-xl">Status</h2>
|
|
1178
|
+
</div>
|
|
1179
|
+
<div class="pf-c-card__body">
|
|
1180
|
+
<div
|
|
1181
|
+
class="pf-l-gallery pf-m-gutter"
|
|
1182
|
+
style="--pf-l-gallery--GridTemplateColumns--min: 100%; --pf-l-gallery--GridTemplateColumns--min-on-sm: 180px; --pf-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-l-gallery--GridTemplateColumns--max-on-sm: 1fr;"
|
|
1183
|
+
>
|
|
1184
|
+
<div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
1185
|
+
<div class="pf-l-flex__item">
|
|
1186
|
+
<i
|
|
1187
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1188
|
+
aria-hidden="true"
|
|
1189
|
+
></i>
|
|
1190
|
+
</div>
|
|
1191
|
+
<div class="pf-l-flex__item">
|
|
1192
|
+
<span>Cluster</span>
|
|
1193
|
+
</div>
|
|
1194
|
+
</div>
|
|
1195
|
+
<div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
1196
|
+
<div class="pf-l-flex__item">
|
|
1197
|
+
<i
|
|
1198
|
+
class="fas fa-exclamation-circle pf-u-danger-color-100"
|
|
1199
|
+
aria-hidden="true"
|
|
1200
|
+
></i>
|
|
1201
|
+
</div>
|
|
1202
|
+
<div class="pf-l-flex__item pf-u-text-nowrap">
|
|
1203
|
+
<span class="popover-parent">
|
|
1204
|
+
<a href="#">Control Panel</a>
|
|
1205
|
+
</span>
|
|
1206
|
+
</div>
|
|
1207
|
+
</div>
|
|
1208
|
+
<div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
1209
|
+
<div class="pf-l-flex__item pf-u-text-nowrap">
|
|
1210
|
+
<i
|
|
1211
|
+
class="fas fa-exclamation-circle pf-u-danger-color-100"
|
|
1212
|
+
aria-hidden="true"
|
|
1213
|
+
></i>
|
|
1214
|
+
</div>
|
|
1215
|
+
<div class="pf-l-flex pf-m-column pf-m-space-items-none">
|
|
1216
|
+
<div class="pf-l-flex__item">
|
|
1217
|
+
<a href="#">Operators</a>
|
|
1218
|
+
</div>
|
|
1219
|
+
<div class="pf-l-flex__item">
|
|
1220
|
+
<span class="pf-u-color-200">1 degraged</span>
|
|
1221
|
+
</div>
|
|
1222
|
+
</div>
|
|
1223
|
+
</div>
|
|
1224
|
+
<div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
1225
|
+
<div class="pf-l-flex__item">
|
|
1226
|
+
<i
|
|
1227
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1228
|
+
aria-hidden="true"
|
|
1229
|
+
></i>
|
|
1230
|
+
</div>
|
|
1231
|
+
<div class="pf-l-flex pf-m-column pf-m-space-items-none">
|
|
1232
|
+
<div class="pf-l-flex__item">
|
|
1233
|
+
<a href="#">Image Vulnerabilities</a>
|
|
1234
|
+
</div>
|
|
1235
|
+
<div class="pf-l-flex__item">
|
|
1236
|
+
<span class="pf-u-color-200">0 vulnerabilities</span>
|
|
1237
|
+
</div>
|
|
1238
|
+
</div>
|
|
1239
|
+
</div>
|
|
1240
|
+
<div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
1241
|
+
<div class="pf-l-flex__item">
|
|
1242
|
+
<i
|
|
1243
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1244
|
+
aria-hidden="true"
|
|
1245
|
+
></i>
|
|
1246
|
+
</div>
|
|
1247
|
+
<div class="pf-l-flex pf-m-column pf-m-space-items-none">
|
|
1248
|
+
<div class="pf-l-flex__item">
|
|
1249
|
+
<a href="#">Storage</a>
|
|
1250
|
+
</div>
|
|
1251
|
+
<div class="pf-l-flex__item">
|
|
1252
|
+
<span class="pf-u-color-200">Degraded</span>
|
|
1253
|
+
</div>
|
|
1254
|
+
</div>
|
|
1255
|
+
</div>
|
|
1256
|
+
<div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
1257
|
+
<div class="pf-l-flex__item">
|
|
1258
|
+
<i
|
|
1259
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1260
|
+
aria-hidden="true"
|
|
1261
|
+
></i>
|
|
1262
|
+
</div>
|
|
1263
|
+
<div class="pf-l-flex pf-m-column pf-m-space-items-none">
|
|
1264
|
+
<div class="pf-l-flex__item">
|
|
1265
|
+
<a href="#">Hardware</a>
|
|
1266
|
+
</div>
|
|
1267
|
+
</div>
|
|
1268
|
+
</div>
|
|
1269
|
+
<div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
1270
|
+
<div class="pf-l-flex__item">
|
|
1271
|
+
<i
|
|
1272
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1273
|
+
aria-hidden="true"
|
|
1274
|
+
></i>
|
|
1275
|
+
</div>
|
|
1276
|
+
<div class="pf-l-flex pf-m-column pf-m-space-items-none">
|
|
1277
|
+
<div class="pf-l-flex__item">
|
|
1278
|
+
<a href="#">Insights</a>
|
|
1279
|
+
</div>
|
|
1280
|
+
</div>
|
|
1281
|
+
</div>
|
|
1282
|
+
</div>
|
|
1283
|
+
</div>
|
|
1284
|
+
<hr class="pf-c-divider" />
|
|
1285
|
+
<div class="pf-c-notification-drawer">
|
|
1286
|
+
<div class="pf-c-notification-drawer__body">
|
|
1287
|
+
<section class="pf-c-notification-drawer__group">
|
|
1288
|
+
<button
|
|
1289
|
+
class="pf-c-notification-drawer__group-toggle"
|
|
1290
|
+
aria-expanded="false"
|
|
1291
|
+
>
|
|
1292
|
+
<div
|
|
1293
|
+
class="pf-c-notification-drawer__group-toggle-title"
|
|
1294
|
+
>
|
|
1295
|
+
<div class="pf-l-flex">
|
|
1296
|
+
<div
|
|
1297
|
+
class="pf-l-flex__item pf-m-spacer-md"
|
|
1298
|
+
>Notifications</div>
|
|
1299
|
+
<div class="pf-c-label-group">
|
|
1300
|
+
<div class="pf-c-label-group__main">
|
|
1301
|
+
<ul
|
|
1302
|
+
class="pf-c-label-group__list"
|
|
1303
|
+
role="list"
|
|
1304
|
+
aria-label="Group of labels"
|
|
1305
|
+
>
|
|
1306
|
+
<li class="pf-c-label-group__list-item">
|
|
1307
|
+
<span class="pf-c-label pf-m-red">
|
|
1308
|
+
<span class="pf-c-label__content">
|
|
1309
|
+
<span class="pf-c-label__icon">
|
|
1310
|
+
<i
|
|
1311
|
+
class="fas fa-fw fa-exclamation-circle"
|
|
1312
|
+
aria-hidden="true"
|
|
1313
|
+
></i>
|
|
1314
|
+
</span>
|
|
1315
|
+
1
|
|
1316
|
+
</span>
|
|
1317
|
+
</span>
|
|
1318
|
+
</li>
|
|
1319
|
+
<li class="pf-c-label-group__list-item">
|
|
1320
|
+
<span
|
|
1321
|
+
class="pf-c-label pf-m-orange pf-m-default"
|
|
1322
|
+
>
|
|
1323
|
+
<span class="pf-c-label__content">
|
|
1324
|
+
<span class="pf-c-label__icon">
|
|
1325
|
+
<i
|
|
1326
|
+
class="fas fa-fw fa-exclamation-triangle"
|
|
1327
|
+
aria-hidden="true"
|
|
1328
|
+
></i>
|
|
1329
|
+
</span>
|
|
1330
|
+
3
|
|
1331
|
+
</span>
|
|
1332
|
+
</span>
|
|
1333
|
+
</li>
|
|
1334
|
+
<li class="pf-c-label-group__list-item">
|
|
1335
|
+
<span class="pf-c-label pf-m-green">
|
|
1336
|
+
<span class="pf-c-label__content">
|
|
1337
|
+
<span class="pf-c-label__icon">
|
|
1338
|
+
<i
|
|
1339
|
+
class="fas fa-fw fa-check-circle"
|
|
1340
|
+
aria-hidden="true"
|
|
1341
|
+
></i>
|
|
1342
|
+
</span>
|
|
1343
|
+
3
|
|
1344
|
+
</span>
|
|
1345
|
+
</span>
|
|
1346
|
+
</li>
|
|
1347
|
+
<li class="pf-c-label-group__list-item">
|
|
1348
|
+
<span class="pf-c-label pf-m-blue">
|
|
1349
|
+
<span class="pf-c-label__content">
|
|
1350
|
+
<span class="pf-c-label__icon">
|
|
1351
|
+
<i
|
|
1352
|
+
class="fas fa-fw fa-info-circle"
|
|
1353
|
+
aria-hidden="true"
|
|
1354
|
+
></i>
|
|
1355
|
+
</span>
|
|
1356
|
+
3
|
|
1357
|
+
</span>
|
|
1358
|
+
</span>
|
|
1359
|
+
</li>
|
|
1360
|
+
<li class="pf-c-label-group__list-item">
|
|
1361
|
+
<span class="pf-c-label pf-m-cyan">
|
|
1362
|
+
<span class="pf-c-label__content">
|
|
1363
|
+
<span class="pf-c-label__icon">
|
|
1364
|
+
<i
|
|
1365
|
+
class="fas fa-fw fa-bell"
|
|
1366
|
+
aria-hidden="true"
|
|
1367
|
+
></i>
|
|
1368
|
+
</span>
|
|
1369
|
+
3
|
|
1370
|
+
</span>
|
|
1371
|
+
</span>
|
|
1372
|
+
</li>
|
|
1373
|
+
</ul>
|
|
1374
|
+
</div>
|
|
1375
|
+
</div>
|
|
1376
|
+
</div>
|
|
1377
|
+
</div>
|
|
1378
|
+
<span
|
|
1379
|
+
class="pf-c-notification-drawer__group-toggle-icon"
|
|
1380
|
+
>
|
|
1381
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1382
|
+
</span>
|
|
1383
|
+
</button>
|
|
1384
|
+
<ul class="pf-c-notification-drawer__list" hidden>
|
|
1385
|
+
<li
|
|
1386
|
+
class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
|
|
1387
|
+
tabindex="0"
|
|
1388
|
+
>
|
|
1389
|
+
<div
|
|
1390
|
+
class="pf-c-notification-drawer__list-item-header"
|
|
1391
|
+
>
|
|
1392
|
+
<span
|
|
1393
|
+
class="pf-c-notification-drawer__list-item-header-icon"
|
|
1394
|
+
>
|
|
1395
|
+
<i
|
|
1396
|
+
class="fas fa-exclamation-circle"
|
|
1397
|
+
aria-hidden="true"
|
|
1398
|
+
></i>
|
|
1399
|
+
</span>
|
|
1400
|
+
<h2
|
|
1401
|
+
class="pf-c-notification-drawer__list-item-header-title pf-u-danger-color-200"
|
|
1402
|
+
>
|
|
1403
|
+
<span
|
|
1404
|
+
class="pf-screen-reader"
|
|
1405
|
+
>Danger notification:</span>
|
|
1406
|
+
Critical alert regarding control plane
|
|
1407
|
+
</h2>
|
|
1408
|
+
</div>
|
|
1409
|
+
<div
|
|
1410
|
+
class="pf-c-notification-drawer__list-item-description"
|
|
1411
|
+
>This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>
|
|
1412
|
+
</li>
|
|
1413
|
+
<li
|
|
1414
|
+
class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-warning"
|
|
1415
|
+
tabindex="0"
|
|
1416
|
+
>
|
|
1417
|
+
<div
|
|
1418
|
+
class="pf-c-notification-drawer__list-item-header"
|
|
1419
|
+
>
|
|
1420
|
+
<span
|
|
1421
|
+
class="pf-c-notification-drawer__list-item-header-icon"
|
|
1422
|
+
>
|
|
1423
|
+
<i
|
|
1424
|
+
class="fas fa-exclamation-triangle"
|
|
1425
|
+
aria-hidden="true"
|
|
1426
|
+
></i>
|
|
1427
|
+
</span>
|
|
1428
|
+
<h2
|
|
1429
|
+
class="pf-c-notification-drawer__list-item-header-title pf-u-warning-color-200"
|
|
1430
|
+
>
|
|
1431
|
+
<span
|
|
1432
|
+
class="pf-screen-reader"
|
|
1433
|
+
>Warning notification:</span>
|
|
1434
|
+
Warning alert
|
|
1435
|
+
</h2>
|
|
1436
|
+
</div>
|
|
1437
|
+
<div
|
|
1438
|
+
class="pf-c-notification-drawer__list-item-description"
|
|
1439
|
+
>This is a warning notification description.</div>
|
|
1440
|
+
</li>
|
|
1441
|
+
</ul>
|
|
1442
|
+
</section>
|
|
1443
|
+
</div>
|
|
1444
|
+
</div>
|
|
1445
|
+
</div>
|
|
1446
|
+
<!-- inventory -->
|
|
1447
|
+
<div class="pf-c-card" id="dashboard-demo-line-chart-card-1">
|
|
1448
|
+
<div class="pf-c-card__header">
|
|
1449
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
1450
|
+
<div class="pf-c-select">
|
|
1451
|
+
<span
|
|
1452
|
+
id="dashboard-demo-line-chart-card-1-select-dropdown-label"
|
|
1453
|
+
hidden
|
|
1454
|
+
>Choose one</span>
|
|
1455
|
+
|
|
1456
|
+
<button
|
|
1457
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
1458
|
+
type="button"
|
|
1459
|
+
id="dashboard-demo-line-chart-card-1-select-dropdown-toggle"
|
|
1460
|
+
aria-haspopup="true"
|
|
1461
|
+
aria-expanded="false"
|
|
1462
|
+
aria-labelledby="dashboard-demo-line-chart-card-1-select-dropdown-label dashboard-demo-line-chart-card-1-select-dropdown-toggle"
|
|
1463
|
+
>
|
|
1464
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
1465
|
+
<span class="pf-c-select__toggle-text">24 hours</span>
|
|
1466
|
+
</div>
|
|
1467
|
+
<span class="pf-c-select__toggle-arrow">
|
|
1468
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1469
|
+
</span>
|
|
1470
|
+
</button>
|
|
1471
|
+
|
|
1472
|
+
<ul
|
|
1473
|
+
class="pf-c-select__menu pf-m-align-right"
|
|
1474
|
+
role="listbox"
|
|
1475
|
+
aria-labelledby="dashboard-demo-line-chart-card-1-select-dropdown-label"
|
|
1476
|
+
hidden
|
|
1477
|
+
>
|
|
1478
|
+
<li role="presentation">
|
|
1479
|
+
<button
|
|
1480
|
+
class="pf-c-select__menu-item"
|
|
1481
|
+
role="option"
|
|
1482
|
+
>Running</button>
|
|
1483
|
+
</li>
|
|
1484
|
+
<li role="presentation">
|
|
1485
|
+
<button
|
|
1486
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
1487
|
+
role="option"
|
|
1488
|
+
aria-selected="true"
|
|
1489
|
+
>
|
|
1490
|
+
Stopped
|
|
1491
|
+
<span class="pf-c-select__menu-item-icon">
|
|
1492
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1493
|
+
</span>
|
|
1494
|
+
</button>
|
|
1495
|
+
</li>
|
|
1496
|
+
<li role="presentation">
|
|
1497
|
+
<button
|
|
1498
|
+
class="pf-c-select__menu-item"
|
|
1499
|
+
role="option"
|
|
1500
|
+
>Down</button>
|
|
1501
|
+
</li>
|
|
1502
|
+
<li role="presentation">
|
|
1503
|
+
<button
|
|
1504
|
+
class="pf-c-select__menu-item"
|
|
1505
|
+
role="option"
|
|
1506
|
+
>Degraded</button>
|
|
1507
|
+
</li>
|
|
1508
|
+
<li role="presentation">
|
|
1509
|
+
<button
|
|
1510
|
+
class="pf-c-select__menu-item"
|
|
1511
|
+
role="option"
|
|
1512
|
+
>Needs maintenance</button>
|
|
1513
|
+
</li>
|
|
1514
|
+
</ul>
|
|
1515
|
+
</div>
|
|
1516
|
+
</div>
|
|
1517
|
+
<div
|
|
1518
|
+
class="pf-c-card__title"
|
|
1519
|
+
id="dashboard-demo-line-chart-card-1-title"
|
|
1520
|
+
>
|
|
1521
|
+
<h2 class="pf-c-title pf-m-xl">Cluster utilizations</h2>
|
|
1522
|
+
</div>
|
|
1523
|
+
</div>
|
|
1524
|
+
<div
|
|
1525
|
+
class="pf-c-card pf-m-plain pf-m-expanded"
|
|
1526
|
+
id="dashboard-demo-line-chart-card-1-group-1"
|
|
1527
|
+
>
|
|
1528
|
+
<div class="pf-c-card__header pf-m-toggle-right">
|
|
1529
|
+
<div class="pf-c-card__header-toggle">
|
|
1530
|
+
<button
|
|
1531
|
+
class="pf-c-button pf-m-plain"
|
|
1532
|
+
type="button"
|
|
1533
|
+
aria-label="Details"
|
|
1534
|
+
id="dashboard-demo-line-chart-card-1-group-1-toggle"
|
|
1535
|
+
aria-labelledby="dashboard-demo-line-chart-card-1-group-1-title dashboard-demo-line-chart-card-1-group-1-toggle"
|
|
1536
|
+
>
|
|
1537
|
+
<span class="pf-c-card__header-toggle-icon">
|
|
1538
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1539
|
+
</span>
|
|
1540
|
+
</button>
|
|
1541
|
+
</div>
|
|
1542
|
+
<div
|
|
1543
|
+
class="pf-c-card__title"
|
|
1544
|
+
id="dashboard-demo-line-chart-card-1-group-1-title"
|
|
1545
|
+
>CPU 1</div>
|
|
1546
|
+
</div>
|
|
1547
|
+
<div class="pf-c-card__expandable-content">
|
|
1548
|
+
<div class="pf-c-card__body">
|
|
1549
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
1550
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
1551
|
+
<div class="pf-l-grid__item pf-m-4-col-on-md">
|
|
1552
|
+
<div
|
|
1553
|
+
class="pf-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-u-h-100-on-md"
|
|
1554
|
+
>
|
|
1555
|
+
<div class="pf-l-flex__item">
|
|
1556
|
+
<b>Temperature</b>
|
|
1557
|
+
</div>
|
|
1558
|
+
<hr
|
|
1559
|
+
class="pf-c-divider pf-m-vertical pf-m-inset-sm pf-u-hidden-on-md"
|
|
1560
|
+
/>
|
|
1561
|
+
<div class="pf-l-flex__item">
|
|
1562
|
+
<span>64C</span>
|
|
1563
|
+
</div>
|
|
1564
|
+
</div>
|
|
1565
|
+
</div>
|
|
1566
|
+
<div class="pf-l-grid__item pf-m-8-col-on-md">
|
|
1567
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
1568
|
+
<div class="pf-l-grid__item pf-m-2-col">
|
|
1569
|
+
<div
|
|
1570
|
+
class="pf-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
|
|
1571
|
+
>
|
|
1572
|
+
<div class="pf-l-flex__item">100C</div>
|
|
1573
|
+
<div class="pf-l-flex__item">50C</div>
|
|
1574
|
+
<div class="pf-l-flex__item">0C</div>
|
|
1575
|
+
</div>
|
|
1576
|
+
</div>
|
|
1577
|
+
<div class="pf-l-grid__item pf-m-10-col">
|
|
1578
|
+
<div class="ws-chart">
|
|
1579
|
+
<img
|
|
1580
|
+
src="/assets/images/img_line-chart-2.png"
|
|
1581
|
+
alt="Line chart"
|
|
1582
|
+
/>
|
|
1583
|
+
</div>
|
|
1584
|
+
</div>
|
|
1585
|
+
</div>
|
|
1586
|
+
</div>
|
|
1587
|
+
</div>
|
|
1588
|
+
<hr class="pf-c-divider pf-u-hidden-on-md" />
|
|
1589
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
1590
|
+
<div class="pf-l-grid__item pf-m-4-col-on-md">
|
|
1591
|
+
<div
|
|
1592
|
+
class="pf-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-u-h-100-on-md"
|
|
1593
|
+
>
|
|
1594
|
+
<div class="pf-l-flex__item">
|
|
1595
|
+
<b>Speed</b>
|
|
1596
|
+
</div>
|
|
1597
|
+
<hr
|
|
1598
|
+
class="pf-c-divider pf-m-vertical pf-m-inset-sm pf-u-hidden-on-md"
|
|
1599
|
+
/>
|
|
1600
|
+
<div class="pf-l-flex__item">
|
|
1601
|
+
<span>2.3Ghz</span>
|
|
1602
|
+
</div>
|
|
1603
|
+
</div>
|
|
1604
|
+
</div>
|
|
1605
|
+
<div class="pf-l-grid__item pf-m-8-col-on-md">
|
|
1606
|
+
<div class="pf-l-grid pf-m-gutter">
|
|
1607
|
+
<div class="pf-l-grid__item pf-m-2-col">
|
|
1608
|
+
<div
|
|
1609
|
+
class="pf-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
|
|
1610
|
+
>
|
|
1611
|
+
<div class="pf-l-flex__item">36hz</div>
|
|
1612
|
+
<div class="pf-l-flex__item">1.5Ghz</div>
|
|
1613
|
+
<div class="pf-l-flex__item">0Ghz</div>
|
|
1614
|
+
</div>
|
|
1615
|
+
</div>
|
|
1616
|
+
<div class="pf-l-grid__item pf-m-10-col">
|
|
1617
|
+
<div class="ws-chart">
|
|
1618
|
+
<img
|
|
1619
|
+
src="/assets/images/img_line-chart-2.png"
|
|
1620
|
+
alt="Line chart"
|
|
1621
|
+
/>
|
|
1622
|
+
</div>
|
|
1623
|
+
</div>
|
|
1624
|
+
</div>
|
|
1625
|
+
</div>
|
|
1626
|
+
</div>
|
|
1627
|
+
</div>
|
|
1628
|
+
</div>
|
|
1629
|
+
</div>
|
|
1630
|
+
</div>
|
|
1631
|
+
<div
|
|
1632
|
+
class="pf-c-card pf-m-plain"
|
|
1633
|
+
id="dashboard-demo-line-chart-card-1-group-2"
|
|
1634
|
+
>
|
|
1635
|
+
<div class="pf-c-card__header pf-m-toggle-right">
|
|
1636
|
+
<div class="pf-c-card__header-toggle">
|
|
1637
|
+
<button
|
|
1638
|
+
class="pf-c-button pf-m-plain"
|
|
1639
|
+
type="button"
|
|
1640
|
+
aria-label="Details"
|
|
1641
|
+
id="dashboard-demo-line-chart-card-1-group-2-toggle"
|
|
1642
|
+
aria-labelledby="dashboard-demo-line-chart-card-1-group-2-title dashboard-demo-line-chart-card-1-group-2-toggle"
|
|
1643
|
+
>
|
|
1644
|
+
<span class="pf-c-card__header-toggle-icon">
|
|
1645
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1646
|
+
</span>
|
|
1647
|
+
</button>
|
|
1648
|
+
</div>
|
|
1649
|
+
<div
|
|
1650
|
+
class="pf-c-card__title"
|
|
1651
|
+
id="dashboard-demo-line-chart-card-1-group-2-title"
|
|
1652
|
+
>Pod count</div>
|
|
1653
|
+
</div>
|
|
1654
|
+
</div>
|
|
1655
|
+
<div
|
|
1656
|
+
class="pf-c-card pf-m-plain"
|
|
1657
|
+
id="dashboard-demo-line-chart-card-1-group-3"
|
|
1658
|
+
>
|
|
1659
|
+
<div class="pf-c-card__header pf-m-toggle-right">
|
|
1660
|
+
<div class="pf-c-card__header-toggle">
|
|
1661
|
+
<button
|
|
1662
|
+
class="pf-c-button pf-m-plain"
|
|
1663
|
+
type="button"
|
|
1664
|
+
aria-label="Details"
|
|
1665
|
+
id="dashboard-demo-line-chart-card-1-group-3-toggle"
|
|
1666
|
+
aria-labelledby="dashboard-demo-line-chart-card-1-group-3-title dashboard-demo-line-chart-card-1-group-3-toggle"
|
|
1667
|
+
>
|
|
1668
|
+
<span class="pf-c-card__header-toggle-icon">
|
|
1669
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1670
|
+
</span>
|
|
1671
|
+
</button>
|
|
1672
|
+
</div>
|
|
1673
|
+
<div
|
|
1674
|
+
class="pf-c-card__title"
|
|
1675
|
+
id="dashboard-demo-line-chart-card-1-group-3-title"
|
|
1676
|
+
>Memory</div>
|
|
1677
|
+
</div>
|
|
1678
|
+
</div>
|
|
1679
|
+
</div>
|
|
1680
|
+
<div class="pf-c-card">
|
|
1681
|
+
<div class="pf-c-card__title">
|
|
1682
|
+
<h2 class="pf-c-title pf-m-xl">Recomendations by severity</h2>
|
|
1683
|
+
</div>
|
|
1684
|
+
<div class="pf-c-card__body">
|
|
1685
|
+
<div class="pf-l-flex pf-m-inline-flex">
|
|
1686
|
+
<div class="pf-l-grid pf-m-gutter pf-m-all-3-col">
|
|
1687
|
+
<div
|
|
1688
|
+
class="pf-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
|
|
1689
|
+
>
|
|
1690
|
+
<span
|
|
1691
|
+
class="pf-u-font-size-2xl pf-u-primary-color-100"
|
|
1692
|
+
>2</span>
|
|
1693
|
+
<span class="pf-u-font-color-200">Critical</span>
|
|
1694
|
+
</div>
|
|
1695
|
+
<div
|
|
1696
|
+
class="pf-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
|
|
1697
|
+
>
|
|
1698
|
+
<span
|
|
1699
|
+
class="pf-u-font-size-2xl pf-u-primary-color-100"
|
|
1700
|
+
>5</span>
|
|
1701
|
+
<span class="pf-u-font-color-200">Important</span>
|
|
1702
|
+
</div>
|
|
1703
|
+
<div
|
|
1704
|
+
class="pf-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
|
|
1705
|
+
>
|
|
1706
|
+
<span
|
|
1707
|
+
class="pf-u-font-size-2xl pf-u-primary-color-100"
|
|
1708
|
+
>7</span>
|
|
1709
|
+
<span class="pf-u-font-color-200">Moderate</span>
|
|
1710
|
+
</div>
|
|
1711
|
+
<div
|
|
1712
|
+
class="pf-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
|
|
1713
|
+
>
|
|
1714
|
+
<span
|
|
1715
|
+
class="pf-u-font-size-2xl pf-u-primary-color-100"
|
|
1716
|
+
>12</span>
|
|
1717
|
+
<span class="pf-u-font-color-200">Low</span>
|
|
1718
|
+
</div>
|
|
1719
|
+
</div>
|
|
1720
|
+
</div>
|
|
1721
|
+
</div>
|
|
1722
|
+
<div class="pf-c-card__title">
|
|
1723
|
+
<h2 class="pf-c-title pf-m-xl">Recomendations by category</h2>
|
|
1724
|
+
</div>
|
|
1725
|
+
<div class="pf-c-card__body">
|
|
1726
|
+
<img
|
|
1727
|
+
src="/assets/images/img_pie-chart-with-legend.png"
|
|
1728
|
+
alt="Pie chart"
|
|
1729
|
+
width="450"
|
|
1730
|
+
/>
|
|
1731
|
+
</div>
|
|
1732
|
+
<div class="pf-c-card__footer">
|
|
1733
|
+
<a href="#">View more</a>
|
|
1734
|
+
</div>
|
|
1735
|
+
</div>
|
|
1736
|
+
</div>
|
|
1737
|
+
</div>
|
|
1738
|
+
<div
|
|
1739
|
+
class="pf-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl"
|
|
1740
|
+
style="--pf-l-grid--item--Order-on-lg:2"
|
|
1741
|
+
>
|
|
1742
|
+
<div class="pf-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg">
|
|
1743
|
+
<div class="pf-l-flex__item pf-m-flex-1">
|
|
1744
|
+
<div class="pf-c-card" id="dashboard-demo-details-card-1">
|
|
1745
|
+
<div class="pf-c-card__title">
|
|
1746
|
+
<h2 class="pf-c-title pf-m-xl">Details</h2>
|
|
1747
|
+
</div>
|
|
1748
|
+
<div class="pf-c-card__body">
|
|
1749
|
+
<dl class="pf-c-description-list">
|
|
1750
|
+
<div class="pf-c-description-list__group">
|
|
1751
|
+
<dt
|
|
1752
|
+
class="pf-c-description-list__term"
|
|
1753
|
+
>Cluster API Address</dt>
|
|
1754
|
+
<dd class="pf-c-description-list__description">
|
|
1755
|
+
<div class="pf-c-description-list__text">
|
|
1756
|
+
<a href="#">https://api1.devcluster.openshift.com</a>
|
|
1757
|
+
</div>
|
|
1758
|
+
</dd>
|
|
1759
|
+
</div>
|
|
1760
|
+
<div class="pf-c-description-list__group">
|
|
1761
|
+
<dt class="pf-c-description-list__term">Cluster ID</dt>
|
|
1762
|
+
<dd class="pf-c-description-list__description">
|
|
1763
|
+
<div
|
|
1764
|
+
class="pf-c-description-list__text"
|
|
1765
|
+
>63b97ac1-b850-41d9-8820-239becde9e86</div>
|
|
1766
|
+
</dd>
|
|
1767
|
+
</div>
|
|
1768
|
+
<div class="pf-c-description-list__group">
|
|
1769
|
+
<dt class="pf-c-description-list__term">Provider</dt>
|
|
1770
|
+
<dd class="pf-c-description-list__description">
|
|
1771
|
+
<div class="pf-c-description-list__text">AWS</div>
|
|
1772
|
+
</dd>
|
|
1773
|
+
</div>
|
|
1774
|
+
<div class="pf-c-description-list__group">
|
|
1775
|
+
<dt
|
|
1776
|
+
class="pf-c-description-list__term"
|
|
1777
|
+
>OpenShift Version</dt>
|
|
1778
|
+
<dd class="pf-c-description-list__description">
|
|
1779
|
+
<div
|
|
1780
|
+
class="pf-c-description-list__text"
|
|
1781
|
+
>4.5.0.ci-2020-06-16-015028</div>
|
|
1782
|
+
</dd>
|
|
1783
|
+
</div>
|
|
1784
|
+
<div class="pf-c-description-list__group">
|
|
1785
|
+
<dt class="pf-c-description-list__term">Update Channel</dt>
|
|
1786
|
+
<dd class="pf-c-description-list__description">
|
|
1787
|
+
<div class="pf-c-description-list__text">stable-4.5</div>
|
|
1788
|
+
</dd>
|
|
1789
|
+
</div>
|
|
1790
|
+
</dl>
|
|
1791
|
+
</div>
|
|
1792
|
+
<hr class="pf-c-divider" />
|
|
1793
|
+
<div class="pf-c-card__footer">
|
|
1794
|
+
<a href="#">View Settings</a>
|
|
1795
|
+
</div>
|
|
1796
|
+
</div>
|
|
1797
|
+
</div>
|
|
1798
|
+
<div class="pf-l-flex__item pf-m-flex-1">
|
|
1799
|
+
<div class="pf-c-card" id="dashboard-demo-data-list-card-1">
|
|
1800
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
1801
|
+
<div
|
|
1802
|
+
class="pf-c-card__title"
|
|
1803
|
+
id="dashboard-demo-data-list-card-1-title1"
|
|
1804
|
+
>
|
|
1805
|
+
<h2 class="pf-c-title pf-m-lg">Inventory</h2>
|
|
1806
|
+
</div>
|
|
1807
|
+
</div>
|
|
1808
|
+
<ul
|
|
1809
|
+
class="pf-c-data-list pf-m-grid-none"
|
|
1810
|
+
role="list"
|
|
1811
|
+
aria-label="Simple data list example"
|
|
1812
|
+
id="dashboard-demo-data-list-card-1-data-list"
|
|
1813
|
+
>
|
|
1814
|
+
<li
|
|
1815
|
+
class="pf-c-data-list__item"
|
|
1816
|
+
aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-1"
|
|
1817
|
+
>
|
|
1818
|
+
<div class="pf-c-data-list__item-row">
|
|
1819
|
+
<div class="pf-c-data-list__item-content">
|
|
1820
|
+
<div
|
|
1821
|
+
class="pf-c-data-list__cell"
|
|
1822
|
+
id="dashboard-demo-data-list-card-1-data-list-item-1"
|
|
1823
|
+
>3 Nodes</div>
|
|
1824
|
+
<div
|
|
1825
|
+
class="pf-c-data-list__cell pf-m-no-fill pf-m-align-right"
|
|
1826
|
+
>
|
|
1827
|
+
<a href="#">
|
|
1828
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
1829
|
+
<span>3</span>
|
|
1830
|
+
<i
|
|
1831
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1832
|
+
aria-hidden="true"
|
|
1833
|
+
></i>
|
|
1834
|
+
</div>
|
|
1835
|
+
</a>
|
|
1836
|
+
</div>
|
|
1837
|
+
</div>
|
|
1838
|
+
</div>
|
|
1839
|
+
</li>
|
|
1840
|
+
<li
|
|
1841
|
+
class="pf-c-data-list__item"
|
|
1842
|
+
aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-2"
|
|
1843
|
+
>
|
|
1844
|
+
<div class="pf-c-data-list__item-row">
|
|
1845
|
+
<div class="pf-c-data-list__item-content">
|
|
1846
|
+
<div
|
|
1847
|
+
class="pf-c-data-list__cell"
|
|
1848
|
+
id="dashboard-demo-data-list-card-1-data-list-item-2"
|
|
1849
|
+
>8 Disks</div>
|
|
1850
|
+
<div
|
|
1851
|
+
class="pf-c-data-list__cell pf-m-no-fill pf-m-align-right"
|
|
1852
|
+
>
|
|
1853
|
+
<a href="#">
|
|
1854
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
1855
|
+
<span>8</span>
|
|
1856
|
+
<i
|
|
1857
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1858
|
+
aria-hidden="true"
|
|
1859
|
+
></i>
|
|
1860
|
+
</div>
|
|
1861
|
+
</a>
|
|
1862
|
+
</div>
|
|
1863
|
+
</div>
|
|
1864
|
+
</div>
|
|
1865
|
+
</li>
|
|
1866
|
+
<li
|
|
1867
|
+
class="pf-c-data-list__item"
|
|
1868
|
+
aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-3"
|
|
1869
|
+
>
|
|
1870
|
+
<div class="pf-c-data-list__item-row">
|
|
1871
|
+
<div class="pf-c-data-list__item-content">
|
|
1872
|
+
<div
|
|
1873
|
+
class="pf-c-data-list__cell"
|
|
1874
|
+
id="dashboard-demo-data-list-card-1-data-list-item-3"
|
|
1875
|
+
>20 Pods</div>
|
|
1876
|
+
<div
|
|
1877
|
+
class="pf-c-data-list__cell pf-m-no-fill pf-m-align-right"
|
|
1878
|
+
>
|
|
1879
|
+
<a href="#">
|
|
1880
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
1881
|
+
<span>20</span>
|
|
1882
|
+
<i
|
|
1883
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1884
|
+
aria-hidden="true"
|
|
1885
|
+
></i>
|
|
1886
|
+
</div>
|
|
1887
|
+
</a>
|
|
1888
|
+
</div>
|
|
1889
|
+
</div>
|
|
1890
|
+
</div>
|
|
1891
|
+
</li>
|
|
1892
|
+
<li
|
|
1893
|
+
class="pf-c-data-list__item"
|
|
1894
|
+
aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-4"
|
|
1895
|
+
>
|
|
1896
|
+
<div class="pf-c-data-list__item-row">
|
|
1897
|
+
<div class="pf-c-data-list__item-content">
|
|
1898
|
+
<div
|
|
1899
|
+
class="pf-c-data-list__cell"
|
|
1900
|
+
id="dashboard-demo-data-list-card-1-data-list-item-4"
|
|
1901
|
+
>12 PVs</div>
|
|
1902
|
+
<div
|
|
1903
|
+
class="pf-c-data-list__cell pf-m-no-fill pf-m-align-right"
|
|
1904
|
+
>
|
|
1905
|
+
<a href="#">
|
|
1906
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
1907
|
+
<span>12</span>
|
|
1908
|
+
<i
|
|
1909
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1910
|
+
aria-hidden="true"
|
|
1911
|
+
></i>
|
|
1912
|
+
</div>
|
|
1913
|
+
</a>
|
|
1914
|
+
</div>
|
|
1915
|
+
</div>
|
|
1916
|
+
</div>
|
|
1917
|
+
</li>
|
|
1918
|
+
<li
|
|
1919
|
+
class="pf-c-data-list__item"
|
|
1920
|
+
aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-5"
|
|
1921
|
+
>
|
|
1922
|
+
<div class="pf-c-data-list__item-row">
|
|
1923
|
+
<div class="pf-c-data-list__item-content">
|
|
1924
|
+
<div
|
|
1925
|
+
class="pf-c-data-list__cell"
|
|
1926
|
+
id="dashboard-demo-data-list-card-1-data-list-item-5"
|
|
1927
|
+
>18 PVCs</div>
|
|
1928
|
+
<div
|
|
1929
|
+
class="pf-c-data-list__cell pf-m-no-fill pf-m-align-right"
|
|
1930
|
+
>
|
|
1931
|
+
<a href="#">
|
|
1932
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
1933
|
+
<span>18</span>
|
|
1934
|
+
<i
|
|
1935
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
1936
|
+
aria-hidden="true"
|
|
1937
|
+
></i>
|
|
1938
|
+
</div>
|
|
1939
|
+
</a>
|
|
1940
|
+
</div>
|
|
1941
|
+
</div>
|
|
1942
|
+
</div>
|
|
1943
|
+
</li>
|
|
1944
|
+
</ul>
|
|
1945
|
+
</div>
|
|
1946
|
+
</div>
|
|
1947
|
+
</div>
|
|
1948
|
+
</div>
|
|
1949
|
+
<div
|
|
1950
|
+
class="pf-l-grid__item pf-m-4-col-on-lg pf-m-3-col-on-2xl"
|
|
1951
|
+
style="--pf-l-grid--item--Order-on-lg:4"
|
|
1952
|
+
>
|
|
1953
|
+
<div class="pf-l-flex pf-m-column">
|
|
1954
|
+
<div class="pf-c-card" id="dashboard-demo-events-card-1">
|
|
1955
|
+
<div class="pf-c-card__header">
|
|
1956
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
1957
|
+
<div class="pf-c-select">
|
|
1958
|
+
<span
|
|
1959
|
+
id="dashboard-demo-events-card-1-select-dropdown-label"
|
|
1960
|
+
hidden
|
|
1961
|
+
>Choose one</span>
|
|
1962
|
+
|
|
1963
|
+
<button
|
|
1964
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
1965
|
+
type="button"
|
|
1966
|
+
id="dashboard-demo-events-card-1-select-dropdown-toggle"
|
|
1967
|
+
aria-haspopup="true"
|
|
1968
|
+
aria-expanded="false"
|
|
1969
|
+
aria-labelledby="dashboard-demo-events-card-1-select-dropdown-label dashboard-demo-events-card-1-select-dropdown-toggle"
|
|
1970
|
+
>
|
|
1971
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
1972
|
+
<span class="pf-c-select__toggle-text">Status</span>
|
|
1973
|
+
</div>
|
|
1974
|
+
<span class="pf-c-select__toggle-arrow">
|
|
1975
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1976
|
+
</span>
|
|
1977
|
+
</button>
|
|
1978
|
+
|
|
1979
|
+
<ul
|
|
1980
|
+
class="pf-c-select__menu pf-m-align-right"
|
|
1981
|
+
role="listbox"
|
|
1982
|
+
aria-labelledby="dashboard-demo-events-card-1-select-dropdown-label"
|
|
1983
|
+
hidden
|
|
1984
|
+
>
|
|
1985
|
+
<li role="presentation">
|
|
1986
|
+
<button
|
|
1987
|
+
class="pf-c-select__menu-item"
|
|
1988
|
+
role="option"
|
|
1989
|
+
>Running</button>
|
|
1990
|
+
</li>
|
|
1991
|
+
<li role="presentation">
|
|
1992
|
+
<button
|
|
1993
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
1994
|
+
role="option"
|
|
1995
|
+
aria-selected="true"
|
|
1996
|
+
>
|
|
1997
|
+
Stopped
|
|
1998
|
+
<span class="pf-c-select__menu-item-icon">
|
|
1999
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2000
|
+
</span>
|
|
2001
|
+
</button>
|
|
2002
|
+
</li>
|
|
2003
|
+
<li role="presentation">
|
|
2004
|
+
<button
|
|
2005
|
+
class="pf-c-select__menu-item"
|
|
2006
|
+
role="option"
|
|
2007
|
+
>Down</button>
|
|
2008
|
+
</li>
|
|
2009
|
+
<li role="presentation">
|
|
2010
|
+
<button
|
|
2011
|
+
class="pf-c-select__menu-item"
|
|
2012
|
+
role="option"
|
|
2013
|
+
>Degraded</button>
|
|
2014
|
+
</li>
|
|
2015
|
+
<li role="presentation">
|
|
2016
|
+
<button
|
|
2017
|
+
class="pf-c-select__menu-item"
|
|
2018
|
+
role="option"
|
|
2019
|
+
>Needs maintenance</button>
|
|
2020
|
+
</li>
|
|
2021
|
+
</ul>
|
|
2022
|
+
</div>
|
|
2023
|
+
</div>
|
|
2024
|
+
<div
|
|
2025
|
+
class="pf-c-card__title"
|
|
2026
|
+
id="dashboard-demo-events-card-1-title1"
|
|
2027
|
+
style="padding-top: 3px;"
|
|
2028
|
+
>
|
|
2029
|
+
<h2 class="pf-c-title pf-m-xl">Events</h2>
|
|
2030
|
+
</div>
|
|
2031
|
+
</div>
|
|
2032
|
+
<div class="pf-c-card__body">
|
|
2033
|
+
<dl class="pf-c-description-list pf-m-compact">
|
|
2034
|
+
<div class="pf-c-description-list__group">
|
|
2035
|
+
<dt class="pf-c-description-list__term">
|
|
2036
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
2037
|
+
<div class="pf-l-flex__item pf-m-spacer-sm">
|
|
2038
|
+
<i
|
|
2039
|
+
class="fas fa-exclamation-circle pf-u-danger-color-100"
|
|
2040
|
+
aria-hidden="true"
|
|
2041
|
+
></i>
|
|
2042
|
+
</div>
|
|
2043
|
+
<div class="pf-l-flex__item">Readiness probe failed</div>
|
|
2044
|
+
</div>
|
|
2045
|
+
</dt>
|
|
2046
|
+
<dd class="pf-c-description-list__description">
|
|
2047
|
+
<div
|
|
2048
|
+
class="pf-c-description-list__text"
|
|
2049
|
+
>Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
|
|
2050
|
+
</dd>
|
|
2051
|
+
<dd class="pf-c-description-list__description">
|
|
2052
|
+
<div class="pf-c-description-list__text">
|
|
2053
|
+
<time
|
|
2054
|
+
class="pf-u-color-200 pf-u-font-size-sm"
|
|
2055
|
+
>Jun 17, 11:02 am</time>
|
|
2056
|
+
</div>
|
|
2057
|
+
</dd>
|
|
2058
|
+
</div>
|
|
2059
|
+
<div class="pf-c-description-list__group">
|
|
2060
|
+
<dt class="pf-c-description-list__term">
|
|
2061
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
2062
|
+
<div class="pf-l-flex__item pf-m-spacer-sm">
|
|
2063
|
+
<i
|
|
2064
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
2065
|
+
aria-hidden="true"
|
|
2066
|
+
></i>
|
|
2067
|
+
</div>
|
|
2068
|
+
<div class="pf-l-flex__item">Successful assignment</div>
|
|
2069
|
+
</div>
|
|
2070
|
+
</dt>
|
|
2071
|
+
<dd class="pf-c-description-list__description">
|
|
2072
|
+
<div
|
|
2073
|
+
class="pf-c-description-list__text"
|
|
2074
|
+
>Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
|
|
2075
|
+
</dd>
|
|
2076
|
+
<dd class="pf-c-description-list__description">
|
|
2077
|
+
<div class="pf-c-description-list__text">
|
|
2078
|
+
<time
|
|
2079
|
+
class="pf-u-color-200 pf-u-font-size-sm"
|
|
2080
|
+
>Jun 17, 11:13 am</time>
|
|
2081
|
+
</div>
|
|
2082
|
+
</dd>
|
|
2083
|
+
</div>
|
|
2084
|
+
<div class="pf-c-description-list__group">
|
|
2085
|
+
<dt class="pf-c-description-list__term">
|
|
2086
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
2087
|
+
<div class="pf-l-flex__item pf-m-spacer-sm">
|
|
2088
|
+
<span
|
|
2089
|
+
class="pf-c-spinner pf-m-md"
|
|
2090
|
+
role="progressbar"
|
|
2091
|
+
aria-label="Loading"
|
|
2092
|
+
>
|
|
2093
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
2094
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
2095
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
2096
|
+
</span>
|
|
2097
|
+
</div>
|
|
2098
|
+
<div class="pf-l-flex__item">Pulling image</div>
|
|
2099
|
+
</div>
|
|
2100
|
+
</dt>
|
|
2101
|
+
<dd class="pf-c-description-list__description">
|
|
2102
|
+
<div
|
|
2103
|
+
class="pf-c-description-list__text"
|
|
2104
|
+
>Pulling image "openshift/hello-openshift"</div>
|
|
2105
|
+
</dd>
|
|
2106
|
+
<dd class="pf-c-description-list__description">
|
|
2107
|
+
<div class="pf-c-description-list__text">
|
|
2108
|
+
<time
|
|
2109
|
+
class="pf-u-color-200 pf-u-font-size-sm"
|
|
2110
|
+
>Jun 17, 10:59 am</time>
|
|
2111
|
+
</div>
|
|
2112
|
+
</dd>
|
|
2113
|
+
</div>
|
|
2114
|
+
<div class="pf-c-description-list__group">
|
|
2115
|
+
<dt class="pf-c-description-list__term">
|
|
2116
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
2117
|
+
<div class="pf-l-flex__item pf-m-spacer-sm">
|
|
2118
|
+
<i
|
|
2119
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
2120
|
+
aria-hidden="true"
|
|
2121
|
+
></i>
|
|
2122
|
+
</div>
|
|
2123
|
+
<div class="pf-l-flex__item">Created container</div>
|
|
2124
|
+
</div>
|
|
2125
|
+
</dt>
|
|
2126
|
+
<dd class="pf-c-description-list__description">
|
|
2127
|
+
<div
|
|
2128
|
+
class="pf-c-description-list__text"
|
|
2129
|
+
>Created container hello-openshift</div>
|
|
2130
|
+
</dd>
|
|
2131
|
+
<dd class="pf-c-description-list__description">
|
|
2132
|
+
<div class="pf-c-description-list__text">
|
|
2133
|
+
<time
|
|
2134
|
+
class="pf-u-color-200 pf-u-font-size-sm"
|
|
2135
|
+
>Jun 17, 10:45 am</time>
|
|
2136
|
+
</div>
|
|
2137
|
+
</dd>
|
|
2138
|
+
</div>
|
|
2139
|
+
|
|
2140
|
+
<div class="pf-c-description-list__group">
|
|
2141
|
+
<dt class="pf-c-description-list__term">
|
|
2142
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
2143
|
+
<div class="pf-l-flex__item pf-m-spacer-sm">
|
|
2144
|
+
<i
|
|
2145
|
+
class="fas fa-exclamation-triangle pf-u-warning-color-100"
|
|
2146
|
+
aria-hidden="true"
|
|
2147
|
+
></i>
|
|
2148
|
+
</div>
|
|
2149
|
+
<div
|
|
2150
|
+
class="pf-l-flex__item"
|
|
2151
|
+
>CPU utilitization over 50%</div>
|
|
2152
|
+
</div>
|
|
2153
|
+
</dt>
|
|
2154
|
+
<dd class="pf-c-description-list__description">
|
|
2155
|
+
<div
|
|
2156
|
+
class="pf-c-description-list__text"
|
|
2157
|
+
>Migrated 2 pods to other hosts</div>
|
|
2158
|
+
</dd>
|
|
2159
|
+
<dd class="pf-c-description-list__description">
|
|
2160
|
+
<div class="pf-c-description-list__text">
|
|
2161
|
+
<time
|
|
2162
|
+
class="pf-u-color-200 pf-u-font-size-sm"
|
|
2163
|
+
>Jun 17, 10:33 am</time>
|
|
2164
|
+
</div>
|
|
2165
|
+
</dd>
|
|
2166
|
+
</div>
|
|
2167
|
+
|
|
2168
|
+
<div class="pf-c-description-list__group">
|
|
2169
|
+
<dt class="pf-c-description-list__term">
|
|
2170
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
2171
|
+
<div class="pf-l-flex__item pf-m-spacer-sm">
|
|
2172
|
+
<i
|
|
2173
|
+
class="fas fa-exclamation-circle pf-u-danger-color-100"
|
|
2174
|
+
aria-hidden="true"
|
|
2175
|
+
></i>
|
|
2176
|
+
</div>
|
|
2177
|
+
<div class="pf-l-flex__item">Rook-osd-10-328949</div>
|
|
2178
|
+
</div>
|
|
2179
|
+
</dt>
|
|
2180
|
+
<dd class="pf-c-description-list__description">
|
|
2181
|
+
<div
|
|
2182
|
+
class="pf-c-description-list__text"
|
|
2183
|
+
>Rebuild initiated as Disk 5 failed</div>
|
|
2184
|
+
</dd>
|
|
2185
|
+
<dd class="pf-c-description-list__description">
|
|
2186
|
+
<div class="pf-c-description-list__text">
|
|
2187
|
+
<time
|
|
2188
|
+
class="pf-u-color-200 pf-u-font-size-sm"
|
|
2189
|
+
>Jun 17, 10:33 am</time>
|
|
2190
|
+
</div>
|
|
2191
|
+
</dd>
|
|
2192
|
+
</div>
|
|
2193
|
+
|
|
2194
|
+
<div class="pf-c-description-list__group">
|
|
2195
|
+
<dt class="pf-c-description-list__term">
|
|
2196
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
2197
|
+
<div class="pf-l-flex__item pf-m-spacer-sm">
|
|
2198
|
+
<i
|
|
2199
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
2200
|
+
aria-hidden="true"
|
|
2201
|
+
></i>
|
|
2202
|
+
</div>
|
|
2203
|
+
<div class="pf-l-flex__item">Created container</div>
|
|
2204
|
+
</div>
|
|
2205
|
+
</dt>
|
|
2206
|
+
<dd class="pf-c-description-list__description">
|
|
2207
|
+
<div
|
|
2208
|
+
class="pf-c-description-list__text"
|
|
2209
|
+
>Created container hello-openshift-123</div>
|
|
2210
|
+
</dd>
|
|
2211
|
+
<dd class="pf-c-description-list__description">
|
|
2212
|
+
<div class="pf-c-description-list__text">
|
|
2213
|
+
<time
|
|
2214
|
+
class="pf-u-color-200 pf-u-font-size-sm"
|
|
2215
|
+
>Jun 17, 10:31 am</time>
|
|
2216
|
+
</div>
|
|
2217
|
+
</dd>
|
|
2218
|
+
</div>
|
|
2219
|
+
|
|
2220
|
+
<div class="pf-c-description-list__group">
|
|
2221
|
+
<dt class="pf-c-description-list__term">
|
|
2222
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
2223
|
+
<div class="pf-l-flex__item pf-m-spacer-sm">
|
|
2224
|
+
<i
|
|
2225
|
+
class="fas fa-check-circle pf-u-success-color-100"
|
|
2226
|
+
aria-hidden="true"
|
|
2227
|
+
></i>
|
|
2228
|
+
</div>
|
|
2229
|
+
<div class="pf-l-flex__item">Created container</div>
|
|
2230
|
+
</div>
|
|
2231
|
+
</dt>
|
|
2232
|
+
<dd class="pf-c-description-list__description">
|
|
2233
|
+
<div
|
|
2234
|
+
class="pf-c-description-list__text"
|
|
2235
|
+
>Created container hello-openshift-456</div>
|
|
2236
|
+
</dd>
|
|
2237
|
+
<dd class="pf-c-description-list__description">
|
|
2238
|
+
<div class="pf-c-description-list__text">
|
|
2239
|
+
<time
|
|
2240
|
+
class="pf-u-color-200 pf-u-font-size-sm"
|
|
2241
|
+
>Jun 17, 10:30 am</time>
|
|
2242
|
+
</div>
|
|
2243
|
+
</dd>
|
|
2244
|
+
</div>
|
|
2245
|
+
</dl>
|
|
2246
|
+
</div>
|
|
2247
|
+
<hr class="pf-c-divider" />
|
|
2248
|
+
<div class="pf-c-card__footer">
|
|
2249
|
+
<a href="#">View all events</a>
|
|
2250
|
+
</div>
|
|
2251
|
+
</div>
|
|
2252
|
+
</div>
|
|
2253
|
+
</div>
|
|
2254
|
+
</div>
|
|
2255
|
+
</div>
|
|
2256
|
+
</section>
|
|
2257
|
+
</main>
|
|
2258
|
+
</div>
|
|
2259
|
+
|
|
2260
|
+
```
|