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

Commit 9c9a23d

Browse files
author
Leonardo Chaia
committed
feat: use same header for container list and inspect
1 parent 631771c commit 9c9a23d

12 files changed

+138
-89
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export class ContainerActionButtonsComponent {
7676
}
7777

7878
public isButtonVisible(key: string) {
79-
return !this.hiddenButtons.includes(key);
79+
return !this.hiddenButtons || !this.hiddenButtons.includes(key);
8080
}
8181

8282
private bindLoading(obs: Observable<any>) {

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
</div>
99

1010
<div>
11-
<tim-container-inspect-cards [containerId]="containerId"></tim-container-inspect-cards>
11+
<tim-container-inspect-cards [containerId]="containerId"
12+
[hiddenButtons]="['attach']"></tim-container-inspect-cards>
1213
</div>
1314
</div>

‎src/app/daemon-tools/container-header-card/container-header-card.component.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<mat-card>
2+
<div fxLayout="row"
3+
fxLayoutAlign="start center"
4+
fxLayoutGap="16px">
5+
6+
<mat-icon class="tim-text-primary tim-icon-48">computer</mat-icon>
7+
<div fxFlex="grow">
8+
<h2 style="margin-bottom: 0">
9+
<span title="Name">
10+
{{containerName}}
11+
</span>
12+
13+
<small>
14+
<code title="Id">{{containerId | slice:0:12}}</code>
15+
</small>
16+
17+
<small title="State"
18+
[ngClass]="containerState === 'running' ? 'tim-text-primary' : 'tim-text-accent'">
19+
{{containerState}}
20+
</small>
21+
22+
<br>
23+
24+
<code title="Image">
25+
{{getImageName()}}
26+
</code>
27+
</h2>
28+
</div>
29+
30+
<ng-content></ng-content>
31+
32+
</div>
33+
34+
<div>
35+
<tim-container-action-buttons [containerId]="containerId"
36+
[containerName]="containerName"
37+
[containerState]="containerState"
38+
[hiddenButtons]="hiddenButtons"></tim-container-action-buttons>
39+
</div>
40+
</mat-card>

‎src/app/daemon-tools/container-header-card/container-header-card.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
mat-card {
2+
margin-bottom: 16px;
3+
}

‎src/app/daemon-tools/container-header-card/container-header-card.component.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component, OnInit, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'tim-container-header-card',
5+
templateUrl: './container-header-card.component.html',
6+
styleUrls: ['./container-header-card.component.scss']
7+
})
8+
export class ContainerHeaderCardComponent {
9+
10+
@Input()
11+
public containerId: string;
12+
13+
@Input()
14+
public containerName: string;
15+
16+
@Input()
17+
public containerState: string;
18+
19+
@Input()
20+
public imageName: string;
21+
22+
@Input()
23+
public hiddenButtons: string[];
24+
25+
constructor() { }
26+
27+
public getImageName() {
28+
if (this.imageName.startsWith('sha256:')) {
29+
return this.imageName.replace('sha256:', '').slice(0, 12);
30+
} else {
31+
return this.imageName;
32+
}
33+
}
34+
35+
}

‎src/app/daemon-tools/container-inspect-cards/container-inspect-cards.component.html

+8-17
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
<div *ngIf="containerInfo"
2-
fxLayout="column"
3-
fxLayoutGap="16px">
4-
<mat-card>
5-
<h3>
6-
<mat-icon class="tim-text-primary">computer</mat-icon>
7-
{{containerInfo.Name}} ({{containerInfo.Id | slice:0:12}})
8-
</h3>
9-
<p>
10-
<b>{{containerInfo.Config.Image}}</b>
11-
</p>
1+
<div *ngIf="containerInfo">
122

13-
</mat-card>
3+
<tim-container-header-card [containerId]="containerInfo.Id"
4+
[containerName]="containerInfo.Name"
5+
[containerState]="containerInfo.State.Status"
6+
[imageName]="containerInfo.Image"
7+
[hiddenButtons]="hiddenButtons">
8+
</tim-container-header-card>
149

1510
<mat-card *ngIf="portMappings && portMappings.length">
1611
<h3>
@@ -59,8 +54,4 @@ <h3>
5954
</li>
6055
</ul>
6156
</mat-card>
62-
</div>
63-
64-
<pre>
65-
{{containerInfo|json}}
66-
</pre>
57+
</div>

‎src/app/daemon-tools/container-inspect-cards/container-inspect-cards.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
mat-card {
2+
margin-bottom: 16px;
3+
}

‎src/app/daemon-tools/container-inspect-cards/container-inspect-cards.component.ts

+17-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Component, OnInit, Input } from '@angular/core';
22
import { DockerContainerService } from '../docker-container.service';
3-
import { ContainerInspectInfo } from 'dockerode';
3+
import { ContainerInspectInfo, ContainerCreateBody } from 'dockerode';
4+
import { TabService } from '../../tabs/tab.service';
5+
import { TimoneerTabs } from '../../timoneer-tabs';
46

57
@Component({
68
selector: 'tim-container-inspect-cards',
@@ -12,11 +14,16 @@ export class ContainerInspectCardsComponent implements OnInit {
1214
@Input()
1315
public containerId: string;
1416

17+
@Input()
18+
public hiddenButtons: string[];
19+
1520
public containerInfo: ContainerInspectInfo;
1621
public portMappings: { containerPort: string, hostPort: string }[] = [];
1722
public labels: { key: string, value: string }[] = [];
1823

19-
constructor(private containerService: DockerContainerService) { }
24+
constructor(
25+
private readonly containerService: DockerContainerService,
26+
private readonly tab: TabService) { }
2027

2128
public ngOnInit() {
2229

@@ -48,4 +55,12 @@ export class ContainerInspectCardsComponent implements OnInit {
4855
});
4956
}
5057

58+
public cloneContainer() {
59+
this.tab.add(TimoneerTabs.DOCKER_CONTAINER_NEW, {
60+
params: {
61+
...this.containerInfo.Config,
62+
HostConfig: this.containerInfo.HostConfig
63+
} as ContainerCreateBody
64+
});
65+
}
5166
}

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

+23-54
Original file line numberDiff line numberDiff line change
@@ -12,61 +12,30 @@
1212

1313
<ng-template #defaultTemplate
1414
let-container>
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>
39-
</div>
40-
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>
61-
</div>
62-
</div>
63-
64-
<div>
65-
<tim-container-action-buttons [containerId]="container.Id"
66-
[containerName]="container.Names[0]"
67-
[containerState]="container.State"></tim-container-action-buttons>
15+
<tim-container-header-card [containerId]="container.Id"
16+
[containerName]="container.Names[0]"
17+
[containerState]="container.State"
18+
[imageName]="container.Image">
19+
20+
<span [title]="'Port Mappings:\n' + getPortMappings(container)"
21+
class="text-nowrap">
22+
<mat-icon>network_wifi</mat-icon>
23+
<b>
24+
{{container.Ports.length}}
25+
</b>
26+
</span>
27+
<span title="Volume Mappings"
28+
class="text-nowrap">
29+
<mat-icon>storage</mat-icon>
30+
<b>
31+
{{container.Mounts.length}}
32+
</b>
33+
</span>
34+
35+
<div class="text-nowrap">
36+
{{container.Status}}
6837
</div>
69-
</mat-card>
38+
</tim-container-header-card>
7039
</ng-template>
7140

7241
</ng-container>

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

+2-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { Component, OnInit, OnDestroy, ContentChild, TemplateRef, Input } from '@angular/core';
2-
import { Subject, Observable, throwError } from 'rxjs';
3-
import { takeUntil, take, catchError, map } from 'rxjs/operators';
2+
import { Subject } from 'rxjs';
3+
import { takeUntil, take } from 'rxjs/operators';
44
import { NotificationService } from '../../shared/notification.service';
55
import { ContainerInfo } from 'dockerode';
66
import { DockerEventsService } from '../docker-events.service';
77
import { DockerContainerService } from '../docker-container.service';
88
import { ContainerMenuService } from '../container-menu.service';
9-
import { TabService } from '../../tabs/tab.service';
10-
import { TimoneerTabs } from '../../timoneer-tabs';
119

1210
@Component({
1311
selector: 'tim-container-list',
@@ -32,7 +30,6 @@ export class ContainerListComponent implements OnInit, OnDestroy {
3230
constructor(private containerService: DockerContainerService,
3331
private daemonEvents: DockerEventsService,
3432
private menuService: ContainerMenuService,
35-
private tabService: TabService,
3633
private notificationService: NotificationService) { }
3734

3835
public ngOnInit() {
@@ -62,14 +59,6 @@ export class ContainerListComponent implements OnInit, OnDestroy {
6259
});
6360
}
6461

65-
public getImageName(container: ContainerInfo) {
66-
if (container.Image.startsWith('sha256:')) {
67-
return container.Image.replace('sha256:', '').slice(0, 12);
68-
} else {
69-
return container.Image;
70-
}
71-
}
72-
7362
public getPortMappings(container: ContainerInfo) {
7463
return container.Ports.map(p => p.PublicPort ? `${p.PublicPort}:${p.PrivatePort}` : p.PrivatePort).join('\n');
7564
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
</div>
99

1010
<div>
11-
<tim-container-inspect-cards [containerId]="containerId"></tim-container-inspect-cards>
11+
<tim-container-inspect-cards [containerId]="containerId"
12+
[hiddenButtons]="['logs']"></tim-container-inspect-cards>
1213
</div>
1314
</div>

‎src/app/daemon-tools/daemon-tools.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ import { TimDialogModule } from '../tim-dialog/tim-dialog.module';
5151
import { ContainerInspectCardsComponent } from './container-inspect-cards/container-inspect-cards.component';
5252
import { ContainerLogsContainerComponent } from './container-logs-container/container-logs-container.component';
5353
import { ContainerActionButtonsComponent } from './container-action-buttons/container-action-buttons.component';
54+
import { ContainerHeaderCardComponent } from './container-header-card/container-header-card.component';
5455

5556
@NgModule({
5657
imports: [
@@ -106,6 +107,7 @@ import { ContainerActionButtonsComponent } from './container-action-buttons/cont
106107
ContainerInspectCardsComponent,
107108
ContainerLogsContainerComponent,
108109
ContainerActionButtonsComponent,
110+
ContainerHeaderCardComponent,
109111
],
110112
exports: [
111113
ContainerListComponent,

0 commit comments

Comments
 (0)