opsxsql/docs/frontend-modernization-roadmap.md

Frontend Modernization Roadmap

This roadmap tracks the global cleanup from page-heavy implementation toward production-grade domain modules.

Phase 1: Guardrails

• Add features/* domain boundaries.
• Keep page files below 700 lines.
• Add npm run audit:pages.
• Prefer api/<domain> imports for new code.

Status: started.

Phase 2: Data Assets And Engines

Target pages:

• InstancePage.tsx
• InstanceDetailPage.tsx
• RedisDetailPage.tsx
• MongoDBDetailPage.tsx
• SchemaSidebar.tsx

Target domains:

• features/datasource
• features/datasource/engines/mysql
• features/datasource/engines/postgresql
• features/redis
• features/mongo

Expected outcome:

• MySQL/PostgreSQL/Redis/Mongo share consistent instance headers, metadata panels, query result density, and dangerous-action affordances.
• Engine-specific behavior is isolated.

Phase 3: Query And Change Platform

Target pages:

• QueriesPage.tsx
• TicketCreatePage.tsx
• TicketsPage.tsx
• TicketDetailPage.tsx
• AutoTaskPage.tsx

Target domains:

• features/query
• features/ticket

Expected outcome:

• Query workspace, ticket creation, audit results, execution confirmation, rollback evidence, and todo views use shared production patterns.

Phase 4: Governance And RBAC

Target pages:

• WorkflowPage.tsx
• AuditRulesPage.tsx
• UsersPage.tsx
• RolesPage.tsx
• InstanceGroupPage.tsx
• LdapConfigPage.tsx

Target domains:

• features/governance
• features/rbac

Expected outcome:

• Approval workflow, risk policy, roles, permissions, permission groups, and LDAP sync become coherent domains instead of page-local implementations.

Phase 5: System Operations

Target pages:

• SettingsPage.tsx
• ConfigPlatformPage.tsx
• PlatformConfigPage.tsx
• NotificationPage.tsx
• AnnouncementPage.tsx
• AuditLogsPage.tsx
• AppearanceSettings.tsx

Target domain:

• features/system

Expected outcome:

• System settings, notifications, announcements, audit logs, retention, and appearance use one system-governance layout.