@oneuptime/common 10.0.86 → 10.0.89

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

@@ -9,6 +9,8 @@ export interface LogsFilterCardProps {
   onSearchSubmit: () => void;
   valueSuggestions?: Record<string, Array<string>> | undefined;
   onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
+  isAttributesLoading?: boolean | undefined;
+  isValuesLoading?: boolean | undefined;
 }
 
 const LogsFilterCard: React.ForwardRefExoticComponent<
@@ -18,14 +20,11 @@ const LogsFilterCard: React.ForwardRefExoticComponent<
     props: LogsFilterCardProps,
     ref: React.Ref<LogSearchBarRef>,
   ): ReactElement => {
-    const searchBarSuggestions: Array<string> = [
+    const fieldSuggestions: Array<string> = [
       "severity",
       "service",
       "trace",
       "span",
-      ...props.logAttributes.map((attr: string) => {
-        return `@${attr}`;
-      }),
     ];
 
     return (
@@ -36,9 +35,12 @@ const LogsFilterCard: React.ForwardRefExoticComponent<
             value={props.searchQuery}
             onChange={props.onSearchQueryChange}
             onSubmit={props.onSearchSubmit}
-            suggestions={searchBarSuggestions}
+            suggestions={fieldSuggestions}
+            attributeSuggestions={props.logAttributes}
             valueSuggestions={props.valueSuggestions}
             onFieldValueSelect={props.onFieldValueSelect}
+            isAttributesLoading={props.isAttributesLoading}
+            isValuesLoading={props.isValuesLoading}
           />
         </div>
         <div>{props.toolbar}</div>

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -42,6 +42,7 @@ export interface TelemetryViewerProps<T> {
   onSearchSubmit: () => void;
   searchPlaceholder?: string | undefined;
   searchSuggestions?: Array<string> | undefined;
+  searchAttributeSuggestions?: Array<string> | undefined;
   searchValueSuggestions?: Record<string, Array<string>> | undefined;
   searchFieldAliasMap?: Record<string, string> | undefined;
   onSearchFieldValueSelect?:
@@ -50,6 +51,8 @@ export interface TelemetryViewerProps<T> {
   searchHelpRows?: Array<SearchHelpRow> | undefined;
   searchHelpCombinedExample?: string | undefined;
   searchBarRef?: React.Ref<TelemetrySearchBarRef> | undefined;
+  searchAttributesLoading?: boolean | undefined;
+  searchValuesLoading?: boolean | undefined;
 
   // -- Toolbar: time --
   timeRange: RangeStartAndEndDateTime;
@@ -118,11 +121,14 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
             onSubmit={props.onSearchSubmit}
             placeholder={props.searchPlaceholder}
             suggestions={props.searchSuggestions}
+            attributeSuggestions={props.searchAttributeSuggestions}
             valueSuggestions={props.searchValueSuggestions}
             fieldAliasMap={props.searchFieldAliasMap}
             onFieldValueSelect={props.onSearchFieldValueSelect}
             helpRows={props.searchHelpRows}
             helpCombinedExample={props.searchHelpCombinedExample}
+            isAttributesLoading={props.searchAttributesLoading}
+            isValuesLoading={props.searchValuesLoading}
           />
         </div>
 

package/UI/Components/TelemetryViewer/components/TelemetrySearchBar.tsx

@@ -18,8 +18,17 @@ export interface TelemetrySearchBarProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: () => void;
-  // Field-name suggestions shown when user types "@".
+  /*
+   * Top-level field names like "service", "name" — used as `field:value`
+   * (no @). Shown when the user types regular text.
+   */
   suggestions?: Array<string> | undefined;
+  /*
+   * Telemetry attribute keys like "host.name", "container.id" — used as
+   * `@attr:value`. Shown when the user types `@`. Pass plain keys, not
+   * pre-prefixed with `@` — the bar adds it on submit.
+   */
+  attributeSuggestions?: Array<string> | undefined;
   // field → allowed value completions (resolved field keys).
   valueSuggestions?: Record<string, Array<string>> | undefined;
   // Called when the user picks a concrete field:value chip from the dropdown.
@@ -30,6 +39,10 @@ export interface TelemetrySearchBarProps {
   // Rows rendered in the help popover when the bar is empty + focused.
   helpRows?: Array<SearchHelpRow> | undefined;
   helpCombinedExample?: string | undefined;
+  // Loading state for `@attribute` autocomplete (initial fetch of keys).
+  isAttributesLoading?: boolean | undefined;
+  // Loading state for `@attribute:value` autocomplete (per-key value fetch).
+  isValuesLoading?: boolean | undefined;
 }
 
 export interface TelemetrySearchBarRef {
@@ -79,6 +92,17 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
       ? normalizedWord.substring(colonIndex + 1)
       : "";
 
+    /*
+     * Pick the suggestion list based on whether the user typed `@`.
+     * `@` is the explicit trigger for attribute mode — only show attribute
+     * keys there. Without `@`, only show top-level field names. Mixing the
+     * two led to confusing dropdowns that rendered field names like "name"
+     * as if they were attributes.
+     */
+    const activeSuggestions: Array<string> = hasAtPrefix
+      ? props.attributeSuggestions || []
+      : props.suggestions || [];
+
     const filteredSuggestions: Array<string> = isValueMode
       ? getValueSuggestions(
           fieldPrefix,
@@ -86,23 +110,32 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
           props.valueSuggestions || {},
           fieldAliasMap,
         )
-      : (props.suggestions || []).filter((s: string): boolean => {
+      : activeSuggestions.filter((s: string): boolean => {
           if (!normalizedWord && !hasAtPrefix) {
             return false;
           }
           if (hasAtPrefix && normalizedWord.length === 0) {
             return true;
           }
-          const normalizedSuggestion: string = s.startsWith("@")
-            ? s.substring(1).toLowerCase()
-            : s.toLowerCase();
-          return normalizedSuggestion.startsWith(normalizedWord.toLowerCase());
+          return s.toLowerCase().startsWith(normalizedWord.toLowerCase());
         });
 
+    /*
+     * Show a loader inside the dropdown while the parent is fetching:
+     *   - attribute keys: `@` was just typed but the keys haven't arrived
+     *   - attribute values: `@key:` was typed but values for that key
+     *     haven't arrived yet
+     */
+    const isLoadingForCurrentMode: boolean = isValueMode
+      ? Boolean(props.isValuesLoading)
+      : hasAtPrefix
+        ? Boolean(props.isAttributesLoading)
+        : false;
+
     const shouldShowSuggestions: boolean =
       showSuggestions &&
       isFocused &&
-      filteredSuggestions.length > 0 &&
+      (filteredSuggestions.length > 0 || isLoadingForCurrentMode) &&
       (isValueMode ? true : currentWord.length > 0);
 
     const shouldShowHelp: boolean =
@@ -123,6 +156,7 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
           if (e.key === "Enter") {
             if (
               shouldShowSuggestions &&
+              !isLoadingForCurrentMode &&
               selectedSuggestionIndex >= 0 &&
               selectedSuggestionIndex < filteredSuggestions.length
             ) {
@@ -136,6 +170,11 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
               partialValue.length > 0 &&
               props.onFieldValueSelect
             ) {
+              /*
+               * Prefer a match from the suggestion list (so casing matches
+               * what's actually in the data); otherwise accept the typed
+               * value as-is so users aren't blocked when no suggestion exists.
+               */
               const resolvedField: string =
                 fieldAliasMap[fieldPrefix] || fieldPrefix;
               const availableValues: Array<string> =
@@ -147,23 +186,21 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
                 },
               );
 
-              const resolvedMatch: string | undefined =
+              const resolvedMatch: string =
                 exactMatch ||
                 (filteredSuggestions.length === 1
-                  ? filteredSuggestions[0]
-                  : undefined);
-
-              if (resolvedMatch) {
-                props.onFieldValueSelect(fieldPrefix, resolvedMatch);
-                const parts: Array<string> = props.value.split(/\s+/);
-                parts.pop();
-                const remaining: string = parts.join(" ");
-                props.onChange(remaining ? remaining + " " : "");
-                setShowSuggestions(false);
-                setShowHelp(false);
-                e.preventDefault();
-                return;
-              }
+                  ? filteredSuggestions[0]!
+                  : partialValue);
+
+              props.onFieldValueSelect(fieldPrefix, resolvedMatch);
+              const parts: Array<string> = props.value.split(/\s+/);
+              parts.pop();
+              const remaining: string = parts.join(" ");
+              props.onChange(remaining ? remaining + " " : "");
+              setShowSuggestions(false);
+              setShowHelp(false);
+              e.preventDefault();
+              return;
             }
 
             props.onSubmit();
@@ -178,7 +215,7 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
             return;
           }
 
-          if (!shouldShowSuggestions) {
+          if (!shouldShowSuggestions || isLoadingForCurrentMode) {
             return;
           }
 
@@ -206,6 +243,7 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
           partialValue,
           props,
           fieldAliasMap,
+          isLoadingForCurrentMode,
         ],
       );
 
@@ -229,7 +267,13 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
         const parts: Array<string> = props.value.split(/\s+/);
 
         if (parts.length > 0) {
-          parts[parts.length - 1] = suggestion + ":";
+          /*
+           * Attribute suggestions are stored without `@`; add it back
+           * when filling the bar so the parser recognizes it as an attribute.
+           */
+          parts[parts.length - 1] = hasAtPrefix
+            ? "@" + suggestion + ":"
+            : suggestion + ":";
         }
 
         props.onChange(parts.join(" "));
@@ -237,7 +281,7 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
         setShowHelp(false);
         inputRef.current?.focus();
       },
-      [props, isValueMode, fieldPrefix],
+      [props, isValueMode, fieldPrefix, hasAtPrefix],
     );
 
     const handleExampleClick: (example: string) => void = useCallback(
@@ -268,6 +312,17 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
       };
     }, []);
 
+    const loadingMessage: string = isValueMode
+      ? `Loading values for ${fieldPrefix}...`
+      : "Loading attributes...";
+
+    const emptyMessage: string | undefined =
+      isValueMode &&
+      !isLoadingForCurrentMode &&
+      filteredSuggestions.length === 0
+        ? `No matching values — press Enter to filter by "${partialValue}"`
+        : undefined;
+
     return (
       <div ref={containerRef} className="relative">
         <div
@@ -329,6 +384,10 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
             selectedIndex={selectedSuggestionIndex}
             onSelect={applySuggestion}
             fieldContext={isValueMode ? fieldPrefix : undefined}
+            isAttributeMode={hasAtPrefix}
+            isLoading={isLoadingForCurrentMode}
+            loadingMessage={loadingMessage}
+            emptyMessage={emptyMessage}
           />
         )}
 

package/UI/Components/TelemetryViewer/components/TelemetrySearchSuggestions.tsx

@@ -5,6 +5,14 @@ export interface TelemetrySearchSuggestionsProps {
   selectedIndex: number;
   onSelect: (suggestion: string) => void;
   fieldContext?: string | undefined;
+  /*
+   * When true, items are attribute keys (rendered with the @ prefix).
+   * When false, items are top-level field names (no prefix).
+   */
+  isAttributeMode?: boolean | undefined;
+  isLoading?: boolean | undefined;
+  loadingMessage?: string | undefined;
+  emptyMessage?: string | undefined;
 }
 
 const MAX_VISIBLE_SUGGESTIONS: number = 8;
@@ -19,6 +27,39 @@ const TelemetrySearchSuggestions: FunctionComponent<
 
   return (
     <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-56 overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
+      {props.isLoading && (
+        <div className="flex w-full items-center px-3 py-2 text-left text-sm text-gray-500">
+          <svg
+            className="animate-spin -ml-0.5 mr-2 h-4 w-4 text-indigo-500"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            ></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+            ></path>
+          </svg>
+          <span>{props.loadingMessage || "Loading..."}</span>
+        </div>
+      )}
+      {!props.isLoading &&
+        visible.length === 0 &&
+        props.emptyMessage !== undefined && (
+          <div className="px-3 py-2 text-sm text-gray-400">
+            {props.emptyMessage}
+          </div>
+        )}
       {visible.map((suggestion: string, index: number) => {
         const isSelected: boolean = index === props.selectedIndex;
 
@@ -43,11 +84,13 @@ const TelemetrySearchSuggestions: FunctionComponent<
                 </span>
                 <span className="font-mono">{suggestion}</span>
               </>
-            ) : (
+            ) : props.isAttributeMode ? (
               <>
                 <span className="font-mono text-xs text-indigo-400">@</span>
                 <span className="font-mono">{suggestion}</span>
               </>
+            ) : (
+              <span className="font-mono">{suggestion}</span>
             )}
           </button>
         );

package/Utils/Dashboard/Components/DashboardAlertListComponent.ts

@@ -0,0 +1,86 @@
+import DashboardAlertListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardAlertListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+const FiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which alerts are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardAlertListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardAlertListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.AlertList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardAlertListComponent>
+  > {
+    const componentArguments: Array<
+      ComponentArgument<DashboardAlertListComponent>
+    > = [];
+
+    componentArguments.push({
+      name: "Title",
+      description: "Header shown above the alert list",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    componentArguments.push({
+      name: "Max Rows",
+      description: "Maximum number of alerts to show",
+      required: false,
+      type: ComponentInputType.Number,
+      id: "maxRows",
+      placeholder: "25",
+      section: DisplaySection,
+    });
+
+    componentArguments.push({
+      name: "State",
+      description: "Filter alerts by lifecycle state",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "stateFilter",
+      section: FiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Unresolved (open)", value: "unresolved" },
+        { label: "Acknowledged", value: "acknowledged" },
+        { label: "Resolved", value: "resolved" },
+      ],
+    });
+
+    return componentArguments;
+  }
+}

package/Utils/Dashboard/Components/DashboardIncidentListComponent.ts

@@ -0,0 +1,86 @@
+import DashboardIncidentListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardIncidentListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+const FiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which incidents are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardIncidentListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardIncidentListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.IncidentList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardIncidentListComponent>
+  > {
+    const componentArguments: Array<
+      ComponentArgument<DashboardIncidentListComponent>
+    > = [];
+
+    componentArguments.push({
+      name: "Title",
+      description: "Header shown above the incident list",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    componentArguments.push({
+      name: "Max Rows",
+      description: "Maximum number of incidents to show",
+      required: false,
+      type: ComponentInputType.Number,
+      id: "maxRows",
+      placeholder: "25",
+      section: DisplaySection,
+    });
+
+    componentArguments.push({
+      name: "State",
+      description: "Filter incidents by lifecycle state",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "stateFilter",
+      section: FiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Unresolved (open)", value: "unresolved" },
+        { label: "Acknowledged", value: "acknowledged" },
+        { label: "Resolved", value: "resolved" },
+      ],
+    });
+
+    return componentArguments;
+  }
+}

package/Utils/Dashboard/Components/DashboardMonitorListComponent.ts

@@ -0,0 +1,85 @@
+import DashboardMonitorListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardMonitorListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+const FiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which monitors are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardMonitorListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardMonitorListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.MonitorList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardMonitorListComponent>
+  > {
+    const componentArguments: Array<
+      ComponentArgument<DashboardMonitorListComponent>
+    > = [];
+
+    componentArguments.push({
+      name: "Title",
+      description: "Header shown above the monitor list",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    componentArguments.push({
+      name: "Max Rows",
+      description: "Maximum number of monitors to show",
+      required: false,
+      type: ComponentInputType.Number,
+      id: "maxRows",
+      placeholder: "25",
+      section: DisplaySection,
+    });
+
+    componentArguments.push({
+      name: "Status",
+      description: "Filter monitors by current status",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "statusFilter",
+      section: FiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Operational only", value: "operational" },
+        { label: "Not operational only", value: "non-operational" },
+      ],
+    });
+
+    return componentArguments;
+  }
+}

package/Utils/Dashboard/Components/Index.ts

@@ -2,9 +2,12 @@ import { ComponentArgument } from "../../../Types/Dashboard/DashboardComponents/
 import DashboardBaseComponent from "../../../Types/Dashboard/DashboardComponents/DashboardBaseComponent";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
 import BadDataException from "../../../Types/Exception/BadDataException";
+import DashboardAlertListComponentUtil from "./DashboardAlertListComponent";
 import DashboardChartComponentUtil from "./DashboardChartComponent";
 import DashboardGaugeComponentUtil from "./DashboardGaugeComponent";
+import DashboardIncidentListComponentUtil from "./DashboardIncidentListComponent";
 import DashboardLogStreamComponentUtil from "./DashboardLogStreamComponent";
+import DashboardMonitorListComponentUtil from "./DashboardMonitorListComponent";
 import DashboardTableComponentUtil from "./DashboardTableComponent";
 import DashboardTextComponentUtil from "./DashboardTextComponent";
 import DashboardTraceListComponentUtil from "./DashboardTraceListComponent";
@@ -56,6 +59,24 @@ export default class DashboardComponentsUtil {
       >;
     }
 
+    if (dashboardComponentType === DashboardComponentType.IncidentList) {
+      return DashboardIncidentListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.AlertList) {
+      return DashboardAlertListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.MonitorList) {
+      return DashboardMonitorListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
     throw new BadDataException(
       `Unknown dashboard component type: ${dashboardComponentType}`,
     );