Fix CRD details switch (#5016)

* Fix CRD details switch

* Use CRD kind name first when pinning

i18n/de/messages.de.xlf

@@ -2990,10 +2990,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/fr/messages.fr.xlf

@@ -2994,10 +2994,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/ja/messages.ja.xlf

@@ -2720,10 +2720,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/ko/messages.ko.xlf

@@ -2778,10 +2778,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/messages.xlf

@@ -2502,8 +2502,8 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf

@@ -2778,10 +2778,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/zh-Hans/messages.zh-Hans.xlf

@@ -2778,10 +2778,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf

@@ -2782,10 +2782,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/zh-Hant/messages.zh-Hant.xlf

@@ -2782,10 +2782,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

i18n/zh/messages.zh.xlf

@@ -2778,10 +2778,10 @@
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8d93137e6678a0a40da783d0a5bc06272d3317c5" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+      <trans-unit id="192867803de476e3137425685702cb44b3bb9981" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </source>
-        <target><x id="INTERPOLATION" equiv-text="{{resource.name}}"/>
+        <target state="new"><x id="INTERPOLATION" equiv-text="{{resource.displayName}}"/>
   </target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/chrome/nav/pinner/template.html</context>

src/app/backend/settings/api/types.go

@@ -65,9 +65,10 @@ type SettingsManager interface {
 
 // PinnedResource represents a pinned resource.
 type PinnedResource struct {
-	Kind      string `json:"kind"`
-	Name      string `json:"name"`
-	Namespace string `json:"namespace,omitempty"`
+	Kind        string `json:"kind"`
+	Name        string `json:"name"`
+	DisplayName string `json:"displayName"`
+	Namespace   string `json:"namespace,omitempty"`
 }
 
 func (p *PinnedResource) IsEqual(other *PinnedResource) bool {

src/app/frontend/chrome/nav/pinner/template.html

@@ -18,6 +18,6 @@ limitations under the License.
   <kd-nav-item *ngFor="let resource of getPinnedResources()"
                class="kd-nav-item"
                [state]="getResourceHref(resource)"
-               i18n>{{resource.name}}
+               i18n>{{resource.displayName}}
   </kd-nav-item>
 </div>

src/app/frontend/common/components/actionbar/detailactions/pin/component.ts

@@ -31,7 +31,12 @@ export class ActionbarDetailPinComponent {
     if (this.isPinned()) {
       this.pinner_.unpin(this.typeMeta.kind, this.objectMeta.name, this.objectMeta.namespace);
     } else {
-      this.pinner_.pin(this.typeMeta.kind, this.objectMeta.name, this.objectMeta.namespace);
+      this.pinner_.pin(
+        this.typeMeta.kind,
+        this.objectMeta.name,
+        this.objectMeta.namespace,
+        this.displayName,
+      );
     }
   }
 

src/app/frontend/common/components/list/column/component.ts

@@ -23,7 +23,7 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import {ActionColumn} from '@api/frontendapi';
-import {Resource} from 'typings/backendapi';
+import {CRD, CRDDetail, CRDObject, Resource} from 'typings/backendapi';
 
 @Component({
   selector: 'kd-dynamic-cell',
@@ -47,5 +47,9 @@ export class ColumnComponent<T extends ActionColumn> implements OnChanges {
     this.componentRef_ = this.target.createComponent(factory);
     this.componentRef_.instance.setObjectMeta(this.resource.objectMeta);
     this.componentRef_.instance.setTypeMeta(this.resource.typeMeta);
+
+    if ((this.resource as CRDDetail).names !== undefined) {
+      this.componentRef_.instance.setDisplayName((this.resource as CRDDetail).names.kind);
+    }
   }
 }

src/app/frontend/common/components/list/column/menu/component.ts

@@ -16,11 +16,10 @@ import {Component, Input} from '@angular/core';
 import {Router} from '@angular/router';
 import {ObjectMeta, TypeMeta} from '@api/backendapi';
 import {ActionColumn} from '@api/frontendapi';
-import {first} from 'rxjs/operators';
+import {PinnerService} from '../../../../services/global/pinner';
 import {KdStateService} from '../../../../services/global/state';
 import {VerberService} from '../../../../services/global/verber';
 import {Resource} from '../../../../services/resource/endpoint';
-import {PinnerService} from '../../../../services/global/pinner';
 
 const loggableResources: string[] = [
   Resource.daemonSet,
@@ -44,6 +43,7 @@ const triggerableResources: string[] = [Resource.cronJob];
 export class MenuComponent implements ActionColumn {
   @Input() objectMeta: ObjectMeta;
   @Input() typeMeta: TypeMeta;
+  @Input() displayName: string;
 
   constructor(
     private readonly verber_: VerberService,
@@ -60,6 +60,10 @@ export class MenuComponent implements ActionColumn {
     this.typeMeta = typeMeta;
   }
 
+  setDisplayName(displayName: string): void {
+    this.displayName = displayName;
+  }
+
   isLogsEnabled(): boolean {
     return loggableResources.includes(this.typeMeta.kind);
   }
@@ -102,7 +106,12 @@ export class MenuComponent implements ActionColumn {
   }
 
   onPin(): void {
-    this.pinner_.pin(this.typeMeta.kind, this.objectMeta.name, this.objectMeta.namespace);
+    this.pinner_.pin(
+      this.typeMeta.kind,
+      this.objectMeta.name,
+      this.objectMeta.namespace,
+      this.displayName ? this.displayName : this.objectMeta.name,
+    );
   }
 
   onUnpin(): void {

src/app/frontend/common/components/resourcelist/crdobject/component.ts

@@ -12,16 +12,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
 import {HttpParams} from '@angular/common/http';
-import {Observable} from 'rxjs';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 import {CRDObject, CRDObjectList} from '@api/backendapi';
+import {Observable} from 'rxjs';
+import {map, takeUntil} from 'rxjs/operators';
 import {ResourceListBase} from '../../../resources/list';
-import {NamespacedResourceService} from '../../../services/resource/resource';
 import {NotificationsService} from '../../../services/global/notifications';
-import {ActivatedRoute} from '@angular/router';
-import {ListGroupIdentifier, ListIdentifier} from '../groupids';
+import {EndpointManager, Resource} from '../../../services/resource/endpoint';
+import {NamespacedResourceService} from '../../../services/resource/resource';
 import {MenuComponent} from '../../list/column/menu/component';
+import {ListGroupIdentifier, ListIdentifier} from '../groupids';
 
 @Component({
   selector: 'kd-crd-object-list',
@@ -30,16 +32,15 @@ import {MenuComponent} from '../../list/column/menu/component';
 })
 export class CRDObjectListComponent extends ResourceListBase<CRDObjectList, CRDObject> {
   @Input() endpoint: string;
-  @Input() crdName: string;
 
   constructor(
     private readonly crdObject_: NamespacedResourceService<CRDObjectList>,
-    notifications: NotificationsService,
     private readonly activatedRoute_: ActivatedRoute,
+    notifications: NotificationsService,
     cdr: ChangeDetectorRef,
   ) {
     super(
-      `customresourcedefinition/${activatedRoute_.snapshot.params.crdName}`,
+      activatedRoute_.params.pipe(map(params => `customresourcedefinition/${params.crdName}`)),
       notifications,
       cdr,
     );
@@ -48,6 +49,13 @@ export class CRDObjectListComponent extends ResourceListBase<CRDObjectList, CRDO
 
     // Register action columns.
     this.registerActionColumn<MenuComponent>('menu', MenuComponent);
+
+    this.activatedRoute_.params.pipe(takeUntil(this.unsubscribe_)).subscribe(params => {
+      this.endpoint = EndpointManager.resource(Resource.crd, true).child(
+        params.crdName,
+        Resource.crdObject,
+      );
+    });
   }
 
   getResourceObservable(params?: HttpParams): Observable<CRDObjectList> {

src/app/frontend/common/resources/list.ts

@@ -42,10 +42,10 @@ import {
   ColumnWhenCondition,
   OnListChangeEvent,
 } from '@api/frontendapi';
-import {Subject} from 'rxjs';
+import {isObservable, Subject} from 'rxjs';
 import {Observable, ObservableInput} from 'rxjs/Observable';
 import {merge} from 'rxjs/observable/merge';
-import {startWith, switchMap, takeUntil} from 'rxjs/operators';
+import {startWith, switchMap, takeUntil, tap} from 'rxjs/operators';
 
 import {CardListFilterComponent} from '../components/list/filter/component';
 import {RowDetailComponent} from '../components/list/rowdetail/component';
@@ -64,12 +64,13 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
   // Base properties
   private readonly actionColumns_: Array<ActionColumnDef<ActionColumn>> = [];
   private readonly data_ = new MatTableDataSource<R>();
+  private stateName_ = '';
   private listUpdates_ = new Subject();
-  private unsubscribe_ = new Subject<void>();
   private loaded_ = false;
   private readonly dynamicColumns_: ColumnWhenCondition[] = [];
   private paramsService_: ParamsService;
   private router_: Router;
+  protected readonly unsubscribe_ = new Subject<void>();
   protected readonly kdState_: KdStateService;
   protected readonly settingsService_: GlobalSettingsService;
   protected readonly namespaceService_: NamespaceService;
@@ -94,7 +95,7 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
   private readonly cardFilter_: CardListFilterComponent;
 
   protected constructor(
-    private readonly stateName_: string,
+    stateName: string | Observable<string>,
     private readonly notifications_: NotificationsService,
     private readonly cdr_: ChangeDetectorRef,
   ) {
@@ -103,6 +104,7 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
     this.namespaceService_ = GlobalServicesModule.injector.get(NamespaceService);
     this.paramsService_ = GlobalServicesModule.injector.get(ParamsService);
     this.router_ = GlobalServicesModule.injector.get(Router);
+    this.initStateName_(stateName);
   }
 
   ngOnInit(): void {
@@ -126,12 +128,8 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
 
     this.getObservableWithDataSelect_()
       .pipe(startWith({}))
-      .pipe(
-        switchMap(() => {
-          this.isLoading = true;
-          return this.getResourceObservable(this.getDataSelectParams_());
-        }),
-      )
+      .pipe(tap(_ => (this.isLoading = true)))
+      .pipe(switchMap(() => this.getResourceObservable(this.getDataSelectParams_())))
       .pipe(takeUntil(this.unsubscribe_))
       .subscribe((data: T) => {
         this.notifications_.pushErrors(data.errors);
@@ -216,6 +214,14 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
     } as ColumnWhenCondition);
   }
 
+  private initStateName_(stateName: string | Observable<string>): void {
+    if (isObservable(stateName)) {
+      stateName.pipe(takeUntil(this.unsubscribe_)).subscribe(name => (this.stateName_ = name));
+    } else {
+      this.stateName_ = stateName;
+    }
+  }
+
   private getObservableWithDataSelect_<E>(): Observable<E> {
     const obsInput = [this.matPaginator_.page] as Array<ObservableInput<E>>;
 

src/app/frontend/common/services/global/pinner.ts

@@ -50,9 +50,9 @@ export class PinnerService {
     return this.isInitialized_;
   }
 
-  pin(kind: string, name: string, namespace: string): void {
+  pin(kind: string, name: string, namespace: string, displayName: string): void {
     this.http_
-      .put(this.endpoint_, {kind, name, namespace})
+      .put(this.endpoint_, {kind, name, namespace, displayName})
       .subscribe(() => this.onPinUpdate.next(), this.handleErrorResponse_.bind(this));
   }
 

src/app/frontend/crd/detail/component.ts

@@ -15,7 +15,8 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {CRDDetail} from '@api/backendapi';
-import {Subscription} from 'rxjs';
+import {Subject, Subscription} from 'rxjs';
+import {switchMap, takeUntil, tap} from 'rxjs/operators';
 
 import {ActionbarService, ResourceMeta} from '../../common/services/global/actionbar';
 import {NotificationsService} from '../../common/services/global/notifications';
@@ -24,12 +25,13 @@ import {EndpointManager, Resource} from '../../common/services/resource/endpoint
 
 @Component({selector: 'kd-crd-detail', templateUrl: './template.html'})
 export class CRDDetailComponent implements OnInit, OnDestroy {
-  private crdSubscription_: Subscription;
-  private readonly endpoint_ = EndpointManager.resource(Resource.crd);
   crd: CRDDetail;
-  crdObjectEndpoint: string;
+  crdName: string;
   isInitialized = false;
 
+  private readonly unsubscribe_ = new Subject<void>();
+  private readonly endpoint_ = EndpointManager.resource(Resource.crd);
+
   constructor(
     private readonly crd_: ResourceService<CRDDetail>,
     private readonly actionbar_: ActionbarService,
@@ -38,26 +40,21 @@ export class CRDDetailComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    const {crdName} = this.activatedRoute_.snapshot.params;
-    this.crdObjectEndpoint = EndpointManager.resource(Resource.crd, true).child(
-      crdName,
-      Resource.crdObject,
-    );
-
-    this.crdSubscription_ = this.crd_
-      .get(this.endpoint_.detail(), crdName)
+    this.activatedRoute_.params
+      .pipe(tap(params => (this.crdName = params.crdName)))
+      .pipe(switchMap(_ => this.crd_.get(this.endpoint_.detail(), this.crdName)))
+      .pipe(takeUntil(this.unsubscribe_))
       .subscribe((d: CRDDetail) => {
         this.crd = d;
         this.notifications_.pushErrors(d.errors);
-        this.actionbar_.onInit.emit(
-          new ResourceMeta('Custom Resource Definition', d.objectMeta, d.typeMeta),
-        );
+        this.actionbar_.onInit.emit(new ResourceMeta(d.names.kind, d.objectMeta, d.typeMeta));
         this.isInitialized = true;
       });
   }
 
   ngOnDestroy(): void {
-    this.crdSubscription_.unsubscribe();
+    this.unsubscribe_.next();
+    this.unsubscribe_.complete();
     this.actionbar_.onDetailsLeave.emit();
   }
 }

src/app/frontend/crd/detail/template.html

@@ -90,7 +90,7 @@ limitations under the License.
   </div>
 </kd-card>
 
-<kd-crd-object-list [endpoint]="crdObjectEndpoint"></kd-crd-object-list>
+<kd-crd-object-list></kd-crd-object-list>
 
 <kd-crd-versions-list *ngIf="crd?.versions"
                       [versions]="crd?.versions"

src/app/frontend/typings/backendapi.ts

@@ -1048,6 +1048,7 @@ export interface GlobalSettings {
 export interface PinnedResource {
   kind: string;
   name: string;
+  displayName: string;
   namespace?: string;
 }
 

src/app/frontend/typings/frontendapi.ts

@@ -62,6 +62,7 @@ export interface ColumnWhenCondition {
 export interface ActionColumn {
   setTypeMeta(typeMeta: TypeMeta): void;
   setObjectMeta(objectMeta: ObjectMeta): void;
+  setDisplayName(displayName: string): void;
 }
 
 export interface HTMLInputEvent extends Event {