NO-JIRA: PF6 Upgrade

web/package.json

@@ -99,13 +99,15 @@
   },
   "dependencies": {
     "@grafana/lezer-logql": "^0.2.6",
-    "@patternfly/patternfly": "4.215.1",
-    "@patternfly/react-charts": "6.92.0",
-    "@patternfly/react-core": "4.239.0",
-    "@patternfly/react-icons": "^4.57.2",
-    "@patternfly/react-table": "4.108.0",
+    "@patternfly/patternfly": "^6.1.0",
+    "@patternfly/react-charts": "^8.1.0",
+    "@patternfly/react-core": "^6.1.0",
+    "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-table": "^6.1.0",
+    "@patternfly/react-tokens": "^6.1.0",
     "i18next": "^22.4.12",
-    "react-i18next": "^11.18.6"
+    "react-i18next": "^11.18.6",
+    "victory": "^37.3.5"
   },
   "nyc": {
     "report-dir": "./coverage/cov-cypress"

web/src/components/alerts/logs-alerts-metrics.css

@@ -1,11 +1,11 @@
 .co-logs-alert-metrics__container {
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
-  margin: 0 0 var(--pf-global--spacer--md) 0;
-  padding: var(--pf-global--spacer--sm);
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  margin: 0 0 var(--pf-v5-global--spacer--md) 0;
+  padding: var(--pf-v5-global--spacer--sm);
 }
 
 .co-logs-metrics__header {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .co-logs-metrics__error {

web/src/components/error-message.css

@@ -1,9 +1,9 @@
 .co-logs-error_message {
-  margin-bottom: var(--pf-global--spacer--md);
-  margin-top: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
   background-color: transparent;
 }
 
-.co-logs-table__row-error .pf-c-code-block__pre {
+.co-logs-table__row-error .pf-v6-c-code-block__pre {
   text-align: left;
 }

web/src/components/error-message.tsx

@@ -1,11 +1,4 @@
-import {
-  Alert,
-  CodeBlock,
-  CodeBlockCode,
-  Text,
-  TextContent,
-  TextVariants,
-} from '@patternfly/react-core';
+import { Alert, CodeBlock, CodeBlockCode, Content, ContentVariants } from '@patternfly/react-core';
 import React from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
 import { isFetchError } from '../cancellable-fetch';
@@ -32,7 +25,7 @@ subjects:
 `;
 
 const Suggestion: React.FC = ({ children }) => (
-  <Text component={TextVariants.small}>{children}</Text>
+  <Content component={ContentVariants.small}>{children}</Content>
 );
 
 const messages: (t: TFunction) => Record<string, React.ReactElement> = (t) => ({
@@ -138,11 +131,11 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ error }) => {
       />
 
       {suggestions && suggestions.length > 0 ? (
-        <TextContent>
-          <Text component={TextVariants.p}>{title}</Text>
+        <Content>
+          <Content component={ContentVariants.p}>{title}</Content>
 
           {suggestions}
-        </TextContent>
+        </Content>
       ) : null}
     </>
   );

web/src/components/filters/attribute-filter.css

@@ -1,4 +1,4 @@
-.co-logs__attribute-filter .pf-c-select__toggle-wrapper {
+.co-logs__attribute-filter .pf-v6-c-select__toggle-wrapper {
   flex-wrap: nowrap;
 }
 

web/src/components/filters/attribute-filter.tsx

@@ -1,11 +1,13 @@
 import {
+  Badge,
+  MenuToggle,
+  MenuToggleElement,
   Select,
+  SelectList,
   SelectOption,
-  SelectOptionObject,
-  SelectVariant,
   TextInput,
-  ToolbarChip,
-  ToolbarChipGroup,
+  ToolbarLabel,
+  ToolbarLabelGroup,
   ToolbarFilter,
   ToolbarGroup,
 } from '@patternfly/react-core';
@@ -58,8 +60,8 @@ export const AttributeFilter: React.FC<AttributeFilterProps> = ({
   }, [textAttribute, filters]);
 
   const handleAttributeSelect = (
-    _: React.MouseEvent | React.ChangeEvent,
-    value: string | SelectOptionObject,
+    _: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
   ) => {
     if (typeof value === 'string') {
       setSelectedAttributeId(value);
@@ -107,7 +109,7 @@ export const AttributeFilter: React.FC<AttributeFilterProps> = ({
   };
 
   const handleDeleteAttributeValue =
-    (attribute: string) => (_category: string | ToolbarChipGroup, chip: string | ToolbarChip) => {
+    (attribute: string) => (_category: string | ToolbarLabelGroup, chip: string | ToolbarLabel) => {
       filters?.[attribute]?.delete(chip as string);
       onFiltersChange?.({
         ...filters,
@@ -120,6 +122,24 @@ export const AttributeFilter: React.FC<AttributeFilterProps> = ({
     setTextInputValue(value);
   };
 
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={handleAttributeToggle}
+      isExpanded={isAttributeExpanded}
+      isDisabled={isDisabled}
+      icon={<FilterIcon />}
+      style={
+        {
+          width: '200px',
+        } as React.CSSProperties
+      }
+    >
+      Filter by status
+      {attributeList.length > 0 && <Badge isRead>{attributeList.length}</Badge>}
+    </MenuToggle>
+  );
+
   const renderAttributeValueComponent = (attribute: Attribute) => {
     switch (attribute.valueType) {
       case 'text': {
@@ -129,9 +149,8 @@ export const AttributeFilter: React.FC<AttributeFilterProps> = ({
             placeholder={t('Search by {{attributeName}}', {
               attributeName: attribute.name,
             })}
-            onChange={handleInputValueChange}
+            onChange={(_event, value: string) => handleInputValueChange(value)}
             className="co-logs__attribute-filter__text"
-            iconVariant="search"
             aria-label={t('Search by {{attributeName}}', {
               attributeName: attribute.name,
             })}
@@ -153,9 +172,9 @@ export const AttributeFilter: React.FC<AttributeFilterProps> = ({
           <SearchSelect
             key={`checkbox-select-${attribute.id}`}
             attribute={attribute}
-            variant={SelectVariant.checkbox}
             onSelect={handleAttributeValueChange}
             filters={filters}
+            isCheckbox={true}
           />
         );
     }
@@ -169,26 +188,25 @@ export const AttributeFilter: React.FC<AttributeFilterProps> = ({
         data-test={TestIds.AttributeFilters}
       >
         <Select
-          onToggle={handleAttributeToggle}
           isOpen={isAttributeExpanded}
           onSelect={handleAttributeSelect}
-          placeholderText={t('Attribute')}
-          isDisabled={isDisabled}
-          selections={selectedAttributeId}
-          toggleIcon={<FilterIcon />}
+          placeholder={t('Attribute')}
+          toggle={toggle}
         >
-          {attributeList.map(({ name: label, id }) => (
-            <SelectOption key={id} value={id}>
-              {label}
-            </SelectOption>
-          ))}
+          <SelectList>
+            {attributeList.map(({ name: label, id }) => (
+              <SelectOption key={id} value={id} isSelected={selectedAttributeId === id}>
+                {label}
+              </SelectOption>
+            ))}
+          </SelectList>
         </Select>
         {attributeList.map((attribute) => (
           <ToolbarFilter
             key={`toolbar-filter-${attribute.id}`}
-            chips={Array.from(filters[attribute.id] ?? [])}
-            deleteChip={handleDeleteAttributeValue(attribute.id)}
-            deleteChipGroup={handleDeleteAttributeGroup(attribute.id)}
+            labels={Array.from(filters[attribute.id] ?? [])}
+            deleteLabel={handleDeleteAttributeValue(attribute.id)}
+            deleteLabelGroup={handleDeleteAttributeGroup(attribute.id)}
             categoryName={attribute.name}
             data-test={'test'}
           >

web/src/components/filters/search-select.css

@@ -1,4 +1,4 @@
-.co-logs__search-select .pf-c-form__fieldset {
+.co-logs__search-select .pf-v6-c-form__fieldset {
   max-height: 50vh;
   overflow: auto;
 }