Add delete chart button

Add delete chart button to remove all version of seleted charts

Signed-off-by: Qian Deng <dengq@vmware.com>

src/portal/lib/src/helm-chart/helm-chart.component.html

@@ -27,6 +27,9 @@
                     <button type="button" class="btn btn-sm btn-secondary" [disabled]="!developerRoleOrAbove" (click)="onChartUpload()">
                             <clr-icon shape="upload" size="16"></clr-icon>&nbsp;{{'HELM_CHART.UPLOAD' | translate}}
                     </button>
+                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="!hasProjectAdminRole" (click)="openChartDeleteModal(selectedRows)">
+                        <clr-icon shape="delete" size="16"></clr-icon>&nbsp;{{'BUTTON.DELETE' | translate}}
+                    </button>
                 </clr-dg-action-bar>
                 <clr-dg-column >{{'HELM_CHART.NAME' | translate}}</clr-dg-column>
                 <clr-dg-column >{{'HELM_CHART.STATUS' | translate}}</clr-dg-column>
@@ -86,6 +89,7 @@
             <span class="spinner"></span>
         </div>
     </div>
+    <confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
     <clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
         <h3 class="modal-title">{{'HELM_CHART.UPLOAD_TITLE' | translate | titlecase}}</h3>
         <div class="modal-body">

src/portal/lib/src/helm-chart/helm-chart.component.ts

@@ -11,13 +11,26 @@ import {
 import { NgForm } from '@angular/forms';
 import { TranslateService } from "@ngx-translate/core";
 import { State } from "@clr/angular";
-import { finalize } from "rxjs/operators";
+import { forkJoin, throwError } from "rxjs";
+import { finalize, map, catchError } from "rxjs/operators";
 import { SystemInfo, SystemInfoService, HelmChartItem } from "../service/index";
 import { ErrorHandler } from "../error-handler/error-handler";
 import { toPromise, DEFAULT_PAGE_SIZE } from "../utils";
 import { HelmChartService } from "../service/helm-chart.service";
 import { DefaultHelmIcon} from "../shared/shared.const";
 import { Roles } from './../shared/shared.const';
+import { OperationService } from "./../operation/operation.service";
+import {
+  OperateInfo,
+  OperationState,
+  operateChanges
+} from "./../operation/operate";
+import { ConfirmationAcknowledgement, ConfirmationDialogComponent, ConfirmationMessage } from "./../confirmation-dialog";
+import {
+  ConfirmationButtons,
+  ConfirmationTargets,
+  ConfirmationState,
+} from "./../shared/shared.const";
 
 @Component({
   selector: "hbr-helm-chart",
@@ -62,11 +75,14 @@ export class HelmChartComponent implements OnInit {
 
   @ViewChild('chartUploadForm') uploadForm: NgForm;
 
+  @ViewChild("confirmationDialog") confirmationDialog: ConfirmationDialogComponent;
+
   constructor(
     private errorHandler: ErrorHandler,
     private translateService: TranslateService,
     private systemInfoService: SystemInfoService,
     private helmChartService: HelmChartService,
+    private operationService: OperationService,
     private cdr: ChangeDetectorRef,
   ) {}
 
@@ -167,6 +183,58 @@ export class HelmChartComponent implements OnInit {
   }
 
 
+  deleteChart(chartName: string) {
+    let operateMsg = new OperateInfo();
+    operateMsg.name = "OPERATION.DELETE_CHART";
+    operateMsg.data.id = chartName;
+    operateMsg.state = OperationState.progressing;
+    operateMsg.data.name = chartName;
+    this.operationService.publishInfo(operateMsg);
+
+    return this.helmChartService.deleteHelmChart(this.projectName, chartName)
+    .pipe(map(
+      () => operateChanges(operateMsg, OperationState.success),
+      err => operateChanges(operateMsg, OperationState.failure, err)
+    ));
+  }
+
+  deleteCharts(charts: HelmChartItem[]) {
+    if (charts && charts.length < 1) { return; }
+    let chartsDelete$ = charts.map(chart => this.deleteChart(chart.name));
+    forkJoin(chartsDelete$)
+    .pipe(
+      catchError(err => throwError(err)),
+      finalize(() => {
+        this.refresh();
+        this.selectedRows = [];
+      }))
+    .subscribe(() => {});
+  }
+
+  openChartDeleteModal(charts: HelmChartItem[]) {
+    let chartNames = charts.map(chart => chart.name).join(",");
+    let message = new ConfirmationMessage(
+      "HELM_CHART.DELETE_CHART_VERSION_TITLE",
+      "HELM_CHART.DELETE_CHART_VERSION",
+      chartNames,
+      charts,
+      ConfirmationTargets.HELM_CHART,
+      ConfirmationButtons.DELETE_CANCEL
+    );
+    this.confirmationDialog.open(message);
+  }
+
+  confirmDeletion(message: ConfirmationAcknowledgement) {
+    if (
+      message &&
+      message.source === ConfirmationTargets.HELM_CHART &&
+      message.state === ConfirmationState.CONFIRMED
+    ) {
+      let charts = message.data;
+      this.deleteCharts(charts);
+    }
+  }
+
   showCard(cardView: boolean) {
     if (this.isCardView === cardView) {
       return;

src/portal/lib/src/helm-chart/versions/helm-chart-version.component.ts

@@ -259,7 +259,7 @@ export class ChartVersionComponent implements OnInit {
       "HELM_CHART.DELETE_CHART_VERSION",
       versionNames,
       versions,
-      ConfirmationTargets.HELM_CHART,
+      ConfirmationTargets.HELM_CHART_VERSION,
       ConfirmationButtons.DELETE_CANCEL
     );
     this.confirmationDialog.open(message);
@@ -270,7 +270,7 @@ export class ChartVersionComponent implements OnInit {
   confirmDeletion(message: ConfirmationAcknowledgement) {
     if (
       message &&
-      message.source === ConfirmationTargets.HELM_CHART &&
+      message.source === ConfirmationTargets.HELM_CHART_VERSION &&
       message.state === ConfirmationState.CONFIRMED
     ) {
       let versions = message.data;

src/portal/lib/src/service/helm-chart.service.ts

@@ -35,7 +35,7 @@ export abstract class HelmChartService {
    *  ** deprecated param projectId Id of the project
    *  ** deprecated param chartId ID of helmChart in this specific project
    */
-  abstract deleteHelmChart(projectId: number | string, chartId: number): Observable<any>;
+  abstract deleteHelmChart(projectId: number | string, chartName: string): Observable<any>;
 
   /**
    * Get all the versions of helmchart
@@ -153,13 +153,13 @@ export class HelmChartDefaultService extends HelmChartService {
       }));
   }
 
-  public deleteHelmChart(projectId: number | string, chartId: number): any {
-    if (!chartId) {
+  public deleteHelmChart(projectId: number | string, chartName: string): Observable<any> {
+    if (!chartName) {
       observableThrowError("Bad argument");
     }
 
     return this.http
-      .delete(`${this.config.helmChartEndpoint}/${projectId}/${chartId}`)
+      .delete(`${this.config.helmChartEndpoint}/${projectId}/charts/${chartName}`)
       .pipe(map(response => {
         return this.extractData(response);
       }))

src/portal/lib/src/shared/shared.const.ts

@@ -41,7 +41,8 @@ export const enum ConfirmationTargets {
   CONFIG,
   CONFIG_ROUTE,
   CONFIG_TAB,
-  HELM_CHART
+  HELM_CHART,
+  HELM_CHART_VERSION
 }
 
 export const enum ActionType {