diff --git a/CHANGELOG.md b/CHANGELOG.md index e78c636..1dc1fb0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This project uses [Semantic Versioning](https://semver.org). +## [0.2.25] - 2026-06-25 + +### Added + +- **`when: on_failure` visual distinction** — SVG and HTML pipeline graphs now render failure-path jobs with a red status circle (`#d9534f`), an X-mark icon, and a dashed chip border. A new `on_failure` legend entry and Mermaid `classDef` entry are included. + +- **Job tooltip / detail panel** — every job chip in SVG and HTML output is wrapped in a `……` group. SVG viewers that support `` show the job name on hover; `<desc>` carries `stage`, `when`, `image`, and `needs` details. In HTML output the sidebar reads these directly from the DOM. + +- **Multi-job connector accuracy** — classic mode (no `needs:`) now uses a bus-bar connector: horizontal stubs from every job in stage N to a vertical rail at the midpoint, then stubs from the rail to every job in stage N+1. The previous single center-to-center line left top and bottom jobs visually disconnected. + +- **Skipped / blocked state colouring** — `glint graph pipeline` now accepts the same context flags as `glint check` (`--branch`, `--tag`, `--source`, `--var`, `--changes`, `--changes-from`). Jobs that evaluate to `JobSkipped` in the given context are rendered with a grey circle (`#868686`) and dimmed job name. When no context flags are given, all jobs render with their normal colours. + +- **Interactive HTML output** (`--format html`) — `glint graph pipeline --format html` writes a self-contained `.html` file to `--out`. The page embeds the SVG inline with mouse-wheel zoom (centred on cursor), drag-to-pan, double-click-to-reset, and a collapsible sidebar showing job details on chip click. No external dependencies; works offline. + +- **Mermaid pipeline output** (`--format mermaid`) — `glint graph pipeline --format mermaid` prints the existing Mermaid flowchart (`pipeline.go`) to stdout. Suitable for pasting into [mermaid.live](https://mermaid.live) or embedding in Markdown documentation. + +- **`imageString` helper** — internal utility that extracts the image name from a `Job.Image` field that may be a plain string or a map (`image: {name: ..., entrypoint: ...}`); used by the tooltip desc builder. + ## [0.2.24] - 2026-06-25 ### Added diff --git a/FEATURES.md b/FEATURES.md index 9cc618c..713ba61 100644 --- a/FEATURES.md +++ b/FEATURES.md @@ -282,8 +282,29 @@ jobs or pipeline-level findings. | `pipeline` | GitLab CI-style SVG/PNG written to `--out` directory (default: `glint-out/`); converted to PNG when `rsvg-convert`, `inkscape`, or `magick` is available | | `all` | `includes` to stdout + `pipeline` file path to stderr | +**`glint graph pipeline --format <FORMAT>`** + +| Format | Effect | +|--------|--------| +| `svg` (default) | Write GitLab CI-style SVG/PNG to `--out` | +| `mermaid` | Print Mermaid flowchart to stdout (paste into [mermaid.live](https://mermaid.live)) | +| `html` | Write self-contained HTML to `--out` with mouse pan/zoom and a click-to-open job-detail sidebar | + +**Visual distinctions in SVG and HTML output:** + +- **Regular** — blue circle with checkmark +- **Manual** — orange circle with play triangle +- **Trigger** — purple circle with chevron +- **Delayed** — yellow circle with clock +- **`when: on_failure`** — red circle (`#d9534f`) with X mark; dashed chip border +- **Skipped** (with `--branch`/`--tag`/`--source` context flags) — grey circle, dimmed job name + In DAG pipelines (any job has `needs:`) the pipeline graph uses job-to-job -Bézier connectors instead of stage-to-stage lines. +Bézier connectors. In classic mode a bus-bar pattern (vertical rail + per-job +stubs) accurately connects every job across adjacent stages. + +Each chip carries a `<title>` and `<desc>` with stage, when, image, and needs — +shown as a tooltip in SVG viewers and as a sidebar panel in HTML output. --- diff --git a/README.md b/README.md index f4abd06..9c56cf3 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ <p align="center"> <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="License"></a> - <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/release-v0.2.24-blue.svg" alt="Release"></a> + <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/release-v0.2.25-blue.svg" alt="Release"></a> </p> > **Disclaimer:** This tool was built through iterative AI-assisted development with [Claude](https://claude.ai). It is experimental, incomplete, and not intended for production use. Coverage of GitLab CI keywords is best-effort and may lag behind GitLab's evolving spec. Use it at your own discretion — no correctness guarantees are made. Contributions and bug reports are welcome. @@ -20,7 +20,7 @@ A local tool to validate and lint `.gitlab-ci.yml` pipelines without needing a G - **Simulates context** — `--branch`, `--tag`, `--source` flags evaluate `rules:if:` and `only`/`except` to show which jobs would be active, manual, or skipped; `--context branch=main --context branch=develop` prints a multi-column comparison table across multiple contexts in one run - **Multiple output formats** — `--format text` (default, ruff-style), `json`, `sarif` (GitHub Code Scanning / GitLab SAST), `junit`, `github` (PR annotations) - **Project config** — `.glint.yml` for rule suppression, severity overrides, token/URL defaults; `# glint: ignore RULE` for per-job inline suppression -- **Graph visualization** — `glint graph` prints a terminal job tree; `glint graph pipeline` renders a GitLab CI-style SVG/PNG +- **Graph visualization** — `glint graph` prints a terminal job tree; `glint graph pipeline` renders a GitLab CI-style SVG/PNG; `--format mermaid` emits a Mermaid flowchart; `--format html` produces a self-contained HTML file with pan/zoom and a job-detail sidebar; context flags grey out skipped jobs See [FEATURES.md](FEATURES.md) for the complete feature reference and lint rules table, and [ROADMAP.md](ROADMAP.md) for planned improvements. diff --git a/ROADMAP.md b/ROADMAP.md index 005b9b3..53c234c 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -71,12 +71,12 @@ The SVG renderer and terminal tree cover the basic layout. These would bring it - ~~**Terminal job tree**~~ — ✓ shipped in v0.2.0 as `glint graph tree`; stages as branches, jobs as leaves, context-aware annotations - ~~**`glint graph includes` shows jobs per file**~~ — ✓ shipped post-v0.2.0; each include node shows the jobs it defines as dashed-arrow rounded nodes in a distinct style -- **Multi-job connector accuracy** — draw one connector per job pair rather than one per stage pair in classic mode, so pipelines with uneven columns look correct -- **Job tooltip / detail panel** — embed a hidden `<title>` and `<desc>` per chip so SVG viewers show `stage`, `when`, `image`, and `needs` on hover -- **`when: on_failure` visual distinction** — dashed border or distinct icon for failure-path jobs -- **Blocked / skipped state colouring** — grey out jobs that are statically unreachable given known `rules:` conditions -- **Interactive HTML output** — self-contained `.html` file with pan/zoom and a job-detail sidebar; no external dependencies -- **Mermaid pipeline output** — keep `pipeline.go` but wire it up through `--graph pipeline --format mermaid` for users who want to paste into mermaid.live +- ~~**Multi-job connector accuracy**~~ — ✓ shipped v0.2.25; classic mode uses a bus-bar pattern (vertical rail at the midpoint + horizontal stubs per job) instead of a single center-to-center line, so uneven columns look correct +- ~~**Job tooltip / detail panel**~~ — ✓ shipped v0.2.25; each chip is wrapped in `<g data-job="…"><title>……` — SVG viewers show stage, when, image, and needs on hover; HTML output uses the data for the sidebar +- ~~**`when: on_failure` visual distinction**~~ — ✓ shipped v0.2.25; dashed chip border + X-mark icon + red circle (`#d9534f`); legend entry added; Mermaid `on_failure` class wired +- ~~**Blocked / skipped state colouring**~~ — ✓ shipped v0.2.25; `glint graph pipeline` accepts context flags (`--branch`, `--tag`, etc.); jobs evaluated as skipped are greyed out (`#868686`) with dimmed text and no icon +- ~~**Interactive HTML output**~~ — ✓ shipped v0.2.25; `glint graph pipeline --format html` writes a self-contained `.html` file with mouse pan/zoom and a click-to-open job-detail sidebar; no external dependencies +- ~~**Mermaid pipeline output**~~ — ✓ shipped v0.2.25; `glint graph pipeline --format mermaid` prints a Mermaid flowchart to stdout (paste into mermaid.live) --- @@ -113,7 +113,7 @@ The SVG renderer and terminal tree cover the basic layout. These would bring it ## Reliability and developer experience -- ~~**Structured rule IDs**~~ — ✓ shipped post-v0.2.0; GL001–GL031 assigned; GL032 added v0.2.11; GL033 added v0.2.15; GL034–GL041 added v0.2.16; output formats (--format json/sarif/junit/github) added v0.2.18; GL042–GL043 added v0.2.20; GL044 added v0.2.24 +- ~~**Structured rule IDs**~~ — ✓ shipped post-v0.2.0; GL001–GL031 assigned; GL032 added v0.2.11; GL033 added v0.2.15; GL034–GL041 added v0.2.16; output formats (--format json/sarif/junit/github) added v0.2.18; GL042–GL043 added v0.2.20; GL044 added v0.2.24; graph improvements shipped v0.2.25 - ~~**`glint explain `**~~ — ✓ shipped v0.2.20; prints rule description, rationale, bad-YAML example, and fix; `glint explain` (no arg) lists all rules - ~~**Semantic versioning and first release**~~ — shipped as `v0.1.0` (2026-06-07) - ~~**Subcommand CLI**~~ — shipped as `v0.2.0` (2026-06-11); `glint check` / `glint graph [mode]` with ruff-style `--help` diff --git a/USAGE.md b/USAGE.md index dc9edb2..9fa6075 100644 --- a/USAGE.md +++ b/USAGE.md @@ -206,7 +206,16 @@ glint graph includes .gitlab-ci.yml > includes.mmd glint graph pipeline .gitlab-ci.yml # prints the output path, e.g.: glint-out/pipeline-20260614-143022.png -# Mermaid to stdout + pipeline file path to stderr +# Pipeline graph with skipped-job colouring (grey out context-unreachable jobs) +glint graph pipeline --branch main .gitlab-ci.yml + +# Interactive HTML with pan/zoom and job-detail sidebar +glint graph pipeline --format html .gitlab-ci.yml + +# Mermaid flowchart of the pipeline to stdout +glint graph pipeline --format mermaid .gitlab-ci.yml + +# Mermaid includes graph to stdout + pipeline SVG file path to stderr glint graph all .gitlab-ci.yml > includes.mmd # Custom output directory @@ -224,6 +233,28 @@ include type: orange (main file), purple (project), green (component), blue **Pipeline graph** — GitLab CI-style SVG rendered to a timestamped file. Converted to PNG when `rsvg-convert`, `inkscape`, or `magick` is available. + +**Pipeline graph formats** (`--format`): + +| Flag | Output | +|------|--------| +| `svg` (default) | Write SVG/PNG to `--out` | +| `html` | Write self-contained HTML to `--out` — inline SVG with mouse pan/zoom, drag, and a job-detail sidebar that opens on chip click | +| `mermaid` | Print Mermaid flowchart to stdout | + +**Visual chip styles:** + +| Type | Colour | Icon | Border | +|------|--------|------|--------| +| regular | blue `#1f75cb` | checkmark | solid | +| manual | orange `#fc6d26` | play triangle | solid | +| trigger | purple `#6b4fbb` | chevron | solid | +| delayed | yellow `#fca326` | clock | solid | +| on_failure | red `#d9534f` | X mark | dashed | +| skipped (context) | grey `#868686` | none | solid | + +Pass context flags (`--branch`, `--tag`, `--source`, `--var`) to grey out jobs +that would be skipped in the given pipeline event. DAG mode (Bézier arrows between jobs) activates automatically when any job has a `needs:` list; classic mode uses stage-column connectors otherwise. diff --git a/cmd/glint/main.go b/cmd/glint/main.go index 2c16b12..0856ca1 100644 --- a/cmd/glint/main.go +++ b/cmd/glint/main.go @@ -445,7 +445,8 @@ func cmdGraph(args []string) { gitlabURL := fs.String("gitlab-url", "", "GitLab instance URL (overrides CI_SERVER_URL / GITLAB_URL)") cacheDir := fs.String("cache-dir", "", "directory to cache fetched remote includes (created if needed)") offline := fs.Bool("offline", false, "skip all network calls; serve only from --cache-dir") - out := fs.String("out", "glint-out", "output directory for Mermaid graph files (pipeline mode)") + out := fs.String("out", "glint-out", "output directory for rendered graph files (pipeline mode)") + format := fs.String("format", "svg", "pipeline output format: svg, mermaid, or html") fs.Usage = func() { fmt.Fprintf(os.Stderr, "glint %s\n\n", version) fmt.Fprint(os.Stderr, `Visualise the pipeline as a job tree and/or Mermaid graph. @@ -462,6 +463,15 @@ Options: Output directory for rendered graph files. Used by the pipeline and all modes only. [default: glint-out] + --format + Output format for pipeline mode: svg (default), mermaid, or html. + svg: write a GitLab CI-style SVG/PNG to --out (converted to PNG + when rsvg-convert, inkscape, or magick is available). + mermaid: print a Mermaid flowchart to stdout (paste into mermaid.live). + html: write a self-contained HTML file with pan/zoom and a + job-detail sidebar to --out. + [default: svg] [possible values: svg, mermaid, html] + --token GitLab personal access token. Used to fetch remote project: includes when building the include dependency graph. @@ -518,6 +528,8 @@ Examples: glint graph includes .gitlab-ci.yml > includes.mmd glint graph pipeline .gitlab-ci.yml glint graph pipeline --out /tmp/graphs .gitlab-ci.yml + glint graph pipeline --format mermaid .gitlab-ci.yml + glint graph pipeline --format html .gitlab-ci.yml glint graph all .gitlab-ci.yml > includes.mmd `) } @@ -602,16 +614,29 @@ Examples: case "includes": fmt.Print(graph.Includes(path, p.Include, cfg)) case "pipeline": - outPath, err := graph.RenderPipeline(p, *out) - if err != nil { - fmt.Fprintf(os.Stderr, "error: rendering pipeline graph: %v\n", err) - exit(2) - return + switch *format { + case "mermaid": + fmt.Print(graph.Pipeline(p)) + case "html": + outPath, err := graph.RenderHTML(p, *out, ctx) + if err != nil { + fmt.Fprintf(os.Stderr, "error: rendering pipeline graph: %v\n", err) + exit(2) + return + } + fmt.Println(outPath) + default: // "svg" + outPath, err := graph.RenderPipeline(p, *out, ctx) + if err != nil { + fmt.Fprintf(os.Stderr, "error: rendering pipeline graph: %v\n", err) + exit(2) + return + } + fmt.Println(outPath) } - fmt.Println(outPath) case "all": fmt.Print(graph.Includes(path, p.Include, cfg)) - outPath, err := graph.RenderPipeline(p, *out) + outPath, err := graph.RenderPipeline(p, *out, ctx) if err != nil { fmt.Fprintf(os.Stderr, "error: rendering pipeline graph: %v\n", err) exit(2) diff --git a/internal/graph/pipeline.go b/internal/graph/pipeline.go index 9ba0800..cd92075 100644 --- a/internal/graph/pipeline.go +++ b/internal/graph/pipeline.go @@ -27,6 +27,7 @@ func Pipeline(p *model.Pipeline) string { w(" classDef manual fill:#fc6d26,stroke:#e56b1f,color:#fff") w(" classDef trigger fill:#6b4fbb,stroke:#5a3fa0,color:#fff") w(" classDef delayed fill:#fca326,stroke:#d98a1e,color:#333") + w(" classDef on_failure fill:#d9534f,stroke:#c0392b,color:#fff") w("") // Collect visible (non-template) job names; sort for stable output. @@ -149,6 +150,8 @@ func jobClass(job model.Job) string { return "manual" case "delayed": return "delayed" + case "on_failure": + return "on_failure" } return "regular" } diff --git a/internal/graph/pipeline_test.go b/internal/graph/pipeline_test.go index a4ff06c..61008fc 100644 --- a/internal/graph/pipeline_test.go +++ b/internal/graph/pipeline_test.go @@ -105,10 +105,23 @@ func TestSanitizeID(t *testing.T) { func TestJobClass(t *testing.T) { if jobClass(model.Job{When: "manual"}) != "manual" { t.Error("manual") } if jobClass(model.Job{When: "delayed"}) != "delayed" { t.Error("delayed") } + if jobClass(model.Job{When: "on_failure"}) != "on_failure" { t.Error("on_failure") } if jobClass(model.Job{Trigger: "x"}) != "trigger" { t.Error("trigger") } if jobClass(model.Job{}) != "regular" { t.Error("regular") } } +func TestPipeline_OnFailureClass(t *testing.T) { + p := &model.Pipeline{ + Stages: []string{"cleanup"}, + Jobs: map[string]model.Job{ + "cleanup-job": {Name: "cleanup-job", Stage: "cleanup", When: "on_failure"}, + }, + } + out := Pipeline(p) + if !strings.Contains(out, "on_failure") { t.Error("expected on_failure class") } + if !strings.Contains(out, "#d9534f") { t.Error("expected on_failure color in classDef") } +} + // ── needsJobName ────────────────────────────────────────────────────────────── func TestNeedsJobName(t *testing.T) { diff --git a/internal/graph/render.go b/internal/graph/render.go index 99d0dcb..fed0410 100644 --- a/internal/graph/render.go +++ b/internal/graph/render.go @@ -10,34 +10,35 @@ import ( "strings" "time" + "git.k3nny.fr/glint/internal/cicontext" "git.k3nny.fr/glint/internal/model" ) // Layout constants (pixels) – tuned to resemble GitLab's full pipeline graph view. const ( - chipW = 178 // job chip width - chipH = 34 // job chip height - chipGap = 6 // vertical gap between chips in a column - iconCX = 14 // status circle: x offset from chip left edge to circle centre - iconR = 7 // status circle radius (14 px diameter) - textLeft = 27 // job name text: x offset from chip left edge - labelH = 30 // stage-name label area height (text + bottom gap) - topPad = 40 // outer top padding - sidePad = 40 // outer left / right padding - stageGap = 50 // horizontal gap between stage columns (connector space) - botPad = 48 // outer bottom padding (legend lives here) + chipW = 178 // job chip width + chipH = 34 // job chip height + chipGap = 6 // vertical gap between chips in a column + iconCX = 14 // status circle: x offset from chip left edge to circle centre + iconR = 7 // status circle radius (14 px diameter) + textLeft = 27 // job name text: x offset from chip left edge + labelH = 30 // stage-name label area height (text + bottom gap) + topPad = 40 // outer top padding + sidePad = 40 // outer left / right padding + stageGap = 50 // horizontal gap between stage columns (connector space) + botPad = 48 // outer bottom padding (legend lives here) ) type svgPt struct{ x, y int } // RenderPipeline writes a PNG (or SVG fallback) file with a GitLab CI-style // pipeline layout and returns the path to the generated file. -func RenderPipeline(p *model.Pipeline, outDir string) (string, error) { +func RenderPipeline(p *model.Pipeline, outDir string, ctx *cicontext.Context) (string, error) { if err := os.MkdirAll(outDir, 0o755); err != nil { return "", fmt.Errorf("creating output directory %s: %w", outDir, err) } - svg := pipelineSVG(p) + svg := pipelineSVG(p, ctx) ts := time.Now().Format("20060102-150405") svgPath := filepath.Join(outDir, "pipeline-"+ts+".svg") @@ -53,6 +54,24 @@ func RenderPipeline(p *model.Pipeline, outDir string) (string, error) { return svgPath, nil } +// RenderHTML writes a self-contained HTML file with the pipeline graph embedded +// inline with pan/zoom and a job-detail sidebar, then returns the output path. +func RenderHTML(p *model.Pipeline, outDir string, ctx *cicontext.Context) (string, error) { + if err := os.MkdirAll(outDir, 0o755); err != nil { + return "", fmt.Errorf("creating output directory %s: %w", outDir, err) + } + + svg := pipelineSVG(p, ctx) + html := htmlPage(svg) + + ts := time.Now().Format("20060102-150405") + htmlPath := filepath.Join(outDir, "pipeline-"+ts+".html") + if err := os.WriteFile(htmlPath, []byte(html), 0o644); err != nil { + return "", fmt.Errorf("writing HTML: %w", err) + } + return htmlPath, nil +} + // convertToPNG tries rsvg-convert, Inkscape, magick, and convert (not on Windows). func convertToPNG(svgPath, pngPath string) bool { candidates := [][]string{ @@ -75,7 +94,7 @@ func convertToPNG(svgPath, pngPath string) bool { return false } -func pipelineSVG(p *model.Pipeline) string { +func pipelineSVG(p *model.Pipeline, ctx *cicontext.Context) string { // Collect visible (non-template) job names in sorted order. var visible []string for name := range p.Jobs { @@ -89,6 +108,16 @@ func pipelineSVG(p *model.Pipeline) string { return svgEmpty() } + // Precompute which jobs are skipped in the given context. + skippedJobs := make(map[string]bool) + if ctx != nil { + for _, name := range visible { + if cicontext.EvalJob(p.Jobs[name], ctx) == cicontext.JobSkipped { + skippedJobs[name] = true + } + } + } + // Group by stage; fall back to "test" (GitLab default) when stage is unset. byStage := make(map[string][]string) for _, name := range visible { @@ -120,8 +149,6 @@ func pipelineSVG(p *model.Pipeline) string { } // Compute per-stage column heights and job anchor points for connectors. - colH := make([]int, len(stages)) // height of the chip stack (no label) - colCtY := make([]int, len(stages)) // y centre of the chip stack maxColH := 0 rightMid := make(map[string]svgPt) leftMid := make(map[string]svgPt) @@ -131,7 +158,6 @@ func pipelineSVG(p *model.Pipeline) string { sort.Strings(jobs) n := len(jobs) h := n*chipH + max(0, n-1)*chipGap - colH[i] = h if h > maxColH { maxColH = h } @@ -141,7 +167,6 @@ func pipelineSVG(p *model.Pipeline) string { rightMid[name] = svgPt{cx + chipW, chy + chipH/2} leftMid[name] = svgPt{cx, chy + chipH/2} } - colCtY[i] = topPad + labelH + h/2 } svgW := sidePad*2 + len(stages)*chipW + max(0, len(stages)-1)*stageGap @@ -190,29 +215,73 @@ func pipelineSVG(p *model.Pipeline) string { wf(` `, cx, topPad+21, cx+chipW, topPad+21) - // Job chips. + // Job chips – each wrapped in a with tooltip metadata. for j, name := range jobs { job := p.Jobs[name] chy := topPad + labelH + j*(chipH+chipGap) + isSkipped := skippedJobs[name] + + // Build content: shown in the HTML sidebar and SVG viewer tooltips. + desc := "stage: " + stage + if job.When != "" { + desc += "\nwhen: " + job.When + } + if img := imageString(job.Image); img != "" { + desc += "\nimage: " + img + } + var needNames []string + for _, n := range job.Needs { + if s := needsJobName(n); s != "" { + needNames = append(needNames, s) + } + } + if len(needNames) > 0 { + desc += "\nneeds: " + strings.Join(needNames, ", ") + } + if isSkipped { + desc += "\nstate: skipped" + } + + // data-job attribute enables JS click detection in the HTML output. + wf(` `, svgEsc(name)) + wf(` %s`, svgEsc(name)) + wf(` %s`, svgEsc(desc)) + color := chipColor(job) + if isSkipped { + color = "#868686" + } // Chip card (white, rounded, subtle border + shadow). - wf(` `, - cx, chy, chipW, chipH) + // on_failure jobs get a dashed border to signal the failure path. + dashAttr := "" + if !isSkipped && job.When == "on_failure" { + dashAttr = ` stroke-dasharray="4,3"` + } + wf(` `, + cx, chy, chipW, chipH, dashAttr) // Colored status indicator circle. - wf(` `, + wf(` `, cx+iconCX, chy+chipH/2, iconR, color) - // Icon symbol inside the circle. - drawChipIcon(&sb, job, cx+iconCX, chy+chipH/2) + // Icon inside the circle (omitted for skipped — grey circle speaks for itself). + if !isSkipped { + drawChipIcon(&sb, job, cx+iconCX, chy+chipH/2) + } - // Job name text. - wf(` %s`, - cx+textLeft, chy+chipH/2, svgEsc(svgTrunc(name, 20))) + `font-size="13" fill="%s">%s`, + cx+textLeft, chy+chipH/2, textColor, svgEsc(svgTrunc(name, 20))) + + wf(` `) } } @@ -241,27 +310,54 @@ func pipelineSVG(p *model.Pipeline) string { } } } else { - // Classic: one connector per adjacent stage pair. + // Classic: bus-bar connectors – every job in stage[i] fans to a vertical + // bus at the midpoint column gap, then fans out to every job in stage[i+1]. + // This gives each job pair its own visual connection instead of a single + // center-to-center line that misses jobs at the top and bottom of columns. for i := 0; i < len(stages)-1; i++ { - x1 := sidePad + i*(chipW+stageGap) + chipW - x2 := sidePad + (i+1)*(chipW+stageGap) - y1 := colCtY[i] - y2 := colCtY[i+1] + x1 := sidePad + i*(chipW+stageGap) + chipW // right edge of left column + x2 := sidePad + (i+1)*(chipW+stageGap) // left edge of right column midX := (x1 + x2) / 2 - if y1 == y2 { - // Straight horizontal line. - wf(` `, - x1, y1, x2-7, y2, connStroke) - } else { - // L-shaped elbow: right → vertical → right. - wf(` `, - x1, y1, midX, y1, midX, y2, x2-7, y2, connStroke) + srcJobs := byStage[stages[i]] + sort.Strings(srcJobs) + dstJobs := byStage[stages[i+1]] + sort.Strings(dstJobs) + + // Collect all Y midpoints to span the vertical bus bar. + var allYs []int + srcY := make([]int, len(srcJobs)) + dstY := make([]int, len(dstJobs)) + for j, name := range srcJobs { + srcY[j] = rightMid[name].y + allYs = append(allYs, srcY[j]) + } + for j, name := range dstJobs { + dstY[j] = leftMid[name].y + allYs = append(allYs, dstY[j]) + } + sort.Ints(allYs) + busMinY, busMaxY := allYs[0], allYs[len(allYs)-1] + + // Vertical bus bar at midX (only drawn when there are multiple Y levels). + if busMinY < busMaxY { + wf(` `, + midX, busMinY, midX, busMaxY, connStroke) + } + + // Horizontal stubs from each source job to the bus. + for _, y := range srcY { + wf(` `, + x1, y, midX, y, connStroke) + } + + // Horizontal stubs from bus to each destination job, with arrowhead. + for _, y := range dstY { + wf(` `, + midX, y, x2-7, y, connStroke) + wf(` `, + x2-7, y-4, x2, y, x2-7, y+4, connStroke) } - // Arrowhead at the destination. - wf(` `, - x2-7, y2-4, x2, y2, x2-7, y2+4, connStroke) } } @@ -271,6 +367,7 @@ func pipelineSVG(p *model.Pipeline) string { {"#fc6d26", "manual"}, {"#6b4fbb", "trigger"}, {"#fca326", "delayed"}, + {"#d9534f", "on_failure"}, } const legendItemW = 82 legendY := topPad + labelH + maxColH + botPad/2 @@ -293,7 +390,7 @@ func pipelineSVG(p *model.Pipeline) string { func drawChipIcon(sb *strings.Builder, job model.Job, cx, cy int) { if job.Trigger != nil { // Right-pointing chevron for trigger jobs. - fmt.Fprintf(sb, " \n", cx-3, cy-3, cx+3, cy, cx-3, cy+3) return @@ -301,18 +398,24 @@ func drawChipIcon(sb *strings.Builder, job model.Job, cx, cy int) { switch job.When { case "manual": // Filled play triangle. - fmt.Fprintf(sb, " \n", + fmt.Fprintf(sb, " \n", cx-3, cy-4, cx+5, cy, cx-3, cy+4) case "delayed": - // Clock hands: vertical + horizontal. - fmt.Fprintf(sb, " \n", cx, cy) - fmt.Fprintf(sb, " \n", + // Clock: circle + hands. + fmt.Fprintf(sb, " \n", cx, cy) + fmt.Fprintf(sb, " \n", cx, cy, cx, cy-3) - fmt.Fprintf(sb, " \n", + fmt.Fprintf(sb, " \n", cx, cy, cx+2, cy+1) + case "on_failure": + // X mark for failure-path jobs. + fmt.Fprintf(sb, " \n", + cx-3, cy-3, cx+3, cy+3) + fmt.Fprintf(sb, " \n", + cx+3, cy-3, cx-3, cy+3) default: - // Regular job: small white checkmark outline. - fmt.Fprintf(sb, " \n", cx-3, cy, cx-1, cy+3, cx+4, cy-3) } @@ -327,10 +430,25 @@ func chipColor(job model.Job) string { return "#fc6d26" case "delayed": return "#fca326" + case "on_failure": + return "#d9534f" } return "#1f75cb" } +// imageString extracts the image name from a job Image field (string or map form). +func imageString(img any) string { + switch v := img.(type) { + case string: + return v + case map[string]any: + if name, ok := v["name"].(string); ok { + return name + } + } + return "" +} + func svgEsc(s string) string { s = strings.ReplaceAll(s, "&", "&") s = strings.ReplaceAll(s, "<", "<") @@ -356,3 +474,179 @@ func svgEmpty() string { ``, w, h, w, h, w/2, h/2) } + +// htmlPage wraps an SVG pipeline graph in a self-contained HTML page with +// mouse pan/zoom and a job-detail sidebar that appears on chip click. +func htmlPage(svgContent string) string { + var sb strings.Builder + sb.WriteString(` + + + + +Pipeline Graph + + + + +
+
+`) + sb.WriteString(svgContent) + sb.WriteString(` +
+
+ + + +`) + return sb.String() +} diff --git a/internal/graph/render_test.go b/internal/graph/render_test.go index 36c08d5..20363a9 100644 --- a/internal/graph/render_test.go +++ b/internal/graph/render_test.go @@ -5,6 +5,7 @@ import ( "strings" "testing" + "git.k3nny.fr/glint/internal/cicontext" "git.k3nny.fr/glint/internal/model" ) @@ -59,9 +60,20 @@ func TestChipColor(t *testing.T) { if chipColor(model.Job{Trigger: "x"}) != "#6b4fbb" { t.Error("trigger color") } if chipColor(model.Job{When: "manual"}) != "#fc6d26" { t.Error("manual color") } if chipColor(model.Job{When: "delayed"}) != "#fca326" { t.Error("delayed color") } + if chipColor(model.Job{When: "on_failure"}) != "#d9534f" { t.Error("on_failure color") } if chipColor(model.Job{}) != "#1f75cb" { t.Error("regular color") } } +// ── imageString ─────────────────────────────────────────────────────────────── + +func TestImageString(t *testing.T) { + if imageString("alpine") != "alpine" { t.Error("string form") } + if imageString(map[string]any{"name": "golang:1.21"}) != "golang:1.21" { t.Error("map form") } + if imageString(map[string]any{"other": "x"}) != "" { t.Error("map without name key") } + if imageString(nil) != "" { t.Error("nil") } + if imageString(42) != "" { t.Error("unexpected type") } +} + // ── drawChipIcon ────────────────────────────────────────────────────────────── func TestDrawChipIcon(t *testing.T) { @@ -72,6 +84,7 @@ func TestDrawChipIcon(t *testing.T) { {model.Job{Trigger: "x"}, " elements for connectors + if !strings.Contains(svg, " connector in classic mode") + } +} + +func TestPipelineSVG_ClassicMode_MultiJob(t *testing.T) { + // Two source jobs, two destination jobs → bus-bar with vertical segment + p := &model.Pipeline{ + Stages: []string{"build", "test"}, + Jobs: map[string]model.Job{ + "build-a": {Name: "build-a", Stage: "build"}, + "build-b": {Name: "build-b", Stage: "build"}, + "test-a": {Name: "test-a", Stage: "test"}, + "test-b": {Name: "test-b", Stage: "test"}, + }, + } + svg := pipelineSVG(p, nil) + // Bus bar: horizontal stubs from each src + dst, plus a vertical bus line + // and an arrowhead polygon for each dst job. + if !strings.Contains(svg, " in multi-job classic mode") } } @@ -118,7 +150,7 @@ func TestPipelineSVG_DAGMode(t *testing.T) { "test-job": {Name: "test-job", Stage: "test", Needs: []any{"build-job"}}, }, } - svg := pipelineSVG(p) + svg := pipelineSVG(p, nil) // DAG mode draws bezier curves if !strings.Contains(svg, " connector in DAG mode") @@ -126,7 +158,7 @@ func TestPipelineSVG_DAGMode(t *testing.T) { } func TestPipelineSVG_DAGMode_StraightConnector(t *testing.T) { - // Two stages at same height → straight connector in classic mode + // Two stages at same height → straight connector in classic mode p := &model.Pipeline{ Stages: []string{"a", "b"}, Jobs: map[string]model.Job{ @@ -134,7 +166,7 @@ func TestPipelineSVG_DAGMode_StraightConnector(t *testing.T) { "j2": {Name: "j2", Stage: "b"}, }, } - svg := pipelineSVG(p) + svg := pipelineSVG(p, nil) if !strings.Contains(svg, " and should appear inside the wrapper + if !strings.Contains(svg, `build-job`) { + t.Error("expected build-job") + } + if !strings.Contains(svg, ``) { + t.Error("expected element") + } + if !strings.Contains(svg, "image: golang:1.21") { + t.Error("expected image in desc") + } + if !strings.Contains(svg, "needs: prep-job") { + t.Error("expected needs in desc") + } + if !strings.Contains(svg, `data-job="build-job"`) { + t.Error("expected data-job attribute") + } +} + +func TestPipelineSVG_SkippedJob(t *testing.T) { + // A job with rules that never match in the given context should be greyed out. + p := &model.Pipeline{ + Stages: []string{"deploy"}, + Jobs: map[string]model.Job{ + "deploy-job": { + Name: "deploy-job", + Stage: "deploy", + Script: []any{"deploy.sh"}, + Rules: []model.Rule{ + {If: `$CI_COMMIT_TAG != ""`, When: "on_success"}, + }, + }, + }, + } + // Branch context: CI_COMMIT_TAG is empty → rule doesn't match → job skipped + ctx := cicontext.New("main", "", "push", nil) + svg := pipelineSVG(p, ctx) + + // Skipped jobs use grey (#868686) instead of the regular blue + if !strings.Contains(svg, `fill="#868686"`) { + t.Error("expected grey fill for skipped job circle") + } + // Skipped state should appear in the tooltip desc + if !strings.Contains(svg, "state: skipped") { + t.Error("expected 'state: skipped' in tooltip desc") + } +} + +func TestPipelineSVG_ContextNil(t *testing.T) { + // nil context → no skipped jobs, regular colors + p := &model.Pipeline{ + Stages: []string{"build"}, + Jobs: map[string]model.Job{ + "j": {Name: "j", Stage: "build"}, + }, + } + svg := pipelineSVG(p, nil) + if !strings.Contains(svg, `fill="#1f75cb"`) { + t.Error("expected regular blue fill with nil context") + } +} + // ── RenderPipeline ──────────────────────────────────────────────────────────── func TestRenderPipeline(t *testing.T) { @@ -186,7 +298,7 @@ func TestRenderPipeline(t *testing.T) { }, } dir := t.TempDir() - path, err := RenderPipeline(p, dir) + path, err := RenderPipeline(p, dir, nil) if err != nil { t.Fatalf("RenderPipeline: %v", err) } @@ -202,7 +314,7 @@ func TestRenderPipeline_InvalidDir(t *testing.T) { if err := os.WriteFile(filePath, []byte("x"), 0o644); err != nil { t.Fatal(err) } - _, err := RenderPipeline(&model.Pipeline{}, filePath+"/nested") + _, err := RenderPipeline(&model.Pipeline{}, filePath+"/nested", nil) if err == nil { t.Error("expected error writing to path under a file") } @@ -222,7 +334,7 @@ func TestRenderPipeline_WriteFileFails(t *testing.T) { Stages: []string{"build"}, Jobs: map[string]model.Job{"j": {Name: "j", Stage: "build"}}, } - _, err := RenderPipeline(p, dir) + _, err := RenderPipeline(p, dir, nil) if err == nil { t.Error("expected error when writing SVG to read-only directory") } @@ -241,7 +353,7 @@ func TestRenderPipeline_SVGFallback(t *testing.T) { Jobs: map[string]model.Job{"j": {Name: "j", Stage: "build"}}, } dir := t.TempDir() - path, err := RenderPipeline(p, dir) + path, err := RenderPipeline(p, dir, nil) if err != nil { t.Fatalf("RenderPipeline: %v", err) } @@ -264,7 +376,7 @@ func TestConvertToPNG_NoConverter(t *testing.T) { func TestConvertToPNG_FakeConverter(t *testing.T) { // Install a fake rsvg-convert that just creates the output file and exits 0. - // This exercises the "return true" branch (line 72) and os.Remove in RenderPipeline. + // This exercises the "return true" branch and os.Remove in RenderPipeline. binDir := t.TempDir() script := "#!/bin/sh\n# rsvg-convert --output \ncp \"$3\" \"$2\"\n" fakeBin := binDir + "/rsvg-convert" @@ -303,7 +415,7 @@ func TestRenderPipeline_PNGConversion(t *testing.T) { Jobs: map[string]model.Job{"j": {Name: "j", Stage: "build"}}, } dir := t.TempDir() - path, err := RenderPipeline(p, dir) + path, err := RenderPipeline(p, dir, nil) if err != nil { t.Fatalf("RenderPipeline: %v", err) } @@ -315,7 +427,7 @@ func TestRenderPipeline_PNGConversion(t *testing.T) { // ── pipelineSVG coverage gaps ───────────────────────────────────────────────── func TestPipelineSVG_LShapedElbow(t *testing.T) { - // Classic mode with unequal stage sizes → different column heights → L-shaped elbow + // Classic mode with unequal stage sizes → vertical bus bar required p := &model.Pipeline{ Stages: []string{"build", "test"}, Jobs: map[string]model.Job{ @@ -324,9 +436,10 @@ func TestPipelineSVG_LShapedElbow(t *testing.T) { "j3": {Name: "j3", Stage: "test"}, }, } - svg := pipelineSVG(p) - if !strings.Contains(svg, " for L-shaped elbow connector") + svg := pipelineSVG(p, nil) + // The bus bar is a ; arrowheads are + if !strings.Contains(svg, " arrowhead in bus-bar connector") } } @@ -339,9 +452,82 @@ func TestPipelineSVG_DAGNeedNotInPositionMap(t *testing.T) { ".hidden-template": {Name: ".hidden-template", Stage: "build"}, }, } - svg := pipelineSVG(p) + svg := pipelineSVG(p, nil) // Should render without panic; .hidden-template is not visible so no connector drawn. if !strings.Contains(svg, "") { t.Error("expected DOCTYPE") } + if !strings.Contains(html, "` + html := htmlPage(svgContent) + if !strings.Contains(html, "") { t.Error("expected DOCTYPE") } + if !strings.Contains(html, svgContent) { t.Error("expected SVG embedded in HTML") } + if !strings.Contains(html, "id=\"viewport\"") { t.Error("expected viewport element") } + if !strings.Contains(html, "id=\"sidebar\"") { t.Error("expected sidebar element") } + if !strings.Contains(html, "applyTransform") { t.Error("expected JS transform function") } +}