diff --git a/src/app/daemon-tools/container-action-buttons/container-action-buttons.component.html b/src/app/daemon-tools/container-action-buttons/container-action-buttons.component.html new file mode 100644 index 0000000..4ffcb8d --- /dev/null +++ b/src/app/daemon-tools/container-action-buttons/container-action-buttons.component.html @@ -0,0 +1,73 @@ + + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
\ No newline at end of file diff --git a/src/app/daemon-tools/container-action-buttons/container-action-buttons.component.scss b/src/app/daemon-tools/container-action-buttons/container-action-buttons.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/daemon-tools/container-action-buttons/container-action-buttons.component.ts b/src/app/daemon-tools/container-action-buttons/container-action-buttons.component.ts new file mode 100644 index 0000000..85e454e --- /dev/null +++ b/src/app/daemon-tools/container-action-buttons/container-action-buttons.component.ts @@ -0,0 +1,98 @@ +import { Component, Input } from '@angular/core'; +import { TabService } from '../../tabs/tab.service'; +import { TimoneerTabs } from '../../timoneer-tabs'; +import { Observable, throwError } from 'rxjs'; +import { catchError, map } from 'rxjs/operators'; +import { DockerContainerService } from '../docker-container.service'; +import { NotificationService } from '../../shared/notification.service'; + +@Component({ + selector: 'tim-container-action-buttons', + templateUrl: './container-action-buttons.component.html', + styleUrls: ['./container-action-buttons.component.scss'] +}) +export class ContainerActionButtonsComponent { + + @Input() + public containerId: string; + + @Input() + public containerState: string; + + @Input() + public containerName: string; + + @Input() + public hiddenButtons: string[] = []; + + public loading: boolean; + + constructor( + private readonly tabService: TabService, + private readonly containerService: DockerContainerService, + private readonly notificationService: NotificationService) { } + + public attach() { + this.tabService.add(TimoneerTabs.DOCKER_ATTACH, { + title: `Attached to ${this.containerName}`, + params: this.containerId, + }); + } + + public logs() { + this.tabService.add(TimoneerTabs.DOCKER_LOGS, { + title: `Logs from ${this.containerName}`, + params: this.containerId, + }); + } + + public exec() { + this.tabService.add(TimoneerTabs.DOCKER_EXEC, { + title: `Exec into ${this.containerName}`, + params: this.containerId, + }); + } + + public start() { + this.bindLoading(this.containerService.start(this.containerId)) + .subscribe(() => { + this.notificationService.open(`${this.containerName} started`); + this.attach(); + }); + } + + public stop() { + this.bindLoading(this.containerService.stop(this.containerId)) + .subscribe(() => { + this.notificationService.open(`${this.containerName} stopped`); + }); + } + + public remove() { + this.bindLoading(this.containerService.remove(this.containerId)) + .subscribe(() => { + this.notificationService.open(`${this.containerName} removed`); + }); + } + + public isButtonVisible(key: string) { + return !this.hiddenButtons.includes(key); + } + + private bindLoading(obs: Observable) { + this.loading = true; + return obs.pipe( + catchError((e) => { + this.loading = false; + this.notificationService.open(e.message, null, { + panelClass: 'tim-bg-warn', + }); + return throwError(e); + }), + map(r => { + this.loading = false; + return r; + }) + ); + } +} diff --git a/src/app/daemon-tools/container-list/container-list.component.html b/src/app/daemon-tools/container-list/container-list.component.html index 6262918..7b55639 100644 --- a/src/app/daemon-tools/container-list/container-list.component.html +++ b/src/app/daemon-tools/container-list/container-list.component.html @@ -12,112 +12,60 @@ - - computer -
-

- {{container.Names[0]}} - - {{container.State}} - -
- {{container.Id | slice:0:12}} - {{getImageName(container)}} -

- -
- -
- - - network_wifi - - {{container.Ports.length}} - - - - storage - - {{container.Mounts.length}} - - - -
- {{container.Status}} -
-
- -
- -
- - - - - - - - - + +
+ + computer +
+

+ + {{container.Names[0]}} + + + + {{container.Id | slice:0:12}} + + + + {{container.State}} + +
+ {{getImageName(container)}} +

+
-
- - - - - - - - - - +
+ + + network_wifi + + {{container.Ports.length}} + + + + storage + + {{container.Mounts.length}} + + + +
+ {{container.Status}} +
+
+ +
diff --git a/src/app/daemon-tools/container-list/container-list.component.ts b/src/app/daemon-tools/container-list/container-list.component.ts index 156b399..57eee83 100644 --- a/src/app/daemon-tools/container-list/container-list.component.ts +++ b/src/app/daemon-tools/container-list/container-list.component.ts @@ -62,49 +62,6 @@ export class ContainerListComponent implements OnInit, OnDestroy { }); } - public attach(container: ContainerInfo) { - this.tabService.add(TimoneerTabs.DOCKER_ATTACH, { - title: `Attached to ${container.Names[0]}`, - params: container.Id, - }); - } - - public logs(container: ContainerInfo) { - this.tabService.add(TimoneerTabs.DOCKER_LOGS, { - title: `Logs from ${container.Names[0]}`, - params: container.Id, - }); - } - - public exec(container: ContainerInfo) { - this.tabService.add(TimoneerTabs.DOCKER_EXEC, { - title: `Exec into ${container.Names[0]}`, - params: container.Id, - }); - } - - public start(container: ContainerInfo) { - this.bindLoading(container, this.containerService.start(container.Id)) - .subscribe(() => { - this.notificationService.open(`${container.Names[0]} started`); - this.attach(container); - }); - } - - public stop(container: ContainerInfo) { - this.bindLoading(container, this.containerService.stop(container.Id)) - .subscribe(() => { - this.notificationService.open(`${container.Names[0]} stopped`); - }); - } - - public remove(container: ContainerInfo) { - this.bindLoading(container, this.containerService.remove(container.Id)) - .subscribe(() => { - this.notificationService.open(`${container.Names[0]} removed`); - }); - } - public getImageName(container: ContainerInfo) { if (container.Image.startsWith('sha256:')) { return container.Image.replace('sha256:', '').slice(0, 12); @@ -140,21 +97,4 @@ export class ContainerListComponent implements OnInit, OnDestroy { console.error(e); }); } - - private bindLoading(image: ContainerInfo, obs: Observable) { - this.loadingMap.set(image.Id, true); - return obs.pipe( - catchError((e) => { - this.loadingMap.set(image.Id, false); - this.notificationService.open(e.message, null, { - panelClass: 'tim-bg-warn', - }); - return throwError(e); - }), - map(r => { - this.loadingMap.set(image.Id, false); - return r; - }) - ); - } } diff --git a/src/app/daemon-tools/daemon-tools.module.ts b/src/app/daemon-tools/daemon-tools.module.ts index 37b7224..ca454f8 100644 --- a/src/app/daemon-tools/daemon-tools.module.ts +++ b/src/app/daemon-tools/daemon-tools.module.ts @@ -50,6 +50,7 @@ import { JobsModule } from '../jobs/jobs.module'; import { TimDialogModule } from '../tim-dialog/tim-dialog.module'; import { ContainerInspectCardsComponent } from './container-inspect-cards/container-inspect-cards.component'; import { ContainerLogsContainerComponent } from './container-logs-container/container-logs-container.component'; +import { ContainerActionButtonsComponent } from './container-action-buttons/container-action-buttons.component'; @NgModule({ imports: [ @@ -104,6 +105,7 @@ import { ContainerLogsContainerComponent } from './container-logs-container/cont ContainerLauncherComponent, ContainerInspectCardsComponent, ContainerLogsContainerComponent, + ContainerActionButtonsComponent, ], exports: [ ContainerListComponent,