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

Control Center Web UI

React/TypeScript frontend for the Control Center vault secrets management.

Features

• Secrets List: Browse and filter vault secrets
• Secret View: View secret details with show/hide value toggle
• Secret Create/Edit: Create new secrets or update existing ones
• Secret History: View version history and restore previous versions
• Copy to Clipboard: Easy copy functionality for secret values
• Responsive Design: Works on desktop and mobile devices

Components

Core Components

• SecretsManager: Main orchestrator component
• SecretsList: List view with pagination and filtering
• SecretView: Detailed secret view with metadata
• SecretCreate: Create/edit form for secrets
• SecretHistory: Version history with restore functionality

API Client

• secretsApi: HTTP client for vault secrets endpoints
• Type-safe request/response handling
• Error handling with custom error types

Prerequisites

• Node.js 18+
• npm or yarn
• Control Center backend running on http://localhost:8080

Installation

cd provisioning/platform/control-center/web
npm install

Development

# Start development server
npm start

# Build for production
npm build

# Run tests
npm test

# Lint code
npm run lint

# Format code
npm run format

Environment Variables

Create a .env file in the web directory:

REACT_APP_API_URL=http://localhost:8080

Usage

Import and Use

import { SecretsManager } from './components/secrets';

function App() {
  return (
    <div className="app">
      <SecretsManager />
    </div>
  );
}

API Client

import { secretsApi } from './api/secrets';

// Create a secret
const secret = await secretsApi.createSecret({
  path: 'database/prod/password',
  value: 'my-secret-value',
  context: 'production',
  metadata: { description: 'Production DB password' },
});

// Get a secret
const secretData = await secretsApi.getSecret('database/prod/password');

// List secrets
const { secrets, total } = await secretsApi.listSecrets({
  prefix: 'database/',
  limit: 50,
  offset: 0,
});

// Update secret
await secretsApi.updateSecret('database/prod/password', {
  value: 'new-secret-value',
});

// Delete secret
await secretsApi.deleteSecret('database/prod/password');

// Get history
const history = await secretsApi.getSecretHistory('database/prod/password');

// Restore version
await secretsApi.restoreSecretVersion('database/prod/password', 2);

Architecture

SecretsManager (Orchestrator)
  ├── SecretsList (Browse)
  ├── SecretView (Detail)
  ├── SecretCreate (Create/Edit)
  └── SecretHistory (Versions)
       ↓
  secretsApi (HTTP Client)
       ↓
  Control Center Backend API
       ↓
  KMS Service (Encryption)
       ↓
  RustyVault (Storage)

Security

• MFA Required: All secret operations require MFA verification
• RBAC: Role-based access control enforced by backend
• Encrypted Storage: Values encrypted via KMS Service before storage
• Audit Trail: All operations logged for compliance
• No Plaintext: Values never stored unencrypted
• Context Encryption: Optional AAD for additional security

TypeScript Types

All components are fully typed. See src/types/secrets.ts for type definitions:

• Secret: Secret metadata
• SecretWithValue: Secret with decrypted value
• SecretVersion: Version information
• SecretHistory: Complete version history
• CreateSecretRequest: Create request payload
• UpdateSecretRequest: Update request payload
• ListSecretsQuery: List query parameters
• ApiError: Error response type

Styling

Custom CSS in src/components/secrets/secrets.css. Modify to match your design system.

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

License

See project root LICENSE file.

Contributing

See project root CONTRIBUTING.md for contribution guidelines.