import {Component, OnDestroy, OnInit} from '@angular/core'; import {Subject, takeUntil} from 'rxjs'; import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {ContainerInfo, DockerResult, DockerService} from '../docker.service'; @Component({ selector: 'app-docker-management-component', imports: [ ReactiveFormsModule ], templateUrl: './docker-management-component.html', styleUrl: './docker-management-component.scss' }) export class DockerManagementComponent implements OnInit, OnDestroy { containers: ContainerInfo[] = []; runContainerForm: FormGroup; commandForm: FormGroup; lastCommandResult: DockerResult | null = null; selectedContainer: string = ''; selectedContainerLogs: string[] | null = null; loading = false; private destroy$ = new Subject(); constructor( private dockerService: DockerService, private fb: FormBuilder ) { this.runContainerForm = this.fb.group({ imageName: ['', Validators.required], containerName: [''], ports: [''], environmentVars: [''] }); this.commandForm = this.fb.group({ command: ['docker ps', Validators.required] }); } ngOnInit() { // Subscribe to containers updates this.dockerService.containers$ .pipe(takeUntil(this.destroy$)) .subscribe(containers => { this.containers = containers; }); // Initial load this.refreshContainers(); } ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } refreshContainers() { this.dockerService.refreshContainers(); } runContainer() { if (this.runContainerForm.valid) { this.loading = true; const formValue = this.runContainerForm.value; this.dockerService.runContainer(formValue) .pipe(takeUntil(this.destroy$)) .subscribe({ next: (result) => { this.lastCommandResult = result; this.loading = false; if (result.success) { this.runContainerForm.reset(); } }, error: (error) => { console.error('Error running container:', error); this.loading = false; } }); } } stopContainer(containerName: string) { this.dockerService.stopContainer(containerName) .pipe(takeUntil(this.destroy$)) .subscribe({ next: (result) => { this.lastCommandResult = result; }, error: (error) => { console.error('Error stopping container:', error); } }); } startContainer(containerName: string) { this.dockerService.startContainer(containerName) .pipe(takeUntil(this.destroy$)) .subscribe({ next: (result) => { this.lastCommandResult = result; }, error: (error) => { console.error('Error starting container:', error); } }); } removeContainer(containerName: string) { if (confirm(`Are you sure you want to remove container "${containerName}"?`)) { this.dockerService.removeContainer(containerName) .pipe(takeUntil(this.destroy$)) .subscribe({ next: (result) => { this.lastCommandResult = result; }, error: (error) => { console.error('Error removing container:', error); } }); } } viewLogs(containerName: string) { this.selectedContainer = containerName; this.dockerService.getContainerLogs(containerName, 100) .pipe(takeUntil(this.destroy$)) .subscribe({ next: (logs) => { this.selectedContainerLogs = logs; }, error: (error) => { console.error('Error getting logs:', error); } }); } closeLogs() { this.selectedContainerLogs = null; this.selectedContainer = ''; } executeCommand() { if (this.commandForm.valid) { this.loading = true; const command = this.commandForm.get('command')?.value; this.dockerService.executeCommand(command) .pipe(takeUntil(this.destroy$)) .subscribe({ next: (result) => { this.lastCommandResult = result; this.loading = false; }, error: (error) => { console.error('Error executing command:', error); this.loading = false; } }); } } getOutputText(output: string[] | string): string { return Array.isArray(output) ? output.join('\n') : output; } }