110 lines
3.9 KiB
HTML
110 lines
3.9 KiB
HTML
<div class="docker-management">
|
|
<h2>Docker Container Management</h2>
|
|
|
|
<!-- Container List -->
|
|
<div class="containers-section">
|
|
<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')">
|
|
{{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>
|
|
|
|
<ng-template #noContainers>
|
|
<p>No containers found</p>
|
|
</ng-template>
|
|
</div>
|
|
|
|
<!-- Run New Container -->
|
|
<div class="run-container-section">
|
|
<h3>Run New Container</h3>
|
|
<form [formGroup]="runContainerForm" (ngSubmit)="runContainer()">
|
|
<div class="form-group">
|
|
<label>Image Name:</label>
|
|
<input type="text" formControlName="imageName"
|
|
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>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>
|
|
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|