From 46a8ea67896b82bb60dfef138401c91b221307f3 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Stephan=20M=C3=BCller?= <smueller@suse.com>
Date: Wed, 22 Aug 2018 08:45:08 +0200
Subject: [PATCH] mgr/dashboard: Use table actions component for OSDs
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Stephan Müller <smueller@suse.com>
---
 .../osd/osd-list/osd-list.component.html      | 34 +++------------
 .../osd/osd-list/osd-list.component.spec.ts   | 42 ++++++++++++++++++-
 .../osd/osd-list/osd-list.component.ts        | 15 +++++++
 .../table-actions.component.html              |  1 -
 .../table-actions.component.spec.ts           | 10 +++++
 5 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index 4bcec53b256..b0148ccb796 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -6,34 +6,12 @@
           [updateSelectionOnRefresh]="'never'">
   <div class="table-actions btn-toolbar"
        *ngIf="permission.update">
-    <div class="btn-group"
-         dropdown>
-      <button dropdownToggle
-              type="button"
-              class="btn btn-sm btn-primary dropdown-toggle tc_scrub_toggle"
-              [ngClass]="{disabled: !tableComponent.selection.hasSelection}">
-        <ng-container i18n>Perform Task </ng-container>
-        <span class="caret"></span>
-      </button>
-      <ul *dropdownMenu
-          class="dropdown-menu"
-          role="menu">
-        <li role="menuitem"
-            (click)="scrubAction(false)">
-          <a>
-            <i class="fa fa-fw fa-stethoscope"></i>
-            <ng-container i18n>Scrub</ng-container>
-          </a>
-        </li>
-        <li role="menuitem"
-            (click)="scrubAction(true)">
-          <a>
-            <i class="fa fa-fw fa-stethoscope"></i>
-            <ng-container i18n>Deep Scrub</ng-container>
-          </a>
-        </li>
-      </ul>
-    </div>
+    <cd-table-actions [permission]="permission"
+                      [selection]="selection"
+                      onlyDropDown="Perform Task"
+                      class="btn-group"
+                      [tableActions]="tableActions">
+    </cd-table-actions>
 
     <button class="btn btn-sm btn-default btn-label tc_configureCluster"
             type="button"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
index f5f5ce3e2d7..30dba9a77be 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
@@ -1,11 +1,13 @@
 import { HttpClientModule } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { TabsModule } from 'ngx-bootstrap/tabs';
 
-import { configureTestBed } from '../../../../../testing/unit-test-helper';
+import { configureTestBed, PermissionHelper } from '../../../../../testing/unit-test-helper';
 import { ComponentsModule } from '../../../../shared/components/components.module';
 import { DataTableModule } from '../../../../shared/datatable/datatable.module';
+import { TableActionsComponent } from '../../../../shared/datatable/table-actions/table-actions.component';
 import { Permissions } from '../../../../shared/models/permissions';
 import { DimlessPipe } from '../../../../shared/pipes/dimless.pipe';
 import { AuthStorageService } from '../../../../shared/services/auth-storage.service';
@@ -49,6 +51,44 @@ describe('OsdListComponent', () => {
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  describe('show table actions as defined', () => {
+    let tableActions: TableActionsComponent;
+    let scenario: { fn; empty; single };
+    let permissionHelper: PermissionHelper;
+
+    const getTableActionComponent = () => {
+      fixture.detectChanges();
+      return fixture.debugElement.query(By.directive(TableActionsComponent)).componentInstance;
+    };
+
+    beforeEach(() => {
+      permissionHelper = new PermissionHelper(component.permission, () =>
+        getTableActionComponent()
+      );
+      scenario = {
+        fn: () => tableActions.getCurrentButton(),
+        single: undefined,
+        empty: undefined
+      };
+      tableActions = permissionHelper.setPermissionsAndGetActions(1, 1, 1);
+    });
+
+    it('shows no action button', () => permissionHelper.testScenarios(scenario));
+
+    it('shows all actions', () => {
+      expect(tableActions.tableActions.length).toBe(2);
+      expect(tableActions.tableActions).toEqual(component.tableActions);
+    });
+
+    it(`shows 'Perform task' as drop down`, () => {
+      expect(
+        fixture.debugElement.query(By.directive(TableActionsComponent)).query(By.css('button'))
+          .nativeElement.textContent
+      ).toBe('Perform Task');
+    });
+  });
 });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index 51876fdbdd4..41eeca1b292 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -5,6 +5,7 @@ import { BsModalRef, BsModalService } from 'ngx-bootstrap';
 import { OsdService } from '../../../../shared/api/osd.service';
 import { TableComponent } from '../../../../shared/datatable/table/table.component';
 import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
+import { CdTableAction } from '../../../../shared/models/cd-table-action';
 import { CdTableColumn } from '../../../../shared/models/cd-table-column';
 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
 import { Permission } from '../../../../shared/models/permissions';
@@ -27,6 +28,7 @@ export class OsdListComponent implements OnInit {
   tableComponent: TableComponent;
 
   permission: Permission;
+  tableActions: CdTableAction[];
   bsModalRef: BsModalRef;
   osds = [];
   columns: CdTableColumn[];
@@ -39,6 +41,19 @@ export class OsdListComponent implements OnInit {
     private modalService: BsModalService
   ) {
     this.permission = this.authStorageService.getPermissions().osd;
+    const scrubAction: CdTableAction = {
+      permission: 'update',
+      icon: 'fa-stethoscope',
+      click: () => this.scrubAction(false),
+      name: 'Scrub'
+    };
+    const deleteAction: CdTableAction = {
+      permission: 'update',
+      icon: 'fa-cog',
+      click: () => this.scrubAction(true),
+      name: 'Deep Scrub'
+    };
+    this.tableActions = [scrubAction, deleteAction];
   }
 
   ngOnInit() {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
index 62d0203d007..39d7dcb3e5e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
@@ -12,7 +12,6 @@
   <button type="button"
           dropdownToggle
           *ngIf="showDropDownActions()"
-          [ngClass]="{'disabled': onlyDropDown && disableSelectionAction(onlyDropDown)}"
           class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split">
     <ng-container *ngIf="onlyDropDown" i18n>{{ onlyDropDown }}</ng-container>
     <span class="caret"></span>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
index 0e8f2d17d98..970bb421ec1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
@@ -268,4 +268,14 @@ describe('TableActionsComponent', () => {
       });
     });
   });
+
+  describe('with drop down only', () => {
+    beforeEach(() => {
+      component.onlyDropDown = 'displayMe';
+    });
+
+    it('should not return any button with getCurrentButton', () => {
+      expect(component.getCurrentButton()).toBeFalsy();
+    });
+  });
 });
-- 
2.39.5