@oneuptime/common 12.0.12 → 12.0.13

package/UI/Components/EmptyState/EmptyState.tsx

@@ -11,6 +11,13 @@ export interface ComponentProps {
   id: string;
   iconClassName?: string;
   showSolidBackground?: boolean | undefined;
+  /*
+   * Vertical padding. The default is 13rem top and bottom, which suits a
+   * full-page dashboard empty state but swamps a short page. Override it
+   * rather than changing the default — several call sites cancel the 13rem
+   * with negative margins and would overlap their neighbours if it shrank.
+   */
+  paddingClassName?: string | undefined;
 }
 
 const EmptyState: FunctionComponent<ComponentProps> = (
@@ -21,7 +28,7 @@ const EmptyState: FunctionComponent<ComponentProps> = (
     <React.Fragment>
       <div
         id={props.id}
-        className={`flex pt-52 pb-52 ${
+        className={`flex ${props.paddingClassName || "pt-52 pb-52"} ${
           props.showSolidBackground ? "bg-white rounded shadow" : ""
         }`}
       >

package/UI/Components/Footer/Footer.tsx

@@ -16,6 +16,18 @@ export interface ComponentProps {
   links: Array<FooterLink>;
   style?: React.CSSProperties | undefined;
   className?: string | undefined;
+  /*
+   * Classes for the inner row. The default adds its own horizontal padding,
+   * which double-indents the footer inside a layout that is already padded —
+   * the status page, for one. Override it to align the footer with the content
+   * above it.
+   */
+  innerClassName?: string | undefined;
+  /*
+   * Classes for the copyright block. The default hides it between md and lg,
+   * which is not something every layout wants.
+   */
+  copyrightClassName?: string | undefined;
 }
 
 const Footer: FunctionComponent<ComponentProps> = (
@@ -29,7 +41,12 @@ const Footer: FunctionComponent<ComponentProps> = (
         }
         style={props.style}
       >
-        <div className="mx-auto w-full py-6 px-6 md:flex md:items-center md:justify-between lg:px-8">
+        <div
+          className={
+            props.innerClassName ||
+            "mx-auto w-full py-6 px-6 md:flex md:items-center md:justify-between lg:px-8"
+          }
+        >
           {/* Mobile: Stack links vertically, Desktop: Horizontal layout */}
           <div className="flex flex-col space-y-3 md:flex-row md:justify-center md:items-center md:space-y-0 md:space-x-8 md:order-2">
             {props.links &&
@@ -63,14 +80,23 @@ const Footer: FunctionComponent<ComponentProps> = (
                 );
               })}
           </div>
-          {/* Copyright: Show on mobile, hide on larger screens unless specified */}
-          <div className="mt-5 md:order-1 md:mt-0 block md:hidden lg:block">
-            {props.copyright && (
+          {/*
+           * Guard the wrapper, not just the <p>: with no copyright configured
+           * the empty div still contributed its mt-5, leaving a dead gap under
+           * the links.
+           */}
+          {props.copyright && (
+            <div
+              className={
+                props.copyrightClassName ||
+                "mt-5 md:order-1 md:mt-0 block md:hidden lg:block"
+              }
+            >
               <p className="text-center text-sm text-gray-500">
                 &copy; {props.copyright}
               </p>
-            )}
-          </div>
+            </div>
+          )}
         </div>
       </footer>
     </React.Fragment>

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

@@ -521,6 +521,9 @@ const FormField: <T extends GenericObject>(
               tabIndex={0}
               dataTestId={props.field.dataTestId}
               singleColumn={props.field.cardSelectSingleColumn}
+              searchable={props.field.cardSelectSearchable}
+              searchPlaceholder={props.field.cardSelectSearchPlaceholder}
+              collapsibleGroups={props.field.cardSelectCollapsibleGroups}
               onChange={(value: string) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);

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

@@ -58,6 +58,14 @@ export default interface Field<TEntity> {
     | Array<CardSelectOption | CardSelectOptionGroup>
     | undefined;
   cardSelectSingleColumn?: boolean | undefined;
+  /*
+   * Give the card picker a search box and collapse its groups behind their
+   * headers. Both are opt in: a picker with a handful of cards reads fine as
+   * a plain grid, and turning them on there would only add chrome.
+   */
+  cardSelectSearchable?: boolean | undefined;
+  cardSelectSearchPlaceholder?: string | undefined;
+  cardSelectCollapsibleGroups?: boolean | undefined;
   fetchDropdownOptions?:
     | ((
         item: FormValues<TEntity>,

package/UI/Components/Loader/PageLoader.tsx

@@ -1,22 +1,43 @@
 import Loader, { LoaderType } from "./Loader";
-import { VeryLightGray } from "../../../Types/BrandColors";
+import { Gray500 } from "../../../Types/BrandColors";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   isVisible: boolean;
+  /*
+   * Lets a full-page caller reserve height (e.g. "min-h-[60vh]") without
+   * changing the footprint of the many inline, in-card call sites that rely on
+   * the default spacing.
+   */
+  className?: string | undefined;
 }
 
 const PageLoader: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  if (props.isVisible) {
-    return (
-      <div className="m-auto w-full text-center w-max mt-52 align-middle flex items-center">
-        <Loader loaderType={LoaderType.Bar} color={VeryLightGray} size={200} />
-      </div>
-    );
+  if (!props.isVisible) {
+    return <></>;
   }
-  return <></>;
+
+  /*
+   * The bar used to be VeryLightGray (#c2c2c2) on white — about 1.7:1, which
+   * reads as a blank page rather than a loading one. Gray500 is visible without
+   * being loud.
+   *
+   * "w-full" and "w-max" were both set here, so which one applied came down to
+   * the order Tailwind happened to emit them in. The loader is centred by the
+   * flex row inside <Loader>, so full width is the one that was wanted.
+   */
+  return (
+    <div
+      className={
+        props.className ||
+        "m-auto mt-52 flex w-full items-center justify-center"
+      }
+    >
+      <Loader loaderType={LoaderType.Bar} color={Gray500} size={200} />
+    </div>
+  );
 };
 
 export default PageLoader;

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

@@ -26,6 +26,11 @@ import URL from "../../../../Types/API/URL";
 import HTTPResponse from "../../../../Types/API/HTTPResponse";
 import HTTPErrorResponse from "../../../../Types/API/HTTPErrorResponse";
 import { JSONObject } from "../../../../Types/JSON";
+import {
+  ResourceEntityFacetSelections,
+  collectResourceEntityFacetSelections,
+  collectServiceFacetSelections,
+} from "../../../../Types/Telemetry/ResourceEntityFacet";
 import { APP_API_URL } from "../../../Config";
 import ModelAPI from "../../../Utils/ModelAPI/ModelAPI";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
@@ -381,12 +386,29 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
             Array.from(severityValues);
         }
 
-        const serviceFilterValues: Set<string> | undefined =
-          props.appliedFacetFilters.get("primaryEntityId");
+        const serviceFilterValues: Array<string> =
+          collectServiceFacetSelections(props.appliedFacetFilters.entries());
 
-        if (serviceFilterValues && serviceFilterValues.size > 0) {
+        if (serviceFilterValues.length > 0) {
           (requestData as Record<string, unknown>)["serviceIds"] =
-            Array.from(serviceFilterValues);
+            serviceFilterValues;
+        }
+
+        /*
+         * Host / docker / podman / Kubernetes chips ride their own field —
+         * their ids are not `primaryEntityId` values for telemetry that
+         * carries a service.name, so the server resolves them to the
+         * resource's entity key. Without this the analytics tab silently
+         * ignored a cluster the sidebar was filtering by.
+         */
+        const resourceFilters: ResourceEntityFacetSelections =
+          collectResourceEntityFacetSelections(
+            props.appliedFacetFilters.entries(),
+          );
+
+        if (Object.keys(resourceFilters).length > 0) {
+          (requestData as Record<string, unknown>)["resourceFilters"] =
+            resourceFilters;
         }
 
         const traceFilterValues: Set<string> | undefined =

package/UI/Components/Markdown.tsx/LazyMarkdownViewer.tsx

@@ -15,7 +15,23 @@ const LazyMarkdownViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): JSX.Element => {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense
+      fallback={
+        /*
+         * A bare "Loading..." string here painted raw English text in the
+         * middle of the page, then swapped it for content of a different
+         * height. Reserve roughly the space two lines of prose take instead.
+         *
+         * Spans rather than divs: callers such as EventItem render this inside
+         * a <p>, where block elements are invalid nesting.
+         */
+        <span role="status" aria-live="polite" className="block space-y-2">
+          <span className="block h-4 w-3/4 animate-pulse rounded bg-gray-100" />
+          <span className="block h-4 w-1/2 animate-pulse rounded bg-gray-100" />
+          <span className="sr-only">Loading content</span>
+        </span>
+      }
+    >
       <MarkdownViewer {...props} />
     </Suspense>
   );

package/UI/Components/MasterPage/MasterPage.tsx

@@ -30,6 +30,16 @@ const MasterPage: FunctionComponent<ComponentProps> = (
   const topSectionRef: React.RefObject<HTMLDivElement> =
     React.useRef<HTMLDivElement>(null);
 
+  /*
+   * The status page supplies neither header nor navbar — it renders its own
+   * inside children. Rendering TopSection anyway left an empty white bar with a
+   * drop shadow above the content, so only render it when it has something in
+   * it.
+   */
+  const hasTopSection: boolean = Boolean(
+    (!props.hideHeader && props.header) || props.navBar,
+  );
+
   /*
    * Publish the sticky top section's height as --app-header-height so anything
    * that sticks underneath it (the side menu, for example) can offset itself by
@@ -89,6 +99,7 @@ const MasterPage: FunctionComponent<ComponentProps> = (
     props.isLoading,
     props.error,
     props.disableMainContentWrapper,
+    hasTopSection,
     isOnline,
   ]);
 
@@ -125,17 +136,19 @@ const MasterPage: FunctionComponent<ComponentProps> = (
               Skip to main content
             </a>
           )}
-          <div
-            ref={topSectionRef}
-            className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
-          >
-            <TopSection
-              hideHeader={props.hideHeader}
-              className={props.topSectionClassName}
-              header={props.header}
-              navbar={props.navBar}
-            />
-          </div>
+          {hasTopSection && (
+            <div
+              ref={topSectionRef}
+              className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
+            >
+              <TopSection
+                hideHeader={props.hideHeader}
+                className={props.topSectionClassName}
+                header={props.header}
+                navbar={props.navBar}
+              />
+            </div>
+          )}
 
           {props.disableMainContentWrapper ? (
             props.children

package/Utils/Monitor/MonitorMetricType.ts

@@ -1,7 +1,9 @@
 import AggregationType from "../../Types/BaseDatabase/AggregationType";
 import { CheckOn } from "../../Types/Monitor/CriteriaFilter";
 import MonitorMetricType from "../../Types/Monitor/MonitorMetricType";
-import MonitorType from "../../Types/Monitor/MonitorType";
+import MonitorType, {
+  MonitorTypeHelper,
+} from "../../Types/Monitor/MonitorType";
 
 /*
  * Groups of metrics rendered as separate cards on the monitor metrics page.
@@ -238,11 +240,24 @@ class MonitorMetricTypeUtil {
       monitorType === MonitorType.DNSSEC ||
       monitorType === MonitorType.Domain ||
       monitorType === MonitorType.SQLQuery ||
+      monitorType === MonitorType.SSLCertificate ||
       monitorType === MonitorType.ExternalStatusPage
     ) {
       return [MonitorMetricType.IsOnline, MonitorMetricType.ResponseTime];
     }
 
+    /*
+     * Any other type the probe actually checks still writes IsOnline and
+     * ResponseTime rows, so default to showing them rather than to an empty
+     * list. Falling through to [] hides the Monitor Metrics tab entirely -
+     * SSL Certificate monitors were missing from the list above and so had
+     * no metrics tab at all, which left an operator with no way to see that
+     * their monitor was running.
+     */
+    if (MonitorTypeHelper.isProbableMonitor(monitorType)) {
+      return [MonitorMetricType.IsOnline, MonitorMetricType.ResponseTime];
+    }
+
     return [];
   }
 

package/Utils/Monitor/NetworkTopologyUtil.ts

@@ -13,13 +13,27 @@ import {
   classifyEndpointRole,
   resolveDeviceRole,
 } from "./NetworkDeviceRoleUtil";
+import DeviceReachabilityUtil, {
+  NetworkDeviceReachability,
+} from "../NetworkDevice/DeviceReachabilityUtil";
 
 export interface TopologyDeviceInput {
   id: string;
   name: string;
   hostname?: string | undefined;
   sysName?: string | undefined;
+  /*
+   * Reachability inputs, all three of them. `isReachable` is the outcome of
+   * the last poll and is what actually decides up/down; `lastPolledAt` and
+   * `pollingIntervalInMinutes` only size the "we have stopped polling
+   * entirely" backstop. Passing lastSeenAt alone still works (that is the
+   * legacy path for rows written before the columns existed) but re-creates
+   * the bug where a fleet the probe cannot keep up with draws all-red.
+   */
+  isReachable?: boolean | undefined;
+  lastPolledAt?: Date | undefined;
   lastSeenAt?: Date | undefined;
+  pollingIntervalInMinutes?: number | undefined;
   interfacesUp?: number | undefined;
   interfacesDown?: number | undefined;
   vendor?: string | undefined;
@@ -232,12 +246,17 @@ interface ResolvedClaim {
  */
 const IPV4_PATTERN: RegExp = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
 
-// A device not seen within this window is treated as not currently up.
-const FRESH_WINDOW_MS: number = 15 * 60 * 1000;
-
 // Endpoint nodes rendered per graph; the slice is deterministic (by MAC).
 const ENDPOINT_RENDER_CAP: number = 2000;
 
+/*
+ * How long an ARP/FDB-learned endpoint keeps its "up" colour after the last
+ * walk that saw it. Taken from the shared device rule at its default
+ * interval so the map's two node kinds age out on comparable timescales.
+ */
+const ENDPOINT_FRESH_WINDOW_MS: number =
+  DeviceReachabilityUtil.getStaleWindowInMinutes(undefined) * 60 * 1000;
+
 export default class NetworkTopologyUtil {
   /*
    * Builds the topology graph from every device in a project. Nodes are the
@@ -1305,10 +1324,17 @@ export default class NetworkTopologyUtil {
     if (device.monitorStatus) {
       return device.monitorStatus;
     }
-    return NetworkTopologyUtil.statusFromLastSeen(device.lastSeenAt, now);
+    return NetworkTopologyUtil.statusFromPoll(device, now);
   }
 
-  // The shared freshness rule: seen within the window = up, stale = down.
+  /*
+   * Endpoints (ARP/FDB-learned hosts) have no poll of their own: they are
+   * re-learned from whichever device's tables they appear in, so freshness
+   * really is all there is to go on. The window is the shared default
+   * staleness window rather than the old fixed 15 minutes, so a host on a
+   * switch its probe polls slowly does not blink out of the map between
+   * walks.
+   */
   private static statusFromLastSeen(
     lastSeenAt: Date | undefined,
     now: Date,
@@ -1316,10 +1342,36 @@ export default class NetworkTopologyUtil {
     if (!lastSeenAt) {
       return "unknown";
     }
+
     const ageMs: number = now.getTime() - new Date(lastSeenAt).getTime();
-    if (ageMs > FRESH_WINDOW_MS) {
-      return "down";
+
+    return ageMs > ENDPOINT_FRESH_WINDOW_MS ? "down" : "up";
+  }
+
+  /*
+   * The shared reachability rule (DeviceReachabilityUtil), mapped onto the
+   * graph's three node states. "Pending" — never polled — is the graph's
+   * "unknown", which is what keeps a device nothing walks from being drawn
+   * as a failure.
+   */
+  private static statusFromPoll(
+    device: TopologyDeviceInput,
+    now: Date,
+  ): NetworkTopologyNodeStatus {
+    const status: NetworkDeviceReachability = DeviceReachabilityUtil.getStatus(
+      {
+        isReachable: device.isReachable,
+        lastPolledAt: device.lastPolledAt,
+        lastSeenAt: device.lastSeenAt,
+        pollingIntervalInMinutes: device.pollingIntervalInMinutes,
+      },
+      now,
+    );
+
+    if (status === NetworkDeviceReachability.Pending) {
+      return "unknown";
     }
-    return "up";
+
+    return status === NetworkDeviceReachability.Up ? "up" : "down";
   }
 }