From 984780eeae14df9f1d62778b6bdf9380cbf42aee Mon Sep 17 00:00:00 2001 From: Nizamudeen A Date: Tue, 17 Sep 2024 15:20:27 +0530 Subject: [PATCH] mgr/dashboard: carbonize the wizard component Fixes: https://tracker.ceph.com/issues/68103 Signed-off-by: Nizamudeen A --- .../frontend/src/app/app-routing.module.ts | 2 +- .../src/app/ceph/cluster/cluster.module.ts | 14 +- .../create-cluster-review.component.html | 90 ++-- .../create-cluster.component.html | 132 ++--- .../create-cluster.component.ts | 34 +- .../ceph/cluster/hosts/hosts.component.html | 3 +- .../app/ceph/cluster/hosts/hosts.component.ts | 3 + .../rgw-multisite-details.component.ts | 8 +- .../rgw-multisite-wizard.component.html | 474 +++++++++--------- .../rgw-multisite-wizard.component.scss | 12 +- .../rgw-multisite-wizard.component.ts | 47 +- .../frontend/src/app/ceph/rgw/rgw.module.ts | 16 +- .../shared/components/components.module.ts | 6 +- .../components/wizard/wizard.component.html | 24 +- .../wizard/wizard.component.spec.ts | 10 +- .../components/wizard/wizard.component.ts | 9 +- .../shared/datatable/table/table.component.ts | 8 +- .../shared/services/wizard-steps.service.ts | 12 +- .../frontend/src/styles/themes/_content.scss | 3 +- 19 files changed, 501 insertions(+), 406 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts index 0d859bbf8a699..99d7bd0e2d87d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts @@ -108,7 +108,7 @@ const routes: Routes = [ redirectTo: 'dashboard', backend: 'cephadm' }, - breadcrumbs: 'Expand Cluster' + breadcrumbs: 'Cluster/Expand Cluster' } }, { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts index 37ba8e0c1df6a..dc61dc5ab672f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts @@ -3,7 +3,14 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; -import { ComboBoxModule, DropdownModule, CheckboxModule } from 'carbon-components-angular'; +import { + ComboBoxModule, + DropdownModule, + CheckboxModule, + ButtonModule, + GridModule, + ProgressIndicatorModule +} from 'carbon-components-angular'; import { TreeModule } from '@circlon/angular-tree-component'; import { @@ -92,7 +99,10 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta DashboardV3Module, ComboBoxModule, DropdownModule, - CheckboxModule + CheckboxModule, + GridModule, + ProgressIndicatorModule, + ButtonModule ], declarations: [ HostsComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster-review.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster-review.component.html index a87f4011b28d7..2fbc6a75d634b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster-review.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster-review.component.html @@ -1,53 +1,57 @@ -
-
+
+
Cluster Resources - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
Hosts{{ hostsCount }}
-
-
-

Storage Capacity

-
-
-

Number of devices

-
-
-

Raw capacity

-
-
-

{{ totalDevices }}

- {{ totalCapacity | dimlessBinary }}

CPUs{{ totalCPUs | empty }}
Memory{{ totalMemory | empty }}
Hosts{{ hostsCount }}
+
+
+

Storage Capacity

+
+
+

Number of devices

+
+
+

Raw capacity

+
+
+

{{ totalDevices }}

+ {{ totalCapacity | dimlessBinary }}

CPUs{{ totalCPUs | empty }}
Memory{{ totalMemory | empty }}
- -
- Host Details - +
+
+
+ Host Details +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html index 930c6b42ac9c7..4e30931c1b09e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html @@ -1,6 +1,7 @@
-
+
Please expand your cluster first
- -
-
-
Expand Cluster
-
+
+ +
Expand Cluster
-
- -
-

Add Hosts

-
- -
-
-

Create OSDs

-
- -
-
-
-

Create Services

-
- -
-
- +
+ +
+ +
+

Add Hosts

+ + +
+
+

Create OSDs

+
+
- +
+
+

Create Services

+ +
+
+ +
+ +
+ + +
-
- - - -
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts index 204897d6898f5..fc0ce5823aab3 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts @@ -32,6 +32,7 @@ import { WizardStepsService } from '~/app/shared/services/wizard-steps.service'; import { DriveGroup } from '../osd/osd-form/drive-group.model'; import { Location } from '@angular/common'; import { ModalCdsService } from '~/app/shared/services/modal-cds.service'; +import { Step } from 'carbon-components-angular'; @Component({ selector: 'cd-create-cluster', @@ -45,7 +46,23 @@ export class CreateClusterComponent implements OnInit, OnDestroy { currentStepSub: Subscription; permissions: Permissions; projectConstants: typeof AppConstants = AppConstants; - stepTitles = ['Add Hosts', 'Create OSDs', 'Create Services', 'Review']; + stepTitles: Step[] = [ + { + label: 'Add Hosts' + }, + { + label: 'Create OSDs', + complete: false + }, + { + label: 'Create Services', + complete: false + }, + { + label: 'Review', + complete: false + } + ]; startClusterCreation = false; observables: any = []; modalRef: NgbModalRef; @@ -79,10 +96,13 @@ export class CreateClusterComponent implements OnInit, OnDestroy { .subscribe((step: WizardStepModel) => { this.currentStep = step; }); - this.currentStep.stepIndex = 1; + this.currentStep.stepIndex = 0; } ngOnInit(): void { + this.stepTitles.forEach((steps, index) => { + steps.onClick = () => (this.currentStep.stepIndex = index); + }); this.route.queryParams.subscribe((params) => { // reading 'welcome' value true/false to toggle expand-cluster wizand view and welcome view const showWelcomeScreen = params['welcome']; @@ -97,10 +117,14 @@ export class CreateClusterComponent implements OnInit, OnDestroy { }); this.stepTitles.forEach((stepTitle) => { - this.stepsToSkip[stepTitle] = false; + this.stepsToSkip[stepTitle.label] = false; }); } + onStepClick(step: WizardStepModel) { + this.wizardStepsService.setCurrentStep(step); + } + createCluster() { this.startClusterCreation = false; } @@ -236,8 +260,8 @@ export class CreateClusterComponent implements OnInit, OnDestroy { } onSkip() { - const stepTitle = this.stepTitles[this.currentStep.stepIndex - 1]; - this.stepsToSkip[stepTitle] = true; + const stepTitle = this.stepTitles[this.currentStep.stepIndex]; + this.stepsToSkip[stepTitle.label] = true; this.onNextStep(); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html index e474fb854cde5..8a92776b8be13 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html @@ -18,7 +18,8 @@ [maxLimit]="25" (setExpandedRow)="setExpandedRow($event)" (updateSelection)="updateSelection($event)" - [toolHeader]="!hideToolHeader"> + [toolHeader]="!hideToolHeader" + [showMenu]="showMenu">
= []; hosts: Array = []; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts index ad39b0ebae743..edc973572a2ad 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts @@ -39,6 +39,7 @@ import { BlockUI, NgBlockUI } from 'ng-block-ui'; import { Router } from '@angular/router'; import { RgwMultisiteWizardComponent } from '../rgw-multisite-wizard/rgw-multisite-wizard.component'; import { RgwMultisiteSyncPolicyComponent } from '../rgw-multisite-sync-policy/rgw-multisite-sync-policy.component'; +import { ModalCdsService } from '~/app/shared/services/modal-cds.service'; const BASE_URL = 'rgw/multisite/configuration'; @@ -119,7 +120,8 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit { public rgwZoneService: RgwZoneService, public rgwDaemonService: RgwDaemonService, public mgrModuleService: MgrModuleService, - private notificationService: NotificationService + private notificationService: NotificationService, + private cdsModalService: ModalCdsService ) { this.permission = this.authStorageService.getPermissions().rgw; } @@ -150,9 +152,7 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit { } openMultisiteSetupWizard() { - this.bsModalRef = this.modalService.show(RgwMultisiteWizardComponent, { - size: 'lg' - }); + this.bsModalRef = this.cdsModalService.show(RgwMultisiteWizardComponent); } openMigrateModal() { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html index 5c00a54a933c0..8956e3ef0b27f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html @@ -1,253 +1,257 @@ -
- - Set up Multi-site Replication - -
-
- -
-
- - - Please note that this process can take some time. During this period, do not click the back button or close the wizard. Thank you for your patience. - -
-

Create Realm & Zonegroup

-
-
-
- -
- - - Enter a unique name for the Realm. The Realm is a logical grouping of all your Zonegroups. - - This field is required. - The chosen realm name is already in use. -
-
-
- -
- - - Enter a name for the Zonegroup. Zonegroup will help you identify and manage the group of zones. - - This field is required. - The chosen zone group name is already in use. -
-
-
- -
- - - - Select the endpoints for the Zonegroup. Endpoints are the URLs or IP addresses from which the rgw gateways in that zonegroup can be accessed. You can select multiple endpoints in case you have multiple rgw gateways in a zonegroup - -
-
+ + + +

Set up Multi-site Replication

+ + +
+
+
+ +
+ +
+ + + + Please note that this process can take some time. During this period, do not click the back button or close the wizard. Thank you for your patience. + +
+
+ +
+ + + Enter a unique name for the Realm. The Realm is a logical grouping of all your Zonegroups. + + This field is required. + The chosen realm name is already in use. +
+
+
+ +
+ + + Enter a name for the Zonegroup. Zonegroup will help you identify and manage the group of zones. + + This field is required. + The chosen zone group name is already in use. +
+
+
+ +
+ + + + Select the endpoints for the Zonegroup. Endpoints are the URLs or IP addresses from which the rgw gateways in that zonegroup can be accessed. You can select multiple endpoints in case you have multiple rgw gateways in a zonegroup + +
+
+
+
+

Create Zone

+
+ +
+ + + Enter a unique name for the Zone. A Zone represents a distinct data center or geographical location within a Zonegroup. + + This field is required. + The chosen zone name is already in use. +
+
+
+ +
+ + + + Select the endpoints for the Zone. Endpoints are the URLs or IP addresses from which the rgw gateways in that zone can be accessed. You can select multiple endpoints in case you have multiple rgw gateways in a zone + +
+
+
+ +
+ + + Specify the username for the system user. + + + This user will be created automatically as part of the process, and it will have the necessary permissions to manage and synchronize resources across zones. + + This field is required. + The username already exists. +
+
+
+
+
+

Select Cluster

+
+ +
+ + + Choose the cluster where you want to apply this multisite configuration. The selected cluster will integrate the defined Realm, Zonegroup, and Zones, enabling data synchronization and management across the multisite setup. + + + Before submitting this form, please verify that the selected cluster has an active RGW (Rados Gateway) service running. +
-
-

Create Zone

+
+ +

Export Token

+
- +
- + [value]="realminfo.realm" + readonly> - Enter a unique name for the Zone. A Zone represents a distinct data center or geographical location within a Zonegroup. + Name of the realm that will be involved in replication. - This field is required. - The chosen zone name is already in use.
- +
- - - - Select the endpoints for the Zone. Endpoints are the URLs or IP addresses from which the rgw gateways in that zone can be accessed. You can select multiple endpoints in case you have multiple rgw gateways in a zone - -
-
-
- -
- + [value]="realminfo.token" + class="me-2 mb-4" + readonly> + + - Specify the username for the system user. + This field displays the token needed to import the multisite configuration into a secondary cluster. Copy this token securely and use it on the secondary cluster to replicate the current multisite setup. Ensure that the token is handled securely to prevent unauthorized access. - - This user will be created automatically as part of the process, and it will have the necessary permissions to manage and synchronize resources across zones. - - This field is required. - The username already exists.
+
-
-
-

Select Cluster

-
- -
- - - Choose the cluster where you want to apply this multisite configuration. The selected cluster will integrate the defined Realm, Zonegroup, and Zones, enabling data synchronization and management across the multisite setup. - - - Before submitting this form, please verify that the selected cluster has an active RGW (Rados Gateway) service running. - -
-
-
- -

Export Token

-
-
- -
- - - Name of the realm that will be involved in replication. - -
-
-
- -
- - - - - This field displays the token needed to import the multisite configuration into a secondary cluster. Copy this token securely and use it on the secondary cluster to replicate the current multisite setup. Ensure that the token is handled securely to prevent unauthorized access. - -
-
-
-
- -
- - -
-
-
- - - -
+ +
+ +
- - -
+
+
+ + + + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.scss index 6f91a2864a87e..bd53b868bcfd0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.scss @@ -1,11 +1,3 @@ -.container-fluid { - align-items: flex-start; - display: flex; - padding-left: 0; - width: 100%; -} - -::ng-deep .custom-modal-content .modal-content { - right: 40vh; - width: 140vh; +cds-loading { + margin-left: 0.5rem; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.ts index 673d8daefbea0..623826b73639a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.ts @@ -16,20 +16,32 @@ import _ from 'lodash'; import { SelectMessages } from '~/app/shared/components/select/select-messages.model'; import { NotificationType } from '~/app/shared/enum/notification-type.enum'; import { NotificationService } from '~/app/shared/services/notification.service'; -import { Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { map, switchMap } from 'rxjs/operators'; +import { BaseModal, Step } from 'carbon-components-angular'; +import { Location } from '@angular/common'; @Component({ selector: 'cd-rgw-multisite-wizard', templateUrl: './rgw-multisite-wizard.component.html', styleUrls: ['./rgw-multisite-wizard.component.scss'] }) -export class RgwMultisiteWizardComponent implements OnInit { +export class RgwMultisiteWizardComponent extends BaseModal implements OnInit { multisiteSetupForm: CdFormGroup; currentStep: WizardStepModel; currentStepSub: Subscription; permissions: Permissions; - stepTitles = ['Create Realm & Zonegroup', 'Create Zone', 'Select Cluster']; + stepTitles: Step[] = [ + { + label: 'Create Realm & Zonegroup' + }, + { + label: 'Create Zone' + }, + { + label: 'Select Cluster' + } + ]; stepsToSkip: { [steps: string]: boolean } = {}; daemons: RgwDaemon[] = []; selectedCluster = ''; @@ -50,15 +62,18 @@ export class RgwMultisiteWizardComponent implements OnInit { private multiClusterService: MultiClusterService, private rgwMultisiteService: RgwMultisiteService, public notificationService: NotificationService, - private router: Router + private router: Router, + private route: ActivatedRoute, + private location: Location ) { + super(); this.pageURL = 'rgw/multisite/configuration'; this.currentStepSub = this.wizardStepsService .getCurrentStep() .subscribe((step: WizardStepModel) => { this.currentStep = step; }); - this.currentStep.stepIndex = 1; + this.currentStep.stepIndex = 0; this.createForm(); this.rgwEndpoints = { value: [], @@ -71,6 +86,7 @@ export class RgwMultisiteWizardComponent implements OnInit { } ngOnInit(): void { + this.open = this.route.outlet === 'modal'; this.rgwDaemonService .list() .pipe( @@ -105,7 +121,20 @@ export class RgwMultisiteWizardComponent implements OnInit { .filter((cluster) => cluster['cluster_alias'] !== 'local-cluster'); this.isMultiClusterConfigured = this.clusterDetailsArray.length > 0; if (!this.isMultiClusterConfigured) { - this.stepTitles = ['Create Realm & Zonegroup', 'Create Zone', 'Export Multi-site token']; + this.stepTitles = [ + { + label: 'Create Realm & Zonegroup' + }, + { + label: 'Create Zone' + }, + { + label: 'Export Multi-site token' + } + ]; + this.stepTitles.forEach((steps, index) => { + steps.onClick = () => (this.currentStep.stepIndex = index); + }); } else { this.selectedCluster = this.clusterDetailsArray[0]['name']; } @@ -245,13 +274,13 @@ export class RgwMultisiteWizardComponent implements OnInit { if (!this.wizardStepsService.isFirstStep()) { this.wizardStepsService.moveToPreviousStep(); } else { - this.activeModal.close(); + this.location.back(); } } onSkip() { - const stepTitle = this.stepTitles[this.currentStep.stepIndex - 1]; - this.stepsToSkip[stepTitle] = true; + const stepTitle = this.stepTitles[this.currentStep.stepIndex]; + this.stepsToSkip[stepTitle.label] = true; this.onNextStep(); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts index 91db38d319a1b..58f85fb61ff1b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts @@ -63,6 +63,14 @@ import { RgwMultisiteSyncPolicyDetailsComponent } from './rgw-multisite-sync-pol import { RgwMultisiteSyncFlowModalComponent } from './rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component'; import { RgwMultisiteSyncPipeModalComponent } from './rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component'; import { RgwMultisiteTabsComponent } from './rgw-multisite-tabs/rgw-multisite-tabs.component'; +import { + ButtonModule, + GridModule, + IconModule, + LoadingModule, + ModalModule, + ProgressIndicatorModule +} from 'carbon-components-angular'; @NgModule({ imports: [ @@ -79,7 +87,13 @@ import { RgwMultisiteTabsComponent } from './rgw-multisite-tabs/rgw-multisite-ta TreeModule, DataTableModule, DashboardV3Module, - NgbTypeaheadModule + NgbTypeaheadModule, + ModalModule, + GridModule, + ProgressIndicatorModule, + ButtonModule, + LoadingModule, + IconModule ], exports: [ RgwDaemonListComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts index b01336f1fee3f..72bacdddf0c93 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts @@ -34,7 +34,8 @@ import { NumberModule, DropdownModule, SelectModule, - ComboBoxModule + ComboBoxModule, + ProgressIndicatorModule } from 'carbon-components-angular'; import { MotdComponent } from '~/app/shared/components/motd/motd.component'; @@ -118,7 +119,8 @@ import InfoIcon from '@carbon/icons/es/information/16'; TimePickerSelectModule, DropdownModule, SelectModule, - ComboBoxModule + ComboBoxModule, + ProgressIndicatorModule ], declarations: [ SparklineComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html index 7ffd1b320592f..e5efa0b1e6201 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html @@ -1,19 +1,7 @@ -
-
- -
+
+ +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.spec.ts index b42578fb71193..213ace34de1e7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.spec.ts @@ -15,7 +15,15 @@ describe('WizardComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(WizardComponent); component = fixture.componentInstance; - component.stepsTitle = ['Add Hosts', 'Review']; + component.stepsTitle = [ + { + label: 'Add Hosts' + }, + { + label: 'Create OSDs', + complete: false + } + ]; fixture.detectChanges(); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts index d46aa480e7918..72c1e10676467 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts @@ -1,4 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Step } from 'carbon-components-angular'; import * as _ from 'lodash'; import { Observable, Subscription } from 'rxjs'; @@ -13,13 +14,17 @@ import { WizardStepsService } from '~/app/shared/services/wizard-steps.service'; }) export class WizardComponent implements OnInit, OnDestroy { @Input() - stepsTitle: string[]; + stepsTitle: Step[]; steps: Observable; currentStep: WizardStepModel; currentStepSub: Subscription; - constructor(private stepsService: WizardStepsService) {} + constructor(private stepsService: WizardStepsService) { + this.stepsTitle?.forEach((steps, index) => { + steps.onClick = () => (this.currentStep.stepIndex = index); + }); + } ngOnInit(): void { this.stepsService.setTotalSteps(this.stepsTitle.length); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts index 5b2bd777dc7a0..2a631639558c9 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts @@ -125,6 +125,9 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr @Input() hasDetails = false; + @Input() + showInlineActions = true; + /** * Auto reload time in ms - per default every 5s * You can set it to 0, undefined or false to disable the auto reload feature in order to @@ -387,7 +390,7 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr } ngAfterViewInit(): void { - if (this.tableActions?.dropDownActions?.length) { + if (this.showInlineActions && this.tableActions?.dropDownActions?.length) { this.tableColumns = [ ...this.tableColumns, { @@ -465,7 +468,6 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr } tableItem.template = column.cellTemplate || this.defaultValueTpl; - return tableItem; }); }); @@ -1084,7 +1086,7 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr if (!_.find(this.visibleColumns, (c: CdTableColumn) => c.prop === sortProp)) { this.userConfig.sorts = this.createSortingDefinition(this.visibleColumns[0].prop); } - if (this.tableActions?.dropDownActions?.length) { + if (this.showInlineActions && this.tableActions?.dropDownActions?.length) { this.tableColumns = [ ...this.tableColumns, { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/wizard-steps.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/wizard-steps.service.ts index e0fb2be944de0..7813cc163b078 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/wizard-steps.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/wizard-steps.service.ts @@ -4,7 +4,7 @@ import { BehaviorSubject, Observable } from 'rxjs'; import { WizardStepModel } from '~/app/shared/models/wizard-steps'; -const initialStep = [{ stepIndex: 1, isComplete: false }]; +const initialStep = [{ stepIndex: 0, isComplete: false }]; @Injectable({ providedIn: 'root' @@ -20,7 +20,7 @@ export class WizardStepsService { setTotalSteps(step: number) { const steps: WizardStepModel[] = []; - for (let i = 1; i <= step; i++) { + for (let i = 0; i < step; i++) { steps.push({ stepIndex: i, isComplete: false }); } this.steps$ = new BehaviorSubject(steps); @@ -40,19 +40,19 @@ export class WizardStepsService { moveToNextStep(): void { const index = this.currentStep$.value.stepIndex; - this.currentStep$.next(this.steps$.value[index]); + this.currentStep$.next(this.steps$.value[index + 1]); } moveToPreviousStep(): void { - const index = this.currentStep$.value.stepIndex - 1; + const index = this.currentStep$.value.stepIndex; this.currentStep$.next(this.steps$.value[index - 1]); } isLastStep(): boolean { - return this.currentStep$.value.stepIndex === this.steps$.value.length; + return this.currentStep$.value?.stepIndex === this.steps$.value.length - 1; } isFirstStep(): boolean { - return this.currentStep$.value?.stepIndex - 1 === 0; + return this.currentStep$.value?.stepIndex === 0; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/themes/_content.scss b/src/pybind/mgr/dashboard/frontend/src/styles/themes/_content.scss index 88d19435a2f33..c4f529a2f4113 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/themes/_content.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/themes/_content.scss @@ -34,7 +34,8 @@ $content-theme: map-merge( text-secondary: vv.$dark, text-disabled: vv.$gray-500, icon-secondary: vv.$body-bg-alt, - field-01: colors.$gray-10 + field-01: colors.$gray-10, + interactive: vv.$primary ) ); -- 2.39.5