Add status to charts and versions UI

Add status to present if the chart or version is deprecated.
This commit is contained in:
Deng, Qian 2018-08-08 14:56:35 +08:00
parent d4b17d4722
commit 8d67330d9a
10 changed files with 61 additions and 16 deletions

View File

@ -117,7 +117,8 @@
<td class="left">
<span class="content-icon">
<clr-icon shape="shield-check" class="is-success"></clr-icon>
</span>&nbsp;<a (click)="downloadChart()">{{'HELM_CHART.READY' | translate }}</a></td>
</span>&nbsp;<a href="javascript:void(0)" (click)="downloadChart()">{{'HELM_CHART.READY' | translate }}</a>
</td>
</ng-template>
<ng-template #unsignedContent>
<td class="left">

View File

@ -28,7 +28,8 @@
<clr-icon shape="upload" size="16"></clr-icon>&nbsp;{{'HELM_CHART.UPLOAD' | translate}}
</button>
</clr-dg-action-bar>
<clr-dg-column [clrDgField]="'name'">{{'HELM_CHART.NAME' | translate}}</clr-dg-column>
<clr-dg-column >{{'HELM_CHART.NAME' | translate}}</clr-dg-column>
<clr-dg-column >{{'HELM_CHART.STATUS' | translate}}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.CHARTVERSIONS' | translate}}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.CREATED' | translate}}</clr-dg-column>
<clr-dg-placeholder>{{'HELM_CHART.PLACEHOLDER' | translate }}</clr-dg-placeholder>
@ -39,6 +40,7 @@
</span>
<a href="javascript:void(0)" (click)="onChartClick(chart)">{{ chart.name }}</a>
</clr-dg-cell>
<clr-dg-cell>{{ getStatusString(chart) | translate }}</clr-dg-cell>
<clr-dg-cell>{{ chart.total_versions }}</clr-dg-cell>
<clr-dg-cell>{{ chart.created | date }}</clr-dg-cell>
</clr-dg-row>
@ -51,7 +53,7 @@
</div>
</div>
<div *ngIf="isCardView" class="row card-container">
<div *ngFor="let item of charts;" class="col-lg-2 col-md-5 col-sm-5 col-xs-6">
<div *ngFor="let item of charts;" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a let i=index; class="card clickable" (click)="onChartClick(item)">
<div class="card-header">
<div class="card-icon">
@ -60,11 +62,19 @@
<div class="card-title">{{item.name}}</div>
</div>
<div class="card-footer">
<div class="form-group">
<div class="row flex-items-xs-between">
<div class="col-xs-6">
<span class="version-text">{{item.total_versions}}</span>
<label *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label>
<label *ngIf="item.total_versions === 1">{{'HELM_CHART.VERSION' | translate}}</label>
</div>
<div class="col-xs-6">
<span class="label"
[class.label-danger]="item.deprecated"
[class.label-success]="!item.deprecated"
>{{getStatusString(item) | translate}}</span>
</div>
</div>
</div>
</a>
</div>

View File

@ -178,4 +178,12 @@ export class HelmChartComponent implements OnInit {
getDefaultIcon(chart: HelmChartItem) {
chart.icon = this.chartDefaultIcon;
}
getStatusString(chart: HelmChartItem) {
if (chart.deprecated) {
return "HELM_CHART.DEPRECATED";
} else {
return "HELM_CHART.ACTIVE";
}
}
}

View File

@ -50,8 +50,10 @@
(click)="openVersionDeleteModal(selectedRows)">
<clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'BUTTON.DELETE' | translate}}</button>
</clr-dg-action-bar>
<clr-dg-column [clrDgField]="'name'">{{'HELM_CHART.VERSION' | translate}}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.VERSION' | translate}}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.STATUS' | translate }}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.ENGINE' | translate }}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.MAINTAINERS' | translate }}</clr-dg-column>
<clr-dg-column>{{'HELM_CHART.CREATED' | translate }}</clr-dg-column>
<clr-dg-placeholder>{{'HELM_CHART.NO_VERSION_PLACEHOLDER' | translate }}</clr-dg-placeholder>
@ -62,6 +64,7 @@
</span>
<a href="javascript:void(0)" (click)="onVersionClick(v)">{{ v.version }}</a>
</clr-dg-cell>
<clr-dg-cell>{{ getStatusString(v) | translate }}</clr-dg-cell>
<clr-dg-cell>{{ v.engine }}</clr-dg-cell>
<clr-dg-cell>{{ getMaintainerString(v.maintainers) }}</clr-dg-cell>
<clr-dg-cell>{{ v.created | date}}</clr-dg-cell>
@ -87,6 +90,10 @@
</div>
</div>
<div class="card-block">
<div class="form-group">
<label class="card-label">{{'HELM_CHART.STATUS' | translate}}</label>
<div>{{getStatusString(item) | translate}}</div>
</div>
<div class="form-group">
<label class="card-label">{{'HELM_CHART.ENGINE' | translate}}</label>
<div>{{item.engine}}</div>
@ -103,7 +110,7 @@
<div class="card-footer">
<clr-dropdown [clrCloseMenuOnItemClick]="false">
<button type="button" class="btn btn-link" (click)="versionDownload($event, item)">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
<button type="button" class="btn btn-link" (click)="openVersionDeleteModal([item])">{{'BUTTON.DELETE' | translate}}</button>
<button type="button" class="btn btn-link" (click)="deleteVersionCard($event, item)">{{'BUTTON.DELETE' | translate}}</button>
</clr-dropdown>
</div>
</a>

View File

@ -172,7 +172,10 @@ export class ChartVersionComponent implements OnInit {
});
}
versionDownload(item?: HelmChartVersion) {
versionDownload(evt: Event, item?: HelmChartVersion) {
if (evt) {
evt.stopPropagation();
}
let selectedVersion: HelmChartVersion;
if (item) {
@ -268,6 +271,10 @@ export class ChartVersionComponent implements OnInit {
}
}
deleteVersionCard(env: Event, version: HelmChartVersion) {
env.stopPropagation();
this.openVersionDeleteModal([version]);
}
openVersionDeleteModal(versions: HelmChartVersion[]) {
let versionNames = versions.map(v => v.name).join(",");
this.translateService.get("HELM_CHART.DELETE_CHART_VERSION").subscribe(key => {
@ -304,8 +311,15 @@ export class ChartVersionComponent implements OnInit {
}
}
getDefaultIcon(v: HelmChartVersion) {
v.icon = this.chartDefaultIcon;
}
getStatusString(chartVersion: HelmChartVersion) {
if (chartVersion.deprecated) {
return "HELM_CHART.DEPRECATED";
} else {
return "HELM_CHART.ACTIVE";
}
}
}

View File

@ -307,7 +307,7 @@ export interface HelmChartItem {
status?: string;
pulls?: number;
maintainer?: string;
deprecated?: boolean;
}
export interface HelmChartVersion {
@ -324,6 +324,7 @@ export interface HelmChartVersion {
urls: string[];
created: string;
digest: string;
deprecated?: boolean;
}
export interface HelmChartDetail {

View File

@ -521,7 +521,8 @@
"COMMAND": "Commands",
"PROV_FILE": "Prov File",
"READY": "Ready",
"NOT_READY": "Not Ready"
"NOT_READY": "Not Ready",
"STATUS": "Status"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "Some changes are not saved yet. Do you want to cancel?"

View File

@ -520,7 +520,8 @@
"COMMAND": "Commands",
"PROV_FILE": "Prov File",
"READY": "Ready",
"NOT_READY": "Not Ready"
"NOT_READY": "Not Ready",
"STATUS": "Status"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "Algunos cambios no se han guardado aún. ¿Quiere cancelar?"

View File

@ -495,7 +495,8 @@
"COMMAND": "Commands",
"PROV_FILE": "Prov File",
"READY": "Ready",
"NOT_READY": "Not Ready"
"NOT_READY": "Not Ready",
"STATUS": "Status"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "Certaines modifications ne sont pas encore enregistrées. Voulez-vous annuler ?"

View File

@ -520,7 +520,8 @@
"COMMAND": "命令",
"PROV_FILE": "Prov 文件",
"READY": "就绪",
"NOT_READY": "未就绪"
"NOT_READY": "未就绪",
"STATUS": "状态"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "表单内容改变,确认是否取消?"