Merge pull request ceph#54648 from rhcs-dashboard/fs-rename-fix

mgr/dashboard: fs rename only when fs is offline 

Reviewed-by: Pedro Gonzalez Gomez <[email protected]>
Reviewed-by: Ankush Behl <[email protected]>
Reviewed-by: ivoalmeida <NOT@FOUND>

Author: nizamial09

src/pybind/mgr/dashboard/controllers/cephfs.py

@@ -335,13 +335,16 @@ def fs_status(self, fs_id):
 
         standby_table = self.get_standby_table(fsmap['standbys'], mds_versions)
 
+        flags = mdsmap['flags_state']
+
         return {
             "cephfs": {
                 "id": fs_id,
                 "name": mdsmap['fs_name'],
                 "client_count": client_count,
                 "ranks": rank_table,
-                "pools": pools_table
+                "pools": pools_table,
+                "flags": flags,
             },
             "standbys": standby_table,
             "versions": mds_versions

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/filesystems.e2e-spec.feature

@@ -12,19 +12,20 @@ Feature: CephFS Management
         And I click on "Create File System" button
         Then I should see a row with "test_cephfs"
 
-    Scenario: Edit CephFS Volume
-        Given I am on the "cephfs" page
-        And I select a row "test_cephfs"
-        And I click on "Edit" button
-        And enter "name" "test_cephfs_edit"
-        And I click on "Edit File System" button
-        Then I should see a row with "test_cephfs_edit"
+    # Should be uncommented once the pre-requisite is fixed
+    # Scenario: Edit CephFS Volume
+    #     Given I am on the "cephfs" page
+    #     And I select a row "test_cephfs"
+    #     And I click on "Edit" button
+    #     And enter "name" "test_cephfs_edit"
+    #     And I click on "Edit File System" button
+    #     Then I should see a row with "test_cephfs_edit"
 
     Scenario: Remove CephFS Volume
         Given I am on the "cephfs" page
-        And I select a row "test_cephfs_edit"
+        And I select a row "test_cephfs"
         And I click on "Remove" button from the table actions
         Then I should see the modal
         And I check the tick box in modal
         And I click on "Remove File System" button
-        Then I should not see a row with "test_cephfs_edit"
+        Then I should not see a row with "test_cephfs"

src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts

@@ -361,7 +361,7 @@ const routes: Routes = [
             data: { breadcrumbs: ActionLabels.CREATE }
           },
           {
-            path: `${URLVerbs.EDIT}/:name`,
+            path: `${URLVerbs.EDIT}/:id`,
             component: CephfsVolumeFormComponent,
             data: { breadcrumbs: ActionLabels.EDIT }
           }

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.html

@@ -15,6 +15,18 @@
                         i18n
                         *ngIf="!editing">Orchestrator is not configured. Deploy MDS daemons manually after creating the volume.</cd-alert-panel>
       </ng-container>
+
+      <cd-alert-panel type="info"
+                      class="m-3"
+                      spacingClass="mt-3"
+                      i18n
+                      *ngIf="editing && disableRename">
+        <p>The File System can only be renamed if it is shutdown and `refuse_client_session` is set to true.
+           Follow the steps below in the command line and refresh the page:</p>
+        <cd-code-block [codes]="[fsFailCmd]"></cd-code-block>
+        <cd-code-block [codes]="[fsSetCmd]"></cd-code-block>
+      </cd-alert-panel>
+
       <div class="card-body">
         <!-- Name -->
         <div class="form-group row">
@@ -98,6 +110,7 @@
         <cd-form-button-panel (submitActionEvent)="submit()"
                               [form]="form"
                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              [disabled]="editing ? disableRename: false"
                               wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.spec.ts

@@ -78,5 +78,42 @@ describe('CephfsVolumeFormComponent', () => {
       expect(label).toBeNull();
       expect(hosts).toBeNull();
     });
+
+    it('should disable renaming and show info alert if disableRename is true', () => {
+      component.disableRename = true;
+      component.ngOnInit();
+      fixture.detectChanges();
+      const alertPanel = fixture.debugElement.query(By.css('cd-alert-panel'));
+      expect(alertPanel).not.toBeNull();
+    });
+
+    it('should not show the alert if disableRename is false', () => {
+      component.disableRename = false;
+      component.ngOnInit();
+      fixture.detectChanges();
+      const alertPanel = fixture.debugElement.query(By.css('cd-alert-panel'));
+      expect(alertPanel).toBeNull();
+    });
+
+    it('should disable the submit button only if disableRename is true', () => {
+      component.disableRename = true;
+      component.ngOnInit();
+      fixture.detectChanges();
+      const submitButton = fixture.debugElement.query(By.css('button[type=submit]'));
+      expect(submitButton.nativeElement.disabled).toBeTruthy();
+
+      // the submit button should only be disabled when the form is in edit mode
+      component.editing = false;
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(submitButton.nativeElement.disabled).toBeFalsy();
+
+      // submit button should be enabled if disableRename is false
+      component.editing = true;
+      component.disableRename = false;
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(submitButton.nativeElement.disabled).toBeFalsy();
+    });
   });
 });

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.ts

@@ -51,6 +51,11 @@ export class CephfsVolumeFormComponent extends CdForm implements OnInit {
   labels: string[];
   hasOrchestrator: boolean;
   currentVolumeName: string;
+  fsId: number;
+  disableRename: boolean = true;
+
+  fsFailCmd: string;
+  fsSetCmd: string;
 
   constructor(
     private router: Router,
@@ -101,9 +106,22 @@ export class CephfsVolumeFormComponent extends CdForm implements OnInit {
 
   ngOnInit() {
     if (this.editing) {
-      this.route.params.subscribe((params: { name: string }) => {
-        this.currentVolumeName = params.name;
+      this.route.params.subscribe((params: { id: string }) => {
+        this.fsId = Number(params.id);
+      });
+
+      this.cephfsService.getCephfs(this.fsId).subscribe((resp: object) => {
+        this.currentVolumeName = resp['cephfs']['name'];
         this.form.get('name').setValue(this.currentVolumeName);
+
+        this.disableRename = !(
+          !resp['cephfs']['flags']['joinable'] && resp['cephfs']['flags']['refuse_client_session']
+        );
+        if (this.disableRename) {
+          this.form.get('name').disable();
+          this.fsFailCmd = `ceph fs fail ${this.currentVolumeName}`;
+          this.fsSetCmd = `ceph fs set ${this.currentVolumeName} refuse_client_session true`;
+        }
       });
     } else {
       const hostContext = new CdTableFetchDataContext(() => undefined);

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.ts

@@ -87,7 +87,7 @@ export class CephfsListComponent extends ListWithDetails implements OnInit {
         permission: 'update',
         icon: Icons.edit,
         click: () =>
-          this.router.navigate([this.urlBuilder.getEdit(this.selection.first().mdsmap.fs_name)])
+          this.router.navigate([this.urlBuilder.getEdit(String(this.selection.first().id))])
       },
       {
         permission: 'delete',

src/pybind/mgr/dashboard/frontend/src/app/shared/components/code-block/code-block.component.html

@@ -0,0 +1,21 @@
+<ng-container *ngIf="codes.length > 1; else singleCodeBlock">
+  <pre id="bigCodeBlock">
+    <span *ngFor="let code of codes"
+          class="d-flex p-2 align-items-center justify-content-between text-dark">
+      <span>{{code}}</span>
+      <cd-copy-2-clipboard-button
+          [source]="code"
+          [byId]="false"></cd-copy-2-clipboard-button>
+    </span>
+  </pre>
+</ng-container>
+
+<ng-template #singleCodeBlock>
+  <pre class="d-flex p-2 align-items-center justify-content-between text-dark"
+       id="singleCodeBlock">
+    <span>{{codes}}</span>
+    <cd-copy-2-clipboard-button
+      [source]="codes"
+      [byId]="false"></cd-copy-2-clipboard-button>
+  </pre>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/code-block/code-block.component.scss

@@ -0,0 +1,6 @@
+@use './src/styles/vendor/variables' as vv;
+
+pre {
+  background-color: vv.$code-block-bg;
+  border-radius: 0.5rem;
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/code-block/code-block.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CodeBlockComponent } from './code-block.component';
+import { configureTestBed } from '~/testing/unit-test-helper';
+
+describe('CodeBlockComponent', () => {
+  let component: CodeBlockComponent;
+  let fixture: ComponentFixture<CodeBlockComponent>;
+
+  configureTestBed({
+    declarations: [CodeBlockComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodeBlockComponent);
+    component = fixture.componentInstance;
+    component.codes = [];
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show single codeblock if there are only one code', () => {
+    component.codes = ['code'];
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('#singleCodeBlock')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('#bigCodeBlock')).toBeNull();
+  });
+
+  it('should show single codeblock if there are only one code', () => {
+    component.codes = ['code1', 'code2'];
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('#bigCodeBlock')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('#singleCodeBlock')).toBeNull();
+  });
+});