Files
git.stella-ops.org/docs/features/unchecked/web/a-b-deploy-diff-panel.md

2.3 KiB

A/B Deploy Diff Panel

Module

Web

Status

IMPLEMENTED

Description

Full deployment diff panel comparing security state between two image versions (A/B) with SBOM side-by-side view, component diff rows, policy hit annotations, override dialog, and deploy action bar. Enables visual security review before promotion.

Implementation Details

  • Feature directory: src/Web/StellaOps.Web/src/app/features/deploy-diff/
  • Routes: deploy-diff.routes.ts
  • Components:
    • component-diff-row (src/Web/StellaOps.Web/src/app/features/deploy-diff/components/component-diff-row/component-diff-row.component.ts)
    • deploy-action-bar (src/Web/StellaOps.Web/src/app/features/deploy-diff/components/deploy-action-bar/deploy-action-bar.component.ts)
    • deploy-diff-panel (src/Web/StellaOps.Web/src/app/features/deploy-diff/components/deploy-diff-panel/deploy-diff-panel.component.ts)
    • override-dialog (src/Web/StellaOps.Web/src/app/features/deploy-diff/components/override-dialog/override-dialog.component.ts)
    • policy-hit-annotation (src/Web/StellaOps.Web/src/app/features/deploy-diff/components/policy-hit-annotation/policy-hit-annotation.component.ts)
    • sbom-side-by-side (src/Web/StellaOps.Web/src/app/features/deploy-diff/components/sbom-side-by-side/sbom-side-by-side.component.ts)
  • Services:
    • deploy-diff (src/Web/StellaOps.Web/src/app/features/deploy-diff/services/deploy-diff.service.ts)
  • Models:
    • src/Web/StellaOps.Web/src/app/features/deploy-diff/models/deploy-diff.models.ts
  • Source: batch_38/file_18.md

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to /deploy-diff
    • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
  • Core verification:
    • Verify the panel/drawer opens on trigger (click, keyboard shortcut)
    • Verify the panel displays the correct detail data for the selected item
    • Verify the panel can be closed (X button, Escape key, backdrop click)
  • Edge cases:
    • Verify graceful handling when backend API is unavailable (error state)
    • Verify responsive layout at different viewport sizes
    • Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)