@oneuptime/common 10.0.34 → 10.0.35

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -208,9 +208,9 @@ const CodeBlock: FunctionComponent<{
     (language ? language.charAt(0).toUpperCase() + language.slice(1) : "");
 
   return (
-    <div className="relative rounded-lg mt-4 mb-4 overflow-hidden border border-gray-700">
+    <div className="relative rounded-lg mt-3 mb-3 overflow-hidden border border-gray-200 shadow-sm">
       {/* Header bar */}
-      <div className="flex items-center justify-between px-3 py-1.5 bg-gray-800/60 border-b border-gray-700/60">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-gray-800 border-b border-gray-700">
         <span className="text-[11px] font-medium uppercase tracking-wider text-gray-400 select-none">
           {displayLang}
         </span>
@@ -261,7 +261,7 @@ const CodeBlock: FunctionComponent<{
         children={content}
         language={language}
         style={vscDarkPlus}
-        className="!rounded-none !mt-0 !mb-0 !bg-gray-900 !pt-6 !pb-4 !px-4 text-sm !border-0"
+        className="!rounded-none !mt-0 !mb-0 !bg-gray-900 !pt-3 !pb-3 !px-4 text-sm !border-0"
         codeTagProps={{ className: "font-mono" }}
       />
     </div>
@@ -279,7 +279,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           h1: ({ ...props }: any) => {
             return (
               <h1
-                className="text-4xl mt-8 mb-6 border-b-2 border-blue-500 pb-2 text-gray-900 font-bold"
+                className="text-lg mt-6 mb-3 text-gray-900 font-bold"
                 {...props}
               />
             );
@@ -287,7 +287,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           h2: ({ ...props }: any) => {
             return (
               <h2
-                className="text-3xl mt-6 mb-4 border-b border-gray-300 pb-1 text-gray-900 font-semibold"
+                className="text-base mt-6 mb-2 text-gray-900 font-semibold"
                 {...props}
               />
             );
@@ -295,7 +295,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           h3: ({ ...props }: any) => {
             return (
               <h3
-                className="text-2xl mt-6 mb-3 text-gray-900 font-semibold"
+                className="text-base mt-4 mb-2 text-gray-900 font-semibold"
                 {...props}
               />
             );
@@ -303,7 +303,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           h4: ({ ...props }: any) => {
             return (
               <h4
-                className="text-xl mt-5 mb-3 text-gray-900 font-medium"
+                className="text-sm mt-3 mb-2 text-gray-900 font-semibold"
                 {...props}
               />
             );
@@ -311,7 +311,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           h5: ({ ...props }: any) => {
             return (
               <h5
-                className="text-lg mt-4 mb-2 text-gray-900 font-medium"
+                className="text-sm mt-3 mb-1 text-gray-900 font-medium"
                 {...props}
               />
             );
@@ -319,7 +319,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           h6: ({ ...props }: any) => {
             return (
               <h6
-                className="text-base mt-3 mb-2 text-gray-900 font-medium"
+                className="text-sm mt-2 mb-1 text-gray-700 font-medium"
                 {...props}
               />
             );
@@ -327,7 +327,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           p: ({ ...props }: any) => {
             return (
               <p
-                className="text-base mt-3 mb-4 text-gray-700 leading-relaxed"
+                className="text-sm mt-2 mb-3 text-gray-700 leading-relaxed"
                 {...props}
               />
             );
@@ -352,24 +352,24 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
               return <>{children}</>;
             }
 
-            // Avoid double borders when SyntaxHighlighter is already styling the block.
-            const isSyntaxHighlighter: boolean =
+            /*
+             * If the child is a custom component (CodeBlock, MermaidDiagram, etc.)
+             * rather than a plain HTML element like <code>, skip pre styling.
+             * Checking typeof type !== "string" is minification-safe unlike checking type.name.
+             */
+            const isCustomComponent: boolean =
               React.isValidElement(children) &&
-              // name can be 'SyntaxHighlighter' or wrapped/minified; fall back to presence of 'children' prop with 'react-syntax-highlighter' data attribute.
-              (((children as any).type &&
-                ((children as any).type.name === "SyntaxHighlighter" ||
-                  (children as any).type.displayName ===
-                    "SyntaxHighlighter")) ||
-                (children as any).props?.className?.includes(
-                  "syntax-highlighter",
-                ));
+              typeof (children as any).type !== "string";
 
-            const baseClass: string = isSyntaxHighlighter
-              ? "mt-4 mb-4 rounded-lg overflow-hidden"
-              : "bg-gray-900 text-gray-100 mt-4 mb-4 p-2 rounded-lg text-sm overflow-x-auto border border-gray-700";
+            if (isCustomComponent) {
+              return <>{children}</>;
+            }
 
             return (
-              <pre className={baseClass} {...rest}>
+              <pre
+                className="bg-gray-900 text-gray-100 mt-3 mb-3 p-3 rounded-md text-sm overflow-x-auto border border-gray-700"
+                {...rest}
+              >
                 {children}
               </pre>
             );
@@ -377,7 +377,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           strong: ({ ...props }: any) => {
             return (
               <strong
-                className="text-base font-semibold text-gray-900"
+                className="text-sm font-semibold text-gray-900"
                 {...props}
               />
             );
@@ -385,56 +385,76 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           li: ({ ...props }: any) => {
             return (
               <li
-                className="text-base mt-2 mb-1 text-gray-700 leading-relaxed"
+                className="text-sm mt-1 mb-1 text-gray-700 leading-relaxed"
                 {...props}
               />
             );
           },
           ul: ({ ...props }: any) => {
-            return <ul className="list-disc pl-8 mt-2 mb-4" {...props} />;
+            return <ul className="list-disc pl-6 mt-1 mb-3" {...props} />;
           },
           ol: ({ ...props }: any) => {
-            return <ol className="list-decimal pl-8 mt-2 mb-4" {...props} />;
+            return <ol className="list-decimal pl-6 mt-1 mb-3" {...props} />;
           },
-          blockquote: ({ ...props }: any) => {
+          blockquote: ({ children, ...props }: any) => {
             return (
               <blockquote
-                className="border-l-4 border-blue-500 pl-4 italic text-gray-600 bg-gray-50 py-2 my-4"
+                className="rounded-lg border border-amber-200 bg-amber-50/50 my-4 not-italic overflow-hidden"
                 {...props}
-              />
+              >
+                <div className="flex items-start gap-3 px-4 py-3">
+                  <svg
+                    className="h-5 w-5 flex-shrink-0 text-amber-500 mt-0.5"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                    />
+                  </svg>
+                  <div className="text-sm text-gray-700 leading-relaxed [&>p]:mt-0 [&>p]:mb-0 [&>p>strong:first-child]:text-amber-700 [&>p>strong:first-child]:mr-1">
+                    {children}
+                  </div>
+                </div>
+              </blockquote>
             );
           },
           table: ({ ...props }: any) => {
             return (
-              <table
-                className="min-w-full table-auto border-collapse border border-gray-300 mt-4 mb-4"
-                {...props}
-              />
+              <div className="overflow-hidden rounded-lg border border-gray-200 mt-4 mb-4 shadow-sm">
+                <table
+                  className="min-w-full table-auto border-collapse text-sm"
+                  {...props}
+                />
+              </div>
             );
           },
           thead: ({ ...props }: any) => {
-            return <thead className="bg-gray-100" {...props} />;
+            return <thead className="bg-gray-50" {...props} />;
           },
           tbody: ({ ...props }: any) => {
-            return <tbody {...props} />;
+            return <tbody className="divide-y divide-gray-100" {...props} />;
           },
           tr: ({ ...props }: any) => {
-            return <tr className="border-b border-gray-200" {...props} />;
+            return (
+              <tr className="hover:bg-gray-50 transition-colors" {...props} />
+            );
           },
           th: ({ ...props }: any) => {
             return (
               <th
-                className="px-4 py-2 text-left text-sm font-semibold text-gray-900 border border-gray-300"
+                className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 border-b border-gray-200"
                 {...props}
               />
             );
           },
           td: ({ ...props }: any) => {
             return (
-              <td
-                className="px-4 py-2 text-sm text-gray-700 border border-gray-300"
-                {...props}
-              />
+              <td className="px-4 py-2.5 text-sm text-gray-700" {...props} />
             );
           },
           hr: ({ ...props }: any) => {
@@ -457,19 +477,31 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
               return <MermaidDiagram chart={content} />;
             }
 
-            const codeClassName: string =
-              content.includes("\n") ||
-              (match &&
+            const isMultiline: boolean = content.includes("\n");
+            const hasLanguage: boolean = Boolean(
+              match &&
                 match?.filter((item: string) => {
                   return item.includes("language-");
-                }).length > 0)
-                ? ""
-                : "text-sm px-2 py-1 bg-gray-200 rounded text-gray-900 font-mono";
+                }).length > 0,
+            );
 
-            return match ? (
-              <CodeBlock language={match[1]!} content={content} rest={rest} />
-            ) : (
-              <code className={codeClassName} {...rest}>
+            // Multiline code blocks (with or without language) get the full CodeBlock treatment
+            if (hasLanguage || isMultiline) {
+              return (
+                <CodeBlock
+                  language={match ? match[1]! : "text"}
+                  content={content}
+                  rest={rest}
+                />
+              );
+            }
+
+            // Inline code
+            return (
+              <code
+                className="text-xs px-1.5 py-0.5 bg-gray-100 border border-gray-200 rounded text-gray-800 font-mono"
+                {...rest}
+              >
                 {children}
               </code>
             );

package/UI/Components/Navbar/NavBarMenu.tsx

@@ -39,7 +39,7 @@ const NavBarMenu: FunctionComponent<ComponentProps> = (
     );
 
     return (
-      <div className="absolute left-0 z-10 mt-8 w-screen max-w-5xl transform px-2 sm:px-0">
+      <div className="absolute left-0 z-50 mt-8 w-screen max-w-5xl transform px-2 sm:px-0">
         <div className="overflow-hidden rounded-2xl shadow-xl ring-1 ring-black ring-opacity-5 bg-white">
           {/* Sections */}
           <div className="p-6">
@@ -127,7 +127,7 @@ const NavBarMenu: FunctionComponent<ComponentProps> = (
 
   return (
     <div
-      className={`absolute left-1/2 z-10 mt-8 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0 ${maxWidthClass}`}
+      className={`absolute left-1/2 z-50 mt-8 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0 ${maxWidthClass}`}
     >
       <div className="overflow-hidden rounded-2xl shadow-xl ring-1 ring-black ring-opacity-5 bg-white">
         {/* Menu Items */}

package/Utils/Traces/CriticalPath.ts

@@ -0,0 +1,348 @@
+/*
+ * Critical Path Analysis for distributed traces
+ * Computes self-time, critical path, and bottleneck identification
+ */
+
+export interface SpanData {
+  spanId: string;
+  parentSpanId: string | undefined;
+  startTimeUnixNano: number;
+  endTimeUnixNano: number;
+  durationUnixNano: number;
+  serviceId: string | undefined;
+  name: string | undefined;
+}
+
+export interface SpanSelfTime {
+  spanId: string;
+  selfTimeUnixNano: number;
+  childTimeUnixNano: number;
+  totalTimeUnixNano: number;
+  selfTimePercent: number;
+}
+
+export interface CriticalPathResult {
+  criticalPathSpanIds: string[];
+  totalTraceDurationUnixNano: number;
+  criticalPathDurationUnixNano: number;
+}
+
+export interface ServiceBreakdown {
+  serviceId: string;
+  totalDurationUnixNano: number;
+  selfTimeUnixNano: number;
+  spanCount: number;
+  percentOfTrace: number;
+}
+
+export default class CriticalPathUtil {
+  /**
+   * Compute self-time for each span.
+   * Self-time = span duration minus the time covered by direct children,
+   * accounting for overlapping children.
+   */
+  public static computeSelfTimes(spans: SpanData[]): Map<string, SpanSelfTime> {
+    const result: Map<string, SpanSelfTime> = new Map();
+
+    // Build parent -> children index
+    const childrenMap: Map<string, SpanData[]> = new Map();
+    for (const span of spans) {
+      if (span.parentSpanId) {
+        const children: SpanData[] = childrenMap.get(span.parentSpanId) || [];
+        children.push(span);
+        childrenMap.set(span.parentSpanId, children);
+      }
+    }
+
+    for (const span of spans) {
+      const children: SpanData[] = childrenMap.get(span.spanId) || [];
+      const childTimeUnixNano: number =
+        CriticalPathUtil.computeMergedChildDuration(
+          children,
+          span.startTimeUnixNano,
+          span.endTimeUnixNano,
+        );
+
+      const selfTimeUnixNano: number = Math.max(
+        0,
+        span.durationUnixNano - childTimeUnixNano,
+      );
+
+      result.set(span.spanId, {
+        spanId: span.spanId,
+        selfTimeUnixNano,
+        childTimeUnixNano,
+        totalTimeUnixNano: span.durationUnixNano,
+        selfTimePercent:
+          span.durationUnixNano > 0
+            ? (selfTimeUnixNano / span.durationUnixNano) * 100
+            : 0,
+      });
+    }
+
+    return result;
+  }
+
+  /**
+   * Compute the merged duration of child spans within the parent's time window.
+   * Handles overlapping children by merging intervals.
+   */
+  private static computeMergedChildDuration(
+    children: SpanData[],
+    parentStart: number,
+    parentEnd: number,
+  ): number {
+    if (children.length === 0) {
+      return 0;
+    }
+
+    // Clamp children to parent boundaries and create intervals
+    const intervals: Array<{ start: number; end: number }> = children
+      .map((child: SpanData) => {
+        return {
+          start: Math.max(child.startTimeUnixNano, parentStart),
+          end: Math.min(child.endTimeUnixNano, parentEnd),
+        };
+      })
+      .filter((interval: { start: number; end: number }) => {
+        return interval.end > interval.start;
+      });
+
+    if (intervals.length === 0) {
+      return 0;
+    }
+
+    // Sort by start time
+    intervals.sort(
+      (
+        a: { start: number; end: number },
+        b: { start: number; end: number },
+      ) => {
+        return a.start - b.start;
+      },
+    );
+
+    // Merge overlapping intervals
+    let mergedDuration: number = 0;
+    let currentStart: number = intervals[0]!.start;
+    let currentEnd: number = intervals[0]!.end;
+
+    for (let i: number = 1; i < intervals.length; i++) {
+      const interval: { start: number; end: number } = intervals[i]!;
+      if (interval.start <= currentEnd) {
+        // Overlapping - extend
+        currentEnd = Math.max(currentEnd, interval.end);
+      } else {
+        // Non-overlapping - add previous and start new
+        mergedDuration += currentEnd - currentStart;
+        currentStart = interval.start;
+        currentEnd = interval.end;
+      }
+    }
+
+    mergedDuration += currentEnd - currentStart;
+
+    return mergedDuration;
+  }
+
+  /**
+   * Compute the critical path through the trace.
+   * The critical path is the longest sequential chain of spans,
+   * accounting for parallelism (parallel children don't add to the critical path together).
+   */
+  public static computeCriticalPath(spans: SpanData[]): CriticalPathResult {
+    if (spans.length === 0) {
+      return {
+        criticalPathSpanIds: [],
+        totalTraceDurationUnixNano: 0,
+        criticalPathDurationUnixNano: 0,
+      };
+    }
+
+    // Find total trace duration
+    let traceStart: number = spans[0]!.startTimeUnixNano;
+    let traceEnd: number = spans[0]!.endTimeUnixNano;
+    for (const span of spans) {
+      if (span.startTimeUnixNano < traceStart) {
+        traceStart = span.startTimeUnixNano;
+      }
+      if (span.endTimeUnixNano > traceEnd) {
+        traceEnd = span.endTimeUnixNano;
+      }
+    }
+
+    // Build parent -> children index
+    const childrenMap: Map<string, SpanData[]> = new Map();
+    const spanMap: Map<string, SpanData> = new Map();
+    const allSpanIds: Set<string> = new Set();
+
+    for (const span of spans) {
+      spanMap.set(span.spanId, span);
+      allSpanIds.add(span.spanId);
+    }
+
+    for (const span of spans) {
+      if (span.parentSpanId && allSpanIds.has(span.parentSpanId)) {
+        const children: SpanData[] = childrenMap.get(span.parentSpanId) || [];
+        children.push(span);
+        childrenMap.set(span.parentSpanId, children);
+      }
+    }
+
+    // Find root spans
+    const rootSpans: SpanData[] = spans.filter((span: SpanData) => {
+      return !span.parentSpanId || !allSpanIds.has(span.parentSpanId);
+    });
+
+    if (rootSpans.length === 0) {
+      return {
+        criticalPathSpanIds: [],
+        totalTraceDurationUnixNano: traceEnd - traceStart,
+        criticalPathDurationUnixNano: 0,
+      };
+    }
+
+    // For each span, compute the critical path weight (longest path through this span and descendants)
+    const criticalPathCache: Map<string, { weight: number; path: string[] }> =
+      new Map();
+
+    const computeWeight: (spanId: string) => {
+      weight: number;
+      path: string[];
+    } = (spanId: string): { weight: number; path: string[] } => {
+      const cached: { weight: number; path: string[] } | undefined =
+        criticalPathCache.get(spanId);
+      if (cached) {
+        return cached;
+      }
+
+      const span: SpanData | undefined = spanMap.get(spanId);
+      if (!span) {
+        return { weight: 0, path: [] };
+      }
+
+      const children: SpanData[] = childrenMap.get(spanId) || [];
+
+      if (children.length === 0) {
+        const result: { weight: number; path: string[] } = {
+          weight: span.durationUnixNano,
+          path: [spanId],
+        };
+        criticalPathCache.set(spanId, result);
+        return result;
+      }
+
+      // Find the child with the longest critical path
+      let maxChildWeight: number = 0;
+      let maxChildPath: string[] = [];
+
+      for (const child of children) {
+        const childResult: { weight: number; path: string[] } = computeWeight(
+          child.spanId,
+        );
+        if (childResult.weight > maxChildWeight) {
+          maxChildWeight = childResult.weight;
+          maxChildPath = childResult.path;
+        }
+      }
+
+      // Self time contribution
+      const selfTimes: Map<string, SpanSelfTime> =
+        CriticalPathUtil.computeSelfTimes([span, ...children]);
+      const selfTime: SpanSelfTime | undefined = selfTimes.get(spanId);
+      const selfTimeValue: number = selfTime ? selfTime.selfTimeUnixNano : 0;
+
+      const result: { weight: number; path: string[] } = {
+        weight: selfTimeValue + maxChildWeight,
+        path: [spanId, ...maxChildPath],
+      };
+      criticalPathCache.set(spanId, result);
+      return result;
+    };
+
+    // Find the root with the longest critical path
+    let maxWeight: number = 0;
+    let criticalPath: string[] = [];
+
+    for (const rootSpan of rootSpans) {
+      const result: { weight: number; path: string[] } = computeWeight(
+        rootSpan.spanId,
+      );
+      if (result.weight > maxWeight) {
+        maxWeight = result.weight;
+        criticalPath = result.path;
+      }
+    }
+
+    return {
+      criticalPathSpanIds: criticalPath,
+      totalTraceDurationUnixNano: traceEnd - traceStart,
+      criticalPathDurationUnixNano: maxWeight,
+    };
+  }
+
+  /**
+   * Compute latency breakdown by service.
+   */
+  public static computeServiceBreakdown(spans: SpanData[]): ServiceBreakdown[] {
+    const selfTimes: Map<string, SpanSelfTime> =
+      CriticalPathUtil.computeSelfTimes(spans);
+
+    // Find total trace duration
+    let traceStart: number = Number.MAX_SAFE_INTEGER;
+    let traceEnd: number = 0;
+    for (const span of spans) {
+      if (span.startTimeUnixNano < traceStart) {
+        traceStart = span.startTimeUnixNano;
+      }
+      if (span.endTimeUnixNano > traceEnd) {
+        traceEnd = span.endTimeUnixNano;
+      }
+    }
+    const totalDuration: number = traceEnd - traceStart;
+
+    // Aggregate by service
+    const serviceMap: Map<
+      string,
+      { totalDuration: number; selfTime: number; spanCount: number }
+    > = new Map();
+
+    for (const span of spans) {
+      const serviceId: string = span.serviceId || "unknown";
+      const entry: {
+        totalDuration: number;
+        selfTime: number;
+        spanCount: number;
+      } = serviceMap.get(serviceId) || {
+        totalDuration: 0,
+        selfTime: 0,
+        spanCount: 0,
+      };
+
+      entry.totalDuration += span.durationUnixNano;
+      const selfTime: SpanSelfTime | undefined = selfTimes.get(span.spanId);
+      entry.selfTime += selfTime ? selfTime.selfTimeUnixNano : 0;
+      entry.spanCount += 1;
+      serviceMap.set(serviceId, entry);
+    }
+
+    const result: ServiceBreakdown[] = [];
+    for (const [serviceId, data] of serviceMap.entries()) {
+      result.push({
+        serviceId,
+        totalDurationUnixNano: data.totalDuration,
+        selfTimeUnixNano: data.selfTime,
+        spanCount: data.spanCount,
+        percentOfTrace:
+          totalDuration > 0 ? (data.selfTime / totalDuration) * 100 : 0,
+      });
+    }
+
+    // Sort by self-time descending (biggest contributors first)
+    result.sort((a: ServiceBreakdown, b: ServiceBreakdown) => {
+      return b.selfTimeUnixNano - a.selfTimeUnixNano;
+    });
+
+    return result;
+  }
+}

package/build/dist/Models/DatabaseModels/Index.js

@@ -1,5 +1,6 @@
 import AcmeCertificate from "./AcmeCertificate";
 import AcmeChallenge from "./AcmeChallenge";
+import KubernetesCluster from "./KubernetesCluster";
 // API Keys
 import ApiKey from "./ApiKey";
 import ApiKeyPermission from "./ApiKeyPermission";
@@ -430,6 +431,7 @@ const AllModelTypes = [
     ProjectSCIM,
     ProjectSCIMLog,
     StatusPageSCIMLog,
+    KubernetesCluster,
 ];
 const modelTypeMap = {};
 export const getModelTypeByName = (tableName) => {