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>

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>

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

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);

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

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

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() {

src/frontend/packages/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

src/frontend/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>

src/frontend/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;
+  }
 }

src/frontend/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) { }
 }

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);
   }

src/frontend/packages/kubernetes/src/kubernetes/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) {

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'
       }

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,
     });
   }
-
-
 }
 
 /**

src/frontend/packages/kubernetes/src/kubernetes/kubernetes-namespace/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>

src/frontend/packages/kubernetes/src/kubernetes/kubernetes-namespace/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) {

src/frontend/packages/kubernetes/src/kubernetes/kubernetes-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>

src/frontend/packages/kubernetes/src/kubernetes/kubernetes-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;;
+  }
+}

src/frontend/packages/kubernetes/src/kubernetes/kubernetes-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();
+  });
+});