Support adding label to multiple artifacts (#14443)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html

@@ -107,7 +107,7 @@
                             {{'REPOSITORY.COPY_DIGEST_ID' | translate}}</div>
                         <clr-dropdown *ngIf="!withAdmiral">
                             <button class="action-dropdown-item" clrDropdownTrigger
-                                [disabled]="!(selectedRow.length==1)||!hasAddLabelImagePermission ||depth"
+                                [disabled]="!canAddLabel()||!hasAddLabelImagePermission ||depth || inprogress"
                                 (click)="addLabels()">
                                 {{'REPOSITORY.ADD_LABELS' | translate}}
                             </button>
@@ -121,7 +121,7 @@
                                     <div [hidden]='imageStickLabels.length' class="no-labels">
                                         {{'LABEL.NO_LABELS' | translate }}</div>
                                     <div [hidden]='!imageStickLabels.length' class="has-label">
-                                        <button type="button" class="dropdown-item"
+                                        <button type="button" class="dropdown-item" clrDropdownItem
                                             *ngFor='let label of imageStickLabels' [hidden]='!label.show'
                                             (click)="stickLabel(label)">
                                             <clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'>

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -68,6 +68,7 @@ import { errorHandler } from "../../../../../../../shared/units/shared.utils";
 import { ConfirmationDialogComponent } from "../../../../../../../shared/components/confirmation-dialog";
 import { ConfirmationMessage } from "../../../../../../global-confirmation-dialog/confirmation-message";
 import { ConfirmationAcknowledgement } from "../../../../../../global-confirmation-dialog/confirmation-state-message";
+
 export interface LabelState {
   iconsShow: boolean;
   label: Label;
@@ -169,7 +170,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   // could Pagination filter
   filters: string[];
 
-  scanFiinishArtifactLength: number = 0;
+  scanFinishedArtifactLength: number = 0;
   onScanArtifactsLength: number = 0;
   constructor(
     private errorHandlerService: ErrorHandler,
@@ -477,7 +478,20 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
     this.stickName = '';
     this.labelSelectedChange(this.selectedRow);
   }
-
+  canAddLabel(): boolean {
+    if (this.selectedRow && this.selectedRow.length === 1) {
+      return true;
+    }
+    if (this.selectedRow && this.selectedRow.length > 1) {
+      for (let i = 0; i < this.selectedRow.length; i ++) {
+        if (this.selectedRow[i].labels && this.selectedRow[i].labels.length) {
+          return false;
+        }
+      }
+      return true;
+    }
+    return false;
+  }
   stickLabel(labelInfo: LabelState): void {
     if (labelInfo && !labelInfo.iconsShow) {
       this.selectLabel(labelInfo);
@@ -488,16 +502,21 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   }
 
   selectLabel(labelInfo: LabelState): void {
-    if (!this.inprogress) {
+    if (!this.inprogress) { // add label to multiple artifact
-      this.inprogress = true;
+      const ObservableArr: Array<Observable<null>> = [];
-      this.selectedRow = this.selectedTag;
+      this.selectedRow.forEach(item => {
-      let params: NewArtifactService.AddLabelParams = {
+        const params: NewArtifactService.AddLabelParams = {
           projectName: this.projectName,
           repositoryName: dbEncodeURIComponent(this.repoName),
-        reference: this.selectedRow[0].digest,
+          reference: item.digest,
           label: labelInfo.label
         };
-      this.newArtifactService.addLabel(params).subscribe(res => {
+        ObservableArr.push(this.newArtifactService.addLabel(params));
+      });
+      this.inprogress = true;
+      forkJoin(ObservableArr)
+          .pipe(finalize(() => this.inprogress = false))
+          .subscribe(res => {
             this.refresh();
             // set the selected label in front
             this.imageStickLabels.splice(this.imageStickLabels.indexOf(labelInfo), 1);
@@ -507,16 +526,13 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
                 return true;
               }
             });
-
             // when is the last one
             if (this.imageStickLabels.every(data => data.iconsShow === true)) {
               this.imageStickLabels.push(labelInfo);
             }
-
             labelInfo.iconsShow = true;
-        this.inprogress = false;
           }, err => {
-        this.inprogress = false;
+            this.refresh();
             this.errorHandlerService.error(err);
           });
     }
@@ -882,7 +898,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
     if (!this.selectedRow.length) {
       return;
     }
-    this.scanFiinishArtifactLength = 0;
+    this.scanFinishedArtifactLength = 0;
     this.onScanArtifactsLength = this.selectedRow.length;
     this.onSendingScanCommand = true;
     this.selectedRow.forEach((data: any) => {
@@ -900,9 +916,9 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
     return !!(artifact && artifact.addition_links && artifact.addition_links[ADDITIONS.VULNERABILITIES]);
   }
   submitFinish(e: boolean) {
-    this.scanFiinishArtifactLength += 1;
+    this.scanFinishedArtifactLength += 1;
     // all selected scan action has start
-    if (this.scanFiinishArtifactLength === this.onScanArtifactsLength) {
+    if (this.scanFinishedArtifactLength === this.onScanArtifactsLength) {
       this.onSendingScanCommand = e;
     }
   }