@harbor/ui
Version:
Harbor shared UI components based on Clarity and Angular6
153 lines (152 loc) • 15.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Project } from "./../../project-policy-config/project";
import { Component, ChangeDetectionStrategy, Input, ChangeDetectorRef } from "@angular/core";
import { downloadFile, toPromise } from "../../utils";
import { SystemInfoService, HelmChartService } from "../../service/index";
import { ErrorHandler } from "./../../error-handler/error-handler";
import { finalize } from "rxjs/operators";
export class ChartDetailComponent {
/**
* @param {?} errorHandler
* @param {?} systemInfoService
* @param {?} helmChartService
* @param {?} cdr
*/
constructor(errorHandler, systemInfoService, helmChartService, cdr) {
this.errorHandler = errorHandler;
this.systemInfoService = systemInfoService;
this.helmChartService = helmChartService;
this.cdr = cdr;
this.loading = true;
this.isMember = false;
this.repoURL = "";
}
/**
* @return {?}
*/
ngOnInit() {
toPromise(this.systemInfoService.getSystemInfo())
.then(systemInfo => {
/** @type {?} */
let scheme = 'http://';
this.systemInfo = systemInfo;
if (this.systemInfo.has_ca_root) {
scheme = 'https://';
}
this.repoURL = `${scheme}${this.systemInfo.registry_url}`;
})
.catch(error => this.errorHandler.error(error));
this.refresh();
}
/**
* @return {?}
*/
get chartNameWithVersion() {
return `${this.chartName}:${this.chartVersion}`;
}
/**
* @return {?}
*/
get isChartExist() {
return this.chartDetail ? true : false;
}
/**
* @return {?}
*/
refresh() {
this.loading = true;
this.helmChartService
.getChartDetail(this.project.name, this.chartName, this.chartVersion)
.pipe(finalize(() => {
this.loading = false;
/** @type {?} */
let hnd = setInterval(() => this.cdr.markForCheck(), 100);
setTimeout(() => clearInterval(hnd), 2000);
}))
.subscribe(chartDetail => {
this.chartDetail = chartDetail;
}, err => {
this.errorHandler.error(err);
});
}
/**
* @return {?}
*/
downloadChart() {
if (!this.chartDetail ||
!this.chartDetail.metadata ||
!this.chartDetail.metadata.urls ||
this.chartDetail.metadata.urls.length < 1) {
return;
}
/** @type {?} */
let filename = this.chartDetail.metadata.urls[0];
this.helmChartService.downloadChart(this.project.name, filename).subscribe(res => {
downloadFile(res);
}, error => {
this.errorHandler.error(error);
});
}
}
ChartDetailComponent.decorators = [
{ type: Component, args: [{
selector: "hbr-chart-detail",
template: "<div>\n <div class=\"flex-container\">\n <div class=\"title-container\">\n <div class=\"chart-name\">\n {{chartNameWithVersion | translate}}\n </div>\n <div>\n {{roleName | translate}}\n </div>\n </div>\n <div>\n <button class=\"btn btn-sm btn-secondary\"\n (click)=\"downloadChart()\">{{'HELM_CHART.DOWNLOAD' | translate}}</button>\n </div>\n </div>\n <span *ngIf=\"loading\" class=\"spinner spinner-lg detail-loading\">\n Loading...\n </span>\n <div *ngIf=\"!loading && isChartExist\">\n <clr-tabs>\n <clr-tab>\n <button clrTabLink id=\"summary-link\">{{'HELM_CHART.SUMMARY' | translate}}</button>\n <clr-tab-content id=\"summary-content\" *clrIfActive>\n <hbr-chart-detail-summary\n [summary]=\"chartDetail.metadata\"\n [chartName]=\"chartName\"\n [repoURL]=\"repoURL\"\n [projectName]=\"project.name\"\n [chartVersion]=\"chartVersion\"\n [security]=\"chartDetail.security\"\n [readme]=\"chartDetail.files['README.md']\"\n [labels]=\"chartDetail.labels\"></hbr-chart-detail-summary>\n </clr-tab-content>\n </clr-tab>\n <clr-tab>\n <button clrTabLink id=\"depend-link\">{{'HELM_CHART.DEPENDENCIES' | translate}}</button>\n <clr-tab-content id=\"depend-content\">\n <hbr-chart-detail-dependency [dependencies]='chartDetail.dependencies'></hbr-chart-detail-dependency>\n </clr-tab-content>\n </clr-tab>\n <clr-tab>\n <button clrTabLink id=\"value-link\">{{'HELM_CHART.VALUES' | translate}}</button>\n <clr-tab-content id=\"value-content\">\n <hbr-chart-detail-value\n [values]=\"chartDetail.values\"\n [yaml]=\"chartDetail.files['values.yaml']\"></hbr-chart-detail-value>\n </clr-tab-content>\n </clr-tab>\n </clr-tabs>\n </div>\n <div *ngIf=\"!loading && !isChartExist\">\n <h6>{{'HELM_CHART.NO_DETAIL' | translate }}</h6>\n </div>\n\n</div>",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".title-container{display:flex}.title-container .chart-name{border-right:1px solid gray;font-size:27px;font-weight:400;padding-right:9px;margin-right:9px}.detail-loading{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:108px!important;height:108px!important}.flex-container{display:flex;-webkit-display:flex;justify-content:space-between}.flex-container .title-container{display:flex;align-items:center}"]
}] }
];
/** @nocollapse */
ChartDetailComponent.ctorParameters = () => [
{ type: ErrorHandler },
{ type: SystemInfoService },
{ type: HelmChartService },
{ type: ChangeDetectorRef }
];
ChartDetailComponent.propDecorators = {
projectId: [{ type: Input }],
project: [{ type: Input }],
chartName: [{ type: Input }],
chartVersion: [{ type: Input }],
roleName: [{ type: Input }],
hasSignedIn: [{ type: Input }],
hasProjectAdminRole: [{ type: Input }]
};
if (false) {
/** @type {?} */
ChartDetailComponent.prototype.projectId;
/** @type {?} */
ChartDetailComponent.prototype.project;
/** @type {?} */
ChartDetailComponent.prototype.chartName;
/** @type {?} */
ChartDetailComponent.prototype.chartVersion;
/** @type {?} */
ChartDetailComponent.prototype.roleName;
/** @type {?} */
ChartDetailComponent.prototype.hasSignedIn;
/** @type {?} */
ChartDetailComponent.prototype.hasProjectAdminRole;
/** @type {?} */
ChartDetailComponent.prototype.loading;
/** @type {?} */
ChartDetailComponent.prototype.isMember;
/** @type {?} */
ChartDetailComponent.prototype.chartDetail;
/** @type {?} */
ChartDetailComponent.prototype.systemInfo;
/** @type {?} */
ChartDetailComponent.prototype.repoURL;
/** @type {?} */
ChartDetailComponent.prototype.errorHandler;
/** @type {?} */
ChartDetailComponent.prototype.systemInfoService;
/** @type {?} */
ChartDetailComponent.prototype.helmChartService;
/** @type {?} */
ChartDetailComponent.prototype.cdr;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtZGV0YWlsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BoYXJib3IvdWkvIiwic291cmNlcyI6WyJzcmMvaGVsbS1jaGFydC9jaGFydC1kZXRhaWwvY2hhcnQtZGV0YWlsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ2hFLE9BQU8sRUFDTCxTQUFTLEVBRVQsdUJBQXVCLEVBQ3ZCLEtBQUssRUFDTCxpQkFBaUIsRUFDbEIsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGdCQUFnQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFMUUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ25FLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQVExQyxNQUFNOzs7Ozs7O0lBZ0JKLFlBQ1UsY0FDQSxtQkFDQSxrQkFDQTtRQUhBLGlCQUFZLEdBQVosWUFBWTtRQUNaLHNCQUFpQixHQUFqQixpQkFBaUI7UUFDakIscUJBQWdCLEdBQWhCLGdCQUFnQjtRQUNoQixRQUFHLEdBQUgsR0FBRzt1QkFYSCxJQUFJO3dCQUNILEtBQUs7dUJBSU4sRUFBRTtLQU9SOzs7O0lBRUosUUFBUTtRQUNOLFNBQVMsQ0FBYSxJQUFJLENBQUMsaUJBQWlCLENBQUMsYUFBYSxFQUFFLENBQUM7YUFDMUQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFFOztZQUNqQixJQUFJLE1BQU0sR0FBRyxTQUFTLENBQUM7WUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxVQUFVLENBQUM7WUFDN0IsSUFBSSxJQUFJLENBQUMsVUFBVSxDQUFDLFdBQVcsRUFBRTtnQkFDL0IsTUFBTSxHQUFHLFVBQVUsQ0FBQzthQUNyQjtZQUNELElBQUksQ0FBQyxPQUFPLEdBQUcsR0FBRyxNQUFNLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxZQUFZLEVBQUUsQ0FBQztTQUMzRCxDQUFDO2FBQ0QsS0FBSyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUNsRCxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7S0FDaEI7Ozs7UUFDVSxvQkFBb0I7UUFDN0IsT0FBTyxHQUFHLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDOzs7OztRQUd2QyxZQUFZO1FBQ3JCLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7Ozs7O0lBR3pDLE9BQU87UUFDTCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsZ0JBQWdCO2FBQ2xCLGNBQWMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxZQUFZLENBQUM7YUFDcEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDbEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7O1lBQ3JCLElBQUksR0FBRyxHQUFHLFdBQVcsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQzFELFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7U0FDNUMsQ0FBQyxDQUFDO2FBQ0YsU0FBUyxDQUNSLFdBQVcsQ0FBQyxFQUFFO1lBQ1osSUFBSSxDQUFDLFdBQVcsR0FBRyxXQUFXLENBQUM7U0FDaEMsRUFDRCxHQUFHLENBQUMsRUFBRTtZQUNKLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQzlCLENBQ0YsQ0FBQztLQUNMOzs7O0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVztZQUNuQixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUTtZQUMxQixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUk7WUFDL0IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDM0MsT0FBTztTQUNSOztRQUNELElBQUksUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUVqRCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDLFNBQVMsQ0FDeEUsR0FBRyxDQUFDLEVBQUU7WUFDSixZQUFZLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDbkIsRUFDRCxLQUFLLENBQUMsRUFBRTtZQUNOLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ2hDLENBQ0YsQ0FBQztLQUNIOzs7WUF0RkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxrQkFBa0I7Z0JBQzVCLDAwRUFBNEM7Z0JBRTVDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNOzthQUNoRDs7OztZQVJRLFlBQVk7WUFGWixpQkFBaUI7WUFBRSxnQkFBZ0I7WUFKMUMsaUJBQWlCOzs7d0JBZ0JoQixLQUFLO3NCQUNMLEtBQUs7d0JBQ0wsS0FBSzsyQkFDTCxLQUFLO3VCQUNMLEtBQUs7MEJBQ0wsS0FBSztrQ0FDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUHJvamVjdCB9IGZyb20gXCIuLy4uLy4uL3Byb2plY3QtcG9saWN5LWNvbmZpZy9wcm9qZWN0XCI7XG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIE9uSW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIElucHV0LFxuICBDaGFuZ2VEZXRlY3RvclJlZlxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBkb3dubG9hZEZpbGUsIHRvUHJvbWlzZSB9IGZyb20gXCIuLi8uLi91dGlsc1wiO1xuaW1wb3J0IHsgU3lzdGVtSW5mb1NlcnZpY2UsIEhlbG1DaGFydFNlcnZpY2UgfSBmcm9tIFwiLi4vLi4vc2VydmljZS9pbmRleFwiO1xuaW1wb3J0IHsgSGVsbUNoYXJ0RGV0YWlsLCBTeXN0ZW1JbmZvIH0gZnJvbSBcIi4vLi4vLi4vc2VydmljZS9pbnRlcmZhY2VcIjtcbmltcG9ydCB7IEVycm9ySGFuZGxlciB9IGZyb20gXCIuLy4uLy4uL2Vycm9yLWhhbmRsZXIvZXJyb3ItaGFuZGxlclwiO1xuaW1wb3J0IHsgZmluYWxpemUgfSBmcm9tIFwicnhqcy9vcGVyYXRvcnNcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImhici1jaGFydC1kZXRhaWxcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jaGFydC1kZXRhaWwuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2NoYXJ0LWRldGFpbC5jb21wb25lbnQuc2Nzc1wiXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgQ2hhcnREZXRhaWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBwcm9qZWN0SWQ6IG51bWJlcjtcbiAgQElucHV0KCkgcHJvamVjdDogUHJvamVjdDtcbiAgQElucHV0KCkgY2hhcnROYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNoYXJ0VmVyc2lvbjogc3RyaW5nO1xuICBASW5wdXQoKSByb2xlTmFtZTogc3RyaW5nO1xuICBASW5wdXQoKSBoYXNTaWduZWRJbjogYm9vbGVhbjtcbiAgQElucHV0KCkgaGFzUHJvamVjdEFkbWluUm9sZTogYm9vbGVhbjtcblxuICBsb2FkaW5nID0gdHJ1ZTtcbiAgaXNNZW1iZXIgPSBmYWxzZTtcbiAgY2hhcnREZXRhaWw6IEhlbG1DaGFydERldGFpbDtcbiAgc3lzdGVtSW5mbzogU3lzdGVtSW5mbztcblxuICByZXBvVVJMID0gXCJcIjtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGVycm9ySGFuZGxlcjogRXJyb3JIYW5kbGVyLFxuICAgIHByaXZhdGUgc3lzdGVtSW5mb1NlcnZpY2U6IFN5c3RlbUluZm9TZXJ2aWNlLFxuICAgIHByaXZhdGUgaGVsbUNoYXJ0U2VydmljZTogSGVsbUNoYXJ0U2VydmljZSxcbiAgICBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRvUHJvbWlzZTxTeXN0ZW1JbmZvPih0aGlzLnN5c3RlbUluZm9TZXJ2aWNlLmdldFN5c3RlbUluZm8oKSlcbiAgICAgIC50aGVuKHN5c3RlbUluZm8gPT4ge1xuICAgICAgICBsZXQgc2NoZW1lID0gJ2h0dHA6Ly8nO1xuICAgICAgICB0aGlzLnN5c3RlbUluZm8gPSBzeXN0ZW1JbmZvO1xuICAgICAgICBpZiAodGhpcy5zeXN0ZW1JbmZvLmhhc19jYV9yb290KSB7XG4gICAgICAgICAgc2NoZW1lID0gJ2h0dHBzOi8vJztcbiAgICAgICAgfVxuICAgICAgICB0aGlzLnJlcG9VUkwgPSBgJHtzY2hlbWV9JHt0aGlzLnN5c3RlbUluZm8ucmVnaXN0cnlfdXJsfWA7XG4gICAgICB9KVxuICAgICAgLmNhdGNoKGVycm9yID0+IHRoaXMuZXJyb3JIYW5kbGVyLmVycm9yKGVycm9yKSk7XG4gICAgdGhpcy5yZWZyZXNoKCk7XG4gIH1cbiAgcHVibGljIGdldCBjaGFydE5hbWVXaXRoVmVyc2lvbigpIHtcbiAgICByZXR1cm4gYCR7dGhpcy5jaGFydE5hbWV9OiR7dGhpcy5jaGFydFZlcnNpb259YDtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgaXNDaGFydEV4aXN0KCkge1xuICAgIHJldHVybiB0aGlzLmNoYXJ0RGV0YWlsID8gdHJ1ZSA6IGZhbHNlO1xuICB9XG5cbiAgcmVmcmVzaCgpIHtcbiAgICB0aGlzLmxvYWRpbmcgPSB0cnVlO1xuICAgIHRoaXMuaGVsbUNoYXJ0U2VydmljZVxuICAgICAgLmdldENoYXJ0RGV0YWlsKHRoaXMucHJvamVjdC5uYW1lLCB0aGlzLmNoYXJ0TmFtZSwgdGhpcy5jaGFydFZlcnNpb24pXG4gICAgICAucGlwZShmaW5hbGl6ZSgoKSA9PiB7XG4gICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xuICAgICAgICBsZXQgaG5kID0gc2V0SW50ZXJ2YWwoKCkgPT4gdGhpcy5jZHIubWFya0ZvckNoZWNrKCksIDEwMCk7XG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4gY2xlYXJJbnRlcnZhbChobmQpLCAyMDAwKTtcbiAgICAgIH0pKVxuICAgICAgLnN1YnNjcmliZShcbiAgICAgICAgY2hhcnREZXRhaWwgPT4ge1xuICAgICAgICAgIHRoaXMuY2hhcnREZXRhaWwgPSBjaGFydERldGFpbDtcbiAgICAgICAgfSxcbiAgICAgICAgZXJyID0+IHtcbiAgICAgICAgICB0aGlzLmVycm9ySGFuZGxlci5lcnJvcihlcnIpO1xuICAgICAgICB9XG4gICAgICApO1xuICB9XG5cbiAgZG93bmxvYWRDaGFydCgpIHtcbiAgICBpZiAoIXRoaXMuY2hhcnREZXRhaWwgfHxcbiAgICAgICF0aGlzLmNoYXJ0RGV0YWlsLm1ldGFkYXRhIHx8XG4gICAgICAhdGhpcy5jaGFydERldGFpbC5tZXRhZGF0YS51cmxzIHx8XG4gICAgICB0aGlzLmNoYXJ0RGV0YWlsLm1ldGFkYXRhLnVybHMubGVuZ3RoIDwgMSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBsZXQgZmlsZW5hbWUgPSB0aGlzLmNoYXJ0RGV0YWlsLm1ldGFkYXRhLnVybHNbMF07XG5cbiAgICB0aGlzLmhlbG1DaGFydFNlcnZpY2UuZG93bmxvYWRDaGFydCh0aGlzLnByb2plY3QubmFtZSwgZmlsZW5hbWUpLnN1YnNjcmliZShcbiAgICAgIHJlcyA9PiB7XG4gICAgICAgIGRvd25sb2FkRmlsZShyZXMpO1xuICAgICAgfSxcbiAgICAgIGVycm9yID0+IHtcbiAgICAgICAgdGhpcy5lcnJvckhhbmRsZXIuZXJyb3IoZXJyb3IpO1xuICAgICAgfSxcbiAgICApO1xuICB9XG59XG4iXX0=