mgr/dashboard: fs snapshots e2e

Fixes: https://tracker.ceph.com/issues/63237
Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts

@@ -54,6 +54,13 @@ Then('I should not see a row with {string}', (row: string) => {
   );
 });
 
+Then('I should see a table in the expanded row', () => {
+  cy.get('.datatable-row-detail').within(() => {
+    cy.get('cd-table').should('exist');
+    cy.get('datatable-scroller, .empty-row');
+  });
+});
+
 Then('I should not see a row with {string} in the expanded row', (row: string) => {
   cy.get('.datatable-row-detail').within(() => {
     cy.get('cd-table .search input').first().clear().type(row);
@@ -133,3 +140,9 @@ And('I should see row {string} have {string} on this tab', (row: string, options
     });
   }
 });
+
+Then('I should see an alert {string} in the expanded row', (alert: string) => {
+  cy.get('.datatable-row-detail').within(() => {
+    cy.get('.alert-panel-text').contains(alert);
+  });
+});

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

@@ -0,0 +1,53 @@
+Feature: CephFS Snapshot Management
+
+    Goal: To test out the CephFS snapshot management features
+
+    Background: Login
+        Given I am logged in
+
+    Scenario: Create a CephFS Volume
+        Given I am on the "cephfs" page
+        And I click on "Create" button
+        And enter "name" "test_cephfs"
+        And I click on "Create File System" button
+        Then I should see a row with "test_cephfs"
+
+    Scenario: Snapshots tab without a subvolume
+        Given I am on the "cephfs" page
+        When I expand the row "test_cephfs"
+        And I go to the "Snapshots" tab
+        Then I should see an alert "No subvolumes are present" in the expanded row
+
+    Scenario: Create a CephFS Subvolume
+        Given I am on the "cephfs" page
+        When I expand the row "test_cephfs"
+        And I go to the "Subvolumes" tab
+        And I click on "Create" button from the expanded row
+        And enter "subvolumeName" "test_subvolume" in the modal
+        And I click on "Create Subvolume" button
+        Then I should see a row with "test_subvolume" in the expanded row
+
+    Scenario: Show the CephFS Snapshots view
+        Given I am on the "cephfs" page
+        When I expand the row "test_cephfs"
+        And I go to the "Snapshots" tab
+        Then I should see a table in the expanded row
+
+    Scenario: Remove a CephFS Subvolume
+        Given I am on the "cephfs" page
+        When I expand the row "test_cephfs"
+        And I go to the "Subvolumes" tab
+        When I select a row "test_subvolume" in the expanded row
+        And I click on "Remove" button from the table actions in the expanded row
+        And I check the tick box in modal
+        And I click on "Remove Subvolume" button
+        Then I should not see a row with "test_subvolume" in the expanded row
+
+    Scenario: Remove CephFS Volume
+        Given I am on the "cephfs" page
+        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"

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

@@ -21,7 +21,7 @@ Feature: CephFS Subvolume Group management
         And I click on "Create Subvolume group" button
         Then I should see a row with "test_subvolume_group" in the expanded row
 
-    Scenario: Edit a CephFS Subvolume
+    Scenario: Edit a CephFS Subvolume Group
         Given I am on the "cephfs" page
         When I expand the row "test_cephfs"
         And I go to the "Subvolume groups" tab
@@ -31,7 +31,7 @@ Feature: CephFS Subvolume Group management
         And I click on "Edit Subvolume group" button
         Then I should see row "test_subvolume_group" of the expanded row to have a usage bar
 
-    Scenario: Remove a CephFS Subvolume
+    Scenario: Remove a CephFS Subvolume Group
         Given I am on the "cephfs" page
         When I expand the row "test_cephfs"
         And I go to the "Subvolume groups" tab

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

@@ -1,5 +1,5 @@
-import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
-import { Observable, ReplaySubject, of } from 'rxjs';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { BehaviorSubject, Observable, of } from 'rxjs';
 import { catchError, shareReplay, switchMap } from 'rxjs/operators';
 
 import { CephfsSubvolumeGroupService } from '~/app/shared/api/cephfs-subvolume-group.service';
@@ -52,7 +52,7 @@ export class CephfsSubvolumeGroupComponent implements OnInit, OnChanges {
   permissions: Permissions;
 
   subvolumeGroup$: Observable<CephfsSubvolumeGroup[]>;
-  subject = new ReplaySubject<CephfsSubvolumeGroup[]>();
+  subject = new BehaviorSubject<CephfsSubvolumeGroup[]>([]);
 
   constructor(
     private cephfsSubvolumeGroup: CephfsSubvolumeGroupService,
@@ -138,11 +138,13 @@ export class CephfsSubvolumeGroupComponent implements OnInit, OnChanges {
   }
 
   fetchData() {
-    this.subject.next();
+    this.subject.next([]);
   }
 
-  ngOnChanges() {
-    this.subject.next();
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.fsName) {
+      this.subject.next([]);
+    }
   }
 
   updateSelection(selection: CdTableSelection) {

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

@@ -1,6 +1,14 @@
-import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { Observable, ReplaySubject, of } from 'rxjs';
-import { catchError, shareReplay, switchMap, tap } from 'rxjs/operators';
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild
+} from '@angular/core';
+import { BehaviorSubject, Observable, of } from 'rxjs';
+import { catchError, switchMap, tap } from 'rxjs/operators';
 import { CephfsSubvolumeService } from '~/app/shared/api/cephfs-subvolume.service';
 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
@@ -64,10 +72,11 @@ export class CephfsSubvolumeListComponent extends CdForm implements OnInit, OnCh
 
   subVolumes$: Observable<CephfsSubvolume[]>;
   subVolumeGroups$: Observable<CephfsSubvolumeGroup[]>;
-  subject = new ReplaySubject<CephfsSubvolume[]>();
-  groupsSubject = new ReplaySubject<CephfsSubvolume[]>();
+  subject = new BehaviorSubject<CephfsSubvolume[]>([]);
+  groupsSubject = new BehaviorSubject<CephfsSubvolume[]>([]);
 
   subvolumeGroupList: string[] = [];
+  subVolumesList: CephfsSubvolume[] = [];
 
   activeGroupName: string = '';
 
@@ -148,8 +157,6 @@ export class CephfsSubvolumeListComponent extends CdForm implements OnInit, OnCh
       }
     ];
 
-    this.getSubVolumes();
-
     this.subVolumeGroups$ = this.groupsSubject.pipe(
       switchMap(() =>
         this.cephfsSubvolumeGroupService.get(this.fsName, false).pipe(
@@ -167,12 +174,14 @@ export class CephfsSubvolumeListComponent extends CdForm implements OnInit, OnCh
   }
 
   fetchData() {
-    this.subject.next();
+    this.subject.next([]);
   }
 
-  ngOnChanges() {
-    this.subject.next();
-    this.groupsSubject.next();
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.fsName) {
+      this.subject.next([]);
+      this.groupsSubject.next([]);
+    }
   }
 
   updateSelection(selection: CdTableSelection) {
@@ -228,20 +237,19 @@ export class CephfsSubvolumeListComponent extends CdForm implements OnInit, OnCh
 
   selectSubVolumeGroup(subVolumeGroupName: string) {
     this.activeGroupName = subVolumeGroupName;
-    this.getSubVolumes(subVolumeGroupName);
+    this.getSubVolumes();
   }
 
-  getSubVolumes(subVolumeGroupName = '') {
+  getSubVolumes() {
     this.subVolumes$ = this.subject.pipe(
       switchMap(() =>
-        this.cephfsSubVolumeService.get(this.fsName, subVolumeGroupName).pipe(
+        this.cephfsSubVolumeService.get(this.fsName, this.activeGroupName).pipe(
           catchError(() => {
             this.context.error();
             return of(null);
           })
         )
-      ),
-      shareReplay(1)
+      )
     );
   }
 }

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { Observable, ReplaySubject, forkJoin, of } from 'rxjs';
+import { BehaviorSubject, Observable, forkJoin, of } from 'rxjs';
 import { catchError, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { CephfsSubvolumeGroupService } from '~/app/shared/api/cephfs-subvolume-group.service';
 import { CephfsSubvolumeService } from '~/app/shared/api/cephfs-subvolume.service';
@@ -21,8 +21,8 @@ export class CephfsSubvolumeSnapshotsListComponent implements OnInit, OnChanges
 
   subVolumes$: Observable<CephfsSubvolume[]>;
   snapshots$: Observable<any[]>;
-  snapshotSubject = new ReplaySubject<SubvolumeSnapshot[]>();
-  subVolumeSubject = new ReplaySubject<CephfsSubvolume[]>();
+  snapshotSubject = new BehaviorSubject<SubvolumeSnapshot[]>([]);
+  subVolumeSubject = new BehaviorSubject<CephfsSubvolume[]>([]);
 
   subvolumeGroupList: string[] = [];
   subVolumesList: string[];
@@ -71,7 +71,7 @@ export class CephfsSubvolumeSnapshotsListComponent implements OnInit, OnChanges
       .get(this.fsName)
       .pipe(
         switchMap((groups) => {
-          // manually adding the group 'default' to the list.
+          // manually adding the group '_nogroup' to the list.
           groups.unshift({ name: '' });
 
           const observables = groups.map((group) =>
@@ -98,7 +98,7 @@ export class CephfsSubvolumeSnapshotsListComponent implements OnInit, OnChanges
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.fsName) {
-      this.subVolumeSubject.next();
+      this.subVolumeSubject.next([]);
     }
   }
 
@@ -143,6 +143,6 @@ export class CephfsSubvolumeSnapshotsListComponent implements OnInit, OnChanges
   }
 
   fetchData() {
-    this.snapshotSubject.next();
+    this.snapshotSubject.next([]);
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/components/vertical-navigation/vertical-navigation.component.html

@@ -13,7 +13,7 @@
         <a class="nav-link"
            [class.active]="!activeItem"
            (click)="selectItem()"
-           *ngIf="item === ''">Default</a>
+           *ngIf="item === ''">_nogroup</a>
         <a class="nav-link text-decoration-none text-break"
            [class.active]="item === activeItem"
            (click)="selectItem(item)"