@patternfly/patternfly 6.5.0-prerelease.54 → 6.5.0-prerelease.55

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 (84) hide show
  1. package/assets/images/compass--hero-bg.png +0 -0
  2. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  3. package/assets/images/compass--wallpaper-light.jpg +0 -0
  4. package/assets/images/glass-brand-dark.jpg +0 -0
  5. package/assets/images/glass-brand-dark.png +0 -0
  6. package/assets/images/glass-brand-light.jpg +0 -0
  7. package/assets/images/glass-brand-light.png +0 -0
  8. package/base/patternfly-variables.css +4238 -784
  9. package/base/patternfly-variables.scss +23 -21
  10. package/base/tokens/tokens-dark.scss +17 -17
  11. package/base/tokens/tokens-default.scss +18 -16
  12. package/base/tokens/tokens-glass-dark.scss +21 -4
  13. package/base/tokens/tokens-glass.scss +17 -4
  14. package/base/tokens/tokens-local.scss +4 -3
  15. package/base/tokens/tokens-palette.scss +1 -1
  16. package/base/tokens/tokens-redhat-dark.scss +432 -2
  17. package/base/tokens/tokens-redhat-glass-dark.scss +432 -4
  18. package/base/tokens/tokens-redhat-glass.scss +748 -4
  19. package/base/tokens/tokens-redhat-highcontrast-dark.scss +400 -3
  20. package/base/tokens/tokens-redhat-highcontrast.scss +635 -3
  21. package/base/tokens/tokens-redhat.scss +786 -2
  22. package/components/Accordion/accordion.css +10 -0
  23. package/components/Accordion/accordion.scss +11 -0
  24. package/components/Button/button.css +0 -14
  25. package/components/Button/button.scss +1 -16
  26. package/components/Card/card.css +13 -0
  27. package/components/Card/card.scss +20 -0
  28. package/components/Compass/compass.css +6 -6
  29. package/components/Compass/compass.scss +6 -6
  30. package/components/DataList/data-list.css +1 -1
  31. package/components/DataList/data-list.scss +1 -0
  32. package/components/Drawer/drawer.css +11 -6
  33. package/components/Drawer/drawer.scss +24 -11
  34. package/components/Login/login.css +7 -3
  35. package/components/Login/login.scss +7 -3
  36. package/components/Masthead/masthead.css +11 -3
  37. package/components/Masthead/masthead.scss +14 -4
  38. package/components/MenuToggle/menu-toggle.scss +1 -1
  39. package/components/Nav/nav.scss +1 -1
  40. package/components/Page/page.css +115 -8
  41. package/components/Page/page.scss +123 -11
  42. package/components/Panel/panel.css +14 -0
  43. package/components/Panel/panel.scss +18 -0
  44. package/components/Table/table-grid.css +4 -4
  45. package/components/Table/table-grid.scss +4 -4
  46. package/components/Table/table.css +12 -7
  47. package/components/Table/table.scss +13 -9
  48. package/components/_index.css +204 -52
  49. package/docs/components/Accordion/examples/Accordion.md +1 -0
  50. package/docs/components/Card/examples/Card.md +1 -0
  51. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  52. package/docs/components/Page/examples/Page.md +47 -37
  53. package/docs/components/Panel/examples/Panel.md +12 -0
  54. package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
  55. package/docs/demos/Alert/examples/Alert.md +120 -114
  56. package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
  57. package/docs/demos/Banner/examples/Banner.md +80 -76
  58. package/docs/demos/CardView/examples/CardView.md +297 -271
  59. package/docs/demos/Compass/examples/Compass.md +1409 -2732
  60. package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
  61. package/docs/demos/DataList/examples/DataList.md +160 -152
  62. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
  63. package/docs/demos/Drawer/examples/Drawer.md +200 -190
  64. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
  65. package/docs/demos/Masthead/examples/Masthead.md +320 -304
  66. package/docs/demos/Modal/examples/Modal.md +240 -228
  67. package/docs/demos/Nav/examples/Nav.md +2302 -600
  68. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
  69. package/docs/demos/Page/examples/Page.md +606 -568
  70. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
  71. package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
  72. package/docs/demos/Table/examples/Table.md +640 -604
  73. package/docs/demos/Tabs/examples/Tabs.md +240 -228
  74. package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
  75. package/docs/demos/Wizard/examples/Wizard.md +360 -342
  76. package/package.json +1 -1
  77. package/patternfly-base-no-globals.css +4238 -784
  78. package/patternfly-base.css +4238 -784
  79. package/patternfly-no-globals.css +4356 -733
  80. package/patternfly.css +4356 -733
  81. package/patternfly.min.css +1 -1
  82. package/patternfly.min.css.map +1 -1
  83. package/patternfly.scss +27 -0
  84. package/sass-utilities/scss-variables.scss +1 -1
@@ -16,8 +16,8 @@ This demo populates the main Compass section with a card view, which is one of t
16
16
  <div
17
17
  class="pf-v6-c-compass pf-m-animate-smoothly"
18
18
  style="
19
- --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
20
- --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
19
+ --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
20
+ --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
21
21
  "
22
22
  >
23
23
  <div class="pf-v6-c-compass__header pf-m-expanded">
@@ -822,7 +822,7 @@ This demo populates the main Compass section with a card view, which is one of t
822
822
  </div>
823
823
  </div>
824
824
  <div
825
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
825
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-secondary pf-m-compact"
826
826
  id="card-view-basic-example-gallery-card-1"
827
827
  >
828
828
  <div class="pf-v6-c-card__header">
@@ -955,432 +955,108 @@ This demo populates the main Compass section with a card view, which is one of t
955
955
  class="pf-v6-c-card__body"
956
956
  >This documentation page covers the Apache Spark component for the Apache Camel.</div>
957
957
  </div>
958
- <div
959
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
960
- id="card-view-basic-example-gallery-card-4"
961
- >
962
- <div class="pf-v6-c-card__header">
963
- <img
964
- src="/assets/images/camel-avro_200x150.png"
965
- width="60px"
966
- alt="Logo"
967
- />
968
- <div class="pf-v6-c-card__actions">
969
- <button
970
- class="pf-v6-c-menu-toggle pf-m-plain"
971
- type="button"
972
- aria-expanded="false"
973
- aria-label="Menu toggle"
974
- id="card-view-basic-example-gallery-card-4-toggle"
975
- >
976
- <span class="pf-v6-c-menu-toggle__icon">
977
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
978
- </span>
979
- </button>
980
- <div class="pf-v6-c-check pf-m-standalone">
981
- <input
982
- class="pf-v6-c-check__input"
983
- type="checkbox"
984
- id="card-view-basic-example-gallery-card-4-check"
985
- name="card-view-basic-example-gallery-card-4-check"
986
- aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
987
- />
988
- </div>
989
- </div>
990
- </div>
991
- <div class="pf-v6-c-card__title">
992
- <h2
993
- class="pf-v6-c-card__title-text"
994
- id="card-view-basic-example-gallery-card-4-check-label"
995
- >Avro</h2>
996
- <div class="pf-v6-c-content">
997
- <small>Provided by Red Hat</small>
998
- </div>
999
- </div>
1000
- <div
1001
- class="pf-v6-c-card__body"
1002
- >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
1003
- </div>
1004
- <div
1005
- class="pf-v6-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
1006
- id="card-view-basic-example-gallery-card-5"
1007
- >
1008
- <div class="pf-v6-c-card__header">
1009
- <img
1010
- src="/assets/images/FuseConnector_Icons_AzureServices.png"
1011
- width="60px"
1012
- alt="Logo"
958
+ </div>
959
+ </div>
960
+ </div>
961
+ </div>
962
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
963
+ <div class="pf-v6-c-compass__message-bar">
964
+ <div
965
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
966
+ >chatbot message bar</div>
967
+ </div>
968
+ </div>
969
+ </div>
970
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
971
+ <div class="pf-v6-c-compass__panel pf-m-pill">
972
+ <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
973
+ <div class="pf-v6-c-action-list__item">
974
+ <button
975
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
976
+ type="button"
977
+ aria-label="Notifications"
978
+ >
979
+ <span class="pf-v6-c-button__icon">
980
+ <svg
981
+ class="pf-v6-svg"
982
+ viewBox="0 0 32 32"
983
+ fill="currentColor"
984
+ aria-hidden="true"
985
+ role="img"
986
+ width="1em"
987
+ height="1em"
988
+ >
989
+ <path
990
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.885-3.523-8.955-8.159-9.823.405-.445.659-1.03.659-1.677C18.5 2.122 17.379 1 16 1s-2.5 1.122-2.5 2.5c0 .647.254 1.233.659 1.677C9.523 6.045 6 10.115 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1Zm-1 4H5v-2.126A4.006 4.006 0 0 0 8 19v-4c0-4.411 3.589-8 8-8s8 3.589 8 8v4a4.008 4.008 0 0 0 3 3.874V25Z"
1013
991
  />
1014
- <div class="pf-v6-c-card__actions">
1015
- <button
1016
- class="pf-v6-c-menu-toggle pf-m-plain"
1017
- type="button"
1018
- aria-expanded="false"
1019
- aria-label="Menu toggle"
1020
- id="card-view-basic-example-gallery-card-5-toggle"
1021
- >
1022
- <span class="pf-v6-c-menu-toggle__icon">
1023
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1024
- </span>
1025
- </button>
1026
- <div class="pf-v6-c-check pf-m-standalone">
1027
- <input
1028
- class="pf-v6-c-check__input"
1029
- type="checkbox"
1030
- id="card-view-basic-example-gallery-card-5-check"
1031
- name="card-view-basic-example-gallery-card-5-check"
1032
- aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
1033
- />
1034
- </div>
1035
- </div>
1036
- </div>
1037
- <div class="pf-v6-c-card__title">
1038
- <h2
1039
- class="pf-v6-c-card__title-text"
1040
- id="card-view-basic-example-gallery-card-5-check-label"
1041
- >Azure Services</h2>
1042
- <div class="pf-v6-c-content">
1043
- <small>Provided by Red Hat</small>
1044
- </div>
1045
- </div>
1046
- <div
1047
- class="pf-v6-c-card__body"
1048
- >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
1049
- </div>
1050
- <div
1051
- class="pf-v6-c-card pf-m-non-selectable-raised pf-m-compact"
1052
- id="card-view-basic-example-gallery-card-6"
1053
- >
1054
- <div class="pf-v6-c-card__header">
1055
- <img
1056
- src="/assets/images/camel-saxon_200x150.png"
1057
- width="60px"
1058
- alt="Logo"
992
+ </svg>
993
+ </span>
994
+ </button>
995
+ </div>
996
+ <div class="pf-v6-c-action-list__item">
997
+ <button
998
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
999
+ type="button"
1000
+ aria-label="List"
1001
+ >
1002
+ <span class="pf-v6-c-button__icon">
1003
+ <svg
1004
+ class="pf-v6-svg"
1005
+ viewBox="0 0 32 32"
1006
+ fill="currentColor"
1007
+ aria-hidden="true"
1008
+ role="img"
1009
+ width="1em"
1010
+ height="1em"
1011
+ >
1012
+ <path
1013
+ d="M31 16a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h21a1 1 0 0 1 1 1Zm-1 9H9a1 1 0 0 0 0 2h21a1 1 0 0 0 0-2ZM9 7h21a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2ZM2 4.51a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 4.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 14.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 24.51Z"
1059
1014
  />
1060
- <div class="pf-v6-c-card__actions">
1061
- <button
1062
- class="pf-v6-c-menu-toggle pf-m-plain"
1063
- type="button"
1064
- aria-expanded="false"
1065
- aria-label="Menu toggle"
1066
- id="card-view-basic-example-gallery-card-6-toggle"
1067
- >
1068
- <span class="pf-v6-c-menu-toggle__icon">
1069
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1070
- </span>
1071
- </button>
1072
- <div class="pf-v6-c-check pf-m-standalone">
1073
- <input
1074
- class="pf-v6-c-check__input"
1075
- type="checkbox"
1076
- id="card-view-basic-example-gallery-card-6-check"
1077
- name="card-view-basic-example-gallery-card-6-check"
1078
- disabled
1079
- aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
1080
- />
1081
- </div>
1082
- </div>
1083
- </div>
1084
- <div class="pf-v6-c-card__title">
1085
- <h2
1086
- class="pf-v6-c-card__title-text"
1087
- id="card-view-basic-example-gallery-card-6-check-label"
1088
- >Crypto</h2>
1089
- <div class="pf-v6-c-content">
1090
- <small>Provided by Red Hat</small>
1091
- </div>
1092
- </div>
1093
- <div
1094
- class="pf-v6-c-card__body"
1095
- >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
1096
- </div>
1097
- <div
1098
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
1099
- id="card-view-basic-example-gallery-card-7"
1100
- >
1101
- <div class="pf-v6-c-card__header">
1102
- <img
1103
- src="/assets/images/camel-dropbox_200x150.png"
1104
- width="60px"
1105
- alt="Logo"
1015
+ </svg>
1016
+ </span>
1017
+ </button>
1018
+ </div>
1019
+ <div class="pf-v6-c-action-list__item">
1020
+ <button
1021
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1022
+ type="button"
1023
+ aria-label="Zap"
1024
+ >
1025
+ <span class="pf-v6-c-button__icon">
1026
+ <svg
1027
+ class="pf-v6-svg"
1028
+ viewBox="0 0 32 32"
1029
+ fill="currentColor"
1030
+ aria-hidden="true"
1031
+ role="img"
1032
+ width="1em"
1033
+ height="1em"
1034
+ >
1035
+ <path
1036
+ d="M15 31a1 1 0 0 1-1-1V19h-4a.999.999 0 0 1-.916-1.401l7-16A1 1 0 0 1 18 2v11h4a.999.999 0 0 1 .916 1.401l-7 16A.998.998 0 0 1 15 31Zm-3.471-14H14.5c.827 0 1.5.673 1.5 1.5v6.719L20.471 15H17.5c-.827 0-1.5-.673-1.5-1.5V6.781L11.529 17Z"
1106
1037
  />
1107
- <div class="pf-v6-c-card__actions">
1108
- <button
1109
- class="pf-v6-c-menu-toggle pf-m-plain"
1110
- type="button"
1111
- aria-expanded="false"
1112
- aria-label="Menu toggle"
1113
- id="card-view-basic-example-gallery-card-7-toggle"
1114
- >
1115
- <span class="pf-v6-c-menu-toggle__icon">
1116
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1117
- </span>
1118
- </button>
1119
- <div class="pf-v6-c-check pf-m-standalone">
1120
- <input
1121
- class="pf-v6-c-check__input"
1122
- type="checkbox"
1123
- id="card-view-basic-example-gallery-card-7-check"
1124
- name="card-view-basic-example-gallery-card-7-check"
1125
- aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
1126
- />
1127
- </div>
1128
- </div>
1129
- </div>
1130
- <div class="pf-v6-c-card__title">
1131
- <h2
1132
- class="pf-v6-c-card__title-text"
1133
- id="card-view-basic-example-gallery-card-7-check-label"
1134
- >DropBox</h2>
1135
- <div class="pf-v6-c-content">
1136
- <small>Provided by Red Hat</small>
1137
- </div>
1138
- </div>
1139
- <div
1140
- class="pf-v6-c-card__body"
1141
- >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
1142
- </div>
1143
- <div
1144
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
1145
- id="card-view-basic-example-gallery-card-8"
1146
- >
1147
- <div class="pf-v6-c-card__header">
1148
- <img
1149
- src="/assets/images/camel-infinispan_200x150.png"
1150
- width="60px"
1151
- alt="Logo"
1152
- />
1153
- <div class="pf-v6-c-card__actions">
1154
- <button
1155
- class="pf-v6-c-menu-toggle pf-m-plain"
1156
- type="button"
1157
- aria-expanded="false"
1158
- aria-label="Menu toggle"
1159
- id="card-view-basic-example-gallery-card-8-toggle"
1160
- >
1161
- <span class="pf-v6-c-menu-toggle__icon">
1162
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1163
- </span>
1164
- </button>
1165
- <div class="pf-v6-c-check pf-m-standalone">
1166
- <input
1167
- class="pf-v6-c-check__input"
1168
- type="checkbox"
1169
- id="card-view-basic-example-gallery-card-8-check"
1170
- name="card-view-basic-example-gallery-card-8-check"
1171
- aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
1172
- />
1173
- </div>
1174
- </div>
1175
- </div>
1176
- <div class="pf-v6-c-card__title">
1177
- <h2
1178
- class="pf-v6-c-card__title-text"
1179
- id="card-view-basic-example-gallery-card-8-check-label"
1180
- >JBoss Data Grid</h2>
1181
- <div class="pf-v6-c-content">
1182
- <small>Provided by Red Hat</small>
1183
- </div>
1184
- </div>
1185
- <div
1186
- class="pf-v6-c-card__body"
1187
- >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
1188
- </div>
1189
- <div
1190
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
1191
- id="card-view-basic-example-gallery-card-9"
1192
- >
1193
- <div class="pf-v6-c-card__header">
1194
- <img
1195
- src="/assets/images/FuseConnector_Icons_REST.png"
1196
- width="60px"
1197
- alt="Logo"
1198
- />
1199
- <div class="pf-v6-c-card__actions">
1200
- <button
1201
- class="pf-v6-c-menu-toggle pf-m-plain"
1202
- type="button"
1203
- aria-expanded="false"
1204
- aria-label="Menu toggle"
1205
- id="card-view-basic-example-gallery-card-9-toggle"
1206
- >
1207
- <span class="pf-v6-c-menu-toggle__icon">
1208
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1209
- </span>
1210
- </button>
1211
- <div class="pf-v6-c-check pf-m-standalone">
1212
- <input
1213
- class="pf-v6-c-check__input"
1214
- type="checkbox"
1215
- id="card-view-basic-example-gallery-card-9-check"
1216
- name="card-view-basic-example-gallery-card-9-check"
1217
- aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
1218
- />
1219
- </div>
1220
- </div>
1221
- </div>
1222
- <div class="pf-v6-c-card__title">
1223
- <h2
1224
- class="pf-v6-c-card__title-text"
1225
- id="card-view-basic-example-gallery-card-9-check-label"
1226
- >Rest</h2>
1227
- <div class="pf-v6-c-content">
1228
- <small>Provided by Red Hat</small>
1229
- </div>
1230
- </div>
1231
- <div class="pf-v6-c-card__body">
1232
- The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport.
1233
- From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
1234
- </div>
1235
- </div>
1236
- <div
1237
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
1238
- id="card-view-basic-example-gallery-card-10"
1239
- >
1240
- <div class="pf-v6-c-card__header">
1241
- <img
1242
- src="/assets/images/camel-swagger-java_200x150.png"
1243
- width="60px"
1244
- alt="Logo"
1245
- />
1246
- <div class="pf-v6-c-card__actions">
1247
- <button
1248
- class="pf-v6-c-menu-toggle pf-m-plain"
1249
- type="button"
1250
- aria-expanded="false"
1251
- aria-label="Menu toggle"
1252
- id="card-view-basic-example-gallery-card-10-toggle"
1253
- >
1254
- <span class="pf-v6-c-menu-toggle__icon">
1255
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1256
- </span>
1257
- </button>
1258
- <div class="pf-v6-c-check pf-m-standalone">
1259
- <input
1260
- class="pf-v6-c-check__input"
1261
- type="checkbox"
1262
- id="card-view-basic-example-gallery-card-10-check"
1263
- name="card-view-basic-example-gallery-card-10-check"
1264
- aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
1265
- />
1266
- </div>
1267
- </div>
1268
- </div>
1269
- <div class="pf-v6-c-card__title">
1270
- <h2
1271
- class="pf-v6-c-card__title-text"
1272
- id="card-view-basic-example-gallery-card-10-check-label"
1273
- >SWAGGER</h2>
1274
- <div class="pf-v6-c-content">
1275
- <small>Provided by Red Hat</small>
1276
- </div>
1277
- </div>
1278
- <div
1279
- class="pf-v6-c-card__body"
1280
- >Expose REST services and their APIs using Swagger specification.</div>
1281
- </div>
1282
- </div>
1283
- </div>
1284
- </div>
1285
- </div>
1286
- <div class="pf-v6-c-compass__main-footer pf-m-expanded">
1287
- <div class="pf-v6-c-compass__message-bar">
1288
- <div
1289
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
1290
- >chatbot message bar</div>
1291
- </div>
1292
- </div>
1293
- </div>
1294
- <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">
1295
- <div class="pf-v6-c-compass__panel pf-m-pill">
1296
- <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
1297
- <div class="pf-v6-c-action-list__item">
1298
- <button
1299
- class="pf-v6-c-button pf-m-circle pf-m-plain"
1300
- type="button"
1301
- aria-label="Notifications"
1302
- >
1303
- <span class="pf-v6-c-button__icon">
1304
- <svg
1305
- class="pf-v6-svg"
1306
- viewBox="0 0 32 32"
1307
- fill="currentColor"
1308
- aria-hidden="true"
1309
- role="img"
1310
- width="1em"
1311
- height="1em"
1312
- >
1313
- <path
1314
- d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.885-3.523-8.955-8.159-9.823.405-.445.659-1.03.659-1.677C18.5 2.122 17.379 1 16 1s-2.5 1.122-2.5 2.5c0 .647.254 1.233.659 1.677C9.523 6.045 6 10.115 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1Zm-1 4H5v-2.126A4.006 4.006 0 0 0 8 19v-4c0-4.411 3.589-8 8-8s8 3.589 8 8v4a4.008 4.008 0 0 0 3 3.874V25Z"
1315
- />
1316
- </svg>
1317
- </span>
1318
- </button>
1319
- </div>
1320
- <div class="pf-v6-c-action-list__item">
1321
- <button
1322
- class="pf-v6-c-button pf-m-circle pf-m-plain"
1323
- type="button"
1324
- aria-label="List"
1325
- >
1326
- <span class="pf-v6-c-button__icon">
1327
- <svg
1328
- class="pf-v6-svg"
1329
- viewBox="0 0 32 32"
1330
- fill="currentColor"
1331
- aria-hidden="true"
1332
- role="img"
1333
- width="1em"
1334
- height="1em"
1335
- >
1336
- <path
1337
- d="M31 16a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h21a1 1 0 0 1 1 1Zm-1 9H9a1 1 0 0 0 0 2h21a1 1 0 0 0 0-2ZM9 7h21a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2ZM2 4.51a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 4.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 14.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 24.51Z"
1338
- />
1339
- </svg>
1340
- </span>
1341
- </button>
1342
- </div>
1343
- <div class="pf-v6-c-action-list__item">
1344
- <button
1345
- class="pf-v6-c-button pf-m-circle pf-m-plain"
1346
- type="button"
1347
- aria-label="Zap"
1348
- >
1349
- <span class="pf-v6-c-button__icon">
1350
- <svg
1351
- class="pf-v6-svg"
1352
- viewBox="0 0 32 32"
1353
- fill="currentColor"
1354
- aria-hidden="true"
1355
- role="img"
1356
- width="1em"
1357
- height="1em"
1358
- >
1359
- <path
1360
- d="M15 31a1 1 0 0 1-1-1V19h-4a.999.999 0 0 1-.916-1.401l7-16A1 1 0 0 1 18 2v11h4a.999.999 0 0 1 .916 1.401l-7 16A.998.998 0 0 1 15 31Zm-3.471-14H14.5c.827 0 1.5.673 1.5 1.5v6.719L20.471 15H17.5c-.827 0-1.5-.673-1.5-1.5V6.781L11.529 17Z"
1361
- />
1362
- </svg>
1363
- </span>
1364
- </button>
1365
- </div>
1366
- <div class="pf-v6-c-action-list__item">
1367
- <button
1368
- class="pf-v6-c-button pf-m-circle pf-m-plain"
1369
- type="button"
1370
- aria-label="Download"
1371
- >
1372
- <span class="pf-v6-c-button__icon">
1373
- <svg
1374
- class="pf-v6-svg"
1375
- viewBox="0 0 32 32"
1376
- fill="currentColor"
1377
- aria-hidden="true"
1378
- role="img"
1379
- width="1em"
1380
- height="1em"
1381
- >
1382
- <path
1383
- d="M30 29a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1Zm-15.061-4.646c.292.292.676.438 1.061.438s.768-.146 1.061-.438l8.646-8.646a.999.999 0 1 0-1.414-1.414L17 21.587V3a1 1 0 0 0-2 0v18.586l-7.293-7.293a.999.999 0 1 0-1.414 1.414l8.646 8.646Z"
1038
+ </svg>
1039
+ </span>
1040
+ </button>
1041
+ </div>
1042
+ <div class="pf-v6-c-action-list__item">
1043
+ <button
1044
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1045
+ type="button"
1046
+ aria-label="Download"
1047
+ >
1048
+ <span class="pf-v6-c-button__icon">
1049
+ <svg
1050
+ class="pf-v6-svg"
1051
+ viewBox="0 0 32 32"
1052
+ fill="currentColor"
1053
+ aria-hidden="true"
1054
+ role="img"
1055
+ width="1em"
1056
+ height="1em"
1057
+ >
1058
+ <path
1059
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1Zm-15.061-4.646c.292.292.676.438 1.061.438s.768-.146 1.061-.438l8.646-8.646a.999.999 0 1 0-1.414-1.414L17 21.587V3a1 1 0 0 0-2 0v18.586l-7.293-7.293a.999.999 0 1 0-1.414 1.414l8.646 8.646Z"
1384
1060
  />
1385
1061
  </svg>
1386
1062
  </span>
@@ -1427,8 +1103,8 @@ This demo populates the main Compass section with a dashboard, which is often us
1427
1103
  <div
1428
1104
  class="pf-v6-c-compass pf-m-animate-smoothly"
1429
1105
  style="
1430
- --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
1431
- --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
1106
+ --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
1107
+ --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
1432
1108
  "
1433
1109
  >
1434
1110
  <div class="pf-v6-c-compass__header pf-m-expanded">
@@ -2021,366 +1697,351 @@ This demo populates the main Compass section with a dashboard, which is often us
2021
1697
  style="--pf-v6-l-grid--item--Order-on-lg:3"
2022
1698
  >
2023
1699
  <div class="pf-v6-l-flex pf-m-column">
2024
- <div class="pf-v6-c-compass__panel pf-m-no-padding">
2025
- <div
2026
- class="pf-v6-c-card pf-m-plain"
2027
- id="compass-dashboard-grid-status-card-1"
2028
- >
2029
- <div class="pf-v6-c-card__header">
2030
- <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
2031
- </div>
2032
- <div class="pf-v6-c-card__body">
2033
- <div
2034
- class="pf-v6-l-gallery pf-m-gutter"
2035
- 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;"
2036
- >
2037
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2038
- <div class="pf-v6-l-flex__item">
2039
- <span class="pf-v6-c-icon">
2040
- <span class="pf-v6-c-icon__content pf-m-success">
2041
- <svg
2042
- class="pf-v6-svg"
2043
- viewBox="0 0 32 32"
2044
- fill="currentColor"
2045
- aria-hidden="true"
2046
- role="img"
2047
- width="1em"
2048
- height="1em"
2049
- >
2050
- <path
2051
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2052
- />
2053
- </svg>
2054
- </span>
1700
+ <div
1701
+ class="pf-v6-c-card pf-m-glass"
1702
+ id="compass-dashboard-grid-status-card-1"
1703
+ >
1704
+ <div class="pf-v6-c-card__header">
1705
+ <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
1706
+ </div>
1707
+ <div class="pf-v6-c-card__body">
1708
+ <div
1709
+ class="pf-v6-l-gallery pf-m-gutter"
1710
+ 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;"
1711
+ >
1712
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1713
+ <div class="pf-v6-l-flex__item">
1714
+ <span class="pf-v6-c-icon">
1715
+ <span class="pf-v6-c-icon__content pf-m-success">
1716
+ <svg
1717
+ class="pf-v6-svg"
1718
+ viewBox="0 0 32 32"
1719
+ fill="currentColor"
1720
+ aria-hidden="true"
1721
+ role="img"
1722
+ width="1em"
1723
+ height="1em"
1724
+ >
1725
+ <path
1726
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1727
+ />
1728
+ </svg>
1729
+ </span>
1730
+ </span>
1731
+ </div>
1732
+ <div class="pf-v6-l-flex__item">
1733
+ <span>Cluster</span>
1734
+ </div>
1735
+ </div>
1736
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1737
+ <div class="pf-v6-l-flex__item">
1738
+ <span class="pf-v6-c-icon">
1739
+ <span class="pf-v6-c-icon__content pf-m-danger">
1740
+ <svg
1741
+ class="pf-v6-svg"
1742
+ viewBox="0 0 32 32"
1743
+ fill="currentColor"
1744
+ aria-hidden="true"
1745
+ role="img"
1746
+ width="1em"
1747
+ height="1em"
1748
+ >
1749
+ <path
1750
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1751
+ />
1752
+ </svg>
1753
+ </span>
1754
+ </span>
1755
+ </div>
1756
+ <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
1757
+ <span class="popover-parent">
1758
+ <a href="#">Control Panel</a>
1759
+ </span>
1760
+ </div>
1761
+ </div>
1762
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1763
+ <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
1764
+ <span class="pf-v6-c-icon">
1765
+ <span class="pf-v6-c-icon__content pf-m-danger">
1766
+ <svg
1767
+ class="pf-v6-svg"
1768
+ viewBox="0 0 32 32"
1769
+ fill="currentColor"
1770
+ aria-hidden="true"
1771
+ role="img"
1772
+ width="1em"
1773
+ height="1em"
1774
+ >
1775
+ <path
1776
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1777
+ />
1778
+ </svg>
2055
1779
  </span>
1780
+ </span>
1781
+ </div>
1782
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1783
+ <div class="pf-v6-l-flex__item">
1784
+ <a href="#">Operators</a>
2056
1785
  </div>
2057
1786
  <div class="pf-v6-l-flex__item">
2058
- <span>Cluster</span>
1787
+ <span class="pf-v6-u-text-color-subtle">1 degraded</span>
2059
1788
  </div>
2060
1789
  </div>
2061
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1790
+ </div>
1791
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1792
+ <div class="pf-v6-l-flex__item">
1793
+ <span class="pf-v6-c-icon">
1794
+ <span class="pf-v6-c-icon__content pf-m-success">
1795
+ <svg
1796
+ class="pf-v6-svg"
1797
+ viewBox="0 0 32 32"
1798
+ fill="currentColor"
1799
+ aria-hidden="true"
1800
+ role="img"
1801
+ width="1em"
1802
+ height="1em"
1803
+ >
1804
+ <path
1805
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1806
+ />
1807
+ </svg>
1808
+ </span>
1809
+ </span>
1810
+ </div>
1811
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
2062
1812
  <div class="pf-v6-l-flex__item">
2063
- <span class="pf-v6-c-icon">
2064
- <span class="pf-v6-c-icon__content pf-m-danger">
2065
- <svg
2066
- class="pf-v6-svg"
2067
- viewBox="0 0 32 32"
2068
- fill="currentColor"
2069
- aria-hidden="true"
2070
- role="img"
2071
- width="1em"
2072
- height="1em"
2073
- >
2074
- <path
2075
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2076
- />
2077
- </svg>
2078
- </span>
2079
- </span>
1813
+ <a href="#">Image Vulnerabilities</a>
2080
1814
  </div>
2081
- <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
2082
- <span class="popover-parent">
2083
- <a href="#">Control Panel</a>
2084
- </span>
1815
+ <div class="pf-v6-l-flex__item">
1816
+ <span class="pf-v6-u-color-200">0 vulnerabilities</span>
2085
1817
  </div>
2086
1818
  </div>
2087
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2088
- <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
2089
- <span class="pf-v6-c-icon">
2090
- <span class="pf-v6-c-icon__content pf-m-danger">
2091
- <svg
2092
- class="pf-v6-svg"
2093
- viewBox="0 0 32 32"
2094
- fill="currentColor"
2095
- aria-hidden="true"
2096
- role="img"
2097
- width="1em"
2098
- height="1em"
2099
- >
2100
- <path
2101
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2102
- />
2103
- </svg>
2104
- </span>
1819
+ </div>
1820
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1821
+ <div class="pf-v6-l-flex__item">
1822
+ <span class="pf-v6-c-icon">
1823
+ <span class="pf-v6-c-icon__content pf-m-success">
1824
+ <svg
1825
+ class="pf-v6-svg"
1826
+ viewBox="0 0 32 32"
1827
+ fill="currentColor"
1828
+ aria-hidden="true"
1829
+ role="img"
1830
+ width="1em"
1831
+ height="1em"
1832
+ >
1833
+ <path
1834
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1835
+ />
1836
+ </svg>
2105
1837
  </span>
2106
- </div>
2107
- <div
2108
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
2109
- >
2110
- <div class="pf-v6-l-flex__item">
2111
- <a href="#">Operators</a>
2112
- </div>
2113
- <div class="pf-v6-l-flex__item">
2114
- <span class="pf-v6-u-text-color-subtle">1 degraded</span>
2115
- </div>
2116
- </div>
1838
+ </span>
2117
1839
  </div>
2118
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1840
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
2119
1841
  <div class="pf-v6-l-flex__item">
2120
- <span class="pf-v6-c-icon">
2121
- <span class="pf-v6-c-icon__content pf-m-success">
2122
- <svg
2123
- class="pf-v6-svg"
2124
- viewBox="0 0 32 32"
2125
- fill="currentColor"
2126
- aria-hidden="true"
2127
- role="img"
2128
- width="1em"
2129
- height="1em"
2130
- >
2131
- <path
2132
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2133
- />
2134
- </svg>
2135
- </span>
2136
- </span>
1842
+ <a href="#">Storage</a>
2137
1843
  </div>
2138
- <div
2139
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
2140
- >
2141
- <div class="pf-v6-l-flex__item">
2142
- <a href="#">Image Vulnerabilities</a>
2143
- </div>
2144
- <div class="pf-v6-l-flex__item">
2145
- <span class="pf-v6-u-color-200">0 vulnerabilities</span>
2146
- </div>
1844
+ <div class="pf-v6-l-flex__item">
1845
+ <span class="pf-v6-u-color-200">Degraded</span>
2147
1846
  </div>
2148
1847
  </div>
2149
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2150
- <div class="pf-v6-l-flex__item">
2151
- <span class="pf-v6-c-icon">
2152
- <span class="pf-v6-c-icon__content pf-m-success">
2153
- <svg
2154
- class="pf-v6-svg"
2155
- viewBox="0 0 32 32"
2156
- fill="currentColor"
2157
- aria-hidden="true"
2158
- role="img"
2159
- width="1em"
2160
- height="1em"
2161
- >
2162
- <path
2163
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2164
- />
2165
- </svg>
2166
- </span>
1848
+ </div>
1849
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1850
+ <div class="pf-v6-l-flex__item">
1851
+ <span class="pf-v6-c-icon">
1852
+ <span class="pf-v6-c-icon__content pf-m-success">
1853
+ <svg
1854
+ class="pf-v6-svg"
1855
+ viewBox="0 0 32 32"
1856
+ fill="currentColor"
1857
+ aria-hidden="true"
1858
+ role="img"
1859
+ width="1em"
1860
+ height="1em"
1861
+ >
1862
+ <path
1863
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1864
+ />
1865
+ </svg>
2167
1866
  </span>
2168
- </div>
2169
- <div
2170
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
2171
- >
2172
- <div class="pf-v6-l-flex__item">
2173
- <a href="#">Storage</a>
2174
- </div>
2175
- <div class="pf-v6-l-flex__item">
2176
- <span class="pf-v6-u-color-200">Degraded</span>
2177
- </div>
2178
- </div>
1867
+ </span>
2179
1868
  </div>
2180
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1869
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
2181
1870
  <div class="pf-v6-l-flex__item">
2182
- <span class="pf-v6-c-icon">
2183
- <span class="pf-v6-c-icon__content pf-m-success">
2184
- <svg
2185
- class="pf-v6-svg"
2186
- viewBox="0 0 32 32"
2187
- fill="currentColor"
2188
- aria-hidden="true"
2189
- role="img"
2190
- width="1em"
2191
- height="1em"
2192
- >
2193
- <path
2194
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2195
- />
2196
- </svg>
2197
- </span>
2198
- </span>
2199
- </div>
2200
- <div
2201
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
2202
- >
2203
- <div class="pf-v6-l-flex__item">
2204
- <a href="#">Hardware</a>
2205
- </div>
1871
+ <a href="#">Hardware</a>
2206
1872
  </div>
2207
1873
  </div>
2208
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2209
- <div class="pf-v6-l-flex__item">
2210
- <span class="pf-v6-c-icon">
2211
- <span class="pf-v6-c-icon__content pf-m-success">
2212
- <svg
2213
- class="pf-v6-svg"
2214
- viewBox="0 0 32 32"
2215
- fill="currentColor"
2216
- aria-hidden="true"
2217
- role="img"
2218
- width="1em"
2219
- height="1em"
2220
- >
2221
- <path
2222
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2223
- />
2224
- </svg>
2225
- </span>
1874
+ </div>
1875
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1876
+ <div class="pf-v6-l-flex__item">
1877
+ <span class="pf-v6-c-icon">
1878
+ <span class="pf-v6-c-icon__content pf-m-success">
1879
+ <svg
1880
+ class="pf-v6-svg"
1881
+ viewBox="0 0 32 32"
1882
+ fill="currentColor"
1883
+ aria-hidden="true"
1884
+ role="img"
1885
+ width="1em"
1886
+ height="1em"
1887
+ >
1888
+ <path
1889
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1890
+ />
1891
+ </svg>
2226
1892
  </span>
2227
- </div>
2228
- <div
2229
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
2230
- >
2231
- <div class="pf-v6-l-flex__item">
2232
- <a href="#">Insights</a>
2233
- </div>
1893
+ </span>
1894
+ </div>
1895
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1896
+ <div class="pf-v6-l-flex__item">
1897
+ <a href="#">Insights</a>
2234
1898
  </div>
2235
1899
  </div>
2236
1900
  </div>
2237
1901
  </div>
2238
1902
  </div>
2239
- <!-- inventory -->
2240
1903
  </div>
2241
- <div class="pf-v6-c-compass__panel pf-m-no-padding">
1904
+ <div
1905
+ class="pf-v6-c-card pf-m-glass"
1906
+ id="compass-dashboard-grid-line-chart-card-1"
1907
+ >
1908
+ <div class="pf-v6-c-card__header">
1909
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1910
+ <button
1911
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1912
+ type="button"
1913
+ aria-expanded="false"
1914
+ id="compass-dashboard-grid-line-chart-card-1-select-dropdown"
1915
+ >
1916
+ <span class="pf-v6-c-menu-toggle__text">24 hours</span>
1917
+ <span class="pf-v6-c-menu-toggle__controls">
1918
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1919
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1920
+ </span>
1921
+ </span>
1922
+ </button>
1923
+ </div>
1924
+ <div
1925
+ class="pf-v6-c-card__title"
1926
+ id="compass-dashboard-grid-line-chart-card-1-title"
1927
+ >
1928
+ <h2 class="pf-v6-c-title pf-m-xl">Cluster utilizations</h2>
1929
+ </div>
1930
+ </div>
2242
1931
  <div
2243
- class="pf-v6-c-card pf-m-plain"
2244
- id="compass-dashboard-grid-line-chart-card-1"
1932
+ class="pf-v6-c-card pf-m-plain pf-m-expanded pf-m-glass"
1933
+ id="compass-dashboard-grid-line-chart-card-1-group-1"
2245
1934
  >
2246
- <div class="pf-v6-c-card__header">
2247
- <div class="pf-v6-c-card__actions pf-m-no-offset">
1935
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1936
+ <div class="pf-v6-c-card__header-toggle">
2248
1937
  <button
2249
- class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1938
+ class="pf-v6-c-button pf-m-plain"
1939
+ id="compass-dashboard-grid-line-chart-card-1-group-1-toggle"
2250
1940
  type="button"
2251
- aria-expanded="false"
2252
- id="compass-dashboard-grid-line-chart-card-1-select-dropdown"
1941
+ aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-1-title compass-dashboard-grid-line-chart-card-1-group-1-toggle"
1942
+ aria-label="Details"
2253
1943
  >
2254
- <span class="pf-v6-c-menu-toggle__text">24 hours</span>
2255
- <span class="pf-v6-c-menu-toggle__controls">
2256
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2257
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1944
+ <span class="pf-v6-c-button__icon pf-m-start">
1945
+ <span class="pf-v6-c-card__header-toggle-icon">
1946
+ <svg
1947
+ class="pf-v6-svg"
1948
+ viewBox="0 0 20 20"
1949
+ fill="currentColor"
1950
+ aria-hidden="true"
1951
+ role="img"
1952
+ width="1em"
1953
+ height="1em"
1954
+ >
1955
+ <path
1956
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1957
+ />
1958
+ </svg>
2258
1959
  </span>
2259
1960
  </span>
2260
1961
  </button>
2261
1962
  </div>
2262
- <div
2263
- class="pf-v6-c-card__title"
2264
- id="compass-dashboard-grid-line-chart-card-1-title"
2265
- >
2266
- <h2 class="pf-v6-c-title pf-m-xl">Cluster utilizations</h2>
1963
+ <div class="pf-v6-c-card__title">
1964
+ <h2
1965
+ class="pf-v6-c-card__title-text"
1966
+ id="compass-dashboard-grid-line-chart-card-1-group-1-title"
1967
+ >CPU 1</h2>
2267
1968
  </div>
2268
1969
  </div>
2269
- <div
2270
- class="pf-v6-c-card pf-m-plain pf-m-expanded pf-m-plain"
2271
- id="compass-dashboard-grid-line-chart-card-1-group-1"
2272
- >
2273
- <div class="pf-v6-c-card__header pf-m-toggle-right">
2274
- <div class="pf-v6-c-card__header-toggle">
2275
- <button
2276
- class="pf-v6-c-button pf-m-plain"
2277
- id="compass-dashboard-grid-line-chart-card-1-group-1-toggle"
2278
- type="button"
2279
- aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-1-title compass-dashboard-grid-line-chart-card-1-group-1-toggle"
2280
- aria-label="Details"
2281
- >
2282
- <span class="pf-v6-c-button__icon pf-m-start">
2283
- <span class="pf-v6-c-card__header-toggle-icon">
2284
- <svg
2285
- class="pf-v6-svg"
2286
- viewBox="0 0 20 20"
2287
- fill="currentColor"
2288
- aria-hidden="true"
2289
- role="img"
2290
- width="1em"
2291
- height="1em"
2292
- >
2293
- <path
2294
- d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2295
- />
2296
- </svg>
2297
- </span>
2298
- </span>
2299
- </button>
2300
- </div>
2301
- <div class="pf-v6-c-card__title">
2302
- <h2
2303
- class="pf-v6-c-card__title-text"
2304
- id="compass-dashboard-grid-line-chart-card-1-group-1-title"
2305
- >CPU 1</h2>
2306
- </div>
2307
- </div>
2308
- <div class="pf-v6-c-card__expandable-content">
2309
- <div class="pf-v6-c-card__body">
1970
+ <div class="pf-v6-c-card__expandable-content">
1971
+ <div class="pf-v6-c-card__body">
1972
+ <div class="pf-v6-l-grid pf-m-gutter">
2310
1973
  <div class="pf-v6-l-grid pf-m-gutter">
2311
- <div class="pf-v6-l-grid pf-m-gutter">
2312
- <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2313
- <div
2314
- 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"
2315
- >
2316
- <div class="pf-v6-l-flex__item">
2317
- <b>Temperature</b>
2318
- </div>
2319
- <hr
2320
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2321
- />
2322
- <div class="pf-v6-l-flex__item">
2323
- <span>64C</span>
2324
- </div>
1974
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1975
+ <div
1976
+ 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"
1977
+ >
1978
+ <div class="pf-v6-l-flex__item">
1979
+ <b>Temperature</b>
1980
+ </div>
1981
+ <hr
1982
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
1983
+ />
1984
+ <div class="pf-v6-l-flex__item">
1985
+ <span>64C</span>
2325
1986
  </div>
2326
1987
  </div>
2327
- <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
2328
- <div class="pf-v6-l-grid pf-m-gutter">
2329
- <div class="pf-v6-l-grid__item pf-m-2-col">
2330
- <div
2331
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
2332
- >
2333
- <div class="pf-v6-l-flex__item">100C</div>
2334
- <div class="pf-v6-l-flex__item">50C</div>
2335
- <div class="pf-v6-l-flex__item">0C</div>
2336
- </div>
1988
+ </div>
1989
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
1990
+ <div class="pf-v6-l-grid pf-m-gutter">
1991
+ <div class="pf-v6-l-grid__item pf-m-2-col">
1992
+ <div
1993
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
1994
+ >
1995
+ <div class="pf-v6-l-flex__item">100C</div>
1996
+ <div class="pf-v6-l-flex__item">50C</div>
1997
+ <div class="pf-v6-l-flex__item">0C</div>
2337
1998
  </div>
2338
- <div class="pf-v6-l-grid__item pf-m-10-col">
2339
- <div class="ws-chart">
2340
- <img
2341
- src="/assets/images/img_line-chart-2.png"
2342
- alt="Line chart"
2343
- />
2344
- </div>
1999
+ </div>
2000
+ <div class="pf-v6-l-grid__item pf-m-10-col">
2001
+ <div class="ws-chart">
2002
+ <img
2003
+ src="/assets/images/img_line-chart-2.png"
2004
+ alt="Line chart"
2005
+ />
2345
2006
  </div>
2346
2007
  </div>
2347
2008
  </div>
2348
2009
  </div>
2349
- <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
2350
- <div class="pf-v6-l-grid pf-m-gutter">
2351
- <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2352
- <div
2353
- 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"
2354
- >
2355
- <div class="pf-v6-l-flex__item">
2356
- <b>Speed</b>
2357
- </div>
2358
- <hr
2359
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2360
- />
2361
- <div class="pf-v6-l-flex__item">
2362
- <span>2.3Ghz</span>
2363
- </div>
2010
+ </div>
2011
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
2012
+ <div class="pf-v6-l-grid pf-m-gutter">
2013
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2014
+ <div
2015
+ 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"
2016
+ >
2017
+ <div class="pf-v6-l-flex__item">
2018
+ <b>Speed</b>
2019
+ </div>
2020
+ <hr
2021
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2022
+ />
2023
+ <div class="pf-v6-l-flex__item">
2024
+ <span>2.3Ghz</span>
2364
2025
  </div>
2365
2026
  </div>
2366
- <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
2367
- <div class="pf-v6-l-grid pf-m-gutter">
2368
- <div class="pf-v6-l-grid__item pf-m-2-col">
2369
- <div
2370
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
2371
- >
2372
- <div class="pf-v6-l-flex__item">36hz</div>
2373
- <div class="pf-v6-l-flex__item">1.5Ghz</div>
2374
- <div class="pf-v6-l-flex__item">0Ghz</div>
2375
- </div>
2027
+ </div>
2028
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
2029
+ <div class="pf-v6-l-grid pf-m-gutter">
2030
+ <div class="pf-v6-l-grid__item pf-m-2-col">
2031
+ <div
2032
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
2033
+ >
2034
+ <div class="pf-v6-l-flex__item">36hz</div>
2035
+ <div class="pf-v6-l-flex__item">1.5Ghz</div>
2036
+ <div class="pf-v6-l-flex__item">0Ghz</div>
2376
2037
  </div>
2377
- <div class="pf-v6-l-grid__item pf-m-10-col">
2378
- <div class="ws-chart">
2379
- <img
2380
- src="/assets/images/img_line-chart-2.png"
2381
- alt="Line chart"
2382
- />
2383
- </div>
2038
+ </div>
2039
+ <div class="pf-v6-l-grid__item pf-m-10-col">
2040
+ <div class="ws-chart">
2041
+ <img
2042
+ src="/assets/images/img_line-chart-2.png"
2043
+ alt="Line chart"
2044
+ />
2384
2045
  </div>
2385
2046
  </div>
2386
2047
  </div>
@@ -2389,144 +2050,142 @@ This demo populates the main Compass section with a dashboard, which is often us
2389
2050
  </div>
2390
2051
  </div>
2391
2052
  </div>
2392
- <div
2393
- class="pf-v6-c-card pf-m-plain pf-m-plain"
2394
- id="compass-dashboard-grid-line-chart-card-1-group-2"
2395
- >
2396
- <div class="pf-v6-c-card__header pf-m-toggle-right">
2397
- <div class="pf-v6-c-card__header-toggle">
2398
- <button
2399
- class="pf-v6-c-button pf-m-plain"
2400
- id="compass-dashboard-grid-line-chart-card-1-group-2-toggle"
2401
- type="button"
2402
- aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-2-title compass-dashboard-grid-line-chart-card-1-group-2-toggle"
2403
- aria-label="Details"
2404
- >
2405
- <span class="pf-v6-c-button__icon pf-m-start">
2406
- <span class="pf-v6-c-card__header-toggle-icon">
2407
- <svg
2408
- class="pf-v6-svg"
2409
- viewBox="0 0 20 20"
2410
- fill="currentColor"
2411
- aria-hidden="true"
2412
- role="img"
2413
- width="1em"
2414
- height="1em"
2415
- >
2416
- <path
2417
- d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2418
- />
2419
- </svg>
2420
- </span>
2053
+ </div>
2054
+ <div
2055
+ class="pf-v6-c-card pf-m-plain pf-m-glass"
2056
+ id="compass-dashboard-grid-line-chart-card-1-group-2"
2057
+ >
2058
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
2059
+ <div class="pf-v6-c-card__header-toggle">
2060
+ <button
2061
+ class="pf-v6-c-button pf-m-plain"
2062
+ id="compass-dashboard-grid-line-chart-card-1-group-2-toggle"
2063
+ type="button"
2064
+ aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-2-title compass-dashboard-grid-line-chart-card-1-group-2-toggle"
2065
+ aria-label="Details"
2066
+ >
2067
+ <span class="pf-v6-c-button__icon pf-m-start">
2068
+ <span class="pf-v6-c-card__header-toggle-icon">
2069
+ <svg
2070
+ class="pf-v6-svg"
2071
+ viewBox="0 0 20 20"
2072
+ fill="currentColor"
2073
+ aria-hidden="true"
2074
+ role="img"
2075
+ width="1em"
2076
+ height="1em"
2077
+ >
2078
+ <path
2079
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2080
+ />
2081
+ </svg>
2421
2082
  </span>
2422
- </button>
2423
- </div>
2424
- <div class="pf-v6-c-card__title">
2425
- <h2
2426
- class="pf-v6-c-card__title-text"
2427
- id="compass-dashboard-grid-line-chart-card-1-group-2-title"
2428
- >Pod count</h2>
2429
- </div>
2083
+ </span>
2084
+ </button>
2085
+ </div>
2086
+ <div class="pf-v6-c-card__title">
2087
+ <h2
2088
+ class="pf-v6-c-card__title-text"
2089
+ id="compass-dashboard-grid-line-chart-card-1-group-2-title"
2090
+ >Pod count</h2>
2430
2091
  </div>
2431
2092
  </div>
2432
- <div
2433
- class="pf-v6-c-card pf-m-plain pf-m-plain"
2434
- id="compass-dashboard-grid-line-chart-card-1-group-3"
2435
- >
2436
- <div class="pf-v6-c-card__header pf-m-toggle-right">
2437
- <div class="pf-v6-c-card__header-toggle">
2438
- <button
2439
- class="pf-v6-c-button pf-m-plain"
2440
- id="compass-dashboard-grid-line-chart-card-1-group-3-toggle"
2441
- type="button"
2442
- aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-3-title compass-dashboard-grid-line-chart-card-1-group-3-toggle"
2443
- aria-label="Details"
2444
- >
2445
- <span class="pf-v6-c-button__icon pf-m-start">
2446
- <span class="pf-v6-c-card__header-toggle-icon">
2447
- <svg
2448
- class="pf-v6-svg"
2449
- viewBox="0 0 20 20"
2450
- fill="currentColor"
2451
- aria-hidden="true"
2452
- role="img"
2453
- width="1em"
2454
- height="1em"
2455
- >
2456
- <path
2457
- d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2458
- />
2459
- </svg>
2460
- </span>
2461
- </span>
2462
- </button>
2463
- </div>
2464
- <div class="pf-v6-c-card__title">
2465
- <h2
2466
- class="pf-v6-c-card__title-text"
2467
- id="compass-dashboard-grid-line-chart-card-1-group-3-title"
2468
- >Memory</h2>
2469
- </div>
2093
+ </div>
2094
+ <div
2095
+ class="pf-v6-c-card pf-m-plain pf-m-glass"
2096
+ id="compass-dashboard-grid-line-chart-card-1-group-3"
2097
+ >
2098
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
2099
+ <div class="pf-v6-c-card__header-toggle">
2100
+ <button
2101
+ class="pf-v6-c-button pf-m-plain"
2102
+ id="compass-dashboard-grid-line-chart-card-1-group-3-toggle"
2103
+ type="button"
2104
+ aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-3-title compass-dashboard-grid-line-chart-card-1-group-3-toggle"
2105
+ aria-label="Details"
2106
+ >
2107
+ <span class="pf-v6-c-button__icon pf-m-start">
2108
+ <span class="pf-v6-c-card__header-toggle-icon">
2109
+ <svg
2110
+ class="pf-v6-svg"
2111
+ viewBox="0 0 20 20"
2112
+ fill="currentColor"
2113
+ aria-hidden="true"
2114
+ role="img"
2115
+ width="1em"
2116
+ height="1em"
2117
+ >
2118
+ <path
2119
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2120
+ />
2121
+ </svg>
2122
+ </span>
2123
+ </span>
2124
+ </button>
2125
+ </div>
2126
+ <div class="pf-v6-c-card__title">
2127
+ <h2
2128
+ class="pf-v6-c-card__title-text"
2129
+ id="compass-dashboard-grid-line-chart-card-1-group-3-title"
2130
+ >Memory</h2>
2470
2131
  </div>
2471
2132
  </div>
2472
2133
  </div>
2473
2134
  </div>
2474
- <div class="pf-v6-c-compass__panel pf-m-no-padding">
2475
- <div class="pf-v6-c-card pf-m-plain">
2476
- <div class="pf-v6-c-card__title">
2477
- <h2 class="pf-v6-c-title pf-m-xl">Recomendations by severity</h2>
2478
- </div>
2479
- <div class="pf-v6-c-card__body">
2480
- <div class="pf-v6-l-flex pf-m-inline-flex">
2481
- <div class="pf-v6-l-grid pf-m-gutter pf-m-all-3-col">
2482
- <div
2483
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2484
- >
2485
- <span
2486
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2487
- >2</span>
2488
- <span class="pf-v6-u-font-color-200">Critical</span>
2489
- </div>
2490
- <div
2491
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2492
- >
2493
- <span
2494
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2495
- >5</span>
2496
- <span class="pf-v6-u-font-color-200">Important</span>
2497
- </div>
2498
- <div
2499
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2500
- >
2501
- <span
2502
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2503
- >7</span>
2504
- <span class="pf-v6-u-font-color-200">Moderate</span>
2505
- </div>
2506
- <div
2507
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2508
- >
2509
- <span
2510
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2511
- >12</span>
2512
- <span class="pf-v6-u-font-color-200">Low</span>
2513
- </div>
2135
+ <div class="pf-v6-c-card pf-m-glass">
2136
+ <div class="pf-v6-c-card__title">
2137
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by severity</h2>
2138
+ </div>
2139
+ <div class="pf-v6-c-card__body">
2140
+ <div class="pf-v6-l-flex pf-m-inline-flex">
2141
+ <div class="pf-v6-l-grid pf-m-gutter pf-m-all-3-col">
2142
+ <div
2143
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2144
+ >
2145
+ <span
2146
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2147
+ >2</span>
2148
+ <span class="pf-v6-u-font-color-200">Critical</span>
2149
+ </div>
2150
+ <div
2151
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2152
+ >
2153
+ <span
2154
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2155
+ >5</span>
2156
+ <span class="pf-v6-u-font-color-200">Important</span>
2157
+ </div>
2158
+ <div
2159
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2160
+ >
2161
+ <span
2162
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2163
+ >7</span>
2164
+ <span class="pf-v6-u-font-color-200">Moderate</span>
2165
+ </div>
2166
+ <div
2167
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2168
+ >
2169
+ <span
2170
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2171
+ >12</span>
2172
+ <span class="pf-v6-u-font-color-200">Low</span>
2514
2173
  </div>
2515
2174
  </div>
2516
2175
  </div>
2517
- <div class="pf-v6-c-card__title">
2518
- <h2 class="pf-v6-c-title pf-m-xl">Recomendations by category</h2>
2519
- </div>
2520
- <div class="pf-v6-c-card__body">
2521
- <img
2522
- src="/assets/images/img_pie-chart-with-legend.png"
2523
- alt="Pie chart"
2524
- width="450"
2525
- />
2526
- </div>
2527
- <div class="pf-v6-c-card__footer">
2528
- <a href="#">View more</a>
2529
- </div>
2176
+ </div>
2177
+ <div class="pf-v6-c-card__title">
2178
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by category</h2>
2179
+ </div>
2180
+ <div class="pf-v6-c-card__body">
2181
+ <img
2182
+ src="/assets/images/img_pie-chart-with-legend.png"
2183
+ alt="Pie chart"
2184
+ width="450"
2185
+ />
2186
+ </div>
2187
+ <div class="pf-v6-c-card__footer">
2188
+ <a href="#">View more</a>
2530
2189
  </div>
2531
2190
  </div>
2532
2191
  </div>
@@ -2539,281 +2198,275 @@ This demo populates the main Compass section with a dashboard, which is often us
2539
2198
  class="pf-v6-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg"
2540
2199
  >
2541
2200
  <div class="pf-v6-l-flex__item pf-m-flex-1">
2542
- <div class="pf-v6-c-compass__panel pf-m-no-padding">
2543
- <div
2544
- class="pf-v6-c-card pf-m-plain"
2545
- id="compass-dashboard-grid-details-card-1"
2546
- >
2547
- <div class="pf-v6-c-card__title">
2548
- <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
2549
- </div>
2550
- <div class="pf-v6-c-card__body">
2551
- <dl class="pf-v6-c-description-list" aria-label="Details">
2552
- <div class="pf-v6-c-description-list__group">
2553
- <dt
2554
- class="pf-v6-c-description-list__term"
2555
- >Cluster API Address</dt>
2556
- <dd class="pf-v6-c-description-list__description">
2557
- <div class="pf-v6-c-description-list__text">
2558
- <a href="#">https://api1.devcluster.openshift.com</a>
2559
- </div>
2560
- </dd>
2561
- </div>
2562
- <div class="pf-v6-c-description-list__group">
2563
- <dt class="pf-v6-c-description-list__term">Cluster ID</dt>
2564
- <dd class="pf-v6-c-description-list__description">
2565
- <div
2566
- class="pf-v6-c-description-list__text"
2567
- >63b97ac1-b850-41d9-8820-239becde9e86</div>
2568
- </dd>
2569
- </div>
2570
- <div class="pf-v6-c-description-list__group">
2571
- <dt class="pf-v6-c-description-list__term">Provider</dt>
2572
- <dd class="pf-v6-c-description-list__description">
2573
- <div class="pf-v6-c-description-list__text">AWS</div>
2574
- </dd>
2575
- </div>
2576
- <div class="pf-v6-c-description-list__group">
2577
- <dt
2578
- class="pf-v6-c-description-list__term"
2579
- >OpenShift Version</dt>
2580
- <dd class="pf-v6-c-description-list__description">
2581
- <div
2582
- class="pf-v6-c-description-list__text"
2583
- >4.5.0.ci-2020-06-16-015028</div>
2584
- </dd>
2585
- </div>
2586
- <div class="pf-v6-c-description-list__group">
2587
- <dt
2588
- class="pf-v6-c-description-list__term"
2589
- >Update Channel</dt>
2590
- <dd class="pf-v6-c-description-list__description">
2591
- <div class="pf-v6-c-description-list__text">stable-4.5</div>
2592
- </dd>
2593
- </div>
2594
- </dl>
2595
- </div>
2596
- <hr class="pf-v6-c-divider" />
2597
- <div class="pf-v6-c-card__footer">
2598
- <a href="#">View Settings</a>
2599
- </div>
2201
+ <div
2202
+ class="pf-v6-c-card pf-m-glass"
2203
+ id="compass-dashboard-grid-details-card-1"
2204
+ >
2205
+ <div class="pf-v6-c-card__title">
2206
+ <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
2207
+ </div>
2208
+ <div class="pf-v6-c-card__body">
2209
+ <dl class="pf-v6-c-description-list" aria-label="Details">
2210
+ <div class="pf-v6-c-description-list__group">
2211
+ <dt
2212
+ class="pf-v6-c-description-list__term"
2213
+ >Cluster API Address</dt>
2214
+ <dd class="pf-v6-c-description-list__description">
2215
+ <div class="pf-v6-c-description-list__text">
2216
+ <a href="#">https://api1.devcluster.openshift.com</a>
2217
+ </div>
2218
+ </dd>
2219
+ </div>
2220
+ <div class="pf-v6-c-description-list__group">
2221
+ <dt class="pf-v6-c-description-list__term">Cluster ID</dt>
2222
+ <dd class="pf-v6-c-description-list__description">
2223
+ <div
2224
+ class="pf-v6-c-description-list__text"
2225
+ >63b97ac1-b850-41d9-8820-239becde9e86</div>
2226
+ </dd>
2227
+ </div>
2228
+ <div class="pf-v6-c-description-list__group">
2229
+ <dt class="pf-v6-c-description-list__term">Provider</dt>
2230
+ <dd class="pf-v6-c-description-list__description">
2231
+ <div class="pf-v6-c-description-list__text">AWS</div>
2232
+ </dd>
2233
+ </div>
2234
+ <div class="pf-v6-c-description-list__group">
2235
+ <dt
2236
+ class="pf-v6-c-description-list__term"
2237
+ >OpenShift Version</dt>
2238
+ <dd class="pf-v6-c-description-list__description">
2239
+ <div
2240
+ class="pf-v6-c-description-list__text"
2241
+ >4.5.0.ci-2020-06-16-015028</div>
2242
+ </dd>
2243
+ </div>
2244
+ <div class="pf-v6-c-description-list__group">
2245
+ <dt class="pf-v6-c-description-list__term">Update Channel</dt>
2246
+ <dd class="pf-v6-c-description-list__description">
2247
+ <div class="pf-v6-c-description-list__text">stable-4.5</div>
2248
+ </dd>
2249
+ </div>
2250
+ </dl>
2251
+ </div>
2252
+ <hr class="pf-v6-c-divider" />
2253
+ <div class="pf-v6-c-card__footer">
2254
+ <a href="#">View Settings</a>
2600
2255
  </div>
2601
2256
  </div>
2602
2257
  </div>
2603
2258
  <div class="pf-v6-l-flex__item pf-m-flex-1">
2604
- <div class="pf-v6-c-compass__panel pf-m-no-padding">
2259
+ <div
2260
+ class="pf-v6-c-card pf-m-glass"
2261
+ id="compass-dashboard-grid-data-list-card-1"
2262
+ >
2605
2263
  <div
2606
- class="pf-v6-c-card pf-m-plain"
2607
- id="compass-dashboard-grid-data-list-card-1"
2264
+ class="pf-v6-c-card__header pf-v6-u-align-items-flex-start"
2608
2265
  >
2609
2266
  <div
2610
- class="pf-v6-c-card__header pf-v6-u-align-items-flex-start"
2267
+ class="pf-v6-c-card__title"
2268
+ id="compass-dashboard-grid-data-list-card-1-title1"
2611
2269
  >
2612
- <div
2613
- class="pf-v6-c-card__title"
2614
- id="compass-dashboard-grid-data-list-card-1-title1"
2615
- >
2616
- <h2 class="pf-v6-c-title pf-m-lg">Inventory</h2>
2617
- </div>
2270
+ <h2 class="pf-v6-c-title pf-m-lg">Inventory</h2>
2618
2271
  </div>
2619
- <ul
2620
- class="pf-v6-c-data-list pf-m-plain pf-m-grid-none"
2621
- role="list"
2622
- aria-label="Simple data list example"
2623
- id="compass-dashboard-grid-data-list-card-1-data-list"
2624
- >
2625
- <li class="pf-v6-c-data-list__item">
2626
- <div class="pf-v6-c-data-list__item-row">
2627
- <div class="pf-v6-c-data-list__item-content">
2628
- <div
2629
- class="pf-v6-c-data-list__cell"
2630
- id="compass-dashboard-grid-data-list-card-1-data-list-item-1"
2631
- >3 Nodes</div>
2632
- <div
2633
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2634
- >
2635
- <a href="#">
2636
- <div class="pf-v6-l-flex pf-m-space-items-sm">
2637
- <span>3</span>
2638
- <span class="pf-v6-c-icon">
2639
- <span
2640
- class="pf-v6-c-icon__content pf-m-success"
2272
+ </div>
2273
+ <ul
2274
+ class="pf-v6-c-data-list pf-m-plain pf-m-grid-none"
2275
+ role="list"
2276
+ aria-label="Simple data list example"
2277
+ id="compass-dashboard-grid-data-list-card-1-data-list"
2278
+ >
2279
+ <li class="pf-v6-c-data-list__item">
2280
+ <div class="pf-v6-c-data-list__item-row">
2281
+ <div class="pf-v6-c-data-list__item-content">
2282
+ <div
2283
+ class="pf-v6-c-data-list__cell"
2284
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-1"
2285
+ >3 Nodes</div>
2286
+ <div
2287
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2288
+ >
2289
+ <a href="#">
2290
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2291
+ <span>3</span>
2292
+ <span class="pf-v6-c-icon">
2293
+ <span
2294
+ class="pf-v6-c-icon__content pf-m-success"
2295
+ >
2296
+ <svg
2297
+ class="pf-v6-svg"
2298
+ viewBox="0 0 32 32"
2299
+ fill="currentColor"
2300
+ aria-hidden="true"
2301
+ role="img"
2302
+ width="1em"
2303
+ height="1em"
2641
2304
  >
2642
- <svg
2643
- class="pf-v6-svg"
2644
- viewBox="0 0 32 32"
2645
- fill="currentColor"
2646
- aria-hidden="true"
2647
- role="img"
2648
- width="1em"
2649
- height="1em"
2650
- >
2651
- <path
2652
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2653
- />
2654
- </svg>
2655
- </span>
2305
+ <path
2306
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2307
+ />
2308
+ </svg>
2656
2309
  </span>
2657
- </div>
2658
- </a>
2659
- </div>
2310
+ </span>
2311
+ </div>
2312
+ </a>
2660
2313
  </div>
2661
2314
  </div>
2662
- </li>
2663
- <li class="pf-v6-c-data-list__item">
2664
- <div class="pf-v6-c-data-list__item-row">
2665
- <div class="pf-v6-c-data-list__item-content">
2666
- <div
2667
- class="pf-v6-c-data-list__cell"
2668
- id="compass-dashboard-grid-data-list-card-1-data-list-item-2"
2669
- >8 Disks</div>
2670
- <div
2671
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2672
- >
2673
- <a href="#">
2674
- <div class="pf-v6-l-flex pf-m-space-items-sm">
2675
- <span>8</span>
2676
- <span class="pf-v6-c-icon">
2677
- <span
2678
- class="pf-v6-c-icon__content pf-m-success"
2315
+ </div>
2316
+ </li>
2317
+ <li class="pf-v6-c-data-list__item">
2318
+ <div class="pf-v6-c-data-list__item-row">
2319
+ <div class="pf-v6-c-data-list__item-content">
2320
+ <div
2321
+ class="pf-v6-c-data-list__cell"
2322
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-2"
2323
+ >8 Disks</div>
2324
+ <div
2325
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2326
+ >
2327
+ <a href="#">
2328
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2329
+ <span>8</span>
2330
+ <span class="pf-v6-c-icon">
2331
+ <span
2332
+ class="pf-v6-c-icon__content pf-m-success"
2333
+ >
2334
+ <svg
2335
+ class="pf-v6-svg"
2336
+ viewBox="0 0 32 32"
2337
+ fill="currentColor"
2338
+ aria-hidden="true"
2339
+ role="img"
2340
+ width="1em"
2341
+ height="1em"
2679
2342
  >
2680
- <svg
2681
- class="pf-v6-svg"
2682
- viewBox="0 0 32 32"
2683
- fill="currentColor"
2684
- aria-hidden="true"
2685
- role="img"
2686
- width="1em"
2687
- height="1em"
2688
- >
2689
- <path
2690
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2691
- />
2692
- </svg>
2693
- </span>
2343
+ <path
2344
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2345
+ />
2346
+ </svg>
2694
2347
  </span>
2695
- </div>
2696
- </a>
2697
- </div>
2348
+ </span>
2349
+ </div>
2350
+ </a>
2698
2351
  </div>
2699
2352
  </div>
2700
- </li>
2701
- <li class="pf-v6-c-data-list__item">
2702
- <div class="pf-v6-c-data-list__item-row">
2703
- <div class="pf-v6-c-data-list__item-content">
2704
- <div
2705
- class="pf-v6-c-data-list__cell"
2706
- id="compass-dashboard-grid-data-list-card-1-data-list-item-3"
2707
- >20 Pods</div>
2708
- <div
2709
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2710
- >
2711
- <a href="#">
2712
- <div class="pf-v6-l-flex pf-m-space-items-sm">
2713
- <span>20</span>
2714
- <span class="pf-v6-c-icon">
2715
- <span
2716
- class="pf-v6-c-icon__content pf-m-success"
2353
+ </div>
2354
+ </li>
2355
+ <li class="pf-v6-c-data-list__item">
2356
+ <div class="pf-v6-c-data-list__item-row">
2357
+ <div class="pf-v6-c-data-list__item-content">
2358
+ <div
2359
+ class="pf-v6-c-data-list__cell"
2360
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-3"
2361
+ >20 Pods</div>
2362
+ <div
2363
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2364
+ >
2365
+ <a href="#">
2366
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2367
+ <span>20</span>
2368
+ <span class="pf-v6-c-icon">
2369
+ <span
2370
+ class="pf-v6-c-icon__content pf-m-success"
2371
+ >
2372
+ <svg
2373
+ class="pf-v6-svg"
2374
+ viewBox="0 0 32 32"
2375
+ fill="currentColor"
2376
+ aria-hidden="true"
2377
+ role="img"
2378
+ width="1em"
2379
+ height="1em"
2717
2380
  >
2718
- <svg
2719
- class="pf-v6-svg"
2720
- viewBox="0 0 32 32"
2721
- fill="currentColor"
2722
- aria-hidden="true"
2723
- role="img"
2724
- width="1em"
2725
- height="1em"
2726
- >
2727
- <path
2728
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2729
- />
2730
- </svg>
2731
- </span>
2381
+ <path
2382
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2383
+ />
2384
+ </svg>
2732
2385
  </span>
2733
- </div>
2734
- </a>
2735
- </div>
2386
+ </span>
2387
+ </div>
2388
+ </a>
2736
2389
  </div>
2737
2390
  </div>
2738
- </li>
2739
- <li class="pf-v6-c-data-list__item">
2740
- <div class="pf-v6-c-data-list__item-row">
2741
- <div class="pf-v6-c-data-list__item-content">
2742
- <div
2743
- class="pf-v6-c-data-list__cell"
2744
- id="compass-dashboard-grid-data-list-card-1-data-list-item-4"
2745
- >12 PVs</div>
2746
- <div
2747
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2748
- >
2749
- <a href="#">
2750
- <div class="pf-v6-l-flex pf-m-space-items-sm">
2751
- <span>12</span>
2752
- <span class="pf-v6-c-icon">
2753
- <span
2754
- class="pf-v6-c-icon__content pf-m-success"
2391
+ </div>
2392
+ </li>
2393
+ <li class="pf-v6-c-data-list__item">
2394
+ <div class="pf-v6-c-data-list__item-row">
2395
+ <div class="pf-v6-c-data-list__item-content">
2396
+ <div
2397
+ class="pf-v6-c-data-list__cell"
2398
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-4"
2399
+ >12 PVs</div>
2400
+ <div
2401
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2402
+ >
2403
+ <a href="#">
2404
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2405
+ <span>12</span>
2406
+ <span class="pf-v6-c-icon">
2407
+ <span
2408
+ class="pf-v6-c-icon__content pf-m-success"
2409
+ >
2410
+ <svg
2411
+ class="pf-v6-svg"
2412
+ viewBox="0 0 32 32"
2413
+ fill="currentColor"
2414
+ aria-hidden="true"
2415
+ role="img"
2416
+ width="1em"
2417
+ height="1em"
2755
2418
  >
2756
- <svg
2757
- class="pf-v6-svg"
2758
- viewBox="0 0 32 32"
2759
- fill="currentColor"
2760
- aria-hidden="true"
2761
- role="img"
2762
- width="1em"
2763
- height="1em"
2764
- >
2765
- <path
2766
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2767
- />
2768
- </svg>
2769
- </span>
2419
+ <path
2420
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2421
+ />
2422
+ </svg>
2770
2423
  </span>
2771
- </div>
2772
- </a>
2773
- </div>
2424
+ </span>
2425
+ </div>
2426
+ </a>
2774
2427
  </div>
2775
2428
  </div>
2776
- </li>
2777
- <li class="pf-v6-c-data-list__item">
2778
- <div class="pf-v6-c-data-list__item-row">
2779
- <div class="pf-v6-c-data-list__item-content">
2780
- <div
2781
- class="pf-v6-c-data-list__cell"
2782
- id="compass-dashboard-grid-data-list-card-1-data-list-item-5"
2783
- >18 PVCs</div>
2784
- <div
2785
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2786
- >
2787
- <a href="#">
2788
- <div class="pf-v6-l-flex pf-m-space-items-sm">
2789
- <span>18</span>
2790
- <span class="pf-v6-c-icon">
2791
- <span
2792
- class="pf-v6-c-icon__content pf-m-success"
2429
+ </div>
2430
+ </li>
2431
+ <li class="pf-v6-c-data-list__item">
2432
+ <div class="pf-v6-c-data-list__item-row">
2433
+ <div class="pf-v6-c-data-list__item-content">
2434
+ <div
2435
+ class="pf-v6-c-data-list__cell"
2436
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-5"
2437
+ >18 PVCs</div>
2438
+ <div
2439
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2440
+ >
2441
+ <a href="#">
2442
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2443
+ <span>18</span>
2444
+ <span class="pf-v6-c-icon">
2445
+ <span
2446
+ class="pf-v6-c-icon__content pf-m-success"
2447
+ >
2448
+ <svg
2449
+ class="pf-v6-svg"
2450
+ viewBox="0 0 32 32"
2451
+ fill="currentColor"
2452
+ aria-hidden="true"
2453
+ role="img"
2454
+ width="1em"
2455
+ height="1em"
2793
2456
  >
2794
- <svg
2795
- class="pf-v6-svg"
2796
- viewBox="0 0 32 32"
2797
- fill="currentColor"
2798
- aria-hidden="true"
2799
- role="img"
2800
- width="1em"
2801
- height="1em"
2802
- >
2803
- <path
2804
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2805
- />
2806
- </svg>
2807
- </span>
2457
+ <path
2458
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2459
+ />
2460
+ </svg>
2808
2461
  </span>
2809
- </div>
2810
- </a>
2811
- </div>
2462
+ </span>
2463
+ </div>
2464
+ </a>
2812
2465
  </div>
2813
2466
  </div>
2814
- </li>
2815
- </ul>
2816
- </div>
2467
+ </div>
2468
+ </li>
2469
+ </ul>
2817
2470
  </div>
2818
2471
  </div>
2819
2472
  </div>
@@ -2823,353 +2476,351 @@ This demo populates the main Compass section with a dashboard, which is often us
2823
2476
  style="--pf-v6-l-grid--item--Order-on-lg:4"
2824
2477
  >
2825
2478
  <div class="pf-v6-l-flex pf-m-column">
2826
- <div class="pf-v6-c-compass__panel pf-m-no-padding">
2827
- <div
2828
- class="pf-v6-c-card pf-m-plain"
2829
- id="compass-dashboard-grid-events-card-1"
2830
- >
2831
- <div class="pf-v6-c-card__header">
2832
- <div class="pf-v6-c-card__actions pf-m-no-offset">
2833
- <button
2834
- class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2835
- type="button"
2836
- aria-expanded="false"
2837
- id="compass-dashboard-grid-events-card-1-select-dropdown"
2838
- >
2839
- <span class="pf-v6-c-menu-toggle__text">Status</span>
2840
- <span class="pf-v6-c-menu-toggle__controls">
2841
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2842
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2843
- </span>
2844
- </span>
2845
- </button>
2846
- </div>
2847
- <div
2848
- class="pf-v6-c-card__title"
2849
- id="compass-dashboard-grid-events-card-1-title1"
2850
- style="padding-block-start: 3px;"
2479
+ <div
2480
+ class="pf-v6-c-card pf-m-glass"
2481
+ id="compass-dashboard-grid-events-card-1"
2482
+ >
2483
+ <div class="pf-v6-c-card__header">
2484
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
2485
+ <button
2486
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2487
+ type="button"
2488
+ aria-expanded="false"
2489
+ id="compass-dashboard-grid-events-card-1-select-dropdown"
2851
2490
  >
2852
- <h2 class="pf-v6-c-title pf-m-xl">Events</h2>
2853
- </div>
2491
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
2492
+ <span class="pf-v6-c-menu-toggle__controls">
2493
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2494
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2495
+ </span>
2496
+ </span>
2497
+ </button>
2854
2498
  </div>
2855
- <div class="pf-v6-c-card__body">
2856
- <dl
2857
- class="pf-v6-c-description-list pf-m-compact"
2858
- aria-label="Events"
2859
- >
2860
- <div class="pf-v6-c-description-list__group">
2861
- <dt class="pf-v6-c-description-list__term">
2862
- <div class="pf-v6-l-flex pf-m-nowrap">
2863
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2864
- <span class="pf-v6-c-icon">
2865
- <span class="pf-v6-c-icon__content pf-m-danger">
2866
- <svg
2867
- class="pf-v6-svg"
2868
- viewBox="0 0 32 32"
2869
- fill="currentColor"
2870
- aria-hidden="true"
2871
- role="img"
2872
- width="1em"
2873
- height="1em"
2874
- >
2875
- <path
2876
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2877
- />
2878
- </svg>
2879
- </span>
2499
+ <div
2500
+ class="pf-v6-c-card__title"
2501
+ id="compass-dashboard-grid-events-card-1-title1"
2502
+ style="padding-block-start: 3px;"
2503
+ >
2504
+ <h2 class="pf-v6-c-title pf-m-xl">Events</h2>
2505
+ </div>
2506
+ </div>
2507
+ <div class="pf-v6-c-card__body">
2508
+ <dl
2509
+ class="pf-v6-c-description-list pf-m-compact"
2510
+ aria-label="Events"
2511
+ >
2512
+ <div class="pf-v6-c-description-list__group">
2513
+ <dt class="pf-v6-c-description-list__term">
2514
+ <div class="pf-v6-l-flex pf-m-nowrap">
2515
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2516
+ <span class="pf-v6-c-icon">
2517
+ <span class="pf-v6-c-icon__content pf-m-danger">
2518
+ <svg
2519
+ class="pf-v6-svg"
2520
+ viewBox="0 0 32 32"
2521
+ fill="currentColor"
2522
+ aria-hidden="true"
2523
+ role="img"
2524
+ width="1em"
2525
+ height="1em"
2526
+ >
2527
+ <path
2528
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2529
+ />
2530
+ </svg>
2880
2531
  </span>
2881
- </div>
2882
- <div class="pf-v6-l-flex__item">Readiness probe failed</div>
2883
- </div>
2884
- </dt>
2885
- <dd class="pf-v6-c-description-list__description">
2886
- <div
2887
- class="pf-v6-c-description-list__text"
2888
- >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
2889
- </dd>
2890
- <dd class="pf-v6-c-description-list__description">
2891
- <div class="pf-v6-c-description-list__text">
2892
- <time
2893
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2894
- >Jun 17, 11:02 am</time>
2532
+ </span>
2895
2533
  </div>
2896
- </dd>
2897
- </div>
2898
- <div class="pf-v6-c-description-list__group">
2899
- <dt class="pf-v6-c-description-list__term">
2900
- <div class="pf-v6-l-flex pf-m-nowrap">
2901
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2902
- <span class="pf-v6-c-icon">
2903
- <span class="pf-v6-c-icon__content pf-m-success">
2904
- <svg
2905
- class="pf-v6-svg"
2906
- viewBox="0 0 32 32"
2907
- fill="currentColor"
2908
- aria-hidden="true"
2909
- role="img"
2910
- width="1em"
2911
- height="1em"
2912
- >
2913
- <path
2914
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2915
- />
2916
- </svg>
2917
- </span>
2534
+ <div class="pf-v6-l-flex__item">Readiness probe failed</div>
2535
+ </div>
2536
+ </dt>
2537
+ <dd class="pf-v6-c-description-list__description">
2538
+ <div
2539
+ class="pf-v6-c-description-list__text"
2540
+ >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
2541
+ </dd>
2542
+ <dd class="pf-v6-c-description-list__description">
2543
+ <div class="pf-v6-c-description-list__text">
2544
+ <time
2545
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2546
+ >Jun 17, 11:02 am</time>
2547
+ </div>
2548
+ </dd>
2549
+ </div>
2550
+ <div class="pf-v6-c-description-list__group">
2551
+ <dt class="pf-v6-c-description-list__term">
2552
+ <div class="pf-v6-l-flex pf-m-nowrap">
2553
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2554
+ <span class="pf-v6-c-icon">
2555
+ <span class="pf-v6-c-icon__content pf-m-success">
2556
+ <svg
2557
+ class="pf-v6-svg"
2558
+ viewBox="0 0 32 32"
2559
+ fill="currentColor"
2560
+ aria-hidden="true"
2561
+ role="img"
2562
+ width="1em"
2563
+ height="1em"
2564
+ >
2565
+ <path
2566
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2567
+ />
2568
+ </svg>
2918
2569
  </span>
2919
- </div>
2920
- <div class="pf-v6-l-flex__item">Successful assignment</div>
2921
- </div>
2922
- </dt>
2923
- <dd class="pf-v6-c-description-list__description">
2924
- <div
2925
- class="pf-v6-c-description-list__text"
2926
- >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
2927
- </dd>
2928
- <dd class="pf-v6-c-description-list__description">
2929
- <div class="pf-v6-c-description-list__text">
2930
- <time
2931
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2932
- >Jun 17, 11:13 am</time>
2933
- </div>
2934
- </dd>
2935
- </div>
2936
- <div class="pf-v6-c-description-list__group">
2937
- <dt class="pf-v6-c-description-list__term">
2938
- <div class="pf-v6-l-flex pf-m-nowrap">
2939
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2940
- <svg
2941
- class="pf-v6-c-spinner pf-m-md"
2942
- role="progressbar"
2943
- viewBox="0 0 100 100"
2944
- aria-label="Loading"
2945
- >
2946
- <circle
2947
- class="pf-v6-c-spinner__path"
2948
- cx="50"
2949
- cy="50"
2950
- r="45"
2951
- fill="none"
2952
- />
2953
- </svg>
2954
- </div>
2955
- <div class="pf-v6-l-flex__item">Pulling image</div>
2570
+ </span>
2956
2571
  </div>
2957
- </dt>
2958
- <dd class="pf-v6-c-description-list__description">
2959
- <div
2960
- class="pf-v6-c-description-list__text"
2961
- >Pulling image "openshift/hello-openshift"</div>
2962
- </dd>
2963
- <dd class="pf-v6-c-description-list__description">
2964
- <div class="pf-v6-c-description-list__text">
2965
- <time
2966
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2967
- >Jun 17, 10:59 am</time>
2572
+ <div class="pf-v6-l-flex__item">Successful assignment</div>
2573
+ </div>
2574
+ </dt>
2575
+ <dd class="pf-v6-c-description-list__description">
2576
+ <div
2577
+ class="pf-v6-c-description-list__text"
2578
+ >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
2579
+ </dd>
2580
+ <dd class="pf-v6-c-description-list__description">
2581
+ <div class="pf-v6-c-description-list__text">
2582
+ <time
2583
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2584
+ >Jun 17, 11:13 am</time>
2585
+ </div>
2586
+ </dd>
2587
+ </div>
2588
+ <div class="pf-v6-c-description-list__group">
2589
+ <dt class="pf-v6-c-description-list__term">
2590
+ <div class="pf-v6-l-flex pf-m-nowrap">
2591
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2592
+ <svg
2593
+ class="pf-v6-c-spinner pf-m-md"
2594
+ role="progressbar"
2595
+ viewBox="0 0 100 100"
2596
+ aria-label="Loading"
2597
+ >
2598
+ <circle
2599
+ class="pf-v6-c-spinner__path"
2600
+ cx="50"
2601
+ cy="50"
2602
+ r="45"
2603
+ fill="none"
2604
+ />
2605
+ </svg>
2968
2606
  </div>
2969
- </dd>
2970
- </div>
2971
- <div class="pf-v6-c-description-list__group">
2972
- <dt class="pf-v6-c-description-list__term">
2973
- <div class="pf-v6-l-flex pf-m-nowrap">
2974
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2975
- <span class="pf-v6-c-icon">
2976
- <span class="pf-v6-c-icon__content pf-m-success">
2977
- <svg
2978
- class="pf-v6-svg"
2979
- viewBox="0 0 32 32"
2980
- fill="currentColor"
2981
- aria-hidden="true"
2982
- role="img"
2983
- width="1em"
2984
- height="1em"
2985
- >
2986
- <path
2987
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2988
- />
2989
- </svg>
2990
- </span>
2607
+ <div class="pf-v6-l-flex__item">Pulling image</div>
2608
+ </div>
2609
+ </dt>
2610
+ <dd class="pf-v6-c-description-list__description">
2611
+ <div
2612
+ class="pf-v6-c-description-list__text"
2613
+ >Pulling image "openshift/hello-openshift"</div>
2614
+ </dd>
2615
+ <dd class="pf-v6-c-description-list__description">
2616
+ <div class="pf-v6-c-description-list__text">
2617
+ <time
2618
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2619
+ >Jun 17, 10:59 am</time>
2620
+ </div>
2621
+ </dd>
2622
+ </div>
2623
+ <div class="pf-v6-c-description-list__group">
2624
+ <dt class="pf-v6-c-description-list__term">
2625
+ <div class="pf-v6-l-flex pf-m-nowrap">
2626
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2627
+ <span class="pf-v6-c-icon">
2628
+ <span class="pf-v6-c-icon__content pf-m-success">
2629
+ <svg
2630
+ class="pf-v6-svg"
2631
+ viewBox="0 0 32 32"
2632
+ fill="currentColor"
2633
+ aria-hidden="true"
2634
+ role="img"
2635
+ width="1em"
2636
+ height="1em"
2637
+ >
2638
+ <path
2639
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2640
+ />
2641
+ </svg>
2991
2642
  </span>
2992
- </div>
2993
- <div class="pf-v6-l-flex__item">Created container</div>
2994
- </div>
2995
- </dt>
2996
- <dd class="pf-v6-c-description-list__description">
2997
- <div
2998
- class="pf-v6-c-description-list__text"
2999
- >Created container hello-openshift</div>
3000
- </dd>
3001
- <dd class="pf-v6-c-description-list__description">
3002
- <div class="pf-v6-c-description-list__text">
3003
- <time
3004
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3005
- >Jun 17, 10:45 am</time>
2643
+ </span>
3006
2644
  </div>
3007
- </dd>
3008
- </div>
2645
+ <div class="pf-v6-l-flex__item">Created container</div>
2646
+ </div>
2647
+ </dt>
2648
+ <dd class="pf-v6-c-description-list__description">
2649
+ <div
2650
+ class="pf-v6-c-description-list__text"
2651
+ >Created container hello-openshift</div>
2652
+ </dd>
2653
+ <dd class="pf-v6-c-description-list__description">
2654
+ <div class="pf-v6-c-description-list__text">
2655
+ <time
2656
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2657
+ >Jun 17, 10:45 am</time>
2658
+ </div>
2659
+ </dd>
2660
+ </div>
3009
2661
 
3010
- <div class="pf-v6-c-description-list__group">
3011
- <dt class="pf-v6-c-description-list__term">
3012
- <div class="pf-v6-l-flex pf-m-nowrap">
3013
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
3014
- <span class="pf-v6-c-icon">
3015
- <span class="pf-v6-c-icon__content pf-m-warning">
3016
- <svg
3017
- class="pf-v6-svg"
3018
- viewBox="0 0 32 32"
3019
- fill="currentColor"
3020
- aria-hidden="true"
3021
- role="img"
3022
- width="1em"
3023
- height="1em"
3024
- >
3025
- <path
3026
- d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
3027
- />
3028
- </svg>
3029
- </span>
2662
+ <div class="pf-v6-c-description-list__group">
2663
+ <dt class="pf-v6-c-description-list__term">
2664
+ <div class="pf-v6-l-flex pf-m-nowrap">
2665
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2666
+ <span class="pf-v6-c-icon">
2667
+ <span class="pf-v6-c-icon__content pf-m-warning">
2668
+ <svg
2669
+ class="pf-v6-svg"
2670
+ viewBox="0 0 32 32"
2671
+ fill="currentColor"
2672
+ aria-hidden="true"
2673
+ role="img"
2674
+ width="1em"
2675
+ height="1em"
2676
+ >
2677
+ <path
2678
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
2679
+ />
2680
+ </svg>
3030
2681
  </span>
3031
- </div>
3032
- <div
3033
- class="pf-v6-l-flex__item"
3034
- >CPU utilitization over 50%</div>
2682
+ </span>
3035
2683
  </div>
3036
- </dt>
3037
- <dd class="pf-v6-c-description-list__description">
3038
2684
  <div
3039
- class="pf-v6-c-description-list__text"
3040
- >Migrated 2 pods to other hosts</div>
3041
- </dd>
3042
- <dd class="pf-v6-c-description-list__description">
3043
- <div class="pf-v6-c-description-list__text">
3044
- <time
3045
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3046
- >Jun 17, 10:33 am</time>
3047
- </div>
3048
- </dd>
3049
- </div>
2685
+ class="pf-v6-l-flex__item"
2686
+ >CPU utilitization over 50%</div>
2687
+ </div>
2688
+ </dt>
2689
+ <dd class="pf-v6-c-description-list__description">
2690
+ <div
2691
+ class="pf-v6-c-description-list__text"
2692
+ >Migrated 2 pods to other hosts</div>
2693
+ </dd>
2694
+ <dd class="pf-v6-c-description-list__description">
2695
+ <div class="pf-v6-c-description-list__text">
2696
+ <time
2697
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2698
+ >Jun 17, 10:33 am</time>
2699
+ </div>
2700
+ </dd>
2701
+ </div>
3050
2702
 
3051
- <div class="pf-v6-c-description-list__group">
3052
- <dt class="pf-v6-c-description-list__term">
3053
- <div class="pf-v6-l-flex pf-m-nowrap">
3054
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
3055
- <span class="pf-v6-c-icon">
3056
- <span class="pf-v6-c-icon__content pf-m-danger">
3057
- <svg
3058
- class="pf-v6-svg"
3059
- viewBox="0 0 32 32"
3060
- fill="currentColor"
3061
- aria-hidden="true"
3062
- role="img"
3063
- width="1em"
3064
- height="1em"
3065
- >
3066
- <path
3067
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
3068
- />
3069
- </svg>
3070
- </span>
2703
+ <div class="pf-v6-c-description-list__group">
2704
+ <dt class="pf-v6-c-description-list__term">
2705
+ <div class="pf-v6-l-flex pf-m-nowrap">
2706
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2707
+ <span class="pf-v6-c-icon">
2708
+ <span class="pf-v6-c-icon__content pf-m-danger">
2709
+ <svg
2710
+ class="pf-v6-svg"
2711
+ viewBox="0 0 32 32"
2712
+ fill="currentColor"
2713
+ aria-hidden="true"
2714
+ role="img"
2715
+ width="1em"
2716
+ height="1em"
2717
+ >
2718
+ <path
2719
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2720
+ />
2721
+ </svg>
3071
2722
  </span>
3072
- </div>
3073
- <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
3074
- </div>
3075
- </dt>
3076
- <dd class="pf-v6-c-description-list__description">
3077
- <div
3078
- class="pf-v6-c-description-list__text"
3079
- >Rebuild initiated as Disk 5 failed</div>
3080
- </dd>
3081
- <dd class="pf-v6-c-description-list__description">
3082
- <div class="pf-v6-c-description-list__text">
3083
- <time
3084
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3085
- >Jun 17, 10:33 am</time>
2723
+ </span>
3086
2724
  </div>
3087
- </dd>
3088
- </div>
2725
+ <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
2726
+ </div>
2727
+ </dt>
2728
+ <dd class="pf-v6-c-description-list__description">
2729
+ <div
2730
+ class="pf-v6-c-description-list__text"
2731
+ >Rebuild initiated as Disk 5 failed</div>
2732
+ </dd>
2733
+ <dd class="pf-v6-c-description-list__description">
2734
+ <div class="pf-v6-c-description-list__text">
2735
+ <time
2736
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2737
+ >Jun 17, 10:33 am</time>
2738
+ </div>
2739
+ </dd>
2740
+ </div>
3089
2741
 
3090
- <div class="pf-v6-c-description-list__group">
3091
- <dt class="pf-v6-c-description-list__term">
3092
- <div class="pf-v6-l-flex pf-m-nowrap">
3093
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
3094
- <span class="pf-v6-c-icon">
3095
- <span class="pf-v6-c-icon__content pf-m-success">
3096
- <svg
3097
- class="pf-v6-svg"
3098
- viewBox="0 0 32 32"
3099
- fill="currentColor"
3100
- aria-hidden="true"
3101
- role="img"
3102
- width="1em"
3103
- height="1em"
3104
- >
3105
- <path
3106
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
3107
- />
3108
- </svg>
3109
- </span>
2742
+ <div class="pf-v6-c-description-list__group">
2743
+ <dt class="pf-v6-c-description-list__term">
2744
+ <div class="pf-v6-l-flex pf-m-nowrap">
2745
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2746
+ <span class="pf-v6-c-icon">
2747
+ <span class="pf-v6-c-icon__content pf-m-success">
2748
+ <svg
2749
+ class="pf-v6-svg"
2750
+ viewBox="0 0 32 32"
2751
+ fill="currentColor"
2752
+ aria-hidden="true"
2753
+ role="img"
2754
+ width="1em"
2755
+ height="1em"
2756
+ >
2757
+ <path
2758
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2759
+ />
2760
+ </svg>
3110
2761
  </span>
3111
- </div>
3112
- <div class="pf-v6-l-flex__item">Created container</div>
3113
- </div>
3114
- </dt>
3115
- <dd class="pf-v6-c-description-list__description">
3116
- <div
3117
- class="pf-v6-c-description-list__text"
3118
- >Created container hello-openshift-123</div>
3119
- </dd>
3120
- <dd class="pf-v6-c-description-list__description">
3121
- <div class="pf-v6-c-description-list__text">
3122
- <time
3123
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3124
- >Jun 17, 10:31 am</time>
2762
+ </span>
3125
2763
  </div>
3126
- </dd>
3127
- </div>
2764
+ <div class="pf-v6-l-flex__item">Created container</div>
2765
+ </div>
2766
+ </dt>
2767
+ <dd class="pf-v6-c-description-list__description">
2768
+ <div
2769
+ class="pf-v6-c-description-list__text"
2770
+ >Created container hello-openshift-123</div>
2771
+ </dd>
2772
+ <dd class="pf-v6-c-description-list__description">
2773
+ <div class="pf-v6-c-description-list__text">
2774
+ <time
2775
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2776
+ >Jun 17, 10:31 am</time>
2777
+ </div>
2778
+ </dd>
2779
+ </div>
3128
2780
 
3129
- <div class="pf-v6-c-description-list__group">
3130
- <dt class="pf-v6-c-description-list__term">
3131
- <div class="pf-v6-l-flex pf-m-nowrap">
3132
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
3133
- <span class="pf-v6-c-icon">
3134
- <span class="pf-v6-c-icon__content pf-m-success">
3135
- <svg
3136
- class="pf-v6-svg"
3137
- viewBox="0 0 32 32"
3138
- fill="currentColor"
3139
- aria-hidden="true"
3140
- role="img"
3141
- width="1em"
3142
- height="1em"
3143
- >
3144
- <path
3145
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
3146
- />
3147
- </svg>
3148
- </span>
2781
+ <div class="pf-v6-c-description-list__group">
2782
+ <dt class="pf-v6-c-description-list__term">
2783
+ <div class="pf-v6-l-flex pf-m-nowrap">
2784
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2785
+ <span class="pf-v6-c-icon">
2786
+ <span class="pf-v6-c-icon__content pf-m-success">
2787
+ <svg
2788
+ class="pf-v6-svg"
2789
+ viewBox="0 0 32 32"
2790
+ fill="currentColor"
2791
+ aria-hidden="true"
2792
+ role="img"
2793
+ width="1em"
2794
+ height="1em"
2795
+ >
2796
+ <path
2797
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2798
+ />
2799
+ </svg>
3149
2800
  </span>
3150
- </div>
3151
- <div class="pf-v6-l-flex__item">Created container</div>
3152
- </div>
3153
- </dt>
3154
- <dd class="pf-v6-c-description-list__description">
3155
- <div
3156
- class="pf-v6-c-description-list__text"
3157
- >Created container hello-openshift-456</div>
3158
- </dd>
3159
- <dd class="pf-v6-c-description-list__description">
3160
- <div class="pf-v6-c-description-list__text">
3161
- <time
3162
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3163
- >Jun 17, 10:30 am</time>
2801
+ </span>
3164
2802
  </div>
3165
- </dd>
3166
- </div>
3167
- </dl>
3168
- </div>
3169
- <hr class="pf-v6-c-divider" />
3170
- <div class="pf-v6-c-card__footer">
3171
- <a href="#">View all events</a>
3172
- </div>
2803
+ <div class="pf-v6-l-flex__item">Created container</div>
2804
+ </div>
2805
+ </dt>
2806
+ <dd class="pf-v6-c-description-list__description">
2807
+ <div
2808
+ class="pf-v6-c-description-list__text"
2809
+ >Created container hello-openshift-456</div>
2810
+ </dd>
2811
+ <dd class="pf-v6-c-description-list__description">
2812
+ <div class="pf-v6-c-description-list__text">
2813
+ <time
2814
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2815
+ >Jun 17, 10:30 am</time>
2816
+ </div>
2817
+ </dd>
2818
+ </div>
2819
+ </dl>
2820
+ </div>
2821
+ <hr class="pf-v6-c-divider" />
2822
+ <div class="pf-v6-c-card__footer">
2823
+ <a href="#">View all events</a>
3173
2824
  </div>
3174
2825
  </div>
3175
2826
  </div>
@@ -3178,9 +2829,7 @@ This demo populates the main Compass section with a dashboard, which is often us
3178
2829
  </div>
3179
2830
  <div class="pf-v6-c-compass__main-footer pf-m-expanded">
3180
2831
  <div class="pf-v6-c-compass__message-bar">
3181
- <div
3182
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
3183
- >chatbot message bar</div>
2832
+ <div class="pf-v6-c-panel pf-m-pill">chatbot message bar</div>
3184
2833
  </div>
3185
2834
  </div>
3186
2835
  </div>
@@ -3319,8 +2968,8 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3319
2968
  <div
3320
2969
  class="pf-v6-c-compass pf-m-animate-smoothly"
3321
2970
  style="
3322
- --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
3323
- --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
2971
+ --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
2972
+ --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
3324
2973
  "
3325
2974
  >
3326
2975
  <div class="pf-v6-c-compass__header pf-m-expanded">
@@ -3832,771 +3481,74 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3832
3481
  <span class="pf-v6-c-button__icon">
3833
3482
  <svg
3834
3483
  class="pf-v6-svg"
3835
- viewBox="0 0 32 32"
3836
- fill="currentColor"
3837
- aria-hidden="true"
3838
- role="img"
3839
- width="1em"
3840
- height="1em"
3841
- >
3842
- <path
3843
- d="M17.439 2.102a1 1 0 0 0-1.054.109L7.656 9H2.5C1.673 9 1 9.673 1 10.5v11c0 .827.673 1.5 1.5 1.5h5.157l8.729 6.789a.998.998 0 0 0 1.053.109c.343-.168.561-.517.561-.898V3a1 1 0 0 0-.561-.898ZM16 26.955l-7.386-5.744A1 1 0 0 0 8 21H3V11h5a.997.997 0 0 0 .614-.211L16 5.045v21.91ZM31 16a14.94 14.94 0 0 1-4.284 10.488.997.997 0 0 1-1.414.018 1 1 0 0 1-.018-1.414C27.68 22.637 29 19.408 29 16s-1.319-6.637-3.716-9.092a.999.999 0 1 1 1.432-1.396A14.94 14.94 0 0 1 31 16Zm-6 0a9.007 9.007 0 0 1-2.249 5.95.996.996 0 0 1-1.411.091 1 1 0 0 1-.091-1.411C22.378 19.346 23 17.702 23 16s-.622-3.346-1.751-4.63a1 1 0 0 1 1.502-1.32A9.007 9.007 0 0 1 25 16Z"
3844
- />
3845
- </svg>
3846
- </span>
3847
- </button>
3848
- </div>
3849
- <div class="pf-v6-c-action-list__item">
3850
- <button
3851
- class="pf-v6-c-button pf-m-circle pf-m-plain"
3852
- type="button"
3853
- aria-label="Use microphone"
3854
- >
3855
- <span class="pf-v6-c-button__icon">
3856
- <svg
3857
- class="pf-v6-svg"
3858
- viewBox="0 0 32 32"
3859
- fill="currentColor"
3860
- aria-hidden="true"
3861
- role="img"
3862
- width="1em"
3863
- height="1em"
3864
- >
3865
- <path
3866
- d="M16 22c3.86 0 7-3.141 7-7V8c0-3.859-3.14-7-7-7S9 4.141 9 8v7c0 3.859 3.14 7 7 7ZM11 8c0-2.757 2.243-5 5-5s5 2.243 5 5v7c0 2.757-2.243 5-5 5s-5-2.243-5-5V8Zm5.99 17.95c0 .018.01.032.01.05v2.021h5a1 1 0 1 1 0 2H10.02a1 1 0 1 1 0-2H15V26c0-.018.009-.033.01-.05C9.407 25.447 5 20.731 5 15a1 1 0 1 1 2 0c0 4.963 4.038 9 9 9s9-4.037 9-9a1 1 0 1 1 2 0c0 5.731-4.407 10.447-10.01 10.95Z"
3867
- />
3868
- </svg>
3869
- </span>
3870
- </button>
3871
- </div>
3872
- </div>
3873
- </div>
3874
- </div>
3875
- <div class="pf-v6-c-compass__main">
3876
- <div class="pf-v6-c-compass__main-header">
3877
- <div class="pf-v6-c-compass__panel">
3878
- <div class="pf-v6-c-compass__main-header-content">
3879
- <div class="pf-v6-c-compass__main-header-title">
3880
- <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
3881
- </div>
3882
- <div class="pf-v6-c-compass__main-header-toolbar">
3883
- <div class="pf-v6-c-action-list">
3884
- <div class="pf-v6-c-action-list__group">
3885
- <div class="pf-v6-c-action-list__item">
3886
- <button class="pf-v6-c-button pf-m-primary" type="button">
3887
- <span class="pf-v6-c-button__text">Add integration</span>
3888
- </button>
3889
- </div>
3890
- <div class="pf-v6-c-action-list__item">
3891
- <button class="pf-v6-c-button pf-m-secondary" type="button">
3892
- <span class="pf-v6-c-button__text">Test integration</span>
3893
- </button>
3894
- </div>
3895
- </div>
3896
- </div>
3897
- </div>
3898
- </div>
3899
- </div>
3900
- </div>
3901
- <div class="pf-v6-c-compass__content">
3902
- <div class="pf-v6-l-grid pf-m-all-6-col pf-m-gutter">
3903
- <div class="pf-v6-c-compass__panel pf-m-scrollable">
3904
- <div class="pf-v6-l-flex pf-m-column pf-m-gap-md">
3905
- <div class="pf-v6-c-toolbar" id="-toolbar">
3906
- <div class="pf-v6-c-toolbar__content">
3907
- <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
3908
- <div
3909
- class="pf-v6-c-toolbar__group pf-m-show-on-xl pf-m-toggle-group"
3910
- >
3911
- <div class="pf-v6-c-toolbar__toggle">
3912
- <button
3913
- class="pf-v6-c-menu-toggle pf-m-plain"
3914
- type="button"
3915
- aria-expanded="false"
3916
- aria-label="Show filters"
3917
- aria-controls="-toolbar-expandable-content"
3918
- >
3919
- <span class="pf-v6-c-menu-toggle__icon">
3920
- <i class="fas fa-filter" aria-hidden="true"></i>
3921
- </span>
3922
- </button>
3923
- </div>
3924
- <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
3925
- <div
3926
- class="pf-v6-c-menu-toggle pf-m-split-button"
3927
- id="-toolbar-check"
3928
- >
3929
- <label
3930
- class="pf-v6-c-check pf-m-standalone"
3931
- for="-toolbar-check-check-input"
3932
- >
3933
- <input
3934
- class="pf-v6-c-check__input"
3935
- type="checkbox"
3936
- id="-toolbar-check-check-input"
3937
- name="-toolbar-check-check-input"
3938
- aria-label="Standalone check"
3939
- />
3940
- </label>
3941
- <button
3942
- class="pf-v6-c-menu-toggle__button"
3943
- type="button"
3944
- aria-expanded="false"
3945
- id="-toolbar-menu-toggle-toggle-button"
3946
- aria-label="Menu toggle"
3947
- >
3948
- <span class="pf-v6-c-menu-toggle__controls">
3949
- <span class="pf-v6-c-menu-toggle__toggle-icon">
3950
- <i
3951
- class="fas fa-caret-down fa-fw"
3952
- aria-hidden="true"
3953
- ></i>
3954
- </span>
3955
- </span>
3956
- </button>
3957
- </div>
3958
- </div>
3959
-
3960
- <div class="pf-v6-c-toolbar__item">
3961
- <button
3962
- class="pf-v6-c-menu-toggle"
3963
- type="button"
3964
- aria-expanded="false"
3965
- id="-toolbar-select-checkbox-status"
3966
- >
3967
- <span class="pf-v6-c-menu-toggle__text">Status</span>
3968
- <span class="pf-v6-c-menu-toggle__controls">
3969
- <span class="pf-v6-c-menu-toggle__toggle-icon">
3970
- <i
3971
- class="fas fa-caret-down fa-fw"
3972
- aria-hidden="true"
3973
- ></i>
3974
- </span>
3975
- </span>
3976
- </button>
3977
- </div>
3978
- </div>
3979
-
3980
- <div
3981
- class="pf-v6-c-overflow-menu"
3982
- id="-toolbar-overflow-menu"
3983
- >
3984
- <div
3985
- class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
3986
- >
3987
- <div
3988
- class="pf-v6-c-overflow-menu__group pf-m-button-group"
3989
- >
3990
- <div class="pf-v6-c-overflow-menu__item">
3991
- <button
3992
- class="pf-v6-c-button pf-m-primary"
3993
- type="button"
3994
- >
3995
- <span class="pf-v6-c-button__text">Create instance</span>
3996
- </button>
3997
- </div>
3998
- </div>
3999
- </div>
4000
- <div class="pf-v6-c-overflow-menu__control">
4001
- <button
4002
- class="pf-v6-c-menu-toggle pf-m-plain"
4003
- type="button"
4004
- aria-expanded="false"
4005
- aria-label="Menu toggle"
4006
- id="-toolbar-overflow-menu-toggle"
4007
- >
4008
- <span class="pf-v6-c-menu-toggle__icon">
4009
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4010
- </span>
4011
- </button>
4012
- </div>
4013
- </div>
4014
-
4015
- <div class="pf-v6-c-toolbar__item pf-m-pagination">
4016
- <div class="pf-v6-c-pagination pf-m-compact">
4017
- <div class="pf-v6-c-pagination__page-menu">
4018
- <button
4019
- class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
4020
- type="button"
4021
- aria-expanded="false"
4022
- id="-toolbar-top-pagination"
4023
- >
4024
- <span class="pf-v6-c-menu-toggle__text">
4025
- <b>1 - 10</b>&nbsp;of&nbsp;
4026
- <b>36</b>
4027
- </span>
4028
- <span class="pf-v6-c-menu-toggle__controls">
4029
- <span class="pf-v6-c-menu-toggle__toggle-icon">
4030
- <i
4031
- class="fas fa-caret-down fa-fw"
4032
- aria-hidden="true"
4033
- ></i>
4034
- </span>
4035
- </span>
4036
- </button>
4037
- </div>
4038
- <nav
4039
- class="pf-v6-c-pagination__nav"
4040
- aria-label="Toolbar top pagination"
4041
- >
4042
- <div class="pf-v6-c-pagination__nav-control pf-m-prev">
4043
- <button
4044
- class="pf-v6-c-button pf-m-plain"
4045
- type="button"
4046
- disabled
4047
- aria-label="Go to previous page"
4048
- >
4049
- <span class="pf-v6-c-button__icon">
4050
- <svg
4051
- class="pf-v6-svg"
4052
- viewBox="0 0 256 512"
4053
- fill="currentColor"
4054
- aria-hidden="true"
4055
- role="img"
4056
- width="1em"
4057
- height="1em"
4058
- >
4059
- <path
4060
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
4061
- />
4062
- </svg>
4063
- </span>
4064
- </button>
4065
- </div>
4066
- <div class="pf-v6-c-pagination__nav-control pf-m-next">
4067
- <button
4068
- class="pf-v6-c-button pf-m-plain"
4069
- type="button"
4070
- aria-label="Go to next page"
4071
- >
4072
- <span class="pf-v6-c-button__icon">
4073
- <svg
4074
- class="pf-v6-svg"
4075
- viewBox="0 0 256 512"
4076
- fill="currentColor"
4077
- aria-hidden="true"
4078
- role="img"
4079
- width="1em"
4080
- height="1em"
4081
- >
4082
- <path
4083
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
4084
- />
4085
- </svg>
4086
- </span>
4087
- </button>
4088
- </div>
4089
- </nav>
4090
- </div>
4091
- </div>
4092
- </div>
4093
-
4094
- <div
4095
- class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
4096
- id="-toolbar-expandable-content"
4097
- hidden
4098
- ></div>
4099
- </div>
4100
- </div>
4101
- <div class="pf-v6-l-gallery pf-m-gutter">
4102
- <div
4103
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4104
- id="card-view-basic-example-gallery-card-empty-state"
4105
- >
4106
- <div class="pf-v6-l-bullseye">
4107
- <div class="pf-v6-c-empty-state pf-m-xs">
4108
- <div class="pf-v6-c-empty-state__content">
4109
- <div class="pf-v6-c-empty-state__icon">
4110
- <svg
4111
- class="pf-v6-svg"
4112
- viewBox="0 0 32 32"
4113
- fill="currentColor"
4114
- aria-hidden="true"
4115
- role="img"
4116
- width="1em"
4117
- height="1em"
4118
- >
4119
- <path
4120
- d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
4121
- />
4122
- </svg>
4123
- </div>
4124
- <div class="pf-v6-c-card__title">
4125
- <h2
4126
- class="pf-v6-c-card__title-text pf-m-md"
4127
- >Add a new card to your page</h2>
4128
- </div>
4129
- <button class="pf-v6-c-button pf-m-link" type="button">
4130
- <span class="pf-v6-c-button__text">Add card</span>
4131
- </button>
4132
- </div>
4133
- </div>
4134
- </div>
4135
- </div>
4136
- <div
4137
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4138
- id="card-view-basic-example-gallery-card-1"
4139
- >
4140
- <div class="pf-v6-c-card__header">
4141
- <img
4142
- src="/assets/images/PF-IconLogo.svg"
4143
- alt="PatternFly logo"
4144
- />
4145
- <div class="pf-v6-c-card__actions">
4146
- <button
4147
- class="pf-v6-c-menu-toggle pf-m-plain"
4148
- type="button"
4149
- aria-expanded="false"
4150
- aria-label="Menu toggle"
4151
- id="card-view-basic-example-gallery-card-1-toggle"
4152
- >
4153
- <span class="pf-v6-c-menu-toggle__icon">
4154
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4155
- </span>
4156
- </button>
4157
- <div class="pf-v6-c-check pf-m-standalone">
4158
- <input
4159
- class="pf-v6-c-check__input"
4160
- type="checkbox"
4161
- id="card-view-basic-example-gallery-card-1-check"
4162
- name="card-view-basic-example-gallery-card-1-check"
4163
- aria-labelledby="card-view-basic-example-gallery-card-1-check-label"
4164
- />
4165
- </div>
4166
- </div>
4167
- </div>
4168
- <div class="pf-v6-c-card__title">
4169
- <h2
4170
- class="pf-v6-c-card__title-text"
4171
- id="card-view-basic-example-gallery-card-1-check-label"
4172
- >Patternfly</h2>
4173
- <div class="pf-v6-c-content">
4174
- <small>Provided by Red Hat</small>
4175
- </div>
4176
- </div>
4177
- <div
4178
- class="pf-v6-c-card__body"
4179
- >PatternFly is a community project that promotes design commonality and improves user experience.</div>
4180
- </div>
4181
- <div
4182
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4183
- id="card-view-basic-example-gallery-card-2"
4184
- >
4185
- <div class="pf-v6-c-card__header">
4186
- <img
4187
- src="/assets/images/activemq-core_200x150.png"
4188
- width="60px"
4189
- alt="Logo"
4190
- />
4191
- <div class="pf-v6-c-card__actions">
4192
- <button
4193
- class="pf-v6-c-menu-toggle pf-m-plain"
4194
- type="button"
4195
- aria-expanded="false"
4196
- aria-label="Menu toggle"
4197
- id="card-view-basic-example-gallery-card-2-toggle"
4198
- >
4199
- <span class="pf-v6-c-menu-toggle__icon">
4200
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4201
- </span>
4202
- </button>
4203
- <div class="pf-v6-c-check pf-m-standalone">
4204
- <input
4205
- class="pf-v6-c-check__input"
4206
- type="checkbox"
4207
- id="card-view-basic-example-gallery-card-2-check"
4208
- name="card-view-basic-example-gallery-card-2-check"
4209
- aria-labelledby="card-view-basic-example-gallery-card-2-check-label"
4210
- />
4211
- </div>
4212
- </div>
4213
- </div>
4214
- <div class="pf-v6-c-card__title">
4215
- <h2
4216
- class="pf-v6-c-card__title-text"
4217
- id="card-view-basic-example-gallery-card-2-check-label"
4218
- >ActiveMq</h2>
4219
- <div class="pf-v6-c-content">
4220
- <small>Provided by Red Hat</small>
4221
- </div>
4222
- </div>
4223
- <div
4224
- class="pf-v6-c-card__body"
4225
- >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
4226
- </div>
4227
- <div
4228
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4229
- id="card-view-basic-example-gallery-card-3"
4230
- >
4231
- <div class="pf-v6-c-card__header">
4232
- <img
4233
- src="/assets/images/camel-spark_200x150.png"
4234
- width="60px"
4235
- alt="Logo"
4236
- />
4237
- <div class="pf-v6-c-card__actions">
4238
- <button
4239
- class="pf-v6-c-menu-toggle pf-m-plain"
4240
- type="button"
4241
- aria-expanded="false"
4242
- aria-label="Menu toggle"
4243
- id="card-view-basic-example-gallery-card-3-toggle"
4244
- >
4245
- <span class="pf-v6-c-menu-toggle__icon">
4246
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4247
- </span>
4248
- </button>
4249
- <div class="pf-v6-c-check pf-m-standalone">
4250
- <input
4251
- class="pf-v6-c-check__input"
4252
- type="checkbox"
4253
- id="card-view-basic-example-gallery-card-3-check"
4254
- name="card-view-basic-example-gallery-card-3-check"
4255
- aria-labelledby="card-view-basic-example-gallery-card-3-check-label"
4256
- />
4257
- </div>
4258
- </div>
4259
- </div>
4260
- <div class="pf-v6-c-card__title">
4261
- <h2
4262
- class="pf-v6-c-card__title-text"
4263
- id="card-view-basic-example-gallery-card-3-check-label"
4264
- >Apache Spark</h2>
4265
- <div class="pf-v6-c-content">
4266
- <small>Provided by Red Hat</small>
4267
- </div>
4268
- </div>
4269
- <div
4270
- class="pf-v6-c-card__body"
4271
- >This documentation page covers the Apache Spark component for the Apache Camel.</div>
4272
- </div>
4273
- <div
4274
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4275
- id="card-view-basic-example-gallery-card-4"
4276
- >
4277
- <div class="pf-v6-c-card__header">
4278
- <img
4279
- src="/assets/images/camel-avro_200x150.png"
4280
- width="60px"
4281
- alt="Logo"
4282
- />
4283
- <div class="pf-v6-c-card__actions">
4284
- <button
4285
- class="pf-v6-c-menu-toggle pf-m-plain"
4286
- type="button"
4287
- aria-expanded="false"
4288
- aria-label="Menu toggle"
4289
- id="card-view-basic-example-gallery-card-4-toggle"
4290
- >
4291
- <span class="pf-v6-c-menu-toggle__icon">
4292
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4293
- </span>
4294
- </button>
4295
- <div class="pf-v6-c-check pf-m-standalone">
4296
- <input
4297
- class="pf-v6-c-check__input"
4298
- type="checkbox"
4299
- id="card-view-basic-example-gallery-card-4-check"
4300
- name="card-view-basic-example-gallery-card-4-check"
4301
- aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
4302
- />
4303
- </div>
4304
- </div>
4305
- </div>
4306
- <div class="pf-v6-c-card__title">
4307
- <h2
4308
- class="pf-v6-c-card__title-text"
4309
- id="card-view-basic-example-gallery-card-4-check-label"
4310
- >Avro</h2>
4311
- <div class="pf-v6-c-content">
4312
- <small>Provided by Red Hat</small>
4313
- </div>
4314
- </div>
4315
- <div
4316
- class="pf-v6-c-card__body"
4317
- >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
4318
- </div>
4319
- <div
4320
- class="pf-v6-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
4321
- id="card-view-basic-example-gallery-card-5"
4322
- >
4323
- <div class="pf-v6-c-card__header">
4324
- <img
4325
- src="/assets/images/FuseConnector_Icons_AzureServices.png"
4326
- width="60px"
4327
- alt="Logo"
4328
- />
4329
- <div class="pf-v6-c-card__actions">
4330
- <button
4331
- class="pf-v6-c-menu-toggle pf-m-plain"
4332
- type="button"
4333
- aria-expanded="false"
4334
- aria-label="Menu toggle"
4335
- id="card-view-basic-example-gallery-card-5-toggle"
4336
- >
4337
- <span class="pf-v6-c-menu-toggle__icon">
4338
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4339
- </span>
4340
- </button>
4341
- <div class="pf-v6-c-check pf-m-standalone">
4342
- <input
4343
- class="pf-v6-c-check__input"
4344
- type="checkbox"
4345
- id="card-view-basic-example-gallery-card-5-check"
4346
- name="card-view-basic-example-gallery-card-5-check"
4347
- aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
4348
- />
4349
- </div>
4350
- </div>
4351
- </div>
4352
- <div class="pf-v6-c-card__title">
4353
- <h2
4354
- class="pf-v6-c-card__title-text"
4355
- id="card-view-basic-example-gallery-card-5-check-label"
4356
- >Azure Services</h2>
4357
- <div class="pf-v6-c-content">
4358
- <small>Provided by Red Hat</small>
4359
- </div>
4360
- </div>
4361
- <div
4362
- class="pf-v6-c-card__body"
4363
- >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
4364
- </div>
4365
- <div
4366
- class="pf-v6-c-card pf-m-non-selectable-raised pf-m-compact"
4367
- id="card-view-basic-example-gallery-card-6"
4368
- >
4369
- <div class="pf-v6-c-card__header">
4370
- <img
4371
- src="/assets/images/camel-saxon_200x150.png"
4372
- width="60px"
4373
- alt="Logo"
4374
- />
4375
- <div class="pf-v6-c-card__actions">
4376
- <button
4377
- class="pf-v6-c-menu-toggle pf-m-plain"
4378
- type="button"
4379
- aria-expanded="false"
4380
- aria-label="Menu toggle"
4381
- id="card-view-basic-example-gallery-card-6-toggle"
4382
- >
4383
- <span class="pf-v6-c-menu-toggle__icon">
4384
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4385
- </span>
4386
- </button>
4387
- <div class="pf-v6-c-check pf-m-standalone">
4388
- <input
4389
- class="pf-v6-c-check__input"
4390
- type="checkbox"
4391
- id="card-view-basic-example-gallery-card-6-check"
4392
- name="card-view-basic-example-gallery-card-6-check"
4393
- disabled
4394
- aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
4395
- />
4396
- </div>
4397
- </div>
4398
- </div>
4399
- <div class="pf-v6-c-card__title">
4400
- <h2
4401
- class="pf-v6-c-card__title-text"
4402
- id="card-view-basic-example-gallery-card-6-check-label"
4403
- >Crypto</h2>
4404
- <div class="pf-v6-c-content">
4405
- <small>Provided by Red Hat</small>
4406
- </div>
4407
- </div>
4408
- <div
4409
- class="pf-v6-c-card__body"
4410
- >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
4411
- </div>
4412
- <div
4413
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4414
- id="card-view-basic-example-gallery-card-7"
4415
- >
4416
- <div class="pf-v6-c-card__header">
4417
- <img
4418
- src="/assets/images/camel-dropbox_200x150.png"
4419
- width="60px"
4420
- alt="Logo"
4421
- />
4422
- <div class="pf-v6-c-card__actions">
4423
- <button
4424
- class="pf-v6-c-menu-toggle pf-m-plain"
4425
- type="button"
4426
- aria-expanded="false"
4427
- aria-label="Menu toggle"
4428
- id="card-view-basic-example-gallery-card-7-toggle"
4429
- >
4430
- <span class="pf-v6-c-menu-toggle__icon">
4431
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4432
- </span>
4433
- </button>
4434
- <div class="pf-v6-c-check pf-m-standalone">
4435
- <input
4436
- class="pf-v6-c-check__input"
4437
- type="checkbox"
4438
- id="card-view-basic-example-gallery-card-7-check"
4439
- name="card-view-basic-example-gallery-card-7-check"
4440
- aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
4441
- />
4442
- </div>
4443
- </div>
4444
- </div>
4445
- <div class="pf-v6-c-card__title">
4446
- <h2
4447
- class="pf-v6-c-card__title-text"
4448
- id="card-view-basic-example-gallery-card-7-check-label"
4449
- >DropBox</h2>
4450
- <div class="pf-v6-c-content">
4451
- <small>Provided by Red Hat</small>
4452
- </div>
4453
- </div>
4454
- <div
4455
- class="pf-v6-c-card__body"
4456
- >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
4457
- </div>
4458
- <div
4459
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4460
- id="card-view-basic-example-gallery-card-8"
4461
- >
4462
- <div class="pf-v6-c-card__header">
4463
- <img
4464
- src="/assets/images/camel-infinispan_200x150.png"
4465
- width="60px"
4466
- alt="Logo"
4467
- />
4468
- <div class="pf-v6-c-card__actions">
4469
- <button
4470
- class="pf-v6-c-menu-toggle pf-m-plain"
4471
- type="button"
4472
- aria-expanded="false"
4473
- aria-label="Menu toggle"
4474
- id="card-view-basic-example-gallery-card-8-toggle"
4475
- >
4476
- <span class="pf-v6-c-menu-toggle__icon">
4477
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4478
- </span>
4479
- </button>
4480
- <div class="pf-v6-c-check pf-m-standalone">
4481
- <input
4482
- class="pf-v6-c-check__input"
4483
- type="checkbox"
4484
- id="card-view-basic-example-gallery-card-8-check"
4485
- name="card-view-basic-example-gallery-card-8-check"
4486
- aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
4487
- />
4488
- </div>
4489
- </div>
4490
- </div>
4491
- <div class="pf-v6-c-card__title">
4492
- <h2
4493
- class="pf-v6-c-card__title-text"
4494
- id="card-view-basic-example-gallery-card-8-check-label"
4495
- >JBoss Data Grid</h2>
4496
- <div class="pf-v6-c-content">
4497
- <small>Provided by Red Hat</small>
4498
- </div>
4499
- </div>
4500
- <div
4501
- class="pf-v6-c-card__body"
4502
- >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
4503
- </div>
4504
- <div
4505
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4506
- id="card-view-basic-example-gallery-card-9"
3484
+ viewBox="0 0 32 32"
3485
+ fill="currentColor"
3486
+ aria-hidden="true"
3487
+ role="img"
3488
+ width="1em"
3489
+ height="1em"
4507
3490
  >
4508
- <div class="pf-v6-c-card__header">
4509
- <img
4510
- src="/assets/images/FuseConnector_Icons_REST.png"
4511
- width="60px"
4512
- alt="Logo"
4513
- />
4514
- <div class="pf-v6-c-card__actions">
4515
- <button
4516
- class="pf-v6-c-menu-toggle pf-m-plain"
4517
- type="button"
4518
- aria-expanded="false"
4519
- aria-label="Menu toggle"
4520
- id="card-view-basic-example-gallery-card-9-toggle"
4521
- >
4522
- <span class="pf-v6-c-menu-toggle__icon">
4523
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4524
- </span>
4525
- </button>
4526
- <div class="pf-v6-c-check pf-m-standalone">
4527
- <input
4528
- class="pf-v6-c-check__input"
4529
- type="checkbox"
4530
- id="card-view-basic-example-gallery-card-9-check"
4531
- name="card-view-basic-example-gallery-card-9-check"
4532
- aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
4533
- />
4534
- </div>
4535
- </div>
4536
- </div>
4537
- <div class="pf-v6-c-card__title">
4538
- <h2
4539
- class="pf-v6-c-card__title-text"
4540
- id="card-view-basic-example-gallery-card-9-check-label"
4541
- >Rest</h2>
4542
- <div class="pf-v6-c-content">
4543
- <small>Provided by Red Hat</small>
4544
- </div>
4545
- </div>
4546
- <div class="pf-v6-c-card__body">
4547
- The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport.
4548
- From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
4549
- </div>
4550
- </div>
4551
- <div
4552
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4553
- id="card-view-basic-example-gallery-card-10"
3491
+ <path
3492
+ d="M17.439 2.102a1 1 0 0 0-1.054.109L7.656 9H2.5C1.673 9 1 9.673 1 10.5v11c0 .827.673 1.5 1.5 1.5h5.157l8.729 6.789a.998.998 0 0 0 1.053.109c.343-.168.561-.517.561-.898V3a1 1 0 0 0-.561-.898ZM16 26.955l-7.386-5.744A1 1 0 0 0 8 21H3V11h5a.997.997 0 0 0 .614-.211L16 5.045v21.91ZM31 16a14.94 14.94 0 0 1-4.284 10.488.997.997 0 0 1-1.414.018 1 1 0 0 1-.018-1.414C27.68 22.637 29 19.408 29 16s-1.319-6.637-3.716-9.092a.999.999 0 1 1 1.432-1.396A14.94 14.94 0 0 1 31 16Zm-6 0a9.007 9.007 0 0 1-2.249 5.95.996.996 0 0 1-1.411.091 1 1 0 0 1-.091-1.411C22.378 19.346 23 17.702 23 16s-.622-3.346-1.751-4.63a1 1 0 0 1 1.502-1.32A9.007 9.007 0 0 1 25 16Z"
3493
+ />
3494
+ </svg>
3495
+ </span>
3496
+ </button>
3497
+ </div>
3498
+ <div class="pf-v6-c-action-list__item">
3499
+ <button
3500
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
3501
+ type="button"
3502
+ aria-label="Use microphone"
3503
+ >
3504
+ <span class="pf-v6-c-button__icon">
3505
+ <svg
3506
+ class="pf-v6-svg"
3507
+ viewBox="0 0 32 32"
3508
+ fill="currentColor"
3509
+ aria-hidden="true"
3510
+ role="img"
3511
+ width="1em"
3512
+ height="1em"
4554
3513
  >
4555
- <div class="pf-v6-c-card__header">
4556
- <img
4557
- src="/assets/images/camel-swagger-java_200x150.png"
4558
- width="60px"
4559
- alt="Logo"
4560
- />
4561
- <div class="pf-v6-c-card__actions">
4562
- <button
4563
- class="pf-v6-c-menu-toggle pf-m-plain"
4564
- type="button"
4565
- aria-expanded="false"
4566
- aria-label="Menu toggle"
4567
- id="card-view-basic-example-gallery-card-10-toggle"
4568
- >
4569
- <span class="pf-v6-c-menu-toggle__icon">
4570
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4571
- </span>
4572
- </button>
4573
- <div class="pf-v6-c-check pf-m-standalone">
4574
- <input
4575
- class="pf-v6-c-check__input"
4576
- type="checkbox"
4577
- id="card-view-basic-example-gallery-card-10-check"
4578
- name="card-view-basic-example-gallery-card-10-check"
4579
- aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
4580
- />
4581
- </div>
4582
- </div>
3514
+ <path
3515
+ d="M16 22c3.86 0 7-3.141 7-7V8c0-3.859-3.14-7-7-7S9 4.141 9 8v7c0 3.859 3.14 7 7 7ZM11 8c0-2.757 2.243-5 5-5s5 2.243 5 5v7c0 2.757-2.243 5-5 5s-5-2.243-5-5V8Zm5.99 17.95c0 .018.01.032.01.05v2.021h5a1 1 0 1 1 0 2H10.02a1 1 0 1 1 0-2H15V26c0-.018.009-.033.01-.05C9.407 25.447 5 20.731 5 15a1 1 0 1 1 2 0c0 4.963 4.038 9 9 9s9-4.037 9-9a1 1 0 1 1 2 0c0 5.731-4.407 10.447-10.01 10.95Z"
3516
+ />
3517
+ </svg>
3518
+ </span>
3519
+ </button>
3520
+ </div>
3521
+ </div>
3522
+ </div>
3523
+ </div>
3524
+ <div class="pf-v6-c-compass__main">
3525
+ <div class="pf-v6-c-compass__main-header">
3526
+ <div class="pf-v6-c-compass__panel">
3527
+ <div class="pf-v6-c-compass__main-header-content">
3528
+ <div class="pf-v6-c-compass__main-header-title">
3529
+ <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
3530
+ </div>
3531
+ <div class="pf-v6-c-compass__main-header-toolbar">
3532
+ <div class="pf-v6-c-action-list">
3533
+ <div class="pf-v6-c-action-list__group">
3534
+ <div class="pf-v6-c-action-list__item">
3535
+ <button class="pf-v6-c-button pf-m-primary" type="button">
3536
+ <span class="pf-v6-c-button__text">Add integration</span>
3537
+ </button>
4583
3538
  </div>
4584
- <div class="pf-v6-c-card__title">
4585
- <h2
4586
- class="pf-v6-c-card__title-text"
4587
- id="card-view-basic-example-gallery-card-10-check-label"
4588
- >SWAGGER</h2>
4589
- <div class="pf-v6-c-content">
4590
- <small>Provided by Red Hat</small>
4591
- </div>
3539
+ <div class="pf-v6-c-action-list__item">
3540
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
3541
+ <span class="pf-v6-c-button__text">Test integration</span>
3542
+ </button>
4592
3543
  </div>
4593
- <div
4594
- class="pf-v6-c-card__body"
4595
- >Expose REST services and their APIs using Swagger specification.</div>
4596
3544
  </div>
4597
3545
  </div>
4598
3546
  </div>
4599
3547
  </div>
3548
+ </div>
3549
+ </div>
3550
+ <div class="pf-v6-c-compass__content">
3551
+ <div class="pf-v6-l-grid pf-m-all-6-col pf-m-gutter">
4600
3552
  <div class="pf-v6-c-compass__panel pf-m-scrollable">
4601
3553
  <div class="pf-v6-l-flex pf-m-column pf-m-gap-md">
4602
3554
  <div class="pf-v6-c-toolbar" id="-toolbar">
@@ -4831,7 +3783,7 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4831
3783
  </div>
4832
3784
  </div>
4833
3785
  <div
4834
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3786
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-secondary pf-m-compact"
4835
3787
  id="card-view-basic-example-gallery-card-1"
4836
3788
  >
4837
3789
  <div class="pf-v6-c-card__header">
@@ -4967,200 +3919,250 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4967
3919
  class="pf-v6-c-card__body"
4968
3920
  >This documentation page covers the Apache Spark component for the Apache Camel.</div>
4969
3921
  </div>
4970
- <div
4971
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4972
- id="card-view-basic-example-gallery-card-4"
4973
- >
4974
- <div class="pf-v6-c-card__header">
4975
- <img
4976
- src="/assets/images/camel-avro_200x150.png"
4977
- width="60px"
4978
- alt="Logo"
4979
- />
4980
- <div class="pf-v6-c-card__actions">
4981
- <button
4982
- class="pf-v6-c-menu-toggle pf-m-plain"
4983
- type="button"
4984
- aria-expanded="false"
4985
- aria-label="Menu toggle"
4986
- id="card-view-basic-example-gallery-card-4-toggle"
4987
- >
4988
- <span class="pf-v6-c-menu-toggle__icon">
4989
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4990
- </span>
4991
- </button>
4992
- <div class="pf-v6-c-check pf-m-standalone">
4993
- <input
4994
- class="pf-v6-c-check__input"
4995
- type="checkbox"
4996
- id="card-view-basic-example-gallery-card-4-check"
4997
- name="card-view-basic-example-gallery-card-4-check"
4998
- aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
4999
- />
3922
+ </div>
3923
+ </div>
3924
+ </div>
3925
+ <div class="pf-v6-c-compass__panel pf-m-scrollable">
3926
+ <div class="pf-v6-l-flex pf-m-column pf-m-gap-md">
3927
+ <div class="pf-v6-c-toolbar" id="-toolbar">
3928
+ <div class="pf-v6-c-toolbar__content">
3929
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
3930
+ <div
3931
+ class="pf-v6-c-toolbar__group pf-m-show-on-xl pf-m-toggle-group"
3932
+ >
3933
+ <div class="pf-v6-c-toolbar__toggle">
3934
+ <button
3935
+ class="pf-v6-c-menu-toggle pf-m-plain"
3936
+ type="button"
3937
+ aria-expanded="false"
3938
+ aria-label="Show filters"
3939
+ aria-controls="-toolbar-expandable-content"
3940
+ >
3941
+ <span class="pf-v6-c-menu-toggle__icon">
3942
+ <i class="fas fa-filter" aria-hidden="true"></i>
3943
+ </span>
3944
+ </button>
5000
3945
  </div>
5001
- </div>
5002
- </div>
5003
- <div class="pf-v6-c-card__title">
5004
- <h2
5005
- class="pf-v6-c-card__title-text"
5006
- id="card-view-basic-example-gallery-card-4-check-label"
5007
- >Avro</h2>
5008
- <div class="pf-v6-c-content">
5009
- <small>Provided by Red Hat</small>
5010
- </div>
5011
- </div>
5012
- <div
5013
- class="pf-v6-c-card__body"
5014
- >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
5015
- </div>
5016
- <div
5017
- class="pf-v6-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
5018
- id="card-view-basic-example-gallery-card-5"
5019
- >
5020
- <div class="pf-v6-c-card__header">
5021
- <img
5022
- src="/assets/images/FuseConnector_Icons_AzureServices.png"
5023
- width="60px"
5024
- alt="Logo"
5025
- />
5026
- <div class="pf-v6-c-card__actions">
5027
- <button
5028
- class="pf-v6-c-menu-toggle pf-m-plain"
5029
- type="button"
5030
- aria-expanded="false"
5031
- aria-label="Menu toggle"
5032
- id="card-view-basic-example-gallery-card-5-toggle"
5033
- >
5034
- <span class="pf-v6-c-menu-toggle__icon">
5035
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5036
- </span>
5037
- </button>
5038
- <div class="pf-v6-c-check pf-m-standalone">
5039
- <input
5040
- class="pf-v6-c-check__input"
5041
- type="checkbox"
5042
- id="card-view-basic-example-gallery-card-5-check"
5043
- name="card-view-basic-example-gallery-card-5-check"
5044
- aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
5045
- />
3946
+ <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
3947
+ <div
3948
+ class="pf-v6-c-menu-toggle pf-m-split-button"
3949
+ id="-toolbar-check"
3950
+ >
3951
+ <label
3952
+ class="pf-v6-c-check pf-m-standalone"
3953
+ for="-toolbar-check-check-input"
3954
+ >
3955
+ <input
3956
+ class="pf-v6-c-check__input"
3957
+ type="checkbox"
3958
+ id="-toolbar-check-check-input"
3959
+ name="-toolbar-check-check-input"
3960
+ aria-label="Standalone check"
3961
+ />
3962
+ </label>
3963
+ <button
3964
+ class="pf-v6-c-menu-toggle__button"
3965
+ type="button"
3966
+ aria-expanded="false"
3967
+ id="-toolbar-menu-toggle-toggle-button"
3968
+ aria-label="Menu toggle"
3969
+ >
3970
+ <span class="pf-v6-c-menu-toggle__controls">
3971
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3972
+ <i
3973
+ class="fas fa-caret-down fa-fw"
3974
+ aria-hidden="true"
3975
+ ></i>
3976
+ </span>
3977
+ </span>
3978
+ </button>
3979
+ </div>
3980
+ </div>
3981
+
3982
+ <div class="pf-v6-c-toolbar__item">
3983
+ <button
3984
+ class="pf-v6-c-menu-toggle"
3985
+ type="button"
3986
+ aria-expanded="false"
3987
+ id="-toolbar-select-checkbox-status"
3988
+ >
3989
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
3990
+ <span class="pf-v6-c-menu-toggle__controls">
3991
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3992
+ <i
3993
+ class="fas fa-caret-down fa-fw"
3994
+ aria-hidden="true"
3995
+ ></i>
3996
+ </span>
3997
+ </span>
3998
+ </button>
5046
3999
  </div>
5047
4000
  </div>
5048
- </div>
5049
- <div class="pf-v6-c-card__title">
5050
- <h2
5051
- class="pf-v6-c-card__title-text"
5052
- id="card-view-basic-example-gallery-card-5-check-label"
5053
- >Azure Services</h2>
5054
- <div class="pf-v6-c-content">
5055
- <small>Provided by Red Hat</small>
5056
- </div>
5057
- </div>
5058
- <div
5059
- class="pf-v6-c-card__body"
5060
- >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
5061
- </div>
5062
- <div
5063
- class="pf-v6-c-card pf-m-non-selectable-raised pf-m-compact"
5064
- id="card-view-basic-example-gallery-card-6"
5065
- >
5066
- <div class="pf-v6-c-card__header">
5067
- <img
5068
- src="/assets/images/camel-saxon_200x150.png"
5069
- width="60px"
5070
- alt="Logo"
5071
- />
5072
- <div class="pf-v6-c-card__actions">
5073
- <button
5074
- class="pf-v6-c-menu-toggle pf-m-plain"
5075
- type="button"
5076
- aria-expanded="false"
5077
- aria-label="Menu toggle"
5078
- id="card-view-basic-example-gallery-card-6-toggle"
4001
+
4002
+ <div
4003
+ class="pf-v6-c-overflow-menu"
4004
+ id="-toolbar-overflow-menu"
4005
+ >
4006
+ <div
4007
+ class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
5079
4008
  >
5080
- <span class="pf-v6-c-menu-toggle__icon">
5081
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5082
- </span>
5083
- </button>
5084
- <div class="pf-v6-c-check pf-m-standalone">
5085
- <input
5086
- class="pf-v6-c-check__input"
5087
- type="checkbox"
5088
- id="card-view-basic-example-gallery-card-6-check"
5089
- name="card-view-basic-example-gallery-card-6-check"
5090
- disabled
5091
- aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
5092
- />
4009
+ <div
4010
+ class="pf-v6-c-overflow-menu__group pf-m-button-group"
4011
+ >
4012
+ <div class="pf-v6-c-overflow-menu__item">
4013
+ <button
4014
+ class="pf-v6-c-button pf-m-primary"
4015
+ type="button"
4016
+ >
4017
+ <span class="pf-v6-c-button__text">Create instance</span>
4018
+ </button>
4019
+ </div>
4020
+ </div>
4021
+ </div>
4022
+ <div class="pf-v6-c-overflow-menu__control">
4023
+ <button
4024
+ class="pf-v6-c-menu-toggle pf-m-plain"
4025
+ type="button"
4026
+ aria-expanded="false"
4027
+ aria-label="Menu toggle"
4028
+ id="-toolbar-overflow-menu-toggle"
4029
+ >
4030
+ <span class="pf-v6-c-menu-toggle__icon">
4031
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4032
+ </span>
4033
+ </button>
5093
4034
  </div>
5094
4035
  </div>
5095
- </div>
5096
- <div class="pf-v6-c-card__title">
5097
- <h2
5098
- class="pf-v6-c-card__title-text"
5099
- id="card-view-basic-example-gallery-card-6-check-label"
5100
- >Crypto</h2>
5101
- <div class="pf-v6-c-content">
5102
- <small>Provided by Red Hat</small>
4036
+
4037
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
4038
+ <div class="pf-v6-c-pagination pf-m-compact">
4039
+ <div class="pf-v6-c-pagination__page-menu">
4040
+ <button
4041
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
4042
+ type="button"
4043
+ aria-expanded="false"
4044
+ id="-toolbar-top-pagination"
4045
+ >
4046
+ <span class="pf-v6-c-menu-toggle__text">
4047
+ <b>1 - 10</b>&nbsp;of&nbsp;
4048
+ <b>36</b>
4049
+ </span>
4050
+ <span class="pf-v6-c-menu-toggle__controls">
4051
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
4052
+ <i
4053
+ class="fas fa-caret-down fa-fw"
4054
+ aria-hidden="true"
4055
+ ></i>
4056
+ </span>
4057
+ </span>
4058
+ </button>
4059
+ </div>
4060
+ <nav
4061
+ class="pf-v6-c-pagination__nav"
4062
+ aria-label="Toolbar top pagination"
4063
+ >
4064
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
4065
+ <button
4066
+ class="pf-v6-c-button pf-m-plain"
4067
+ type="button"
4068
+ disabled
4069
+ aria-label="Go to previous page"
4070
+ >
4071
+ <span class="pf-v6-c-button__icon">
4072
+ <svg
4073
+ class="pf-v6-svg"
4074
+ viewBox="0 0 256 512"
4075
+ fill="currentColor"
4076
+ aria-hidden="true"
4077
+ role="img"
4078
+ width="1em"
4079
+ height="1em"
4080
+ >
4081
+ <path
4082
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
4083
+ />
4084
+ </svg>
4085
+ </span>
4086
+ </button>
4087
+ </div>
4088
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
4089
+ <button
4090
+ class="pf-v6-c-button pf-m-plain"
4091
+ type="button"
4092
+ aria-label="Go to next page"
4093
+ >
4094
+ <span class="pf-v6-c-button__icon">
4095
+ <svg
4096
+ class="pf-v6-svg"
4097
+ viewBox="0 0 256 512"
4098
+ fill="currentColor"
4099
+ aria-hidden="true"
4100
+ role="img"
4101
+ width="1em"
4102
+ height="1em"
4103
+ >
4104
+ <path
4105
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
4106
+ />
4107
+ </svg>
4108
+ </span>
4109
+ </button>
4110
+ </div>
4111
+ </nav>
4112
+ </div>
5103
4113
  </div>
5104
4114
  </div>
4115
+
5105
4116
  <div
5106
- class="pf-v6-c-card__body"
5107
- >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
4117
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
4118
+ id="-toolbar-expandable-content"
4119
+ hidden
4120
+ ></div>
5108
4121
  </div>
4122
+ </div>
4123
+ <div class="pf-v6-l-gallery pf-m-gutter">
5109
4124
  <div
5110
4125
  class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
5111
- id="card-view-basic-example-gallery-card-7"
4126
+ id="card-view-basic-example-gallery-card-empty-state"
5112
4127
  >
5113
- <div class="pf-v6-c-card__header">
5114
- <img
5115
- src="/assets/images/camel-dropbox_200x150.png"
5116
- width="60px"
5117
- alt="Logo"
5118
- />
5119
- <div class="pf-v6-c-card__actions">
5120
- <button
5121
- class="pf-v6-c-menu-toggle pf-m-plain"
5122
- type="button"
5123
- aria-expanded="false"
5124
- aria-label="Menu toggle"
5125
- id="card-view-basic-example-gallery-card-7-toggle"
5126
- >
5127
- <span class="pf-v6-c-menu-toggle__icon">
5128
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5129
- </span>
5130
- </button>
5131
- <div class="pf-v6-c-check pf-m-standalone">
5132
- <input
5133
- class="pf-v6-c-check__input"
5134
- type="checkbox"
5135
- id="card-view-basic-example-gallery-card-7-check"
5136
- name="card-view-basic-example-gallery-card-7-check"
5137
- aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
5138
- />
4128
+ <div class="pf-v6-l-bullseye">
4129
+ <div class="pf-v6-c-empty-state pf-m-xs">
4130
+ <div class="pf-v6-c-empty-state__content">
4131
+ <div class="pf-v6-c-empty-state__icon">
4132
+ <svg
4133
+ class="pf-v6-svg"
4134
+ viewBox="0 0 32 32"
4135
+ fill="currentColor"
4136
+ aria-hidden="true"
4137
+ role="img"
4138
+ width="1em"
4139
+ height="1em"
4140
+ >
4141
+ <path
4142
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
4143
+ />
4144
+ </svg>
4145
+ </div>
4146
+ <div class="pf-v6-c-card__title">
4147
+ <h2
4148
+ class="pf-v6-c-card__title-text pf-m-md"
4149
+ >Add a new card to your page</h2>
4150
+ </div>
4151
+ <button class="pf-v6-c-button pf-m-link" type="button">
4152
+ <span class="pf-v6-c-button__text">Add card</span>
4153
+ </button>
5139
4154
  </div>
5140
4155
  </div>
5141
4156
  </div>
5142
- <div class="pf-v6-c-card__title">
5143
- <h2
5144
- class="pf-v6-c-card__title-text"
5145
- id="card-view-basic-example-gallery-card-7-check-label"
5146
- >DropBox</h2>
5147
- <div class="pf-v6-c-content">
5148
- <small>Provided by Red Hat</small>
5149
- </div>
5150
- </div>
5151
- <div
5152
- class="pf-v6-c-card__body"
5153
- >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
5154
4157
  </div>
5155
4158
  <div
5156
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
5157
- id="card-view-basic-example-gallery-card-8"
4159
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-secondary pf-m-compact"
4160
+ id="card-view-basic-example-gallery-card-1"
5158
4161
  >
5159
4162
  <div class="pf-v6-c-card__header">
5160
4163
  <img
5161
- src="/assets/images/camel-infinispan_200x150.png"
5162
- width="60px"
5163
- alt="Logo"
4164
+ src="/assets/images/PF-IconLogo.svg"
4165
+ alt="PatternFly logo"
5164
4166
  />
5165
4167
  <div class="pf-v6-c-card__actions">
5166
4168
  <button
@@ -5168,7 +4170,7 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5168
4170
  type="button"
5169
4171
  aria-expanded="false"
5170
4172
  aria-label="Menu toggle"
5171
- id="card-view-basic-example-gallery-card-8-toggle"
4173
+ id="card-view-basic-example-gallery-card-1-toggle"
5172
4174
  >
5173
4175
  <span class="pf-v6-c-menu-toggle__icon">
5174
4176
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -5178,9 +4180,9 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5178
4180
  <input
5179
4181
  class="pf-v6-c-check__input"
5180
4182
  type="checkbox"
5181
- id="card-view-basic-example-gallery-card-8-check"
5182
- name="card-view-basic-example-gallery-card-8-check"
5183
- aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
4183
+ id="card-view-basic-example-gallery-card-1-check"
4184
+ name="card-view-basic-example-gallery-card-1-check"
4185
+ aria-labelledby="card-view-basic-example-gallery-card-1-check-label"
5184
4186
  />
5185
4187
  </div>
5186
4188
  </div>
@@ -5188,23 +4190,23 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5188
4190
  <div class="pf-v6-c-card__title">
5189
4191
  <h2
5190
4192
  class="pf-v6-c-card__title-text"
5191
- id="card-view-basic-example-gallery-card-8-check-label"
5192
- >JBoss Data Grid</h2>
4193
+ id="card-view-basic-example-gallery-card-1-check-label"
4194
+ >Patternfly</h2>
5193
4195
  <div class="pf-v6-c-content">
5194
4196
  <small>Provided by Red Hat</small>
5195
4197
  </div>
5196
4198
  </div>
5197
4199
  <div
5198
4200
  class="pf-v6-c-card__body"
5199
- >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
4201
+ >PatternFly is a community project that promotes design commonality and improves user experience.</div>
5200
4202
  </div>
5201
4203
  <div
5202
4204
  class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
5203
- id="card-view-basic-example-gallery-card-9"
4205
+ id="card-view-basic-example-gallery-card-2"
5204
4206
  >
5205
4207
  <div class="pf-v6-c-card__header">
5206
4208
  <img
5207
- src="/assets/images/FuseConnector_Icons_REST.png"
4209
+ src="/assets/images/activemq-core_200x150.png"
5208
4210
  width="60px"
5209
4211
  alt="Logo"
5210
4212
  />
@@ -5214,7 +4216,7 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5214
4216
  type="button"
5215
4217
  aria-expanded="false"
5216
4218
  aria-label="Menu toggle"
5217
- id="card-view-basic-example-gallery-card-9-toggle"
4219
+ id="card-view-basic-example-gallery-card-2-toggle"
5218
4220
  >
5219
4221
  <span class="pf-v6-c-menu-toggle__icon">
5220
4222
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -5224,9 +4226,9 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5224
4226
  <input
5225
4227
  class="pf-v6-c-check__input"
5226
4228
  type="checkbox"
5227
- id="card-view-basic-example-gallery-card-9-check"
5228
- name="card-view-basic-example-gallery-card-9-check"
5229
- aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
4229
+ id="card-view-basic-example-gallery-card-2-check"
4230
+ name="card-view-basic-example-gallery-card-2-check"
4231
+ aria-labelledby="card-view-basic-example-gallery-card-2-check-label"
5230
4232
  />
5231
4233
  </div>
5232
4234
  </div>
@@ -5234,24 +4236,23 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5234
4236
  <div class="pf-v6-c-card__title">
5235
4237
  <h2
5236
4238
  class="pf-v6-c-card__title-text"
5237
- id="card-view-basic-example-gallery-card-9-check-label"
5238
- >Rest</h2>
4239
+ id="card-view-basic-example-gallery-card-2-check-label"
4240
+ >ActiveMq</h2>
5239
4241
  <div class="pf-v6-c-content">
5240
4242
  <small>Provided by Red Hat</small>
5241
4243
  </div>
5242
4244
  </div>
5243
- <div class="pf-v6-c-card__body">
5244
- The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport.
5245
- From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
5246
- </div>
4245
+ <div
4246
+ class="pf-v6-c-card__body"
4247
+ >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
5247
4248
  </div>
5248
4249
  <div
5249
4250
  class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
5250
- id="card-view-basic-example-gallery-card-10"
4251
+ id="card-view-basic-example-gallery-card-3"
5251
4252
  >
5252
4253
  <div class="pf-v6-c-card__header">
5253
4254
  <img
5254
- src="/assets/images/camel-swagger-java_200x150.png"
4255
+ src="/assets/images/camel-spark_200x150.png"
5255
4256
  width="60px"
5256
4257
  alt="Logo"
5257
4258
  />
@@ -5261,7 +4262,7 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5261
4262
  type="button"
5262
4263
  aria-expanded="false"
5263
4264
  aria-label="Menu toggle"
5264
- id="card-view-basic-example-gallery-card-10-toggle"
4265
+ id="card-view-basic-example-gallery-card-3-toggle"
5265
4266
  >
5266
4267
  <span class="pf-v6-c-menu-toggle__icon">
5267
4268
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -5271,9 +4272,9 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5271
4272
  <input
5272
4273
  class="pf-v6-c-check__input"
5273
4274
  type="checkbox"
5274
- id="card-view-basic-example-gallery-card-10-check"
5275
- name="card-view-basic-example-gallery-card-10-check"
5276
- aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
4275
+ id="card-view-basic-example-gallery-card-3-check"
4276
+ name="card-view-basic-example-gallery-card-3-check"
4277
+ aria-labelledby="card-view-basic-example-gallery-card-3-check-label"
5277
4278
  />
5278
4279
  </div>
5279
4280
  </div>
@@ -5281,15 +4282,15 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
5281
4282
  <div class="pf-v6-c-card__title">
5282
4283
  <h2
5283
4284
  class="pf-v6-c-card__title-text"
5284
- id="card-view-basic-example-gallery-card-10-check-label"
5285
- >SWAGGER</h2>
4285
+ id="card-view-basic-example-gallery-card-3-check-label"
4286
+ >Apache Spark</h2>
5286
4287
  <div class="pf-v6-c-content">
5287
4288
  <small>Provided by Red Hat</small>
5288
4289
  </div>
5289
4290
  </div>
5290
4291
  <div
5291
4292
  class="pf-v6-c-card__body"
5292
- >Expose REST services and their APIs using Swagger specification.</div>
4293
+ >This documentation page covers the Apache Spark component for the Apache Camel.</div>
5293
4294
  </div>
5294
4295
  </div>
5295
4296
  </div>
@@ -5441,8 +4442,8 @@ This demo showcases how you can position a side-panel drawer on top of the other
5441
4442
  <div
5442
4443
  class="pf-v6-c-compass pf-m-animate-smoothly"
5443
4444
  style="
5444
- --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
5445
- --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
4445
+ --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
4446
+ --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
5446
4447
  "
5447
4448
  >
5448
4449
  <div class="pf-v6-c-compass__header pf-m-expanded">
@@ -6295,7 +5296,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6295
5296
  </div>
6296
5297
  </div>
6297
5298
  <div
6298
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
5299
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-secondary pf-m-compact"
6299
5300
  id="card-view-basic-example-gallery-card-1"
6300
5301
  >
6301
5302
  <div class="pf-v6-c-card__header">
@@ -6431,330 +5432,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
6431
5432
  class="pf-v6-c-card__body"
6432
5433
  >This documentation page covers the Apache Spark component for the Apache Camel.</div>
6433
5434
  </div>
6434
- <div
6435
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
6436
- id="card-view-basic-example-gallery-card-4"
6437
- >
6438
- <div class="pf-v6-c-card__header">
6439
- <img
6440
- src="/assets/images/camel-avro_200x150.png"
6441
- width="60px"
6442
- alt="Logo"
6443
- />
6444
- <div class="pf-v6-c-card__actions">
6445
- <button
6446
- class="pf-v6-c-menu-toggle pf-m-plain"
6447
- type="button"
6448
- aria-expanded="false"
6449
- aria-label="Menu toggle"
6450
- id="card-view-basic-example-gallery-card-4-toggle"
6451
- >
6452
- <span class="pf-v6-c-menu-toggle__icon">
6453
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6454
- </span>
6455
- </button>
6456
- <div class="pf-v6-c-check pf-m-standalone">
6457
- <input
6458
- class="pf-v6-c-check__input"
6459
- type="checkbox"
6460
- id="card-view-basic-example-gallery-card-4-check"
6461
- name="card-view-basic-example-gallery-card-4-check"
6462
- aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
6463
- />
6464
- </div>
6465
- </div>
6466
- </div>
6467
- <div class="pf-v6-c-card__title">
6468
- <h2
6469
- class="pf-v6-c-card__title-text"
6470
- id="card-view-basic-example-gallery-card-4-check-label"
6471
- >Avro</h2>
6472
- <div class="pf-v6-c-content">
6473
- <small>Provided by Red Hat</small>
6474
- </div>
6475
- </div>
6476
- <div
6477
- class="pf-v6-c-card__body"
6478
- >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
6479
- </div>
6480
- <div
6481
- class="pf-v6-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
6482
- id="card-view-basic-example-gallery-card-5"
6483
- >
6484
- <div class="pf-v6-c-card__header">
6485
- <img
6486
- src="/assets/images/FuseConnector_Icons_AzureServices.png"
6487
- width="60px"
6488
- alt="Logo"
6489
- />
6490
- <div class="pf-v6-c-card__actions">
6491
- <button
6492
- class="pf-v6-c-menu-toggle pf-m-plain"
6493
- type="button"
6494
- aria-expanded="false"
6495
- aria-label="Menu toggle"
6496
- id="card-view-basic-example-gallery-card-5-toggle"
6497
- >
6498
- <span class="pf-v6-c-menu-toggle__icon">
6499
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6500
- </span>
6501
- </button>
6502
- <div class="pf-v6-c-check pf-m-standalone">
6503
- <input
6504
- class="pf-v6-c-check__input"
6505
- type="checkbox"
6506
- id="card-view-basic-example-gallery-card-5-check"
6507
- name="card-view-basic-example-gallery-card-5-check"
6508
- aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
6509
- />
6510
- </div>
6511
- </div>
6512
- </div>
6513
- <div class="pf-v6-c-card__title">
6514
- <h2
6515
- class="pf-v6-c-card__title-text"
6516
- id="card-view-basic-example-gallery-card-5-check-label"
6517
- >Azure Services</h2>
6518
- <div class="pf-v6-c-content">
6519
- <small>Provided by Red Hat</small>
6520
- </div>
6521
- </div>
6522
- <div
6523
- class="pf-v6-c-card__body"
6524
- >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
6525
- </div>
6526
- <div
6527
- class="pf-v6-c-card pf-m-non-selectable-raised pf-m-compact"
6528
- id="card-view-basic-example-gallery-card-6"
6529
- >
6530
- <div class="pf-v6-c-card__header">
6531
- <img
6532
- src="/assets/images/camel-saxon_200x150.png"
6533
- width="60px"
6534
- alt="Logo"
6535
- />
6536
- <div class="pf-v6-c-card__actions">
6537
- <button
6538
- class="pf-v6-c-menu-toggle pf-m-plain"
6539
- type="button"
6540
- aria-expanded="false"
6541
- aria-label="Menu toggle"
6542
- id="card-view-basic-example-gallery-card-6-toggle"
6543
- >
6544
- <span class="pf-v6-c-menu-toggle__icon">
6545
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6546
- </span>
6547
- </button>
6548
- <div class="pf-v6-c-check pf-m-standalone">
6549
- <input
6550
- class="pf-v6-c-check__input"
6551
- type="checkbox"
6552
- id="card-view-basic-example-gallery-card-6-check"
6553
- name="card-view-basic-example-gallery-card-6-check"
6554
- disabled
6555
- aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
6556
- />
6557
- </div>
6558
- </div>
6559
- </div>
6560
- <div class="pf-v6-c-card__title">
6561
- <h2
6562
- class="pf-v6-c-card__title-text"
6563
- id="card-view-basic-example-gallery-card-6-check-label"
6564
- >Crypto</h2>
6565
- <div class="pf-v6-c-content">
6566
- <small>Provided by Red Hat</small>
6567
- </div>
6568
- </div>
6569
- <div
6570
- class="pf-v6-c-card__body"
6571
- >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
6572
- </div>
6573
- <div
6574
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
6575
- id="card-view-basic-example-gallery-card-7"
6576
- >
6577
- <div class="pf-v6-c-card__header">
6578
- <img
6579
- src="/assets/images/camel-dropbox_200x150.png"
6580
- width="60px"
6581
- alt="Logo"
6582
- />
6583
- <div class="pf-v6-c-card__actions">
6584
- <button
6585
- class="pf-v6-c-menu-toggle pf-m-plain"
6586
- type="button"
6587
- aria-expanded="false"
6588
- aria-label="Menu toggle"
6589
- id="card-view-basic-example-gallery-card-7-toggle"
6590
- >
6591
- <span class="pf-v6-c-menu-toggle__icon">
6592
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6593
- </span>
6594
- </button>
6595
- <div class="pf-v6-c-check pf-m-standalone">
6596
- <input
6597
- class="pf-v6-c-check__input"
6598
- type="checkbox"
6599
- id="card-view-basic-example-gallery-card-7-check"
6600
- name="card-view-basic-example-gallery-card-7-check"
6601
- aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
6602
- />
6603
- </div>
6604
- </div>
6605
- </div>
6606
- <div class="pf-v6-c-card__title">
6607
- <h2
6608
- class="pf-v6-c-card__title-text"
6609
- id="card-view-basic-example-gallery-card-7-check-label"
6610
- >DropBox</h2>
6611
- <div class="pf-v6-c-content">
6612
- <small>Provided by Red Hat</small>
6613
- </div>
6614
- </div>
6615
- <div
6616
- class="pf-v6-c-card__body"
6617
- >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
6618
- </div>
6619
- <div
6620
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
6621
- id="card-view-basic-example-gallery-card-8"
6622
- >
6623
- <div class="pf-v6-c-card__header">
6624
- <img
6625
- src="/assets/images/camel-infinispan_200x150.png"
6626
- width="60px"
6627
- alt="Logo"
6628
- />
6629
- <div class="pf-v6-c-card__actions">
6630
- <button
6631
- class="pf-v6-c-menu-toggle pf-m-plain"
6632
- type="button"
6633
- aria-expanded="false"
6634
- aria-label="Menu toggle"
6635
- id="card-view-basic-example-gallery-card-8-toggle"
6636
- >
6637
- <span class="pf-v6-c-menu-toggle__icon">
6638
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6639
- </span>
6640
- </button>
6641
- <div class="pf-v6-c-check pf-m-standalone">
6642
- <input
6643
- class="pf-v6-c-check__input"
6644
- type="checkbox"
6645
- id="card-view-basic-example-gallery-card-8-check"
6646
- name="card-view-basic-example-gallery-card-8-check"
6647
- aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
6648
- />
6649
- </div>
6650
- </div>
6651
- </div>
6652
- <div class="pf-v6-c-card__title">
6653
- <h2
6654
- class="pf-v6-c-card__title-text"
6655
- id="card-view-basic-example-gallery-card-8-check-label"
6656
- >JBoss Data Grid</h2>
6657
- <div class="pf-v6-c-content">
6658
- <small>Provided by Red Hat</small>
6659
- </div>
6660
- </div>
6661
- <div
6662
- class="pf-v6-c-card__body"
6663
- >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
6664
- </div>
6665
- <div
6666
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
6667
- id="card-view-basic-example-gallery-card-9"
6668
- >
6669
- <div class="pf-v6-c-card__header">
6670
- <img
6671
- src="/assets/images/FuseConnector_Icons_REST.png"
6672
- width="60px"
6673
- alt="Logo"
6674
- />
6675
- <div class="pf-v6-c-card__actions">
6676
- <button
6677
- class="pf-v6-c-menu-toggle pf-m-plain"
6678
- type="button"
6679
- aria-expanded="false"
6680
- aria-label="Menu toggle"
6681
- id="card-view-basic-example-gallery-card-9-toggle"
6682
- >
6683
- <span class="pf-v6-c-menu-toggle__icon">
6684
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6685
- </span>
6686
- </button>
6687
- <div class="pf-v6-c-check pf-m-standalone">
6688
- <input
6689
- class="pf-v6-c-check__input"
6690
- type="checkbox"
6691
- id="card-view-basic-example-gallery-card-9-check"
6692
- name="card-view-basic-example-gallery-card-9-check"
6693
- aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
6694
- />
6695
- </div>
6696
- </div>
6697
- </div>
6698
- <div class="pf-v6-c-card__title">
6699
- <h2
6700
- class="pf-v6-c-card__title-text"
6701
- id="card-view-basic-example-gallery-card-9-check-label"
6702
- >Rest</h2>
6703
- <div class="pf-v6-c-content">
6704
- <small>Provided by Red Hat</small>
6705
- </div>
6706
- </div>
6707
- <div class="pf-v6-c-card__body">
6708
- The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport.
6709
- From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
6710
- </div>
6711
- </div>
6712
- <div
6713
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
6714
- id="card-view-basic-example-gallery-card-10"
6715
- >
6716
- <div class="pf-v6-c-card__header">
6717
- <img
6718
- src="/assets/images/camel-swagger-java_200x150.png"
6719
- width="60px"
6720
- alt="Logo"
6721
- />
6722
- <div class="pf-v6-c-card__actions">
6723
- <button
6724
- class="pf-v6-c-menu-toggle pf-m-plain"
6725
- type="button"
6726
- aria-expanded="false"
6727
- aria-label="Menu toggle"
6728
- id="card-view-basic-example-gallery-card-10-toggle"
6729
- >
6730
- <span class="pf-v6-c-menu-toggle__icon">
6731
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6732
- </span>
6733
- </button>
6734
- <div class="pf-v6-c-check pf-m-standalone">
6735
- <input
6736
- class="pf-v6-c-check__input"
6737
- type="checkbox"
6738
- id="card-view-basic-example-gallery-card-10-check"
6739
- name="card-view-basic-example-gallery-card-10-check"
6740
- aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
6741
- />
6742
- </div>
6743
- </div>
6744
- </div>
6745
- <div class="pf-v6-c-card__title">
6746
- <h2
6747
- class="pf-v6-c-card__title-text"
6748
- id="card-view-basic-example-gallery-card-10-check-label"
6749
- >SWAGGER</h2>
6750
- <div class="pf-v6-c-content">
6751
- <small>Provided by Red Hat</small>
6752
- </div>
6753
- </div>
6754
- <div
6755
- class="pf-v6-c-card__body"
6756
- >Expose REST services and their APIs using Swagger specification.</div>
6757
- </div>
6758
5435
  </div>
6759
5436
  </div>
6760
5437
  </div>
@@ -6936,8 +5613,8 @@ This demo showcases how you can position a side-panel drawer on top of the other
6936
5613
  <div
6937
5614
  class="pf-v6-c-compass pf-m-animate-smoothly pf-m-dock"
6938
5615
  style="
6939
- --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
6940
- --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
5616
+ --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
5617
+ --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
6941
5618
  "
6942
5619
  >
6943
5620
  <div class="pf-v6-c-compass__dock">
@@ -7245,7 +5922,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
7245
5922
  </div>
7246
5923
  </div>
7247
5924
  <div class="pf-v6-c-compass__content">
7248
- <div class="pf-v6-c-compass__panel">[so much room for activities]</div>
5925
+ <div class="pf-v6-c-panel">[so much room for activities]</div>
7249
5926
  </div>
7250
5927
  </div>
7251
5928
  </div>