Merge pull request #5555 from ninjadq/add_deprecated_status

Add status to charts and versions UI

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

@@ -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">

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

@@ -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,10 +62,18 @@
                     <div class="card-title">{{item.name}}</div>
                 </div>
                 <div class="card-footer">
-                    <div class="form-group">
+                    <div class="row flex-items-xs-between">
-                        <span class="version-text">{{item.total_versions}}</span>
+                        <div class="col-xs-6">
-                        <label *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label>
+                            <span class="version-text">{{item.total_versions}}</span>
-                        <label *ngIf="item.total_versions === 1">{{'HELM_CHART.VERSION' | translate}}</label>
+                            <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>

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

@@ -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";
+    }
+  }
 }

src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html

@@ -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>

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

@@ -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";
+    }
+  }
 }

src/ui_ng/lib/src/service/interface.ts

@@ -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 {

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

@@ -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?"

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

@@ -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?"

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

@@ -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 ?"

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

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