Clarity Integration

Update task defintion retrieval query Disable destroy/schedule actions for sub tasks of a composed task Fix Feature Enable directive Upgrade clarity to 3.1.4 Resolves #1447
spring-cloud · Jun 22, 2020 · 082a046 · 082a046
1 parent fd161d5
commit 082a046
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 74 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -29,10 +29,10 @@
     "@angular/platform-browser": "9.1.0",
     "@angular/platform-browser-dynamic": "9.1.0",
     "@angular/router": "9.1.0",
-    "@clr/angular": "3.1.3",
-    "@clr/core": "3.1.3",
-    "@clr/icons": "3.1.3",
-    "@clr/ui": "3.1.3",
+    "@clr/angular": "3.1.4",
+    "@clr/core": "3.1.4",
+    "@clr/icons": "3.1.4",
+    "@clr/ui": "3.1.4",
     "@ngrx/effects": "9.2.0",
     "@ngrx/router-store": "9.2.0",
     "@ngrx/store": "9.2.0",

diff --git a/ui/src/app/security/directive/role.directive.ts b/ui/src/app/security/directive/role.directive.ts
@@ -30,10 +30,8 @@ export class RoleDirective implements AfterViewInit {
     if (this.appFeature) {
       const features = this.appFeature.split(',');
       if (this.appFeature) {
-        let featureEnabled = true;
-        featureEnabled = !!features.find(async (feature) => {
-          return await this.aboutService.isFeatureEnabled(feature);
-        });
+        const result = await Promise.all([...features.map(feature => this.aboutService.isFeatureEnabled(feature))]);
+        const featureEnabled = result.filter(item => item === true).length > 0;
         this.checkRoleAccess(featureEnabled);
       }
     } else {

diff --git a/ui/src/app/shared/api/task.service.ts b/ui/src/app/shared/api/task.service.ts
@@ -34,10 +34,10 @@ export class TaskService {
       );
   }
 
-  getTask(name: string): Observable<Task> {
+  getTask(name: string, manifest = false): Observable<Task> {
     const headers = HttpUtils.getDefaultHttpHeaders();
     return this.httpClient
-      .get<any>(`/tasks/definitions/${name}`, { headers })
+      .get<any>(`/tasks/definitions/${name}?manifest=${manifest}`, { headers })
       .pipe(
         map(Task.parse),
         catchError(ErrorUtils.catchError)

diff --git a/ui/src/app/shared/model/task.model.ts b/ui/src/app/shared/model/task.model.ts
@@ -1,4 +1,5 @@
 import { Page } from './page.model';
+import { TaskExecution } from './task-execution.model';
 
 export class Task {
   name: string;
@@ -7,6 +8,7 @@ export class Task {
   composed: boolean;
   status: string;
   composedTaskElement: boolean;
+  lastTaskExecution: TaskExecution;
 
   static parse(input) {
     const task = new Task();
@@ -16,7 +18,9 @@ export class Task {
     task.status = input.status;
     task.composedTaskElement = input.composedTaskElement;
     task.description = input.description || '';
-
+    if (input.lastTaskExecution) {
+      task.lastTaskExecution = TaskExecution.parse(input.lastTaskExecution);
+    }
     return task;
   }
 

diff --git a/ui/src/app/tasks-jobs/tasks/launch/launch.component.ts b/ui/src/app/tasks-jobs/tasks/launch/launch.component.ts
@@ -3,7 +3,7 @@ import { Task } from '../../../shared/model/task.model';
 import { TaskService } from '../../../shared/api/task.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { map, mergeMap } from 'rxjs/operators';
-import { Form, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { KeyValueValidator } from '../../../shared/component/key-value/key-value.validator';
 import { TaskPropValidator } from '../task-prop.validator';
 import { Platform } from '../../../shared/model/platform.model';
@@ -16,7 +16,6 @@ import { HttpError } from '../../../shared/model/error.model';
   styles: []
 })
 export class LaunchComponent implements OnInit {
-
   loading = true;
   submitting = false;
   task: Task;
@@ -36,27 +35,25 @@ export class LaunchComponent implements OnInit {
           params => {
             this.task = new Task();
             this.task.name = params.name;
-            return this.taskService.getTask(params.name);
+            return this.taskService.getTask(params.name, true);
           }
         ),
-        mergeMap(task => this.taskService.getExecutions(0, 1, task.name, 'TASK_EXECUTION_ID', 'DESC').pipe(
-          map(executionPage => {
-            let parameters = '';
-            if (executionPage.items.length === 1 && executionPage.items[0].deploymentProperties) {
-              parameters = Object.keys(executionPage.items[0].deploymentProperties)
-                .map(key => (executionPage.items[0].deploymentProperties[key] === '******')
-                  ? ''
-                  : `${key}=${executionPage.items[0].deploymentProperties[key]}`
-                )
-                .filter(param => !!param)
-                .join('\n');
-            }
-            return {
-              task,
-              parameters
-            };
-          })
-        )),
+        map((task: Task) => {
+          let parameters = '';
+          if (task.lastTaskExecution && task.lastTaskExecution.deploymentProperties) {
+            parameters = Object.keys(task.lastTaskExecution.deploymentProperties)
+              .map(key => (task.lastTaskExecution.deploymentProperties[key] === '******')
+                ? ''
+                : `${key}=${task.lastTaskExecution.deploymentProperties[key]}`
+              )
+              .filter(param => !!param)
+              .join('\n');
+          }
+          return {
+            task,
+            parameters
+          };
+        }),
         mergeMap(
           ({ task, parameters }) => this.taskService.getPlatforms().pipe(
             map(platforms => ({

diff --git a/ui/src/app/tasks-jobs/tasks/task/task.component.html b/ui/src/app/tasks-jobs/tasks/task/task.component.html
@@ -67,22 +67,22 @@ <h1>Task <strong *ngIf="task">{{task.name}}</strong></h1>
     <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
       <app-view-card titleModal="Last execution" keyContext="task" name="{{task.name}}" id="execution">
         <ng-template>
-          <div class="block card-block-keyvalue lg-key" *ngIf="!loadingExecution">
-            <div *ngIf="execution">
+          <div class="block card-block-keyvalue lg-key">
+            <div *ngIf="task.lastTaskExecution">
               <div class="row">
                 <div class="key">Execution Id</div>
-                <div class="value">{{execution.executionId}}</div>
+                <div class="value">{{task.lastTaskExecution.executionId}}</div>
               </div>
               <div class="row">
                 <div class="key">Arguments</div>
                 <div class="value">
-                  <div *ngIf="execution.getArgumentsToArray().length > 0">
-                    <div *ngFor="let arg of execution.getArgumentsToArray()">
+                  <div *ngIf="task.lastTaskExecution.getArgumentsToArray().length > 0">
+                    <div *ngFor="let arg of task.lastTaskExecution.getArgumentsToArray()">
                       {{arg[0]}}:
                       <strong>{{arg[1]}}</strong>
                     </div>
                   </div>
-                  <div *ngIf="execution.getArgumentsToArray().length === 0">
+                  <div *ngIf="task.lastTaskExecution.getArgumentsToArray().length === 0">
                     N/A
                   </div>
                 </div>
@@ -91,106 +91,102 @@ <h1>Task <strong *ngIf="task">{{task.name}}</strong></h1>
                 <div class="key">External Execution Id</div>
                 <div class="value">
                   <a [routerLink]="'/jobs/executions/' + jobExecutionId"
-                     *ngFor="let jobExecutionId of execution.jobExecutionIds">
+                     *ngFor="let jobExecutionId of task.lastTaskExecution.jobExecutionIds">
                     {{jobExecutionId}}
                   </a>
-                  <div *ngIf="execution.jobExecutionIds?.length == 0">
+                  <div *ngIf="task.lastTaskExecution.jobExecutionIds?.length == 0">
                     N/A
                   </div>
                 </div>
               </div>
               <div class="row">
                 <div class="key">Batch Job</div>
                 <div class="value">
-                  <clr-icon *ngIf="execution.jobExecutionIds?.length > 0" shape="check"></clr-icon>
-                  <clr-icon *ngIf="execution.jobExecutionIds?.length == 0" shape="success-standard"></clr-icon>
+                  <clr-icon *ngIf="task.lastTaskExecution.jobExecutionIds?.length > 0" shape="check"></clr-icon>
+                  <clr-icon *ngIf="task.lastTaskExecution.jobExecutionIds?.length == 0" shape="success-standard"></clr-icon>
                 </div>
               </div>
               <div class="row">
                 <div class="key">Job Execution Ids</div>
                 <div class="value">
-                  {{execution.externalExecutionId || 'N/A'}}
+                  {{task.lastTaskExecution.externalExecutionId || 'N/A'}}
                 </div>
               </div>
               <div class="row">
                 <div class="key">Start Time</div>
                 <div class="value">
-                  {{execution.startTime | datetime}}
+                  {{task.lastTaskExecution.startTime | datetime}}
                 </div>
               </div>
               <div class="row">
                 <div class="key">End Time</div>
                 <div class="value">
-                  {{execution.endTime | datetime}}
+                  {{task.lastTaskExecution.endTime | datetime}}
                 </div>
               </div>
               <div class="row">
                 <div class="key">Duration</div>
                 <div class="value">
-                  {{execution.startTime | duration: execution.endTime}}
+                  {{task.lastTaskExecution.startTime | duration: task.lastTaskExecution.endTime}}
                 </div>
               </div>
               <div class="row">
                 <div class="key">Exit Code</div>
                 <div class="value">
-                  {{execution.exitCode}}
+                  {{task.lastTaskExecution.exitCode}}
                 </div>
               </div>
               <div class="row">
                 <div class="key">Exit Message</div>
                 <div class="value">
-                  {{execution.exitMessage || 'N/A'}}
+                  {{task.lastTaskExecution.exitMessage || 'N/A'}}
                 </div>
               </div>
               <div class="row">
                 <div class="key">Resource URL</div>
                 <div class="value">
-                  {{execution.resourceUrl || 'N/A'}}
+                  {{task.lastTaskExecution.resourceUrl || 'N/A'}}
                 </div>
               </div>
               <div class="row">
                 <div class="key">Application Properties</div>
                 <div class="value">
-                  <div *ngIf="execution.getAppPropertiesToArray().length > 0">
-                    <div *ngFor="let arg of execution.getAppPropertiesToArray()">
+                  <div *ngIf="task.lastTaskExecution.getAppPropertiesToArray().length > 0">
+                    <div *ngFor="let arg of task.lastTaskExecution.getAppPropertiesToArray()">
                       {{arg.key}}:
                       <strong>{{arg.value}}</strong>
                     </div>
                   </div>
-                  <div *ngIf="execution.getAppPropertiesToArray().length === 0">
+                  <div *ngIf="task.lastTaskExecution.getAppPropertiesToArray().length === 0">
                     N/A
                   </div>
                 </div>
               </div>
               <div class="row">
                 <div class="key">Platform Properties</div>
                 <div class="value">
-                  <div *ngIf="execution.getDeploymentPropertiesToArray().length > 0">
-                    <div *ngFor="let arg of execution.getDeploymentPropertiesToArray()">
+                  <div *ngIf="task.lastTaskExecution.getDeploymentPropertiesToArray().length > 0">
+                    <div *ngFor="let arg of task.lastTaskExecution.getDeploymentPropertiesToArray()">
                       {{arg.key}}:
                       <strong>{{arg.value}}</strong>
                     </div>
                   </div>
-                  <div *ngIf="execution.getDeploymentPropertiesToArray().length === 0">
+                  <div *ngIf="task.lastTaskExecution.getDeploymentPropertiesToArray().length === 0">
                     N/A
                   </div>
                 </div>
               </div>
             </div>
-            <div *ngIf="!execution">
+            <div *ngIf="!task.lastTaskExecution">
               No execution yet.
             </div>
           </div>
-          <div *ngIf="loadingExecution">
-            <clr-spinner clrInline clrSmall></clr-spinner>
-            Loading execution...
-          </div>
         </ng-template>
-        <div class="card-footer" *ngIf="execution">
-          <button class="btn btn-sm btn-secondary" (click)="navigateExecution(execution.executionId)">
+        <div class="card-footer" *ngIf="task.lastTaskExecution">
+          <button class="btn btn-sm btn-secondary" (click)="navigateExecution(task.lastTaskExecution.executionId)">
             View task execution
           </button>
-          <button class="btn btn-sm btn-secondary" (click)="openLog(execution)">View log</button>
+          <button class="btn btn-sm btn-secondary" (click)="openLog(task.lastTaskExecution)">View log</button>
         </div>
       </app-view-card>
     </div>

diff --git a/ui/src/app/tasks-jobs/tasks/task/task.component.ts b/ui/src/app/tasks-jobs/tasks/task/task.component.ts
@@ -23,7 +23,6 @@ export class TaskComponent implements OnInit {
   task: Task;
   applications: Array<any>;
   executions: TaskExecutionPage;
-  execution: TaskExecution;
 
   @ViewChild('destroyModal', { static: true }) destroyModal: DestroyComponent;
   @ViewChild('logModal', { static: true }) logModal: LogComponent;
@@ -42,7 +41,7 @@ export class TaskComponent implements OnInit {
           val => {
             this.task = new Task();
             this.task.name = val.name;
-            return this.taskService.getTask(val.name);
+            return this.taskService.getTask(val.name, true);
           }
         ),
       )
@@ -93,9 +92,6 @@ export class TaskComponent implements OnInit {
     this.taskService.getExecutions(0, 10, this.task.name, 'TASK_EXECUTION_ID', 'DESC')
       .subscribe((page: TaskExecutionPage) => {
         this.executions = page;
-        if (this.executions.total > 0) {
-          this.execution = this.executions.items[0];
-        }
         this.loadingExecution = false;
       }, (error) => {
         this.loadingExecution = false;

diff --git a/ui/src/app/tasks-jobs/tasks/tasks.component.html b/ui/src/app/tasks-jobs/tasks/tasks.component.html
@@ -1,7 +1,7 @@
 <h1>Tasks</h1>
 
 <clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" [(clrDgSelected)]="!grouped ? null : selected"
-              *ngIf="isInit">
+              *ngIf="isInit" #datagrid>
   <clr-dg-action-bar *ngIf="grouped">
     <button type="button" class="btn btn-sm btn-outline-danger" (click)="setMode(false)">
       Cancel
@@ -63,18 +63,21 @@ <h1>Tasks</h1>
     </ng-container>
     <clr-dg-filter style="display:none;"></clr-dg-filter>
   </clr-dg-column>
-  <clr-dg-row *ngFor="let task of page?.items" [clrDgItem]="task">
+  <clr-dg-row *clrDgItems="let task of page?.items" [clrDgItem]="task" [clrDgSelectable]="!task.composedTaskElement">
     <clr-dg-cell><a routerLink="/tasks-jobs/tasks/{{task.name}}">{{task.name}}</a></clr-dg-cell>
-    <clr-dg-cell>{{task.description}}</clr-dg-cell>
+    <clr-dg-cell>{{task.description}} {{task.composedTaskElement}}</clr-dg-cell>
     <clr-dg-cell><span class="dsl-text">{{task.dslText}}</span></clr-dg-cell>
     <clr-dg-cell><span class="label label-{{task.statusColor()}}">{{task.status}}</span></clr-dg-cell>
     <clr-dg-action-overflow *ngIf="!grouped">
       <button class="action-item" (click)="details(task)">Details</button>
       <button class="action-item" (click)="launch(task)" [appRole]="['ROLE_DEPLOY']">Launch</button>
-      <button class="action-item" (click)="schedule(task)" [appRole]="['ROLE_SCHEDULE']" appFeature="schedules">
+      <button class="action-item" (click)="schedule(task)" [appRole]="['ROLE_SCHEDULE']" appFeature="schedules"
+              [disabled]="task.composedTaskElement">
         Schedule
       </button>
-      <button class="action-item" (click)="destroyTasks([task])" [appRole]="['ROLE_DESTROY']">Destroy</button>
+      <button class="action-item" (click)="destroyTasks([task])" [appRole]="['ROLE_DESTROY']"
+              [disabled]="task.composedTaskElement">Destroy
+      </button>
       <button class="action-item" grafanaDashboardTask [task]="task">
         Grafana Dashboard
       </button>

diff --git a/ui/src/app/tasks-jobs/tasks/tasks.component.ts b/ui/src/app/tasks-jobs/tasks/tasks.component.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { Task } from '../../shared/model/task.model';
-import { ClrDatagridStateInterface } from '@clr/angular';
+import { ClrDatagrid, ClrDatagridStateInterface } from '@clr/angular';
 import { TaskPage } from '../../shared/model/task.model';
 import { TaskService } from '../../shared/api/task.service';
 import { DestroyComponent } from './destroy/destroy.component';
@@ -16,6 +16,7 @@ import { GroupService } from '../../shared/service/group.service';
 export class TasksComponent extends DatagridComponent {
   page: TaskPage;
   @ViewChild('destroyModal', { static: true }) destroyModal: DestroyComponent;
+  @ViewChild('datagrid') datagrid: ClrDatagrid;
 
   constructor(private taskService: TaskService,
               private router: Router,
@@ -40,6 +41,17 @@ export class TasksComponent extends DatagridComponent {
     }
   }
 
+  setMode(grouped: boolean) {
+    this.grouped = grouped;
+    this.selected = [];
+    // Hack (clarity/refresh lockItem)
+    setTimeout(() => {
+      this.datagrid.rows.map(row => {
+        this.datagrid.selection.lockItem(row.item, row.item.composedTaskElement)
+      })
+    });
+  }
+
   details(task: Task) {
     this.router.navigateByUrl(`tasks-jobs/tasks/${task.name}`);
   }