@oneuptime/common 10.0.54 → 10.0.56

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryActiveFilterChips.js

@@ -0,0 +1,39 @@
+import React from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+const TelemetryActiveFilterChips = (props) => {
+    if (props.filters.length === 0) {
+        return null;
+    }
+    const readOnlyFilters = props.filters.filter((f) => {
+        return f.readOnly;
+    });
+    const removableFilters = props.filters.filter((f) => {
+        return !f.readOnly;
+    });
+    return (React.createElement("div", { className: "flex flex-wrap items-center gap-1.5 px-0.5" },
+        readOnlyFilters.map((filter) => {
+            const chipKey = `readonly:${filter.facetKey}:${filter.value}`;
+            return (React.createElement("span", { key: chipKey, className: "inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700", title: `${filter.displayKey}: ${filter.displayValue} (applied filter)` },
+                React.createElement(Icon, { icon: IconProp.Lock, className: "h-2.5 w-2.5 text-gray-400" }),
+                React.createElement("span", { className: "font-medium text-gray-500" },
+                    filter.displayKey,
+                    ":"),
+                React.createElement("span", null, filter.displayValue)));
+        }),
+        removableFilters.map((filter) => {
+            const chipKey = `${filter.facetKey}:${filter.value}`;
+            return (React.createElement("span", { key: chipKey, className: "inline-flex items-center gap-1 rounded-md border border-indigo-200 bg-indigo-50 py-0.5 pl-2 pr-1 text-xs text-indigo-700" },
+                React.createElement("span", { className: "font-medium text-indigo-500" },
+                    filter.displayKey,
+                    ":"),
+                React.createElement("span", null, filter.displayValue),
+                React.createElement("button", { type: "button", className: "ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded text-indigo-400 transition-colors hover:bg-indigo-100 hover:text-indigo-600", onClick: () => {
+                        props.onRemove(filter.facetKey, filter.value);
+                    }, title: `Remove ${filter.displayKey}: ${filter.displayValue}` },
+                    React.createElement(Icon, { icon: IconProp.Close, className: "h-2.5 w-2.5" }))));
+        }),
+        removableFilters.length > 1 && (React.createElement("button", { type: "button", className: "rounded px-1.5 py-0.5 text-[11px] font-medium text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600", onClick: props.onClearAll }, "Clear all"))));
+};
+export default TelemetryActiveFilterChips;
+//# sourceMappingURL=TelemetryActiveFilterChips.js.map

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryActiveFilterChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryActiveFilterChips.js","sourceRoot":"","sources":["../../../../../../UI/Components/TelemetryViewer/components/TelemetryActiveFilterChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAQvD,MAAM,0BAA0B,GAE5B,CAAC,KAAsC,EAAuB,EAAE;IAClE,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,eAAe,GAAwB,KAAK,CAAC,OAAO,CAAC,MAAM,CAC/D,CAAC,CAAe,EAAE,EAAE;QAClB,OAAO,CAAC,CAAC,QAAQ,CAAC;IACpB,CAAC,CACF,CAAC;IACF,MAAM,gBAAgB,GAAwB,KAAK,CAAC,OAAO,CAAC,MAAM,CAChE,CAAC,CAAe,EAAE,EAAE;QAClB,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrB,CAAC,CACF,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,4CAA4C;QACxD,eAAe,CAAC,GAAG,CAAC,CAAC,MAAoB,EAAE,EAAE;YAC5C,MAAM,OAAO,GAAW,YAAY,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YACtE,OAAO,CACL,8BACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,qHAAqH,EAC/H,KAAK,EAAE,GAAG,MAAM,CAAC,UAAU,KAAK,MAAM,CAAC,YAAY,mBAAmB;gBAEtE,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAC,2BAA2B,GAAG;gBACnE,8BAAM,SAAS,EAAC,2BAA2B;oBACxC,MAAM,CAAC,UAAU;wBACb;gBACP,kCAAO,MAAM,CAAC,YAAY,CAAQ,CAC7B,CACR,CAAC;QACJ,CAAC,CAAC;QACD,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAoB,EAAE,EAAE;YAC7C,MAAM,OAAO,GAAW,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YAC7D,OAAO,CACL,8BACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0HAA0H;gBAEpI,8BAAM,SAAS,EAAC,6BAA6B;oBAC1C,MAAM,CAAC,UAAU;wBACb;gBACP,kCAAO,MAAM,CAAC,YAAY,CAAQ;gBAClC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,4IAA4I,EACtJ,OAAO,EAAE,GAAG,EAAE;wBACZ,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;oBAChD,CAAC,EACD,KAAK,EAAE,UAAU,MAAM,CAAC,UAAU,KAAK,MAAM,CAAC,YAAY,EAAE;oBAE5D,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAC,aAAa,GAAG,CAC/C,CACJ,CACR,CAAC;QACJ,CAAC,CAAC;QACD,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qHAAqH,EAC/H,OAAO,EAAE,KAAK,CAAC,UAAU,gBAGlB,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryDetailPanel.js

@@ -0,0 +1,61 @@
+import React, { useEffect, } from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+const TelemetryDetailPanel = (props) => {
+    // Close on Escape
+    useEffect(() => {
+        if (!props.isOpen) {
+            return;
+        }
+        const handler = (e) => {
+            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 = props.variant || "floating";
+    const widthClassName = props.widthClassName || "w-[38rem]";
+    const activeTab = props.tabs.find((t) => {
+        return t.id === props.activeTabId;
+    });
+    const body = (React.createElement("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"}` },
+        React.createElement("div", { className: "flex items-start justify-between gap-3 border-b border-gray-100 px-4 py-3" },
+            React.createElement("div", { className: "min-w-0 flex-1" },
+                React.createElement("div", { className: "truncate text-sm font-semibold text-gray-900" }, props.title),
+                props.subtitle && (React.createElement("div", { className: "mt-0.5 truncate text-xs text-gray-500" }, props.subtitle))),
+            React.createElement("div", { className: "flex items-center gap-1" },
+                props.headerActions,
+                React.createElement("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)" },
+                    React.createElement(Icon, { icon: IconProp.Close, className: "h-4 w-4" })))),
+        props.tabs.length > 1 && (React.createElement("div", { className: "flex items-center gap-1 border-b border-gray-100 px-2 pt-1.5" }, props.tabs.map((tab) => {
+            const isActive = tab.id === props.activeTabId;
+            return (React.createElement("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 && (React.createElement("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)),
+                isActive && (React.createElement("span", { className: "absolute inset-x-2 bottom-0 h-0.5 rounded-t bg-indigo-500" }))));
+        }))),
+        React.createElement("div", { className: "flex-1 overflow-y-auto" }, activeTab === null || activeTab === void 0 ? void 0 : activeTab.content)));
+    if (variant === "floating") {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "fixed inset-0 z-30", onClick: props.onClose, "aria-hidden": "true" }),
+            body));
+    }
+    return body;
+};
+export default TelemetryDetailPanel;
+//# sourceMappingURL=TelemetryDetailPanel.js.map

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryDetailPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryDetailPanel.js","sourceRoot":"","sources":["../../../../../../UI/Components/TelemetryViewer/components/TelemetryDetailPanel.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryFacetSection.js

@@ -0,0 +1,66 @@
+import React, { useState, useMemo, } from "react";
+import TelemetryFacetValueRow from "./TelemetryFacetValueRow";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+const DEFAULT_VISIBLE_COUNT = 5;
+const SEARCH_THRESHOLD = 6;
+const TelemetryFacetSection = (props) => {
+    var _a;
+    const [isExpanded, setIsExpanded] = useState(props.defaultExpanded !== false);
+    const [showAll, setShowAll] = useState(false);
+    const [searchText, setSearchText] = useState("");
+    const showSearch = props.values.length >= SEARCH_THRESHOLD;
+    const filteredValues = useMemo(() => {
+        if (!searchText.trim()) {
+            return props.values;
+        }
+        const query = searchText.toLowerCase().trim();
+        return props.values.filter((facet) => {
+            var _a, _b;
+            const displayName = (_b = (_a = props.valueDisplayMap) === null || _a === void 0 ? void 0 : _a[facet.value]) !== null && _b !== void 0 ? _b : facet.value;
+            return displayName.toLowerCase().includes(query);
+        });
+    }, [props.values, props.valueDisplayMap, searchText]);
+    const visibleCount = (_a = props.initialVisibleCount) !== null && _a !== void 0 ? _a : DEFAULT_VISIBLE_COUNT;
+    const displayedValues = searchText.trim()
+        ? filteredValues
+        : showAll
+            ? filteredValues
+            : filteredValues.slice(0, visibleCount);
+    const hasMore = !searchText.trim() && filteredValues.length > visibleCount;
+    const maxCount = props.values.length > 0
+        ? Math.max(...props.values.map((v) => {
+            return v.count;
+        }))
+        : 0;
+    const activeCount = props.activeValues ? props.activeValues.size : 0;
+    return (React.createElement("div", { className: "border-b border-gray-100 py-2" },
+        React.createElement("button", { type: "button", className: "flex w-full items-center justify-between px-2 py-1 text-left", onClick: () => {
+                setIsExpanded(!isExpanded);
+            } },
+            React.createElement("div", { className: "flex items-center gap-1.5" },
+                React.createElement("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-gray-500" }, props.title),
+                activeCount > 0 && (React.createElement("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))),
+            React.createElement(Icon, { icon: isExpanded ? IconProp.ChevronDown : IconProp.ChevronRight, className: "h-3 w-3 text-gray-400" })),
+        isExpanded && (React.createElement("div", { className: "mt-1 px-1" },
+            showSearch && (React.createElement("div", { className: "mb-1 px-1" },
+                React.createElement("input", { type: "text", placeholder: `Search ${props.title.toLowerCase()}...`, value: searchText, onChange: (e) => {
+                        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" }))),
+            displayedValues.map((facet) => {
+                var _a, _b, _c;
+                return (React.createElement(TelemetryFacetValueRow, { key: facet.value, value: facet.value, displayValue: (_a = props.valueDisplayMap) === null || _a === void 0 ? void 0 : _a[facet.value], count: facet.count, maxCount: maxCount, color: (_b = props.valueColorMap) === null || _b === void 0 ? void 0 : _b[facet.value], isActive: ((_c = props.activeValues) === null || _c === void 0 ? void 0 : _c.has(facet.value)) || false, onInclude: (value) => {
+                        props.onIncludeValue(props.facetKey, value);
+                    }, onExclude: (value) => {
+                        props.onExcludeValue(props.facetKey, value);
+                    } }));
+            }),
+            displayedValues.length === 0 && (React.createElement("p", { className: "px-1 py-2 text-[11px] text-gray-400" }, searchText.trim() ? "No matches found" : "No values found")),
+            hasMore && (React.createElement("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`))))));
+};
+export default TelemetryFacetSection;
+//# sourceMappingURL=TelemetryFacetSection.js.map

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryFacetSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryFacetSection.js","sourceRoot":"","sources":["../../../../../../UI/Components/TelemetryViewer/components/TelemetryFacetSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,QAAQ,EACR,OAAO,GACR,MAAM,OAAO,CAAC;AAEf,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAevD,MAAM,qBAAqB,GAAW,CAAC,CAAC;AACxC,MAAM,gBAAgB,GAAW,CAAC,CAAC;AAEnC,MAAM,qBAAqB,GAAkD,CAC3E,KAAiC,EACnB,EAAE;;IAChB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,KAAK,CAAC,eAAe,KAAK,KAAK,CAChC,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACvD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAY,KAAK,CAAC,MAAM,CAAC,MAAM,IAAI,gBAAgB,CAAC;IAEpE,MAAM,cAAc,GAAsB,OAAO,CAAC,GAAG,EAAE;QACrD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,MAAM,CAAC;QACtB,CAAC;QACD,MAAM,KAAK,GAAW,UAAU,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;QACtD,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAiB,EAAE,EAAE;;YAC/C,MAAM,WAAW,GACf,MAAA,MAAA,KAAK,CAAC,eAAe,0CAAG,KAAK,CAAC,KAAK,CAAC,mCAAI,KAAK,CAAC,KAAK,CAAC;YACtD,OAAO,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtD,MAAM,YAAY,GAChB,MAAA,KAAK,CAAC,mBAAmB,mCAAI,qBAAqB,CAAC;IAErD,MAAM,eAAe,GAAsB,UAAU,CAAC,IAAI,EAAE;QAC1D,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IAE5C,MAAM,OAAO,GACX,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,cAAc,CAAC,MAAM,GAAG,YAAY,CAAC;IAE7D,MAAM,QAAQ,GACZ,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;QACrB,CAAC,CAAC,IAAI,CAAC,GAAG,CACN,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACpC,OAAO,CAAC,CAAC,KAAK,CAAC;QACjB,CAAC,CAAC,CACH;QACH,CAAC,CAAC,CAAC,CAAC;IAER,MAAM,WAAW,GAAW,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7E,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8DAA8D,EACxE,OAAO,EAAE,GAAG,EAAE;gBACZ,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;YAC7B,CAAC;YAED,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,8BAAM,SAAS,EAAC,kEAAkE,IAC/E,KAAK,CAAC,KAAK,CACP;gBACN,WAAW,GAAG,CAAC,IAAI,CAClB,8BAAM,SAAS,EAAC,oIAAoI,IACjJ,WAAW,CACP,CACR,CACG;YACN,oBAAC,IAAI,IACH,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,YAAY,EAC/D,SAAS,EAAC,uBAAuB,GACjC,CACK;QAER,UAAU,IAAI,CACb,6BAAK,SAAS,EAAC,WAAW;YACvB,UAAU,IAAI,CACb,6BAAK,SAAS,EAAC,WAAW;gBACxB,+BACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,UAAU,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,EACrD,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE;wBACnD,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAChC,CAAC,EACD,SAAS,EAAC,kMAAkM,GAC5M,CACE,CACP;YAEA,eAAe,CAAC,GAAG,CAAC,CAAC,KAAiB,EAAE,EAAE;;gBACzC,OAAO,CACL,oBAAC,sBAAsB,IACrB,GAAG,EAAE,KAAK,CAAC,KAAK,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,YAAY,EAAE,MAAA,KAAK,CAAC,eAAe,0CAAG,KAAK,CAAC,KAAK,CAAC,EAClD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,MAAA,KAAK,CAAC,aAAa,0CAAG,KAAK,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,KAAI,KAAK,EACvD,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE;wBAC3B,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;oBAC9C,CAAC,EACD,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE;wBAC3B,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;oBAC9C,CAAC,GACD,CACH,CAAC;YACJ,CAAC,CAAC;YAED,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAC/B,2BAAG,SAAS,EAAC,qCAAqC,IAC/C,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CACzD,CACL;YAEA,OAAO,IAAI,CACV,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,GAAG,EAAE;oBACZ,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;gBACvB,CAAC,IAEA,OAAO;gBACN,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,OAAO,CAC1C,CACV,CACG,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.js

@@ -0,0 +1,41 @@
+import React, { useMemo } from "react";
+import TelemetryFacetSection from "./TelemetryFacetSection";
+import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+const TelemetryFacetSidebar = (props) => {
+    const orderedConfigs = useMemo(() => {
+        const copy = [...props.facetConfigs];
+        copy.sort((a, b) => {
+            var _a, _b;
+            const aPriority = (_a = a.priority) !== null && _a !== void 0 ? _a : 100;
+            const bPriority = (_b = b.priority) !== null && _b !== void 0 ? _b : 100;
+            if (aPriority !== bPriority) {
+                return aPriority - bPriority;
+            }
+            return a.title.localeCompare(b.title);
+        });
+        return copy;
+    }, [props.facetConfigs]);
+    const activeValuesByKey = useMemo(() => {
+        const map = {};
+        if (props.activeFilters) {
+            for (const filter of props.activeFilters) {
+                if (!map[filter.facetKey]) {
+                    map[filter.facetKey] = new Set();
+                }
+                map[filter.facetKey].add(filter.value);
+            }
+        }
+        return map;
+    }, [props.activeFilters]);
+    return (React.createElement("div", { className: "flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white" },
+        React.createElement("div", { className: "border-b border-gray-100 px-3 py-2.5" },
+            React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-widest text-gray-400" }, props.headerLabel || "Filters")),
+        props.isLoading && Object.keys(props.facetData).length === 0 && (React.createElement("div", { className: "flex flex-1 items-center justify-center py-8" },
+            React.createElement(ComponentLoader, null))),
+        React.createElement("div", { className: "flex-1 overflow-y-auto" }, orderedConfigs.map((config) => {
+            const values = props.facetData[config.key] || [];
+            return (React.createElement(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] }));
+        }))));
+};
+export default TelemetryFacetSidebar;
+//# sourceMappingURL=TelemetryFacetSidebar.js.map

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryFacetSidebar.js","sourceRoot":"","sources":["../../../../../../UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmC,OAAO,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,eAAe,MAAM,uCAAuC,CAAC;AAapE,MAAM,qBAAqB,GAAkD,CAC3E,KAAiC,EACnB,EAAE;IAChB,MAAM,cAAc,GAAuB,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,IAAI,GAAuB,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAc,EAAE,CAAc,EAAU,EAAE;;YACnD,MAAM,SAAS,GAAW,MAAA,CAAC,CAAC,QAAQ,mCAAI,GAAG,CAAC;YAC5C,MAAM,SAAS,GAAW,MAAA,CAAC,CAAC,QAAQ,mCAAI,GAAG,CAAC;YAC5C,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;gBAC5B,OAAO,SAAS,GAAG,SAAS,CAAC;YAC/B,CAAC;YACD,OAAO,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,iBAAiB,GAAgC,OAAO,CAAC,GAAG,EAAE;QAClE,MAAM,GAAG,GAAgC,EAAE,CAAC;QAE5C,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;YACxB,KAAK,MAAM,MAAM,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;gBACzC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC1B,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,EAAU,CAAC;gBAC3C,CAAC;gBACD,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAE,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC1C,CAAC;QACH,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,6BAAK,SAAS,EAAC,gGAAgG;QAC7G,6BAAK,SAAS,EAAC,sCAAsC;YACnD,4BAAI,SAAS,EAAC,mEAAmE,IAC9E,KAAK,CAAC,WAAW,IAAI,SAAS,CAC5B,CACD;QAEL,KAAK,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAC/D,6BAAK,SAAS,EAAC,8CAA8C;YAC3D,oBAAC,eAAe,OAAG,CACf,CACP;QAED,6BAAK,SAAS,EAAC,wBAAwB,IACpC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAmB,EAAE,EAAE;YAC1C,MAAM,MAAM,GAAsB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;YAEpE,OAAO,CACL,oBAAC,qBAAqB,IACpB,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,QAAQ,EAAE,MAAM,CAAC,GAAG,EACpB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,KAAK,CAAC,eAAe,EACrC,cAAc,EAAE,KAAK,CAAC,eAAe,EACrC,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,YAAY,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,GAC3C,CACH,CAAC;QACJ,CAAC,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryFacetValueRow.js

@@ -0,0 +1,35 @@
+import React from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+const TelemetryFacetValueRow = (props) => {
+    const barWidth = props.maxCount > 0
+        ? Math.max(4, Math.round((props.count / props.maxCount) * 100))
+        : 0;
+    const displayLabel = props.displayValue || props.value || "(empty)";
+    const isActive = props.isActive || false;
+    return (React.createElement("div", { className: "group flex items-center gap-2 py-0.5" },
+        React.createElement("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 ? (React.createElement("span", { className: "flex h-3.5 w-3.5 flex-none items-center justify-center rounded bg-indigo-500" },
+                React.createElement(Icon, { icon: IconProp.Check, className: "h-2.5 w-2.5 text-white" }))) : props.color ? (React.createElement("span", { className: "h-2.5 w-2.5 flex-none rounded-full", style: { backgroundColor: props.color } })) : (React.createElement("span", { className: "h-2.5 w-2.5 flex-none rounded-full bg-gray-300" })),
+            React.createElement("span", { className: `min-w-0 truncate text-[12px] ${isActive ? "font-medium text-indigo-700" : "text-gray-700"}` }, displayLabel)),
+        React.createElement("div", { className: "flex items-center gap-1.5" },
+            React.createElement("div", { className: "w-12" },
+                React.createElement("div", { className: "h-1.5 w-full rounded-full bg-gray-100" },
+                    React.createElement("div", { className: `h-1.5 rounded-full transition-all ${isActive ? "opacity-100" : "opacity-70"}`, style: {
+                            width: `${barWidth}%`,
+                            backgroundColor: isActive
+                                ? "#6366f1"
+                                : props.color || "#9ca3af",
+                        } }))),
+            React.createElement("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())),
+        React.createElement("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) => {
+                e.stopPropagation();
+                props.onExclude(props.value);
+            }, title: `Exclude ${displayLabel}` }, "-")));
+};
+export default TelemetryFacetValueRow;
+//# sourceMappingURL=TelemetryFacetValueRow.js.map

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryFacetValueRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryFacetValueRow.js","sourceRoot":"","sources":["../../../../../../UI/Components/TelemetryViewer/components/TelemetryFacetValueRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAavD,MAAM,sBAAsB,GAAmD,CAC7E,KAAkC,EACpB,EAAE;IAChB,MAAM,QAAQ,GACZ,KAAK,CAAC,QAAQ,GAAG,CAAC;QAChB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC,CAAC;IAER,MAAM,YAAY,GAAW,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC;IAC5E,MAAM,QAAQ,GAAY,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;IAElD,OAAO,CACL,6BAAK,SAAS,EAAC,sCAAsC;QACnD,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,4FACT,QAAQ,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,kBACrD,EAAE,EACF,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC/B,CAAC,EACD,KAAK,EACH,QAAQ;gBACN,CAAC,CAAC,kBAAkB,YAAY,EAAE;gBAClC,CAAC,CAAC,aAAa,YAAY,EAAE;YAGhC,QAAQ,CAAC,CAAC,CAAC,CACV,8BAAM,SAAS,EAAC,8EAA8E;gBAC5F,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAC,wBAAwB,GAAG,CAC5D,CACR,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAChB,8BACE,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,KAAK,EAAE,GACvC,CACH,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAC,gDAAgD,GAAG,CACpE;YACD,8BACE,SAAS,EAAE,gCACT,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,eAC7C,EAAE,IAED,YAAY,CACR,CACA;QAET,6BAAK,SAAS,EAAC,2BAA2B;YACxC,6BAAK,SAAS,EAAC,MAAM;gBACnB,6BAAK,SAAS,EAAC,uCAAuC;oBACpD,6BACE,SAAS,EAAE,qCAAqC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAAE,EACzF,KAAK,EAAE;4BACL,KAAK,EAAE,GAAG,QAAQ,GAAG;4BACrB,eAAe,EAAE,QAAQ;gCACvB,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS;yBAC7B,GACD,CACE,CACF;YACN,8BACE,SAAS,EAAE,8DACT,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,eAC7C,EAAE,IAED,KAAK,CAAC,KAAK,CAAC,cAAc,EAAE,CACxB,CACH;QAEN,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oJAAoJ,EAC9J,OAAO,EAAE,CAAC,CAAmB,EAAE,EAAE;gBAC/B,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC/B,CAAC,EACD,KAAK,EAAE,WAAW,YAAY,EAAE,QAGzB,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryHistogram.js

@@ -0,0 +1,132 @@
+import React, { useMemo, useCallback, useRef, useState, } from "react";
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceArea, } from "recharts";
+import TelemetryHistogramTooltip from "./TelemetryHistogramTooltip";
+import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+import OneUptimeDate from "../../../../Types/Date";
+function pivotBuckets(buckets) {
+    const map = new Map();
+    for (const bucket of buckets) {
+        let row = map.get(bucket.time);
+        if (!row) {
+            row = { time: bucket.time };
+            map.set(bucket.time, row);
+        }
+        row[bucket.series] = (row[bucket.series] || 0) + bucket.count;
+    }
+    return Array.from(map.values());
+}
+function formatTickTime(time) {
+    const date = OneUptimeDate.fromString(time);
+    if (isNaN(date.getTime())) {
+        return time;
+    }
+    return date.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+    });
+}
+function formatYAxisTick(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}K`;
+    }
+    return value.toString();
+}
+const TelemetryHistogram = (props) => {
+    const [selectionStart, setSelectionStart] = useState(null);
+    const [selectionEnd, setSelectionEnd] = useState(null);
+    const isSelecting = useRef(false);
+    const pivotedData = useMemo(() => {
+        return pivotBuckets(props.buckets);
+    }, [props.buckets]);
+    const seriesByKey = useMemo(() => {
+        const map = {};
+        for (const option of props.series) {
+            map[option.key] = option;
+        }
+        return map;
+    }, [props.series]);
+    const activeSeries = useMemo(() => {
+        const present = new Set();
+        for (const bucket of props.buckets) {
+            present.add(bucket.series);
+        }
+        return props.series.filter((option) => {
+            return present.has(option.key);
+        });
+    }, [props.buckets, props.series]);
+    const handleMouseDown = useCallback((e) => {
+        if (!props.onTimeRangeSelect || !(e === null || e === void 0 ? void 0 : e.activeLabel)) {
+            return;
+        }
+        isSelecting.current = true;
+        setSelectionStart(e.activeLabel);
+        setSelectionEnd(null);
+    }, [props.onTimeRangeSelect]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isSelecting.current || !(e === null || e === void 0 ? void 0 : e.activeLabel)) {
+            return;
+        }
+        setSelectionEnd(e.activeLabel);
+    }, []);
+    const handleMouseUp = useCallback(() => {
+        if (!isSelecting.current ||
+            !selectionStart ||
+            !selectionEnd ||
+            !props.onTimeRangeSelect) {
+            isSelecting.current = false;
+            setSelectionStart(null);
+            setSelectionEnd(null);
+            return;
+        }
+        isSelecting.current = false;
+        const start = OneUptimeDate.fromString(selectionStart);
+        const end = OneUptimeDate.fromString(selectionEnd);
+        if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            setSelectionStart(null);
+            setSelectionEnd(null);
+            return;
+        }
+        const earlierDate = start < end ? start : end;
+        const laterDate = start < end ? end : start;
+        props.onTimeRangeSelect(earlierDate, laterDate);
+        setSelectionStart(null);
+        setSelectionEnd(null);
+    }, [selectionStart, selectionEnd, props.onTimeRangeSelect]);
+    if (props.isLoading && pivotedData.length === 0) {
+        return (React.createElement("div", { className: "flex h-32 items-center justify-center rounded-lg border border-gray-200 bg-white" },
+            React.createElement(ComponentLoader, null)));
+    }
+    if (pivotedData.length === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement("div", { className: "rounded-lg border border-gray-200 bg-white" },
+        React.createElement("div", { className: "flex items-center justify-between border-b border-gray-100 px-4 py-2" },
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement("span", { className: "text-xs font-medium text-gray-500" }, props.title || "Volume"),
+                props.onTimeRangeSelect && (React.createElement("span", { className: "text-[10px] text-gray-300" }, "Drag to zoom"))),
+            React.createElement("div", { className: "flex items-center gap-3" }, activeSeries.map((option) => {
+                return (React.createElement("div", { key: option.key, className: "flex items-center gap-1.5" },
+                    React.createElement("span", { className: "inline-block h-2.5 w-2.5 rounded-sm", style: { backgroundColor: option.color } }),
+                    React.createElement("span", { className: "text-[11px] text-gray-500" }, option.label)));
+            }))),
+        React.createElement("div", { className: "px-2 pb-1 pt-2", style: {
+                height: 120,
+                cursor: props.onTimeRangeSelect ? "crosshair" : "default",
+            } },
+            React.createElement(ResponsiveContainer, { width: "100%", height: "100%" },
+                React.createElement(BarChart, { data: pivotedData, margin: { top: 4, right: 8, bottom: 0, left: -4 }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, barCategoryGap: "15%", barGap: 0 },
+                    React.createElement(XAxis, { dataKey: "time", tickFormatter: formatTickTime, tick: { fontSize: 10, fill: "#9ca3af" }, axisLine: { stroke: "#e5e7eb" }, tickLine: false, minTickGap: 40, dy: 4, interval: "preserveStartEnd" }),
+                    React.createElement(YAxis, { tick: { fontSize: 10, fill: "#9ca3af" }, axisLine: false, tickLine: false, width: 48, allowDecimals: false, tickFormatter: formatYAxisTick }),
+                    React.createElement(Tooltip, { content: React.createElement(TelemetryHistogramTooltip, { seriesByKey: seriesByKey }), cursor: { fill: "rgba(99,102,241,0.06)" } }),
+                    activeSeries.map((option, index) => {
+                        const isLast = index === activeSeries.length - 1;
+                        return (React.createElement(Bar, { key: option.key, dataKey: option.key, stackId: "series", fill: option.color, radius: isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0], isAnimationActive: false, maxBarSize: 24 }));
+                    }),
+                    selectionStart && selectionEnd && (React.createElement(ReferenceArea, { x1: selectionStart, x2: selectionEnd, fill: "rgba(99,102,241,0.12)", stroke: "rgba(99,102,241,0.5)", strokeWidth: 1, radius: 2 })))))));
+};
+export default TelemetryHistogram;
+//# sourceMappingURL=TelemetryHistogram.js.map

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryHistogram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryHistogram.js","sourceRoot":"","sources":["../../../../../../UI/Components/TelemetryViewer/components/TelemetryHistogram.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryHistogramTooltip.js

@@ -0,0 +1,65 @@
+import React from "react";
+import OneUptimeDate from "../../../../Types/Date";
+function formatTooltipTime(label) {
+    if (!label) {
+        return "";
+    }
+    const date = OneUptimeDate.fromString(label);
+    if (isNaN(date.getTime())) {
+        return label;
+    }
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const time = date.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    });
+    if (isToday) {
+        return time;
+    }
+    const dateStr = date.toLocaleDateString([], {
+        month: "short",
+        day: "numeric",
+    });
+    return `${dateStr}, ${time}`;
+}
+const TelemetryHistogramTooltip = (props) => {
+    if (!props.active || !props.payload || props.payload.length === 0) {
+        return null;
+    }
+    const entries = props.payload
+        .filter((entry) => {
+        return entry.value > 0;
+    })
+        .map((entry) => {
+        return {
+            series: entry.dataKey,
+            count: entry.value,
+        };
+    });
+    if (entries.length === 0) {
+        return null;
+    }
+    const total = entries.reduce((sum, e) => {
+        return sum + e.count;
+    }, 0);
+    return (React.createElement("div", { className: "rounded-md border border-gray-200 bg-white px-3 py-2 shadow-md" },
+        React.createElement("p", { className: "mb-1.5 border-b border-gray-100 pb-1.5 font-mono text-[11px] font-medium text-gray-500" }, formatTooltipTime(props.label)),
+        React.createElement("div", { className: "space-y-0.5" }, entries.map((entry) => {
+            const series = props.seriesByKey[entry.series];
+            const color = (series === null || series === void 0 ? void 0 : series.color) || "#cbd5e1";
+            const label = (series === null || series === void 0 ? void 0 : series.label) || entry.series;
+            return (React.createElement("div", { key: entry.series, className: "flex items-center justify-between gap-6 py-0.5" },
+                React.createElement("div", { className: "flex items-center gap-1.5" },
+                    React.createElement("span", { className: "inline-block h-2.5 w-2.5 rounded-sm", style: { backgroundColor: color } }),
+                    React.createElement("span", { className: "text-xs text-gray-600" }, label)),
+                React.createElement("span", { className: "font-mono text-xs font-semibold tabular-nums text-gray-800" }, entry.count.toLocaleString())));
+        })),
+        entries.length > 1 && (React.createElement("div", { className: "mt-1.5 flex items-center justify-between border-t border-gray-100 pt-1.5" },
+            React.createElement("span", { className: "text-xs text-gray-500" }, "Total"),
+            React.createElement("span", { className: "font-mono text-xs font-semibold tabular-nums text-gray-800" }, total.toLocaleString())))));
+};
+export default TelemetryHistogramTooltip;
+//# sourceMappingURL=TelemetryHistogramTooltip.js.map

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryHistogramTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryHistogramTooltip.js","sourceRoot":"","sources":["../../../../../../UI/Components/TelemetryViewer/components/TelemetryHistogramTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAmBnD,SAAS,iBAAiB,CAAC,KAAyB;IAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,IAAI,GAAS,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAEnD,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;QAC1B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,GAAG,GAAS,IAAI,IAAI,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAY,IAAI,CAAC,YAAY,EAAE,KAAK,GAAG,CAAC,YAAY,EAAE,CAAC;IAEpE,MAAM,IAAI,GAAW,IAAI,CAAC,kBAAkB,CAAC,EAAE,EAAE;QAC/C,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,KAAK;KACd,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,OAAO,GAAW,IAAI,CAAC,kBAAkB,CAAC,EAAE,EAAE;QAClD,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,SAAS;KACf,CAAC,CAAC;IAEH,OAAO,GAAG,OAAO,KAAK,IAAI,EAAE,CAAC;AAC/B,CAAC;AAED,MAAM,yBAAyB,GAE3B,CAAC,KAAqC,EAAuB,EAAE;IACjE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClE,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,OAAO,GAAwB,KAAK,CAAC,OAAO;SAC/C,MAAM,CAAC,CAAC,KAAwB,EAAW,EAAE;QAC5C,OAAO,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,KAAyC,EAAgB,EAAE;QAC/D,OAAO;YACL,MAAM,EAAE,KAAK,CAAC,OAAO;YACrB,KAAK,EAAE,KAAK,CAAC,KAAK;SACnB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,GAAW,OAAO,CAAC,MAAM,CAClC,CAAC,GAAW,EAAE,CAAe,EAAU,EAAE;QACvC,OAAO,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC;IACvB,CAAC,EACD,CAAC,CACF,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,gEAAgE;QAC7E,2BAAG,SAAS,EAAC,wFAAwF,IAClG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAC7B;QACJ,6BAAK,SAAS,EAAC,aAAa,IACzB,OAAO,CAAC,GAAG,CAAC,CAAC,KAAmB,EAAE,EAAE;YACnC,MAAM,MAAM,GACV,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAClC,MAAM,KAAK,GAAW,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,SAAS,CAAC;YACjD,MAAM,KAAK,GAAW,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,KAAK,CAAC,MAAM,CAAC;YACpD,OAAO,CACL,6BACE,GAAG,EAAE,KAAK,CAAC,MAAM,EACjB,SAAS,EAAC,gDAAgD;gBAE1D,6BAAK,SAAS,EAAC,2BAA2B;oBACxC,8BACE,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,GACjC;oBACF,8BAAM,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAQ,CAClD;gBACN,8BAAM,SAAS,EAAC,4DAA4D,IACzE,KAAK,CAAC,KAAK,CAAC,cAAc,EAAE,CACxB,CACH,CACP,CAAC;QACJ,CAAC,CAAC,CACE;QACL,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,6BAAK,SAAS,EAAC,0EAA0E;YACvF,8BAAM,SAAS,EAAC,uBAAuB,YAAa;YACpD,8BAAM,SAAS,EAAC,4DAA4D,IACzE,KAAK,CAAC,cAAc,EAAE,CAClB,CACH,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryPagination.js

@@ -0,0 +1,52 @@
+import React from "react";
+const TelemetryPagination = (props) => {
+    const totalPages = Math.max(1, Math.ceil(props.totalItems === 0
+        ? 1
+        : props.totalItems / Math.max(props.pageSize, 1)));
+    const safeCurrentPage = Math.min(props.currentPage, totalPages);
+    const firstItemIndex = props.totalItems === 0 ? 0 : (safeCurrentPage - 1) * props.pageSize + 1;
+    const lastItemIndex = props.totalItems === 0
+        ? 0
+        : Math.min(props.totalItems, safeCurrentPage * props.pageSize);
+    const disablePrev = props.isDisabled || props.totalItems === 0 || safeCurrentPage <= 1;
+    const disableNext = props.isDisabled || props.totalItems === 0 || safeCurrentPage >= totalPages;
+    return (React.createElement("div", { className: "flex flex-col gap-3 border-t border-gray-200 bg-gray-50/50 px-4 py-2.5 text-xs text-gray-500 md:flex-row md:items-center md:justify-between" },
+        React.createElement("div", null, props.totalItems === 0 ? (React.createElement("span", { className: "text-gray-500" },
+            "No ",
+            props.itemLabel || "results",
+            " to display.")) : (React.createElement("span", { className: "text-gray-500" },
+            "Showing ",
+            firstItemIndex.toLocaleString(),
+            "-",
+            lastItemIndex.toLocaleString(),
+            " of",
+            " ",
+            props.totalItems.toLocaleString()))),
+        React.createElement("div", { className: "flex flex-wrap items-center gap-3" },
+            React.createElement("label", { className: "flex items-center gap-2" },
+                React.createElement("span", { className: "text-[10px] uppercase tracking-wide text-gray-400" }, "Rows"),
+                React.createElement("select", { className: "rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-200", value: props.pageSize, onChange: (event) => {
+                        const size = Number(event.target.value) || props.pageSize;
+                        props.onPageSizeChange(size);
+                    }, disabled: props.isDisabled }, props.pageSizeOptions.map((option) => {
+                    return (React.createElement("option", { key: option, value: option }, option));
+                }))),
+            React.createElement("div", { className: "inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-0.5" },
+                React.createElement("button", { type: "button", className: "rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40", onClick: () => {
+                        if (!disablePrev) {
+                            props.onPageChange(Math.max(1, safeCurrentPage - 1));
+                        }
+                    }, disabled: disablePrev }, "Previous"),
+                React.createElement("span", { className: "px-3 text-[11px] text-gray-400" },
+                    "Page ",
+                    safeCurrentPage,
+                    " / ",
+                    totalPages),
+                React.createElement("button", { type: "button", className: "rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40", onClick: () => {
+                        if (!disableNext) {
+                            props.onPageChange(Math.min(totalPages, safeCurrentPage + 1));
+                        }
+                    }, disabled: disableNext }, "Next")))));
+};
+export default TelemetryPagination;
+//# sourceMappingURL=TelemetryPagination.js.map

package/build/dist/UI/Components/TelemetryViewer/components/TelemetryPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryPagination.js","sourceRoot":"","sources":["../../../../../../UI/Components/TelemetryViewer/components/TelemetryPagination.tsx"],"names":[],"mappings":"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"}