prvng_platform/crates/control-center/web

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
```plaintext

## Development

```bash
# Start development server
npm start

# Build for production
npm build

# Run tests
npm test

# Lint code
npm run lint

# Format code
npm run format
```plaintext

## Environment Variables

Create a `.env` file in the web directory:

```bash
REACT_APP_API_URL=http://localhost:8080
```plaintext

## Usage

### Import and Use

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

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

### API Client

```typescript
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);
```plaintext

## Architecture

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

## 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.