OU-656: Migrate to PatternFly v6

web/cypress/views/utils.ts

@@ -35,7 +35,7 @@ export function getPFVersion() {
   const style = getComputedStyle(document.documentElement);
   if (style.getPropertyValue('--pf-v6-global--FontSize--md')) {
     return 'v6';
-  } else if (style.getPropertyValue('--pf-v5-global--FontSize--md')) {
+  } else if (style.getPropertyValue("--pf-t--global--font--size--md")) {
     return 'v5';
   }
   // Default to current version

web/package.json

@@ -45,16 +45,16 @@
     "@types/react-router-dom": "^5.3.2",
     "@types/react-virtualized": "^9.22.0",
     "@types/webpack-dev-server": "^4.7.2",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
     "concurrently": "^7.3.0",
     "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^6.7.1",
     "cypress": "^14.5.3",
     "cypress-multi-reporters": "^1.4.0",
     "cypress-terminal-report": "^3.5.2",
     "cypress-wait-until": "^3.0.2",
-    "eslint": "^8.44.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.37.5",
@@ -99,16 +99,36 @@
   },
   "dependencies": {
     "@grafana/lezer-logql": "^0.2.6",
-    "@patternfly/patternfly": "^5.4.2",
-    "@patternfly/react-charts": "^7.2.2",
-    "@patternfly/react-core": "^5.4.13",
-    "@patternfly/react-icons": "^5.4.2",
-    "@patternfly/react-table": "^5.4.15",
-    "@patternfly/react-virtualized-extension": "^5.1.0",
+    "@patternfly/patternfly": "^6.4.0",
+    "@patternfly/react-charts": "^8.4.0",
+    "@patternfly/react-core": "^6.4.0",
+    "@patternfly/react-icons": "^6.4.0",
+    "@patternfly/react-table": "^6.4.0",
+    "@patternfly/react-virtualized-extension": "^6.2.0",
     "i18next": "^22.4.12",
     "mocha-junit-reporter": "^2.2.1",
     "react-i18next": "^11.18.6",
-    "react-router-dom-v5-compat": "^6.30.0"
+    "react-router-dom-v5-compat": "^6.30.0",
+    "victory": "^37.3.6",
+    "victory-area": "^37.3.6",
+    "victory-axis": "^37.3.6",
+    "victory-bar": "^37.3.6",
+    "victory-box-plot": "^37.3.6",
+    "victory-brush-container": "^37.3.6",
+    "victory-chart": "^37.3.6",
+    "victory-core": "^37.3.6",
+    "victory-create-container": "^37.3.6",
+    "victory-cursor-container": "^37.3.6",
+    "victory-group": "^37.3.6",
+    "victory-legend": "^37.3.6",
+    "victory-line": "^37.3.6",
+    "victory-pie": "^37.3.6",
+    "victory-scatter": "^37.3.6",
+    "victory-selection-container": "^37.3.6",
+    "victory-stack": "^37.3.6",
+    "victory-tooltip": "^37.3.6",
+    "victory-voronoi-container": "^37.3.6",
+    "victory-zoom-container": "^37.3.6"
   },
   "nyc": {
     "report-dir": "./coverage/cov-cypress"

web/src/attribute-filters.tsx

@@ -204,15 +204,15 @@ const getNamespaceAttributeOptions = (
     return true;
   };
 
-  const filteredProjectList = projectsDataSource(tenantFilter)();
-  const filteredLokiNamespaceList = lokiLabelValuesDataSource({
-    config,
-    tenant,
-    labelName: namespaceLabel,
-  })().then((options) => options.filter((opt) => lokiTenantFilter(opt.value)));
-
-  return () =>
-    Promise.allSettled<Option[]>([filteredProjectList, filteredLokiNamespaceList]).then(
+  return () => {
+    const filteredProjectList = projectsDataSource(tenantFilter)();
+    const filteredLokiNamespaceList = lokiLabelValuesDataSource({
+      config,
+      tenant,
+      labelName: namespaceLabel,
+    })().then((options) => options.filter((opt) => lokiTenantFilter(opt.value)));
+
+    return Promise.allSettled<Option[]>([filteredProjectList, filteredLokiNamespaceList]).then(
       (results) => {
         const namespaceOptions: Set<string> = new Set();
         results.forEach((result) => {
@@ -227,6 +227,7 @@ const getNamespaceAttributeOptions = (
           .map((ns) => ({ option: ns, value: ns }));
       },
     );
+  };
 };
 
 // The logs-page and the logs-dev-page both need a default set of attributes to pass

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

@@ -1,11 +1,11 @@
 .lv-plugin__alert-metrics__container {
-  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);
+  border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--on-secondary);
+  margin: 0 0 var(--pf-t--global--spacer--md) 0;
+  padding: var(--pf-t--global--spacer--sm);
 }
 
 .lv-plugin__metrics__header {
-  margin-bottom: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-t--global--spacer--sm);
 }
 
 .lv-plugin__metrics__error {

web/src/components/error-message.css

@@ -1,9 +1,9 @@
 .lv-plugin__error_message {
-  margin-bottom: var(--pf-v5-global--spacer--md);
-  margin-top: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-t--global--spacer--md);
+  margin-top: var(--pf-t--global--spacer--md);
   background-color: transparent;
 }
 
-.lv-plugin__table__row-error .pf-v5-c-code-block__pre {
+.lv-plugin__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';
@@ -39,7 +32,7 @@ const queryWithNamespaceCode = (schema: Schema) =>
   `{ ${getStreamLabelsFromSchema(schema)[ResourceLabel.Namespace]} = "<namespace>"}`;
 
 const Suggestion: React.FC = ({ children }) => (
-  <Text component={TextVariants.small}>{children}</Text>
+  <Content component={ContentVariants.small}>{children}</Content>
 );
 
 const ForbiddenWithNamespace: React.FC<{ t: TFunction }> = ({ t }) => (
@@ -201,12 +194,11 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({
       />
 
       {hasSuggestions ? (
-        <TextContent>
-          <Text component={TextVariants.p}>{title}</Text>
-
+        <Content>
+          <Content component={ContentVariants.p}>{title}</Content>
           {forbiddenSuggestion}
           {suggestions}
-        </TextContent>
+        </Content>
       ) : null}
     </>
   );

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

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

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

@@ -5,8 +5,8 @@ import {
   SelectList,
   SelectOption,
   TextInput,
-  ToolbarChip,
-  ToolbarChipGroup,
+  ToolbarLabel,
+  ToolbarLabelGroup,
   ToolbarFilter,
   ToolbarGroup,
 } from '@patternfly/react-core';
@@ -139,7 +139,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,
@@ -238,9 +238,9 @@ export const AttributeFilter: React.FC<AttributeFilterProps> = ({
         {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}
           >
             {selectedAttributeId === attribute.id && renderAttributeValueComponent(attribute)}

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

@@ -343,9 +343,12 @@ export const SearchSelect: React.FC<SearchSelectProps> = ({
         />
         {inputValue.length > 0 && (
           <TextInputGroupUtilities>
-            <Button variant="plain" onClick={handleClear} aria-label="Clear input value">
-              <TimesIcon aria-hidden />
-            </Button>
+            <Button
+              icon={<TimesIcon aria-hidden />}
+              variant="plain"
+              onClick={handleClear}
+              aria-label="Clear input value"
+            />
           </TextInputGroupUtilities>
         )}
       </TextInputGroup>

web/src/components/log-detail.css

@@ -1,11 +1,11 @@
-.pf-v5-c-description-list.pf-v5-m-compact.lv-plugin__detail_descripton-list {
-  --pf-v5-c-description-list--RowGap: var(--pf-v5-global--spacer--sm);
+.pf-v6-c-description-list.pf-m-compact.lv-plugin__detail_descripton-list {
+  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--sm);
 }
 
 .lv-plugin__detail__list-term {
   overflow-wrap: anywhere;
 }
 
-.lv-plugin__detail_descripton-list .pf-v5-c-description-list__group {
+.lv-plugin__detail_descripton-list .pf-v6-c-description-list__group {
   grid-template-columns: max-content 1fr;
 }

web/src/components/logs-histogram.css

@@ -1,4 +1,4 @@
 .lv-plugin__histogram__tooltip-line {
-  stroke: var(--pf-v5-global--BackgroundColor--dark-100);
+  stroke: var(--pf-t--global--background--color--primary--default);
   stroke-dasharray: 3;
 }

web/src/components/logs-histogram.tsx

@@ -1,12 +1,12 @@
+import { ChartLegendTooltipProps } from '@patternfly/react-charts/victory';
 import {
   Chart,
   ChartAxis,
   ChartBar,
   ChartLegendTooltip,
-  ChartLegendTooltipProps,
   ChartStack,
   createContainer,
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
 import { Alert, Card, CardBody } from '@patternfly/react-core';
 import React from 'react';

web/src/components/logs-metrics.tsx

@@ -7,7 +7,7 @@ import {
   ChartThemeColor,
   createContainer,
   getThemeColors,
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import { Alert } from '@patternfly/react-core';
 import { InnerScrollContainer, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import React from 'react';

web/src/components/logs-query-input.css

@@ -4,11 +4,11 @@
 }
 
 .lv-plugin__expression-input__form {
-  margin-right: var(--pf-v5-global--spacer--md);
+  margin-right: var(--pf-t--global--spacer--md);
   width: 100%;
 }
 
-textarea.pf-v5-c-form-control.lv-plugin__expression-input__searchInput {
-  font-family: var(--pf-v5-c-code-block__pre--FontFamily), monospace;
-  font-size: var(--pf-v5-c-code-block__pre--FontSize);
+textarea.pf-v6-c-form-control.lv-plugin__expression-input__searchInput {
+  font-family: var(--pf-v6-c-code-block__pre--FontFamily), monospace;
+  font-size: var(--pf-v6-c-code-block__pre--FontSize);
 }