#44 closes 44

citrus-admin-client/src/main/resources/static/package.json

@@ -1,17 +1,15 @@
 {
   "private": true,
   "dependencies": {
-    "@angular/common": "4.0.0",
-    "@angular/compiler": "4.0.0",
-    "@angular/core": "4.0.0",
-    "@angular/forms": "4.0.0",
-    "@angular/http": "4.0.0",
-    "@angular/platform-browser": "4.0.0",
-    "@angular/platform-browser-dynamic": "4.0.0",
-    "@angular/router": "4.0.0",
-    "core-js": "2.4.1",
-    "rxjs": "5.1.0",
-    "zone.js": "^0.8.4",
+    "@angular/animations": "4.1.2",
+    "@angular/common": "4.1.2",
+    "@angular/compiler": "4.1.2",
+    "@angular/core": "4.1.2",
+    "@angular/forms": "4.1.2",
+    "@angular/http": "4.1.2",
+    "@angular/platform-browser": "4.1.2",
+    "@angular/platform-browser-dynamic": "4.1.2",
+    "@angular/router": "4.1.2",
     "@ngrx/core": "1.2.0",
     "@ngrx/effects": "2.0.3",
     "@ngrx/router-store": "^1.2.5",
@@ -21,21 +19,24 @@
     "angular-in-memory-web-api": "0.1.5",
     "bootstrap": "3.3.7",
     "brace": "0.9.1",
+    "core-js": "2.4.1",
     "font-awesome": "4.5.0",
     "jquery": "2.2.4",
     "jquery-ui-bundle": "1.11.4",
     "lodash": "4.17.4",
     "moment": "2.17.1",
     "reflect-metadata": "0.1.8",
+    "rxjs": "5.1.0",
     "sockjs-client": "1.1.2",
     "stompjs": "2.3.3",
     "systemjs": "0.19.39",
     "underscore": "1.8.3",
-    "url": "0.11.0"
+    "url": "0.11.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "1.0.2",
-    "@angular/compiler-cli": "4.0.0",
+    "@angular/compiler-cli": "4.1.2",
     "@types/ace": "0.0.32",
     "@types/jasmine": "2.5.38",
     "@types/jquery": "2.0.40",

citrus-admin-client/src/main/resources/static/src/app/components/test/detail/sources/source.code.component.ts

@@ -7,7 +7,8 @@ import * as ace from 'brace';
 import 'brace/theme/chrome';
 import 'brace/mode/java';
 import 'brace/mode/xml';
-import Editor = AceAjax.Editor;
+import Editor = ace.Editor;
+
 
 @Component({
     selector: "source-code",

citrus-admin-client/src/main/resources/static/src/app/components/test/test-group-run.html

@@ -16,7 +16,7 @@ <h1 class="page-header">
           </li>
         </ul>
       </span>
-      <input type="text" class="form-control" value="{{selected ? selected.name : 'All tests'}}">
+      <input type="text" class="form-control" value="{{(selected|async) ? (selected|async).name : 'All tests'}}">
       <span class="input-group-btn">
         <button type="button" class="btn btn-success" [disabled]="running" (click)="execute()"><i class="fa fa-play-circle"></i> Run</button>
       </span>
@@ -40,29 +40,57 @@ <h1 class="page-header">
       </tr>
     </thead>
     <tbody>
-      <tr *ngIf="!selected">
-        <td></td>
+      <tr>
         <td>
+          <button class="btn btn-xs btn-success" (click)="executeAll()">
+            <i class="fa fa-play-circle"></i>
+          </button>
+        </td>
+        <td (click)="togglePackage()">
+          <i class="fa clickable" [ngClass]="{'fa-caret-right': !(packagesOpen|async), 'fa-caret-down': packagesOpen|async}"></i>
           <i class="fa fa-file-text-o"></i>
           <span title="All tests">All tests</span>
         </td>
-        <td></td>
+        <td (click)="togglePackage()"></td>
         <td>
-          <img *ngIf="running" class="ajax-loader" src="assets/images/ajax-loader.gif" style="width: 1.3em;"/>
-          <span *ngIf="!running">&nbsp;</span>
+          <execution-status-package
+              [executionInfo]="getExecutionInfoForPackage(AllTests)|async"
+              [success]="getPackageSuccess(AllTests)|async"
+              (logs)="openConsole()"
+          ></execution-status-package>
         </td>
       </tr>
-      <tr *ngFor="let result of results" (click)="open(result.test)" class="clickable">
-        <td><span class="badge badge-{{result.test.type | lowercase}}">{{result.test.type | lowercase}}</span></td>
+    </tbody>
+    <tbody *ngFor="let package of packageList|async">
+      <tr >
+        <td>
+          <button class="btn btn-xs btn-success" (click)="executeGroup(package)">
+            <i class="fa fa-play-circle"></i>
+          </button>
+        </td>
+        <td style="padding-left: 25px" (click)="toggleTests(package)">
+          <i class="fa clickable" [ngClass]="{'fa-caret-right': !(isOpen(package)|async), 'fa-caret-down': isOpen(package)|async}"></i>
+          {{package.name}}
+          <span class="badge badge-default">{{package.tests.length}}</span>
+        </td>
+        <td (click)="toggleTests(package)"></td>
         <td>
+          <execution-status-package
+              [executionInfo]="getExecutionInfoForPackage(package)|async"
+              [success]="getPackageSuccess(package)|async"
+              (logs)="openConsole(package)"
+          ></execution-status-package>
+        </td>
+      </tr>
+      <tr *ngFor="let result of resultListFor(package)|async" (click)="open(result.test)" class="clickable">
+        <td><span class="badge badge-{{result.test.type | lowercase}}">{{result.test.type | lowercase}}</span></td>
+        <td style="padding-left: 25px">
           <i class="fa fa-file-text-o"></i>
           <span title="{{result.test.className}}.{{result.test.methodName}}">{{result.test.name}}</span>
         </td>
         <td>{{result.test.className}}</td>
         <td>
-          <span *ngIf="!running && result.success == undefined">&nbsp;</span>
-          <img *ngIf="running && result.success == undefined" class="ajax-loader" src="assets/images/ajax-loader.gif" style="width: 1.3em;"/>
-          <span *ngIf="result.success != undefined" [class]="(result.success == undefined) ? 'badge' : (result.success ? 'badge badge-success' : 'badge badge-danger')" [textContent]="result.success ? 'SUCCESS' : 'FAILED'"></span>
+          <execution-status-test [result]="result"></execution-status-test>
         </td>
       </tr>
     </tbody>
@@ -74,14 +102,13 @@ <h1 class="page-header">
     </tfoot>
   </table>
 </div>
-
 <div class="dialog"
      dialog-id="dialog-console"
      dialog-title="Console log output"
      dialog-confirm="no"
      dialog-size="lg">
   <p>Log output:</p>
 
-  <pre class="logger" [textContent]="currentOutput"></pre>
+  <pre class="logger" [textContent]="currentOutput|async"></pre>
 
-</div>
+</div>