@oneuptime/common 10.0.55 → 10.0.56

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

@@ -0,0 +1,156 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useEffect,
+} from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface TelemetryDetailPanelTab {
+  id: string;
+  label: string;
+  content: ReactNode;
+  badge?: string | number | undefined;
+}
+
+export interface TelemetryDetailPanelProps {
+  isOpen: boolean;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  onClose: () => void;
+  tabs: Array<TelemetryDetailPanelTab>;
+  activeTabId: string;
+  onTabChange: (tabId: string) => void;
+  headerActions?: ReactNode;
+  variant?: "floating" | "embedded";
+  widthClassName?: string;
+}
+
+const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
+  props: TelemetryDetailPanelProps,
+): ReactElement | null => {
+  // Close on Escape
+  useEffect(() => {
+    if (!props.isOpen) {
+      return;
+    }
+    const handler: (e: KeyboardEvent) => void = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") {
+        props.onClose();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, [props.isOpen, props.onClose]);
+
+  if (!props.isOpen) {
+    return null;
+  }
+
+  const variant: "floating" | "embedded" = props.variant || "floating";
+  const widthClassName: string = props.widthClassName || "w-[38rem]";
+
+  const activeTab: TelemetryDetailPanelTab | undefined = props.tabs.find(
+    (t: TelemetryDetailPanelTab) => {
+      return t.id === props.activeTabId;
+    },
+  );
+
+  const body: ReactElement = (
+    <div
+      className={`flex h-full flex-col bg-white ${
+        variant === "floating"
+          ? `fixed right-0 top-0 z-40 ${widthClassName} border-l border-gray-200 shadow-2xl`
+          : "rounded-lg border border-gray-200"
+      }`}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 border-b border-gray-100 px-4 py-3">
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-semibold text-gray-900">
+            {props.title}
+          </div>
+          {props.subtitle && (
+            <div className="mt-0.5 truncate text-xs text-gray-500">
+              {props.subtitle}
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {props.headerActions}
+          <button
+            type="button"
+            className="rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            onClick={props.onClose}
+            title="Close (Esc)"
+          >
+            <Icon icon={IconProp.Close} className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      {props.tabs.length > 1 && (
+        <div className="flex items-center gap-1 border-b border-gray-100 px-2 pt-1.5">
+          {props.tabs.map((tab: TelemetryDetailPanelTab) => {
+            const isActive: boolean = tab.id === props.activeTabId;
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                className={`relative inline-flex items-center gap-1.5 rounded-t-md px-3 py-1.5 text-xs font-medium transition-colors ${
+                  isActive
+                    ? "text-indigo-700"
+                    : "text-gray-500 hover:text-gray-700"
+                }`}
+                onClick={() => {
+                  props.onTabChange(tab.id);
+                }}
+              >
+                {tab.label}
+                {tab.badge !== undefined && tab.badge !== null && (
+                  <span
+                    className={`inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full px-1 text-[10px] font-semibold ${
+                      isActive
+                        ? "bg-indigo-100 text-indigo-700"
+                        : "bg-gray-100 text-gray-500"
+                    }`}
+                  >
+                    {tab.badge}
+                  </span>
+                )}
+                {isActive && (
+                  <span className="absolute inset-x-2 bottom-0 h-0.5 rounded-t bg-indigo-500" />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto">{activeTab?.content}</div>
+    </div>
+  );
+
+  if (variant === "floating") {
+    return (
+      <>
+        {/* Click-outside backdrop (transparent) */}
+        <div
+          className="fixed inset-0 z-30"
+          onClick={props.onClose}
+          aria-hidden="true"
+        />
+        {body}
+      </>
+    );
+  }
+
+  return body;
+};
+
+export default TelemetryDetailPanel;

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

@@ -0,0 +1,160 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useState,
+  useMemo,
+} from "react";
+import { FacetValue } from "../types";
+import TelemetryFacetValueRow from "./TelemetryFacetValueRow";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface TelemetryFacetSectionProps {
+  title: string;
+  values: Array<FacetValue>;
+  initialVisibleCount?: number;
+  onIncludeValue: (key: string, value: string) => void;
+  onExcludeValue: (key: string, value: string) => void;
+  facetKey: string;
+  valueDisplayMap?: Record<string, string> | undefined;
+  valueColorMap?: Record<string, string> | undefined;
+  activeValues?: Set<string> | undefined;
+  defaultExpanded?: boolean;
+}
+
+const DEFAULT_VISIBLE_COUNT: number = 5;
+const SEARCH_THRESHOLD: number = 6;
+
+const TelemetryFacetSection: FunctionComponent<TelemetryFacetSectionProps> = (
+  props: TelemetryFacetSectionProps,
+): ReactElement => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(
+    props.defaultExpanded !== false,
+  );
+  const [showAll, setShowAll] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState<string>("");
+
+  const showSearch: boolean = props.values.length >= SEARCH_THRESHOLD;
+
+  const filteredValues: Array<FacetValue> = useMemo(() => {
+    if (!searchText.trim()) {
+      return props.values;
+    }
+    const query: string = searchText.toLowerCase().trim();
+    return props.values.filter((facet: FacetValue) => {
+      const displayName: string =
+        props.valueDisplayMap?.[facet.value] ?? facet.value;
+      return displayName.toLowerCase().includes(query);
+    });
+  }, [props.values, props.valueDisplayMap, searchText]);
+
+  const visibleCount: number =
+    props.initialVisibleCount ?? DEFAULT_VISIBLE_COUNT;
+
+  const displayedValues: Array<FacetValue> = searchText.trim()
+    ? filteredValues
+    : showAll
+      ? filteredValues
+      : filteredValues.slice(0, visibleCount);
+
+  const hasMore: boolean =
+    !searchText.trim() && filteredValues.length > visibleCount;
+
+  const maxCount: number =
+    props.values.length > 0
+      ? Math.max(
+          ...props.values.map((v: FacetValue) => {
+            return v.count;
+          }),
+        )
+      : 0;
+
+  const activeCount: number = props.activeValues ? props.activeValues.size : 0;
+
+  return (
+    <div className="border-b border-gray-100 py-2">
+      <button
+        type="button"
+        className="flex w-full items-center justify-between px-2 py-1 text-left"
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
+      >
+        <div className="flex items-center gap-1.5">
+          <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-500">
+            {props.title}
+          </span>
+          {activeCount > 0 && (
+            <span className="inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-indigo-100 px-1 text-[10px] font-semibold text-indigo-600">
+              {activeCount}
+            </span>
+          )}
+        </div>
+        <Icon
+          icon={isExpanded ? IconProp.ChevronDown : IconProp.ChevronRight}
+          className="h-3 w-3 text-gray-400"
+        />
+      </button>
+
+      {isExpanded && (
+        <div className="mt-1 px-1">
+          {showSearch && (
+            <div className="mb-1 px-1">
+              <input
+                type="text"
+                placeholder={`Search ${props.title.toLowerCase()}...`}
+                value={searchText}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setSearchText(e.target.value);
+                }}
+                className="w-full rounded border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-700 placeholder-gray-400 outline-none focus:border-indigo-300 focus:bg-white focus:ring-1 focus:ring-indigo-200"
+              />
+            </div>
+          )}
+
+          {displayedValues.map((facet: FacetValue) => {
+            return (
+              <TelemetryFacetValueRow
+                key={facet.value}
+                value={facet.value}
+                displayValue={props.valueDisplayMap?.[facet.value]}
+                count={facet.count}
+                maxCount={maxCount}
+                color={props.valueColorMap?.[facet.value]}
+                isActive={props.activeValues?.has(facet.value) || false}
+                onInclude={(value: string) => {
+                  props.onIncludeValue(props.facetKey, value);
+                }}
+                onExclude={(value: string) => {
+                  props.onExcludeValue(props.facetKey, value);
+                }}
+              />
+            );
+          })}
+
+          {displayedValues.length === 0 && (
+            <p className="px-1 py-2 text-[11px] text-gray-400">
+              {searchText.trim() ? "No matches found" : "No values found"}
+            </p>
+          )}
+
+          {hasMore && (
+            <button
+              type="button"
+              className="mt-1 px-1 text-[11px] font-medium text-indigo-500 hover:text-indigo-600"
+              onClick={() => {
+                setShowAll(!showAll);
+              }}
+            >
+              {showAll
+                ? "Show less"
+                : `+${props.values.length - visibleCount} more`}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TelemetryFacetSection;

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

@@ -0,0 +1,85 @@
+import React, { FunctionComponent, ReactElement, useMemo } from "react";
+import { FacetData, FacetValue, ActiveFilter, FacetConfig } from "../types";
+import TelemetryFacetSection from "./TelemetryFacetSection";
+import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+
+export interface TelemetryFacetSidebarProps {
+  facetData: FacetData;
+  isLoading: boolean;
+  // Declarative facet config — ordering, titles, colors, display maps.
+  facetConfigs: Array<FacetConfig>;
+  onIncludeFilter: (facetKey: string, value: string) => void;
+  onExcludeFilter: (facetKey: string, value: string) => void;
+  activeFilters?: Array<ActiveFilter> | undefined;
+  headerLabel?: string | undefined;
+}
+
+const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
+  props: TelemetryFacetSidebarProps,
+): ReactElement => {
+  const orderedConfigs: Array<FacetConfig> = useMemo(() => {
+    const copy: Array<FacetConfig> = [...props.facetConfigs];
+    copy.sort((a: FacetConfig, b: FacetConfig): number => {
+      const aPriority: number = a.priority ?? 100;
+      const bPriority: number = b.priority ?? 100;
+      if (aPriority !== bPriority) {
+        return aPriority - bPriority;
+      }
+      return a.title.localeCompare(b.title);
+    });
+    return copy;
+  }, [props.facetConfigs]);
+
+  const activeValuesByKey: Record<string, Set<string>> = useMemo(() => {
+    const map: Record<string, Set<string>> = {};
+
+    if (props.activeFilters) {
+      for (const filter of props.activeFilters) {
+        if (!map[filter.facetKey]) {
+          map[filter.facetKey] = new Set<string>();
+        }
+        map[filter.facetKey]!.add(filter.value);
+      }
+    }
+
+    return map;
+  }, [props.activeFilters]);
+
+  return (
+    <div className="flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white">
+      <div className="border-b border-gray-100 px-3 py-2.5">
+        <h3 className="text-[11px] font-semibold uppercase tracking-widest text-gray-400">
+          {props.headerLabel || "Filters"}
+        </h3>
+      </div>
+
+      {props.isLoading && Object.keys(props.facetData).length === 0 && (
+        <div className="flex flex-1 items-center justify-center py-8">
+          <ComponentLoader />
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto">
+        {orderedConfigs.map((config: FacetConfig) => {
+          const values: Array<FacetValue> = props.facetData[config.key] || [];
+
+          return (
+            <TelemetryFacetSection
+              key={config.key}
+              facetKey={config.key}
+              title={config.title}
+              values={values}
+              onIncludeValue={props.onIncludeFilter}
+              onExcludeValue={props.onExcludeFilter}
+              valueDisplayMap={config.valueDisplayMap}
+              valueColorMap={config.valueColorMap}
+              activeValues={activeValuesByKey[config.key]}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TelemetryFacetSidebar;

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

@@ -0,0 +1,102 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface TelemetryFacetValueRowProps {
+  value: string;
+  displayValue?: string | undefined;
+  count: number;
+  maxCount: number;
+  color?: string | undefined;
+  isActive?: boolean | undefined;
+  onInclude: (value: string) => void;
+  onExclude: (value: string) => void;
+}
+
+const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
+  props: TelemetryFacetValueRowProps,
+): ReactElement => {
+  const barWidth: number =
+    props.maxCount > 0
+      ? Math.max(4, Math.round((props.count / props.maxCount) * 100))
+      : 0;
+
+  const displayLabel: string = props.displayValue || props.value || "(empty)";
+  const isActive: boolean = props.isActive || false;
+
+  return (
+    <div className="group flex items-center gap-2 py-0.5">
+      <button
+        type="button"
+        className={`flex min-w-0 flex-1 items-center gap-2 rounded px-1.5 py-0.5 text-left transition-colors ${
+          isActive ? "bg-indigo-50 ring-1 ring-indigo-200" : "hover:bg-gray-50"
+        }`}
+        onClick={() => {
+          props.onInclude(props.value);
+        }}
+        title={
+          isActive
+            ? `Remove filter: ${displayLabel}`
+            : `Filter to ${displayLabel}`
+        }
+      >
+        {isActive ? (
+          <span className="flex h-3.5 w-3.5 flex-none items-center justify-center rounded bg-indigo-500">
+            <Icon icon={IconProp.Check} className="h-2.5 w-2.5 text-white" />
+          </span>
+        ) : props.color ? (
+          <span
+            className="h-2.5 w-2.5 flex-none rounded-full"
+            style={{ backgroundColor: props.color }}
+          />
+        ) : (
+          <span className="h-2.5 w-2.5 flex-none rounded-full bg-gray-300" />
+        )}
+        <span
+          className={`min-w-0 truncate text-[12px] ${
+            isActive ? "font-medium text-indigo-700" : "text-gray-700"
+          }`}
+        >
+          {displayLabel}
+        </span>
+      </button>
+
+      <div className="flex items-center gap-1.5">
+        <div className="w-12">
+          <div className="h-1.5 w-full rounded-full bg-gray-100">
+            <div
+              className={`h-1.5 rounded-full transition-all ${isActive ? "opacity-100" : "opacity-70"}`}
+              style={{
+                width: `${barWidth}%`,
+                backgroundColor: isActive
+                  ? "#6366f1"
+                  : props.color || "#9ca3af",
+              }}
+            />
+          </div>
+        </div>
+        <span
+          className={`min-w-[2rem] text-right font-mono text-[10px] tabular-nums ${
+            isActive ? "font-medium text-indigo-600" : "text-gray-400"
+          }`}
+        >
+          {props.count.toLocaleString()}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        className="hidden h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:flex"
+        onClick={(e: React.MouseEvent) => {
+          e.stopPropagation();
+          props.onExclude(props.value);
+        }}
+        title={`Exclude ${displayLabel}`}
+      >
+        -
+      </button>
+    </div>
+  );
+};
+
+export default TelemetryFacetValueRow;