From 3261c4f12017064d5ab3863b0af0884c72c8c551 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Stephan=20M=C3=BCller?= <smueller@suse.com>
Date: Wed, 24 Oct 2018 16:02:24 +0200
Subject: [PATCH] mgr/dashboard: Show info button for crush rules in pool form
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Stephan Müller <smueller@suse.com>
---
 .../app/ceph/pool/pool-form/pool-form-data.ts |  1 +
 .../pool/pool-form/pool-form.component.html   | 75 ++++++++++++-------
 .../pool-form/pool-form.component.spec.ts     | 26 +++++++
 3 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form-data.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form-data.ts
index 971aece1413..c87f2c059e2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form-data.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form-data.ts
@@ -7,6 +7,7 @@ import { Pool } from '../pool';
 export class PoolFormData {
   poolTypes = ['erasure', 'replicated'];
   erasureInfo = false;
+  crushInfo = false;
   applications = {
     selected: [],
     available: [
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index fe04c437fe1..4d99d8e84c1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -138,42 +138,59 @@
           </div>
 
           <!-- Crush ruleset selection -->
-          <ng-template #crushSteps>
-            <ng-container *ngIf="form.getValue('crushRule')">
-              <div class="crush-rule-steps">
-                <ol>
-                  <li *ngFor="let step of form.get('crushRule').value.steps">
-                    {{ describeCrushStep(step) }}
-                  </li>
-                </ol>
-              </div>
-            </ng-container>
-          </ng-template>
           <div class="form-group"
                [ngClass]="{'has-error': form.showError('crushRule', formDir)}"
                *ngIf="form.getValue('poolType') && current.rules.length > 0">
             <label class="control-label col-sm-3"
-                   for="crushSet"
+                   for="crushRule"
                    i18n>
               Crush ruleset
             </label>
-            <div class="col-sm-9"
-                 [popover]="crushSteps"
-                 popoverTitle="Steps"
-                 triggers="mouseenter:mouseleave">
-              <select class="form-control"
-                      id="crushSet"
-                      formControlName="crushRule"
-                      name="crushSet">
-                <option i18n
-                        [ngValue]="null">
-                  -- Select a crush rule --
-                </option>
-                <option *ngFor="let rule of current.rules"
-                        [ngValue]="rule">
-                  {{ rule.rule_name }}
-                </option>
-              </select>
+            <div class="col-sm-9">
+              <div class="input-group">
+                <select class="form-control"
+                        id="crushRule"
+                        formControlName="crushRule"
+                        name="crushSet">
+                  <option i18n
+                          [ngValue]="null">
+                    -- Select a crush rule --
+                  </option>
+                  <option *ngFor="let rule of current.rules"
+                          [ngValue]="rule">
+                    {{ rule.rule_name }}
+                  </option>
+                </select>
+                <span class="input-group-btn">
+                  <button class="btn btn-default"
+                          [ngClass]="{'active': data.crushInfo}"
+                          id="crush-info-button"
+                          type="button"
+                          (click)="data.crushInfo = !data.crushInfo">
+                    <i class="fa fa-question-circle"
+                       aria-hidden="true"></i>
+                  </button>
+                </span>
+              </div>
+              <span class="help-block"
+                    id="crush-info-block"
+                    *ngIf="data.crushInfo && form.getValue('crushRule')">
+                <tabset>
+                  <tab i18n-heading heading="Crush rule" class="crush-rule-info">
+                    <cd-table-key-value [renderObjects]="true"
+                                        [data]="form.getValue('crushRule')"
+                                        [autoReload]="false">
+                    </cd-table-key-value>
+                  </tab>
+                  <tab i18n-heading heading="Crush steps" class="crush-rule-steps">
+                    <ol>
+                      <li *ngFor="let step of form.get('crushRule').value.steps">
+                        {{ describeCrushStep(step) }}
+                      </li>
+                    </ol>
+                  </tab>
+                </tabset>
+              </span>
               <span class="help-block"
                     i18n
                     *ngIf="form.showError('crushRule', formDir, 'tooFewOsds')">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
index 361f8e6d187..5770d240f5e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
@@ -7,6 +7,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { ToastModule } from 'ng2-toastr';
 import { BsModalService } from 'ngx-bootstrap/modal';
+import { TabsModule } from 'ngx-bootstrap/tabs';
 import { of } from 'rxjs';
 
 import { configureTestBed, FormHelper } from '../../../../testing/unit-test-helper';
@@ -127,6 +128,7 @@ describe('PoolFormComponent', () => {
       HttpClientTestingModule,
       RouterTestingModule.withRoutes(routes),
       ToastModule.forRoot(),
+      TabsModule.forRoot(),
       PoolModule
     ],
     providers: [
@@ -734,6 +736,30 @@ describe('PoolFormComponent', () => {
     });
   });
 
+  describe('crushRule', () => {
+    beforeEach(() => {
+      createCrushRule({ name: 'replicatedRule' });
+      fixture.detectChanges();
+      formHelper.setValue('poolType', 'replicated');
+      fixture.detectChanges();
+    });
+
+    it('should not show info per default', () => {
+      formHelper.expectElementVisible(fixture, '#crushRule', true);
+      formHelper.expectElementVisible(fixture, '#crush-info-block', false);
+    });
+
+    it('should show info if the info button is clicked', () => {
+      fixture.detectChanges();
+      const infoButton = fixture.debugElement.query(By.css('#crush-info-button'));
+      infoButton.triggerEventHandler('click', null);
+      expect(component.data.crushInfo).toBeTruthy();
+      fixture.detectChanges();
+      expect(infoButton.classes['active']).toBeTruthy();
+      formHelper.expectIdElementsVisible(fixture, ['crushRule', 'crush-info-block'], true);
+    });
+  });
+
   describe('erasure code profile', () => {
     const setSelectedEcp = (name: string) => {
       formHelper.setValue('erasureProfile', { name: name });
-- 
2.39.5