Merge pull request #5549 from ninjadq/fix_chart_ui_related_issue

Fix chart ui related issue
2024-09-20 17:15:30 +00:00 · 2018-08-08 00:34:46 -04:00 · 2018-08-08 00:34:46 -04:00 · 74f1b0b166
commit 74f1b0b166
parent 872b19f370 cff8fc52ba
9 changed files with 125 additions and 30 deletions
--- a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html
+++ b/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>
-                        <div *ngIf="security?.signature?.signed;then signed_content else unsignd_content"></div>
-                        <ng-template #signed_content>
+                        <td class="left">{{'HELM_CHART.PROV_FILE' | translate }}</td>
+                        <div *ngIf="prov_ready;then signedContent else unsignedContent"></div>
+                        <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>
--- a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.scss
+++ b/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%;
+    }
 }
--- a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.ts
+++ b/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() {
-    return `helm repo add REPO_NAME ${this.repoURL}/chartrepo/${this.projectName}`;
+  isCopied(cmd: string) {
+    return this.copiedCMD === cmd;
  }

-  public get installCMD() {
-      return `helm install --version ${this.chartVersion} REPO_NAME/${this.chartName}`;
+  onCopySuccess(e: Event, cmd: string) {
+    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);
+      },
+    );
  }

 }
--- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
+++ b/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) {
--- a/src/ui_ng/src/app/project/member/add-group/add-group.component.html
+++ b/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>
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/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?"
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/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?"
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/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 ?"
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/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": "表单内容改变，确认是否取消?"