@oneuptime/common 10.0.86 → 10.0.89

package/UI/Components/Filters/FilterViewer.tsx

@@ -1,3 +1,9 @@
+import {
+  DictionaryFilterOperator,
+  DictionaryFilterOperatorOption,
+  detectOperatorFromValue,
+  getOperatorOption,
+} from "../Dictionary/DictionaryFilterOperator";
 import Icon, { SizeProp } from "../Icon/Icon";
 import Includes from "../../../Types/BaseDatabase/Includes";
 import IncludesAll from "../../../Types/BaseDatabase/IncludesAll";
@@ -81,20 +87,50 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
   const formatJson: FormatJsonFunction = (
     json: Dictionary<string | number | boolean>,
   ): ReactElement => {
+    /*
+     * Ignore entries with empty key or empty value, and translate
+     * operator wrappers into their display symbol so chips like
+     * `host.name != prod-1` or `path contains api` render correctly.
+     */
+    const isMeaningfulEntry: (key: string, value: unknown) => boolean = (
+      key: string,
+      value: unknown,
+    ): boolean => {
+      if (key.trim() === "" || value === undefined || value === null) {
+        return false;
+      }
+      const detected: { operator: DictionaryFilterOperator; rawValue: string } =
+        detectOperatorFromValue(value);
+      const option: DictionaryFilterOperatorOption = getOperatorOption(
+        detected.operator,
+      );
+      if (option.hidesValueInput) {
+        return true;
+      }
+      return detected.rawValue.trim() !== "";
+    };
+
+    const visibleKeys: Array<string> = Object.keys(json).filter(
+      (key: string) => {
+        return isMeaningfulEntry(key, json[key]);
+      },
+    );
+
     return (
       <div className="flex space-x-2 -mt-1">
-        {Object.keys(json).map((key: string, i: number) => {
-          let jsonText: string | number | boolean = json[key] as
-            | string
-            | number
-            | boolean;
-
-          if (typeof jsonText === "boolean" && jsonText === true) {
-            jsonText = "True";
-          }
+        {visibleKeys.map((key: string, i: number) => {
+          const rawValue: unknown = json[key];
+          const detected: {
+            operator: DictionaryFilterOperator;
+            rawValue: string;
+          } = detectOperatorFromValue(rawValue);
+          const option: DictionaryFilterOperatorOption = getOperatorOption(
+            detected.operator,
+          );
 
-          if (typeof jsonText === "boolean" && jsonText === false) {
-            jsonText = "False";
+          let jsonText: string = detected.rawValue;
+          if (typeof rawValue === "boolean") {
+            jsonText = rawValue ? "True" : "False";
           }
 
           return (
@@ -102,8 +138,14 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
               key={i}
               className="rounded-full h-7 bg-gray-100 text-gray-500 border-2 border-gray-200 p-1 pr-2 pl-2 text-xs"
             >
-              <span className="font-medium">{key}</span> ={" "}
-              <span className="font-medium">{jsonText}</span>
+              <span className="font-medium">{key}</span>{" "}
+              <span>{option.symbol}</span>
+              {!option.hidesValueInput && (
+                <>
+                  {" "}
+                  <span className="font-medium">{jsonText}</span>
+                </>
+              )}
             </div>
           );
         })}
@@ -334,13 +376,36 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
         key
       ] as Dictionary<string | number | boolean>;
 
-      // if json is empty, return null
+      /*
+       * Count only meaningful entries — empty key/value pairs aren't
+       * real filters, and value-less operators (IsEmpty/IsNotEmpty) are
+       * valid even with no value.
+       */
+      const nonEmptyEntryCount: number = Object.keys(json).filter(
+        (entryKey: string) => {
+          const value: unknown = json[entryKey];
+          if (entryKey.trim() === "" || value === undefined || value === null) {
+            return false;
+          }
+          const detected: {
+            operator: DictionaryFilterOperator;
+            rawValue: string;
+          } = detectOperatorFromValue(value);
+          const option: DictionaryFilterOperatorOption = getOperatorOption(
+            detected.operator,
+          );
+          if (option.hidesValueInput) {
+            return true;
+          }
+          return detected.rawValue.trim() !== "";
+        },
+      ).length;
 
-      if (Object.keys(json).length === 0) {
+      if (nonEmptyEntryCount === 0) {
         return null;
       }
 
-      const isPlural: boolean = Object.keys(json).length > 1;
+      const isPlural: boolean = nonEmptyEntryCount > 1;
 
       return (
         <span className="inline-flex items-center space-x-1">

package/UI/Components/Filters/FiltersForm.tsx

@@ -111,13 +111,21 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
             props.filterData[filter.key] !== undefined &&
             props.filterData[filter.key] !== null;
 
+          const isMultiRowFilter: boolean = filter.type === FieldType.JSON;
+
           return (
             <div
               key={i}
-              className="grid grid-cols-[140px_1fr_auto] items-center gap-3"
+              className={`grid grid-cols-[140px_1fr_auto] gap-3 ${
+                isMultiRowFilter ? "items-start" : "items-center"
+              }`}
             >
               {/* Label column */}
-              <div className="flex items-center min-w-0">
+              <div
+                className={`flex items-center min-w-0 ${
+                  isMultiRowFilter ? "pt-7" : ""
+                }`}
+              >
                 <label className="text-sm font-medium text-gray-700 truncate">
                   {filter.title}
                 </label>
@@ -169,11 +177,18 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
                   jsonKeys={filter.jsonKeys}
                   jsonValueSuggestions={filter.jsonValueSuggestions}
                   onJsonKeySelected={filter.onJsonKeySelected}
+                  isLoadingJsonKeys={filter.isLoadingJsonKeys}
+                  loadingJsonValueKeys={filter.loadingJsonValueKeys}
+                  enableOperators={filter.jsonEnableOperators}
                 />
               </div>
 
               {/* Clear column */}
-              <div className="flex items-center">
+              <div
+                className={`flex items-center ${
+                  isMultiRowFilter ? "pt-7" : ""
+                }`}
+              >
                 {hasValue && filter.key ? (
                   <button
                     type="button"

package/UI/Components/Filters/JSONFilter.tsx

@@ -1,5 +1,6 @@
 import { FindWhereProperty } from "../../../Types/BaseDatabase/Query";
 import DictionaryForm, { ValueType } from "../Dictionary/Dictionary";
+import { DictionaryEntryValue } from "../Dictionary/DictionaryFilterOperator";
 import FieldType from "../Types/FieldType";
 import Filter from "./Types/Filter";
 import FilterData from "./Types/FilterData";
@@ -14,6 +15,9 @@ export interface ComponentProps<T extends GenericObject> {
   jsonKeys?: Array<string> | undefined;
   jsonValueSuggestions?: Record<string, Array<string>> | undefined;
   onJsonKeySelected?: ((key: string) => void) | undefined;
+  isLoadingJsonKeys?: boolean | undefined;
+  loadingJsonValueKeys?: Array<string> | undefined;
+  enableOperators?: boolean | undefined;
 }
 
 type JSONFilterFunction = <T extends GenericObject>(
@@ -32,12 +36,17 @@ const JSONFilter: JSONFilterFunction = <T extends GenericObject>(
         keys={props.jsonKeys}
         valueSuggestions={props.jsonValueSuggestions}
         onKeySelected={props.onJsonKeySelected}
+        isLoadingKeys={props.isLoadingJsonKeys}
+        loadingValueKeys={props.loadingJsonValueKeys}
+        enableOperators={props.enableOperators}
         addButtonSuffix={filter.title}
         keyPlaceholder={"Key"}
         valuePlaceholder={"Value"}
         valueTypes={[ValueType.Text]}
-        initialValue={(filterData[filter.key] as Dictionary<string>) || {}}
-        onChange={(value: Dictionary<string | number | boolean>) => {
+        initialValue={
+          (filterData[filter.key] as Dictionary<DictionaryEntryValue>) || {}
+        }
+        onChange={(value: Dictionary<DictionaryEntryValue>) => {
           // if no keys in the dictionary, remove the filter
 
           if (Object.keys(value).length > 0) {

package/UI/Components/Filters/Types/Filter.ts

@@ -10,5 +10,8 @@ export default interface Filter<T extends GenericObject> {
   jsonKeys?: Array<string> | undefined;
   jsonValueSuggestions?: Record<string, Array<string>> | undefined;
   onJsonKeySelected?: ((key: string) => void) | undefined;
+  isLoadingJsonKeys?: boolean | undefined;
+  loadingJsonValueKeys?: Array<string> | undefined;
+  jsonEnableOperators?: boolean | undefined;
   isAdvancedFilter?: boolean | undefined;
 }

package/UI/Components/Forms/Fields/FormField.tsx

@@ -457,6 +457,11 @@ const FormField: <T extends GenericObject>(
           {props.field.fieldType === FormFieldSchemaType.Dictionary && (
             <DictionaryForm
               keys={props.field.jsonKeysForDictionary}
+              valueSuggestions={props.field.dictionaryValueSuggestions}
+              onKeySelected={props.field.onDictionaryKeySelected}
+              isLoadingKeys={props.field.isLoadingDictionaryKeys}
+              loadingValueKeys={props.field.loadingDictionaryValueKeys}
+              enableOperators={props.field.dictionaryEnableOperators}
               addButtonSuffix={props.field.title}
               keyPlaceholder={"Key"}
               valuePlaceholder={"Value"}
@@ -467,7 +472,7 @@ const FormField: <T extends GenericObject>(
                   ? (props.currentValues as any)[props.fieldName]
                   : props.field.defaultValue || {}
               }
-              onChange={(value: Dictionary<string | number | boolean>) => {
+              onChange={(value: Dictionary<any>) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);
               }}

package/UI/Components/Forms/Types/Field.ts

@@ -122,6 +122,11 @@ export default interface Field<TEntity> {
 
   //
   jsonKeysForDictionary?: Array<string> | undefined;
+  isLoadingDictionaryKeys?: boolean | undefined;
+  dictionaryValueSuggestions?: Record<string, Array<string>> | undefined;
+  loadingDictionaryValueKeys?: Array<string> | undefined;
+  onDictionaryKeySelected?: ((key: string) => void) | undefined;
+  dictionaryEnableOperators?: boolean | undefined;
 
   hideOptionalLabel?: boolean | undefined;
 

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>
         );