@oneuptime/common 12.0.9 → 12.0.11

package/UI/Components/AutocompleteTextInput/AutocompleteTextInput.tsx

@@ -27,6 +27,12 @@ export interface ComponentProps {
   isLoadingSuggestions?: boolean | undefined;
   loadingMessage?: string | undefined;
   noSuggestionsMessage?: string | undefined;
+  /*
+   * The id of the element that names this input. Without it a picker that draws
+   * its own label - the workflow record editor, where the field's name sits in
+   * the column beside the box - leaves the input unnamed to a screen reader.
+   */
+  ariaLabelledby?: string | undefined;
 }
 
 const BASE_INPUT_CLASS: string =
@@ -458,6 +464,7 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
         className={getInputClassName()}
         data-testid={props.dataTestId}
         disabled={props.disabled}
+        aria-labelledby={props.ariaLabelledby}
         aria-autocomplete="list"
         aria-controls={listboxIdRef.current}
         aria-expanded={showMenu}

package/UI/Components/Button/Button.tsx

@@ -158,47 +158,39 @@ const Button: FunctionComponent<ComponentProps> = ({
 
   if (buttonStyle === ButtonStyleType.DANGER) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 text-base font-medium text-white shadow-sm ${
-      disabled ? "hover:bg-red-700" : ""
+      disabled ? "" : "hover:bg-red-700"
     } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.DANGER_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-red-700 bg-white text-base font-medium text-red-700 shadow-sm ${
-      disabled ? "hover:bg-red-50" : ""
+      disabled ? "" : "hover:bg-red-50"
     } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.PRIMARY) {
     loadingIconClassName += ` text-indigo-100`;
-    buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 text-base font-medium text-white shadow-sm ${
-      disabled ? "hover:bg-indigo-700" : ""
-    } focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
-
-    if (disabled) {
-      buttonStyleCssClass += ` bg-indigo-300`;
-    }
+    buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent ${
+      disabled ? "bg-indigo-300" : "bg-indigo-600 hover:bg-indigo-700"
+    } text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.SECONDARY) {
     loadingIconClassName += ` text-indigo-500`;
-    buttonStyleCssClass = `inline-flex items-center rounded-md border border-transparent bg-indigo-100 text-sm font-medium text-indigo-700 ${
-      disabled ? "hover:bg-indigo-200" : ""
-    } focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
-
-    if (disabled) {
-      buttonStyleCssClass += ` bg-indigo-300`;
-    }
+    buttonStyleCssClass = `inline-flex items-center rounded-md border border-transparent ${
+      disabled ? "bg-indigo-300" : "bg-indigo-100 hover:bg-indigo-200"
+    } text-sm font-medium text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
   }
 
   if (buttonStyle === ButtonStyleType.ICON_LIGHT) {
     buttonStyleCssClass = `rounded-md bg-white text-gray-400 ${
-      disabled ? "hover:text-gray-500" : ""
+      disabled ? "" : "hover:text-gray-500"
     }  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
   }
 
   if (buttonStyle === ButtonStyleType.ICON) {
     buttonStyleCssClass = `rounded-md bg-transparent text-gray-600 ${
-      disabled ? "hover:text-gray-900" : ""
+      disabled ? "" : "hover:text-gray-900"
     }  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
   }
 
@@ -225,25 +217,25 @@ const Button: FunctionComponent<ComponentProps> = ({
 
   if (buttonStyle === ButtonStyleType.SUCCESS) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-green-600 text-base font-medium text-white shadow-sm ${
-      disabled ? "hover:bg-green-700" : ""
+      disabled ? "" : "hover:bg-green-700"
     }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.SUCCESS_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-green-700 bg-white text-base font-medium text-green-700 shadow-sm ${
-      disabled ? "hover:bg-green-50" : ""
+      disabled ? "" : "hover:bg-green-50"
     }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-yellow-600 text-base font-medium text-white shadow-sm  ${
-      disabled ? "hover:bg-yellow-700" : ""
+      disabled ? "" : "hover:bg-yellow-700"
     }  focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-yellow-700 bg-white text-base font-medium text-yellow-700 shadow-sm ${
-      disabled ? "hover:bg-yellow-50" : ""
+      disabled ? "" : "hover:bg-yellow-50"
     }   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -13,7 +13,9 @@ import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
 import YAxis from "../Types/YAxis/YAxis";
 import ChartCurve from "../Types/ChartCurve";
-import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import ChartDataPoint, {
+  CHART_DATA_POINT_X_AXIS_KEY,
+} from "../ChartLibrary/Types/ChartDataPoint";
 import FormattedExemplarPoint from "../ChartLibrary/Types/FormattedExemplarPoint";
 import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
 import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
@@ -185,7 +187,7 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
       <AreaChart
         data={records}
         tickGap={30}
-        index={"Time"}
+        index={CHART_DATA_POINT_X_AXIS_KEY}
         categories={categories}
         colors={
           props.colors && props.colors.length > 0

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -12,7 +12,9 @@ import React, {
 import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
 import YAxis from "../Types/YAxis/YAxis";
-import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import ChartDataPoint, {
+  CHART_DATA_POINT_X_AXIS_KEY,
+} from "../ChartLibrary/Types/ChartDataPoint";
 import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
 import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
 import DataPointUtil from "../Utils/DataPoint";
@@ -119,7 +121,7 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
       <BarChart
         data={records}
         tickGap={30}
-        index={"Time"}
+        index={CHART_DATA_POINT_X_AXIS_KEY}
         categories={categories}
         colors={
           props.colors && props.colors.length > 0

package/UI/Components/Charts/ChartLibrary/Types/ChartDataPoint.ts

@@ -5,6 +5,19 @@
  */
 export const CHART_DATA_POINT_DATE_KEY: string = "__date";
 
+/**
+ * Per-row field carrying the FORMATTED x-axis label.
+ *
+ * This is the recharts `XAxis` dataKey — the Line / Bar / Area wrappers all
+ * pass it down as their `index` prop. `DataPointUtil` must therefore write
+ * the label under exactly this key: a row keyed anything else leaves every
+ * point with an undefined category, and recharts then draws no line, bar or
+ * area at all (the axes and grid still render, so the chart looks alive but
+ * empty). Keeping the single constant on both sides is what stops that from
+ * being an invisible coupling between two distant files.
+ */
+export const CHART_DATA_POINT_X_AXIS_KEY: string = "Time";
+
 export default interface ChartDataPoint {
   [x: string]: number | string;
 }

package/UI/Components/Charts/Line/LineChart.tsx

@@ -13,7 +13,9 @@ import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
 import YAxis from "../Types/YAxis/YAxis";
 import ChartCurve from "../Types/ChartCurve";
-import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import ChartDataPoint, {
+  CHART_DATA_POINT_X_AXIS_KEY,
+} from "../ChartLibrary/Types/ChartDataPoint";
 import FormattedExemplarPoint from "../ChartLibrary/Types/FormattedExemplarPoint";
 import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
 import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
@@ -165,7 +167,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
       <LineChart
         data={records}
         tickGap={30}
-        index={"Time"}
+        index={CHART_DATA_POINT_X_AXIS_KEY}
         categories={categories}
         colors={
           props.colors && props.colors.length > 0

package/UI/Components/Charts/Types/XAxis/XAxis.ts

@@ -16,6 +16,12 @@ export interface XAxisOptions {
 }
 
 export interface XAxis {
+  /*
+   * Human-readable name for the axis. Purely descriptive: the per-row key
+   * the charts read is CHART_DATA_POINT_X_AXIS_KEY, never this string. It
+   * used to double as that key, which meant a caller passing anything but
+   * "Time" got a chart with axes and no series drawn on them.
+   */
   legend: string;
   options: XAxisOptions;
 }

package/UI/Components/Charts/Utils/DataPoint.ts

@@ -10,6 +10,7 @@
 import BadDataException from "../../../../Types/Exception/BadDataException";
 import ChartDataPoint, {
   CHART_DATA_POINT_DATE_KEY,
+  CHART_DATA_POINT_X_AXIS_KEY,
 } from "../ChartLibrary/Types/ChartDataPoint";
 import SeriesPoints from "../Types/SeriesPoints";
 import { XAxis, XAxisAggregateType } from "../Types/XAxis/XAxis";
@@ -30,18 +31,14 @@ export default class DataPointUtil {
     xAxis: XAxis;
     yAxis: YAxis;
   }): Array<ChartDataPoint> {
-    const { xAxisLegend, intervals, formatter } = this.initializeXAxisData(
-      data.xAxis,
-    );
+    const { intervals, formatter } = this.initializeXAxisData(data.xAxis);
     const arrayOfData: ChartDataPoint[] = this.initializeArrayOfData(
       intervals,
-      xAxisLegend,
       formatter,
     );
     this.processSeriesData(
       data.seriesPoints,
       arrayOfData,
-      xAxisLegend,
       formatter,
       data.xAxis.options.aggregateType,
     );
@@ -51,13 +48,11 @@ export default class DataPointUtil {
   private static initializeXAxisData(xAxis: XAxis): {
     xAxisMax: XAxisMaxMin;
     xAxisMin: XAxisMaxMin;
-    xAxisLegend: string;
     intervals: Array<Date>;
     formatter: (value: Date) => string;
   } {
     const xAxisMax: XAxisMaxMin = xAxis.options.max;
     const xAxisMin: XAxisMaxMin = xAxis.options.min;
-    const xAxisLegend: string = xAxis.legend;
     const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals({
       xAxisMax,
       xAxisMin,
@@ -66,18 +61,25 @@ export default class DataPointUtil {
       xAxisMax,
       xAxisMin,
     });
-    return { xAxisMax, xAxisMin, xAxisLegend, intervals, formatter };
+    return { xAxisMax, xAxisMin, intervals, formatter };
   }
 
   private static initializeArrayOfData(
     intervals: Array<Date>,
-    xAxisLegend: string,
     formatter: (value: Date) => string,
   ): Array<ChartDataPoint> {
     const arrayOfData: Array<ChartDataPoint> = [];
     for (const interval of intervals) {
       const dataPoint: ChartDataPoint = {};
-      dataPoint[xAxisLegend] = formatter(interval);
+      /*
+       * Always the canonical key, NEVER `xAxis.legend`. The wrappers hand
+       * recharts this exact key as the XAxis dataKey, so keying rows off a
+       * caller-supplied string meant one caller passing anything else
+       * (the SLO dashboard widget passed "") produced rows recharts could
+       * not read — every point landed on an undefined category and the
+       * line silently vanished while the axes still drew.
+       */
+      dataPoint[CHART_DATA_POINT_X_AXIS_KEY] = formatter(interval);
       /*
        * The formatted label is not round-trippable back to a Date, so
        * keep the raw bucket start on the row — charts use it to recover
@@ -92,7 +94,6 @@ export default class DataPointUtil {
   private static processSeriesData(
     seriesPoints: Array<SeriesPoints>,
     arrayOfData: Array<ChartDataPoint>,
-    xAxisLegend: string,
     formatter: (value: Date) => string,
     aggregateType: XAxisAggregateType,
   ): { [key: string]: SeriesData } {
@@ -123,7 +124,9 @@ export default class DataPointUtil {
 
         const target: ChartDataPoint | undefined = arrayOfData.find(
           (chartDataPoint: ChartDataPoint) => {
-            return chartDataPoint[xAxisLegend] === formattedDate;
+            return (
+              chartDataPoint[CHART_DATA_POINT_X_AXIS_KEY] === formattedDate
+            );
           },
         );
         if (!target) {

package/UI/Components/Dictionary/Dictionary.tsx

@@ -36,20 +36,6 @@ export interface ComponentProps {
   valueTypes?: Array<ValueType>; // by default it'll be Text
   keys?: Array<string> | undefined;
   valueSuggestions?: Record<string, Array<string>> | undefined;
-  /*
-   * Per-key placeholder for the value input, falling back to valuePlaceholder
-   * for any key not listed. The record editor uses this to show the model's own
-   * example value against the column it belongs to, which is a far better
-   * answer to "what goes in this box" than one generic word repeated down the
-   * column.
-   */
-  valuePlaceholders?: Record<string, string> | undefined;
-  /*
-   * Suggestions offered on a row whose key has no entry in valueSuggestions.
-   * Used for suggestions that are about the form rather than the column - the
-   * workflow's {{...}} references, which are equally valid in any row.
-   */
-  defaultValueSuggestions?: Array<string> | undefined;
   onKeySelected?: ((key: string) => void) | undefined;
   isLoadingKeys?: boolean | undefined;
   loadingValueKeys?: Array<string> | undefined;
@@ -245,33 +231,12 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
     return "";
   };
 
-  type ValuePlaceholderForFunction = (key: string) => string | undefined;
-
-  const valuePlaceholderFor: ValuePlaceholderForFunction = (
-    key: string,
-  ): string | undefined => {
-    return (
-      (key ? props.valuePlaceholders?.[key] : undefined) ||
-      props.valuePlaceholder
-    );
-  };
-
   type ValueSuggestionsForFunction = (key: string) => Array<string> | undefined;
 
   const valueSuggestionsFor: ValueSuggestionsForFunction = (
     key: string,
   ): Array<string> | undefined => {
-    const forKey: Array<string> | undefined = key
-      ? props.valueSuggestions?.[key]
-      : undefined;
-
-    /*
-     * Column-specific suggestions win outright rather than merging: a column
-     * with a known set of values should not have workflow references mixed into
-     * that set, and a row with no such set is exactly where a reference is the
-     * likely thing to type.
-     */
-    return forKey && forKey.length > 0 ? forKey : props.defaultValueSuggestions;
+    return key ? props.valueSuggestions?.[key] : undefined;
   };
 
   const operatorDropdownOptions: Array<DropdownOption> =
@@ -452,7 +417,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   operatorOption.expectsMultiValue && (
                     <Dropdown
                       isMultiSelect={true}
-                      placeholder={valuePlaceholderFor(item.key)}
+                      placeholder={props.valuePlaceholder}
                       value={(Array.isArray(item.value) ? item.value : []).map(
                         (selectedValue: string) => {
                           return { label: selectedValue, value: selectedValue };
@@ -499,7 +464,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                       placeholder={
                         operatorOption.expectsNumericValue
                           ? "Number"
-                          : valuePlaceholderFor(item.key)
+                          : props.valuePlaceholder
                       }
                       suggestions={
                         operatorOption.expectsNumericValue
@@ -540,7 +505,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                 {!hideValueInput && item.type === ValueType.Number && (
                   <Input
                     value={item.value.toString()}
-                    placeholder={valuePlaceholderFor(item.key)}
+                    placeholder={props.valuePlaceholder}
                     onChange={(value: string) => {
                       const newData: Array<Item> = [...data];
                       const parsedValue: number = parseInt(value);

package/UI/Components/Icon/Icon.tsx

@@ -932,7 +932,7 @@ const Icon: FunctionComponent<ComponentProps> = ({
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+        d="M15.75 19.5L8.25 12l7.5-7.5"
       />,
     );
   } else if (icon === IconProp.Window) {

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -134,6 +134,8 @@ export interface ComponentProps {
   savedViews?: Array<LogsSavedViewOption> | undefined;
   selectedSavedViewId?: string | null;
   onSavedViewSelect?: ((viewId: string) => void) | undefined;
+  // Deselect the active saved view and reset the explorer to its default.
+  onClearSavedView?: (() => void) | undefined;
   onCreateSavedView?: (() => void) | undefined;
   onEditSavedView?: ((viewId: string) => void) | undefined;
   onDeleteSavedView?: ((viewId: string) => void) | undefined;
@@ -1044,6 +1046,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     savedViews: props.savedViews,
     selectedSavedViewId: props.selectedSavedViewId,
     onSavedViewSelect: props.onSavedViewSelect,
+    onClearSavedView: props.onClearSavedView,
     onCreateSavedView: props.onCreateSavedView,
     onEditSavedView: props.onEditSavedView,
     onDeleteSavedView: props.onDeleteSavedView,
@@ -1157,6 +1160,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               savedViews={props.savedViews}
               selectedSavedViewId={props.selectedSavedViewId}
               onSavedViewSelect={props.onSavedViewSelect}
+              onClearSavedView={props.onClearSavedView}
               onFacetSearchChange={props.onFacetSearchChange}
             />
           )}
@@ -1226,7 +1230,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
                 pageSizeOptions={PAGE_SIZE_OPTIONS}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
-                isDisabled={props.isLoading || totalItems === 0}
+                isDisabled={props.isLoading}
               />
             </div>
           </div>

package/UI/Components/LogsViewer/components/LogsFacetSidebar.tsx

@@ -30,6 +30,8 @@ export interface LogsFacetSidebarProps {
   savedViews?: Array<LogsSavedViewOption> | undefined;
   selectedSavedViewId?: string | null | undefined;
   onSavedViewSelect?: ((viewId: string) => void) | undefined;
+  // Toggling the applied view off here has to clear it, not re-apply it.
+  onClearSavedView?: (() => void) | undefined;
   /*
    * Called (debounced) when typing in a resource facet's search box. Lets
    * the parent re-issue the facets request with the typed text scoped to
@@ -283,7 +285,13 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
                         ? "bg-indigo-50 text-indigo-700"
                         : "text-gray-600 hover:bg-gray-50 hover:text-gray-800"
                     }`}
+                    aria-pressed={isSelected}
                     onClick={() => {
+                      if (isSelected && props.onClearSavedView) {
+                        props.onClearSavedView();
+                        return;
+                      }
+
                       props.onSavedViewSelect?.(view.id);
                     }}
                   >

package/UI/Components/LogsViewer/components/LogsPagination.tsx

@@ -1,3 +1,4 @@
+import Pagination from "../../Pagination/Pagination";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface LogsPaginationProps {
@@ -10,101 +11,38 @@ export interface LogsPaginationProps {
   isDisabled?: boolean;
 }
 
+/**
+ * The logs footer is the shared pagination control in its compact skin, so
+ * "rows per page" and jump-to-page behave the same here as they do under
+ * every table in the product.
+ */
 const LogsPagination: FunctionComponent<LogsPaginationProps> = (
   props: LogsPaginationProps,
 ): ReactElement => {
-  const totalPages: number = Math.max(
-    1,
-    Math.ceil(
-      props.totalItems === 0
-        ? 1
-        : props.totalItems / Math.max(props.pageSize, 1),
-    ),
-  );
-
-  const safeCurrentPage: number = Math.min(props.currentPage, totalPages);
-
-  const firstItemIndex: number =
-    props.totalItems === 0 ? 0 : (safeCurrentPage - 1) * props.pageSize + 1;
-  const lastItemIndex: number =
-    props.totalItems === 0
-      ? 0
-      : Math.min(props.totalItems, safeCurrentPage * props.pageSize);
-
-  const disablePrev: boolean =
-    props.isDisabled || props.totalItems === 0 || safeCurrentPage <= 1;
-  const disableNext: boolean =
-    props.isDisabled || props.totalItems === 0 || safeCurrentPage >= totalPages;
-
   return (
-    <div className="flex flex-col gap-3 border-t border-gray-200 bg-gray-50/50 px-4 py-2.5 text-xs text-gray-500 md:flex-row md:items-center md:justify-between">
-      <div>
-        {props.totalItems === 0 ? (
-          <span className="text-gray-500">No results to display.</span>
-        ) : (
-          <span className="text-gray-500">
-            Showing {firstItemIndex.toLocaleString()}-
-            {lastItemIndex.toLocaleString()} of{" "}
-            {props.totalItems.toLocaleString()}
-          </span>
-        )}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-3">
-        <label className="flex items-center gap-2">
-          <span className="text-[10px] uppercase tracking-wide text-gray-400">
-            Rows
-          </span>
-          <select
-            className="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-200"
-            value={props.pageSize}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-              const size: number = Number(event.target.value) || props.pageSize;
-              props.onPageSizeChange(size);
-            }}
-            disabled={props.isDisabled}
-          >
-            {props.pageSizeOptions.map((option: number) => {
-              return (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              );
-            })}
-          </select>
-        </label>
-
-        <div className="inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-0.5">
-          <button
-            type="button"
-            className="rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40"
-            onClick={() => {
-              if (!disablePrev) {
-                props.onPageChange(Math.max(1, safeCurrentPage - 1));
-              }
-            }}
-            disabled={disablePrev}
-          >
-            Previous
-          </button>
-          <span className="px-3 text-[11px] text-gray-400">
-            Page {safeCurrentPage} / {totalPages}
-          </span>
-          <button
-            type="button"
-            className="rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40"
-            onClick={() => {
-              if (!disableNext) {
-                props.onPageChange(Math.min(totalPages, safeCurrentPage + 1));
-              }
-            }}
-            disabled={disableNext}
-          >
-            Next
-          </button>
-        </div>
-      </div>
-    </div>
+    <Pagination
+      dataTestId="logs-pagination"
+      singularLabel="log"
+      pluralLabel="logs"
+      currentPageNumber={props.currentPage}
+      totalItemsCount={props.totalItems}
+      itemsOnPage={props.pageSize}
+      itemsOnPageOptions={props.pageSizeOptions}
+      isCompact={true}
+      className="bg-gray-50/50"
+      isLoading={false}
+      isError={false}
+      isDisabled={Boolean(props.isDisabled)}
+      onNavigateToPage={(pageNumber: number, itemsOnPage: number) => {
+        if (itemsOnPage !== props.pageSize) {
+          props.onPageSizeChange(itemsOnPage);
+        }
+
+        if (pageNumber !== props.currentPage) {
+          props.onPageChange(pageNumber);
+        }
+      }}
+    />
   );
 };
 

package/UI/Components/LogsViewer/components/LogsViewerToolbar.tsx

@@ -28,6 +28,7 @@ export interface LogsViewerToolbarProps {
   savedViews?: Array<LogsSavedViewOption> | undefined;
   selectedSavedViewId?: string | null | undefined;
   onSavedViewSelect?: ((viewId: string) => void) | undefined;
+  onClearSavedView?: (() => void) | undefined;
   onEditSavedView?: ((viewId: string) => void) | undefined;
   onDeleteSavedView?: ((viewId: string) => void) | undefined;
   onUpdateCurrentSavedView?: (() => void) | undefined;
@@ -153,6 +154,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
             savedViews={props.savedViews}
             selectedSavedViewId={props.selectedSavedViewId}
             onSelect={props.onSavedViewSelect}
+            onClear={props.onClearSavedView}
             onCreate={props.onCreateSavedView}
             onEdit={props.onEditSavedView}
             onDelete={props.onDeleteSavedView}