[YUNIKORN-2679] Add copy URL button on the allocations panel (#193)

Implemented copy button on allocations sidebar view that copies the hot-link to that view. Closes: #193 Signed-off-by: Yu-Lin Chen <chenyulin0719@apache.org>
apache · Jun 24, 2024 · c86fb1b · c86fb1b
1 parent f5df16e
commit c86fb1b
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 36 deletions.
diff --git a/src/app/components/apps-view/apps-view.component.html b/src/app/components/apps-view/apps-view.component.html
@@ -145,6 +145,7 @@
       <mat-drawer-content>
         <div class="header">
           <span>{{ selectedRow?.applicationId }} ({{ selectedRow?.allocations?.length }} allocations)</span>
+          <span class="far fa-clipboard copy-btn" (click)="copyLinkToClipboard()" matTooltip="Click to copy the URL to this view" matTooltipShowDelay="500"></span>
           <span class="far fa-solid fa-xmark close-btn" (click)="closeDrawer()"></span>
         </div>
         <div class="content">
@@ -162,7 +163,8 @@
               </ng-container>
 
               <ng-container *ngIf="columnDef.colId === 'resource'; else renderNext_3">
-                <mat-cell *matCellDef="let element" class="allocations-data" [style.flex]="columnDef?.colWidth || 1" >
+                <mat-cell *matCellDef="let element" class="allocations-data" [style.flex]="columnDef?.colWidth || 1" matTooltip="
+                          {{element[columnDef.colId]}}" matTooltipShowDelay="500" >
                   <ng-container *ngIf="columnDef.colFormatter; else showAllocRowData;">
                     <ng-container *ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
                       <ul class="mat-res-ul">
@@ -188,7 +190,7 @@
                           [class]="allocationsToggle ? '' : 'ellipsis'"
                           [style.flex]="columnDef?.colWidth || 1"
                           [style.min-height]="allocationsToggle ? '96px' : 'unset'"
-                          [title]="element[columnDef.colId]"
+                          matTooltip="{{element[columnDef.colId]}}" matTooltipShowDelay="500"
                 >{{ element[columnDef.colId] || 'n/a' }}</mat-cell>
               </ng-template>
             </ng-container>

diff --git a/src/app/components/apps-view/apps-view.component.scss b/src/app/components/apps-view/apps-view.component.scss
@@ -189,6 +189,11 @@
       color: #f44336;
     }
   }
+  .copy-btn {
+    font-size: 1em;
+    cursor: pointer;
+    padding-left: 5px;
+  }
   .header {
     margin: 20px;
     font-weight: 100;

diff --git a/src/app/components/apps-view/apps-view.component.spec.ts b/src/app/components/apps-view/apps-view.component.spec.ts
@@ -16,26 +16,27 @@
  * limitations under the License.
  */
 
-import {DebugElement} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {FormsModule} from '@angular/forms';
-import {MatDividerModule} from '@angular/material/divider';
-import {MatInputModule} from '@angular/material/input';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatSelectModule} from '@angular/material/select';
-import {MatSortModule} from '@angular/material/sort';
-import {MatTableModule} from '@angular/material/table';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {By, HAMMER_LOADER} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {RouterTestingModule} from '@angular/router/testing';
-import {AppInfo} from '@app/models/app-info.model';
-import {SchedulerService} from '@app/services/scheduler/scheduler.service';
-import {MockNgxSpinnerService, MockSchedulerService} from '@app/testing/mocks';
-import {NgxSpinnerService} from 'ngx-spinner';
-import {of} from 'rxjs';
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { By, HAMMER_LOADER } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppInfo } from '@app/models/app-info.model';
+import { SchedulerService } from '@app/services/scheduler/scheduler.service';
+import { MockNgxSpinnerService, MockSchedulerService } from '@app/testing/mocks';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { of } from 'rxjs';
 
-import {AppsViewComponent} from './apps-view.component';
+import { AppsViewComponent } from './apps-view.component';
 
 describe('AppsViewComponent', () => {
   let component: AppsViewComponent;
@@ -55,6 +56,7 @@ describe('AppsViewComponent', () => {
         MatInputModule,
         MatTooltipModule,
         MatSelectModule,
+        MatSidenavModule,
       ],
       providers: [
         { provide: SchedulerService, useValue: MockSchedulerService },
@@ -75,23 +77,35 @@ describe('AppsViewComponent', () => {
     let service: SchedulerService;
     service = TestBed.inject(SchedulerService);
     let appInfo = new AppInfo(
-        'app1',
-        "Memory: 500.0 KB, CPU: 10, pods: 1",
-        "Memory: 0.0 bytes, CPU: 0, pods: n/a",
-        '',
-        1,
-        2,
-        [],
-        2,
-        'RUNNING',
-        []
+      'app1',
+      'Memory: 500.0 KB, CPU: 10, pods: 1',
+      'Memory: 0.0 bytes, CPU: 0, pods: n/a',
+      '',
+      1,
+      2,
+      [],
+      2,
+      'RUNNING',
+      []
     );
     spyOn(service, 'fetchAppList').and.returnValue(of([appInfo]));
-    component.fetchAppListForPartitionAndQueue("default", "root");
+    component.fetchAppListForPartitionAndQueue('default', 'root');
     component.toggle();
     fixture.detectChanges();
     const debugEl: DebugElement = fixture.debugElement;
-    expect(debugEl.query(By.css('mat-cell.mat-column-usedResource')).nativeElement.innerText).toContain('Memory: 500.0 KB\nCPU: 10\npods: 1');
-    expect(debugEl.query(By.css('mat-cell.mat-column-pendingResource')).nativeElement.innerText).toContain('Memory: 0.0 bytes\nCPU: 0\npods: n/a');
+    expect(
+      debugEl.query(By.css('mat-cell.mat-column-usedResource')).nativeElement.innerText
+    ).toContain('Memory: 500.0 KB\nCPU: 10\npods: 1');
+    expect(
+      debugEl.query(By.css('mat-cell.mat-column-pendingResource')).nativeElement.innerText
+    ).toContain('Memory: 0.0 bytes\nCPU: 0\npods: n/a');
+  });
+
+  it('should copy the allocations URL to clipboard', () => {
+    const debugEl: DebugElement = fixture.debugElement;
+    const copyButton = debugEl.query(By.css('.copy-btn'));
+    const copyButtonSpy = spyOn(component, 'copyLinkToClipboard');
+    copyButton.triggerEventHandler('click', null);
+    expect(copyButtonSpy).toHaveBeenCalled();
   });
 });
diff --git a/src/app/components/apps-view/apps-view.component.ts b/src/app/components/apps-view/apps-view.component.ts
@@ -404,4 +404,12 @@ export class AppsViewComponent implements OnInit {
     this.matDrawer.close();
     this.removeRowSelection();
   }
+
+  copyLinkToClipboard() {
+    const url = window.location.href.split('?')[0];
+    const copyString = `${url}?partition=${this.partitionSelected}&queue=${this.leafQueueSelected}&applicationId=${this?.selectedRow?.applicationId}`;
+    navigator.clipboard
+      .writeText(copyString)
+      .catch((error) => console.error('Writing to the clipboard is not allowed. ', error));
+  }
 }
diff --git a/src/app/components/licenses-modal/licenses-modal.component.spec.ts b/src/app/components/licenses-modal/licenses-modal.component.spec.ts
@@ -19,7 +19,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LicensesModalComponent } from './licenses-modal.component';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('LicensesModalComponent', () => {
@@ -30,7 +30,7 @@ describe('LicensesModalComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [LicensesModalComponent],
       providers: [{ provide: MatDialogRef, useValue: {} }],
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, MatDialogModule],
     }).compileComponents();
     fixture = TestBed.createComponent(LicensesModalComponent);
     component = fixture.componentInstance;