feat: add YAML layout system with CSS Grid renderer#57
Merged
Conversation
added 5 commits
April 5, 2026 02:46
- Add yaml_layout TextField and has_yaml_layout property to DeviceView model - Add migration 0003_deviceview_yaml_layout - Implement layout module: NormalizedLayout model, YAML parser, CSS Grid renderer, legacy CSS adapter, and public API (parse_yaml, render_css, validate_yaml, get_css_for_device_view) - Update prepare() in utils.py to route through get_css_for_device_view() so YAML layouts are preferred over legacy CSS when present - Expose yaml_layout in forms and API serializer
- 43 tests for YAML parser covering sequences, groups, variants, copy_from - 18 tests for CSS Grid renderer covering grid construction and output format - Updated 4 mock objects in test_utils.py to include has_yaml_layout=False
Converts Cisco (C9300-24T, C2960X-24TD-L, C8300-2N2S-4T2X, FPR1120), Generic patch panels (24/48-port UTP, 24xLC, SC-24, LC-48), and Ubiquiti USW-Enterprise-24-PoE to the new YAML layout format
- docs/yaml-layout-schema.md: full schema reference covering version, meta, canvas, views, elements, sequences, groups, spacers, blanks, copy_from, extend_view, and variants with annotated examples - README.md: replace CSS-only How It Works section with dual YAML/CSS format documentation - devcontainer entrypoint: remove failing pre-commit steps
…ayout, add row: field to pattern:all
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
grid-template-areasdocs/yaml-layout-schema.mdcss_to_yamlmanagement command to help migrate existing CSS-based layouts to YAMLDetails
pattern: all,pattern: sequence(withtop-odd/top-even), and explicit port/row definitionsrow:field added to sequence schema for multi-row layoutscss_to_yamlcommand reads existing DeviceView CSS and outputs an equivalent YAML skeletonNotes
Important
After upgrading, run
python manage.py css_to_yamlto generate YAML equivalents for your existing CSS layouts. The CSS renderer continues to work unchanged.