Merge pull request #5989 from ninjadq/add_buttons_to_chart_list_view

Add buttons to chart list view

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

@@ -25,7 +25,13 @@
             <clr-datagrid (clrDgRefresh)="refresh()" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRows">
                 <clr-dg-action-bar>
                     <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}}
+                            <clr-icon shape="upload" size="16"></clr-icon>{{'HELM_CHART.UPLOAD' | translate}}
+                    </button>
+                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="!hasProjectAdminRole || selectedRows.length<1" (click)="openChartDeleteModal(selectedRows)">
+                        <clr-icon shape="trash" size="16"></clr-icon>{{'BUTTON.DELETE' | translate}}
+                    </button>
+                    <button type="button" class="btn btn-sm btn-secondary" [disabled]="selectedRows.length!==1" (click)="downloadLatestVersion()">
+                        <clr-icon shape="download" size="16"></clr-icon>{{'HELM_CHART.DOWNLOAD' | translate}}
                     </button>
                 </clr-dg-action-bar>
                 <clr-dg-column >{{'HELM_CHART.NAME' | translate}}</clr-dg-column>
@@ -86,6 +92,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.scss

@@ -107,4 +107,10 @@ clr-modal {
             max-width: 25%;
         }
     }
+}
+
+button {
+    clr-icon {
+        margin-right: 6px;
+    }
 }

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, Observable } 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 { toPromise, DEFAULT_PAGE_SIZE, downloadFile } 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,87 @@ export class HelmChartComponent implements OnInit {
   }
 
 
+  deleteChart(chartName: string): Observable<any> {
+    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(() => {});
+  }
+
+  downloadLatestVersion(evt?: Event, item?: HelmChartItem) {
+    if (evt) {
+      evt.stopPropagation();
+    }
+    let selectedChart: HelmChartItem;
+
+    if (item) {
+      selectedChart = item;
+    } else {
+      // return if selected version less then 1
+      if (this.selectedRows.length < 1) {
+        return;
+      }
+      selectedChart = this.selectedRows[0];
+    }
+    if (!selectedChart) {
+      return;
+    }
+    let filename = `charts/${selectedChart.name}-${selectedChart.latest_version}.tgz`;
+    this.helmChartService.downloadChart(this.projectName, filename).subscribe(
+      res => {
+        downloadFile(res);
+      },
+      error => {
+        this.errorHandler.error(error);
+      }
+    );
+  }
+
+  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
@@ -123,6 +123,7 @@ export class HelmChartDefaultService extends HelmChartService {
         return {
           name: chart.Name,
           total_versions: chart.total_versions,
+          latest_version: chart.latest_version,
           created: chart.Created,
           icon: chart.Icon,
           home: chart.Home};
@@ -153,13 +154,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/service/interface.ts

@@ -301,6 +301,7 @@ export interface ScrollPosition {
 export interface HelmChartItem {
   name: string;
   total_versions: number;
+  latest_version: string;
   created: string;
   icon: string;
   home: string;

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 {