Fix issues on the list-view of helm chart registry

1. Fix The header of version column
2. Fix word of no item placeholder
3. Fix the footer of gridview
4. Fix filter of version and chart

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

@@ -3,7 +3,9 @@
         <div class="toolbar">
             <div class="row flex-items-xs-right option-right rightPos">
                 <div class="flex-xs-middle">
-                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}" [currentValue]="lastFilteredChartName"></hbr-filter>
+                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}"
+                    [currentValue]="lastFilteredChartName"
+                    (filterEvt)="updateFilterValue($event)"></hbr-filter>
                     <span class="card-btn" (click)="showCard(true)" (mouseenter)="mouseEnter('card') " (mouseleave)="mouseLeave('card')">
                         <clr-icon [ngClass]="{'is-highlight': isCardView || isHovering('card') }" shape="view-cards"></clr-icon>
                     </span>
@@ -27,7 +29,7 @@
                     </button>
                 </clr-dg-action-bar>
                 <clr-dg-column [clrDgField]="'name'">{{'HELM_CHART.NAME' | translate}}</clr-dg-column>
-                <clr-dg-column>{{'HELM_CHART.VERSIONS' | translate}}</clr-dg-column>
+                <clr-dg-column>{{'HELM_CHART.VERSION' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'HELM_CHART.CREATED' | translate}}</clr-dg-column>
                 <clr-dg-placeholder>{{'HELM_CHART.PLACEHOLDER' | translate }}</clr-dg-placeholder>
                 <clr-dg-row *ngFor="let chart of charts" [clrDgItem]="chart">
@@ -39,8 +41,7 @@
                 </clr-dg-row>
                 <clr-dg-footer>
                     <clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
-                        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}} {{pagination.totalItems}} {{'HELM_CHART.ITEMS'
+                        {{pagination.totalItems}} {{'HELM_CHART.ITEMS'| translate}}
-                        | translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>

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

@@ -76,6 +76,11 @@ export class HelmChartComponent implements OnInit {
 
   }
 
+  updateFilterValue(value: string) {
+    this.lastFilteredChartName = value;
+    this.refresh();
+  }
+
   refresh() {
     this.loading = true;
     this.helmChartService
@@ -87,7 +92,7 @@ export class HelmChartComponent implements OnInit {
     })
     .subscribe(
       charts => {
-        this.charts = charts;
+        this.charts = charts.filter(x => x.name.includes(this.lastFilteredChartName));
         this.chartsCopy = charts.map(x => Object.assign({}, x));
       },
       err => {

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

@@ -16,7 +16,9 @@
         <div class="toolbar">
             <div class="row flex-items-xs-right option-right rightPos">
                 <div class="flex-xs-middle">
-                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}" [currentValue]="lastFilteredVersionName"></hbr-filter>
+                    <hbr-filter [withDivider]="true" filterPlaceholder="{{'HELM_CHART.FILTER_FOR_CHARTS' | translate}}"
+                    [currentValue]="lastFilteredVersionName"
+                    (filterEvt)="updateFilterValue($event)"></hbr-filter>
                     <span class="card-btn" (click)="showCard(true)" (mouseenter)="mouseEnter('card') " (mouseleave)="mouseLeave('card')">
                         <clr-icon [ngClass]="{'is-highlight': isCardView || isHovering('card') }" shape="view-cards"></clr-icon>
                     </span>
@@ -52,6 +54,7 @@
                 <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>
                 <clr-dg-row *ngFor="let v of chartVersions" [clrDgItem]="v">
                     <clr-dg-cell>
                         <span class="list-img">
@@ -65,8 +68,7 @@
                 </clr-dg-row>
                 <clr-dg-footer>
                     <clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
-                        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}} {{pagination.totalItems}} {{'HELM_CHART.VERSIONS'
+                        {{pagination.totalItems}} {{'HELM_CHART.ITEMS' | translate}}
-                        | translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>

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

@@ -104,6 +104,11 @@ export class ChartVersionComponent implements OnInit {
     this.lastFilteredVersionName = "";
   }
 
+  updateFilterValue(value: string) {
+    this.lastFilteredVersionName = value;
+    this.refresh();
+  }
+
   refresh() {
     this.loading = true;
     this.helmChartService
@@ -115,7 +120,7 @@ export class ChartVersionComponent implements OnInit {
       })
       .subscribe(
         versions => {
-          this.chartVersions = versions;
+          this.chartVersions = versions.filter(x => x.version.includes(this.lastFilteredVersionName));
           this.versionsCopy = versions.map(x => Object.assign({}, x));
         },
         err => {

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

@@ -506,11 +506,12 @@
         "ADD_REPO": "Add Repo",
         "SHOW_KV": "Key Value Pairs",
         "SHOW_YAML": "YAML File",
-        "PLACEHOLDER": "No Item",
+        "PLACEHOLDER": "We couldn't find any charts!",
+        "NO_VERSION_PLACEHOLDER": "We couldn't find any versions!",
         "FILE_UPLOADED": "File upload successfully",
         "SIGNED": "Signed",
         "UNSIGNED": "Unsigned",
-        "ITEMS": "charts",
+        "ITEMS": "items",
         "NO_README": "No readme file provided by this charts.",
         "SECURITY": "Security"
     },