console: maintained objects freshness diagnosis

[leedqin]

Motivation

Freshness graphs for maintained objects that show the critical path of lag from upstream dependencies on that object. Critical path is shown as a DAG. Fixes CNS-52

Description

A user can pick the a point in time in Freshness graph to see the critical path of objects and their respective lag and a table of immediate upstream dependencies. The lookback window on table corresponds to the lookback window in the freshness graph as well to let the user look at freshness few hours back or few minutes back. In that window, they can look at the critical path at a point in time on freshness graph. Design for the DAG: https://dependency-timeline-mz.lovable.app/

I didn't follow this pixel perfect but used the color schemes for the nodes. Since it's really hard to pinpoint to one particular object that it is causing the delay.

Different UI scenarios

• Objects with healthy freshness around 2 seconds

object_freshness_2sec.mov

• Objects with a delay from source at a particular timestamp

• Showing delay being introduced in the critical chain from sources (hence marked red). If a node is yellow then that means (it's lag is > 2s, it's self delay is less than the max self delay in the chain i.e the lag is inherited from the parent). Showing delay being introduced from the sources and the children inheriting them.

source_delay_4s.mov

• Self delay of an object

Tips For Reviewer

• All the changes in this PR are post Freshness Chart commit. I have broken down most changes by commit so they can be reviewed on their own.

The most review intensive commits are:

• CriticalPathQuery:
  This is a recursive sql query to trace the chain for the object's backward to determine "what makes the object slow", returning every edge along the chain plus the immediate off-path siblings of each chain node so the UI can show both the spine and what else feeds into it.

• Critical path DAG:
  This commit deals with transforming the results from the query into a renderable DAG. I would review the files in this order:

• criticalPathRenderable.ts has a helper function buildGraphView (at the bottom of the file, would recommend reading from here) that takes all the other helpers to return the nodes and edges needed for the graph. Here is the flow how buildGraphView works

┌─────────────────────────────────────────────────────────┐
│                                                            │
│  ─ CriticalPathData.rows  ← useCriticalPath() query      │
│  ─ probe (MaintainedObjectListItem)                      │
│  ─ visibleDepth           ← React state                  │
│  ─ expandedBottleneckId   ← React state                  │
└───────────────────────────┬─────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────┐
│  buildGraphView                             │
│                                                          │
│  ┌────────────────────────────────────────────────────┐ │
│  │ STEP 1 — pick the chain                             │ │
│  │ ────────────────────────────────────────────────── │ │
│  │ helper: buildChainMaps                              │ │
│  │   ↳ nodeById             (id → row metadata)        │ │
│  │   ↳ chainParentsByChild  (child → bottleneck dads)  │ │
│  │   ↳ depthById            (BFS hops from probe)      │ │
│  │                                                     │ │
│  │ filter depthById ≤ visibleDepth                     │ │
│  │   ↳ visibleChainIds                                 │ │
│  │   ↳ hiddenChainCount     (drives "Show N more")    │ │
│  └────────────────────────────────────────────────────┘ │
│                            │                             │
│                            ▼                             │
│  ┌────────────────────────────────────────────────────┐ │
│  │ STEP 2 — classify each node                         │ │
│  │ ────────────────────────────────────────────────── │ │
│  │ helper: findPrimaryBottleneck                       │ │
│  │   ↳ primaryId  (chain node w/ largest self-delay)   │ │
│  │ helper: computeOffPathCounts                        │ │
│  │   ↳ offPathCountById  (drives "+N off-path" chip)   │ │
│  │ helper: classifyNode  (called per node)             │ │
│  │   ↳ kind = healthy | primary | upstream             │ │
│  │                                                     │ │
│  │ assemble: probeNode + chainNodes (RenderableNode[]) │ │
│  │ assemble: chainEdges (filtered CriticalPathRow[])   │ │
│  └────────────────────────────────────────────────────┘ │
│                            │                             │
│                            ▼                             │
│  ┌────────────────────────────────────────────────────┐ │
│  │ STEP 3 — extend the node to show it's offPath siblings    │ │
│  │ ────────────────────────────────────────────────── │ │
│  │ if expandedBottleneckId is set AND visible:         │ │
│  │   ↳ look up its downstream child                    │ │
│  │   ↳ pull rows where childId === that & !bottleneck  │ │
│  │   ↳ splice in as offPath nodes + dashed edges       │ │
│  │ else: skip (chain-only result)                      │ │
│  └────────────────────────────────────────────────────┘ │
└───────────────────────────┬─────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────┐
│  OUTPUT: GraphView                                       │
│  ─ nodes: RenderableNode[]   (probe + chain + offPath)   │
│  ─ edges: CriticalPathRow[]  (chain + offPath edges)     │
│  ─ hiddenChainCount                                      │
└───────────────────────────┬─────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────┐
│  CriticalPathGraph  (component, wires render)            │
│  ─ useDagreGraph(nodes, edges)  → x/y positions          │
│  ─ <CriticalPathGraphNode>      per node                 │
│  ─ <CriticalPathEdgeLine>       per edge (dashed=offPath)│
│  ─ "Show N more upstream" button + "N off-path" link     │
└───────────────────────────┬─────────────────────────────┘
                            │ user clicks
                            ▼
┌─────────────────────────────────────────────────────────┐
│  React state setters                                     │
│  ─ "Show N more"  → setVisibleDepth(Infinity)            │
│  ─ "N off-path"   → setExpandedBottleneckId(node.id)     │
└───────────────────────────┬─────────────────────────────┘
                            │
                            └──► re-render → buildGraphView runs again

• Freshness breakdown chip : If there is a self lag of an object then it highlights that on the graph
• Upstream dependencies table: Table showing immediate upstream parents
• Last commit is a couple of bug fixes for the DAG renderings.