Add creator to endpoint table UI (#4876)

Signed-off-by: Thomas Quandt <[email protected]>

src/frontend/packages/core/src/shared/components/list/list-types/endpoint/endpoints-list-config.service.ts

@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { BehaviorSubject, combineLatest, of } from 'rxjs';
+import { BehaviorSubject, combineLatest, of, Subscription } from 'rxjs';
 import { debounceTime, filter, map } from 'rxjs/operators';
 
 import { ListView } from '../../../../../../../store/src/actions/list.actions';
@@ -14,6 +14,7 @@ import { stratosEntityCatalog } from '../../../../../../../store/src/stratos-ent
 import { EndpointModel } from '../../../../../../../store/src/types/endpoint.types';
 import { PaginationEntityState } from '../../../../../../../store/src/types/pagination.types';
 import { UserFavoriteManager } from '../../../../../../../store/src/user-favorite-manager';
+import { SessionService } from '../../../../services/session.service';
 import { createTableColumnFavorite } from '../../list-table/table-cell-favorite/table-cell-favorite.component';
 import { ITableColumn } from '../../list-table/table.types';
 import {
@@ -28,14 +29,15 @@ import { EndpointCardComponent } from './endpoint-card/endpoint-card.component';
 import { EndpointListHelper } from './endpoint-list.helpers';
 import { EndpointsDataSource } from './endpoints-data-source';
 import { TableCellEndpointAddressComponent } from './table-cell-endpoint-address/table-cell-endpoint-address.component';
+import { TableCellEndpointCreatorComponent } from './table-cell-endpoint-creator/table-cell-endpoint-creator.component';
 import { TableCellEndpointDetailsComponent } from './table-cell-endpoint-details/table-cell-endpoint-details.component';
 import { TableCellEndpointNameComponent } from './table-cell-endpoint-name/table-cell-endpoint-name.component';
 import { TableCellEndpointStatusComponent } from './table-cell-endpoint-status/table-cell-endpoint-status.component';
 
 
 
 @Injectable()
-export class EndpointsListConfigService implements IListConfig<EndpointModel> {
+export class EndpointsListConfigService implements IListConfig<EndpointModel>, OnDestroy {
   cardComponent = EndpointCardComponent;
 
   private singleActions: IListAction<EndpointModel>[];
@@ -107,20 +109,37 @@ export class EndpointsListConfigService implements IListConfig<EndpointModel> {
     filter: 'Filter Endpoints'
   };
   enableTextFilter = true;
+  userEndpointsSubscription: Subscription;
 
   constructor(
     private store: Store<AppState>,
     paginationMonitorFactory: PaginationMonitorFactory,
     entityMonitorFactory: EntityMonitorFactory,
     internalEventMonitorFactory: InternalEventMonitorFactory,
     endpointListHelper: EndpointListHelper,
-    userFavoriteManager: UserFavoriteManager
+    userFavoriteManager: UserFavoriteManager,
+    sessionService: SessionService
   ) {
     this.singleActions = endpointListHelper.endpointActions();
     const favoriteCell = createTableColumnFavorite(
       (row: EndpointModel) => userFavoriteManager.getFavoriteEndpointFromEntity(row)
     );
     this.columns.push(favoriteCell);
+    this.userEndpointsSubscription = sessionService.userEndpointsNotDisabled().subscribe(enabled => {
+      if (enabled){
+        this.columns.splice(4, 0,  {
+          columnId: 'creator',
+          headerCell: () => 'Creator',
+          cellComponent: TableCellEndpointCreatorComponent,
+          sort: {
+            type: 'sort',
+            orderKey: 'creator',
+            field: 'creator.name'
+          },
+          cellFlex: '2'
+        });
+      }
+    });
 
     this.dataSource = new EndpointsDataSource(
       this.store,
@@ -201,4 +220,8 @@ export class EndpointsListConfigService implements IListConfig<EndpointModel> {
       );
     }
   }
+
+  ngOnDestroy() {
+    this.userEndpointsSubscription.unsubscribe();
+  }
 }

src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-creator/table-cell-endpoint-creator.component.html

@@ -0,0 +1,3 @@
+<div>
+    {{ creator }}
+</div>

src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-creator/table-cell-endpoint-creator.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule } from '@stratosui/core';
+import { EndpointModel } from '@stratosui/store';
+
+import { TableCellEndpointCreatorComponent } from './table-cell-endpoint-creator.component';
+
+describe('TableCellEndpointCreatorComponent', () => {
+  let component: TableCellEndpointCreatorComponent;
+  let fixture: ComponentFixture<TableCellEndpointCreatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableCellEndpointCreatorComponent ],
+      imports: [
+        CoreModule
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableCellEndpointCreatorComponent);
+    component = fixture.componentInstance;
+    component.row = {
+      creator: {
+        name: 'dummy'
+      }
+    } as EndpointModel;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-creator/table-cell-endpoint-creator.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EndpointModel, entityCatalog } from '@stratosui/store';
+import { TableCellCustom } from '../../../list.types';
+
+@Component({
+  selector: 'app-table-cell-endpoint-creator',
+  templateUrl: './table-cell-endpoint-creator.component.html',
+  styleUrls: ['./table-cell-endpoint-creator.component.scss']
+})
+export class TableCellEndpointCreatorComponent extends TableCellCustom<EndpointModel> implements OnInit {
+
+  public creator = '';
+
+  @Input()
+  get row(): EndpointModel {
+    return super.row;
+  }
+  set row(row: EndpointModel) {
+    super.row = row;
+  }
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.creator = this.row.creator.name;
+  }
+
+}

src/frontend/packages/core/src/shared/shared.module.ts

@@ -119,6 +119,7 @@ import { LongRunningOperationsService } from './services/long-running-op.service
 import { MetricsRangeSelectorService } from './services/metrics-range-selector.service';
 import { SessionService } from './services/session.service';
 import { UserPermissionDirective } from './user-permission.directive';
+import { TableCellEndpointCreatorComponent } from './components/list/list-types/endpoint/table-cell-endpoint-creator/table-cell-endpoint-creator.component';
 
 
 @NgModule({
@@ -221,6 +222,7 @@ import { UserPermissionDirective } from './user-permission.directive';
     CardProgressOverlayComponent,
     MaxListMessageComponent,
     ProfileSettingsComponent,
+    TableCellEndpointCreatorComponent,
   ],
   exports: [
     ApplicationStateIconPipe,