Merge pull request #985 from aneoconsulting/show-component-better-ref…

…resh

chore: show component is now refreshed with subjects

src/app/components/show-action-area.component.html

@@ -4,7 +4,7 @@
     {{element.name}}
   </a>
 
-  <button mat-flat-button *ngIf="element.action$ && !element.link" (click)="element.action$.next()" [disabled]="element.disabled" [color]="element.color" >
+  <button mat-flat-button *ngIf="element.action$ && !element.link" (click)="element.action$.next()" [disabled]="isDisabled[element.id]" [color]="element.color" >
     <mat-icon [fontIcon]="element.icon ?? ''" />
     {{element.name}}
   </button>

src/app/components/show-action-area.component.spec.ts

@@ -0,0 +1,82 @@
+import { Subject } from 'rxjs';
+import { ShowActionButton } from '@app/types/components/show';
+import { ShowActionAreaComponent } from './show-action-area.component';
+
+describe('ShowActionAreaComponent', () => {
+  let component: ShowActionAreaComponent;
+
+  const disableCancel = new Subject<boolean>();
+  const disableClose = new Subject<boolean>();
+
+  const actions: ShowActionButton[] = [
+    {
+      id: 'tasks',
+      name: 'See tasks',
+      icon: 'tasks',
+      link: '/tasks',
+      queryParams: {},
+    },
+    {
+      id: 'results',
+      name: 'See results',
+      icon: 'results',
+      link: '/results',
+      queryParams: {},
+    },
+    {
+      id: 'partitions',
+      name: 'See partitions',
+      icon: 'partitions',
+      link: '/partitions',
+      queryParams: {},
+    },
+    {
+      id: 'cancel',
+      name: 'Cancel Session',
+      icon: 'cancel',
+      action$: new Subject(),
+      disabled: disableCancel,
+      color: 'accent',
+      area: 'right'
+    },
+    {
+      id: 'close',
+      name: 'Close Session',
+      icon: 'close',
+      action$: new Subject(),
+      disabled: disableClose,
+      color: 'accent',
+      area: 'right'
+    },
+    {
+      id: 'delete',
+      name: 'Delete Session',
+      icon: 'delete',
+      action$: new Subject(),
+      color: 'accent',
+      area: 'right'
+    }
+  ];
+
+  beforeEach(() => {
+    component = new ShowActionAreaComponent();
+    component.actions = actions;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set actions', () => {
+    expect(component.actions).toEqual(actions);
+  });
+
+  it('should set isDisabled', () => {
+    disableCancel.next(true);
+    expect(component.isDisabled).toEqual({
+      cancel: true,
+      close: false
+    });
+  });
+
+});

src/app/components/show-action-area.component.ts

@@ -8,6 +8,11 @@ import { ShowActionButton } from '@app/types/components/show';
 @Component({
   selector: 'app-show-action-area',
   templateUrl: './show-action-area.component.html',
+  styles: [`
+  button {
+    margin-right: 3px;
+  }
+  `],
   standalone: true,
   imports: [
     NgIf,
@@ -18,5 +23,22 @@ import { ShowActionButton } from '@app/types/components/show';
   ]
 })
 export class ShowActionAreaComponent {
-  @Input({required: true}) actions: ShowActionButton[];
+
+  isDisabled: { [x: string]: boolean } = {};
+
+  private _actions: ShowActionButton[] = [];
+
+  get actions() {
+    return this._actions;
+  }
+
+  @Input({required: true}) set actions(entries : ShowActionButton[]) {
+    entries.filter(entry => entry.disabled !== undefined).forEach(entry => {
+      if (entry.disabled) {
+        this.isDisabled[entry.id] = false;
+        entry.disabled.subscribe(value => this.isDisabled[entry.id] = value);
+      }
+    });
+    this._actions = entries;
+  }
 }

src/app/components/show-actions.component.html

@@ -8,7 +8,7 @@
   <div class="smallSpace"></div>
 
   <button mat-flat-button color="primary" (click)="onRefreshClick()" matTooltip="Refresh data">
-    <mat-icon aria-hidden="true" [fontIcon]="getRefreshIcon()"></mat-icon>
+    <mat-icon aria-hidden="true" [fontIcon]="getRefreshIcon()"/>
     <span i18n>Refresh</span>
   </button>
 

src/app/components/show-actions.component.ts

@@ -5,7 +5,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 import { ShowActionButton } from '@app/types/components/show';
-import { DataRaw } from '@app/types/data';
 import { IconsService } from '@services/icons.service';
 import { ShowActionAreaComponent } from './show-action-area.component';
 
@@ -38,8 +37,6 @@ import { ShowActionAreaComponent } from './show-action-area.component';
 })
 export class ShowActionsComponent implements OnInit {
   @Input({ required: true }) actionsButton: ShowActionButton[];
-  @Input({ required: true }) data: DataRaw = {} as DataRaw;
-  @Input() id: string | null = null;
   @Output() refresh = new EventEmitter<never>();
 
   rightActions: ShowActionButton[];

src/app/components/show-card.component.html

@@ -0,0 +1,8 @@
+<mat-card>
+  <mat-card-content>
+    <mat-spinner *ngIf="!data" strokeWidth="4" diameter="40"/>
+    <ng-container *ngIf="data">
+      <app-show-card-content [data]="data" [statuses]="statuses"/>
+    </ng-container>
+  </mat-card-content>
+</mat-card>

src/app/components/show-card.component.spec.ts

@@ -0,0 +1,27 @@
+import { Subject } from 'rxjs';
+import { ResultRaw } from '@app/results/types';
+import { ShowCardComponent } from './show-card.component';
+
+describe('ShowCardComponent', () => {
+
+  let component: ShowCardComponent<ResultRaw>;
+
+  const spy = {
+    subscribe: jest.fn()
+  } as unknown as Subject<ResultRaw>;
+
+  beforeEach(() => {
+    component = new ShowCardComponent();
+    component.data$ = spy;
+    component.ngOnInit();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should subscribe to data$', () => {
+    expect(spy.subscribe).toHaveBeenCalled();
+  });
+
+});

src/app/components/show-card.component.ts

@@ -1,29 +1,20 @@
 import { JsonPipe, NgFor, NgIf } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Subject } from 'rxjs';
+import { DataRaw } from '@app/types/data';
 import { ShowCardContentComponent } from './show-card-content.component';
 
 @Component({
   selector: 'app-show-card',
-  template: `
-<mat-card>
-  <mat-card-content>
-    <mat-spinner *ngIf="!data" strokeWidth="4" diameter="40"></mat-spinner>
-    <ng-container *ngIf="data">
-      <app-show-card-content [data]="data" [statuses]="statuses"></app-show-card-content>
-    </ng-container>
-  </mat-card-content>
-</mat-card>
-  `,
+  templateUrl: 'show-card.component.html',
   styles: [`
 pre {
   margin-top: 0;
 }
   `],
   standalone: true,
-  providers: [
-  ],
   imports: [
     NgIf,
     NgFor,
@@ -33,7 +24,13 @@ pre {
     MatProgressSpinnerModule
   ]
 })
-export class ShowCardComponent<T extends object> {
-  @Input({ required: true }) data: T | null = null;
+export class ShowCardComponent<T extends DataRaw> implements OnInit {
+  @Input({ required: true }) data$: Subject<T>;
   @Input() statuses: Record<number, string> = [];
+
+  data: T | null = null;
+
+  ngOnInit(): void {
+    this.data$.subscribe(data => this.data = data);
+  }
 }

src/app/components/show-page.component.html

@@ -0,0 +1,11 @@
+<app-page-header [sharableURL]="sharableURL">
+  <ng-content></ng-content>
+  <span>{{ id }}</span> 
+  <button mat-icon-button [cdkCopyToClipboard]="id ?? ''" (cdkCopyToClipboardCopied)="onCopiedTaskId()">
+    <mat-icon aria-hidden="true" fontIcon="content_copy" />
+  </button>
+</app-page-header>
+
+<app-show-actions [actionsButton]="actionsButton" (refresh)="onRefresh()" />
+
+<app-show-card [data$]="data$" [statuses]="statuses" />

src/app/components/show-page.component.spec.ts

@@ -1,9 +1,10 @@
 import { TestBed } from '@angular/core/testing';
+import { DataRaw } from '@app/types/data';
 import { NotificationService } from '@services/notification.service';
 import { ShowPageComponent } from './show-page.component';
 
 describe('ShowPageComponent', () => {
-  let component: ShowPageComponent;
+  let component: ShowPageComponent<DataRaw>;
 
   const mockNotificationService = {
     success: jest.fn()

src/app/components/show-page.component.ts

@@ -4,6 +4,7 @@ import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { Subject } from 'rxjs';
 import { ShowActionButton } from '@app/types/components/show';
 import { DataRaw } from '@app/types/data';
 import { NotificationService } from '@services/notification.service';
@@ -13,21 +14,7 @@ import { ShowCardComponent } from './show-card.component';
 
 @Component({
   selector: 'app-show-page',
-  template: `
-<app-page-header [sharableURL]="sharableURL">
-  <ng-content> </ng-content>
-  <span>{{ id }}</span> 
-  <button mat-icon-button [cdkCopyToClipboard]="id ?? ''" (cdkCopyToClipboardCopied)="onCopiedTaskId()">
-    <mat-icon aria-hidden="true" fontIcon="content_copy" />
-  </button>
-</app-page-header>
-
-<ng-container *ngIf="data">
-  <app-show-actions [id]="id" [actionsButton]="actionsButton" [data]="data" (refresh)="onRefresh()" />
-</ng-container>
-
-<app-show-card [data]="data" [statuses]="statuses" />
-  `,
+  templateUrl: './show-page.component.html',
   styles: [`
 span {
   font-style: italic;
@@ -49,9 +36,9 @@ span {
     MatButtonModule
   ]
 })
-export class ShowPageComponent {
+export class ShowPageComponent<T extends DataRaw>{
   @Input({ required: true }) id: string | null = null;
-  @Input({ required: true }) data: DataRaw | null = null;
+  @Input({ required: true }) data$: Subject<T>;
   @Input() statuses: Record<number, string> = [];
   @Input() sharableURL: string | null = null;
   @Input({ required: true }) actionsButton: ShowActionButton[];

src/app/partitions/show.component.ts

@@ -15,13 +15,12 @@ import { TableService } from '@services/table.service';
 import { UtilsService } from '@services/utils.service';
 import { PartitionsFiltersService } from './services/partitions-filters.service';
 import { PartitionsGrpcService } from './services/partitions-grpc.service';
-import { PartitionsIndexService } from './services/partitions-index.service';
 import { PartitionRaw } from './types';
 
 @Component({
   selector: 'app-partitions-show',
   template: `
-<app-show-page [id]="data?.id ?? ''" [data]="data" [sharableURL]="sharableURL" [actionsButton]="actionButtons" (refresh)="onRefresh()">
+<app-show-page [id]="data?.id ?? ''" [data$]="data$" [sharableURL]="sharableURL" [actionsButton]="actionButtons" (refresh)="onRefresh()">
   <mat-icon matListItemIcon aria-hidden="true" [fontIcon]="getPageIcon('partitions')"></mat-icon>
   <span i18n="Page title">Partition</span>
 </app-show-page>
@@ -34,7 +33,6 @@ import { PartitionRaw } from './types';
     ShareUrlService,
     QueryParamsService,
     PartitionsGrpcService,
-    PartitionsIndexService,
     PartitionsFiltersService,
     TableService,
     TableURLService,
@@ -89,6 +87,7 @@ export class ShowComponent extends AppShowComponent<PartitionRaw, PartitionsGrpc
         this.data = data;
         this._filtersService.createFilterQueryParams(this.actionButtons, 'sessions', this.partitionsKey, this.data.id);
         this._filtersService.createFilterQueryParams(this.actionButtons, 'tasks', this.tasksKey, this.data.id);
+        this.data$.next(data);
       }
     });
 

src/app/results/show.component.ts

@@ -13,14 +13,13 @@ import { TableService } from '@services/table.service';
 import { UtilsService } from '@services/utils.service';
 import { ResultsFiltersService } from './services/results-filters.service';
 import { ResultsGrpcService } from './services/results-grpc.service';
-import { ResultsIndexService } from './services/results-index.service';
 import { ResultsStatusesService } from './services/results-statuses.service';import { ResultRaw } from './types';
 
 
 @Component({
   selector: 'app-result-show',
   template: `
-<app-show-page [id]="data?.resultId ?? ''" [data]="data" [sharableURL]="sharableURL" [statuses]="statuses" [actionsButton]="actionButtons" (refresh)="onRefresh()">
+<app-show-page [id]="data?.resultId ?? ''" [data$]="data$" [sharableURL]="sharableURL" [statuses]="statuses" [actionsButton]="actionButtons" (refresh)="onRefresh()">
   <mat-icon matListItemIcon aria-hidden="true" [fontIcon]="getPageIcon('results')"></mat-icon>
   <span i18n="Page title"> Result </span>
 </app-show-page>
@@ -34,7 +33,6 @@ import { ResultsStatusesService } from './services/results-statuses.service';imp
     QueryParamsService,
     ResultsGrpcService,
     ResultsStatusesService,
-    ResultsIndexService,
     TableService,
     TableStorageService,
     TableURLService,
@@ -85,6 +83,7 @@ export class ShowComponent extends AppShowComponent<ResultRaw, ResultsGrpcServic
         this.data = data;
         this.setLink('session', 'sessions', data.sessionId);
         this.setLink('task', 'tasks', data.ownerTaskId);
+        this.data$.next(data);
       }
     });
 

src/app/sessions/services/sessions-statuses.service.ts

@@ -19,7 +19,7 @@ export class SessionsStatusesService implements StatusesServiceI<SessionStatus>
   }
 
   canCancel(status: SessionStatus) {
-    return status !== SessionStatus.SESSION_STATUS_RUNNING;
+    return status === SessionStatus.SESSION_STATUS_RUNNING;
   }
 
   canClose(status: SessionStatus) {