@oneuptime/common 13.0.3 → 13.0.5

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

@@ -0,0 +1,69 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface FacetSectionHeaderProps {
+  title: string;
+  // Optional icon before the title (e.g. a resource brand icon).
+  icon?: IconProp | undefined;
+  // Selected values in this facet, shown as a badge when non-zero.
+  activeCount: number;
+  isExpanded: boolean;
+  onToggle: () => void;
+  // Id of the section body this header shows and hides.
+  controlsId?: string | undefined;
+}
+
+/*
+ * The collapsible header every facet section shares, in both the Logs and the
+ * Telemetry sidebars: icon, title, active-count badge and one chevron that
+ * turns as the section opens.
+ */
+const FacetSectionHeader: FunctionComponent<FacetSectionHeaderProps> = (
+  props: FacetSectionHeaderProps,
+): ReactElement => {
+  return (
+    <div className="px-1">
+      <button
+        type="button"
+        className="flex w-full items-center justify-between gap-2 rounded px-1.5 py-1 text-left transition-colors hover:bg-gray-50"
+        aria-expanded={props.isExpanded}
+        aria-controls={props.isExpanded ? props.controlsId : undefined}
+        onClick={props.onToggle}
+      >
+        <div className="flex min-w-0 items-center gap-1.5">
+          {props.icon && (
+            <span
+              className="flex flex-none items-center"
+              data-testid="facet-section-icon"
+              data-icon={props.icon}
+            >
+              <Icon icon={props.icon} className="h-3.5 w-3.5 text-gray-400" />
+            </span>
+          )}
+          <span className="truncate text-[11px] font-semibold uppercase tracking-wider text-gray-500">
+            {props.title}
+          </span>
+          {props.activeCount > 0 && (
+            <span className="inline-flex h-4 min-w-[1rem] flex-none items-center justify-center rounded-full bg-indigo-100 px-1 text-[10px] font-semibold text-indigo-600">
+              {props.activeCount}
+            </span>
+          )}
+        </div>
+        <span
+          className={`flex flex-none items-center transition-transform duration-150 ${
+            props.isExpanded ? "rotate-90" : ""
+          }`}
+          data-testid="facet-section-chevron"
+        >
+          <Icon
+            icon={IconProp.ChevronRight}
+            className="h-3 w-3 text-gray-400"
+          />
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default FacetSectionHeader;

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

@@ -0,0 +1,36 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface FacetShowMoreButtonProps {
+  // Whether the list is longer than the collapsed view in either direction.
+  hasMore: boolean;
+  isShowingAll: boolean;
+  // Values the collapsed list holds back, counted from the filtered list.
+  hiddenCount: number;
+  onToggle: () => void;
+}
+
+/*
+ * A facet section's "Show N more" / "Show less" toggle. Renders nothing when
+ * the list already fits — a "Show less" with nothing to collapse is a dead
+ * control.
+ */
+const FacetShowMoreButton: FunctionComponent<FacetShowMoreButtonProps> = (
+  props: FacetShowMoreButtonProps,
+): ReactElement | null => {
+  if (!props.hasMore) {
+    return null;
+  }
+
+  return (
+    <button
+      type="button"
+      className="mt-1 rounded px-1.5 py-0.5 text-[11px] font-medium text-indigo-500 transition-colors hover:bg-indigo-50 hover:text-indigo-600"
+      aria-expanded={props.isShowingAll}
+      onClick={props.onToggle}
+    >
+      {props.isShowingAll ? "Show less" : `Show ${props.hiddenCount} more`}
+    </button>
+  );
+};
+
+export default FacetShowMoreButton;

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

@@ -0,0 +1,88 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+import {
+  formatEmptyFacetCount,
+  formatHiddenFacetCount,
+} from "../FacetVisibility";
+
+export interface HiddenFacetsFooterProps {
+  // Empty resource facets the sidebar folded away.
+  hiddenCount: number;
+  // Their section titles, listed in the tooltip.
+  hiddenTitles: ReadonlyArray<string>;
+  // Whether the hidden facets are currently revealed.
+  isShowingHidden: boolean;
+  onToggle: () => void;
+  // Id of the facet list the toggle reveals facets in.
+  controlsId?: string | undefined;
+}
+
+/*
+ * The last row of a facet sidebar: "3 empty filters hidden · Show". A project
+ * without Podman hosts should not scroll past an empty "Podman Host" section,
+ * but the filter must stay discoverable, so it is folded here rather than
+ * dropped. Renders nothing when nothing is hidden.
+ */
+const HiddenFacetsFooter: FunctionComponent<HiddenFacetsFooterProps> = (
+  props: HiddenFacetsFooterProps,
+): ReactElement | null => {
+  if (props.hiddenCount <= 0) {
+    return null;
+  }
+
+  const hiddenTitlesText: string = props.hiddenTitles.join(", ");
+
+  return (
+    <div
+      data-testid="facet-sidebar-hidden-footer"
+      className="-mt-px flex items-center justify-between gap-2 border-t border-gray-100 px-3 py-2 text-[11px] text-gray-400"
+    >
+      {props.isShowingHidden ? (
+        <button
+          type="button"
+          className="flex min-w-0 items-center gap-1.5 rounded font-medium text-indigo-500 transition-colors hover:text-indigo-600"
+          aria-expanded={true}
+          aria-controls={props.controlsId}
+          title={hiddenTitlesText}
+          onClick={props.onToggle}
+        >
+          <span className="flex flex-none items-center">
+            <Icon icon={IconProp.EyeSlash} className="h-3.5 w-3.5" />
+          </span>
+          <span className="truncate">Hide empty filters</span>
+        </button>
+      ) : (
+        <>
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span className="flex flex-none items-center">
+              <Icon
+                icon={IconProp.EyeSlash}
+                className="h-3.5 w-3.5 text-gray-400"
+              />
+            </span>
+            <span
+              className="truncate text-gray-500"
+              title={hiddenTitlesText}
+              data-testid="facet-sidebar-hidden-count"
+            >
+              {formatHiddenFacetCount(props.hiddenCount)}
+            </span>
+          </div>
+          <button
+            type="button"
+            className="flex-none rounded font-medium text-indigo-500 transition-colors hover:text-indigo-600"
+            aria-expanded={false}
+            aria-controls={props.controlsId}
+            aria-label={`Show ${formatEmptyFacetCount(props.hiddenCount)}`}
+            onClick={props.onToggle}
+          >
+            Show
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default HiddenFacetsFooter;

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

@@ -0,0 +1,205 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../../Icon/Icon";
+import Link from "../../Link/Link";
+import Tooltip from "../../Tooltip/Tooltip";
+import IconProp from "../../../../Types/Icon/IconProp";
+import Route from "../../../../Types/API/Route";
+import URL from "../../../../Types/API/URL";
+import {
+  TELEMETRY_EXPLORER_LABELS,
+  TelemetrySignal,
+} from "../../../../Utils/Telemetry/LockedFilterSearch";
+import { CopiedFeedback, useCopiedFeedback } from "./LockedFilterChip";
+
+/*
+ * The two ways out of a locked scope: copy every locked chip as search
+ * syntax to paste into the main explorer, or open that explorer with the
+ * same filters already applied. Rendered once, after the locked chips, so
+ * the whole pinned scope travels together — a reader on a Docker host's
+ * Logs tab wants "host AND runtime", not one of them.
+ */
+
+/** What the host viewer knows about reproducing its locked scope elsewhere. */
+export interface LockedFilterActionOptions {
+  /** Search-bar text reproducing every locked chip on the same-signal explorer. */
+  copyText?: string | undefined;
+  /** The same-signal explorer, with the locked filters in its URL. */
+  openExplorerRoute?: Route | URL | undefined;
+  /** Locked filters the link cannot carry, as short labels. */
+  notCarried?: Array<string> | undefined;
+}
+
+export interface LockedFilterActionsProps extends LockedFilterActionOptions {
+  signal: TelemetrySignal;
+}
+
+const ACTION_CLASS_NAME: string =
+  "inline-flex h-6 items-center gap-1.5 rounded-md px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400";
+
+const ACTION_IDLE_CLASS_NAME: string =
+  "text-gray-600 hover:bg-gray-100 hover:text-gray-900";
+
+const ACTION_COPIED_CLASS_NAME: string = "bg-emerald-50 text-emerald-600";
+
+const ACTION_FAILED_CLASS_NAME: string = "bg-rose-50 text-rose-600";
+
+type GetCopyAriaLabelFunction = (explorerLabel: string) => string;
+
+export const getCopyLockedFiltersAriaLabel: GetCopyAriaLabelFunction = (
+  explorerLabel: string,
+): string => {
+  return `Copy locked filters as ${explorerLabel} search`;
+};
+
+type FormatNotCarriedFunction = (
+  notCarried: Array<string> | undefined,
+) => string;
+
+/** " — not carried over: a, b", or "" when everything travels. */
+export const formatNotCarriedSuffix: FormatNotCarriedFunction = (
+  notCarried: Array<string> | undefined,
+): string => {
+  const labels: Array<string> = (notCarried || []).filter((label: string) => {
+    return typeof label === "string" && label.trim().length > 0;
+  });
+
+  if (labels.length === 0) {
+    return "";
+  }
+
+  return ` — not carried over: ${labels.join(", ")}`;
+};
+
+type GetOpenAriaLabelFunction = (
+  explorerLabel: string,
+  notCarried?: Array<string> | undefined,
+) => string;
+
+/**
+ * The accessible name of the "Open in …" link: its visible text plus, when
+ * the link cannot carry everything, the same caveat the tooltip shows. The
+ * caveat rides a visually-hidden span inside the link rather than a title,
+ * so a screen reader hears it before activating, and hovering shows one
+ * bubble (the tooltip) instead of the tooltip and the browser's own.
+ */
+export const getOpenExplorerAriaLabel: GetOpenAriaLabelFunction = (
+  explorerLabel: string,
+  notCarried?: Array<string> | undefined,
+): string => {
+  return `Open in ${explorerLabel}${formatNotCarriedSuffix(notCarried)}`;
+};
+
+type CopyButtonTextFunction = (feedback: CopiedFeedback) => string;
+
+const copyButtonText: CopyButtonTextFunction = (
+  feedback: CopiedFeedback,
+): string => {
+  if (feedback.copied) {
+    return "Copied!";
+  }
+
+  if (feedback.failed) {
+    return "Copy failed";
+  }
+
+  return "Copy filter";
+};
+
+const LockedFilterActions: FunctionComponent<LockedFilterActionsProps> = (
+  props: LockedFilterActionsProps,
+): ReactElement | null => {
+  const feedback: CopiedFeedback = useCopiedFeedback();
+
+  const copyText: string = (props.copyText || "").trim();
+  const hasCopy: boolean = copyText.length > 0;
+  const hasOpen: boolean = Boolean(props.openExplorerRoute);
+
+  if (!hasCopy && !hasOpen) {
+    return null;
+  }
+
+  const explorerLabel: string = TELEMETRY_EXPLORER_LABELS[props.signal];
+  const notCarriedSuffix: string = formatNotCarriedSuffix(props.notCarried);
+
+  const copyClassName: string = feedback.copied
+    ? ACTION_COPIED_CLASS_NAME
+    : feedback.failed
+      ? ACTION_FAILED_CLASS_NAME
+      : ACTION_IDLE_CLASS_NAME;
+
+  return (
+    <div
+      className="inline-flex items-center gap-0.5 rounded-md border border-gray-200 bg-white p-0.5 shadow-sm"
+      role="group"
+      aria-label="Locked filter actions"
+      data-testid="locked-filter-actions"
+    >
+      {hasCopy && (
+        <Tooltip
+          richContent={
+            <div className="w-72 max-w-full space-y-1.5 p-1 text-left text-xs">
+              <p className="text-gray-700">
+                Copies the locked filters as search syntax. Paste it into the{" "}
+                {explorerLabel} explorer search bar to see the same slice there.
+              </p>
+              <code className="block break-all rounded border border-gray-200 bg-gray-50 px-1.5 py-1 font-mono text-[11px] text-gray-800">
+                {copyText}
+              </code>
+            </div>
+          }
+        >
+          <button
+            type="button"
+            aria-label={getCopyLockedFiltersAriaLabel(explorerLabel)}
+            className={`${ACTION_CLASS_NAME} ${copyClassName}`}
+            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+              event.preventDefault();
+              event.stopPropagation();
+              void feedback.copy(copyText);
+            }}
+          >
+            <Icon
+              icon={
+                feedback.copied
+                  ? IconProp.Check
+                  : feedback.failed
+                    ? IconProp.Close
+                    : IconProp.Clipboard
+              }
+              className="h-3.5 w-3.5"
+            />
+            <span>{copyButtonText(feedback)}</span>
+          </button>
+        </Tooltip>
+      )}
+      {hasOpen && (
+        <Tooltip
+          text={`Opens the ${explorerLabel} explorer with these filters applied${notCarriedSuffix}`}
+        >
+          {/*
+           * Tippy attaches to its child through a ref, which the Link
+           * component (a plain function component) cannot take — the span
+           * is the tooltip's anchor, the anchor inside it is the link. No
+           * title on the link: Link mirrors a title into aria-label AND a
+           * native bubble, which would both contradict the caveat and
+           * double the tooltip.
+           */}
+          <span className="inline-flex">
+            <Link
+              to={props.openExplorerRoute}
+              className={`${ACTION_CLASS_NAME} ${ACTION_IDLE_CLASS_NAME}`}
+            >
+              <Icon icon={IconProp.ExternalLink} className="h-3.5 w-3.5" />
+              <span>Open in {explorerLabel}</span>
+              {notCarriedSuffix && (
+                <span className="sr-only">{notCarriedSuffix}</span>
+              )}
+            </Link>
+          </span>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+export default LockedFilterActions;