openshift · zhuje · Jul 17, 2026
diff --git a/web/src/components/logs-metrics.css b/web/src/components/logs-metrics.css
@@ -3,3 +3,7 @@
   height: 10px;
   margin-right: 5px;
 }
+
+.lv-plugin__metrics-legend-table .pf-v6-c-table__sticky-cell {
+  --pf-v6-c-table__sticky-cell--BackgroundColor: transparent;
+}
diff --git a/web/src/components/logs-metrics.tsx b/web/src/components/logs-metrics.tsx
@@ -228,7 +228,11 @@ export const LogsMetrics: FC<LogsMetricsProps> = ({
           </Chart>
           {displayLegendTable && (
             <InnerScrollContainer>
-              <Table variant="compact" aria-label="alert metrics">
+              <Table
+                variant="compact"
+                aria-label="alert metrics"
+                className="lv-plugin__metrics-legend-table"
+              >
                 <Thead>
                   <Tr>
                     <Th isStickyColumn stickyMinWidth="20px" style={{ width: '20px' }}></Th>

diff --git a/web/src/components/logs-table.css b/web/src/components/logs-table.css
@@ -51,7 +51,7 @@
   bottom: 3px;
   width: 3px;
   left: 3px;
-  background-color: var(--pf-t--global--text--color--disabled);
+  background-color: var(--lv-severity-color, var(--pf-t--global--text--color--disabled));
 }
 
 .lv-plugin__table__row--expanded::before {
@@ -62,30 +62,6 @@
   top: 0;
 }
 
-.lv-plugin__table__severity-critical::before {
-  background-color: var(--pf-t--global--text--color--status--info--default);
-}
-
-.lv-plugin__table__severity-error::before {
-  background-color: var(--pf-t--global--icon--color--status--danger--default);
-}
-
-.lv-plugin__table__severity-warning::before {
-  background-color: var(--pf-t--global--icon--color--status--warning--default);
-}
-
-.lv-plugin__table__severity-info::before {
-  background-color: var(--pf-t--global--color--status--success--default);
-}
-
-.lv-plugin__table__severity-debug::before {
-  background-color: var(--pf-t--global--color--brand--default);
-}
-
-.lv-plugin__table__severity-trace::before {
-  background-color: var(--pf-t--global--text--color--status--custom--default);
-}
-
 .lv-plugin__table__row-info {
   font-size: var(--pf-t--global--font--size--xs);
   background-color: var(--pf-t--global--background--color--primary--default);

diff --git a/web/src/components/logs-table.tsx b/web/src/components/logs-table.tsx
@@ -4,6 +4,7 @@ import { Split, SplitItem } from '@patternfly/react-core';
 import { ISortBy, SortByDirection, Td, ThProps } from '@patternfly/react-table';
 import {
   Children,
+  CSSProperties,
   FC,
   MouseEvent,
   MutableRefObject,
@@ -26,7 +27,7 @@ import {
   StreamLogData,
 } from '../logs.types';
 import { parseName, parseResources, ResourceLabel } from '../parse-resources';
-import { severityFromString } from '../severity';
+import { getSeverityColor, Severity, severityFromString } from '../severity';
 import { numericComparator, bigIntDifference } from '../sort-utils';
 import { TestIds } from '../test-ids';
 import { LogDetail } from './log-detail';
@@ -113,8 +114,11 @@ const aggregateStreamLogData = (
   return [];
 };
 
-const getSeverityClass = (severity: string) => {
-  return severity ? `lv-plugin__table__severity-${severity}` : '';
+const getRowSeverityStyle = (severity: string): CSSProperties => {
+  if (!severity) {
+    return {};
+  }
+  return { '--lv-severity-color': getSeverityColor(severity as Severity) } as CSSProperties;
 };
 
 const columns: Array<TableColumn<LogTableData>> = [
@@ -385,9 +389,14 @@ export const LogsTable: FC<PropsWithChildren<LogsTableProps>> = ({
           ? 'lv-plugin__table__row--expanded'
           : 'lv-plugin__table__row--expanded-details';
     }
-    return `lv-plugin__table__row ${getSeverityClass(row.severity)} ${expandedClass}`;
+    return `lv-plugin__table__row ${expandedClass}`;
   }, []);
 
+  const getRowStyle = useCallback(
+    (row: LogTableData): CSSProperties => getRowSeverityStyle(row.severity),
+    [],
+  );
+
   return (
     <div data-test={TestIds.LogsTable} className="lv-plugin__table">
       {showStats && <StatsTable logsData={logsData} />}
@@ -399,6 +408,7 @@ export const LogsTable: FC<PropsWithChildren<LogsTableProps>> = ({
         columns={columns}
         getSortParams={getSortParams}
         getRowClassName={getRowClassName}
+        getRowStyle={getRowStyle}
         error={error}
         isLoading={isLoading}
         isStreaming={isStreaming}

diff --git a/web/src/components/virtualized-logs-table.tsx b/web/src/components/virtualized-logs-table.tsx
@@ -39,6 +39,7 @@ interface VirtualizedLogsTableProps<D> {
   isLoading?: boolean;
   dataIsEmpty?: boolean;
   getRowClassName?: (obj: D) => string;
+  getRowStyle?: (obj: D) => React.CSSProperties;
   hasMoreLogsData?: boolean;
   isLoadingMore?: boolean;
   onLoadMore?: () => void;
@@ -112,6 +113,7 @@ type VirtualizedTableBodyProps<D, R = unknown> = {
   getRowId?: (obj: D) => string;
   getRowTitle?: (obj: D) => string;
   getRowClassName?: (obj: D) => string;
+  getRowStyle?: (obj: D) => React.CSSProperties;
   scrollToIndex?: number;
   expandedItems?: Set<number>;
   showResources?: boolean;
@@ -149,6 +151,7 @@ const VirtualizedTableBody = ({
   getRowId,
   getRowTitle,
   getRowClassName,
+  getRowStyle,
   scrollToIndex,
   expandedItems,
   showResources,
@@ -217,7 +220,7 @@ const VirtualizedTableBody = ({
             id={getRowId?.(rowArgs.obj) ?? key}
             index={index}
             trKey={key}
-            style={style}
+            style={{ ...style, ...getRowStyle?.(rowArgs.obj) }}
             title={getRowTitle?.(rowArgs.obj)}
             className={getRowClassName?.(rowArgs.obj)}
           >
@@ -291,6 +294,7 @@ export const VirtualizedLogsTable = ({
   columns,
   getSortParams,
   getRowClassName,
+  getRowStyle,
   error,
   isStreaming,
   isLoading,
@@ -396,6 +400,7 @@ export const VirtualizedLogsTable = ({
                         scrollTop={scrollTop}
                         width={width}
                         getRowClassName={getRowClassName}
+                        getRowStyle={getRowStyle}
                         scrollToIndex={scrollToIndex}
                         expandedItems={expandedItems}
                         showResources={showResources}

diff --git a/web/src/severity.ts b/web/src/severity.ts
@@ -1,11 +1,3 @@
-import chartGrayColor from '@patternfly/react-tokens/dist/esm/chart_color_black_200';
-import chartBlueColor from '@patternfly/react-tokens/dist/esm/chart_color_blue_200';
-import chartCyanColor from '@patternfly/react-tokens/dist/esm/chart_color_teal_200';
-import chartYellowColor from '@patternfly/react-tokens/dist/esm/chart_color_yellow_200';
-import chartGreenColor from '@patternfly/react-tokens/dist/esm/chart_color_green_200';
-import chartPurpleColor from '@patternfly/react-tokens/dist/esm/chart_color_purple_200';
-import chartRedColor from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_100';
-
 export type Severity =
   | 'critical'
   | 'error'
@@ -44,26 +36,20 @@ export const isSeverity = (value: string): value is Severity =>
 
 export const getSeverityColor = (severity: Severity): string => {
   switch (severity) {
-    case 'critical':
-      return chartPurpleColor.value;
-      break;
-    case 'error':
-      return chartRedColor.value;
-      break;
-    case 'warning':
-      return chartYellowColor.value;
-      break;
+    case 'critical': // orange
+      return 'var(--pf-t--chart--global--warning--color--100)';
+    case 'error': // red
+      return 'var(--pf-t--chart--global--danger--color--100)';
+    case 'warning': // yellow
+      return 'var(--pf-t--chart--global--warning--color--200)';
     case 'info':
-      return chartGreenColor.value;
-      break;
+      return 'var(--pf-t--chart--color--purple--300)';
     case 'debug':
-      return chartBlueColor.value;
-      break;
+      return 'var(--pf-t--chart--color--blue--300)';
     case 'trace':
-      return chartCyanColor.value;
-      break;
-    default:
-      return chartGrayColor.value;
+      return 'var(--pf-t--chart--color--teal--300)';
+    default: // gray
+      return 'var(--pf-t--chart--color--black--300)';
   }
 };