@oneuptime/common 10.0.54 → 10.0.56

package/UI/Components/Markdown.tsx/MarkdownEditor.tsx

@@ -1,7 +1,7 @@
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import TinyFormDocumentation from "../TinyFormDocumentation/TinyFormDocumentation";
-import DOMPurify from "dompurify";
+import MarkdownViewer from "./MarkdownViewer";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -290,138 +290,13 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
   }
 
   const renderPreview: () => ReactElement = (): ReactElement => {
-    // Enhanced markdown preview with proper code block handling
-    let htmlContent: string = text;
-
-    // Handle code blocks first (before inline code)
-    htmlContent = htmlContent.replace(
-      /```([^`]*?)```/g,
-      (_match: string, code: string) => {
-        const escapedCode: string = code
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/"/g, "&quot;")
-          .replace(/'/g, "&#39;");
-        return `<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4"><code class="text-sm font-mono whitespace-pre">${escapedCode}</code></pre>`;
-      },
-    );
-
-    // Handle inline code (after code blocks to avoid conflicts)
-    htmlContent = htmlContent.replace(
-      /`([^`]+)`/g,
-      '<code class="bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono">$1</code>',
-    );
-
-    // Handle other markdown elements
-    htmlContent = htmlContent
-      .replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold">$1</strong>')
-      .replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')
-      .replace(/<u>(.*?)<\/u>/g, '<u class="underline">$1</u>')
-      .replace(/~~(.*?)~~/g, '<s class="line-through">$1</s>')
-      .replace(
-        /^# (.*$)/gm,
-        '<h1 class="text-3xl font-bold mb-4 mt-6 first:mt-0">$1</h1>',
-      )
-      .replace(
-        /^## (.*$)/gm,
-        '<h2 class="text-2xl font-bold mb-3 mt-5 first:mt-0">$1</h2>',
-      )
-      .replace(
-        /^### (.*$)/gm,
-        '<h3 class="text-xl font-bold mb-2 mt-4 first:mt-0">$1</h3>',
-      )
-      .replace(
-        /^#### (.*$)/gm,
-        '<h4 class="text-lg font-bold mb-2 mt-3 first:mt-0">$1</h4>',
-      )
-      .replace(
-        /^- \[ \] (.*$)/gm,
-        '<li class="ml-6 mb-1 flex items-center"><input type="checkbox" class="mr-2" disabled> $1</li>',
-      )
-      .replace(
-        /^- \[x\] (.*$)/gm,
-        '<li class="ml-6 mb-1 flex items-center"><input type="checkbox" class="mr-2" checked disabled> $1</li>',
-      )
-      .replace(
-        /^- (.*$)/gm,
-        '<li class="ml-6 mb-1 list-disc list-inside">$1</li>',
-      )
-      .replace(
-        /^\d+\. (.*$)/gm,
-        '<li class="ml-6 mb-1 list-decimal list-inside">$1</li>',
-      )
-      .replace(
-        /^> (.*$)/gm,
-        '<blockquote class="border-l-4 border-blue-400 pl-4 py-2 mb-4 bg-blue-50 italic text-gray-700">$1</blockquote>',
-      )
-      .replace(/^---$/gm, '<hr class="border-t-2 border-gray-300 my-6">')
-      .replace(
-        /!\[([^\]]*)\]\(([^)]+)\)/g,
-        '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg shadow-sm my-4">',
-      )
-      .replace(
-        /\[([^\]]+)\]\(([^)]+)\)/g,
-        '<a href="$2" class="text-blue-600 hover:text-blue-800 underline font-medium" target="_blank" rel="noopener noreferrer">$1</a>',
-      );
-
-    // Handle tables
-    htmlContent = htmlContent.replace(
-      /^\|(.+)\|\n\|(-+\|)+\n((?:\|.+\|\n?)*)/gm,
-      (
-        _match: string,
-        headerRow: string,
-        _separatorRow: string,
-        bodyRows: string,
-      ) => {
-        const headers: string = headerRow
-          .split("|")
-          .filter((cell: string) => {
-            return cell.trim();
-          })
-          .map((cell: string) => {
-            return `<th class="px-4 py-2 bg-gray-50 font-semibold text-left border-b border-gray-300">${cell.trim()}</th>`;
-          })
-          .join("");
-
-        const rows: string = bodyRows
-          .split("\n")
-          .filter((row: string) => {
-            return row.trim();
-          })
-          .map((row: string) => {
-            const cells: string = row
-              .split("|")
-              .filter((cell: string) => {
-                return cell.trim();
-              })
-              .map((cell: string) => {
-                return `<td class="px-4 py-2 border-b border-gray-200">${cell.trim()}</td>`;
-              })
-              .join("");
-            return `<tr>${cells}</tr>`;
-          })
-          .join("");
-
-        return `<table class="w-full border-collapse border border-gray-300 my-4 rounded-lg overflow-hidden"><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
-      },
-    );
-
-    // Handle line breaks (convert \n to <br> but avoid double breaks)
-    htmlContent = htmlContent
-      .replace(/\n\n/g, '</p><p class="mb-4">')
-      .replace(/\n/g, "<br>");
-
-    // Wrap in paragraphs if there's content
-    if (htmlContent.trim()) {
-      htmlContent = `<p class="mb-4">${htmlContent}</p>`;
-    }
-
-    const sanitizedContent: string = DOMPurify.sanitize(htmlContent);
-
+    /*
+     * Render the preview using the same MarkdownViewer that renders the
+     * final published output, so the preview is guaranteed to match.
+     */
     return (
-      <div className="p-4 min-h-32 bg-white prose prose-sm max-w-none">
-        <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+      <div className="p-4 min-h-32 bg-white">
+        <MarkdownViewer text={text} />
       </div>
     );
   };

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -22,7 +22,7 @@ import {
   UserPermission,
   UserTenantAccessPermission,
 } from "../../../Types/Permission";
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
   cardProps: CardProps;
@@ -40,6 +40,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   createOrUpdateApiUrl?: URL | undefined;
   documentationLink?: Route | URL | undefined;
   videoLink?: Route | URL | undefined;
+  onBeforeEdit?: (() => boolean) | undefined;
 }
 
 const CardModelDetail: <TBaseModel extends BaseModel>(
@@ -55,6 +56,12 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
   const [refresher, setRefresher] = useState<boolean>(false);
   const model: TBaseModel = new props.modelDetailProps.modelType();
 
+  const onBeforeEditRef: React.MutableRefObject<(() => boolean) | undefined> =
+    useRef<(() => boolean) | undefined>(props.onBeforeEdit);
+  useEffect(() => {
+    onBeforeEditRef.current = props.onBeforeEdit;
+  }, [props.onBeforeEdit]);
+
   useEffect(() => {
     setRefresher(!refresher);
   }, [props.refresher]);
@@ -112,6 +119,9 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
         title: props.editButtonText || `Edit ${model.singularName}`,
         buttonStyle: ButtonStyleType.NORMAL,
         onClick: () => {
+          if (onBeforeEditRef.current && onBeforeEditRef.current() === false) {
+            return;
+          }
           setShowModal(true);
         },
         icon: IconProp.Edit,

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -0,0 +1,285 @@
+import React, { ReactElement, ReactNode } from "react";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import {
+  FacetData,
+  FacetConfig,
+  ActiveFilter,
+  HistogramBucket,
+  HistogramSeriesOption,
+  LiveOptions,
+  SearchHelpRow,
+} from "./types";
+import TelemetryTimeRangePicker from "./components/TelemetryTimeRangePicker";
+import TelemetrySearchBar, {
+  TelemetrySearchBarRef,
+} from "./components/TelemetrySearchBar";
+import TelemetryFacetSidebar from "./components/TelemetryFacetSidebar";
+import TelemetryActiveFilterChips from "./components/TelemetryActiveFilterChips";
+import TelemetryHistogram from "./components/TelemetryHistogram";
+import TelemetryPagination from "./components/TelemetryPagination";
+import ComponentLoader from "../ComponentLoader/ComponentLoader";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+
+export interface TelemetryViewerProps<T> {
+  // -- Data --
+  items: Array<T>;
+  isLoading: boolean;
+  error?: string | undefined;
+  onRefresh?: (() => void) | undefined;
+  emptyMessage?: string | undefined;
+
+  // -- Layout --
+  /** Render one item row in the main list. */
+  renderRow: (item: T, index: number) => ReactElement;
+  /** Unique key accessor per row (used for React keys). */
+  getRowKey: (item: T, index: number) => string;
+
+  // -- Toolbar: search --
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  onSearchSubmit: () => void;
+  searchPlaceholder?: string | undefined;
+  searchSuggestions?: Array<string> | undefined;
+  searchValueSuggestions?: Record<string, Array<string>> | undefined;
+  searchFieldAliasMap?: Record<string, string> | undefined;
+  onSearchFieldValueSelect?:
+    | ((fieldKey: string, value: string) => void)
+    | undefined;
+  searchHelpRows?: Array<SearchHelpRow> | undefined;
+  searchHelpCombinedExample?: string | undefined;
+  searchBarRef?: React.Ref<TelemetrySearchBarRef> | undefined;
+
+  // -- Toolbar: time --
+  timeRange: RangeStartAndEndDateTime;
+  onTimeRangeChange: (value: RangeStartAndEndDateTime) => void;
+
+  // -- Toolbar: live + actions --
+  live?: LiveOptions | undefined;
+  toolbarLeadingActions?: ReactNode;
+  toolbarTrailingActions?: ReactNode;
+
+  // -- Sidebar facets --
+  showFacetSidebar?: boolean;
+  facetData?: FacetData | undefined;
+  facetConfigs?: Array<FacetConfig> | undefined;
+  facetLoading?: boolean;
+  onFacetInclude?: ((facetKey: string, value: string) => void) | undefined;
+  onFacetExclude?: ((facetKey: string, value: string) => void) | undefined;
+
+  // -- Active filters --
+  activeFilters?: Array<ActiveFilter> | undefined;
+  onRemoveFilter?: ((facetKey: string, value: string) => void) | undefined;
+  onClearAllFilters?: (() => void) | undefined;
+
+  // -- Histogram --
+  showHistogram?: boolean;
+  histogramBuckets?: Array<HistogramBucket> | undefined;
+  histogramSeries?: Array<HistogramSeriesOption> | undefined;
+  histogramTitle?: string | undefined;
+  histogramLoading?: boolean;
+  onHistogramTimeRangeSelect?:
+    | ((startTime: Date, endTime: Date) => void)
+    | undefined;
+
+  // -- Pagination --
+  page: number;
+  pageSize: number;
+  totalCount: number;
+  pageSizeOptions?: Array<number> | undefined;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  itemLabel?: string | undefined;
+
+  // -- Detail panel overlay (rendered by caller above everything) --
+  detailPanel?: ReactNode;
+}
+
+const DEFAULT_PAGE_SIZE_OPTIONS: Array<number> = [25, 50, 100, 200];
+
+function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
+  const showFacets: boolean =
+    (props.showFacetSidebar ?? true) &&
+    props.facetConfigs !== undefined &&
+    props.facetConfigs.length > 0;
+
+  const showHistogram: boolean = props.showHistogram ?? true;
+
+  return (
+    <div className="flex h-full w-full flex-col gap-3">
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <TelemetrySearchBar
+            ref={props.searchBarRef}
+            value={props.searchValue}
+            onChange={props.onSearchChange}
+            onSubmit={props.onSearchSubmit}
+            placeholder={props.searchPlaceholder}
+            suggestions={props.searchSuggestions}
+            valueSuggestions={props.searchValueSuggestions}
+            fieldAliasMap={props.searchFieldAliasMap}
+            onFieldValueSelect={props.onSearchFieldValueSelect}
+            helpRows={props.searchHelpRows}
+            helpCombinedExample={props.searchHelpCombinedExample}
+          />
+        </div>
+
+        {props.toolbarLeadingActions}
+
+        <TelemetryTimeRangePicker
+          value={props.timeRange}
+          onChange={props.onTimeRangeChange}
+        />
+
+        {props.live && (
+          <button
+            type="button"
+            className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
+              props.live.isLive
+                ? "border-emerald-300 bg-emerald-50 text-emerald-700"
+                : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
+            } ${props.live.isDisabled ? "cursor-not-allowed opacity-50" : ""}`}
+            disabled={props.live.isDisabled}
+            onClick={() => {
+              props.live?.onToggle(!props.live.isLive);
+            }}
+            title={
+              props.live.isLive ? "Pause live updates" : "Enable live updates"
+            }
+          >
+            <span
+              className={`h-2 w-2 rounded-full ${
+                props.live.isLive
+                  ? "animate-pulse bg-emerald-500"
+                  : "bg-gray-300"
+              }`}
+            />
+            <span>{props.live.isLive ? "Live" : "Paused"}</span>
+          </button>
+        )}
+
+        {props.onRefresh && (
+          <button
+            type="button"
+            className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50"
+            onClick={props.onRefresh}
+            title="Refresh"
+          >
+            <Icon icon={IconProp.Refresh} className="h-3.5 w-3.5" />
+            <span>Refresh</span>
+          </button>
+        )}
+
+        {props.toolbarTrailingActions}
+      </div>
+
+      {/* Active filter chips */}
+      {props.activeFilters && props.activeFilters.length > 0 && (
+        <TelemetryActiveFilterChips
+          filters={props.activeFilters}
+          onRemove={(key: string, value: string) => {
+            props.onRemoveFilter?.(key, value);
+          }}
+          onClearAll={() => {
+            props.onClearAllFilters?.();
+          }}
+        />
+      )}
+
+      {/* Histogram */}
+      {showHistogram && props.histogramBuckets && props.histogramSeries && (
+        <TelemetryHistogram
+          buckets={props.histogramBuckets}
+          isLoading={props.histogramLoading || false}
+          series={props.histogramSeries}
+          title={props.histogramTitle}
+          onTimeRangeSelect={props.onHistogramTimeRangeSelect}
+        />
+      )}
+
+      {/* Main area: facets + list */}
+      <div className="flex min-h-0 flex-1 gap-3">
+        {showFacets && (
+          <TelemetryFacetSidebar
+            facetData={props.facetData || {}}
+            isLoading={props.facetLoading || false}
+            facetConfigs={props.facetConfigs || []}
+            activeFilters={props.activeFilters}
+            onIncludeFilter={(key: string, value: string) => {
+              props.onFacetInclude?.(key, value);
+            }}
+            onExcludeFilter={(key: string, value: string) => {
+              props.onFacetExclude?.(key, value);
+            }}
+          />
+        )}
+
+        <div className="flex min-w-0 flex-1 flex-col rounded-lg border border-gray-200 bg-white">
+          {props.error && (
+            <div className="p-4">
+              <ErrorMessage message={props.error} />
+            </div>
+          )}
+
+          {!props.error && (
+            <div className="min-h-0 flex-1 overflow-y-auto">
+              {props.isLoading && props.items.length === 0 ? (
+                <div className="flex h-48 items-center justify-center">
+                  <ComponentLoader />
+                </div>
+              ) : props.items.length === 0 ? (
+                <div className="flex h-48 flex-col items-center justify-center gap-2 px-6 text-center">
+                  <Icon
+                    icon={IconProp.Search}
+                    className="h-8 w-8 text-gray-300"
+                  />
+                  <p className="text-sm font-medium text-gray-500">
+                    {props.emptyMessage || "No results"}
+                  </p>
+                  <p className="text-xs text-gray-400">
+                    Try adjusting filters or time range.
+                  </p>
+                </div>
+              ) : (
+                <ul className="divide-y divide-gray-100">
+                  {props.items.map((item: T, index: number) => {
+                    return (
+                      <li key={props.getRowKey(item, index)}>
+                        {props.renderRow(item, index)}
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </div>
+          )}
+
+          <TelemetryPagination
+            currentPage={props.page}
+            totalItems={props.totalCount}
+            pageSize={props.pageSize}
+            pageSizeOptions={props.pageSizeOptions || DEFAULT_PAGE_SIZE_OPTIONS}
+            onPageChange={props.onPageChange}
+            onPageSizeChange={props.onPageSizeChange}
+            isDisabled={props.isLoading}
+            itemLabel={props.itemLabel}
+          />
+        </div>
+      </div>
+
+      {/* Detail panel overlay */}
+      {props.detailPanel}
+    </div>
+  );
+}
+
+// Generic functional component wrapper so TypeScript can infer <T>.
+const TelemetryViewer: <T>(props: TelemetryViewerProps<T>) => ReactElement =
+  TelemetryViewerInner as unknown as <T>(
+    props: TelemetryViewerProps<T>,
+  ) => ReactElement;
+
+export default TelemetryViewer;
+export type { TelemetrySearchBarRef } from "./components/TelemetrySearchBar";

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

@@ -0,0 +1,85 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import { ActiveFilter } from "../types";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface TelemetryActiveFilterChipsProps {
+  filters: Array<ActiveFilter>;
+  onRemove: (facetKey: string, value: string) => void;
+  onClearAll: () => void;
+}
+
+const TelemetryActiveFilterChips: FunctionComponent<
+  TelemetryActiveFilterChipsProps
+> = (props: TelemetryActiveFilterChipsProps): ReactElement | null => {
+  if (props.filters.length === 0) {
+    return null;
+  }
+
+  const readOnlyFilters: Array<ActiveFilter> = props.filters.filter(
+    (f: ActiveFilter) => {
+      return f.readOnly;
+    },
+  );
+  const removableFilters: Array<ActiveFilter> = props.filters.filter(
+    (f: ActiveFilter) => {
+      return !f.readOnly;
+    },
+  );
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 px-0.5">
+      {readOnlyFilters.map((filter: ActiveFilter) => {
+        const chipKey: string = `readonly:${filter.facetKey}:${filter.value}`;
+        return (
+          <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)`}
+          >
+            <Icon icon={IconProp.Lock} className="h-2.5 w-2.5 text-gray-400" />
+            <span className="font-medium text-gray-500">
+              {filter.displayKey}:
+            </span>
+            <span>{filter.displayValue}</span>
+          </span>
+        );
+      })}
+      {removableFilters.map((filter: ActiveFilter) => {
+        const chipKey: string = `${filter.facetKey}:${filter.value}`;
+        return (
+          <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"
+          >
+            <span className="font-medium text-indigo-500">
+              {filter.displayKey}:
+            </span>
+            <span>{filter.displayValue}</span>
+            <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}`}
+            >
+              <Icon icon={IconProp.Close} className="h-2.5 w-2.5" />
+            </button>
+          </span>
+        );
+      })}
+      {removableFilters.length > 1 && (
+        <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
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default TelemetryActiveFilterChips;