feat: Implement platform service providers for MinIO and MongoDB
- Added base interface and abstract class for platform service providers. - Created MinIOProvider class for S3-compatible storage with deployment, provisioning, and deprovisioning functionalities. - Implemented MongoDBProvider class for MongoDB service with similar capabilities. - Introduced error handling utilities for better error management. - Developed TokensComponent for managing registry tokens in the UI, including creation, deletion, and display of tokens.
This commit is contained in:
509
ui/src/app/features/tokens/tokens.component.ts
Normal file
509
ui/src/app/features/tokens/tokens.component.ts
Normal file
@@ -0,0 +1,509 @@
|
||||
import { Component, inject, signal, OnInit, computed } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { ApiService } from '../../core/services/api.service';
|
||||
import { ToastService } from '../../core/services/toast.service';
|
||||
import { IRegistryToken, ICreateTokenRequest, IService } from '../../core/types/api.types';
|
||||
import {
|
||||
CardComponent,
|
||||
CardHeaderComponent,
|
||||
CardTitleComponent,
|
||||
CardDescriptionComponent,
|
||||
CardContentComponent,
|
||||
} from '../../ui/card/card.component';
|
||||
import { ButtonComponent } from '../../ui/button/button.component';
|
||||
import { InputComponent } from '../../ui/input/input.component';
|
||||
import { LabelComponent } from '../../ui/label/label.component';
|
||||
import { BadgeComponent } from '../../ui/badge/badge.component';
|
||||
import {
|
||||
TableComponent,
|
||||
TableHeaderComponent,
|
||||
TableBodyComponent,
|
||||
TableRowComponent,
|
||||
TableHeadComponent,
|
||||
TableCellComponent,
|
||||
} from '../../ui/table/table.component';
|
||||
import { SkeletonComponent } from '../../ui/skeleton/skeleton.component';
|
||||
import {
|
||||
DialogComponent,
|
||||
DialogHeaderComponent,
|
||||
DialogTitleComponent,
|
||||
DialogDescriptionComponent,
|
||||
DialogFooterComponent,
|
||||
} from '../../ui/dialog/dialog.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tokens',
|
||||
standalone: true,
|
||||
imports: [
|
||||
FormsModule,
|
||||
RouterLink,
|
||||
CardComponent,
|
||||
CardHeaderComponent,
|
||||
CardTitleComponent,
|
||||
CardDescriptionComponent,
|
||||
CardContentComponent,
|
||||
ButtonComponent,
|
||||
InputComponent,
|
||||
LabelComponent,
|
||||
BadgeComponent,
|
||||
TableComponent,
|
||||
TableHeaderComponent,
|
||||
TableBodyComponent,
|
||||
TableRowComponent,
|
||||
TableHeadComponent,
|
||||
TableCellComponent,
|
||||
SkeletonComponent,
|
||||
DialogComponent,
|
||||
DialogHeaderComponent,
|
||||
DialogTitleComponent,
|
||||
DialogDescriptionComponent,
|
||||
DialogFooterComponent,
|
||||
],
|
||||
template: `
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight">Registry Tokens</h1>
|
||||
<p class="text-muted-foreground">Manage authentication tokens for the Onebox registry</p>
|
||||
</div>
|
||||
<button uiButton (click)="openCreateDialog()">Create Token</button>
|
||||
</div>
|
||||
|
||||
<!-- Global Tokens Section -->
|
||||
<ui-card>
|
||||
<ui-card-header class="flex flex-col space-y-1.5">
|
||||
<ui-card-title>Global Tokens</ui-card-title>
|
||||
<ui-card-description>Tokens that can push images to multiple services</ui-card-description>
|
||||
</ui-card-header>
|
||||
<ui-card-content class="p-0">
|
||||
@if (loading() && globalTokens().length === 0) {
|
||||
<div class="p-6 space-y-4">
|
||||
@for (_ of [1,2]; track $index) {
|
||||
<ui-skeleton class="h-12 w-full" />
|
||||
}
|
||||
</div>
|
||||
} @else if (globalTokens().length === 0) {
|
||||
<div class="p-12 text-center">
|
||||
<p class="text-muted-foreground">No global tokens created</p>
|
||||
<button uiButton variant="outline" class="mt-4" (click)="openCreateDialog('global')">
|
||||
Create Global Token
|
||||
</button>
|
||||
</div>
|
||||
} @else {
|
||||
<ui-table>
|
||||
<ui-table-header>
|
||||
<ui-table-row>
|
||||
<ui-table-head>Name</ui-table-head>
|
||||
<ui-table-head>Scope</ui-table-head>
|
||||
<ui-table-head>Expires</ui-table-head>
|
||||
<ui-table-head>Last Used</ui-table-head>
|
||||
<ui-table-head>Created By</ui-table-head>
|
||||
<ui-table-head class="text-right">Actions</ui-table-head>
|
||||
</ui-table-row>
|
||||
</ui-table-header>
|
||||
<ui-table-body>
|
||||
@for (token of globalTokens(); track token.id) {
|
||||
<ui-table-row [class.opacity-50]="token.isExpired">
|
||||
<ui-table-cell class="font-medium">{{ token.name }}</ui-table-cell>
|
||||
<ui-table-cell>
|
||||
<ui-badge variant="secondary">{{ token.scopeDisplay }}</ui-badge>
|
||||
</ui-table-cell>
|
||||
<ui-table-cell>
|
||||
@if (token.isExpired) {
|
||||
<ui-badge variant="destructive">Expired</ui-badge>
|
||||
} @else if (token.expiresAt) {
|
||||
{{ formatExpiry(token.expiresAt) }}
|
||||
} @else {
|
||||
<span class="text-muted-foreground">Never</span>
|
||||
}
|
||||
</ui-table-cell>
|
||||
<ui-table-cell>
|
||||
@if (token.lastUsedAt) {
|
||||
{{ formatRelativeTime(token.lastUsedAt) }}
|
||||
} @else {
|
||||
<span class="text-muted-foreground">Never</span>
|
||||
}
|
||||
</ui-table-cell>
|
||||
<ui-table-cell>{{ token.createdBy }}</ui-table-cell>
|
||||
<ui-table-cell class="text-right">
|
||||
<button uiButton variant="destructive" size="sm" (click)="confirmDelete(token)">
|
||||
Delete
|
||||
</button>
|
||||
</ui-table-cell>
|
||||
</ui-table-row>
|
||||
}
|
||||
</ui-table-body>
|
||||
</ui-table>
|
||||
}
|
||||
</ui-card-content>
|
||||
</ui-card>
|
||||
|
||||
<!-- CI Tokens Section -->
|
||||
<ui-card>
|
||||
<ui-card-header class="flex flex-col space-y-1.5">
|
||||
<ui-card-title>CI Tokens (Service-specific)</ui-card-title>
|
||||
<ui-card-description>Tokens tied to individual services for CI/CD pipelines</ui-card-description>
|
||||
</ui-card-header>
|
||||
<ui-card-content class="p-0">
|
||||
@if (loading() && ciTokens().length === 0) {
|
||||
<div class="p-6 space-y-4">
|
||||
@for (_ of [1,2]; track $index) {
|
||||
<ui-skeleton class="h-12 w-full" />
|
||||
}
|
||||
</div>
|
||||
} @else if (ciTokens().length === 0) {
|
||||
<div class="p-12 text-center">
|
||||
<p class="text-muted-foreground">No CI tokens created</p>
|
||||
<button uiButton variant="outline" class="mt-4" (click)="openCreateDialog('ci')">
|
||||
Create CI Token
|
||||
</button>
|
||||
</div>
|
||||
} @else {
|
||||
<ui-table>
|
||||
<ui-table-header>
|
||||
<ui-table-row>
|
||||
<ui-table-head>Name</ui-table-head>
|
||||
<ui-table-head>Service</ui-table-head>
|
||||
<ui-table-head>Expires</ui-table-head>
|
||||
<ui-table-head>Last Used</ui-table-head>
|
||||
<ui-table-head>Created By</ui-table-head>
|
||||
<ui-table-head class="text-right">Actions</ui-table-head>
|
||||
</ui-table-row>
|
||||
</ui-table-header>
|
||||
<ui-table-body>
|
||||
@for (token of ciTokens(); track token.id) {
|
||||
<ui-table-row [class.opacity-50]="token.isExpired">
|
||||
<ui-table-cell class="font-medium">{{ token.name }}</ui-table-cell>
|
||||
<ui-table-cell>{{ token.scopeDisplay }}</ui-table-cell>
|
||||
<ui-table-cell>
|
||||
@if (token.isExpired) {
|
||||
<ui-badge variant="destructive">Expired</ui-badge>
|
||||
} @else if (token.expiresAt) {
|
||||
{{ formatExpiry(token.expiresAt) }}
|
||||
} @else {
|
||||
<span class="text-muted-foreground">Never</span>
|
||||
}
|
||||
</ui-table-cell>
|
||||
<ui-table-cell>
|
||||
@if (token.lastUsedAt) {
|
||||
{{ formatRelativeTime(token.lastUsedAt) }}
|
||||
} @else {
|
||||
<span class="text-muted-foreground">Never</span>
|
||||
}
|
||||
</ui-table-cell>
|
||||
<ui-table-cell>{{ token.createdBy }}</ui-table-cell>
|
||||
<ui-table-cell class="text-right">
|
||||
<button uiButton variant="destructive" size="sm" (click)="confirmDelete(token)">
|
||||
Delete
|
||||
</button>
|
||||
</ui-table-cell>
|
||||
</ui-table-row>
|
||||
}
|
||||
</ui-table-body>
|
||||
</ui-table>
|
||||
}
|
||||
</ui-card-content>
|
||||
</ui-card>
|
||||
</div>
|
||||
|
||||
<!-- Create Token Dialog -->
|
||||
<ui-dialog [open]="createDialogOpen()" (openChange)="createDialogOpen.set($event)">
|
||||
<ui-dialog-header>
|
||||
<ui-dialog-title>Create Registry Token</ui-dialog-title>
|
||||
<ui-dialog-description>
|
||||
Create a new token for pushing images to the Onebox registry
|
||||
</ui-dialog-description>
|
||||
</ui-dialog-header>
|
||||
<div class="grid gap-4 py-4">
|
||||
<div class="space-y-2">
|
||||
<label uiLabel>Token Name</label>
|
||||
<input uiInput [(ngModel)]="createForm.name" placeholder="e.g., deploy-token" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label uiLabel>Token Type</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="type" value="global" [(ngModel)]="createForm.type" class="accent-primary" />
|
||||
<span>Global (multiple services)</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="type" value="ci" [(ngModel)]="createForm.type" class="accent-primary" />
|
||||
<span>CI (single service)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@if (createForm.type === 'global') {
|
||||
<div class="space-y-2">
|
||||
<label uiLabel>Scope</label>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<input type="checkbox" id="all-services" [(ngModel)]="scopeAll" class="accent-primary" />
|
||||
<label for="all-services" class="cursor-pointer">All services</label>
|
||||
</div>
|
||||
@if (!scopeAll) {
|
||||
<div class="border rounded-md p-3 max-h-48 overflow-y-auto space-y-2">
|
||||
@for (service of services(); track service.name) {
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
[checked]="selectedServices().includes(service.name)"
|
||||
(change)="toggleService(service.name)"
|
||||
class="accent-primary"
|
||||
/>
|
||||
<span>{{ service.name }}</span>
|
||||
</label>
|
||||
}
|
||||
@if (services().length === 0) {
|
||||
<p class="text-sm text-muted-foreground">No services available</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="space-y-2">
|
||||
<label uiLabel>Service</label>
|
||||
<select [(ngModel)]="selectedSingleService" class="w-full p-2 border rounded-md bg-background">
|
||||
<option value="">Select a service</option>
|
||||
@for (service of services(); track service.name) {
|
||||
<option [value]="service.name">{{ service.name }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
<div class="space-y-2">
|
||||
<label uiLabel>Expiration</label>
|
||||
<select [(ngModel)]="createForm.expiresIn" class="w-full p-2 border rounded-md bg-background">
|
||||
<option value="30d">30 days</option>
|
||||
<option value="90d">90 days</option>
|
||||
<option value="365d">365 days</option>
|
||||
<option value="never">Never</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<ui-dialog-footer>
|
||||
<button uiButton variant="outline" (click)="createDialogOpen.set(false)">Cancel</button>
|
||||
<button uiButton (click)="createToken()" [disabled]="creating()">
|
||||
@if (creating()) {
|
||||
Creating...
|
||||
} @else {
|
||||
Create Token
|
||||
}
|
||||
</button>
|
||||
</ui-dialog-footer>
|
||||
</ui-dialog>
|
||||
|
||||
<!-- Token Created Dialog -->
|
||||
<ui-dialog [open]="tokenCreatedDialogOpen()" (openChange)="tokenCreatedDialogOpen.set($event)">
|
||||
<ui-dialog-header>
|
||||
<ui-dialog-title>Token Created</ui-dialog-title>
|
||||
<ui-dialog-description>
|
||||
Copy this token now. You won't be able to see it again!
|
||||
</ui-dialog-description>
|
||||
</ui-dialog-header>
|
||||
<div class="py-4">
|
||||
<div class="p-4 bg-muted rounded-md font-mono text-sm break-all">
|
||||
{{ createdPlainToken() }}
|
||||
</div>
|
||||
</div>
|
||||
<ui-dialog-footer>
|
||||
<button uiButton (click)="copyToken()">Copy Token</button>
|
||||
<button uiButton variant="outline" (click)="tokenCreatedDialogOpen.set(false)">Done</button>
|
||||
</ui-dialog-footer>
|
||||
</ui-dialog>
|
||||
|
||||
<!-- Delete Confirmation Dialog -->
|
||||
<ui-dialog [open]="deleteDialogOpen()" (openChange)="deleteDialogOpen.set($event)">
|
||||
<ui-dialog-header>
|
||||
<ui-dialog-title>Delete Token</ui-dialog-title>
|
||||
<ui-dialog-description>
|
||||
Are you sure you want to delete "{{ tokenToDelete()?.name }}"? This action cannot be undone.
|
||||
</ui-dialog-description>
|
||||
</ui-dialog-header>
|
||||
<ui-dialog-footer>
|
||||
<button uiButton variant="outline" (click)="deleteDialogOpen.set(false)">Cancel</button>
|
||||
<button uiButton variant="destructive" (click)="deleteToken()">Delete</button>
|
||||
</ui-dialog-footer>
|
||||
</ui-dialog>
|
||||
`,
|
||||
})
|
||||
export class TokensComponent implements OnInit {
|
||||
private api = inject(ApiService);
|
||||
private toast = inject(ToastService);
|
||||
|
||||
tokens = signal<IRegistryToken[]>([]);
|
||||
services = signal<IService[]>([]);
|
||||
loading = signal(false);
|
||||
creating = signal(false);
|
||||
|
||||
createDialogOpen = signal(false);
|
||||
tokenCreatedDialogOpen = signal(false);
|
||||
deleteDialogOpen = signal(false);
|
||||
tokenToDelete = signal<IRegistryToken | null>(null);
|
||||
createdPlainToken = signal('');
|
||||
|
||||
// Form state
|
||||
createForm: ICreateTokenRequest = {
|
||||
name: '',
|
||||
type: 'global',
|
||||
scope: 'all',
|
||||
expiresIn: '90d',
|
||||
};
|
||||
scopeAll = true;
|
||||
selectedServices = signal<string[]>([]);
|
||||
selectedSingleService = '';
|
||||
|
||||
// Computed signals for filtered tokens
|
||||
globalTokens = computed(() => this.tokens().filter(t => t.type === 'global'));
|
||||
ciTokens = computed(() => this.tokens().filter(t => t.type === 'ci'));
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadTokens();
|
||||
this.loadServices();
|
||||
}
|
||||
|
||||
async loadTokens(): Promise<void> {
|
||||
this.loading.set(true);
|
||||
try {
|
||||
const response = await this.api.getRegistryTokens();
|
||||
if (response.success && response.data) {
|
||||
this.tokens.set(response.data);
|
||||
}
|
||||
} catch {
|
||||
this.toast.error('Failed to load tokens');
|
||||
} finally {
|
||||
this.loading.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
async loadServices(): Promise<void> {
|
||||
try {
|
||||
const response = await this.api.getServices();
|
||||
if (response.success && response.data) {
|
||||
this.services.set(response.data);
|
||||
}
|
||||
} catch {
|
||||
// Silent fail - services list is optional
|
||||
}
|
||||
}
|
||||
|
||||
openCreateDialog(type?: 'global' | 'ci'): void {
|
||||
this.createForm = {
|
||||
name: '',
|
||||
type: type || 'global',
|
||||
scope: 'all',
|
||||
expiresIn: '90d',
|
||||
};
|
||||
this.scopeAll = true;
|
||||
this.selectedServices.set([]);
|
||||
this.selectedSingleService = '';
|
||||
this.createDialogOpen.set(true);
|
||||
}
|
||||
|
||||
toggleService(serviceName: string): void {
|
||||
const current = this.selectedServices();
|
||||
if (current.includes(serviceName)) {
|
||||
this.selectedServices.set(current.filter(s => s !== serviceName));
|
||||
} else {
|
||||
this.selectedServices.set([...current, serviceName]);
|
||||
}
|
||||
}
|
||||
|
||||
async createToken(): Promise<void> {
|
||||
if (!this.createForm.name) {
|
||||
this.toast.error('Please enter a token name');
|
||||
return;
|
||||
}
|
||||
|
||||
// Build scope based on type
|
||||
let scope: 'all' | string[];
|
||||
if (this.createForm.type === 'global') {
|
||||
if (this.scopeAll) {
|
||||
scope = 'all';
|
||||
} else {
|
||||
if (this.selectedServices().length === 0) {
|
||||
this.toast.error('Please select at least one service');
|
||||
return;
|
||||
}
|
||||
scope = this.selectedServices();
|
||||
}
|
||||
} else {
|
||||
if (!this.selectedSingleService) {
|
||||
this.toast.error('Please select a service');
|
||||
return;
|
||||
}
|
||||
scope = [this.selectedSingleService];
|
||||
}
|
||||
|
||||
this.creating.set(true);
|
||||
try {
|
||||
const response = await this.api.createRegistryToken({
|
||||
...this.createForm,
|
||||
scope,
|
||||
});
|
||||
if (response.success && response.data) {
|
||||
this.createdPlainToken.set(response.data.plainToken);
|
||||
this.createDialogOpen.set(false);
|
||||
this.tokenCreatedDialogOpen.set(true);
|
||||
this.loadTokens();
|
||||
} else {
|
||||
this.toast.error(response.error || 'Failed to create token');
|
||||
}
|
||||
} catch {
|
||||
this.toast.error('Failed to create token');
|
||||
} finally {
|
||||
this.creating.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
copyToken(): void {
|
||||
navigator.clipboard.writeText(this.createdPlainToken());
|
||||
this.toast.success('Token copied to clipboard');
|
||||
}
|
||||
|
||||
confirmDelete(token: IRegistryToken): void {
|
||||
this.tokenToDelete.set(token);
|
||||
this.deleteDialogOpen.set(true);
|
||||
}
|
||||
|
||||
async deleteToken(): Promise<void> {
|
||||
const token = this.tokenToDelete();
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
const response = await this.api.deleteRegistryToken(token.id);
|
||||
if (response.success) {
|
||||
this.toast.success('Token deleted');
|
||||
this.loadTokens();
|
||||
} else {
|
||||
this.toast.error(response.error || 'Failed to delete token');
|
||||
}
|
||||
} catch {
|
||||
this.toast.error('Failed to delete token');
|
||||
} finally {
|
||||
this.deleteDialogOpen.set(false);
|
||||
this.tokenToDelete.set(null);
|
||||
}
|
||||
}
|
||||
|
||||
formatExpiry(timestamp: number): string {
|
||||
const days = Math.ceil((timestamp - Date.now()) / (1000 * 60 * 60 * 24));
|
||||
if (days < 0) return 'Expired';
|
||||
if (days === 0) return 'Today';
|
||||
if (days === 1) return 'Tomorrow';
|
||||
if (days < 30) return `${days} days`;
|
||||
return new Date(timestamp).toLocaleDateString();
|
||||
}
|
||||
|
||||
formatRelativeTime(timestamp: number): string {
|
||||
const diff = Date.now() - timestamp;
|
||||
const minutes = Math.floor(diff / (1000 * 60));
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (minutes < 1) return 'Just now';
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
if (days < 30) return `${days}d ago`;
|
||||
return new Date(timestamp).toLocaleDateString();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user