@harbor/ui
Version:
Harbor shared UI components based on Clarity and Angular6
122 lines (121 loc) • 18.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, ChangeDetectionStrategy, Input } from "@angular/core";
import { downloadFile } from './../../utils';
import { HelmChartService } from "../../service/index";
import { ErrorHandler } from "./../../error-handler/error-handler";
export class ChartDetailSummaryComponent {
/**
* @param {?} errorHandler
* @param {?} helmChartService
*/
constructor(errorHandler, helmChartService) {
this.errorHandler = errorHandler;
this.helmChartService = helmChartService;
this.copiedCMD = '';
}
/**
* @return {?}
*/
ngOnInit() {
this.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}`;
this.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}`;
this.verifyCMD = `helm verify --keyring <key path> ${this.chartName}-${this.chartVersion}.tgz`;
}
/**
* @param {?} cmd
* @return {?}
*/
isCopied(cmd) {
return this.copiedCMD === cmd;
}
/**
* @param {?} e
* @param {?} cmd
* @return {?}
*/
onCopySuccess(e, cmd) {
this.copiedCMD = cmd;
}
/**
* @return {?}
*/
get prov_ready() {
return this.security && this.security.signature && this.security.signature.signed;
}
/**
* @return {?}
*/
downloadChart() {
if (!this.summary ||
!this.summary.urls ||
this.summary.urls.length < 1) {
return;
}
/** @type {?} */
let filename = `${this.summary.urls[0]}.prov`;
this.helmChartService.downloadChart(this.projectName, filename).subscribe(res => {
downloadFile(res);
}, error => {
this.errorHandler.error(error);
});
}
}
ChartDetailSummaryComponent.decorators = [
{ type: Component, args: [{
selector: "hbr-chart-detail-summary",
template: "<div class=\"row\">\n <div class=\"col-md-12\">\n <p>{{summary.description}}</p>\n </div>\n</div>\n<div class=\"row content-wrapper\">\n <div class=\"col-md-8 md-container\">\n <div *ngIf=\"readme\" class=\"md-div\" [innerHTML]=\"readme | markdown\"></div>\n <div *ngIf=\"!readme\">{{'HELM_CHART.NO_README' | translate}}</div>\n </div>\n <div class=\"col-md-4 summary-container\">\n <div class=\"col-md-12 content-group\">\n <div>\n <label>{{'HELM_CHART.OVERVIEW' | translate }}</label>\n </div>\n <table class=\"table\">\n <tbody>\n <tr>\n <td class=\"left\">{{'HELM_CHART.HOME' | translate }}</td>\n <td class=\"left text-wrapper\">\n <a href=\"{{summary.home}}\">{{summary.home}}</a>\n </td>\n </tr>\n <tr *ngFor=\"let src of summary.sources; let i = index\">\n <td class=\"left\" *ngIf=\"i === 0\">{{'HELM_CHART.SRC_REPO' | translate }}</td>\n <td class=\"left\" *ngIf=\"i !== 0\"></td>\n <td class=\"left text-wrapper\">\n <a href=\"{{src}}\">{{src}}</a>\n </td>\n </tr>\n <tr>\n <td class=\"left\">{{'HELM_CHART.CREATED' | translate }}</td>\n <td class=\"left\">{{summary.created | date}}</td>\n </tr>\n <tr *ngFor=\"let maintainer of summary.maintainers; let i = index\">\n <td class=\"left\" *ngIf=\"i === 0\">{{'HELM_CHART.MAINTAINERS' | translate }}</td>\n <td class=\"left\" *ngIf=\"i !== 0\"></td>\n <td class=\"left\">\n <a href=\"mailto:{{maintainer.email}}\">{{maintainer.name}}</a>\n </td>\n </tr>\n <tr>\n <td class=\"left\">{{'HELM_CHART.APP_VERSION' | translate }}</td>\n <td class=\"left\">{{ summary.appVersion }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n <div class=\"col-md-12 content-group\">\n <div>\n <label>{{'HELM_CHART.COMMAND' | translate }}</label>\n </div>\n <table class=\"table\">\n <tbody>\n <tr>\n <td class=\"left cmd-title\">{{'HELM_CHART.ADD_REPO' | translate }}</td>\n <td class=\"left cmd-content\">\n <input class=\"cmd-content\" type=\"text\"\n [(ngModel)]=\"addCMD\" #addCMDInput readonly/>\n </td>\n <td class=\"left\">\n <span>\n <clr-icon shape=\"copy\" size=\"24\"\n [class.is-success]=\"isCopied('add')\"\n [ngxClipboard]=\"addCMDInput\"\n (cbOnSuccess)=\"onCopySuccess($event, 'add')\"\n ></clr-icon>\n </span>\n </td>\n </tr>\n <tr>\n <td class=\"left cmd-title\">{{'HELM_CHART.INSTALL_CHART' | translate }}</td>\n <td class=\"left\">\n <input class=\"cmd-content\" type=\"text\"\n [(ngModel)]=\"installCMD\" #installCMDInput readonly/>\n </td>\n <td class=\"left\">\n <span>\n <clr-icon shape=\"copy\" size=\"24\"\n [class.is-success]=\"isCopied('install')\"\n [ngxClipboard]=\"installCMDInput\"\n (cbOnSuccess)=\"onCopySuccess($event, 'install')\"\n ></clr-icon>\n </span>\n </td>\n </tr>\n <tr *ngIf=\"prov_ready\">\n <td class=\"left cmd-title\">{{'HELM_CHART.VERIFY_CHART' | translate }}</td>\n <td class=\"left\">\n <input class=\"cmd-content\" type=\"text\"\n [(ngModel)]=\"verifyCMD\" #verifyCMDInput readonly/>\n </td>\n <td class=\"left\">\n <span>\n <clr-icon shape=\"copy\" size=\"24\"\n [class.is-success]=\"isCopied('verify')\"\n [ngxClipboard]=\"verifyCMDInput\"\n (cbOnSuccess)=\"onCopySuccess($event, 'verify')\"\n ></clr-icon>\n </span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"col-md-12 content-group\">\n <div>\n <label>{{'HELM_CHART.SECURITY' | translate }}</label>\n </div>\n <table class=\"table\">\n <tbody>\n <tr>\n <td class=\"left\">{{'HELM_CHART.PROV_FILE' | translate }}</td>\n <div *ngIf=\"prov_ready;then signedContent else unsignedContent\"></div>\n <ng-template #signedContent>\n <td class=\"left\">\n <span class=\"content-icon\">\n <clr-icon shape=\"shield-check\" class=\"is-success\"></clr-icon>\n </span> <a href=\"javascript:void(0)\" (click)=\"downloadChart()\">{{'HELM_CHART.READY' | translate }}</a>\n </td>\n </ng-template>\n <ng-template #unsignedContent>\n <td class=\"left\">\n <span class=\"content-icon\">\n <clr-icon shape=\"shield-x\" class=\"is-error\"></clr-icon>\n </span> {{'HELM_CHART.NOT_READY' | translate }}</td>\n </ng-template>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"col-md-12 content-group\">\n <div>\n <label>{{'HELM_CHART.LABELS' | translate }}</label>\n </div>\n <table class=\"table\">\n <tbody>\n <tr>\n <td class=\"left\">{{'HELM_CHART.LABELS' | translate }}</td>\n <td class=\"left\">{{labels?.length}}</td>\n </tr>\n <tr *ngIf=\"labels?.length > 0\">\n <td></td>\n <td class=\"left\">\n <hbr-label-piece *ngFor=\"let label of labels\" [label]=\"label\" [labelWidth]=\"90\"> </hbr-label-piece>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n</div>",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".content-wrapper{margin-top:20px;padding:0 0 0 15px}.content-wrapper .md-container{border:1px solid #ddd}.content-wrapper .summary-container{padding:0}.content-wrapper .summary-container table{background-color:#f2f2f2;margin-top:.5rem}.content-wrapper .summary-container .content-group{margin-bottom:30px}.content-wrapper .summary-container .content-icon{margin-right:6px}.content-wrapper .summary-container .text-wrapper{word-break:break-all}.content-wrapper .cmd-title{white-space:nowrap;vertical-align:middle}.content-wrapper .cmd-content{width:100%}.md-div ::ng-deep code:not([class*=language-]),.md-div ::ng-deep pre:not([class*=language-]) code:not([class*=language-]){background:#ddd;border-radius:2px;padding:2px 4px}.md-div ::ng-deep code:not([class*=language-]){color:#657b83}.md-div ::ng-deep pre:not([class*=language-]){background:#fdf6e3}.md-div ::ng-deep pre:not([class*=language-]) code:not([class*=language-]){background:0 0}.md-div ::ng-deep table{display:block;width:100%;overflow:auto;padding:0;border-spacing:0;border-collapse:collapse;margin-bottom:16px}.md-div ::ng-deep table td,.md-div ::ng-deep table th{padding:6px 13px;border:1px solid #ddd}.md-div ::ng-deep table td[align=\"$var\"],.md-div ::ng-deep table th[align=\"$var\"]{text-align:center}.md-div ::ng-deep table tr:nth-child(2n){background-color:#f2f2f2}"]
}] }
];
/** @nocollapse */
ChartDetailSummaryComponent.ctorParameters = () => [
{ type: ErrorHandler },
{ type: HelmChartService }
];
ChartDetailSummaryComponent.propDecorators = {
summary: [{ type: Input }],
security: [{ type: Input }],
repoURL: [{ type: Input }],
projectName: [{ type: Input }],
chartName: [{ type: Input }],
chartVersion: [{ type: Input }],
readme: [{ type: Input }],
labels: [{ type: Input }]
};
if (false) {
/** @type {?} */
ChartDetailSummaryComponent.prototype.summary;
/** @type {?} */
ChartDetailSummaryComponent.prototype.security;
/** @type {?} */
ChartDetailSummaryComponent.prototype.repoURL;
/** @type {?} */
ChartDetailSummaryComponent.prototype.projectName;
/** @type {?} */
ChartDetailSummaryComponent.prototype.chartName;
/** @type {?} */
ChartDetailSummaryComponent.prototype.chartVersion;
/** @type {?} */
ChartDetailSummaryComponent.prototype.readme;
/** @type {?} */
ChartDetailSummaryComponent.prototype.labels;
/** @type {?} */
ChartDetailSummaryComponent.prototype.copiedCMD;
/** @type {?} */
ChartDetailSummaryComponent.prototype.addCMD;
/** @type {?} */
ChartDetailSummaryComponent.prototype.installCMD;
/** @type {?} */
ChartDetailSummaryComponent.prototype.verifyCMD;
/** @type {?} */
ChartDetailSummaryComponent.prototype.errorHandler;
/** @type {?} */
ChartDetailSummaryComponent.prototype.helmChartService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtZGV0YWlsLXN1bW1hcnkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGhhcmJvci91aS8iLCJzb3VyY2VzIjpbInNyYy9oZWxtLWNoYXJ0L2NoYXJ0LWRldGFpbC9jaGFydC1kZXRhaWwtc3VtbWFyeS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsdUJBQXVCLEVBQ3ZCLEtBQUssRUFDTixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQVFuRSxNQUFNOzs7OztJQWVKLFlBQ1UsY0FDQTtRQURBLGlCQUFZLEdBQVosWUFBWTtRQUNaLHFCQUFnQixHQUFoQixnQkFBZ0I7eUJBUGQsRUFBRTtLQVFWOzs7O0lBRUosUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLEdBQUc7OERBQzRDLElBQUksQ0FBQyxPQUFPLGNBQWMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3ZHLElBQUksQ0FBQyxVQUFVLEdBQUc7NERBQ3NDLElBQUksQ0FBQyxZQUFZLGdCQUFnQixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDMUcsSUFBSSxDQUFDLFNBQVMsR0FBRyxvQ0FBb0MsSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsWUFBWSxNQUFNLENBQUM7S0FDaEc7Ozs7O0lBRUQsUUFBUSxDQUFDLEdBQVc7UUFDbEIsT0FBTyxJQUFJLENBQUMsU0FBUyxLQUFLLEdBQUcsQ0FBQztLQUMvQjs7Ozs7O0lBRUQsYUFBYSxDQUFDLENBQVEsRUFBRSxHQUFXO1FBQ2pDLElBQUksQ0FBQyxTQUFTLEdBQUcsR0FBRyxDQUFDO0tBQ3RCOzs7O1FBRVUsVUFBVTtRQUNuQixPQUFPLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDOzs7OztJQUdwRixhQUFhO1FBQ1gsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPO1lBQ2YsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUk7WUFDbEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUM5QixPQUFPO1NBQ1I7O1FBQ0QsSUFBSSxRQUFRLEdBQUcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDO1FBRTlDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxRQUFRLENBQUMsQ0FBQyxTQUFTLENBQ3ZFLEdBQUcsQ0FBQyxFQUFFO1lBQ0osWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQ25CLEVBQ0QsS0FBSyxDQUFDLEVBQUU7WUFDTixJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNoQyxDQUNGLENBQUM7S0FDSDs7O1lBOURGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsMEJBQTBCO2dCQUNwQyx5Mk9BQW9EO2dCQUVwRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDaEQ7Ozs7WUFQUSxZQUFZO1lBRFosZ0JBQWdCOzs7c0JBVXRCLEtBQUs7dUJBQ0wsS0FBSztzQkFDTCxLQUFLOzBCQUNMLEtBQUs7d0JBQ0wsS0FBSzsyQkFDTCxLQUFLO3FCQUNMLEtBQUs7cUJBQ0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgT25Jbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgSW5wdXRcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgSGVsbUNoYXJ0TWV0YURhdGEsIEhlbG1DaGFydFNlY3VyaXR5LCBMYWJlbCB9IGZyb20gXCIuLy4uLy4uL3NlcnZpY2UvaW50ZXJmYWNlXCI7XG5pbXBvcnQgeyBkb3dubG9hZEZpbGUgfSBmcm9tICcuLy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IEhlbG1DaGFydFNlcnZpY2UgfSBmcm9tIFwiLi4vLi4vc2VydmljZS9pbmRleFwiO1xuaW1wb3J0IHsgRXJyb3JIYW5kbGVyIH0gZnJvbSBcIi4vLi4vLi4vZXJyb3ItaGFuZGxlci9lcnJvci1oYW5kbGVyXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJoYnItY2hhcnQtZGV0YWlsLXN1bW1hcnlcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jaGFydC1kZXRhaWwtc3VtbWFyeS5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vY2hhcnQtZGV0YWlsLXN1bW1hcnkuY29tcG9uZW50LnNjc3NcIl0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIENoYXJ0RGV0YWlsU3VtbWFyeUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHN1bW1hcnk6IEhlbG1DaGFydE1ldGFEYXRhO1xuICBASW5wdXQoKSBzZWN1cml0eTogSGVsbUNoYXJ0U2VjdXJpdHk7XG4gIEBJbnB1dCgpIHJlcG9VUkw6IHN0cmluZztcbiAgQElucHV0KCkgcHJvamVjdE5hbWU6IHN0cmluZztcbiAgQElucHV0KCkgY2hhcnROYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNoYXJ0VmVyc2lvbjogc3RyaW5nO1xuICBASW5wdXQoKSByZWFkbWU6IHN0cmluZztcbiAgQElucHV0KCkgbGFiZWxzOiBMYWJlbFtdO1xuXG4gIGNvcGllZENNRCA9ICcnO1xuICBhZGRDTUQ6IHN0cmluZztcbiAgaW5zdGFsbENNRDogc3RyaW5nO1xuICB2ZXJpZnlDTUQ6IHN0cmluZztcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGVycm9ySGFuZGxlcjogRXJyb3JIYW5kbGVyLFxuICAgIHByaXZhdGUgaGVsbUNoYXJ0U2VydmljZTogSGVsbUNoYXJ0U2VydmljZVxuICApIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5hZGRDTUQgPSBgaGVsbSByZXBvIGFkZCAtLWNhLWZpbGUgPGNhIGZpbGU+IC0tY2VydC1maWxlIDxjZXJ0IGZpbGU+IC0ta2V5LWZpbGUgPGtleSBmaWxlPiBcXFxuICAgIC0tdXNlcm5hbWUgPHVzZXJuYW1lPiAtLXBhc3N3b3JkIDxwYXNzd29yZD4gPHJlcG8gbmFtZT4gJHt0aGlzLnJlcG9VUkx9L2NoYXJ0cmVwby8ke3RoaXMucHJvamVjdE5hbWV9YDtcbiAgICB0aGlzLmluc3RhbGxDTUQgPSBgaGVsbSBpbnN0YWxsIC0tY2EtZmlsZSA8Y2EgZmlsZT4gLS1jZXJ0LWZpbGUgPGNlcnQgZmlsZT4gLS1rZXktZmlsZSA8a2V5IGZpbGU+IFxcXG4gICAgLS11c2VybmFtZT08dXNlcm5hbWU+IC0tcGFzc3dvcmQ9PHBhc3N3b3JkPiAtLXZlcnNpb24gJHt0aGlzLmNoYXJ0VmVyc2lvbn0gPHJlcG8gbmFtZT4vJHt0aGlzLmNoYXJ0TmFtZX1gO1xuICAgIHRoaXMudmVyaWZ5Q01EID0gYGhlbG0gdmVyaWZ5IC0ta2V5cmluZyA8a2V5IHBhdGg+ICR7dGhpcy5jaGFydE5hbWV9LSR7dGhpcy5jaGFydFZlcnNpb259LnRnemA7XG4gIH1cblxuICBpc0NvcGllZChjbWQ6IHN0cmluZykge1xuICAgIHJldHVybiB0aGlzLmNvcGllZENNRCA9PT0gY21kO1xuICB9XG5cbiAgb25Db3B5U3VjY2VzcyhlOiBFdmVudCwgY21kOiBzdHJpbmcpIHtcbiAgICB0aGlzLmNvcGllZENNRCA9IGNtZDtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgcHJvdl9yZWFkeSgpIHtcbiAgICByZXR1cm4gdGhpcy5zZWN1cml0eSAmJiB0aGlzLnNlY3VyaXR5LnNpZ25hdHVyZSAmJiB0aGlzLnNlY3VyaXR5LnNpZ25hdHVyZS5zaWduZWQ7XG4gIH1cblxuICBkb3dubG9hZENoYXJ0KCkge1xuICAgIGlmICghdGhpcy5zdW1tYXJ5IHx8XG4gICAgICAhdGhpcy5zdW1tYXJ5LnVybHMgfHxcbiAgICAgIHRoaXMuc3VtbWFyeS51cmxzLmxlbmd0aCA8IDEpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgbGV0IGZpbGVuYW1lID0gYCR7dGhpcy5zdW1tYXJ5LnVybHNbMF19LnByb3ZgO1xuXG4gICAgdGhpcy5oZWxtQ2hhcnRTZXJ2aWNlLmRvd25sb2FkQ2hhcnQodGhpcy5wcm9qZWN0TmFtZSwgZmlsZW5hbWUpLnN1YnNjcmliZShcbiAgICAgIHJlcyA9PiB7XG4gICAgICAgIGRvd25sb2FkRmlsZShyZXMpO1xuICAgICAgfSxcbiAgICAgIGVycm9yID0+IHtcbiAgICAgICAgdGhpcy5lcnJvckhhbmRsZXIuZXJyb3IoZXJyb3IpO1xuICAgICAgfSxcbiAgICApO1xuICB9XG5cbn1cbiJdfQ==