stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity
Files
cf5b72974f923126944f4dcd47e85864ebb31a3b
git.stella-ops.org/docs/features/unchecked/web/three-pane-layout.md

4.5 KiB
Raw Blame History

Three-Pane Layout (Categories/Items/Proof)

Module

Web

Status

IMPLEMENTED

Description

The compare feature implements a three-pane layout with categories, items, and proof panes for side-by-side comparison of scans/policies.

Implementation Details

  • Feature directory: src/Web/StellaOps.Web/src/app/features/triage/
  • Components:
    • ai-code-guard-badge (src/Web/StellaOps.Web/src/app/features/triage/components/ai-code-guard-badge/ai-code-guard-badge.component.ts)
    • ai-recommendation-panel (src/Web/StellaOps.Web/src/app/features/triage/components/ai-recommendation-panel/ai-recommendation-panel.component.ts)
    • attestation-viewer (src/Web/StellaOps.Web/src/app/features/triage/components/attestation-viewer/attestation-viewer.component.ts)
    • bulk-action-modal (src/Web/StellaOps.Web/src/app/features/triage/components/bulk-action-modal/bulk-action-modal.component.ts)
    • case-header (src/Web/StellaOps.Web/src/app/features/triage/components/case-header/case-header.component.ts)
    • decision-drawer-enhanced (src/Web/StellaOps.Web/src/app/features/triage/components/decision-drawer/decision-drawer-enhanced.component.ts)
    • decision-drawer (src/Web/StellaOps.Web/src/app/features/triage/components/decision-drawer/decision-drawer.component.ts)
    • attestation-chain (src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/attestation-chain.component.ts)
    • backport-verdict-badge (src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/backport-verdict-badge.component.ts)
    • binary-diff-tab (src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/binary-diff-tab.component.ts)
    • confidence-meter (src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/confidence-meter.component.ts)
    • diff-tab (src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/diff-tab.component.ts)
    • dsse-badge (src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/dsse-badge.component.ts)
    • evidence-uri-link (src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/evidence-uri-link.component.ts)
    • function-trace (src/Web/StellaOps.Web/src/app/features/triage/components/evidence-panel/function-trace.component.ts)
    • ... and 48 more components
  • Services:
    • advisory-ai (src/Web/StellaOps.Web/src/app/features/triage/services/advisory-ai.service.ts)
    • binary-diff-evidence (src/Web/StellaOps.Web/src/app/features/triage/services/binary-diff-evidence.service.ts)
    • diff-evidence (src/Web/StellaOps.Web/src/app/features/triage/services/diff-evidence.service.ts)
    • display-preferences (src/Web/StellaOps.Web/src/app/features/triage/services/display-preferences.service.ts)
    • evidence-tab (src/Web/StellaOps.Web/src/app/features/triage/services/evidence-tab.service.ts)
    • gating (src/Web/StellaOps.Web/src/app/features/triage/services/gating.service.ts)
    • keyboard-shortcuts (src/Web/StellaOps.Web/src/app/features/triage/services/keyboard-shortcuts.service.ts)
    • reach-graph-slice (src/Web/StellaOps.Web/src/app/features/triage/services/reach-graph-slice.service.ts)
    • reachability (src/Web/StellaOps.Web/src/app/features/triage/services/reachability.service.ts)
    • runtime-evidence (src/Web/StellaOps.Web/src/app/features/triage/services/runtime-evidence.service.ts)
  • Models:
    • src/Web/StellaOps.Web/src/app/features/triage/models/diff-evidence.models.ts
    • src/Web/StellaOps.Web/src/app/features/triage/models/evidence-panel.models.ts
    • src/Web/StellaOps.Web/src/app/features/triage/models/evidence.model.ts
    • src/Web/StellaOps.Web/src/app/features/triage/models/gating.model.ts
    • src/Web/StellaOps.Web/src/app/features/triage/models/reachability.models.ts
  • Source: Feature matrix scan

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to /triage/artifacts
    • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
  • Core verification:
    • Verify the component renders correctly with sample data
    • Verify interactive elements respond to user input
    • Verify data is fetched and displayed from the correct API endpoints
  • 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)