Merge pull request #5549 from ninjadq/fix_chart_ui_related_issue

Fix chart ui related issue

src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html

@@ -24,7 +24,7 @@
                     <tr *ngFor="let src of summary.sources; let i = index">
                         <td class="left" *ngIf="i === 0">{{'HELM_CHART.SRC_REPO' | translate }}</td>
                         <td class="left" *ngIf="i !== 0"></td>
-                        <td class="left text-wrapper" >
+                        <td class="left text-wrapper">
                             <a href="{{src}}">{{src}}</a>
                         </td>
                     </tr>
@@ -48,28 +48,62 @@
         </div>
         <div class="col-md-12 content-group">
             <div>
-                <label>{{'HELM_CHART.ADD_REPO' | translate }}</label>
+                <label>{{'HELM_CHART.COMMAND' | translate }}</label>
             </div>
             <table class="table">
                 <tbody>
                     <tr>
-                        <td class="left">{{addCMD}}</td>
+                        <td class="left cmd-title">{{'HELM_CHART.ADD_REPO' | translate }}</td>
+                        <td class="left cmd-content">
+                            <input class="cmd-content" type="text"
+                            [(ngModel)]="addCMD" #addCMDInput readonly/>
+                        </td>
+                        <td class="left">
+                            <span>
+                                <clr-icon shape="copy" size="24"
+                                [class.is-success]="isCopied('add')"
+                                [ngxClipboard]="addCMDInput"
+                                (cbOnSuccess)="onCopySuccess($event, 'add')"
+                                ></clr-icon>
+                            </span>
+                        </td>
                     </tr>
-                </tbody>
-            </table>
-        </div>
-        <div class="col-md-12 content-group">
-            <div>
-                <label>{{'HELM_CHART.INSTALL_CHART' | translate }}</label>
-            </div>
-            <table class="table">
-                <tbody>
                     <tr>
-                        <td class="left">{{installCMD}}</td>
+                        <td class="left cmd-title">{{'HELM_CHART.INSTALL_CHART' | translate }}</td>
+                        <td class="left">
+                            <input class="cmd-content" type="text"
+                            [(ngModel)]="installCMD" #installCMDInput readonly/>
+                        </td>
+                        <td class="left">
+                            <span>
+                                <clr-icon shape="copy" size="24"
+                                [class.is-success]="isCopied('install')"
+                                [ngxClipboard]="installCMDInput"
+                                (cbOnSuccess)="onCopySuccess($event, 'install')"
+                                ></clr-icon>
+                            </span>
+                        </td>
+                    </tr>
+                    <tr *ngIf="prov_ready">
+                        <td class="left cmd-title">{{'HELM_CHART.VERIFY_CHART' | translate }}</td>
+                        <td class="left">
+                            <input class="cmd-content" type="text"
+                            [(ngModel)]="verifyCMD" #verifyCMDInput readonly/>
+                        </td>
+                        <td class="left">
+                            <span>
+                                <clr-icon shape="copy" size="24"
+                                [class.is-success]="isCopied('verify')"
+                                [ngxClipboard]="verifyCMDInput"
+                                (cbOnSuccess)="onCopySuccess($event, 'verify')"
+                                ></clr-icon>
+                            </span>
+                        </td>
                     </tr>
                 </tbody>
             </table>
         </div>
+
         <div class="col-md-12 content-group">
             <div>
                 <label>{{'HELM_CHART.SECURITY' | translate }}</label>
@@ -77,19 +111,19 @@
             <table class="table">
                 <tbody>
                     <tr>
-                        <td class="left">{{'HELM_CHART.SIGNED' | translate }}</td>
+                        <td class="left">{{'HELM_CHART.PROV_FILE' | translate }}</td>
-                        <div *ngIf="security?.signature?.signed;then signed_content else unsignd_content"></div>
+                        <div *ngIf="prov_ready;then signedContent else unsignedContent"></div>
-                        <ng-template #signed_content>
+                        <ng-template #signedContent>
                             <td class="left">
                                 <span class="content-icon">
                                     <clr-icon shape="shield-check" class="is-success"></clr-icon>
-                                </span>&nbsp;{{'HELM_CHART.SIGNED' | translate }}</td>
+                                </span>&nbsp;<a (click)="downloadChart()">{{'HELM_CHART.READY' | translate }}</a></td>
                         </ng-template>
-                        <ng-template #unsignd_content>
+                        <ng-template #unsignedContent>
                             <td class="left">
                                 <span class="content-icon">
                                     <clr-icon shape="shield-x" class="is-error"></clr-icon>
-                                </span>&nbsp;{{'HELM_CHART.UNSIGNED' | translate }}</td>
+                                </span>&nbsp;{{'HELM_CHART.NOT_READY' | translate }}</td>
                         </ng-template>
                     </tr>
                 </tbody>

src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.scss

@@ -25,4 +25,13 @@
             word-break: break-all;
         }
     }
+
+    .cmd-title {
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+
+    .cmd-content {
+        width: 100%;
+    }
 }

src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.ts

@@ -6,6 +6,9 @@ import {
 } from "@angular/core";
 
 import { HelmChartMetaData, HelmChartSecurity } from "./../../service/interface";
+import { downloadFile } from './../../utils';
+import { HelmChartService } from "../../service/index";
+import { ErrorHandler } from "./../../error-handler/error-handler";
 
 @Component({
   selector: "hbr-chart-detail-summary",
@@ -22,17 +25,47 @@ export class ChartDetailSummaryComponent implements OnInit {
   @Input() chartVersion: string;
   @Input() readme: string;
 
-  constructor() {}
+  copiedCMD = '';
+  addCMD = `helm repo add --ca-file <ca file> --cert-file <cert file> --key-file <key file> --username <username> --password <password> <repo name> ${this.repoURL}/chartrepo/${this.projectName}`;
+  installCMD = `helm install --ca-file <ca file> --cert-file <cert file> --key-file <key file> --username=<username> --password=<password> --version ${this.chartVersion} <repo name>/${this.chartName}`;
+  verifyCMD = `helm verify --keyring <key path> ${this.chartName}-${this.chartVersion}.tgz`;
+
+  constructor(
+    private errorHandler: ErrorHandler,
+    private helmChartService: HelmChartService
+  ) {}
 
   ngOnInit(): void {
   }
 
-  public get addCMD() {
+  isCopied(cmd: string) {
-    return `helm repo add REPO_NAME ${this.repoURL}/chartrepo/${this.projectName}`;
+    return this.copiedCMD === cmd;
   }
 
-  public get installCMD() {
+  onCopySuccess(e: Event, cmd: string) {
-      return `helm install --version ${this.chartVersion} REPO_NAME/${this.chartName}`;
+    this.copiedCMD = cmd;
+  }
+
+  public get prov_ready() {
+    return this.security && this.security.signature && this.security.signature.signed;
+  }
+
+  downloadChart() {
+    if (!this.summary ||
+      !this.summary.urls ||
+      this.summary.urls.length < 1) {
+      return;
+    }
+    let filename = `${this.summary.urls[0]}.prov`;
+
+    this.helmChartService.downloadChart(this.projectName, filename).subscribe(
+      res => {
+        downloadFile(res);
+      },
+      error => {
+        this.errorHandler.error(error);
+      },
+    );
   }
 
 }

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

@@ -75,7 +75,6 @@ export class HelmChartComponent implements OnInit {
       .catch(error => this.errorHandler.error(error));
     this.lastFilteredChartName = "";
     this.refresh();
-
   }
 
   updateFilterValue(value: string) {

src/ui_ng/src/app/project/member/add-group/add-group.component.html

@@ -76,7 +76,7 @@
 
                         <clr-dg-footer>
                             <clr-dg-pagination #pagination [clrDgPageSize]="5">
-                                {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'USER.OF' | translate }} {{pagination.totalItems}} {{'MEMBER.GROUPS' | translate}}
+                                {{pagination.totalItems}} {{'MEMBER.ITEMS' | translate}}
                             </clr-dg-pagination>
                         </clr-dg-footer>
                     </clr-datagrid>

src/ui_ng/src/i18n/lang/en-us-lang.json

@@ -516,7 +516,12 @@
         "NO_README": "No readme file provided by this chart.",
         "SECURITY": "Security",
         "ACTIVE": "Active",
-        "DEPRECATED": "Deprecated"
+        "DEPRECATED": "Deprecated",
+        "VERIFY_CHART": "Verify Chart",
+        "COMMAND": "Commands",
+        "PROV_FILE": "Prov File",
+        "READY": "Ready",
+        "NOT_READY": "Not Ready"
     },
     "ALERT": {
         "FORM_CHANGE_CONFIRMATION": "Some changes are not saved yet. Do you want to cancel?"

src/ui_ng/src/i18n/lang/es-es-lang.json

@@ -515,7 +515,12 @@
         "NO_README": "No readme file provided by this chart.",
         "SECURITY": "Security",
         "ACTIVE": "Active",
-        "DEPRECATED": "Deprecated"
+        "DEPRECATED": "Deprecated",
+        "VERIFY_CHART": "Verify Chart",
+        "COMMAND": "Commands",
+        "PROV_FILE": "Prov File",
+        "READY": "Ready",
+        "NOT_READY": "Not Ready"
     },
     "ALERT": {
         "FORM_CHANGE_CONFIRMATION": "Algunos cambios no se han guardado aún. ¿Quiere cancelar?"

src/ui_ng/src/i18n/lang/fr-fr-lang.json

@@ -490,7 +490,12 @@
         "ITEMS": "items",
         "SECURITY": "Security",
         "ACTIVE": "Active",
-        "DEPRECATED": "Deprecated"
+        "DEPRECATED": "Deprecated",
+        "VERIFY_CHART": "Verify Chart",
+        "COMMAND": "Commands",
+        "PROV_FILE": "Prov File",
+        "READY": "Ready",
+        "NOT_READY": "Not Ready"
     },
     "ALERT": {
         "FORM_CHANGE_CONFIRMATION": "Certaines modifications ne sont pas encore enregistrées. Voulez-vous annuler ?"

src/ui_ng/src/i18n/lang/zh-cn-lang.json

@@ -515,7 +515,12 @@
         "NO_README": "此Chart未提供README文件",
         "SECURITY": "安全",
         "ACTIVE": "正常",
-        "DEPRECATED": "废弃"
+        "DEPRECATED": "废弃",
+        "VERIFY_CHART": "验证Chart",
+        "COMMAND": "命令",
+        "PROV_FILE": "Prov 文件",
+        "READY": "就绪",
+        "NOT_READY": "未就绪"
     },
     "ALERT": {
         "FORM_CHANGE_CONFIRMATION": "表单内容改变，确认是否取消?"