ci/cd + any fixes
This commit is contained in:
+88
-81
@@ -6,33 +6,36 @@
|
||||
<h3>Running Containers</h3>
|
||||
<button (click)="refreshContainers()" class="btn btn-secondary">Refresh</button>
|
||||
|
||||
<div class="container-list" *ngIf="containers.length > 0; else noContainers">
|
||||
<div class="container-item" *ngFor="let container of containers">
|
||||
<div class="container-info">
|
||||
<strong>{{container.name}}</strong>
|
||||
<span class="image">{{container.image}}</span>
|
||||
<span class="status" [class.running]="container.status.includes('Up')">
|
||||
@if (containers.length > 0) {
|
||||
<div class="container-list">
|
||||
@for (container of containers; track container) {
|
||||
<div class="container-item">
|
||||
<div class="container-info">
|
||||
<strong>{{container.name}}</strong>
|
||||
<span class="image">{{container.image}}</span>
|
||||
<span class="status" [class.running]="container.status.includes('Up')">
|
||||
{{container.status}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="container-actions">
|
||||
<button (click)="stopContainer(container.name)"
|
||||
[disabled]="!container.status.includes('Up')"
|
||||
class="btn btn-warning">Stop</button>
|
||||
<button (click)="startContainer(container.name)"
|
||||
[disabled]="container.status.includes('Up')"
|
||||
class="btn btn-success">Start</button>
|
||||
<button (click)="removeContainer(container.name)"
|
||||
class="btn btn-danger">Remove</button>
|
||||
<button (click)="viewLogs(container.name)"
|
||||
class="btn btn-info">Logs</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-actions">
|
||||
<button (click)="stopContainer(container.name)"
|
||||
[disabled]="!container.status.includes('Up')"
|
||||
class="btn btn-warning">Stop</button>
|
||||
<button (click)="startContainer(container.name)"
|
||||
[disabled]="container.status.includes('Up')"
|
||||
class="btn btn-success">Start</button>
|
||||
<button (click)="removeContainer(container.name)"
|
||||
class="btn btn-danger">Remove</button>
|
||||
<button (click)="viewLogs(container.name)"
|
||||
class="btn btn-info">Logs</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #noContainers>
|
||||
} @else {
|
||||
<p>No containers found</p>
|
||||
</ng-template>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Run New Container -->
|
||||
@@ -42,68 +45,72 @@
|
||||
<div class="form-group">
|
||||
<label>Image Name:</label>
|
||||
<input type="text" formControlName="imageName"
|
||||
placeholder="e.g., nginx:latest" class="form-control">
|
||||
</div>
|
||||
placeholder="e.g., nginx:latest" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Container Name:</label>
|
||||
<input type="text" formControlName="containerName"
|
||||
placeholder="Optional container name" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Container Name:</label>
|
||||
<input type="text" formControlName="containerName"
|
||||
placeholder="Optional container name" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Ports:</label>
|
||||
<input type="text" formControlName="ports"
|
||||
placeholder="e.g., 8080:80" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Ports:</label>
|
||||
<input type="text" formControlName="ports"
|
||||
placeholder="e.g., 8080:80" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Environment Variables:</label>
|
||||
<input type="text" formControlName="environmentVars"
|
||||
placeholder="e.g., -e NODE_ENV=production" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Environment Variables:</label>
|
||||
<input type="text" formControlName="environmentVars"
|
||||
placeholder="e.g., -e NODE_ENV=production" class="form-control">
|
||||
</div>
|
||||
|
||||
<button type="submit" [disabled]="runContainerForm.invalid || loading"
|
||||
class="btn btn-primary">
|
||||
{{loading ? 'Starting...' : 'Run Container'}}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<button type="submit" [disabled]="runContainerForm.invalid || loading"
|
||||
class="btn btn-primary">
|
||||
{{loading ? 'Starting...' : 'Run Container'}}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Execute Command -->
|
||||
<div class="execute-command-section">
|
||||
<h3>Execute Docker Command</h3>
|
||||
<form [formGroup]="commandForm" (ngSubmit)="executeCommand()">
|
||||
<div class="form-group">
|
||||
<label>Docker Command:</label>
|
||||
<input type="text" formControlName="command"
|
||||
placeholder="e.g., docker ps -a" class="form-control">
|
||||
</div>
|
||||
<button type="submit" [disabled]="commandForm.invalid || loading"
|
||||
class="btn btn-primary">Execute</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Execute Command -->
|
||||
<div class="execute-command-section">
|
||||
<h3>Execute Docker Command</h3>
|
||||
<form [formGroup]="commandForm" (ngSubmit)="executeCommand()">
|
||||
<div class="form-group">
|
||||
<label>Docker Command:</label>
|
||||
<input type="text" formControlName="command"
|
||||
placeholder="e.g., docker ps -a" class="form-control">
|
||||
</div>
|
||||
<button type="submit" [disabled]="commandForm.invalid || loading"
|
||||
class="btn btn-primary">Execute</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Command Output -->
|
||||
<div class="output-section" *ngIf="lastCommandResult">
|
||||
<h3>Command Output</h3>
|
||||
<div class="output-box"
|
||||
[class.success]="lastCommandResult.success"
|
||||
[class.error]="!lastCommandResult.success">
|
||||
<pre>{{getOutputText(lastCommandResult.output)}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Command Output -->
|
||||
@if (lastCommandResult) {
|
||||
<div class="output-section">
|
||||
<h3>Command Output</h3>
|
||||
<div class="output-box"
|
||||
[class.success]="lastCommandResult.success"
|
||||
[class.error]="!lastCommandResult.success">
|
||||
<pre>{{getOutputText(lastCommandResult.output)}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Container Logs Modal -->
|
||||
<div class="logs-modal" *ngIf="selectedContainerLogs">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Container Logs: {{selectedContainer}}</h3>
|
||||
<button (click)="closeLogs()" class="close-btn">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre class="logs-content">{{selectedContainerLogs.join('\n')}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Container Logs Modal -->
|
||||
@if (selectedContainerLogs) {
|
||||
<div class="logs-modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Container Logs: {{selectedContainer}}</h3>
|
||||
<button (click)="closeLogs()" class="close-btn">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre class="logs-content">{{selectedContainerLogs.join('\n')}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
+3
-5
@@ -1,5 +1,5 @@
|
||||
import {Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {NgForOf, NgIf} from '@angular/common';
|
||||
|
||||
import {Subject, takeUntil} from 'rxjs';
|
||||
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
|
||||
import {ContainerInfo, DockerResult, DockerService} from '../docker.service';
|
||||
@@ -7,10 +7,8 @@ import {ContainerInfo, DockerResult, DockerService} from '../docker.service';
|
||||
@Component({
|
||||
selector: 'app-docker-management-component',
|
||||
imports: [
|
||||
NgIf,
|
||||
ReactiveFormsModule,
|
||||
NgForOf
|
||||
],
|
||||
ReactiveFormsModule
|
||||
],
|
||||
templateUrl: './docker-management-component.html',
|
||||
styleUrl: './docker-management-component.scss'
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user