@oneuptime/common 10.0.86 → 10.0.88

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -197,6 +197,15 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   const [attributesLoaded, setAttributesLoaded] = useState<boolean>(false);
   const [attributesLoading, setAttributesLoading] = useState<boolean>(false);
 
+  // Per-attribute value suggestions, populated lazily as the user types `@key:`.
+  const [attributeValueSuggestions, setAttributeValueSuggestions] = useState<
+    Record<string, Array<string>>
+  >({});
+  const [attributeValuesLoading, setAttributeValuesLoading] =
+    useState<boolean>(false);
+  const lastValueSuggestionKeyRef: React.MutableRefObject<string> =
+    useRef<string>("");
+
   const [isPageLoading, setIsPageLoading] = useState<boolean>(true);
   const [pageError, setPageError] = useState<string>("");
 
@@ -441,6 +450,58 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     }
   }, [attributesLoaded, attributesLoading, loadAttributes]);
 
+  /*
+   * Lazily fetch values for the attribute the user is currently typing.
+   * Triggered by `@key:` patterns in the search bar — the same approach
+   * used by Traces/Metrics so the value dropdown can populate.
+   */
+  useEffect(() => {
+    const currentWord: string = (searchQuery.split(/\s+/).pop() || "").trim();
+    if (!currentWord.startsWith("@") || !currentWord.includes(":")) {
+      return;
+    }
+    const colonIdx: number = currentWord.indexOf(":");
+    const attrKey: string = currentWord.substring(1, colonIdx);
+
+    if (!attrKey || attrKey === lastValueSuggestionKeyRef.current) {
+      return;
+    }
+    lastValueSuggestionKeyRef.current = attrKey;
+
+    const loadValues: () => Promise<void> = async (): Promise<void> => {
+      try {
+        setAttributeValuesLoading(true);
+        const response: HTTPResponse<JSONObject> | HTTPErrorResponse =
+          await API.post({
+            url: URL.fromString(APP_API_URL.toString()).addRoute(
+              "/telemetry/logs/get-attribute-values",
+            ),
+            data: { attributeKey: attrKey },
+            headers: {
+              ...ModelAPI.getCommonHeaders(),
+            },
+          });
+        if (response instanceof HTTPErrorResponse) {
+          throw response;
+        }
+        const values: Array<string> = (response.data["values"] ||
+          []) as Array<string>;
+        setAttributeValueSuggestions(
+          (
+            prev: Record<string, Array<string>>,
+          ): Record<string, Array<string>> => {
+            return { ...prev, [attrKey]: values };
+          },
+        );
+      } catch {
+        // non-critical — leave the dropdown empty so users can still free-type
+      } finally {
+        setAttributeValuesLoading(false);
+      }
+    };
+    void loadValues();
+  }, [searchQuery]);
+
   // Reset focused row when displayed logs change
   useEffect(() => {
     setFocusedRowIndex(-1);
@@ -669,17 +730,23 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   }, [props.activeFilters, serviceMap]);
 
   /*
-   * Replace serviceId UUIDs with human-readable names in value suggestions
+   * Replace serviceId UUIDs with human-readable names in value suggestions,
+   * and merge in the lazily-fetched attribute value suggestions.
    * Must be before early returns to maintain consistent hook call order.
    */
   const resolvedValueSuggestions: Record<string, Array<string>> | undefined =
     useMemo(() => {
-      if (!props.valueSuggestions) {
+      const hasParentSuggestions: boolean = Boolean(props.valueSuggestions);
+      const hasAttributeSuggestions: boolean =
+        Object.keys(attributeValueSuggestions).length > 0;
+
+      if (!hasParentSuggestions && !hasAttributeSuggestions) {
         return undefined;
       }
 
       const suggestions: Record<string, Array<string>> = {
-        ...props.valueSuggestions,
+        ...(props.valueSuggestions || {}),
+        ...attributeValueSuggestions,
       };
 
       if (suggestions["serviceId"] && Object.keys(serviceMap).length > 0) {
@@ -692,7 +759,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       }
 
       return suggestions;
-    }, [props.valueSuggestions, serviceMap]);
+    }, [props.valueSuggestions, serviceMap, attributeValueSuggestions]);
 
   /*
    * Wrap onFieldValueSelect to resolve service names back to UUIDs
@@ -828,6 +895,8 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
             onSearchSubmit={handleSearchSubmit}
             valueSuggestions={resolvedValueSuggestions}
             onFieldValueSelect={handleFieldValueSelectWithServiceResolve}
+            isAttributesLoading={attributesLoading}
+            isValuesLoading={attributeValuesLoading}
             toolbar={<LogsViewerToolbar {...toolbarProps} />}
           />
         </div>

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

@@ -17,10 +17,17 @@ export interface LogSearchBarProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: () => void;
+  // Top-level field names (e.g. "severity", "service") — used as `field:value`.
   suggestions?: Array<string> | undefined;
+  // Telemetry attribute keys (no leading `@`) — used as `@attr:value`.
+  attributeSuggestions?: Array<string> | undefined;
   valueSuggestions?: Record<string, Array<string>> | undefined;
   onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
   placeholder?: 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 LogSearchBarRef {
@@ -67,31 +74,48 @@ const LogSearchBar: React.ForwardRefExoticComponent<
       ? normalizedWord.substring(colonIndex + 1)
       : "";
 
+    /*
+     * `@` 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
+     * "severity" as if they were attributes.
+     */
+    const activeSuggestions: Array<string> = hasAtPrefix
+      ? props.attributeSuggestions || []
+      : props.suggestions || [];
+
     const filteredSuggestions: Array<string> = isValueMode
       ? getValueSuggestions(
           fieldPrefix,
           partialValue,
           props.valueSuggestions || {},
         )
-      : (props.suggestions || []).filter((s: string): boolean => {
+      : activeSuggestions.filter((s: string): boolean => {
           if (!normalizedWord && !hasAtPrefix) {
             return false;
           }
-          // When just "@" is typed, show all suggestions
           if (hasAtPrefix && normalizedWord.length === 0) {
             return true;
           }
-          // Match against the suggestion name, stripping any leading "@" from the suggestion too
-          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);
 
     // Show help when focused, input is empty, and no suggestions visible
@@ -111,6 +135,7 @@ const LogSearchBar: React.ForwardRefExoticComponent<
           if (e.key === "Enter") {
             if (
               shouldShowSuggestions &&
+              !isLoadingForCurrentMode &&
               selectedSuggestionIndex >= 0 &&
               selectedSuggestionIndex < filteredSuggestions.length
             ) {
@@ -119,13 +144,17 @@ const LogSearchBar: React.ForwardRefExoticComponent<
               return;
             }
 
-            // If in value mode with a typed value, try to match and apply as chip
+            // If in value mode with a typed value, apply as a chip
             if (
               isValueMode &&
               partialValue.length > 0 &&
               props.onFieldValueSelect
             ) {
-              // First try exact case-insensitive match from the available values
+              /*
+               * 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 =
                 FIELD_ALIAS_MAP[fieldPrefix] || fieldPrefix;
               const availableValues: Array<string> =
@@ -137,25 +166,21 @@ const LogSearchBar: React.ForwardRefExoticComponent<
                 },
               );
 
-              // Use exact match, or if there's exactly one prefix match, use that
-              const resolvedMatch: string | undefined =
+              const resolvedMatch: string =
                 exactMatch ||
                 (filteredSuggestions.length === 1
-                  ? filteredSuggestions[0]
-                  : undefined);
-
-              if (resolvedMatch) {
-                props.onFieldValueSelect(fieldPrefix, resolvedMatch);
-                // Remove the field:value term from text
-                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();
@@ -170,7 +195,7 @@ const LogSearchBar: React.ForwardRefExoticComponent<
             return;
           }
 
-          if (!shouldShowSuggestions) {
+          if (!shouldShowSuggestions || isLoadingForCurrentMode) {
             return;
           }
 
@@ -197,6 +222,7 @@ const LogSearchBar: React.ForwardRefExoticComponent<
           fieldPrefix,
           partialValue,
           props,
+          isLoadingForCurrentMode,
         ],
       );
 
@@ -219,11 +245,16 @@ const LogSearchBar: React.ForwardRefExoticComponent<
           return;
         }
 
-        // Field name mode: append colon
+        /*
+         * Field name mode: append colon (re-prefix `@` for attribute keys
+         * since they're stored without it)
+         */
         const parts: Array<string> = props.value.split(/\s+/);
 
         if (parts.length > 0) {
-          parts[parts.length - 1] = suggestion + ":";
+          parts[parts.length - 1] = hasAtPrefix
+            ? "@" + suggestion + ":"
+            : suggestion + ":";
         }
 
         props.onChange(parts.join(" "));
@@ -231,7 +262,7 @@ const LogSearchBar: React.ForwardRefExoticComponent<
         setShowHelp(false);
         inputRef.current?.focus();
       },
-      [props, isValueMode, fieldPrefix],
+      [props, isValueMode, fieldPrefix, hasAtPrefix],
     );
 
     const handleExampleClick: (example: string) => void = useCallback(
@@ -262,6 +293,17 @@ const LogSearchBar: 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
@@ -326,6 +368,10 @@ const LogSearchBar: React.ForwardRefExoticComponent<
             selectedIndex={selectedSuggestionIndex}
             onSelect={applySuggestion}
             fieldContext={isValueMode ? fieldPrefix : undefined}
+            isAttributeMode={hasAtPrefix}
+            isLoading={isLoadingForCurrentMode}
+            loadingMessage={loadingMessage}
+            emptyMessage={emptyMessage}
           />
         )}
 

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

@@ -5,6 +5,14 @@ export interface LogSearchSuggestionsProps {
   selectedIndex: number;
   onSelect: (suggestion: string) => void;
   fieldContext?: string | undefined;
+  /*
+   * When true, items are attribute keys (rendered with `@`).
+   * 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 LogSearchSuggestions: FunctionComponent<LogSearchSuggestionsProps> = (
 
   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 LogSearchSuggestions: FunctionComponent<LogSearchSuggestionsProps> = (
                 </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/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}
           />
         )}