feat: add detailed status for commands

- [x] build status - [x] server status - [x] test status
nrwl · Oct 18, 2018 · 3a0e90c · 3a0e90c
1 parent 2ef897d
commit 3a0e90c
Show file tree

Hide file tree

Showing 49 changed files with 2,574 additions and 951 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -13,10 +13,7 @@ jobs:
       - checkout
       - restore_cache:
           name: Restore Global Yarn Package Cache
-          keys:
-            - yarn-packages-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - yarn-packages-{{ .Branch }}-
-            - yarn-packages-
+          key: yarn-packages-{{ .Branch }}-{{ checksum "yarn.lock" }}
       - run: yarn install
       - run: yarn start format.check
       - run: yarn start lint

diff --git a/apps/angular-console-e2e/src/integration/extensions.spec.ts b/apps/angular-console-e2e/src/integration/extensions.spec.ts
@@ -13,7 +13,7 @@ import {
   waitForAnimation,
   whitelistGraphql
 } from './utils';
-import { clearRecentTask } from './tasks.utils';
+import { clearAllRecentTasks } from './tasks.utils';
 
 describe('Extensions', () => {
   beforeEach(() => {
@@ -69,6 +69,6 @@ describe('Extensions', () => {
   after(() => {
     cy.visit('/workspaces');
     openProject(projectPath('proj'));
-    clearRecentTask();
+    clearAllRecentTasks();
   });
 });
diff --git a/apps/angular-console-e2e/src/integration/tasks.utils.ts b/apps/angular-console-e2e/src/integration/tasks.utils.ts
@@ -81,14 +81,15 @@ export function toggleRecentTasksExpansion() {
 
 export function clearAllRecentTasks() {
   cy.get(
-    'angular-console-action-bar .action-bar .remove-all-tasks-button'
-  ).click({ force: true });
+    'angular-console-action-bar .remove-all-tasks-button, angular-console-action-bar .remove-task-button'
+  ).click({ force: true, multiple: true });
   cy.wait(500);
 }
 
 export function clearRecentTask() {
   cy.get('angular-console-action-bar .remove-task-button').click({
-    force: true
+    force: true,
+    multiple: true
   });
   cy.wait(500);
 }
diff --git a/apps/angular-console/src/app/app.module.ts b/apps/angular-console/src/app/app.module.ts
@@ -63,7 +63,7 @@ export function initApollo(
       query: { fetchPolicy: 'network-only' },
       watchQuery: { fetchPolicy: 'network-only' }
     },
-    link: errorLink.concat(httpLink.create({})),
+    link: errorLink.concat(httpLink.create({}) as any), // TODO(jack): Remove the any once type errors are resolved.
     cache: new InMemoryCache()
   };
 }

diff --git a/apps/angular-console/src/assets/console.svg b/apps/angular-console/src/assets/console.svg
diff --git a/libs/feature-action-bar/src/lib/action-bar.component.html b/libs/feature-action-bar/src/lib/action-bar.component.html
@@ -22,7 +22,7 @@
   <!-- Task list -->
   <mat-list [@growShrink]="(showActionList$ | async) ? 'expand' : 'contract'">
     <ng-container *ngFor="let action of actions; trackBy: trackByCommandId" [ngSwitch]="action.status">
-      <mat-list-item @growShrink matRipple #itemRipple="matRipple" (click)="itemRipple.disabled ? '' : toggleItemExpansion(action.id)">
+      <mat-list-item class="action-bar-title" @growShrink matRipple #itemRipple="matRipple" (click)="itemRipple.disabled ? '' : toggleItemExpansion(action.id)">
 
         <!-- Task avatar -->
         <span class="task-avatar" #taskAvatar matListAvatar fxLayout="row" fxLayoutAlign="center center" [ngSwitch]="action.status"
@@ -69,10 +69,15 @@ <h3 matLine class="command">
       </mat-list-item>
 
       <!-- Terminal output -->
-      <div class="terminal-container" #terminalContainer [@growShrinkTerminal]="{value: terminalHeight, params: {terminalHeight:
+      <div class="output-container" #terminalContainer [@growShrinkTerminal]="{value: terminalHeight, params: {terminalHeight:
           terminalHeight}}"
         *ngIf="expandedAction?.id === action.id" (@growShrinkTerminal.done)="terminalContainer.expanded = true">
-        <ui-terminal #terminal *ngIf="terminalContainer.expanded" [command]="(expandedAction?.command | async).command" [out]="(expandedAction?.command | async)?.out"></ui-terminal>
+        <ui-command-output
+          #terminal
+          *ngIf="terminalContainer.expanded"
+          [command]="(expandedAction?.command | async)?.command"
+          [commandResponse]="expandedAction?.command | async">
+        </ui-command-output>
       </div>
 
       <mat-divider></mat-divider>

diff --git a/libs/feature-action-bar/src/lib/action-bar.component.scss b/libs/feature-action-bar/src/lib/action-bar.component.scss
@@ -34,18 +34,11 @@
   }
 }
 
-.terminal-container {
-  margin: 0px 16px;
-  margin-bottom: 16px;
-  background: black;
-  padding: 8px;
-  border-radius: 8px;
-  box-sizing: border-box;
-
-  ui-terminal {
-    display: block;
-    height: 100%;
-  }
+.action-bar-title {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.output-container {
 }
 
 mat-list {

diff --git a/libs/feature-action-bar/src/lib/action-bar.component.ts b/libs/feature-action-bar/src/lib/action-bar.component.ts
@@ -20,7 +20,7 @@ import {
   CommandStatus
 } from '@angular-console/utils';
 import { ContextualActionBarService } from '@nrwl/angular-console-enterprise-frontend';
-import { TerminalComponent } from '@angular-console/ui';
+import { CommandOutputComponent } from '@angular-console/ui';
 
 const TERMINAL_PADDING = 44;
 const COMMAND_HEIGHT = 64;
@@ -43,20 +43,14 @@ const COMMAND_HEIGHT = 64;
         'void',
         style({
           height: 0,
-          opacity: 0,
-          'margin-bottom': '0',
-          'padding-top': '0',
-          'padding-bottom': '0'
+          opacity: 0
         })
       ),
       state(
         '*',
         style({
           height: '{{terminalHeight}}', // use interpolation
-          opacity: 1,
-          'margin-bottom': '16px',
-          'padding-top': '8px',
-          'padding-bottom': '8px'
+          opacity: 1
         }),
         { params: { terminalHeight: '0' } }
       ),
@@ -65,8 +59,8 @@ const COMMAND_HEIGHT = 64;
   ]
 })
 export class ActionBarComponent {
-  @ViewChildren(TerminalComponent)
-  activeTerminals?: QueryList<TerminalComponent>;
+  @ViewChildren(CommandOutputComponent)
+  activeTerminals?: QueryList<CommandOutputComponent>;
 
   // For use within the action bar's template.
   CommandStatus = CommandStatus;

diff --git a/libs/feature-extensions/src/lib/extension/extension.component.html b/libs/feature-extensions/src/lib/extension/extension.component.html
@@ -1,11 +1,28 @@
-<ui-task-runner *ngIf="extension$ | async as extension" terminalWindowTitle="Task output">
-  <div class="ui-flags">
-    <div class="name">
-      {{ extension.name }}
+<ng-container *ngIf="extension$ | async as extension">
+  <ng-template [ngIf]="!extension.installed" [ngIfElse]="alreadyInstalled">
+    <ui-task-runner terminalWindowTitle="Task output">
+        <div class="ui-flags">
+          <ng-container *ngTemplateOutlet="alreadyInstalled"></ng-container>
+        </div>
+        <ui-command-output
+          [emptyTemplate]="emptyMessage"
+          [command]="command$ | async"
+          [commandResponse]="commandOutput$ | async">
+        </ui-command-output>
+    </ui-task-runner>
+  </ng-template>
+  <ng-template #emptyMessage>
+    Click the Add button to install this extension.
+
+  </ng-template>
+  <ng-template #alreadyInstalled>
+    <div class="ui-flags">
+      <div class="name">
+        {{ extension.name }}
+      </div>
+      <div class="description">
+        {{ extension.description }}
+      </div>
     </div>
-    <div class="description">
-      {{ extension.description }}
-    </div>
-  </div>
-  <ui-terminal [command]="command$ | async" [outChunk]="(commandOutput$|async)?.outChunk"></ui-terminal>
-</ui-task-runner>
+  </ng-template>
+</ng-container>
diff --git a/libs/feature-extensions/src/lib/extension/extension.component.ts b/libs/feature-extensions/src/lib/extension/extension.component.ts
@@ -1,5 +1,8 @@
 import { Extension } from '@angular-console/schema';
-import { TaskRunnerComponent, TerminalComponent } from '@angular-console/ui';
+import {
+  TaskRunnerComponent,
+  CommandOutputComponent
+} from '@angular-console/ui';
 import {
   IncrementalCommandOutput,
   CommandRunner
@@ -36,7 +39,7 @@ export class ExtensionComponent implements OnInit {
   extension$: Observable<Extension>;
   command$: Observable<string>;
   commandOutput$: Observable<IncrementalCommandOutput>;
-  @ViewChild(TerminalComponent) out: TerminalComponent;
+  @ViewChild(CommandOutputComponent) out: CommandOutputComponent;
   @ViewChild(TaskRunnerComponent) taskRunner: TaskRunnerComponent;
 
   private readonly ngAdd$ = new Subject<any>();
@@ -105,7 +108,7 @@ export class ExtensionComponent implements OnInit {
     this.commandOutput$ = this.ngAdd$.pipe(
       withLatestFrom(this.extension$),
       tap(() => {
-        this.taskRunner.terminalVisible.next(true);
+        this.taskRunner.terminalVisible$.next(true);
       }),
       switchMap(([_, a]) => {
         this.out.reset();

diff --git a/libs/feature-generate/src/lib/schematic/schematic.component.html b/libs/feature-generate/src/lib/schematic/schematic.component.html
@@ -1,5 +1,17 @@
 <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" [outChunk]="(combinedOutput$|async)?.outChunk"></ui-terminal>
+  <ui-command-output [command]="command$|async"
+                     [commandResponse]="combinedOutput$ | async"
+                     [emptyTemplate]="emptyMessage">
+
+  </ui-command-output>
 </ui-task-runner>
+<ng-template #emptyMessage>
+  <ng-container *ngIf="!(ngGenDisabled$ | async); else invalidFlags">
+    Click the Generate button to start this task.
+  </ng-container>
+</ng-template>
+<ng-template #invalidFlags>
+  Command is missing required fields.
+</ng-template>
diff --git a/libs/feature-generate/src/lib/schematic/schematic.component.ts b/libs/feature-generate/src/lib/schematic/schematic.component.ts
@@ -2,7 +2,7 @@ import { Schematic } from '@angular-console/schema';
 import {
   FlagsComponent,
   TaskRunnerComponent,
-  TerminalComponent
+  CommandOutputComponent
 } from '@angular-console/ui';
 import {
   IncrementalCommandOutput,
@@ -54,12 +54,12 @@ export class SchematicComponent implements OnInit {
   initValues$: Observable<any>;
 
   combinedOutput$: Observable<IncrementalCommandOutput>;
-  @ViewChild(TerminalComponent) out: TerminalComponent;
+  @ViewChild(CommandOutputComponent) out: CommandOutputComponent;
   @ViewChild(TaskRunnerComponent) taskRunner: TaskRunnerComponent;
   @ViewChild(FlagsComponent) flags: FlagsComponent;
 
   private readonly ngGen$ = new Subject<void>();
-  private readonly ngGenDisabled$ = new BehaviorSubject(true);
+  readonly ngGenDisabled$ = new BehaviorSubject(true);
 
   constructor(
     private readonly runner: CommandRunner,
@@ -146,8 +146,6 @@ export class SchematicComponent implements OnInit {
 
         this.out.reset();
         if (!c.valid) {
-          // cannot use change detection because the operation isn't idempotent
-          this.out.out = 'Command is missing required fields';
           return of();
         }
 
@@ -168,7 +166,7 @@ export class SchematicComponent implements OnInit {
       withLatestFrom(this.commandArray$),
       tap(() => {
         this.flags.hideFields();
-        this.taskRunner.terminalVisible.next(true);
+        this.taskRunner.terminalVisible$.next(true);
       }),
       switchMap(([_, c]) => {
         this.out.reset();

diff --git a/libs/feature-run/src/lib/npmscript/npmscript.component.html b/libs/feature-run/src/lib/npmscript/npmscript.component.html
@@ -1,5 +1,11 @@
 <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()" [path]="path()"></ui-flags>
-  <ui-terminal [command]="command$ | async" [outChunk]="(commandOutput$|async)?.outChunk"></ui-terminal>
+  <ui-command-output [command]="command$ | async"
+                     [commandResponse]="commandOutput$ | async"
+                     [emptyTemplate]="emptyMessage">
+  </ui-command-output>
 </ui-task-runner>
+<ng-template #emptyMessage>
+  Click the Run button to start this task.
+</ng-template>
diff --git a/libs/feature-run/src/lib/npmscript/npmscript.component.ts b/libs/feature-run/src/lib/npmscript/npmscript.component.ts
@@ -2,7 +2,7 @@ import { NpmScript } from '@angular-console/schema';
 import {
   FlagsComponent,
   TaskRunnerComponent,
-  TerminalComponent
+  CommandOutputComponent
 } from '@angular-console/ui';
 import {
   IncrementalCommandOutput,
@@ -42,7 +42,7 @@ export class NpmScriptComponent implements OnInit {
   });
   command$: Observable<string>;
   commandOutput$: Observable<IncrementalCommandOutput>;
-  @ViewChild(TerminalComponent) out: TerminalComponent;
+  @ViewChild(CommandOutputComponent) out: CommandOutputComponent;
   @ViewChild(TaskRunnerComponent) taskRunner: TaskRunnerComponent;
   @ViewChild(FlagsComponent) flags: FlagsComponent;
   private readonly ngRun$ = new Subject<any>();
@@ -108,7 +108,7 @@ export class NpmScriptComponent implements OnInit {
       withLatestFrom(this.commandArray$, this.script$),
       tap(() => {
         this.flags.hideFields();
-        this.taskRunner.terminalVisible.next(true);
+        this.taskRunner.terminalVisible$.next(true);
       }),
       switchMap(([_, c, s]) => {
         this.out.reset();

diff --git a/libs/feature-run/src/lib/target/target.component.html b/libs/feature-run/src/lib/target/target.component.html
@@ -1,5 +1,11 @@
 <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()" [path]="path()"></ui-flags>
-  <ui-terminal [command]="command$ | async" [outChunk]="(commandOutput$|async)?.outChunk" #output></ui-terminal>
+            (value)="onFlagsChange($event)" (action)="onRun()" [path]="path()"></ui-flags>
+  <ui-command-output [command]="command$ | async"
+                      [commandResponse]="commandOutput$ | async"
+                      [emptyTemplate]="emptyMessage">
+  </ui-command-output>
 </ui-task-runner>
+<ng-template #emptyMessage>
+  Click the Run button to start this task.
+</ng-template>
diff --git a/libs/feature-run/src/lib/target/target.component.ts b/libs/feature-run/src/lib/target/target.component.ts
@@ -2,7 +2,7 @@ import { Project } from '@angular-console/schema';
 import {
   FlagsComponent,
   TaskRunnerComponent,
-  TerminalComponent
+  CommandOutputComponent
 } from '@angular-console/ui';
 import {
   IncrementalCommandOutput,
@@ -42,7 +42,7 @@ export class TargetComponent implements OnInit {
   });
   command$: Observable<string>;
   commandOutput$: Observable<IncrementalCommandOutput>;
-  @ViewChild(TerminalComponent) out: TerminalComponent;
+  @ViewChild(CommandOutputComponent) out: CommandOutputComponent;
   @ViewChild(TaskRunnerComponent) taskRunner: TaskRunnerComponent;
   @ViewChild(FlagsComponent) flags: FlagsComponent;
   private readonly ngRun$ = new Subject<any>();
@@ -113,7 +113,7 @@ export class TargetComponent implements OnInit {
       withLatestFrom(this.commandArray$),
       tap(() => {
         this.flags.hideFields();
-        this.taskRunner.terminalVisible.next(true);
+        this.taskRunner.terminalVisible$.next(true);
       }),
       switchMap(([_, c]) => {
         this.out.reset();

diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -3,6 +3,7 @@ export * from './lib/terminal/terminal.component';
 export * from './lib/task-selector/task-selector.component';
 export * from './lib/contextual-action-bar/contextual-action-bar.component';
 export * from './lib/task-runner/task-runner.component';
+export * from './lib/command-output/command-output.component';
 export * from './lib/flags/flags.component';
 export * from './lib/animations/fade-in';
 export * from './lib/animations/grow-shink';