K8s: More resource support - refinements (#4822)

* Allow k8s namespaces to be added as favourites * k8s: Add support for more resource types in a generic way * Improve the home page * Fix lint issue * Tweaks and refactoring * Add separator to layout menu * Improve incremental loading * Various tidyups and improvements * Tidy ups and improvemts to async loading * Fix progress spinner alignment * Unscubribe * Minor bug fixes and a few tidy ups * Further tidy ups * Fix front end unit tests * Unit test fix * Further unit tests fixes * Endpoint card unit test fixes * Fix unit tests * Tidy up favorite card * Further refinement to the UI * Fix missing dates from recents on CF view * Get app deploy from home screen working * Add message for when no connected endpoints * Unit test fixes * Kubernetes Home Card unit test fixes * Fix unit test error * Move components to remove dependency on large shared module * Fix unit test and add deploy tiles to CF Home Card * Fix word wrap on favorite name * Add tool tip * Style tidy ups * Minor tidy ups * Check favorites exists before navigating to them * Fix test imports * First round of tidy ups of the user favorites code * Further refactor to reduce the complexity of user favorites * Fix unit tests * Allow Kubernetes namespaces to be favorited * Fix duplicate import * Tidy ups * e2e Debugging * Fix for org delete e2e test * E2e Test fix * Refactor out common entity operator * Slight refactor * Fix frontend unit tests * Unit test fix * Address PR feedback so far * Address PR feedback * Fix connected endpoint state check on home screen * Address PR feedback * Restore apps link * Improve typing * Fix undefined error * Fix unit test * Fix ordering issue * Add a default home card * Fix frong end lint issues * Merge fixes * Fix unit tests * WIP * Fixes for pods view * Tidy ups * Add more resource types * Fix lint issue * Fix lint issue * Fix unit test * Fix lint issues * Fix build issue * Fix unit test * Unit test fix * Fix unit tests * More improvements * Numerous improvements * Fix lint issue * RE-arrange kube entity creation - now assign directly to kube entity catalog - to access custom kube generator resources have to do some funnies in kubernetes-tab-base.component.ts * Fix services in namespace view - kube guid and namespace was mixed up - now follow standard pattern of kube guid then namespace in ctor * Fix merge issues * Changes following review * Fix unit tests * Fix merge issue * Fix merge issues * Changes following merge * Changes following merge * Fix merge conflicts * Only show analysis link when enabled * Fix issue favoriting from side panel * Fix expression changed error * Fix expression changed errors * Fix a few minor issues and unit test * Remove old namespace components * Remvoe TODO * Delete fixes - fixes to delete action param - added to delete pods - successEntityHandler doesn't run, so have to manually clear pagination sections * Fix delete ns - ensure delete action has correct guid - ensure response has kube guid * Fix expanding pod row * Fix show of analysis in namespace resource viewer * Fix fav namespace link * Fix PR issues Co-authored-by: Richard Cox <richard.cox@suse.com>
cloudfoundry · Dec 8, 2020 · 646692e · 646692e
1 parent 48e97e7
commit 646692e
Show file tree

Hide file tree

Showing 49 changed files with 642 additions and 288 deletions.
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html
@@ -1,4 +1,5 @@
-<div *ngIf="!(endpointsService.disablePersistenceFeatures$ | async)" class="favorite-star" [ngSwitch]="isFavorite$ | async" (click)="toggleFavorite($event)">
+<div *ngIf="!(endpointsService.disablePersistenceFeatures$ | async)" class="favorite-star" [ngSwitch]="isFavorite$ | async" (click)="toggleFavorite($event)"
+  [ngClass]="{'favorite-star__small': small}">
   <mat-icon *ngSwitchCase="true" matTooltip="Unset as favorite" aria-label="Set as Favorite">star</mat-icon>
   <mat-icon *ngSwitchCase="false" matTooltip="Set as favorite" aria-label="Unset as Favorite">star_border</mat-icon>
 </div>
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss
@@ -1,8 +1,19 @@
 $size: 24px;
+$small: 20px;
 .favorite-star {
   align-items: center;
   cursor: pointer;
   display: flex;
   height: $size;
   width: $size;
+  &__small {
+    height: $small;
+    width: $small;
+    mat-icon {
+      font-size: $small;
+      height: $small;
+      line-height: $small;
+      width: $small;
+    }
+  }
 }
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts
@@ -27,6 +27,8 @@ export class EntityFavoriteStarComponent {
   @Input()
   public confirmRemoval = false;
 
+  @Input() small = false;
+
   public isFavorite$: Observable<boolean>;
 
   private confirmationDialogConfig = new ConfirmationDialogConfig('Unfavorite?', '', 'Yes', true);

diff --git a/src/frontend/packages/core/src/shared/components/json-viewer/json-viewer.component.html b/src/frontend/packages/core/src/shared/components/json-viewer/json-viewer.component.html
@@ -1,4 +1,4 @@
-<section class="ngx-json-viewer">
+<section class="ngx-json-viewer" [ngClass]="{'small-text': small}">
   <section
     *ngFor="let segment of segments"
     [ngClass]="['segment', 'segment-type-' + segment.type]">

diff --git a/src/frontend/packages/core/src/shared/components/json-viewer/json-viewer.component.scss b/src/frontend/packages/core/src/shared/components/json-viewer/json-viewer.component.scss
@@ -98,4 +98,17 @@ $type-colors: (
   .expandable > .toggler {
     cursor: pointer;
   }
-}
+}
+
+// Smaller text
+.ngx-json-viewer.small-text {
+  font-size: 12px;
+
+  * {
+    font-size: 12px;
+  }
+
+  .segment .children {
+    margin-left: 0;
+  }
+}
diff --git a/src/frontend/packages/core/src/shared/components/json-viewer/json-viewer.component.ts b/src/frontend/packages/core/src/shared/components/json-viewer/json-viewer.component.ts
@@ -26,6 +26,8 @@ export class JsonViewerComponent implements OnChanges {
    */
   @Input() cleanOnChange = true;
 
+  @Input() small = false;
+
   segments: Segment[] = [];
 
   expand() {

diff --git a/...ackages/core/src/shared/components/list/list-generics/helpers/action-or-config-helpers.ts b/...ackages/core/src/shared/components/list/list-generics/helpers/action-or-config-helpers.ts
@@ -87,12 +87,15 @@ export class ListActionOrConfigHelpers {
     dsOverrides?: Partial<IListDataSourceConfig<A, T>>
   ): IListDataSourceConfig<A, T> {
     const { action, catalogEntity } = ListActionOrConfigHelpers.createListAction(actionOrConfig);
+    const schema = catalogEntity.getSchema(action.schemaKey);
     return {
       store,
       action,
       paginationKey: action.paginationKey,
       schema: catalogEntity.getSchema(action.schemaKey),
-      getRowUniqueId: entity => catalogEntity.getGuidFromEntity(entity),
+      getRowUniqueId: entity => {
+        return catalogEntity.getGuidFromEntity(entity) || schema.getId(entity);
+      },
       listConfig,
       isLocal: true, // assume true unless overwritten
       ...dsOverrides

diff --git a/...nd/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html b/...nd/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html
@@ -1,6 +1,10 @@
 <div class="sidepanel-preview" [ngClass]="{'sidepanel-preview__preview': (sidePanelService.previewMode$ | async)}">
   <div class="sidepanel-preview__header">
     <h1>{{ title }}</h1>
+    <app-entity-favorite-star [small]="true" class="sidepanel-preview__favorite" *ngIf="favorite" [favorite]="favorite"></app-entity-favorite-star>
+    <div  class="sidepanel-preview__custom">
+      <ng-container *ngIf="header" [cdkPortalOutlet]="header"></ng-container>
+    </div>
     <button class="sidepanel__close" mat-icon-button (click)="sidePanelService.hide()">
       <mat-icon>close</mat-icon>
     </button>

diff --git a/...nd/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss b/...nd/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss
@@ -37,6 +37,11 @@
       top: 7px;
     }
   }
+  &__custom {
+    align-self: center;
+    flex: 1;
+    margin: 0 50px 0 10px;
+  }
 
   &__content {
     flex: 1;
@@ -50,4 +55,11 @@
     right: 5px;
     top: 7px;
   }
+
+  &__favorite {
+    align-items: center;
+    display: flex;
+    margin-left: 10px;
+    opacity: 0.6;
+  }
 }
diff --git a/...tend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts b/...tend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts
@@ -1,5 +1,7 @@
+import { Portal } from '@angular/cdk/portal';
 import { Component, Input } from '@angular/core';
 
+import { IFavoriteMetadata, UserFavorite } from '../../../../../store/src/types/user-favorites.types';
 import { SidePanelService } from '../../services/side-panel.service';
 
 @Component({
@@ -12,5 +14,10 @@ export class SidepanelPreviewComponent {
   @Input()
   title: string;
 
+  @Input()
+  favorite: UserFavorite<IFavoriteMetadata>;
+
+  @Input() header: Portal<any>;
+
   constructor(public sidePanelService: SidePanelService) { }
 }
diff --git a/src/frontend/packages/core/src/shared/services/side-panel.service.ts b/src/frontend/packages/core/src/shared/services/side-panel.service.ts
@@ -92,7 +92,8 @@ export class SidePanelService {
     this.showMode(SidePanelMode.Modal, component, props, componentFactoryResolver);
   }
 
-  private open() {
+  // Re-open the panel with its current contents
+  public open() {
     this.openedSubject.next(true);
     this.document.addEventListener('keydown', this.onKeyDown);
   }

diff --git a/...tes/analysis-report-viewer/analysis-report-selector/analysis-report-selector.component.ts b/...tes/analysis-report-viewer/analysis-report-selector/analysis-report-selector.component.ts
@@ -37,7 +37,7 @@ export class AnalysisReportSelectorComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.analyzers$ = this.analysisService.getByPath(this.endpoint, this.path).pipe(
+    this.analyzers$ = this.analysisService.getByPath(this.endpoint, this.path, true).pipe(
       map(reports => {
         const res = [];
         if (this.allowNone) {

diff --git a/src/frontend/packages/kubernetes/src/kubernetes/home/kubernetes-home-card.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/home/kubernetes-home-card.component.ts
@@ -50,7 +50,7 @@ export class KubernetesHomeCardComponent implements OnInit {
       },
       {
         title: 'View Namespaces',
-        link: ['/kubernetes', guid, 'namespaces'],
+        link: ['/kubernetes', guid, 'resource', 'namespace'],
         icon: 'namespace',
         iconFont: 'stratos-icons'
       }

diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-entity-generator.ts b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-entity-generator.ts
@@ -17,6 +17,7 @@ import {
 } from '../../../store/src/entity-catalog/entity-catalog.types';
 import { EndpointAuthTypeConfig, EndpointType } from '../../../store/src/extension-types';
 import { metricEntityType } from '../../../store/src/helpers/stratos-entity-factory';
+import { entityFetchedWithoutError } from '../../../store/src/operators';
 import { IFavoriteMetadata } from '../../../store/src/types/user-favorites.types';
 import { KubernetesAWSAuthFormComponent } from './auth-forms/kubernetes-aws-auth-form/kubernetes-aws-auth-form.component';
 import {
@@ -178,21 +179,36 @@ class KubeResourceEntityHelper {
       defn.apiNamespaced = true;
     }
 
+    const schema = kubernetesEntityFactory(defn.type);
     const d: IStratosEntityDefinition = {
       ...defn,
       endpoint: endpointDefinition,
-      schema: kubernetesEntityFactory(defn.type),
+      schema,
       iconFont: defn.iconFont || 'stratos-icons',
       labelPlural: defn.labelPlural || `${defn.label}s`
     };
 
-    if (defn.getKubeCatalogEntity) {
-      return defn.getKubeCatalogEntity(d);
-    } else {
-      return new StratosCatalogEntity<IFavoriteMetadata, B, C>(d, {
-        actionBuilders: createKubeResourceActionBuilder(d.type) as unknown as C
-      });
+    const entity = defn.getKubeCatalogEntity ? defn.getKubeCatalogEntity(d) : new StratosCatalogEntity<IFavoriteMetadata, B, C>(d, {
+      actionBuilders: createKubeResourceActionBuilder(d.type) as unknown as C
+    });
+
+    if (defn.canFavorite && defn.getIsValid) {
+      entity.builders.entityBuilder = {
+        getIsValid: defn.getIsValid,
+        getMetadata: (resource: any) => {
+          return {
+            endpointId: resource.kubeGuid,
+            guid: resource.metadata.uid,
+            kubeGuid: resource.kubeGuid,
+            name: resource.metadata.name,
+          };
+        },
+        getLink: metadata => `/kubernetes/${metadata.endpointId}/resource/${defn.type}`,
+        getGuid: resource => schema.getId(resource),
+      };
     }
+
+    return entity;
   }
 }
 
@@ -239,7 +255,7 @@ export class KubeEntityCatalog {
         BaseEndpointAuth.UsernamePassword,
         kubeAuthTypeMap[KubeEndpointAuthTypes.TOKEN],
       ],
-      getEndpointIdFromEntity: (entity) => entity.kubeGuid,
+      getEndpointIdFromEntity: (entity) => entity.kubeGuid || entity.metadata?.kubeId,
       renderPriority: 4,
       subTypes: [
         {
@@ -301,7 +317,6 @@ export class KubeEntityCatalog {
       endpointDef,
       favorite => `/kubernetes/${favorite.endpointId}`
     );
-
     this.statefulSet = this.generateStatefulSetsEntity(endpointDef);
     this.pod = KubeResourceEntityHelper.generate<KubernetesPod, KubePodActionBuilders>(endpointDef, {
       type: kubernetesPodsEntityType,
@@ -324,9 +339,12 @@ export class KubeEntityCatalog {
       apiVersion: '/api/v1',
       apiName: 'namespaces',
       apiNamespaced: false,
+      canFavorite: true,
       getKubeCatalogEntity: (definition) => new StratosCatalogEntity<IFavoriteMetadata, KubernetesNamespace, KubeNamespaceActionBuilders>(
         definition, { actionBuilders: kubeNamespaceActionBuilders }
       ),
+      getIsValid: (favorite) =>
+        kubeEntityCatalog.namespace.api.get(favorite.metadata.name, favorite.endpointId).pipe(entityFetchedWithoutError()),
       listColumns: [
         {
           header: 'Status',
@@ -365,8 +383,6 @@ export class KubeEntityCatalog {
       ]
     });
     this.metrics = this.generateMetricEntity(endpointDef);
-
-
     this.secrets = KubeResourceEntityHelper.generate<KubeAPIResource, KubeResourceActionBuilders>(endpointDef, {
       type: 'secrets',
       icon: 'config_maps',
@@ -481,7 +497,6 @@ export class KubeEntityCatalog {
       apiVersion: '/apis/batch/v1',
       apiName: 'jobs',
     });
-
   }
 
   public allKubeEntities(): StratosBaseCatalogEntity[] {
@@ -552,8 +567,6 @@ export class KubeEntityCatalog {
       endpoint: endpointDefinition,
     });
   }
-
-
 }
 
 /**

diff --git a/.../kubernetes-namespace-analysis-report/kubernetes-namespace-analysis-report.component.html b/.../kubernetes-namespace-analysis-report/kubernetes-namespace-analysis-report.component.html
@@ -1,4 +1,4 @@
-<app-page-sub-nav>
+<app-page-sub-nav [breadcrumbs]="breadcrumbs">
 
   <app-analysis-report-runner [kubeId]="endpointID" [namespace]="kubeNamespaceService.namespaceName">
   </app-analysis-report-runner>

diff --git a/...ce/kubernetes-namespace-analysis-report/kubernetes-namespace-analysis-report.component.ts b/...ce/kubernetes-namespace-analysis-report/kubernetes-namespace-analysis-report.component.ts
@@ -4,14 +4,18 @@ import { Subject } from 'rxjs';
 import { KubernetesEndpointService } from '../../services/kubernetes-endpoint.service';
 import { KubernetesNamespaceService } from '../../services/kubernetes-namespace.service';
 import { KubernetesAnalysisService } from '../../services/kubernetes.analysis.service';
+import { KubernetesService } from '../../services/kubernetes.service';
 import { AnalysisReport } from '../../store/kube.types';
 
 @Component({
   selector: 'app-kubernetes-namespace-analysis-report-tab',
   templateUrl: './kubernetes-namespace-analysis-report.component.html',
   styleUrls: ['./kubernetes-namespace-analysis-report.component.scss'],
   providers: [
-    KubernetesAnalysisService
+    KubernetesService,
+    KubernetesEndpointService,
+    KubernetesNamespaceService,
+    KubernetesAnalysisService,
   ]
 })
 export class KubernetesNamespaceAnalysisReportComponent {
@@ -26,6 +30,8 @@ export class KubernetesNamespaceAnalysisReportComponent {
 
   noReportsAvailable = false;
 
+  breadcrumbs = [];
+
   constructor(
     public analyzerService: KubernetesAnalysisService,
     public endpointService: KubernetesEndpointService,
@@ -34,6 +40,12 @@ export class KubernetesNamespaceAnalysisReportComponent {
     this.endpointID = this.endpointService.kubeGuid;
     this.path = `${this.kubeNamespaceService.namespaceName}`;
     this.report$.next(null);
+
+    this.breadcrumbs = [
+      { value: 'Analysis' },
+      { value: this.path },
+    ];
+
   }
 
   public analysisChanged(report) {

diff --git a/...s/kubernetes-namespace/kubernetes-namespace-pods/kubernetes-namespace-pods.component.html b/...s/kubernetes-namespace/kubernetes-namespace-pods/kubernetes-namespace-pods.component.html
diff --git a/...s/kubernetes-namespace/kubernetes-namespace-pods/kubernetes-namespace-pods.component.scss b/...s/kubernetes-namespace/kubernetes-namespace-pods/kubernetes-namespace-pods.component.scss
diff --git a/...tes/kubernetes-namespace/kubernetes-namespace-pods/kubernetes-namespace-pods.component.ts b/...tes/kubernetes-namespace/kubernetes-namespace-pods/kubernetes-namespace-pods.component.ts
diff --git a/...rnetes-namespace/kubernetes-namespace-preview/kubernetes-namespace-preview.component.html b/...rnetes-namespace/kubernetes-namespace-preview/kubernetes-namespace-preview.component.html
@@ -0,0 +1,4 @@
+<div class="namespace-preview" *ngIf="showAnalysis$ | async">
+  <mat-icon>assignment</mat-icon>
+  <a [routerLink]="link">Namespace Analysis</a>
+<div>
diff --git a/...rnetes-namespace/kubernetes-namespace-preview/kubernetes-namespace-preview.component.scss b/...rnetes-namespace/kubernetes-namespace-preview/kubernetes-namespace-preview.component.scss
@@ -0,0 +1,14 @@
+.namespace-preview {
+  align-items: center;
+  display: flex;
+  margin: 10px 0;
+
+  mat-icon {
+    font-size: 18px;
+    height: 18px;
+    line-height: 18px;
+    margin-right: 5px;
+    opacity: 0.7;
+    width: 18px;;
+  }
+}
diff --git a/...tes-namespace/kubernetes-namespace-preview/kubernetes-namespace-preview.component.spec.ts b/...tes-namespace/kubernetes-namespace-preview/kubernetes-namespace-preview.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KubernetesBaseTestModules } from '../../kubernetes.testing.module';
+import { KubernetesNamespacePreviewComponent } from './kubernetes-namespace-preview.component';
+
+describe('KubernetesNamespacePreviewComponent', () => {
+  let component: KubernetesNamespacePreviewComponent;
+  let fixture: ComponentFixture<KubernetesNamespacePreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ KubernetesNamespacePreviewComponent ],
+      imports: [...KubernetesBaseTestModules],
+
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KubernetesNamespacePreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});