Implement Azure Local Network Config Tool - Frontend Wizard and Backend CLI

[Copilot]

Implements complete network switch configuration tool per design doc and roadmap: TypeScript wizard → JSON schema → Python CLI → vendor configs.

Architecture

Frontend (TypeScript/Vite) → Standard JSON → Backend (Python) → Dell OS10 .cfg
    4-step wizard              schema.json      validate/transform/generate

Frontend: TypeScript Migration

Converted 1,326-line JavaScript app to typed TypeScript with Vite build system.

Core modules:

• types.ts - Schema-derived interfaces with strict typing
• validator.ts - Ajv-based client validation
• app.ts - Wizard state management and form logic
• utils.ts - Display name mappings and helpers

Bundle: 20.5KB → 6.5KB gzipped, <300ms builds

Backend: Python CLI

Three-command pipeline with role-based transformations:

# Validate against JSON schema
python -m src.cli validate config.json

# Transform with computed values
python -m src.cli transform config.json

# Generate vendor configs
python -m src.cli generate config.json -o output/

Pipeline:

1. validator.py - jsonschema validation + cross-reference checks (VLANs, port-channels, BGP prefix lists)
2. transformer.py - Role-specific computed values:
   • TOR1: VRRP priority 150, MLAG priority 1, MST priority 8192
   • TOR2: VRRP priority 100, MLAG priority 32667, MST priority 16384
   • BMC: null values (no MLAG/BGP)
3. renderer.py - Jinja2 template engine with vendor selection
4. templates/ - 8 Dell OS10 production templates

Testing

• Backend: 29 pytest tests, 80% coverage
• Frontend: TypeScript strict mode, zero compilation errors
• E2E: Playwright test suite for wizard flows
• Security: CodeQL scan passes (0 alerts)

Example Usage

Frontend wizard exports Standard JSON:

{
  "switch": {
    "vendor": "dellemc",
    "role": "TOR1",
    "hostname": "rack1-tor1"
  },
  "vlans": [...],
  "bgp": {...}
}

Backend processes to Dell OS10 config with computed priorities:

hostname rack1-tor1
vrrp priority 150
vpc priority 1
spanning-tree mst 0 priority 8192

Deployment

GitHub Pages workflow updated for TypeScript build. Frontend served statically, backend runs locally via CLI.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• esm.ubuntu.com
  • Triggering command: /usr/lib/apt/methods/https /usr/lib/apt/methods/https nerator e_modules/.bin/s--noprofile node /hom�� d/index.html git rgo/bin/bash --global credential.helpediff work_Switch_Conf--name-only bash --no�� assword=$GITHUB_TOKEN"; }; f get assword=$GITHUB_TOKEN"; }; f get cal/bin/bash get --global /home/REDACTED/.coplaywright install chromium --with-deps tr (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Start implementation

The user has attached the following file paths as relevant context:

• .github/copilot-instructions.md

[Chronological Review: The conversation began with the user requesting a comprehensive project refresh based on design and roadmap documents. The user specified the need for a granular implementation plan, including file-level details, dependency analysis, consistency checks, logic breakdowns, and validation steps. The user then provided additional notes for refinement, emphasizing the importance of the design and roadmap as the single source of truth, the need for standard JSON definitions, and the requirement for acceptance criteria. The user also inquired about backend development plans and requested a complete plan for all phases (2, 3, and 4) to facilitate a smooth transition to cloud execution. The user made further requests to refine example JSON, install Playwright for validation, and reiterated that both frontend and backend development needed to be refreshed based on the new design and roadmap. The conversation culminated in the user asking to run the implementation in the cloud and to start the implementation.]

[Intent Mapping:

1. "I want to perform a comprehensive project refresh based on #design-doc.md and #roadmap.md." - Request for a detailed implementation plan.
2. "there are few notes pls update accordingly:" - Request for updates based on additional notes.
3. "I did not see any backend dev plan, are you plan for next phase?" - Inquiry about backend development.
4. "can you pls plan all phases to be done..." - Request for a complete plan for multiple phases.
5. "one more minor thing in phase2, pls refine the example json..." - Request for specific refinements in JSON.
6. "laso, I installed phaywright..." - Informing about Playwright installation for validation.
7. "Ok, pls provide the full plan, and let me review it again" - Request for a complete plan for review.
8. "just to make it clear, the frontend has not been finished..." - Clarification on the status of the frontend.
9. "same thing to backend, nothing being done so far..." - Clarification on the backend status and request for a refresh.
10. "looks good, can you run this in cloud?" - Request to execute the plan in the cloud.
11. "Start implementation" - Command to initiate the implementation.]

[Technical Inventory:

• Tools: create_file (used to create the implementation plan file).
• Technologies: Playwright (for validation).
• Documentation: design-doc.md, roadmap.md (as sources of truth for the project).]

[Code Archaeology: No specific code files or functions were discussed in detail, but the user emphasized the need for a comprehensive plan that includes file modifications and logic breakdowns.]

[Progress Assessment: The user has outlined the need for a complete implementation plan covering multiple phases, with specific requests for refinements and clarifications. The frontend and backend development are both acknowledged as needing a refresh.]

[Context Validation: All critical information for continuation is captured, including user requests for specific refinements, the need for a comprehensive plan, and the emphasis on using design and roadmap documents as references.]

[Recent Commands Analysis:

• Last Agent Commands: The user requested to "run this in cloud" and "Start implementation."
• Tool Results Summary: The tool 'create_file' was referenced for creating the implementation plan, but no specific results were returned as the focus was on preparing the plan.
• Pre-Summary State: The agent was actively preparing to execute the implementation plan in the cloud when the token budget was exceeded.
• Operation Context: These commands were executed to align with the user's goal of transitioning the project to the cloud for execution and implementation.]

1. Conversation Overview: - Primary Objectives: The user requested a comprehensive project refresh based on design and roadmap documents, emphasizing the need for a detailed implementation plan and specific refinements. - Session Context: The conversation progressed from initial requests for a project refresh to detailed inquiries about backend development, JSON refinements, and the overall implementation plan for multiple phases. - User Intent Evolution: The user's needs evolved from seeking a detailed plan to requesting specific refinements and clarifications, culminating in a request to run the implementation in the cloud.

2. Technical Foundation:

• Design Document: design-doc.md - serves as a single source of truth for the project.
• Roadmap Document: roadmap.md - outlines project milestones and acceptance criteria.
• Tool: Playwright - installed for validation purposes.

3. Codebase Status:

• No specific files or code segments were detailed, but the user emphasized the need for a comprehensive plan that includes file modifications and logic breakdowns.

4. Problem Resolution:

• Issues Encountered: The use...

Created from VS Code.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.