Improve log settings experience

Switch from the OverflowMenu to a custom Popover to improve the user
experience of toggling log levels. The OverflowMenu approach closes
the menu on each change requiring multiple additional clicks for each
log level the user wishes to toggle. With the Popover we can now keep
the menu open until explicitly dismissed, meaning users can much more
easily make multiple changes.

Also display a notice at the start of the logs if lines are hidden
due to the currently selected log levels.

Author: AlanGreene

packages/components/src/components/Log/Log.jsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2024 The Tekton Authors
+Copyright 2019-2025 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -14,9 +14,9 @@ limitations under the License.
 import { Component, createRef } from 'react';
 import { Button, PrefixContext, SkeletonText } from '@carbon/react';
 import { FixedSizeList as List } from 'react-window';
-import { injectIntl } from 'react-intl';
+import { injectIntl, useIntl } from 'react-intl';
 import { getStepStatusReason, isRunning } from '@tektoncd/dashboard-utils';
-import { DownToBottom, UpToTop } from '@carbon/react/icons';
+import { DownToBottom, Information, UpToTop } from '@carbon/react/icons';
 
 import {
   hasElementPositiveVerticalScrollBottom,
@@ -33,6 +33,52 @@ const defaultHeight = itemSize * 100 + itemSize / 2;
 const logFormatRegex =
   /^((?<timestamp>\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3,9}Z)\s?)?(::(?<level>error|warning|info|notice|debug)::)?(?<message>.*)?$/s;
 
+function LogsFilteredNotification({ displayedLogLines, totalLogLines }) {
+  const intl = useIntl();
+
+  if (displayedLogLines === totalLogLines) {
+    return null;
+  }
+
+  if (displayedLogLines === 0) {
+    return (
+      <span className="tkn--log-filtered">
+        <Information />{' '}
+        {intl.formatMessage({
+          id: 'dashboard.logs.hidden.all',
+          defaultMessage: 'All lines hidden due to selected log levels'
+        })}
+      </span>
+    );
+  }
+
+  const hiddenLines = totalLogLines - displayedLogLines;
+  const message =
+    hiddenLines === 1
+      ? intl.formatMessage(
+          {
+            id: 'dashboard.logs.hidden.one',
+            defaultMessage: '1 line hidden due to selected log levels'
+          },
+          { numHiddenLines: totalLogLines - displayedLogLines }
+        )
+      : intl.formatMessage(
+          {
+            id: 'dashboard.logs.hidden',
+            defaultMessage:
+              '{numHiddenLines, plural, other {# lines}} hidden due to selected log levels'
+          },
+          { numHiddenLines: totalLogLines - displayedLogLines }
+        );
+
+  return (
+    <span className="tkn--log-filtered">
+      <Information />
+      {message}
+    </span>
+  );
+}
+
 export class LogContainer extends Component {
   constructor(props) {
     super(props);
@@ -294,12 +340,19 @@ export class LogContainer extends Component {
       }
       return acc;
     }, []);
+
     if (parsedLogs.length < 20_000) {
       return (
-        <LogFormat
-          fields={{ level: showLevels, timestamp: showTimestamps }}
-          logs={parsedLogs}
-        />
+        <>
+          <LogsFilteredNotification
+            displayedLogLines={parsedLogs.length}
+            totalLogLines={logs.length}
+          />
+          <LogFormat
+            fields={{ level: showLevels, timestamp: showTimestamps }}
+            logs={parsedLogs}
+          />
+        </>
       );
     }
 
@@ -308,22 +361,28 @@ export class LogContainer extends Component {
       : defaultHeight;
 
     return (
-      <List
-        height={height}
-        itemCount={parsedLogs.length}
-        itemData={parsedLogs}
-        itemSize={itemSize}
-        width="100%"
-      >
-        {({ data, index, style }) => (
-          <div style={style}>
-            <LogFormat
-              fields={{ level: showLevels, timestamp: showTimestamps }}
-              logs={[data[index]]}
-            />
-          </div>
-        )}
-      </List>
+      <>
+        <LogsFilteredNotification
+          displayedLogLines={parsedLogs.length}
+          totalLogLines={logs.length}
+        />
+        <List
+          height={height}
+          itemCount={parsedLogs.length}
+          itemData={parsedLogs}
+          itemSize={itemSize}
+          width="100%"
+        >
+          {({ data, index, style }) => (
+            <div style={style}>
+              <LogFormat
+                fields={{ level: showLevels, timestamp: showTimestamps }}
+                logs={[data[index]]}
+              />
+            </div>
+          )}
+        </List>
+      </>
     );
   };
 

packages/components/src/components/Log/Log.stories.jsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2024 The Tekton Authors
+Copyright 2019-2025 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -135,6 +135,7 @@ export const Toolbar = {
         {...args}
         toolbar={
           <LogsToolbar
+            id="logs-toolbar"
             logLevels={args.showLevels ? args.logLevels : null}
             name="step_log_filename.txt"
             onToggleLogLevel={logLevel =>

packages/components/src/components/Log/_Log.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2024 The Tekton Authors
+Copyright 2019-2025 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -29,7 +29,7 @@ pre.tkn--log {
   }
 
   line-height: 1rem; // Update the react-window List itemSize if changing this
-  overflow: hidden;
+  // overflow: hidden; // TODO: logs - verify it's ok to remove this as it's interfering with the popover
   background-color: $background;
   color: $text-primary;
 
@@ -95,7 +95,6 @@ pre.tkn--log {
     block-size: 2rem;
     min-block-size: 2rem;
     background-color: $background;
-
     &:hover {
       background-color: $layer-hover;
     }
@@ -124,9 +123,33 @@ pre.tkn--log {
 
   .tkn--log-container {
     overflow-x: auto;
+
+    .tkn--log-filtered {
+      display: flex;
+      margin-block-end: 1rem;
+
+      svg {
+        margin-inline-end: 0.5rem;
+      }
+    }
   }
 
-  .tkn--log-container:not(:empty) + .tkn--log-trailer {
+  .tkn--log-container:has(code:not(:empty)) + .tkn--log-trailer {
     margin-block-start: 1rem;
   }
+
+  .tkn--log-settings-menu-content {
+    padding-block-end: .5rem;
+    padding-block-start: 1rem;
+    padding-inline: 1rem;
+    font-family: 'IBM Plex Sans', sans-serif;
+    color: $text-secondary;
+
+    hr {
+      border: none;
+      margin-block: 1rem;
+      background: $border-subtle;
+      block-size: 1px;
+    }
+  }
 }