@oneuptime/common 10.0.70 → 10.0.72

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

@@ -1,4 +1,5 @@
 import { AreaChart } from "../ChartLibrary/AreaChart/AreaChart";
+import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -17,6 +18,19 @@ import ExemplarPoint from "../Types/ExemplarPoint";
 import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
+export const AreaChartPalette: Array<AvailableChartColorsKeys> = [
+  "blue",
+  "emerald",
+  "violet",
+  "amber",
+  "cyan",
+  "pink",
+  "lime",
+  "fuchsia",
+  "indigo",
+  "rose",
+];
+
 export interface ComponentProps {
   data: Array<SeriesPoint>;
   xAxis: XAxis;
@@ -27,6 +41,7 @@ export interface ComponentProps {
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  showLegend?: boolean | undefined;
 }
 
 export interface AreaInternalProps extends ComponentProps {
@@ -93,20 +108,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         tickGap={1}
         index={"Time"}
         categories={categories}
-        colors={[
-          "blue",
-          "emerald",
-          "violet",
-          "amber",
-          "cyan",
-          "pink",
-          "lime",
-          "fuchsia",
-          "indigo",
-          "rose",
-        ]}
+        colors={AreaChartPalette}
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
+        showLegend={props.showLegend !== false}
         connectNulls={true}
         curve={props.curve || ChartCurve.MONOTONE}
         syncid={props.sync ? props.syncid : undefined}

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

@@ -1,4 +1,5 @@
 import { BarChart } from "../ChartLibrary/BarChart/BarChart";
+import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
@@ -8,6 +9,18 @@ import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
+export const BarChartPalette: Array<AvailableChartColorsKeys> = [
+  "indigo",
+  "rose",
+  "emerald",
+  "amber",
+  "cyan",
+  "gray",
+  "pink",
+  "lime",
+  "fuchsia",
+];
+
 export interface ComponentProps {
   data: Array<SeriesPoint>;
   xAxis: XAxis;
@@ -15,6 +28,7 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  showLegend?: boolean | undefined;
 }
 
 export interface BarInternalProps extends ComponentProps {
@@ -61,19 +75,10 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         tickGap={1}
         index={"Time"}
         categories={categories}
-        colors={[
-          "indigo",
-          "rose",
-          "emerald",
-          "amber",
-          "cyan",
-          "gray",
-          "pink",
-          "lime",
-          "fuchsia",
-        ]}
+        colors={BarChartPalette}
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
+        showLegend={props.showLegend !== false}
         yAxisWidth={60}
         syncid={props.sync ? props.syncid : undefined}
         onValueChange={() => {}}

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -36,6 +36,13 @@ export interface Chart {
   metricInfo?: ChartMetricInfo | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  /**
+   * Optional control panel rendered between the chart title and the
+   * chart body. Used by per-series-grouped metric charts to surface a
+   * search box, per-series toggles, and a "show all" escape hatch so
+   * the chart stays usable at thousands of unique label combinations.
+   */
+  seriesControls?: ReactElement | undefined;
 }
 
 export interface ComponentProps {
@@ -58,6 +65,13 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     chart: Chart,
     index: number,
   ): ReactElement => {
+    /*
+     * When the chart has its own seriesControls panel, that panel doubles
+     * as a colored, interactive legend — so we suppress the built-in
+     * Recharts legend to avoid showing two legends for the same series.
+     */
+    const showLegend: boolean = !chart.seriesControls;
+
     switch (chart.type) {
       case ChartType.LINE:
         return (
@@ -68,6 +82,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             heightInPx={props.heightInPx}
             exemplarPoints={chart.exemplarPoints}
             onExemplarClick={chart.onExemplarClick}
+            showLegend={showLegend}
           />
         );
       case ChartType.BAR:
@@ -77,6 +92,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             {...(chart.props as BarChartProps)}
             syncid={syncId}
             heightInPx={props.heightInPx}
+            showLegend={showLegend}
           />
         );
       case ChartType.AREA:
@@ -88,6 +104,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             heightInPx={props.heightInPx}
             exemplarPoints={chart.exemplarPoints}
             onExemplarClick={chart.onExemplarClick}
+            showLegend={showLegend}
           />
         );
       default:
@@ -239,6 +256,9 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                       </p>
                     )}
                   </div>
+                  {chart.seriesControls ? (
+                    <div className="mb-3">{chart.seriesControls}</div>
+                  ) : null}
                   {getChartContent(chart, index)}
                 </div>
               </div>
@@ -283,6 +303,9 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                   {chart.description}
                 </p>
               )}
+              {chart.seriesControls ? (
+                <div className="mt-3">{chart.seriesControls}</div>
+              ) : null}
               {getChartContent(chart, index)}
             </div>
           );

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

@@ -1,4 +1,5 @@
 import { LineChart } from "../ChartLibrary/LineChart/LineChart";
+import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -17,6 +18,18 @@ import ExemplarPoint from "../Types/ExemplarPoint";
 import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
+export const LineChartPalette: Array<AvailableChartColorsKeys> = [
+  "indigo",
+  "rose",
+  "emerald",
+  "amber",
+  "cyan",
+  "gray",
+  "pink",
+  "lime",
+  "fuchsia",
+];
+
 export interface ComponentProps {
   data: Array<SeriesPoint>;
   xAxis: XAxis;
@@ -27,6 +40,7 @@ export interface ComponentProps {
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  showLegend?: boolean | undefined;
 }
 
 export interface LineInternalProps extends ComponentProps {
@@ -93,19 +107,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         tickGap={1}
         index={"Time"}
         categories={categories}
-        colors={[
-          "indigo",
-          "rose",
-          "emerald",
-          "amber",
-          "cyan",
-          "gray",
-          "pink",
-          "lime",
-          "fuchsia",
-        ]}
+        colors={LineChartPalette}
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
+        showLegend={props.showLegend !== false}
         connectNulls={true}
         curve={props.curve}
         syncid={props.sync ? props.syncid : undefined}

package/UI/Components/Filters/DateFilter.tsx

@@ -39,7 +39,9 @@ type DateState = {
   end: Date | null;
 };
 
-const toDate = (value: unknown): Date | null => {
+type ToDateFunction = (value: unknown) => Date | null;
+
+const toDate: ToDateFunction = (value: unknown): Date | null => {
   if (!value) {
     return null;
   }
@@ -53,7 +55,9 @@ const toDate = (value: unknown): Date | null => {
   }
 };
 
-const detectState = (rawValue: unknown): DateState => {
+type DetectStateFunction = (rawValue: unknown) => DateState;
+
+const detectState: DetectStateFunction = (rawValue: unknown): DateState => {
   if (rawValue instanceof InBetween) {
     const start: Date | null = toDate(rawValue.startValue as unknown);
     const end: Date | null = toDate(rawValue.endValue as unknown);
@@ -102,7 +106,12 @@ const detectState = (rawValue: unknown): DateState => {
   return { operator: FilterOperator.Is, start: null, end: null };
 };
 
-const buildValue = (state: DateState, isDateTime: boolean): unknown => {
+type BuildValueFunction = (state: DateState, isDateTime: boolean) => unknown;
+
+const buildValue: BuildValueFunction = (
+  state: DateState,
+  isDateTime: boolean,
+): unknown => {
   switch (state.operator) {
     case FilterOperator.Is: {
       if (!state.start) {
@@ -128,9 +137,7 @@ const buildValue = (state: DateState, isDateTime: boolean): unknown => {
         (isDateTime
           ? state.start
           : OneUptimeDate.getStartOfDay(state.start)) as any,
-        (isDateTime
-          ? state.end
-          : OneUptimeDate.getEndOfDay(state.end)) as any,
+        (isDateTime ? state.end : OneUptimeDate.getEndOfDay(state.end)) as any,
       );
     }
     case FilterOperator.IsEmpty:
@@ -163,7 +170,6 @@ const DateFilter: DateFilterFunction = <T extends GenericObject>(
     if (raw !== undefined && raw !== null) {
       setLocalOperator(detected.operator);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.filterData[filter.key]]);
 
   const state: DateState = { ...detected, operator: localOperator };
@@ -204,7 +210,9 @@ const DateFilter: DateFilterFunction = <T extends GenericObject>(
         }}
       />
       {!valuelessOperator && (
-        <div className={isBetween ? "flex-1 flex gap-2 min-w-0" : "flex-1 min-w-0"}>
+        <div
+          className={isBetween ? "flex-1 flex gap-2 min-w-0" : "flex-1 min-w-0"}
+        >
           <div className="flex-1 min-w-0">
             <Input
               key={`${filter.key as string}-start-${state.operator}`}

package/UI/Components/Filters/EntityFilter.tsx

@@ -42,7 +42,11 @@ type EntityState = {
   values: Array<string>;
 };
 
-const detectArrayState = (rawValue: unknown): EntityState => {
+type DetectStateFunction = (rawValue: unknown) => EntityState;
+
+const detectArrayState: DetectStateFunction = (
+  rawValue: unknown,
+): EntityState => {
   if (rawValue instanceof IncludesAll) {
     return {
       operator: FilterOperator.HasAllOf,
@@ -84,7 +88,9 @@ const detectArrayState = (rawValue: unknown): EntityState => {
   return { operator: FilterOperator.HasAnyOf, values: [] };
 };
 
-const detectSingleState = (rawValue: unknown): EntityState => {
+const detectSingleState: DetectStateFunction = (
+  rawValue: unknown,
+): EntityState => {
   if (rawValue instanceof IsNull) {
     return { operator: FilterOperator.IsEmpty, values: [] };
   }
@@ -97,12 +103,18 @@ const detectSingleState = (rawValue: unknown): EntityState => {
   return { operator: FilterOperator.Is, values: [] };
 };
 
-const buildArrayValue = (state: EntityState): unknown => {
+type BuildValueFunction = (state: EntityState) => unknown;
+
+const buildArrayValue: BuildValueFunction = (state: EntityState): unknown => {
   switch (state.operator) {
     case FilterOperator.HasAllOf:
-      return state.values.length > 0 ? new IncludesAll(state.values) : undefined;
+      return state.values.length > 0
+        ? new IncludesAll(state.values)
+        : undefined;
     case FilterOperator.HasNoneOf:
-      return state.values.length > 0 ? new IncludesNone(state.values) : undefined;
+      return state.values.length > 0
+        ? new IncludesNone(state.values)
+        : undefined;
     case FilterOperator.HasAnyOf:
       return state.values.length > 0 ? state.values : undefined;
     case FilterOperator.IsEmpty:
@@ -114,15 +126,13 @@ const buildArrayValue = (state: EntityState): unknown => {
   }
 };
 
-const buildSingleValue = (state: EntityState): unknown => {
+const buildSingleValue: BuildValueFunction = (state: EntityState): unknown => {
   switch (state.operator) {
     case FilterOperator.Is:
       return state.values[0] || undefined;
     case FilterOperator.IsNot:
       // Use IncludesNone with single-item array to represent "is not".
-      return state.values[0]
-        ? new IncludesNone([state.values[0]])
-        : undefined;
+      return state.values[0] ? new IncludesNone([state.values[0]]) : undefined;
     case FilterOperator.IsEmpty:
       return new IsNull();
     case FilterOperator.IsNotEmpty:
@@ -153,24 +163,29 @@ const EntityFilter: EntityFilterFunction = <T extends GenericObject>(
     ? detectArrayState(props.filterData[filter.key])
     : detectSingleState(props.filterData[filter.key]);
 
-  // Hold the operator locally so the user's choice persists even when no
-  // values are selected yet (otherwise `buildArrayValue` would return
-  // undefined, filterData wouldn't carry the operator, and the next render
-  // would reset back to the default).
+  /*
+   * Hold the operator locally so the user's choice persists even when no
+   * values are selected yet (otherwise `buildArrayValue` would return
+   * undefined, filterData wouldn't carry the operator, and the next render
+   * would reset back to the default).
+   */
   const [localOperator, setLocalOperator] = useState<FilterOperator>(
     detectedState.operator,
   );
 
-  // When the external filter data changes and can unambiguously tell us
-  // which operator it represents, sync local state.
+  /*
+   * When the external filter data changes and can unambiguously tell us
+   * which operator it represents, sync local state.
+   */
   useEffect(() => {
     const raw: unknown = props.filterData[filter.key];
     if (raw !== undefined && raw !== null) {
       setLocalOperator(detectedState.operator);
     }
-    // Intentionally only re-run when the underlying filter data reference
-    // changes — not on every detectedState re-computation.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    /*
+     * Intentionally only re-run when the underlying filter data reference
+     * changes — not on every detectedState re-computation.
+     */
   }, [props.filterData[filter.key]]);
 
   const operator: FilterOperator = localOperator;

package/UI/Components/Filters/FilterViewer.tsx

@@ -1,4 +1,4 @@
-import Icon from "../Icon/Icon";
+import Icon, { SizeProp } from "../Icon/Icon";
 import Includes from "../../../Types/BaseDatabase/Includes";
 import IncludesAll from "../../../Types/BaseDatabase/IncludesAll";
 import IncludesNone from "../../../Types/BaseDatabase/IncludesNone";
@@ -16,7 +16,6 @@ import NotNull from "../../../Types/BaseDatabase/NotNull";
 import Button, { ButtonStyleType } from "../Button/Button";
 import { DropdownOption } from "../Dropdown/Dropdown";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
-import { SizeProp } from "../Icon/Icon";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import FieldType from "../Types/FieldType";
 import FilterViewerItem from "./FilterViewerItem";
@@ -213,7 +212,8 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       if (value instanceof NotNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is not empty
+            <span className="font-medium">{data.filter.title}</span> is not
+            empty
           </span>
         );
       }
@@ -302,7 +302,8 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       if (value instanceof NotNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is not empty
+            <span className="font-medium">{data.filter.title}</span> is not
+            empty
           </span>
         );
       }
@@ -369,7 +370,8 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       if (rawValue instanceof NotNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is not empty
+            <span className="font-medium">{data.filter.title}</span> is not
+            empty
           </span>
         );
       }

package/UI/Components/Filters/FiltersForm.tsx

@@ -28,6 +28,22 @@ export interface ComponentProps<T extends GenericObject> {
     | undefined
     | ((showAdvancedFilters: boolean) => void);
   showAdvancedFiltersByDefault?: boolean | undefined;
+  /**
+   * Suppress the built-in "Show/Hide Advanced Filters" toggle
+   * button. Useful when the parent renders its own toggle further
+   * down the page (e.g. below other non-filter controls) and needs
+   * full layout control. Parent must drive visibility through
+   * `showAdvancedFilters` instead.
+   */
+  hideAdvancedFilterToggle?: boolean | undefined;
+  /**
+   * Controlled replacement for the internal toggle state. When
+   * provided, the form renders advanced filters based on this flag
+   * and calls `onAdvancedFiltersToggle` for changes but does not
+   * manage its own state. Pair with `hideAdvancedFilterToggle` when
+   * the parent owns the UI toggle.
+   */
+  showAdvancedFilters?: boolean | undefined;
 }
 
 type FiltersFormFunction = <T extends GenericObject>(
@@ -51,16 +67,24 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
     }
   };
 
-  const showAdvancedFilterButton: boolean = Boolean(
+  const hasAdvancedFilter: boolean = Boolean(
     props.filters.find((filter: Filter<T>) => {
       return filter.isAdvancedFilter;
     }),
   );
 
-  const [showMoreFilters, setShowMoreFilters] = React.useState<boolean>(
+  const showAdvancedFilterButton: boolean =
+    hasAdvancedFilter && !props.hideAdvancedFilterToggle;
+
+  const [internalShowMoreFilters, setShowMoreFilters] = React.useState<boolean>(
     props.showAdvancedFiltersByDefault ?? false,
   );
 
+  const showMoreFilters: boolean =
+    props.showAdvancedFilters !== undefined
+      ? props.showAdvancedFilters
+      : internalShowMoreFilters;
+
   type ClearFilterFunction = (key: keyof T) => void;
 
   const clearFilter: ClearFilterFunction = (key: keyof T): void => {
@@ -72,9 +96,7 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
   const visibleFilters: Array<Filter<T>> = props.filters.filter(
     (filter: Filter<T>) => {
       if (filter.isAdvancedFilter) {
-        return (
-          showMoreFilters && !props.isFilterLoading && !props.filterError
-        );
+        return showMoreFilters && !props.isFilterLoading && !props.filterError;
       }
       return true;
     },

package/UI/Components/Filters/NumberFilter.tsx

@@ -168,7 +168,6 @@ const NumberFilter: NumberFilterFunction = <T extends GenericObject>(
     if (raw !== undefined && raw !== null) {
       setLocalOperator(detected.operator);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.filterData[filter.key]]);
 
   const state: NumberState = { ...detected, operator: localOperator };
@@ -209,7 +208,9 @@ const NumberFilter: NumberFilterFunction = <T extends GenericObject>(
         }}
       />
       {!valuelessOperator && (
-        <div className={isBetween ? "flex-1 flex gap-2 min-w-0" : "flex-1 min-w-0"}>
+        <div
+          className={isBetween ? "flex-1 flex gap-2 min-w-0" : "flex-1 min-w-0"}
+        >
           <div className="flex-1 min-w-0">
             <input
               type="number"

package/UI/Components/Filters/TextFilter.tsx

@@ -133,9 +133,11 @@ const TextFilter: TextFilterFunction = <T extends GenericObject>(
   const detected: { operator: FilterOperator; value: string } =
     detectCurrentState(props.filterData[filter.key]);
 
-  // Keep the operator locally so the user's choice persists even when no
-  // value has been typed yet (otherwise buildQueryValue returns undefined,
-  // the filter is deleted, and the operator resets on re-render).
+  /*
+   * Keep the operator locally so the user's choice persists even when no
+   * value has been typed yet (otherwise buildQueryValue returns undefined,
+   * the filter is deleted, and the operator resets on re-render).
+   */
   const [localOperator, setLocalOperator] = useState<FilterOperator>(
     detected.operator,
   );
@@ -145,7 +147,6 @@ const TextFilter: TextFilterFunction = <T extends GenericObject>(
     if (raw !== undefined && raw !== null) {
       setLocalOperator(detected.operator);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.filterData[filter.key]]);
 
   const operator: FilterOperator = localOperator;

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -1525,9 +1525,11 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         );
       }
 
-      // Pass any QueryOperator instance (IncludesAll, IncludesNone, StartsWith,
-      // EndsWith, NotContains, EqualTo, NotEqual, GreaterThan, LessThan,
-      // InBetween, IsNull, NotNull, ...) through to the query as-is.
+      /*
+       * Pass any QueryOperator instance (IncludesAll, IncludesNone, StartsWith,
+       * EndsWith, NotContains, EqualTo, NotEqual, GreaterThan, LessThan,
+       * InBetween, IsNull, NotNull, ...) through to the query as-is.
+       */
       if (filterData[key] instanceof QueryOperator) {
         newQuery[key as keyof TBaseModel] = filterData[key];
       }