Show per endpoint type actions in endpoints table

- use for helm sync
SUSE · nwmac · Oct 2, 2020 · Jul 28, 2020 · Aug 7, 2020 · Aug 7, 2020
commit fd2ee0fdd7fa2abfd59b85bb1ec9bb66e4f7a43f
diff --git a/...e/src/shared/components/list/list-cards/meta-card/meta-card-base/meta-card.component.html b/...e/src/shared/components/list/list-cards/meta-card/meta-card-base/meta-card.component.html
@@ -1,5 +1,5 @@
-<mat-card class="meta-card {{status$ && statusBackground? (status$ | async): '' }}" [ngClass]="{'meta-card-pointer': clickAction}"
-  (click)="clickAction ? clickAction() : null">
+<mat-card class="meta-card {{status$ && statusBackground? (status$ | async): '' }}"
+  [ngClass]="{'meta-card-pointer': clickAction}" (click)="clickAction ? clickAction() : null">
   <div *ngIf="isDeleting$ | async" class="meta-card__deleting-overlay">
     <div class="meta-card__deleting-overlay-inner">
       <div class="meta-card__deleting-text">Deleting</div>
@@ -9,7 +9,8 @@
   <app-card-status *ngIf="status$" [status$]="status$">
   </app-card-status>
   <mat-card-header class="meta-card__header" *ngIf="title">
-    <div [ngClass]="statusIconByTitle ? 'meta-card__header-container__title--with-icon' : 'meta-card__header-container__title'">
+    <div
+      [ngClass]="statusIconByTitle ? 'meta-card__header-container__title--with-icon' : 'meta-card__header-container__title'">
       <div
         [ngClass]="statusIconByTitle ? 'meta-card__header-container__title__content--with-icon' : 'meta-card__header-container__title__content'">
         <ng-container *ngTemplateOutlet="title.content"></ng-container>
@@ -18,20 +19,24 @@
         <ng-container *ngTemplateOutlet="statusIconTmple"></ng-container>
       </div>
     </div>
-    <app-entity-favorite-star [confirmRemoval]="confirmFavoriteRemoval" class="meta-card__favorite" *ngIf="favorite" [favorite]="favorite">
+    <app-entity-favorite-star [confirmRemoval]="confirmFavoriteRemoval" class="meta-card__favorite" *ngIf="favorite"
+      [favorite]="favorite">
     </app-entity-favorite-star>
     <div class="meta-card__header-container__actions" *ngIf="actionMenu && (showMenu$ | async)" appClickStopPropagation>
-      <button mat-icon-button class="meta-card__header__button" color="basic" [matMenuTriggerFor]="menu" [disabled]="isDeleting$ | async">
+      <button mat-icon-button class="meta-card__header__button" color="basic" [matMenuTriggerFor]="menu"
+        [disabled]="isDeleting$ | async">
         <mat-icon>more_vert</mat-icon>
       </button>
-      <mat-menu class="meta-card__header__popup" #menu="matMenu" xPosition="before" >
+      <mat-menu class="meta-card__header__popup" #menu="matMenu" xPosition="before">
         <ng-container *ngFor="let menuItem of actionMenu">
-          <button class="meta-card__header__popup__btn" [disabled]="menuItem.disabled | async" mat-menu-item *ngIf="menuItem.can | async"
-            (click)="menuItem.action()">
-            <mat-icon *ngIf="menuItem.icon">{{menuItem.icon}}</mat-icon>
-            <span>{{menuItem.label}}</span>
-          </button>
-          <div *ngIf="menuItem.separator" class="meta-card__header__popup-separator"></div>
+          <ng-container *ngIf="menuItem.can | async">
+            <button *ngIf="!menuItem.separator" class="meta-card__header__popup__btn"
+              [disabled]="menuItem.disabled | async" mat-menu-item (click)="menuItem.action()">
+              <mat-icon *ngIf="menuItem.icon">{{menuItem.icon}}</mat-icon>
+              <span>{{menuItem.label}}</span>
+            </button>
+            <div *ngIf="menuItem.separator" class="meta-card__header__popup-separator"></div>
+          </ng-container>
         </ng-container>
       </mat-menu>
     </div>
@@ -48,6 +53,7 @@
   </mat-card-content>
 </mat-card>
 <ng-template #statusIconTmple>
-  <app-application-state-icon *ngIf="statusIcon && status$" [status]="status$ | async" matTooltip="{{statusIconTooltip}}">
+  <app-application-state-icon *ngIf="statusIcon && status$" [status]="status$ | async"
+    matTooltip="{{statusIconTooltip}}">
   </app-application-state-icon>
 </ng-template>
diff --git a/...ore/src/shared/components/list/list-cards/meta-card/meta-card-base/meta-card.component.ts b/...ore/src/shared/components/list/list-cards/meta-card/meta-card-base/meta-card.component.ts
@@ -1,5 +1,5 @@
 import { Component, ContentChild, ContentChildren, Input, OnDestroy, QueryList } from '@angular/core';
-import { combineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
+import { combineLatest, Observable, of as observableOf, of, Subscription } from 'rxjs';
 import { first, map, tap } from 'rxjs/operators';
 
 import { FavoritesConfigMapper } from '../../../../../../../../store/src/favorite-config-mapper';
@@ -13,7 +13,7 @@ import { MetaCardItemComponent } from '../meta-card-item/meta-card-item.componen
 import { MetaCardTitleComponent } from '../meta-card-title/meta-card-title.component';
 
 
-export function createMetaCardMenuItemSeparator() {
+export function createMetaCardMenuItemSeparator(): MenuItem {
   return {
     label: '-',
     separator: true,
@@ -86,15 +86,18 @@ export class MetaCardComponent implements OnDestroy {
       this.pActionMenu = actionMenu.map(menuItem => {
         if (!menuItem.can) {
           menuItem.separator = menuItem.label === '-';
-          menuItem.can = observableOf(!menuItem.separator);
+          menuItem.can = of(true);
         }
         if (!menuItem.disabled) {
           menuItem.disabled = observableOf(false);
         }
         return menuItem;
       });
 
-      this.showMenu$ = combineLatest(actionMenu.map(menuItem => menuItem.can)).pipe(
+      const nonSeparators = actionMenu
+        .filter(menuItem => !menuItem.separator)
+        .map(menuItem => menuItem.can);
+      this.showMenu$ = combineLatest(nonSeparators).pipe(
         map(cans => cans.some(can => can))
       );
     }

diff --git a/...e/src/shared/components/list/list-types/endpoint/endpoint-card/endpoint-card.component.ts b/...e/src/shared/components/list/list-types/endpoint/endpoint-card/endpoint-card.component.ts
@@ -93,13 +93,22 @@ export class EndpointCardComponent extends CardCell<EndpointModel> implements On
   @Input('dataSource')
   set dataSource(ds: BaseEndpointsDataSource) {
     this.pDs = ds;
+
+    // TODO: RC need row with endpoint type to create custom actions. can do here, what about list??
+
     // Don't show card menu if the ds only provides a single endpoint type (for instance the cf endpoint page)
     if (ds && !ds.dsEndpointType && !this.cardMenu) {
-      this.cardMenu = this.endpointListHelper.endpointActions().map(endpointAction => ({
-        label: endpointAction.label,
-        action: () => endpointAction.action(this.pRow),
-        can: endpointAction.createVisible(this.rowObs)
-      }));
+      const endpointActions = this.endpointListHelper.endpointActions(true);
+
+      this.cardMenu = endpointActions.map(endpointAction => {
+        const separator = endpointAction.label === '-';
+        return {
+          label: endpointAction.label,
+          action: () => endpointAction.action(this.pRow),
+          can: endpointAction.createVisible ? endpointAction.createVisible(this.rowObs) : null,
+          separator
+        };
+      });
 
       // Add a copy address to clipboard
       this.cardMenu.push(createMetaCardMenuItemSeparator());
@@ -110,6 +119,7 @@ export class EndpointCardComponent extends CardCell<EndpointModel> implements On
       });
     }
 
+
     this.updateCardStatus();
   }
   get dataSource() {

diff --git a/...end/packages/core/src/shared/components/list/list-types/endpoint/endpoint-list.helpers.ts b/...end/packages/core/src/shared/components/list/list-types/endpoint/endpoint-list.helpers.ts
@@ -1,8 +1,8 @@
 import { ComponentFactoryResolver, ComponentRef, Injectable, ViewContainerRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
-import { combineLatest, Observable } from 'rxjs';
-import { map, pairwise } from 'rxjs/operators';
+import { combineLatest, Observable, of } from 'rxjs';
+import { map, pairwise, tap } from 'rxjs/operators';
 
 import { RouterNav } from '../../../../../../../store/src/actions/router.actions';
 import { AppState } from '../../../../../../../store/src/app-state';
@@ -19,6 +19,7 @@ import {
 import { SnackBarService } from '../../../../services/snackbar.service';
 import { ConfirmationDialogConfig } from '../../../confirmation-dialog.config';
 import { ConfirmationDialogService } from '../../../confirmation-dialog.service';
+import { createMetaCardMenuItemSeparator } from '../../list-cards/meta-card/meta-card-base/meta-card.component';
 import { IListAction } from '../../list.component.types';
 import { TableCellCustom } from '../../list.types';
 
@@ -37,6 +38,27 @@ function isEndpointListDetailsComponent(obj: any): EndpointListDetailsComponent
   return obj ? obj.isEndpointListDetailsComponent ? obj as EndpointListDetailsComponent : null : null;
 }
 
+function createCustomActionSeparatorVisibility(
+  customActions: IListAction<EndpointModel>[]
+): (row$: Observable<EndpointModel>) => Observable<boolean> {
+  const createVisiblesFns = customActions
+    .map(action => action.createVisible)
+    .filter(createVisible => !!createVisible);
+  if (createVisiblesFns.length === 0) {
+    return () => of(false);
+  } else {
+    return (row$: Observable<EndpointModel>) => {
+      const createVisibles = createVisiblesFns.map(createVisible => createVisible(row$));
+      return combineLatest(createVisibles).pipe(
+        map(allRes => allRes.some(res => res)),
+        tap(console.log)
+      );
+    };
+  }
+}
+
+// TODO: RC add check to see if helm hub is already registered... warn against it
+
 @Injectable()
 export class EndpointListHelper {
   constructor(
@@ -48,7 +70,23 @@ export class EndpointListHelper {
     private snackBarService: SnackBarService,
   ) { }
 
-  endpointActions(): IListAction<EndpointModel>[] {
+  endpointActions(includeSeparators = false): IListAction<EndpointModel>[] {
+    // Add any additional actions that are per endpoint type (not sub type) 
+    const customActions = entityCatalog.getAllBaseEndpointTypes()
+      .map(endpoint => endpoint.definition.endpointListActions)
+      .filter(endpointListActions => !!endpointListActions)
+      .map(endpointListActions => endpointListActions(this.store))
+      .reduce((res, actions) => res.concat(actions), []);
+
+    if (includeSeparators && customActions.length) {
+      // Only show the separator if we have custom actions to separate up AND at least one is visible
+      const createVisibleFn = createCustomActionSeparatorVisibility(customActions);
+      customActions.splice(0, 0, {
+        ...createMetaCardMenuItemSeparator(),
+        createVisible: createVisibleFn
+      });
+    }
+
     return [
       {
         action: (item) => {
@@ -126,7 +164,8 @@ export class EndpointListHelper {
         label: 'Edit endpoint',
         description: 'Edit the endpoint',
         createVisible: () => this.currentUserPermissionsService.can(StratosCurrentUserPermissions.ENDPOINT_REGISTER)
-      }
+      },
+      ...customActions
     ];
   }
 

diff --git a/src/frontend/packages/store/src/entity-catalog/entity-catalog.ts b/src/frontend/packages/store/src/entity-catalog/entity-catalog.ts
@@ -176,7 +176,7 @@ class EntityCatalog {
     return Array.from(this.endpoints.values());
   }
 
-  public getAllEndpointTypes(techPreviewEnabled = false) {
+  public getAllEndpointTypes(techPreviewEnabled = false): StratosCatalogEndpointEntity[] {
     const baseEndpoints = Array.from(this.endpoints.values())
       .filter(item => !item.definition.techPreview || item.definition.techPreview && techPreviewEnabled);
     return baseEndpoints.reduce((allEndpoints, baseEndpoint) => {

diff --git a/src/frontend/packages/store/src/entity-catalog/entity-catalog.types.ts b/src/frontend/packages/store/src/entity-catalog/entity-catalog.types.ts
@@ -1,7 +1,8 @@
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
-import { GeneralEntityAppState } from '../app-state';
+import { IListAction } from '../../../core/src/shared/components/list/list.component.types';
+import { AppState, GeneralEntityAppState } from '../app-state';
 import {
   ApiErrorMessageHandler,
   EntitiesFetchHandler,
@@ -125,7 +126,7 @@ export interface IStratosEndpointDefinition<T = EntityCatalogSchemas | EntitySch
   readonly techPreview?: boolean;
   readonly urlValidationRegexString?: string;
   readonly authTypes: EndpointAuthTypeConfig[];
-  readonly subTypes?: Omit<IStratosEndpointDefinition, 'schema' | 'subTypes'>[];
+  readonly subTypes?: Omit<IStratosEndpointDefinition, 'schema' | 'subTypes' | 'endpointListActions'>[];
 
   /**
    * Allows an entity to manipulate the data that is returned from an api request before it makes it into the store.
@@ -146,11 +147,12 @@ export interface IStratosEndpointDefinition<T = EntityCatalogSchemas | EntitySch
   /**
    * Allows the endpoint to fetch user roles, for example when the user loads Stratos or connects an endpoint of this type
    */
-  readonly userRolesFetch?: EntityUserRolesFetch
+  readonly userRolesFetch?: EntityUserRolesFetch;
   /**
    * Allows the user roles to be stored, updated and removed in the current user permissions section of the store
    */
-  readonly userRolesReducer?: EntityUserRolesReducer
+  readonly userRolesReducer?: EntityUserRolesReducer;
+  readonly endpointListActions?: (store: Store<AppState>) => IListAction<EndpointModel>[]
 }
 
 export interface StratosEndpointExtensionDefinition extends Omit<IStratosEndpointDefinition, 'schema'> { }

diff --git a/src/frontend/packages/suse-extensions/src/custom/helm/helm-entity-generator.ts b/src/frontend/packages/suse-extensions/src/custom/helm/helm-entity-generator.ts
@@ -1,9 +1,16 @@
+import { Store } from '@ngrx/store';
+import { of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { IListAction } from '../../../../core/src/shared/components/list/list.component.types';
+import { AppState } from '../../../../store/src/app-state';
 import {
   StratosBaseCatalogEntity,
   StratosCatalogEndpointEntity,
   StratosCatalogEntity,
 } from '../../../../store/src/entity-catalog/entity-catalog-entity/entity-catalog-entity';
 import { StratosEndpointExtensionDefinition } from '../../../../store/src/entity-catalog/entity-catalog.types';
+import { EndpointModel } from '../../../../store/src/types/endpoint.types';
 import { IFavoriteMetadata } from '../../../../store/src/types/user-favorites.types';
 import { helmEntityCatalog } from './helm-entity-catalog';
 import {
@@ -39,6 +46,17 @@ export function generateHelmEntities(): StratosBaseCatalogEntity[] {
     unConnectable: true,
     techPreview: false,
     authTypes: [],
+    endpointListActions: (store: Store<AppState>): IListAction<EndpointModel>[] => {
+      return [{
+        action: (item: EndpointModel) => helmEntityCatalog.chart.api.synchronise(item),
+        label: 'Synchronize',
+        description: '',
+        createVisible: row => row.pipe(
+          map(item => item.cnsi_type === HELM_ENDPOINT_TYPE && !item.sub_type)
+        ),
+        createEnabled: row => of(true)
+      }]
+    },
     subTypes: [
       {
         type: HELM_HUB_ENDPOINT_TYPE,

diff --git a/src/frontend/packages/suse-extensions/src/custom/helm/store/helm.action-builders.ts b/src/frontend/packages/suse-extensions/src/custom/helm/store/helm.action-builders.ts
@@ -1,17 +1,20 @@
 import { OrchestratedActionBuilders } from '../../../../../store/src/entity-catalog/action-orchestrator/action-orchestrator';
-import { GetHelmVersions, GetMonocularCharts, HelmInstall } from './helm.actions';
+import { EndpointModel } from '../../../../../store/src/types/endpoint.types';
+import { GetHelmVersions, GetMonocularCharts, HelmInstall, HelmSynchronise } from './helm.actions';
 import { HelmInstallValues } from './helm.types';
 
 export interface HelmChartActionBuilders extends OrchestratedActionBuilders {
   getMultiple: () => GetMonocularCharts,
   // Helm install added to chart action builder and not helm release/workload to ensure action & effect are available in this module
   // (others may not have loaded)
-  install: (values: HelmInstallValues) => HelmInstall
+  install: (values: HelmInstallValues) => HelmInstall,
+  synchronise: (endpoint: EndpointModel) => HelmSynchronise
 }
 
 export const helmChartActionBuilders: HelmChartActionBuilders = {
   getMultiple: () => new GetMonocularCharts(),
-  install: (values: HelmInstallValues) => new HelmInstall(values)
+  install: (values: HelmInstallValues) => new HelmInstall(values),
+  synchronise: (endpoint: EndpointModel) => new HelmSynchronise(endpoint)
 }
 
 export interface HelmVersionActionBuilders extends OrchestratedActionBuilders {

diff --git a/src/frontend/packages/suse-extensions/src/custom/helm/store/helm.actions.ts b/src/frontend/packages/suse-extensions/src/custom/helm/store/helm.actions.ts
@@ -1,3 +1,6 @@
+import { Action } from '@ngrx/store';
+
+import { EndpointModel } from '../../../../../store/src/types/endpoint.types';
 import { PaginatedAction } from '../../../../../store/src/types/pagination.types';
 import { EntityRequestAction } from '../../../../../store/src/types/request.types';
 import {
@@ -20,6 +23,8 @@ export const HELM_INSTALL = '[Helm] Install';
 export const HELM_INSTALL_SUCCESS = '[Helm] Install Success';
 export const HELM_INSTALL_FAILURE = '[Helm] Install Failure';
 
+export const HELM_SYNCHRONISE = '[Helm] Synchronise';
+
 export interface MonocularPaginationAction extends PaginatedAction, EntityRequestAction { }
 
 export class GetMonocularCharts implements MonocularPaginationAction {
@@ -43,6 +48,11 @@ export class GetMonocularCharts implements MonocularPaginationAction {
   flattenPagination = true;
 }
 
+export class HelmSynchronise implements Action {
+  type = HELM_SYNCHRONISE;
+  constructor(public endpoint: EndpointModel) { }
+}
+
 export class HelmInstall implements EntityRequestAction {
   type = HELM_INSTALL;
   endpointType = HELM_ENDPOINT_TYPE;