@juice-js/observability 1.0.1-alpha.17 → 1.1.0-alpha.20

package/styles/_observability.scss

@@ -117,7 +117,11 @@
   .jc-list-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--jc-border); }
   .jc-list-row:last-child { border-bottom: 0; }
   .jc-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
-  .jc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
+  .jc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; min-width: 0; }
+  // A button label can carry a span name (a whole SQL statement, say): keep each button within the row and cut its label
+  // with an ellipsis; the full text is on the button's title.
+  .jc-actions > .mat-mdc-button-base { max-width: 100%; min-width: 0; }
+  .jc-actions .mdc-button__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   // The filters, the context bar and every other field the pages size label each field. An app theme denser than -1 hides a fill field's label (and
   // these fields have no placeholder to fall back on), so keep them at -1 whatever the app's density.
   .jc-context, .jc-filter-form, mat-form-field[class*='jc-field-'] { @include mat.form-field-density(-1); }
@@ -155,12 +159,21 @@
   .jc-health-card.jc-selected { border-color: var(--jc-accent); }
 
   .jc-chart-title { font-size: 13px; color: var(--jc-muted); margin: 4px 0; }
+  .jc-capacity-inputs { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 16px; }
+  .jc-capacity-inputs mat-form-field { width: 170px; }
+  .jc-capacity-result { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-bottom: 12px; }
+  .jc-capacity-result div { display: flex; flex-direction: column; }
+  .jc-capacity-result strong { font-size: 24px; font-weight: 500; line-height: 1.2; }
+  .jc-capacity-notes { margin: 12px 0 0; padding-left: 18px; font-size: 13px; }
+  .jc-capacity-measured th { width: 240px; }
+
   .jc-chart { height: 180px; width: 100%; background: var(--jc-surface); border: 1px solid var(--jc-border); border-radius: 6px; }
   .jc-chart-empty { display: flex; align-items: center; justify-content: center; color: var(--jc-muted); font-size: 13px; }
 
   // ─── Waterfall ───
   .jc-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin-bottom: 6px; i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; } }
-  .jc-trace { display: grid; grid-template-columns: 1fr; gap: 12px; }
+  // minmax(0, …), not a bare 1fr: a 1fr column grows to fit its longest unbreakable line (a span name in a button label) instead of letting it clip.
+  .jc-trace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
   .jc-trace.jc-with-detail { grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); }
   .jc-waterfall { background: var(--jc-surface); border: 1px solid var(--jc-border); border-radius: 8px; font-size: 12px; overflow: hidden; }
   .jc-wf-head, .jc-wf-row { display: grid; grid-template-columns: minmax(260px, 40%) 1fr; align-items: center; }
@@ -187,6 +200,7 @@
   .jc-usage-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
   .jc-fill-page > .jc-trace > .jc-waterfall, .jc-fill-page > .jc-trace > .jc-span-detail { overflow: auto; max-height: none; position: static; }
   .jc-fill-page .jc-wf-head { position: sticky; top: 0; z-index: 1; background: var(--jc-surface); }
+  .jc-span-detail h2 { min-width: 0; overflow-wrap: anywhere; }
   .jc-span-facts { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
   .jc-event { border-left: 3px solid var(--jc-border); padding-left: 8px; margin: 6px 0; }
   .jc-event.jc-wf-error { border-left-color: var(--jc-bad); }
@@ -197,10 +211,13 @@
   .jc-graph-legend { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--jc-muted); padding: 4px; }
   .jc-line { display: inline-block; width: 24px; border-top: 2px solid var(--jc-muted); vertical-align: middle; }
   .jc-line.jc-dashed { border-top-style: dashed; }
+  .jc-line.jc-line-warn { border-top: 3px solid var(--jc-warn); }
+  .jc-line.jc-line-bad { border-top: 3px solid var(--jc-bad); }
+  .jc-line.jc-line-idle { opacity: 0.35; }
   .jc-side { align-self: start; }
 
   @media (max-width: 900px) {
-    .jc-trace.jc-with-detail, .jc-topology { grid-template-columns: 1fr; }
+    .jc-trace.jc-with-detail, .jc-topology { grid-template-columns: minmax(0, 1fr); }
     // Stacked panes: the page scrolls as a whole again.
     mat-sidenav-content > .jc-fill-page { height: auto; display: block; overflow: visible; }
     .jc-fill-page > .jc-trace > .jc-waterfall, .jc-fill-page > .jc-trace > .jc-span-detail { overflow: visible; }

package/types/juice-js-observability.d.ts

@@ -299,6 +299,53 @@ export interface ServiceStats {
   stepSeconds: number;
   points: ServiceStatsPoint[];
 }
+/** What a service was measured to need, per instance. A unit of work is a request or a message. */
+export interface Capacity {
+  stepSeconds: number;
+  samples: number;
+  instances: number;
+  truncated: boolean;
+  requestSource: 'metrics' | 'spans' | 'none';
+  hosts: string[];
+  coresPerInstance: number | null;
+  peakPerSecond: number;
+  responseMs: number | null;
+  responseLowLoadMs: number | null;
+  responseHighLoadMs: number | null;
+  peakQueue: number | null;
+  /** `fitted` separates idle CPU from CPU per unit; `average` is CPU over work in the busiest samples, so it can read high. */
+  cpuModel: 'fitted' | 'average' | 'none';
+  cpuSecondsPerUnit: number | null;
+  idleCores: number | null;
+  peakCores: number | null;
+  /** `fitted` is idle plus growth per unit in flight; `peak` is only the highest seen. */
+  memoryModel: 'fitted' | 'peak' | 'none';
+  idleMemoryBytes: number | null;
+  memoryBytesPerInFlight: number | null;
+  peakMemoryBytes: number | null;
+  /** Near 1, a consumer was busy nearly all the time: if it handles one message at a time, it was at its limit whatever CPU says. */
+  peakMessagesPerSecond: number;
+  peakMessagesInFlight: number;
+  /** Null when the service created and delivered no outbox messages in the window. */
+  outbox: OutboxBacklog | null;
+}
+/** `undelivered` is created minus delivered in the window, so it includes rolled-back messages. The delay is the p95 from creating to delivering, in the newest minutes. */
+export interface OutboxBacklog {
+  createdPerSecond: number;
+  deliveredPerSecond: number;
+  undelivered: number;
+  recentDelaySeconds: number | null;
+  fallingBehind: boolean;
+}
+export interface DependencyStats {
+  dependencyId: string;
+  count: number;
+  errorRate: number;
+}
+export interface DependencyStatsPage {
+  items: DependencyStats[];
+  truncated: boolean;
+}
 export interface DependencyEvidence {
   dependencyId: string;
   relation: string;
@@ -349,6 +396,8 @@ export declare class ApiService {
   metrics(query: Query): Observable<TelemetryPage<MetricInfo>>;
   series(query: Query): Observable<Series>;
   serviceStats(query: Query): Observable<ServiceStats>;
+  capacity(query: Query): Observable<Capacity>;
+  dependencyStats(query: Query): Observable<DependencyStatsPage>;
   dependency(id: string, query: Query): Observable<DependencyEvidence>;
   search(q: string): Observable<TelemetryPage<SearchHit>>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ApiService, never>;