Minor Kube Fixes (#4829)

* Fix home screen kube card pod link * Ensure reset list filter button also resets helm chart repo filter * Ensure we handle the case where the versions info is unable * Fix link for namespaces Co-authored-by: Neil MacDougall <nwmac@users.noreply.github.com>
cloudfoundry · Dec 8, 2020 · 48e97e7 · 48e97e7
1 parent f011c5c
commit 48e97e7
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 42 deletions.
diff --git a/...rontend/packages/kubernetes/src/helm/monocular/chart-details/chart-details.component.html b/...rontend/packages/kubernetes/src/helm/monocular/chart-details/chart-details.component.html
@@ -2,18 +2,21 @@
   <app-panel *ngIf="!chart && !initing" class="app-panel--container">
     <h2>Sorry, we couldn't find the chart</h2>
   </app-panel>
+  <app-panel *ngIf="chart && !currentVersion && !initing" class="app-panel--container">
+    <h2>Sorry, we couldn't find the version information for this chart</h2>
+  </app-panel>
   <app-loader [loading]="loading">
-    <div class="chart-details__wrapper">
-      <app-entity-summary-title class="summary-title" *ngIf="chart" [title]="chart.attributes.name"
-        [subTitle]="chartSubTitle" [subText]="chart.attributes.description" [imagePath]="iconUrl">
+    <div class="chart-details__wrapper" *ngIf="chart && currentVersion">
+      <app-entity-summary-title class="summary-title" [title]="chart.attributes.name" [subTitle]="chartSubTitle"
+        [subText]="chart.attributes.description" [imagePath]="iconUrl">
         <div class="chart-details__content">
           <article class="chart-details__content__docs">
-            <app-chart-details-readme [currentVersion]=currentVersion></app-chart-details-readme>
+            <app-chart-details-readme [currentVersion]="currentVersion"></app-chart-details-readme>
           </article>
         </div>
       </app-entity-summary-title>
-      <aside *ngIf="chart" class="chart-details__content__info">
-        <app-chart-details-info [chart]=chart [currentVersion]=currentVersion></app-chart-details-info>
+      <aside class="chart-details__content__info">
+        <app-chart-details-info [chart]="chart" [currentVersion]="currentVersion"></app-chart-details-info>
       </aside>
     </div>
   </app-loader>

diff --git a/src/frontend/packages/kubernetes/src/helm/monocular/chart-details/chart-details.component.ts b/src/frontend/packages/kubernetes/src/helm/monocular/chart-details/chart-details.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { first } from 'rxjs/operators';
+import { finalize, first, switchMap, tap } from 'rxjs/operators';
 
 import { Chart } from '../shared/models/chart';
 import { ChartVersion } from '../shared/models/chart-version';
@@ -39,24 +39,30 @@ export class ChartDetailsComponent implements OnInit {
       const chartName = params.chartName;
 
       if (!!chartName) {
-        this.chartsService.getChart(repo, chartName).pipe(first()).subscribe(chart => {
-          clearTimeout(this.loadingDelay);
-          this.loading = false;
-          this.initing = false;
-          this.chart = chart;
-          this.chartSubTitle = chart.attributes.repo.name;
-          if (getMonocularEndpoint(this.route, chart) !== stratosMonocularEndpointGuid) {
-            this.chartSubTitle = 'Artifact Hub - ' + this.chartSubTitle;
-          }
-          const version = params.version || this.chart.relationships.latestChartVersion.data.version;
-          this.chartsService.getVersion(repo, chartName, version).pipe(first())
-            .subscribe(chartVersion => {
-              this.currentVersion = chartVersion;
-              this.titleVersion = this.currentVersion.attributes.app_version || '';
-              this.updateMetaTags();
-              this.iconUrl = this.chartsService.getChartIconURL(this.chart, chartVersion);
-            });
-        });
+        this.chartsService.getChart(repo, chartName).pipe(
+          first(),
+          switchMap(chart => {
+            clearTimeout(this.loadingDelay);
+            this.chart = chart;
+            this.chartSubTitle = chart.attributes.repo.name;
+            if (getMonocularEndpoint(this.route, chart) !== stratosMonocularEndpointGuid) {
+              this.chartSubTitle = 'Artifact Hub - ' + this.chartSubTitle;
+            }
+            const version = params.version || this.chart.relationships.latestChartVersion.data.version;
+            return this.chartsService.getVersion(repo, chartName, version).pipe(first());
+          }),
+          tap(chartVersion => {
+            this.currentVersion = chartVersion;
+            this.titleVersion = this.currentVersion.attributes.app_version || '';
+            this.updateMetaTags();
+            this.iconUrl = this.chartsService.getChartIconURL(this.chart, chartVersion);
+          }),
+          finalize(() => {
+            clearTimeout(this.loadingDelay);
+            this.loading = false;
+            this.initing = false;
+          })
+        ).subscribe();
       }
     });
   }

diff --git a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts
@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
 import { distinctUntilChanged, filter, first, map, startWith } from 'rxjs/operators';
 
 import { ListConfig } from '../../../../../core/src/shared/components/list/list.component.types';
@@ -24,7 +24,7 @@ const REPO_FILTER_NAME = 'repository';
   }]
 
 })
-export class CatalogTabComponent {
+export class CatalogTabComponent implements OnDestroy {
 
   public repos$: Observable<{
     artifactHubRepos: string[],
@@ -39,6 +39,9 @@ export class CatalogTabComponent {
   public collapsed = true;
   public hide = true;
 
+  private initStateSet = false;
+  private sub: Subscription;
+
   constructor(private store: Store<AppState>, private activatedRoute: ActivatedRoute) {
     // Determine the starting state of the filter by repo section
     stratosEntityCatalog.endpoint.store.getAll.getPaginationService().entities$.pipe(
@@ -89,15 +92,20 @@ export class CatalogTabComponent {
       startWith(null)
     );
 
-    helmEntityCatalog.chart.store.getPaginationMonitor().pagination$.pipe(
-      first()
-    ).subscribe(pagination => {
-      const { repo } = this.activatedRoute.snapshot.params;
-      if (repo &&  repo.length > 0) {
-        this.filterCharts(repo);
-      } else {
-        this.filteredRepo = pagination.clientPagination?.filter?.items?.[REPO_FILTER_NAME];
+    const { repo: repoFromRoute } = this.activatedRoute.snapshot.params;
+    const repoFromStore$ = helmEntityCatalog.chart.store.getPaginationMonitor().pagination$.pipe(
+      map(pagination => pagination.clientPagination?.filter?.items?.[REPO_FILTER_NAME])
+    );
+
+    // Set the initial state... and watch for changes (aka reset filters button)
+    this.sub = repoFromStore$.subscribe(repoFromStore => {
+      // Only apply repo from url on first load (and if we have one)
+      if (!this.initStateSet && repoFromRoute && repoFromRoute.length > 0) {
+        this.filterCharts(repoFromRoute);
+      } else if (this.filteredRepo !== repoFromStore) {
+        this.filteredRepo = repoFromStore;
       }
+      this.initStateSet = true;
     });
   }
 
@@ -123,4 +131,10 @@ export class CatalogTabComponent {
   public searchRepos(repoName: string) {
     this.searchReposSub.next(repoName);
   }
+
+  ngOnDestroy(): void {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
+  }
 }
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/home/kubernetes-home-card.component.html b/src/frontend/packages/kubernetes/src/kubernetes/home/kubernetes-home-card.component.html
@@ -1,18 +1,18 @@
 <app-tile-grid fit="true">
   <app-tile-group class="k8s-home-card__plain-tiles">
     <app-tile>
-      <app-card-number-metric mode="plain" link="/kubernetes/{{endpoint.guid}}/nodes"
-        icon="apps" label="Nodes" labelSingular="Node" value="{{ nodeCount$ | async }}">
+      <app-card-number-metric mode="plain" link="/kubernetes/{{endpoint.guid}}/nodes" icon="apps" label="Nodes"
+        labelSingular="Node" value="{{ nodeCount$ | async }}">
       </app-card-number-metric>
     </app-tile>
     <app-tile>
-      <app-card-number-metric mode="plain" link="/kubernetes/{{endpoint.guid}}/namespaces"
-        icon="language" label="Namespaces" labelSingular="Node" value="{{ namespaceCount$ | async }}">
+      <app-card-number-metric mode="plain" link="/kubernetes/{{endpoint.guid}}/resource/namespace" icon="language"
+        label="Namespaces" labelSingular="Node" value="{{ namespaceCount$ | async }}">
       </app-card-number-metric>
     </app-tile>
     <app-tile>
-      <app-card-number-metric mode="plain" link="/kubernetes/{{endpoint.guid}}/pods"
-        icon="apps" label="Pods" labelSingular="Pod" value="{{ podCount$ | async }}">
+      <app-card-number-metric mode="plain" link="/kubernetes/{{endpoint.guid}}/resource/pod" icon="apps" label="Pods"
+        labelSingular="Pod" value="{{ podCount$ | async }}">
       </app-card-number-metric>
     </app-tile>
   </app-tile-group>