fix: Fixed error output of build task. (#563)

nrwl · Feb 28, 2019 · 827b016 · 827b016
1 parent 3736f36
commit 827b016
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 76 deletions.
diff --git a/apps/vscode/src/app/tree-view/current-workspace-tree-provider.ts b/apps/vscode/src/app/tree-view/current-workspace-tree-provider.ts
@@ -32,6 +32,7 @@ export class CurrentWorkspaceTreeProvider extends AbstractTreeProvider<
       settings,
       {
         path: workspacePath,
+        pinnedProjectNames: [],
         name
       },
       extensionPath

diff --git a/libs/schema/src/lib/generated/graphql-types.ts b/libs/schema/src/lib/generated/graphql-types.ts
@@ -48,6 +48,8 @@ export interface Settings {
   workspaceSchematicsNpmScript?: Maybe<string>;
 
   recent: WorkspaceDefinition[];
+
+  isWsl?: Maybe<boolean>;
 }
 
 export interface WorkspaceDefinition {
@@ -661,6 +663,8 @@ export namespace SettingsResolvers {
     >;
 
     recent?: RecentResolver<any[], TypeParent, Context>;
+
+    isWsl?: IsWslResolver<Maybe<boolean>, TypeParent, Context>;
   }
 
   export type CanCollectDataResolver<
@@ -708,6 +712,11 @@ export namespace SettingsResolvers {
     Parent,
     Context
   >;
+  export type IsWslResolver<
+    R = Maybe<boolean>,
+    Parent = any,
+    Context = any
+  > = Resolver<R, Parent, Context>;
 }
 
 export namespace WorkspaceDefinitionResolvers {

diff --git a/libs/ui/src/lib/build-status/build-status.component.html b/libs/ui/src/lib/build-status/build-status.component.html
@@ -132,20 +132,18 @@ <h3>Problems</h3>
         </div>
       </div>
       <ng-container *ngIf="(errors$ | async) as errors">
-        <mat-list *ngFor="let error of errors" class="errors-list">
-          <mat-list-item>
-            <mat-icon mat-list-icon>error</mat-icon>
+        <div class="problem-list">
+          <div class="problem-list-item" *ngFor="let error of errors">
             {{ error }}
-          </mat-list-item>
-        </mat-list>
+          </div>
+        </div>
       </ng-container>
       <ng-container *ngIf="(warnings$ | async) as warnings">
-        <mat-list *ngFor="let warning of warnings" class="warnings-list">
-          <mat-list-item>
-            <mat-icon mat-list-icon>warning</mat-icon>
+        <div class="problem-list">
+          <div class="problem-list-item" *ngFor="let warning of warnings">
             {{ warning }}
-          </mat-list-item>
-        </mat-list>
+          </div>
+        </div>
       </ng-container>
     </mat-card>
   </div>
@@ -204,9 +202,7 @@ <h3>Assets</h3>
           *ngFor="let asset of displayAssets; trackBy: trackByAsset"
         >
           <mat-grid-tile colspan="2">
-            <div fxFlex fxLayoutAlign="start center" class="content">
-              {{ asset.name }}
-            </div>
+            <div class="asset-name">{{ asset.name }}</div>
           </mat-grid-tile>
           <mat-grid-tile colspan="1">
             <div class="content">{{ asset.size | formatFileSize: '–' }}</div>

diff --git a/libs/ui/src/lib/build-status/build-status.component.scss b/libs/ui/src/lib/build-status/build-status.component.scss
@@ -32,100 +32,137 @@ small {
   color: mat-color($hint-palette);
 }
 
+h3 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+}
+
 .container {
   overflow: auto;
   height: 100%;
+}
 
-  h3 {
-    font-weight: 500;
-    margin: 0;
-  }
+.grid {
+  display: grid;
+  box-sizing: border-box;
+  grid-gap: 20px;
+}
+
+.grid-3-columns {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-4-columns {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.row {
+  margin: 20px;
+}
+// Prevent collapsed row from taking up extra margins.
+.row.collapse {
+  margin-bottom: -20px;
+}
+
+.header {
+  margin-bottom: 20px;
 
-  .grid {
-    display: grid;
-    box-sizing: border-box;
-    grid-gap: 20px;
+  mat-icon {
+    font-size: 18px;
   }
 
-  .grid-3-columns {
-    grid-template-columns: repeat(3, 1fr);
+  .actions {
+    width: 200px;
   }
+}
 
-  .grid-4-columns {
-    grid-template-columns: repeat(4, 1fr);
+.title {
+  text-align: center;
+  font-weight: 100;
+  font-size: 14px;
+  color: mat-color($hint-palette);
+}
+
+.content {
+  text-align: center;
+  font-size: 18px;
+  font-weight: 100;
+}
+
+.summary {
+  .title {
+    font-size: 18px;
   }
+  .content {
+    font-size: 24px;
 
-  .row {
-    margin: 20px;
+    small {
+      font-size: 14px;
+    }
   }
-  // Prevent collapsed row from taking up extra margins.
-  .row.collapse {
-    margin-bottom: -20px;
+}
+
+.build-status {
+  width: 20vw;
+  max-width: 200px;
+  min-width: 100px;
+  text-align: center;
+
+  .status-icon-container mat-icon {
+    margin: 0 auto;
+    font-size: $build-icon-size;
+    display: block;
+    height: $build-icon-size;
+    width: $build-icon-size;
   }
 
-  .header {
-    margin-bottom: 20px;
+  .build-status-content {
+    margin-top: 20px;
+  }
+}
 
-    mat-icon {
-      font-size: 18px;
-    }
+.problem-list {
+  white-space: pre;
+  width: 100%;
+  overflow-x: auto;
 
-    .actions {
-      width: 200px;
-    }
+  .problem-list-item {
+    font-family: 'Roboto Mono', monospace;
+    font-size: 14px;
+    font-weight: 100;
+    color: mat-color($failure-palette);
   }
+}
+
+.asset-name {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+}
 
+@media (max-width: $smallScreen) {
   .title {
     text-align: center;
     font-weight: 100;
-    font-size: 14px;
+    font-size: 12px;
     color: mat-color($hint-palette);
   }
 
   .content {
     text-align: center;
-    font-size: 18px;
+    font-size: 14px;
     font-weight: 100;
   }
 
   .summary {
     .title {
-      font-size: 18px;
+      font-size: 14px;
     }
     .content {
-      font-size: 24px;
-
-      small {
-        font-size: 14px;
-      }
-    }
-  }
-
-  .build-status {
-    width: 200px;
-    text-align: center;
-
-    .status-icon-container mat-icon {
-      margin: 0 auto;
-      font-size: $build-icon-size;
-      display: block;
-      height: $build-icon-size;
-      width: $build-icon-size;
-    }
-
-    .build-status-content {
-      margin-top: 20px;
-    }
-  }
-
-  .errors-list {
-    .mat-list-item {
-      font-size: 18px;
-      font-weight: 100;
-      color: mat-color($failure-palette);
-    }
-    .mat-icon {
-      color: mat-color($failure-palette);
+      font-size: 20px;
     }
   }
 }
diff --git a/libs/ui/src/lib/build-status/build-status.component.ts b/libs/ui/src/lib/build-status/build-status.component.ts
@@ -117,8 +117,14 @@ export class BuildStatusComponent {
     map(status => {
       if (status) {
         const statsErrors = status.stats ? status.stats.errors : [];
-        const otherErrors = status.errors;
-        const errors = statsErrors.length > 0 ? statsErrors : otherErrors;
+        // If we don't see stats errors then return errors read from terminal output.
+        const errorsFromTerminalOutput = status.errors;
+        const errors =
+          statsErrors.length > 0
+            ? statsErrors
+            : errorsFromTerminalOutput.length > 0
+            ? [errorsFromTerminalOutput.join('\n')]
+            : [];
         // Only show unique values
         return errors.filter((x, idx, ary) => ary.indexOf(x) === idx);
       } else {