Skip to content
This repository was archived by the owner on Jul 15, 2022. It is now read-only.

Commit 631771c

Browse files
author
Leonardo Chaia
committed
feat: improved container action buttons
1 parent 69c4bb8 commit 631771c

6 files changed

+222
-161
lines changed

‎src/app/daemon-tools/container-action-buttons/container-action-buttons.component.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<ng-template #loadingTemplate>
2+
<tim-loading></tim-loading>
3+
</ng-template>
4+
<div *ngIf="!loading; else loadingTemplate"
5+
fxLayout="row">
6+
7+
<div fxFlex="grow"
8+
fxLayout="row"
9+
fxLayoutAlign="start center"
10+
fxLayoutGap="4px">
11+
12+
<ng-container *ngIf="containerState === 'running'; else notRunningTemplate">
13+
<button type="button"
14+
*ngIf="isButtonVisible('attach')"
15+
(click)="attach()"
16+
mat-raised-button
17+
color="accent">
18+
<mat-icon>code</mat-icon>
19+
Attach
20+
</button>
21+
22+
<button type="button"
23+
*ngIf="isButtonVisible('exec')"
24+
(click)="exec()"
25+
mat-raised-button>
26+
<mat-icon>settings_ethernet</mat-icon>
27+
Exec
28+
</button>
29+
30+
</ng-container>
31+
32+
<ng-template #notRunningTemplate>
33+
<button type="button"
34+
*ngIf="isButtonVisible('start')"
35+
(click)="start()"
36+
color="accent"
37+
mat-raised-button>
38+
<mat-icon>play_arrow</mat-icon>
39+
Start
40+
</button>
41+
</ng-template>
42+
43+
<button type="button"
44+
*ngIf="isButtonVisible('logs')"
45+
(click)="logs()"
46+
mat-raised-button>
47+
<mat-icon>subject</mat-icon>
48+
Logs
49+
</button>
50+
51+
<ng-container *ngIf="containerState === 'running'">
52+
<button type="button"
53+
*ngIf="isButtonVisible('stop')"
54+
(click)="stop()"
55+
mat-raised-button>
56+
<mat-icon>stop</mat-icon>
57+
Stop
58+
</button>
59+
</ng-container>
60+
61+
</div>
62+
63+
<div>
64+
<button type="button"
65+
*ngIf="isButtonVisible('delete')"
66+
(click)="remove()"
67+
mat-raised-button>
68+
<mat-icon>delete</mat-icon>
69+
Delete
70+
</button>
71+
</div>
72+
73+
</div>

‎src/app/daemon-tools/container-action-buttons/container-action-buttons.component.scss

Whitespace-only changes.

‎src/app/daemon-tools/container-action-buttons/container-action-buttons.component.ts

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { Component, Input } from '@angular/core';
2+
import { TabService } from '../../tabs/tab.service';
3+
import { TimoneerTabs } from '../../timoneer-tabs';
4+
import { Observable, throwError } from 'rxjs';
5+
import { catchError, map } from 'rxjs/operators';
6+
import { DockerContainerService } from '../docker-container.service';
7+
import { NotificationService } from '../../shared/notification.service';
8+
9+
@Component({
10+
selector: 'tim-container-action-buttons',
11+
templateUrl: './container-action-buttons.component.html',
12+
styleUrls: ['./container-action-buttons.component.scss']
13+
})
14+
export class ContainerActionButtonsComponent {
15+
16+
@Input()
17+
public containerId: string;
18+
19+
@Input()
20+
public containerState: string;
21+
22+
@Input()
23+
public containerName: string;
24+
25+
@Input()
26+
public hiddenButtons: string[] = [];
27+
28+
public loading: boolean;
29+
30+
constructor(
31+
private readonly tabService: TabService,
32+
private readonly containerService: DockerContainerService,
33+
private readonly notificationService: NotificationService) { }
34+
35+
public attach() {
36+
this.tabService.add(TimoneerTabs.DOCKER_ATTACH, {
37+
title: `Attached to ${this.containerName}`,
38+
params: this.containerId,
39+
});
40+
}
41+
42+
public logs() {
43+
this.tabService.add(TimoneerTabs.DOCKER_LOGS, {
44+
title: `Logs from ${this.containerName}`,
45+
params: this.containerId,
46+
});
47+
}
48+
49+
public exec() {
50+
this.tabService.add(TimoneerTabs.DOCKER_EXEC, {
51+
title: `Exec into ${this.containerName}`,
52+
params: this.containerId,
53+
});
54+
}
55+
56+
public start() {
57+
this.bindLoading(this.containerService.start(this.containerId))
58+
.subscribe(() => {
59+
this.notificationService.open(`${this.containerName} started`);
60+
this.attach();
61+
});
62+
}
63+
64+
public stop() {
65+
this.bindLoading(this.containerService.stop(this.containerId))
66+
.subscribe(() => {
67+
this.notificationService.open(`${this.containerName} stopped`);
68+
});
69+
}
70+
71+
public remove() {
72+
this.bindLoading(this.containerService.remove(this.containerId))
73+
.subscribe(() => {
74+
this.notificationService.open(`${this.containerName} removed`);
75+
});
76+
}
77+
78+
public isButtonVisible(key: string) {
79+
return !this.hiddenButtons.includes(key);
80+
}
81+
82+
private bindLoading(obs: Observable<any>) {
83+
this.loading = true;
84+
return obs.pipe(
85+
catchError((e) => {
86+
this.loading = false;
87+
this.notificationService.open(e.message, null, {
88+
panelClass: 'tim-bg-warn',
89+
});
90+
return throwError(e);
91+
}),
92+
map(r => {
93+
this.loading = false;
94+
return r;
95+
})
96+
);
97+
}
98+
}

‎src/app/daemon-tools/container-list/container-list.component.html

+49-101
Original file line numberDiff line numberDiff line change
@@ -12,112 +12,60 @@
1212

1313
<ng-template #defaultTemplate
1414
let-container>
15-
<mat-card fxLayout="row"
16-
fxLayoutAlign="start center"
17-
fxLayoutGap="16px">
18-
<mat-icon class="tim-text-primary tim-icon-48">computer</mat-icon>
19-
<div fxFlex="grow">
20-
<h2 style="margin-bottom: 0">
21-
{{container.Names[0]}}
22-
<small [ngClass]="container.State === 'running' ? 'tim-text-primary' : 'tim-text-accent'">
23-
{{container.State}}
24-
</small>
25-
<br>
26-
<code title="Container Id">{{container.Id | slice:0:12}}</code>
27-
<code title="Image"> {{getImageName(container)}}</code>
28-
</h2>
29-
<tim-loading *ngIf="loadingMap.get(container.Id)"></tim-loading>
30-
</div>
31-
32-
<div style="text-align: right">
33-
34-
<span [title]="'Port Mappings:\n' + getPortMappings(container)"
35-
class="text-nowrap">
36-
<mat-icon>network_wifi</mat-icon>
37-
<b>
38-
{{container.Ports.length}}
39-
</b>
40-
</span>
41-
<span title="Volume Mappings"
42-
class="text-nowrap">
43-
<mat-icon>storage</mat-icon>
44-
<b>
45-
{{container.Mounts.length}}
46-
</b>
47-
</span>
48-
49-
<div class="text-nowrap">
50-
{{container.Status}}
51-
</div>
52-
</div>
53-
54-
<div fxLayout="column"
55-
fxLayoutGap="4px">
56-
57-
<div fxLayout="row"
58-
fxLayoutAlign="start center"
59-
fxLayoutGap="4px">
60-
61-
<ng-container *ngIf="container.State === 'running'">
62-
<button type="button"
63-
matTooltip="Attach"
64-
(click)="attach(container)"
65-
mat-raised-button
66-
color="accent">
67-
<mat-icon>code</mat-icon>
68-
</button>
69-
70-
<button type="button"
71-
matTooltip="Exec"
72-
(click)="exec(container)"
73-
mat-raised-button
74-
color="accent">
75-
<mat-icon>settings_ethernet</mat-icon>
76-
</button>
77-
78-
</ng-container>
79-
80-
<button type="button"
81-
matTooltip="Logs"
82-
(click)="logs(container)"
83-
mat-raised-button
84-
color="accent">
85-
<mat-icon>subject</mat-icon>
86-
</button>
15+
<mat-card>
16+
<div fxLayout="row"
17+
fxLayoutAlign="start center"
18+
fxLayoutGap="16px">
19+
20+
<mat-icon class="tim-text-primary tim-icon-48">computer</mat-icon>
21+
<div fxFlex="grow">
22+
<h2 style="margin-bottom: 0">
23+
<span title="Name">
24+
{{container.Names[0]}}
25+
</span>
26+
27+
<small>
28+
<code title="Id">{{container.Id | slice:0:12}}</code>
29+
</small>
30+
31+
<small title="State"
32+
[ngClass]="container.State === 'running' ? 'tim-text-primary' : 'tim-text-accent'">
33+
{{container.State}}
34+
</small>
35+
<br>
36+
<code title="Image"> {{getImageName(container)}}</code>
37+
</h2>
38+
<tim-loading *ngIf="loadingMap.get(container.Id)"></tim-loading>
8739
</div>
8840

89-
<div fxLayout="row"
90-
fxLayoutAlign="start center"
91-
fxLayoutGap="4px">
92-
93-
<ng-container *ngIf="container.State === 'running'">
94-
<button type="button"
95-
matTooltip="Stop"
96-
(click)="stop(container)"
97-
mat-raised-button>
98-
<mat-icon>stop</mat-icon>
99-
</button>
100-
</ng-container>
101-
102-
<ng-container *ngIf="container.State !== 'running'">
103-
<button type="button"
104-
matTooltip="Start"
105-
(click)="start(container)"
106-
color="accent"
107-
mat-raised-button>
108-
<mat-icon>play_arrow</mat-icon>
109-
</button>
110-
</ng-container>
111-
112-
<button type="button"
113-
matTooltip="Delete"
114-
(click)="remove(container)"
115-
mat-raised-button>
116-
<mat-icon>delete</mat-icon>
117-
</button>
41+
<div style="text-align: right">
42+
43+
<span [title]="'Port Mappings:\n' + getPortMappings(container)"
44+
class="text-nowrap">
45+
<mat-icon>network_wifi</mat-icon>
46+
<b>
47+
{{container.Ports.length}}
48+
</b>
49+
</span>
50+
<span title="Volume Mappings"
51+
class="text-nowrap">
52+
<mat-icon>storage</mat-icon>
53+
<b>
54+
{{container.Mounts.length}}
55+
</b>
56+
</span>
57+
58+
<div class="text-nowrap">
59+
{{container.Status}}
60+
</div>
11861
</div>
11962
</div>
12063

64+
<div>
65+
<tim-container-action-buttons [containerId]="container.Id"
66+
[containerName]="container.Names[0]"
67+
[containerState]="container.State"></tim-container-action-buttons>
68+
</div>
12169
</mat-card>
12270
</ng-template>
12371

0 commit comments

Comments
 (0)