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.
tektoncd · Jan 3, 2025 · 7e46501 · 7e46501
1 parent 2803ac6
commit 7e46501
Show file tree

Hide file tree

Showing 23 changed files with 267 additions and 118 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@carbon/react": "^1.72.0",
+    "@carbon/react": "^1.73.0",
     "@codemirror/legacy-modes": "^6.4.2",
     "@tanstack/react-query": "^4.36.1",
     "@tektoncd/dashboard-components": "*",

diff --git a/packages/components/src/components/Log/Log.jsx b/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>
+      </>
     );
   };
 

diff --git a/packages/components/src/components/Log/Log.stories.jsx b/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 =>

diff --git a/packages/components/src/components/Log/_Log.scss b/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,6 @@ pre.tkn--log {
   }
 
   line-height: 1rem; // Update the react-window List itemSize if changing this
-  overflow: hidden;
   background-color: $background;
   color: $text-primary;
 
@@ -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;
+    }
+  }
 }