feat: implement concurrent commands

apps/angular-console/src/app/app.component.html

@@ -14,6 +14,7 @@
   <mat-sidenav-content id="navigationSidenavContent">
     <div fxLayout="column" fxFlex>
       <ui-contextual-action-bar (hamburgerClicked)="showSiteMenu = true"></ui-contextual-action-bar>
+      <angular-console-background-tasks></angular-console-background-tasks>
 
       <div fxFlex class="outlet-container" [@routerTransition]="routerTransition | async">
         <router-outlet></router-outlet>

apps/angular-console/src/app/app.component.ts

@@ -11,7 +11,6 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import {
-  AuthService,
   Breadcrumb,
   ContextualActionBarService
 } from '@nrwl/angular-console-enterprise-frontend';
@@ -48,9 +47,6 @@ export class AppComponent implements OnInit, OnDestroy {
     this.routerTransition = this.routerOutlet.activateEvents.pipe(
       map(() => this.routerOutlet.activatedRouteData.state)
     );
-    this.authService.isAuthenticated$.subscribe(isAuthenticated => {
-      console.log('is authenticated?', isAuthenticated);
-    });
   }
 
   ngOnDestroy(): void {
@@ -65,7 +61,6 @@ export class AppComponent implements OnInit, OnDestroy {
     router: Router,
     public settings: Settings,
     private readonly contextualActionBarService: ContextualActionBarService,
-    private readonly authService: AuthService,
     private readonly titleService: Title
   ) {
     settings.fetch().subscribe(() => {

apps/angular-console/src/app/app.module.ts

@@ -31,6 +31,7 @@ import { InMemoryCache } from 'apollo-cache-inmemory';
 import { onError } from 'apollo-link-error';
 
 import { AppComponent } from './app.component';
+import { BackgroundTasksComponent } from './background-tasks.component';
 
 export function initApollo(
   analytics: AnalyticsCollector,
@@ -69,7 +70,10 @@ export function initApollo(
 }
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    BackgroundTasksComponent // delete it
+  ],
   imports: [
     MatSidenavModule,
     MatListModule,

apps/angular-console/src/app/background-tasks.component.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { CommandRunner, Settings } from '@angular-console/utils';
+import { first } from 'rxjs/operators';
+
+/**
+ * Delete this component once background tasks functionality is fully implemented
+ */
+@Component({
+  selector: 'angular-console-background-tasks',
+  template: `
+    <div *ngIf="settings.showBackgroundTasks()" style="top: 500px; background-color: green; width: 800px;">
+      <h1>background tasks</h1>
+      <div *ngFor="let task of allCommands|async">
+        <div>id: {{ task.id }}</div>
+        <div>status: {{ task.status }}</div>
+        <div>workspace: {{ task.workspace }}</div>
+        <div>command: {{ task.command }}</div>
+        <div>
+          <button *ngIf="task.status == 'inprogress'" (click)="stop(task.id)">stop</button>
+          <button *ngIf="task.status !== 'inprogress'" (click)="restart(task.id)">restart</button>
+          <button (click)="open(task.id)">open</button>
+          <button (click)="remove(task.id)">remove</button>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class BackgroundTasksComponent {
+  allCommands = this.runner.listAllCommands();
+
+  constructor(public settings: Settings, public runner: CommandRunner) {}
+
+  stop(id: string) {
+    this.runner.stopCommand(id);
+  }
+
+  restart(id: string) {
+    this.runner.restartCommand(id);
+  }
+
+  remove(id: string) {
+    this.runner.removeCommand(id);
+  }
+
+  open(id: string) {
+    this.runner
+      .getCommand(id)
+      .pipe(first())
+      .subscribe(v => {
+        console.log(JSON.stringify(v, null, 2));
+      });
+  }
+}

libs/feature-extensions/src/lib/extension/extension.component.html

@@ -7,5 +7,5 @@
       {{ extension.description }}
     </div>
   </div>
-  <ui-terminal [command]="command$ | async" [input]="(commandOutput$|async)?.out"></ui-terminal>
+  <ui-terminal [command]="command$ | async" [input]="(commandOutput$|async)?.outChunk"></ui-terminal>
 </ui-task-runner>

libs/feature-extensions/src/lib/extension/extension.component.ts

@@ -1,6 +1,9 @@
 import { Extension } from '@angular-console/schema';
 import { TaskRunnerComponent, TerminalComponent } from '@angular-console/ui';
-import { CommandOutput, CommandRunner } from '@angular-console/utils';
+import {
+  IncrementalCommandOutput,
+  CommandRunner
+} from '@angular-console/utils';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -30,7 +33,7 @@ import {
 export class ExtensionComponent implements OnInit {
   extension$: Observable<Extension>;
   command$: Observable<string>;
-  commandOutput$: Observable<CommandOutput>;
+  commandOutput$: Observable<IncrementalCommandOutput>;
   @ViewChild(TerminalComponent) out: TerminalComponent;
   @ViewChild(TaskRunnerComponent) taskRunner: TaskRunnerComponent;
 
@@ -122,7 +125,7 @@ export class ExtensionComponent implements OnInit {
           gql`
             mutation($path: String!, $name: String!) {
               ngAdd(path: $path, name: $name) {
-                command
+                id
               }
             }
           `,
@@ -151,8 +154,4 @@ export class ExtensionComponent implements OnInit {
   onRun() {
     this.ngAdd$.next();
   }
-
-  onStop() {
-    this.runner.stopCommand();
-  }
 }

libs/feature-extensions/src/lib/extensions/extensions.component.ts

@@ -13,6 +13,7 @@ import {
   switchMap
 } from 'rxjs/operators';
 import { TaskCollection, TaskCollections, Task } from '@angular-console/ui';
+import { EXTENSIONS_POLLING } from '@angular-console/utils';
 
 interface ExtensionId {
   name: string | undefined;
@@ -31,7 +32,7 @@ export class ExtensionsComponent {
     map(m => m.path),
     switchMap(path => {
       return this.apollo.watchQuery({
-        pollInterval: 5000,
+        pollInterval: EXTENSIONS_POLLING,
         query: gql`
           query($path: String!) {
             workspace(path: $path) {

libs/feature-generate/src/lib/schematic/schematic.component.html

@@ -1,5 +1,5 @@
 <ui-task-runner *ngIf="schematic$ | async as schematic" [terminalWindowTitle]="schematic.collection + ' - ' + schematic.name">
   <ui-flags [prefix]="getPrefix(schematic)" [fields]="schematic.schema" (value)="onFlagsChange($event)"
     [init]="initValues$ | async" [path]="path()"></ui-flags>
-  <ui-terminal [command]="command$|async" [input]="(combinedOutput$|async)?.out"></ui-terminal>
+  <ui-terminal [command]="command$|async" [input]="(combinedOutput$|async)?.outChunk"></ui-terminal>
 </ui-task-runner>

libs/feature-generate/src/lib/schematic/schematic.component.ts

@@ -5,7 +5,7 @@ import {
   TerminalComponent
 } from '@angular-console/ui';
 import {
-  CommandOutput,
+  IncrementalCommandOutput,
   CommandRunner,
   Serializer
 } from '@angular-console/utils';
@@ -47,11 +47,11 @@ export class SchematicComponent implements OnInit {
     valid: false
   });
   command$: Observable<string>;
-  dryRunResult$: Observable<CommandOutput>;
-  commandOutput$: Observable<CommandOutput>;
+  dryRunResult$: Observable<IncrementalCommandOutput>;
+  commandOutput$: Observable<IncrementalCommandOutput>;
   initValues$: Observable<any>;
 
-  combinedOutput$: Observable<CommandOutput>;
+  combinedOutput$: Observable<IncrementalCommandOutput>;
   @ViewChild(TerminalComponent) out: TerminalComponent;
   @ViewChild(TaskRunnerComponent) taskRunner: TaskRunnerComponent;
   @ViewChild(FlagsComponent) flags: FlagsComponent;
@@ -175,7 +175,7 @@ export class SchematicComponent implements OnInit {
           gql`
             mutation($path: String!, $genCommand: [String]!) {
               generate(path: $path, genCommand: $genCommand, dryRun: true) {
-                command
+                id
               }
             }
           `,
@@ -202,7 +202,7 @@ export class SchematicComponent implements OnInit {
           gql`
             mutation($path: String!, $genCommand: [String]!) {
               generate(path: $path, genCommand: $genCommand, dryRun: false) {
-                command
+                id
               }
             }
           `,

libs/feature-generate/src/lib/schematics/schematics.component.ts

@@ -13,6 +13,7 @@ import {
   startWith,
   switchMap
 } from 'rxjs/operators';
+import { SCHEMATICS_POLLING } from '@angular-console/utils';
 
 interface SchematicId {
   collectionName: string | undefined;
@@ -32,7 +33,7 @@ export class SchematicsComponent {
     map(m => m.path),
     switchMap(path => {
       return this.apollo.watchQuery({
-        pollInterval: 5000,
+        pollInterval: SCHEMATICS_POLLING,
         query: gql`
           query($path: String!) {
             workspace(path: $path) {

libs/feature-install-node-js/src/lib/install-node-js.component.ts

@@ -4,7 +4,11 @@ import { Apollo } from 'apollo-angular';
 import gql from 'graphql-tag';
 import { Observable } from 'rxjs';
 import { filter, first, map, switchMap, takeWhile, tap } from 'rxjs/operators';
-import { Messenger, Settings } from '@angular-console/utils';
+import {
+  Messenger,
+  NODE_JS_INSTALL_POLLING,
+  Settings
+} from '@angular-console/utils';
 
 @Component({
   selector: 'angular-console-install-node-js',
@@ -40,7 +44,7 @@ export class InstallNodeJsComponent {
         switchMap(status => {
           return this.apollo
             .watchQuery({
-              pollInterval: 300,
+              pollInterval: NODE_JS_INSTALL_POLLING,
               query: gql`
                 query {
                   installNodeJsStatus {

libs/feature-run/src/lib/npmscript/npmscript.component.html

@@ -1,5 +1,5 @@
 <ui-task-runner *ngIf="script$ | async as script" terminalWindowTitle="Task output">
   <ui-flags [fields]="script.schema" [prefix]="['run', script.name]"
-    (value)="onFlagsChange($event)" (action)="onRun()" (stop)="onStop()" [path]="path()"></ui-flags>
-  <ui-terminal [command]="command$ | async" [input]="(commandOutput$|async)?.out"></ui-terminal>
+    (value)="onFlagsChange($event)" (action)="onRun()" [path]="path()"></ui-flags>
+  <ui-terminal [command]="command$ | async" [input]="(commandOutput$|async)?.outChunk"></ui-terminal>
 </ui-task-runner>

libs/feature-run/src/lib/npmscript/npmscript.component.ts

@@ -5,7 +5,7 @@ import {
   TerminalComponent
 } from '@angular-console/ui';
 import {
-  CommandOutput,
+  IncrementalCommandOutput,
   CommandRunner,
   Serializer
 } from '@angular-console/utils';
@@ -42,7 +42,7 @@ export class NpmScriptComponent implements OnInit {
     valid: true
   });
   command$: Observable<string>;
-  commandOutput$: Observable<CommandOutput>;
+  commandOutput$: Observable<IncrementalCommandOutput>;
   @ViewChild(TerminalComponent) out: TerminalComponent;
   @ViewChild(TaskRunnerComponent) taskRunner: TaskRunnerComponent;
   @ViewChild(FlagsComponent) flags: FlagsComponent;
@@ -144,7 +144,7 @@ export class NpmScriptComponent implements OnInit {
                 npmClient: $npmClient
                 runCommand: $runCommand
               ) {
-                command
+                id
               }
             }
           `,
@@ -180,10 +180,6 @@ export class NpmScriptComponent implements OnInit {
     this.ngRun$.next();
   }
 
-  onStop() {
-    this.runner.stopCommand();
-  }
-
   onFlagsChange(e: { commands: string[]; valid: boolean }) {
     setTimeout(() => this.commandArray$.next(e), 0);
     this.ngRunDisabled$.next(!e.valid);

libs/feature-run/src/lib/target/target.component.html

@@ -1,5 +1,5 @@
 <ui-task-runner *ngIf="project$ | async as project" terminalWindowTitle="Task output">
   <ui-flags [configurations]="project.architect[0].configurations" [prefix]="[project.architect[0].name, project.name]" [fields]="project.architect[0].schema"
-    (value)="onFlagsChange($event)" (action)="onRun()" (stop)="onStop()" [path]="path()"></ui-flags>
-  <ui-terminal [command]="command$ | async" [input]="(commandOutput$|async)?.out" #output></ui-terminal>
+    (value)="onFlagsChange($event)" (action)="onRun()" [path]="path()"></ui-flags>
+  <ui-terminal [command]="command$ | async" [input]="(commandOutput$|async)?.outChunk" #output></ui-terminal>
 </ui-task-runner>

libs/feature-run/src/lib/target/target.component.ts

@@ -5,7 +5,7 @@ import {
   TerminalComponent
 } from '@angular-console/ui';
 import {
-  CommandOutput,
+  IncrementalCommandOutput,
   CommandRunner,
   Serializer
 } from '@angular-console/utils';
@@ -42,7 +42,7 @@ export class TargetComponent implements OnInit {
     valid: true
   });
   command$: Observable<string>;
-  commandOutput$: Observable<CommandOutput>;
+  commandOutput$: Observable<IncrementalCommandOutput>;
   @ViewChild(TerminalComponent) out: TerminalComponent;
   @ViewChild(TaskRunnerComponent) taskRunner: TaskRunnerComponent;
   @ViewChild(FlagsComponent) flags: FlagsComponent;
@@ -149,7 +149,7 @@ export class TargetComponent implements OnInit {
           gql`
             mutation($path: String!, $runCommand: [String]!) {
               runNg(path: $path, runCommand: $runCommand) {
-                command
+                id
               }
             }
           `,
@@ -181,10 +181,6 @@ export class TargetComponent implements OnInit {
     this.ngRun$.next();
   }
 
-  onStop() {
-    this.runner.stopCommand();
-  }
-
   onFlagsChange(e: { commands: string[]; valid: boolean }) {
     setTimeout(() => this.commandArray$.next(e), 0);
     this.ngRunDisabled$.next(!e.valid);

libs/feature-run/src/lib/targets/targets.component.ts

@@ -12,6 +12,7 @@ import {
   startWith,
   distinctUntilChanged
 } from 'rxjs/operators';
+import { TARGET_POLLING } from '@angular-console/utils';
 
 interface Target {
   projectName: string;
@@ -31,7 +32,7 @@ export class TargetsComponent {
     map(m => m.path),
     switchMap(path => {
       return this.apollo.watchQuery({
-        pollInterval: 5000,
+        pollInterval: TARGET_POLLING,
         query: gql`
           query($path: String!) {
             workspace(path: $path) {

libs/feature-workspaces/src/lib/new-workspace/new-workspace-dialog.component.ts

@@ -14,7 +14,7 @@ export interface NgNewInvocation {
 @Component({
   selector: 'angular-console-new-workspace-dialog',
   template: `
-      <ui-terminal [command]="command" [input]="(commandOutput$|async)?.out"></ui-terminal>
+      <ui-terminal [command]="command" [input]="(commandOutput$|async)?.outChunk"></ui-terminal>
     `
 })
 export class NewWorkspaceDialogComponent {
@@ -27,7 +27,7 @@ export class NewWorkspaceDialogComponent {
       gql`
         mutation($path: String!, $name: String!, $collection: String!) {
           ngNew(path: $path, name: $name, collection: $collection) {
-            command
+            id
           }
         }
       `,