jambotron/jambotron-ui/src/app/modules/user-module/docker-management-component/docker-management-component.ts

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<void>();

  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;
  }
}