feat: added jobs

* chore(jobs): created basic jobs logic

* chore: added job details

* chore: added VSCode attach to renderer process launch config

* chore: changed npm scripts to support VSCode debugging

* refactor(jobs): moved job event binding from job runner to job instance

* feat: pull images on background

* feat: show background jobs on the sidebar

* refactor(jobs): improvements on pull image job's performance

* chore: removed dead code

* refactor: renamed job details to job logs

* refactor: added basic logis for child jobs

* chore: improvements on child job logs

* chore: added job ids using guids

* chore: create containers as jobs

* chore: fixed application launch with jobs

* chore: improvements on sidenav jobs

* chore: added job logs

* chore: application update job, missing cancellation

* chore: settings now use the update job

* chore: fixed update job not completing

Author: leonardochaia

Diff for: .vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [{
+    "name": "Attach to Renderer",
+    "type": "chrome",
+    "request": "attach",
+    "port": 9222,
+    "webRoot": "${workspaceFolder}/src",
+    "sourceMaps": true,
+    "sourceMapPathOverrides": {
+      "*": "${webRoot}/*"
+    }
+  }]
+}

Diff for: package.json

@@ -17,14 +17,14 @@
     "gen-ver": "node tim-version-gen",
     "gen-changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "gen-releasenotes": "conventional-changelog -p angular -i release-notes.md -s",
-    "start": "yarn postinstall:electron && yarn gen-ver && npm-run-all -p ng:serve electron:serve",
+    "start": "yarn postinstall:electron && yarn gen-ver && npm-run-all -p ng:serve electron:serve ",
     "build": "yarn postinstall:electron && yarn gen-ver && yarn electron:tsc && ng build",
     "build:dev": "yarn build -c dev",
     "build:prod": "yarn gen-releasenotes && yarn build -c production",
     "ng:serve": "ng serve --configuration hmr",
     "ng:serve:web": "yarn postinstall:web && ng serve -o",
     "electron:tsc": "tsc main.ts --lib es2017,es2016,es2015,dom",
-    "electron:serve": "wait-on http-get://localhost:4200/ && yarn electron:tsc && electron . --serve",
+    "electron:serve": "wait-on http-get://localhost:4200/ && yarn electron:tsc && electron . --serve --remote-debugging-port=9222",
     "electron:local": "yarn build:prod && electron .",
     "electron:linux": "yarn build:prod && npx electron-builder build --linux",
     "electron:windows": "yarn build:prod && npx electron-builder build --windows",
@@ -38,6 +38,7 @@
     "bump-version": "node bump-version && yarn gen-changelog"
   },
   "dependencies": {
+    "@types/uuid": "^3.4.3",
     "electron-settings": "^3.2.0",
     "electron-updater": "^3.1.1"
   },
@@ -97,6 +98,7 @@
     "split-ca": "^1.0.1",
     "tslint": "^5.11.0",
     "typescript": "^2.9.2",
+    "uuid": "^3.3.2",
     "wait-on": "2.1.0",
     "webdriver-manager": "^12.1.0",
     "xterm": "^3.6.0",

Diff for: src/app/app-tabs.module.ts

@@ -24,6 +24,7 @@ import { ApplicationTemplatesModule } from './application-templates/application-
 import { RegistryModule } from './registry/registry.module';
 import { SettingsModule } from './settings/settings.module';
 import { TabConfiguration } from './tabs/tab.model';
+import { ContainerLauncherComponent } from './daemon-tools/container-launcher/container-launcher.component';
 
 const TIMONEER_AVAILABLE_TABS: TabConfiguration[] = [
   {
@@ -54,6 +55,11 @@ const TIMONEER_AVAILABLE_TABS: TabConfiguration[] = [
     title: 'New Container',
     component: ContainerCreateContainerComponent,
   },
+  {
+    id: TimoneerTabs.DOCKER_CONTAINER_LAUNCHER,
+    title: 'Launching Container',
+    component: ContainerLauncherComponent,
+  },
   {
     id: TimoneerTabs.DOCKER_VOLUMES,
     title: 'Volumes',

Diff for: src/app/app.module.ts

@@ -7,12 +7,14 @@ import { HotkeyModule } from 'angular2-hotkeys';
 import { AppTabsModule } from './app-tabs.module';
 import { GlobalShortcutsModule } from './global-shortcuts.module';
 import { AppMenuModule } from './app-menu/app-menu.module';
+import { JobsModule } from './jobs/jobs.module';
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     HotkeyModule.forRoot(),
+    JobsModule.forRoot(),
 
     AppTabsModule,
     AppMenuModule,

Diff for: src/app/application-templates/application-launch/application-launch.component.ts

@@ -2,6 +2,9 @@ import { Component, Input } from '@angular/core';
 import { Application } from '../application.model';
 import { TabService } from '../../tabs/tab.service';
 import { TimoneerTabs } from '../../timoneer-tabs';
+import { JobInstance } from '../../jobs/job-instance';
+import { ContainerCreationJob } from '../../daemon-tools/container-creation-job';
+import { ContainerLauncherParams } from '../../daemon-tools/container-launcher/container-launcher.component';
 
 @Component({
   selector: 'tim-application-launch',
@@ -15,10 +18,11 @@ export class ApplicationLaunchComponent {
 
   constructor(private tabService: TabService) { }
 
-  public containerCreated(id: string) {
-    this.tabService.replaceCurrent(TimoneerTabs.DOCKER_ATTACH, {
-      title: `Attached to ${id.slice(0, 12)}`,
-      params: id,
+  public containerCreated(job: JobInstance<ContainerCreationJob, string>) {
+    this.tabService.replaceCurrent(TimoneerTabs.DOCKER_CONTAINER_LAUNCHER, {
+      params: {
+        jobId: job.id,
+      } as ContainerLauncherParams,
     });
   }
 }

Diff for: src/app/daemon-tools/container-create-container/container-create-container.component.ts

@@ -2,6 +2,9 @@ import { Component, OnInit, Inject } from '@angular/core';
 import { TAB_DATA } from '../../tabs/tab.model';
 import { TabService } from '../../tabs/tab.service';
 import { TimoneerTabs } from '../../timoneer-tabs';
+import { ContainerCreationJob } from '../container-creation-job';
+import { JobInstance } from '../../jobs/job-instance';
+import { ContainerLauncherParams } from '../container-launcher/container-launcher.component';
 
 @Component({
   selector: 'tim-container-create-container',
@@ -18,10 +21,11 @@ export class ContainerCreateContainerComponent implements OnInit {
   public ngOnInit() {
   }
 
-  public containerCreated(id: string) {
-    this.tabService.add(TimoneerTabs.DOCKER_ATTACH, {
-      title: `Attached to ${id.slice(0, 12)}`,
-      params: id,
+  public containerCreated(job: JobInstance<ContainerCreationJob, string>) {
+    this.tabService.replaceCurrent(TimoneerTabs.DOCKER_CONTAINER_LAUNCHER, {
+      params: {
+        jobId: job.id,
+      } as ContainerLauncherParams,
     });
   }
 }

Diff for: src/app/daemon-tools/container-create/container-create.component.ts

@@ -1,14 +1,13 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, Validators, FormArray } from '@angular/forms';
-import { switchMap } from 'rxjs/operators';
-import { NotificationService } from '../../shared/notification.service';
-import { ImageInspectInfo, Container, ContainerCreateBody } from 'dockerode';
-import { from } from 'rxjs';
-import { DockerContainerService } from '../docker-container.service';
+import { ImageInspectInfo, ContainerCreateBody } from 'dockerode';
 import {
   ContainerCreationSuggestedPort, PortBinding,
   ContainerCreationSuggestedVolume, VolumeBinding, VolumeBindingType
 } from '../docker-client.model';
+import { DockerJobsService } from '../docker-jobs.service';
+import { JobInstance } from '../../jobs/job-instance';
+import { ContainerCreationJob } from '../container-creation-job';
 
 @Component({
   selector: 'tim-container-create',
@@ -30,7 +29,7 @@ export class ContainerCreateComponent implements OnInit {
   public suggestedVolumes: ContainerCreationSuggestedVolume[];
 
   @Output()
-  public created = new EventEmitter<string>();
+  public created = new EventEmitter<JobInstance<ContainerCreationJob, string>>();
 
   public form = this.fb.group({
     'image': ['', Validators.required],
@@ -53,8 +52,7 @@ export class ContainerCreateComponent implements OnInit {
 
   public imageData: ImageInspectInfo;
 
-  constructor(private containerService: DockerContainerService,
-    private notification: NotificationService,
+  constructor(private dockerJobs: DockerJobsService,
     private fb: FormBuilder) {
   }
 
@@ -107,13 +105,7 @@ export class ContainerCreateComponent implements OnInit {
 
     data.name = launchConfig.containerName;
 
-    this.containerService.create(data)
-      .pipe(switchMap(container => {
-        this.notification.open(`Container Created. Starting.. ${container.id}`);
-        return from(container.start() as Promise<Container>);
-      }))
-      .subscribe(container => {
-        this.created.emit(container.id);
-      });
+    const job = this.dockerJobs.createContainer(data);
+    this.created.emit(job);
   }
 }

Diff for: src/app/daemon-tools/container-creation-job.ts

@@ -0,0 +1,114 @@
+import { takeUntil, map, catchError, switchMap } from 'rxjs/operators';
+import { JobDefinition } from '../jobs/job-definition';
+import { Job } from '../jobs/job.decorator';
+import { ContainerCreateBody, Container } from 'dockerode';
+import { DockerContainerService } from './docker-container.service';
+import { PullImageJobParams, PullImageJob } from './pull-image.job';
+import { DockerImageService } from './docker-image.service';
+import { throwError, from } from 'rxjs';
+
+export class ContainerCreationJobParams {
+    constructor(public readonly creationData: ContainerCreateBody) { }
+}
+
+@Job()
+export class ContainerCreationJob extends JobDefinition<string> {
+    public get title() {
+        if (this.creationData.name) {
+            return `Create ${this.creationData.name}`;
+        } else {
+            return `Create from ${this.creationData.Image}`;
+        }
+    }
+
+    protected get creationData() {
+        return this.params.creationData;
+    }
+
+    constructor(protected params: ContainerCreationJobParams,
+        protected imageService: DockerImageService,
+        protected containerService: DockerContainerService) {
+        super();
+    }
+
+    public start() {
+        this.pullImage()
+            .pipe(switchMap(() => {
+                this.progressAndLog({
+                    percent: 75,
+                    message: 'Creating container'
+                });
+                return this.containerService.create(this.creationData)
+                    .pipe(
+                        takeUntil(this.cancelled),
+                        switchMap(container => {
+                            this.progressAndLog({
+                                percent: 80,
+                                message: `Starting container ${container.id}`
+                            });
+                            return from(container.start() as Promise<Container>);
+                        })
+                    );
+            }))
+            .subscribe(container => {
+                this.progressAndLog({
+                    percent: 100,
+                    message: `Container started`
+                });
+
+                this.complete(container.id);
+            }, e => {
+                this.completeWithError(e);
+            });
+
+    }
+
+    protected pullImage() {
+        const image = this.creationData.Image;
+        this.progressAndLog({
+            percent: 0,
+            message: `Inspecting image ${image}`
+        });
+        return this.imageService.inspectImage(image)
+            .pipe(
+                map(imageInfo => {
+
+                    this.progressAndLog({
+                        percent: 50,
+                        message: `Obtained image metadata ${image}`
+                    });
+
+                    return imageInfo;
+                }),
+                catchError((error: { statusCode: number, message: string }) => {
+
+                    if (error.statusCode === 404) {
+                        this.progressAndLog({
+                            percent: 25,
+                            message: `Image ${image} not found in daemon`
+                        });
+                        const job = this.startPullImageJob();
+                        return job.completed
+                            .pipe(switchMap(() => {
+                                this.progressAndLog({
+                                    percent: 50,
+                                    message: `Obtained Image ${image}`
+                                });
+                                return this.imageService.inspectImage(image);
+                            }));
+                    } else {
+                        return throwError(error);
+                    }
+                }),
+        );
+
+    }
+
+    protected startPullImageJob() {
+        const params = new PullImageJobParams(this.creationData.Image);
+        return this.startChildJob(PullImageJob, {
+            provide: PullImageJobParams,
+            useValue: params
+        });
+    }
+}

Diff for: src/app/daemon-tools/container-launcher/container-launcher.component.html

@@ -0,0 +1,5 @@
+<div fxLayout="column"
+     style="padding: 16px; height:100%">
+  <tim-job-logs *ngIf="job"
+                [job]="job"></tim-job-logs>
+</div>

Diff for: src/app/daemon-tools/container-launcher/container-launcher.component.scss

@@ -0,0 +1,53 @@
+import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { TAB_DATA } from '../../tabs/tab.model';
+import { JobInstance } from '../../jobs/job-instance';
+import { ContainerCreationJob } from '../container-creation-job';
+import { TimoneerTabs } from '../../timoneer-tabs';
+import { TabService } from '../../tabs/tab.service';
+import { JobRunnerService } from '../../jobs/job-runner.service';
+import { Subject } from 'rxjs';
+
+export interface ContainerLauncherParams {
+  jobId: string;
+}
+
+@Component({
+  selector: 'tim-container-launcher',
+  templateUrl: './container-launcher.component.html',
+  styleUrls: ['./container-launcher.component.scss']
+})
+export class ContainerLauncherComponent implements OnInit, OnDestroy {
+
+  public job: JobInstance<ContainerCreationJob, string>;
+
+  private componentDestroyed = new Subject<void>();
+
+  constructor(
+    private tabService: TabService,
+    private jobRunner: JobRunnerService,
+    @Inject(TAB_DATA)
+    private params: ContainerLauncherParams
+  ) {
+  }
+
+  public ngOnInit() {
+
+    this.job = this.jobRunner.getJobById(this.params.jobId);
+    if (this.job) {
+      this.job.completed
+        .subscribe(containerId => {
+          this.tabService.replaceCurrent(TimoneerTabs.DOCKER_ATTACH, {
+            title: `Attached to ${containerId.slice(0, 12)}`,
+            params: containerId,
+          });
+        });
+    } else {
+      console.error('failed to find job with id ' + this.params.jobId);
+    }
+  }
+
+  public ngOnDestroy() {
+    this.componentDestroyed.next();
+    this.componentDestroyed.unsubscribe();
+  }
+}