prvng_platform/crates/control-center/web/README.md

Control Center Web UI\n\nReact/TypeScript frontend for the Control Center vault secrets management.\n\n## Features\n\n- Secrets List: Browse and filter vault secrets\n- Secret View: View secret details with show/hide value toggle\n- Secret Create/Edit: Create new secrets or update existing ones\n- Secret History: View version history and restore previous versions\n- Copy to Clipboard: Easy copy functionality for secret values\n- Responsive Design: Works on desktop and mobile devices\n\n## Components\n\n### Core Components\n\n- SecretsManager: Main orchestrator component\n- SecretsList: List view with pagination and filtering\n- SecretView: Detailed secret view with metadata\n- SecretCreate: Create/edit form for secrets\n- SecretHistory: Version history with restore functionality\n\n### API Client\n\n- secretsApi: HTTP client for vault secrets endpoints\n- Type-safe request/response handling\n- Error handling with custom error types\n\n## Prerequisites\n\n- Node.js 18+\n- npm or yarn\n- Control Center backend running on http://localhost:8080\n\n## Installation\n\n\ncd provisioning/platform/control-center/web\nnpm install\n\n\n## Development\n\n\n# Start development server\nnpm start\n\n# Build for production\nnpm build\n\n# Run tests\nnpm test\n\n# Lint code\nnpm run lint\n\n# Format code\nnpm run format\n\n\n## Environment Variables\n\nCreate a .env file in the web directory:\n\n\nREACT_APP_API_URL=http://localhost:8080\n\n\n## Usage\n\n### Import and Use\n\n\nimport { SecretsManager } from './components/secrets';\n\nfunction App() {\n return (\n <div className="app">\n <SecretsManager />\n </div>\n );\n}\n\n\n### API Client\n\n\nimport { secretsApi } from './api/secrets';\n\n// Create a secret\nconst secret = await secretsApi.createSecret({\n path: 'database/prod/password',\n value: 'my-secret-value',\n context: 'production',\n metadata: { description: 'Production DB password' },\n});\n\n// Get a secret\nconst secretData = await secretsApi.getSecret('database/prod/password');\n\n// List secrets\nconst { secrets, total } = await secretsApi.listSecrets({\n prefix: 'database/',\n limit: 50,\n offset: 0,\n});\n\n// Update secret\nawait secretsApi.updateSecret('database/prod/password', {\n value: 'new-secret-value',\n});\n\n// Delete secret\nawait secretsApi.deleteSecret('database/prod/password');\n\n// Get history\nconst history = await secretsApi.getSecretHistory('database/prod/password');\n\n// Restore version\nawait secretsApi.restoreSecretVersion('database/prod/password', 2);\n\n\n## Architecture\n\n\nSecretsManager (Orchestrator)\n ├── SecretsList (Browse)\n ├── SecretView (Detail)\n ├── SecretCreate (Create/Edit)\n └── SecretHistory (Versions)\n ↓\n secretsApi (HTTP Client)\n ↓\n Control Center Backend API\n ↓\n KMS Service (Encryption)\n ↓\n RustyVault (Storage)\n\n\n## Security\n\n- MFA Required: All secret operations require MFA verification\n- RBAC: Role-based access control enforced by backend\n- Encrypted Storage: Values encrypted via KMS Service before storage\n- Audit Trail: All operations logged for compliance\n- No Plaintext: Values never stored unencrypted\n- Context Encryption: Optional AAD for additional security\n\n## TypeScript Types\n\nAll components are fully typed. See src/types/secrets.ts for type definitions:\n\n- Secret: Secret metadata\n- SecretWithValue: Secret with decrypted value\n- SecretVersion: Version information\n- SecretHistory: Complete version history\n- CreateSecretRequest: Create request payload\n- UpdateSecretRequest: Update request payload\n- ListSecretsQuery: List query parameters\n- ApiError: Error response type\n\n## Styling\n\nCustom CSS in src/components/secrets/secrets.css. Modify to match your design system.\n\n## Browser Support\n\n- Chrome/Edge 90+\n- Firefox 88+\n- Safari 14+\n\n## License\n\nSee project root LICENSE file.\n\n## Contributing\n\nSee project root CONTRIBUTING.md for contribution guidelines.