Merge branch '240-visual-indicator-to-track-bulk-deployment-progress' into 'develop'

update bulk indicator

See merge request !77

src/app/appmarket/appmarket.module.ts

@@ -48,6 +48,10 @@ import {InputTextModule} from 'primeng/inputtext';
 import {BulkSearchPipe} from './bulkDeployment/bulk-list/bulk-search.pipe';
 import {CheckboxModule} from 'primeng/checkbox';
 import { InputSwitchModule } from 'primeng/inputswitch';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { SidebarModule } from 'primeng/sidebar';
+import { ProgressBarModule } from 'primeng/progressbar';
+
 
 
 @NgModule({
@@ -94,7 +98,10 @@ import { InputSwitchModule } from 'primeng/inputswitch';
         InputTextModule,
         TooltipModule,
         CheckboxModule,
-        InputSwitchModule
+        InputSwitchModule,
+        OverlayPanelModule,
+        SidebarModule,
+        ProgressBarModule
     ],
     exports: [
         AppMarketComponent,

src/app/appmarket/bulkDeployment/appdeployment.service.ts

@@ -5,6 +5,7 @@ import {AppConfigService} from '../../service';
 import {BulkResponse} from '../../model/bulk-response';
 import {Observable} from 'rxjs';
 import {BulkDeployment} from '../../model/bulk-deployment';
+import { BulkQueueDetails } from '../../model/bulk-queue-details';
 
 @Injectable({
     providedIn: 'root'
@@ -108,4 +109,9 @@ export class AppdeploymentService {
         return this.http.delete(this.getUrl() +`${id}`, { params });
     }
 
+    public getQueueDetails(id: number) : Observable<BulkQueueDetails> {
+        return this.http.get<BulkQueueDetails>(this.getUrl() + `queue/${id}`)
+    }
+
+
 }

src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.html

@@ -9,6 +9,34 @@
         </div>
         
         <div class="flex">
+            <div  *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_VL_MANAGER']"  class="flex align-items-center mr-6 pt-2">
+        
+                <p-button 
+                    type="button" 
+                    class="mr-2" 
+                    (onClick)="sidebarVisible4 = true" 
+                    label="Deployments Queue"
+                    severity="secondary"
+                     ></p-button>
+                <p-sidebar [(visible)]="sidebarVisible4" position="left" styleClass="w-30rem">
+                    <h3>Deployments Queue</h3>
+                    <div class="flex flex-column">
+                        <div class="flex grid">
+                            <label class="col-10" for="jobInQueue">Jobs in queue</label>
+                            <span class="col-2 " id="jobInQueue">{{queueDetails?.jobInQueue}}</span>
+                        </div>
+                        <div class="flex grid">
+                            <label class="col-10" for="jobInProcess">In progress</label>
+                            <span class="col-2 " id="jobInProcess">{{queueDetails?.jobInProcess}}</span>
+                        </div>
+                        <div class="flex grid">
+                            <label class="col-10" for="jobInProcessId">Current proccessing bulk id</label>
+                            <span class="col-2" id="jobInProcessId">{{queueDetails?.jobInProcessId}}</span>
+                        </div>
+                    </div>
+                </p-sidebar>
+                
+            </div>
             <div  *roles="['ROLE_SYSTEM_ADMIN']"  class="flex align-items-center mr-6 pt-2">
                 <label  *ngIf="mode=== bulkTypeApp" class="mr-2" for="showDeleted">Show all</label>
                 <p-inputSwitch  *ngIf="mode=== bulkTypeApp"  id="showDeleted" (onChange)="refreshBulks()" [(ngModel)]="showDeleted" ngDefaultControl/>

src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.ts

-import {Component, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, Output, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {BulkDeployment} from '../../../model/bulk-deployment';
 import {BulkType} from '../../../model/bulk-response';
 import {SortableHeaderDirective} from '../../../service/sort-domain.directive';
 import {ModalComponent} from '../../../shared';
 import {AppdeploymentService} from '../appdeployment.service';
 import {DomSanitizer} from '@angular/platform-browser';
+import { BulkQueueDetails } from '../../../model/bulk-queue-details';
+import { map, timer } from 'rxjs';
 
 @Component({
     selector: 'app-bulk-list',
     templateUrl: './bulk-list.component.html',
     styleUrls: ['./bulk-list.component.css']
 })
-export class BulkListComponent {
+export class BulkListComponent implements OnDestroy {
 
     public static BULK_ENTRY_DETAIL_KEY_APP_INSTANCE_NO = 'appInstanceNo';
     public static BULK_ENTRY_DETAIL_KEY_APP_INSTANCE_NAME = 'appName';
@@ -48,8 +50,14 @@ export class BulkListComponent {
     public removeAll = false;
     public removeBulkId = 0;
 
+    public queueDetails : BulkQueueDetails;
+
+    public refreshQueue = undefined;
+    public sidebarVisible4 = false;
+
     constructor(private appDeploy: AppdeploymentService,
                 private sanitizer: DomSanitizer) {
+                    this.update();
     }
 
     public getApplicationName(details: Map<string, string>) {
@@ -164,4 +172,33 @@ export class BulkListComponent {
     public refreshBulks(): void {
         this.refresh.emit(this.showDeleted);
     }
+
+    public getQueueDetails(): void {
+        this.appDeploy.getQueueDetails(0).subscribe(queue => {
+           console.log(queue);
+           this.queueDetails = queue;
+        })   
+    }
+
+     public update() {
+            this.refreshQueue = timer(0, 60000).pipe(map(() => {
+              this.getQueueDetails();
+            })).subscribe()
+        }
+
+    public getQueryNumber() {
+        return this.queueDetails?.jobInQueue + this.queueDetails?.jobInProcess;
+    }
+
+        
+    public ngOnDestroy() {
+        if (this.refresh !== undefined) {
+            this.refresh.unsubscribe();
+            this.refreshQueue.unsubscribe();
+        }
+    }
+
+    public open() {
+
+    }
 }

src/app/appmarket/bulkDeployment/bulk-view/bulk-view.component.css

@@ -34,4 +34,13 @@
     white-space: nowrap !important;
 }
 
+:host ::ng-deep .job-done-bar {
+    .p-progressbar-value {
+        border: 0 none;
+        margin: 0;
+        background:green;
+    }
+}
+    
+
 

src/app/appmarket/bulkDeployment/bulk-view/bulk-view.component.html

@@ -201,7 +201,15 @@
 
             <button *ngIf="bulk.state !== 'FAILED'" class="btn btn-primary" (click)="getAppBulkDetails(this.bulkId)">{{'BULK.APP.DOWNLOAD_CSV' | translate}}</button>
         </div>
-        <div class="panel panel-default" style="margin-top: 3rem">
+        <div class="mt-4">
+            <p-progressBar [mode]="progressBarMode"[value]="progressBarValue" id="progressBarr" [style]="{ height: '18px' }" [styleClass]="jobDone ? 'job-done-bar' : 'normal-bar'">
+                <ng-template pTemplate="content" let-value> 
+                    <span>{{queueDetails?.jobDone}} <span *ngIf="queueDetails?.jobDone !== bulk.entries.length">(+{{queueDetails?.jobInProcess}})</span> / {{bulk.entries.length}}</span>    
+                    </ng-template>
+            </p-progressBar>
+
+        </div>
+        <div class="panel panel-default" style="margin-top: 1rem">
             <div class="panel-heading">
 
                 <div style="display: flex; justify-content: start; align-items: center">

src/app/appmarket/bulkDeployment/bulk-view/bulk-view.component.ts

@@ -6,6 +6,7 @@ import {BulkResponse, BulkType} from '../../../model/bulk-response';
 import {timer} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {AppImagesService} from '../../../service';
+import { BulkQueueDetails } from '../../../model/bulk-queue-details';
 
 @Component({
     selector: 'app-bulk-view',
@@ -20,6 +21,13 @@ export class BulkViewComponent implements OnInit, OnDestroy {
 
     public refresh = undefined;
 
+    public progressBarMode ;
+    public progressBarValue ;
+
+    public queueDetails :BulkQueueDetails; 
+
+    public jobDone = false;
+
     constructor(public deployService: AppdeploymentService,
                 private route: ActivatedRoute,
                 private router: Router,
@@ -28,6 +36,7 @@ export class BulkViewComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
+    
         this.route.params.subscribe(params => {
             if (params['id'] !== undefined) {
                 this.bulkId = +params['id'];
@@ -35,6 +44,7 @@ export class BulkViewComponent implements OnInit, OnDestroy {
                     (bulk) => {
                         this.bulk = bulk;
                         this.bulkType = bulk.type;
+                        this.getQueueDetails();
                         if (this.bulkType === BulkType.APPLICATION) {
                             this.update();
                         }
@@ -92,7 +102,18 @@ export class BulkViewComponent implements OnInit, OnDestroy {
             this.deployService.getBulkDeployment(this.bulk.id).subscribe(bulk => {
                 this.bulk = bulk;
                 if(bulk.state === 'REMOVED') this.refresh.unsubscribe();
+                if(bulk.state === 'PROCESSING' && this.queueDetails.jobInProcessId === bulk.id) {
+                    this.progressBarMode = "determinate"
+                    this.setBarValue();
+                } else if(bulk.state === 'PROCESSING') {
+                    this.setBarValue();
+                    this.progressBarMode = "indeterminate"
+                } else {
+                    this.progressBarMode = "determinate"
+                    this.setBarValue();
+                }
             })
+           
         })).subscribe()
     }
 
@@ -120,7 +141,27 @@ export class BulkViewComponent implements OnInit, OnDestroy {
     public refreshStates() {
         this.deployService.refreshStatesInBulkDeployment(this.bulkId).subscribe( deply => {
             this.bulk = deply;
+            this.getQueueDetails();
             console.log("Updated states of bulks")
         })
     }
+
+    public setBarValue() {
+        this.getQueueDetails();
+    }
+    
+    public getQueueDetails(): void {
+     this.deployService.getQueueDetails(this.bulkId).subscribe(queue => {
+        console.log(queue);
+        this.queueDetails = queue;
+        if(queue.jobDone === this.bulk.entries.length) {
+            this.progressBarValue = 100;
+            this.jobDone = true;
+        } else {
+            this.progressBarValue =  queue.jobDone * 100 / this.bulk.entries.length;
+            this.jobDone = false;
+        }
+        
+     })   
+    }
 }

src/app/model/bulk-queue-details.ts

+export class BulkQueueDetails {
+
+    public jobInProcess: number;
+    public jobInProcessId: number;
+    public jobInQueue: number;
+    public jobDone: number;
+    public bulkJobInQueue: number;
+}
\ No newline at end of file