@oneuptime/common 11.4.0 → 11.5.0

package/UI/Components/Modal/ModalFooter.tsx

@@ -18,14 +18,42 @@ export interface ComponentProps {
 const ModalFooter: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  if (!props.onClose && !props.onSubmit && !props.leftFooterElement) {
+    return <></>;
+  }
+
   return (
-    <div className="bg-gray-50 px-4 py-3 flex flex-row gap-3 md:px-6 md:justify-between">
+    <div
+      className="flex shrink-0 flex-col gap-3 rounded-b-2xl border-t border-gray-100 bg-gray-50/70 px-5 py-3 sm:flex-row sm:items-center sm:justify-between sm:rounded-b-xl sm:px-6"
+      data-testid="modal-footer"
+    >
       {props.leftFooterElement ? (
-        <div className="flex flex-row gap-3">{props.leftFooterElement}</div>
+        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center [&>div]:w-full [&>div]:flex-col [&_button]:!w-full sm:[&>div]:w-auto sm:[&>div]:flex-row sm:[&_button]:!ml-0 sm:[&_button]:!w-auto">
+          {props.leftFooterElement}
+        </div>
       ) : (
-        <div />
+        <div className="hidden sm:block" />
       )}
-      <div className="flex flex-row gap-3 md:flex-row-reverse">
+      <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+        {props.onClose ? (
+          <Button
+            buttonStyle={
+              props.closeButtonStyleType
+                ? props.closeButtonStyleType
+                : ButtonStyleType.NORMAL
+            }
+            title={props.closeButtonText ? props.closeButtonText : "Cancel"}
+            data-dismiss="modal"
+            onClick={() => {
+              props.onClose?.();
+            }}
+            dataTestId="modal-footer-close-button"
+            className="sm:!w-auto md:!ml-0"
+          />
+        ) : (
+          <></>
+        )}
+
         {props.onSubmit ? (
           <Button
             buttonStyle={
@@ -47,24 +75,7 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
                 : ButtonType.Button
             }
             dataTestId="modal-footer-submit-button"
-          />
-        ) : (
-          <></>
-        )}
-
-        {props.onClose ? (
-          <Button
-            buttonStyle={
-              props.closeButtonStyleType
-                ? props.closeButtonStyleType
-                : ButtonStyleType.NORMAL
-            }
-            title={props.closeButtonText ? props.closeButtonText : "Cancel"}
-            data-dismiss="modal"
-            onClick={() => {
-              props.onClose?.();
-            }}
-            dataTestId="modal-footer-close-button"
+            className="sm:!w-auto md:!ml-0"
           />
         ) : (
           <></>

package/UI/Components/ModelTable/TableView.tsx

@@ -226,7 +226,7 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
   const getMenuContents: GetReactElementArrayFunction =
     (): Array<ReactElement> => {
       if (isLoading) {
-        return [<BarLoader key={-1} />];
+        return [<BarLoader key={-1} color="var(--ou-link, #4f46e5)" />];
       }
 
       const elements: Array<ReactElement> = [];

package/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx

@@ -41,7 +41,8 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                 width: "48px",
                 height: "48px",
                 borderRadius: "50%",
-                backgroundColor: "#f0fdf4",
+                backgroundColor:
+                  "color-mix(in srgb, #22c55e 14%, var(--ou-surface-primary, #ffffff))",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -65,13 +66,18 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
               style={{
                 fontSize: "14px",
                 fontWeight: 600,
-                color: "#111827",
+                color: "var(--ou-text-primary, #111827)",
                 marginBottom: "4px",
               }}
             >
               No incidents
             </div>
-            <div style={{ fontSize: "13px", color: "#6b7280" }}>
+            <div
+              style={{
+                fontSize: "13px",
+                color: "var(--ou-text-muted, #6b7280)",
+              }}
+            >
               No incidents were reported on this day.
             </div>
           </div>
@@ -91,20 +97,20 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                   : undefined
               }
               style={{
-                border: "1px solid #e5e7eb",
+                border: "1px solid var(--ou-border-default, #e5e7eb)",
                 borderRadius: "10px",
                 padding: "14px 16px",
                 marginBottom: "10px",
                 cursor: isClickable ? "pointer" : "default",
                 transition: "all 0.15s ease",
-                backgroundColor: "#ffffff",
+                backgroundColor: "var(--ou-surface-primary, #ffffff)",
               }}
               onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
                 if (isClickable) {
                   (e.currentTarget as HTMLDivElement).style.backgroundColor =
-                    "#f9fafb";
+                    "var(--ou-surface-secondary, #f9fafb)";
                   (e.currentTarget as HTMLDivElement).style.borderColor =
-                    "#d1d5db";
+                    "var(--ou-border-strong, #d1d5db)";
                   (e.currentTarget as HTMLDivElement).style.boxShadow =
                     "0 1px 3px rgba(0,0,0,0.06)";
                 }
@@ -112,9 +118,9 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
               onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
                 if (isClickable) {
                   (e.currentTarget as HTMLDivElement).style.backgroundColor =
-                    "#ffffff";
+                    "var(--ou-surface-primary, #ffffff)";
                   (e.currentTarget as HTMLDivElement).style.borderColor =
-                    "#e5e7eb";
+                    "var(--ou-border-default, #e5e7eb)";
                   (e.currentTarget as HTMLDivElement).style.boxShadow = "none";
                 }
               }}
@@ -132,7 +138,9 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                     style={{
                       fontSize: "14px",
                       fontWeight: 600,
-                      color: isClickable ? "#2563eb" : "#111827",
+                      color: isClickable
+                        ? "var(--ou-link, #2563eb)"
+                        : "var(--ou-text-primary, #111827)",
                       lineHeight: "1.4",
                       marginBottom: "4px",
                     }}
@@ -142,7 +150,7 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                   <div
                     style={{
                       fontSize: "12px",
-                      color: "#6b7280",
+                      color: "var(--ou-text-muted, #6b7280)",
                     }}
                   >
                     Declared{" "}
@@ -162,7 +170,7 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                   >
                     <path
                       d="M6 3l5 5-5 5"
-                      stroke="#9ca3af"
+                      stroke="var(--ou-text-subtle, #9ca3af)"
                       strokeWidth="1.5"
                       strokeLinecap="round"
                       strokeLinejoin="round"

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -344,9 +344,9 @@ export default class TemplateVariablesCatalog {
           ],
         };
 
-      case MonitorType.SNMP:
+      case MonitorType.NetworkDevice:
         return {
-          title: "SNMP",
+          title: "Network Device (SNMP)",
           variables: [
             {
               key: "isOnline",

package/UI/Components/Pill/Pill.tsx

@@ -1,4 +1,4 @@
-import { Black } from "../../../Types/BrandColors";
+import { Gray500 } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
 import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -26,22 +26,32 @@ export interface ComponentProps {
 const Pill: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const color: Color = props.color || Gray500;
+  const backgroundColor: string = color.toString();
+
   if (props.isMinimal) {
     return (
-      <span className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5 text-sm">
+      <span
+        className="relative inline-flex items-center rounded-full border px-3 py-0.5 text-sm"
+        style={{
+          borderColor: "var(--ou-border-strong, #d1d5db)",
+        }}
+      >
         <span className="absolute flex flex-shrink-0 items-center justify-center">
           <span
             className="h-1.5 w-1.5 rounded-full bg-rose-500"
             style={{
-              backgroundColor:
-                props.style?.backgroundColor || props.color
-                  ? props.color.toString()
-                  : Black.toString(),
+              backgroundColor: backgroundColor,
             }}
             aria-hidden="true"
           ></span>
         </span>
-        <span className="ml-3.5 font-medium text-gray-900">{props.text}</span>
+        <span
+          className="ml-3.5 font-medium"
+          style={{ color: "var(--ou-text-primary, #111827)" }}
+        >
+          {props.text}
+        </span>
       </span>
     );
   }
@@ -50,18 +60,16 @@ const Pill: FunctionComponent<ComponentProps> = (
     return (
       <span
         data-testid="pill"
-        className="inline-flex items-center rounded-full p-1 pl-3 pr-3"
+        className="inline-flex items-center rounded-full border p-1 pl-3 pr-3"
         style={{
           // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
 
           color:
-            props.style?.color || Color.shouldUseDarkText(props.color || Black)
+            props.style?.color || Color.shouldUseDarkText(color)
               ? "#000000"
               : "#ffffff",
-          backgroundColor:
-            props.style?.backgroundColor || props.color
-              ? props.color.toString()
-              : Black.toString(),
+          backgroundColor: backgroundColor,
+          borderColor: "var(--ou-border-strong, #d1d5db)",
           fontSize: props.size ? props.size.toString() : PillSize.Normal,
           ...props.style,
         }}

package/UI/Components/StatusBubble/StatusBubble.tsx

@@ -1,4 +1,3 @@
-import { Black } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
 import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
 
@@ -14,7 +13,7 @@ const Statusbubble: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const backgroundColor: string = props.color
     ? props.color.toString()
-    : Black.toString();
+    : "var(--ou-text-subtle, #9ca3af)";
 
   return (
     <div
@@ -37,6 +36,7 @@ const Statusbubble: FunctionComponent<ComponentProps> = (
             className="relative inline-flex rounded-full h-3.5 w-3.5"
             style={{
               backgroundColor: backgroundColor,
+              boxShadow: "0 0 0 1px var(--ou-border-strong, #d1d5db)",
             }}
           ></span>
         </span>
@@ -44,7 +44,7 @@ const Statusbubble: FunctionComponent<ComponentProps> = (
       <div
         className="text-sm font-medium"
         style={{
-          color: props.color ? props.color.toString() : Black.toString(),
+          color: "var(--ou-text-secondary, #4b5563)",
         }}
       >
         {props.text}

package/UI/Components/Tabs/Tabs.tsx

@@ -10,6 +10,11 @@ import React, {
 export interface ComponentProps {
   tabs: Array<Tab>;
   onTabChange: (tab: Tab) => void;
+  /**
+   * Tab selected on first render (e.g. restored from a URL param).
+   * Falls back to the first tab when absent or unknown.
+   */
+  initialTabName?: string | undefined;
 }
 
 const Tabs: FunctionComponent<ComponentProps> = (
@@ -88,7 +93,11 @@ const Tabs: FunctionComponent<ComponentProps> = (
 
     if (!hasInitialized.current && props.tabs.length > 0) {
       hasInitialized.current = true;
-      setCurrentTabName(props.tabs[0]!.name);
+      setCurrentTabName(
+        props.initialTabName && tabNames.includes(props.initialTabName)
+          ? props.initialTabName
+          : props.tabs[0]!.name,
+      );
       return;
     }
 

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -45,8 +45,13 @@ export interface TelemetryViewerProps<T> {
   searchAttributeSuggestions?: Array<string> | undefined;
   searchValueSuggestions?: Record<string, Array<string>> | undefined;
   searchFieldAliasMap?: Record<string, string> | undefined;
+  /*
+   * Return `false` when the field is filtered via the raw search string
+   * rather than a chip — the search bar then keeps the token in the input
+   * and submits the search instead of clearing the token.
+   */
   onSearchFieldValueSelect?:
-    | ((fieldKey: string, value: string) => void)
+    | ((fieldKey: string, value: string) => boolean | void)
     | undefined;
   searchHelpRows?: Array<SearchHelpRow> | undefined;
   searchHelpCombinedExample?: string | undefined;
@@ -147,6 +152,7 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
             helpCombinedExample={props.searchHelpCombinedExample}
             isAttributesLoading={props.searchAttributesLoading}
             isValuesLoading={props.searchValuesLoading}
+            isLoading={props.isLoading}
           />
         </div>
 

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

@@ -242,15 +242,21 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
               <XAxis
                 dataKey="time"
                 tickFormatter={formatTickTime}
-                tick={{ fontSize: 10, fill: "#9ca3af" }}
-                axisLine={{ stroke: "#e5e7eb" }}
+                tick={{
+                  fontSize: 10,
+                  fill: "var(--ou-chart-tick, #9ca3af)",
+                }}
+                axisLine={{ stroke: "var(--ou-chart-grid, #e5e7eb)" }}
                 tickLine={false}
                 minTickGap={40}
                 dy={4}
                 interval="preserveStartEnd"
               />
               <YAxis
-                tick={{ fontSize: 10, fill: "#9ca3af" }}
+                tick={{
+                  fontSize: 10,
+                  fill: "var(--ou-chart-tick, #9ca3af)",
+                }}
                 axisLine={false}
                 tickLine={false}
                 width={48}

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

@@ -31,8 +31,16 @@ export interface TelemetrySearchBarProps {
   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.
-  onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
+  /*
+   * Called when the user picks a concrete field:value chip from the dropdown.
+   * Return `false` when the field is NOT consumed as a chip (the parent
+   * filters it through the raw search string instead, e.g. `name:` in the
+   * metrics viewer) — the bar then keeps the token in the input and submits
+   * the search as-is rather than clearing the token.
+   */
+  onFieldValueSelect?:
+    | ((fieldKey: string, value: string) => boolean | void)
+    | undefined;
   // User-facing alias → backing field key (e.g. "service" -> "serviceId").
   fieldAliasMap?: Record<string, string> | undefined;
   placeholder?: string | undefined;
@@ -43,6 +51,8 @@ export interface TelemetrySearchBarProps {
   isAttributesLoading?: boolean | undefined;
   // Loading state for `@attribute:value` autocomplete (per-key value fetch).
   isValuesLoading?: boolean | undefined;
+  // Loading state for the telemetry results shown by the parent viewer.
+  isLoading?: boolean | undefined;
 }
 
 export interface TelemetrySearchBarRef {
@@ -198,7 +208,24 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
                   ? filteredSuggestions[0]!
                   : partialValue);
 
-              props.onFieldValueSelect(fieldPrefix, resolvedMatch);
+              const consumed: boolean | void = props.onFieldValueSelect(
+                fieldPrefix,
+                resolvedMatch,
+              );
+
+              if (consumed === false) {
+                /*
+                 * The parent filters this field through the raw search
+                 * string. Keep the token in the input and submit — clearing
+                 * it here would erase the filter the user just typed.
+                 */
+                props.onSubmit();
+                setShowSuggestions(false);
+                setShowHelp(false);
+                e.preventDefault();
+                return;
+              }
+
               const parts: Array<string> = props.value.split(/\s+/);
               parts.pop();
               const remaining: string = parts.join(" ");
@@ -256,12 +283,32 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
     const applySuggestion: (suggestion: string) => void = useCallback(
       (suggestion: string): void => {
         if (isValueMode) {
+          let consumed: boolean | void = undefined;
           if (props.onFieldValueSelect) {
-            props.onFieldValueSelect(fieldPrefix, suggestion);
+            consumed = props.onFieldValueSelect(fieldPrefix, suggestion);
           }
 
           const parts: Array<string> = props.value.split(/\s+/);
           parts.pop();
+
+          if (consumed === false) {
+            /*
+             * Not consumed as a chip — the parent filters this field via
+             * the raw search string, so complete the token in place
+             * instead of clearing it.
+             */
+            const completedToken: string = `${hasAtPrefix ? "@" : ""}${fieldPrefix}:${suggestion}`;
+            props.onChange(
+              parts.length > 0
+                ? `${parts.join(" ")} ${completedToken}`
+                : completedToken,
+            );
+            setShowSuggestions(false);
+            setShowHelp(false);
+            inputRef.current?.focus();
+            return;
+          }
+
           const remaining: string = parts.join(" ");
           props.onChange(remaining ? remaining + " " : "");
           setShowSuggestions(false);
@@ -337,6 +384,7 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
               ? "border-indigo-400 ring-2 ring-indigo-100"
               : "border-gray-200 hover:border-gray-300"
           }`}
+          aria-busy={props.isLoading || false}
         >
           <Icon
             icon={IconProp.Search}
@@ -367,6 +415,16 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
             spellCheck={false}
             autoComplete="off"
           />
+          {props.isLoading && (
+            <div
+              className="flex-none text-indigo-500"
+              role="status"
+              aria-label="Loading results"
+              title="Loading results..."
+            >
+              <Icon icon={IconProp.Spinner} className="h-4 w-4 animate-spin" />
+            </div>
+          )}
           {props.value.length > 0 && (
             <button
               type="button"