Skip to content

Commit 984780e

Browse files
nizamial09nizamial09
committed
mgr/dashboard: carbonize the wizard component
Fixes: https://tracker.ceph.com/issues/68103 Signed-off-by: Nizamudeen A <[email protected]>
1 parent 1234ac5 commit 984780e

19 files changed

+501
-406
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const routes: Routes = [
108108
redirectTo: 'dashboard',
109109
backend: 'cephadm'
110110
},
111-
breadcrumbs: 'Expand Cluster'
111+
breadcrumbs: 'Cluster/Expand Cluster'
112112
}
113113
},
114114
{

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@ import { NgModule } from '@angular/core';
33
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { RouterModule } from '@angular/router';
55

6-
import { ComboBoxModule, DropdownModule, CheckboxModule } from 'carbon-components-angular';
6+
import {
7+
ComboBoxModule,
8+
DropdownModule,
9+
CheckboxModule,
10+
ButtonModule,
11+
GridModule,
12+
ProgressIndicatorModule
13+
} from 'carbon-components-angular';
714

815
import { TreeModule } from '@circlon/angular-tree-component';
916
import {
@@ -92,7 +99,10 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
9299
DashboardV3Module,
93100
ComboBoxModule,
94101
DropdownModule,
95-
CheckboxModule
102+
CheckboxModule,
103+
GridModule,
104+
ProgressIndicatorModule,
105+
ButtonModule
96106
],
97107
declarations: [
98108
HostsComponent,

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster-review.component.html‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,57 @@
1-
<div class="row">
2-
<div class="col-lg-3">
1+
<div cdsRow>
2+
<div cdsCol>
33
<fieldset>
44
<legend class="cd-header"
55
i18n>Cluster Resources</legend>
66
<table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md">
7-
<tr>
8-
<td i18n
9-
class="bold">Hosts</td>
10-
<td>{{ hostsCount }}</td>
11-
</tr>
12-
<tr *ngIf="!isSimpleDeployment; else simpleDeploymentTextTpl">
13-
<td>
14-
<dl>
15-
<dt>
16-
<p i18n>Storage Capacity</p>
17-
</dt>
18-
<dd>
19-
<p i18n>Number of devices</p>
20-
</dd>
21-
<dd>
22-
<p i18n>Raw capacity</p>
23-
</dd>
24-
</dl>
25-
</td>
26-
<td class="pt-5"><p>{{ totalDevices }}</p><p>
27-
{{ totalCapacity | dimlessBinary }}</p></td>
28-
</tr>
29-
<tr>
30-
<td i18n
31-
class="bold">CPUs</td>
32-
<td>{{ totalCPUs | empty }}</td>
33-
</tr>
34-
<tr>
35-
<td i18n
36-
class="bold">Memory</td>
37-
<td>{{ totalMemory | empty }}</td>
38-
</tr>
7+
<tbody>
8+
<tr>
9+
<td i18n
10+
class="bold">Hosts</td>
11+
<td>{{ hostsCount }}</td>
12+
</tr>
13+
<tr *ngIf="!isSimpleDeployment; else simpleDeploymentTextTpl">
14+
<td>
15+
<dl>
16+
<dt>
17+
<p i18n>Storage Capacity</p>
18+
</dt>
19+
<dd>
20+
<p i18n>Number of devices</p>
21+
</dd>
22+
<dd>
23+
<p i18n>Raw capacity</p>
24+
</dd>
25+
</dl>
26+
</td>
27+
<td class="pt-5"><p>{{ totalDevices }}</p><p>
28+
{{ totalCapacity | dimlessBinary }}</p></td>
29+
</tr>
30+
<tr>
31+
<td i18n
32+
class="bold">CPUs</td>
33+
<td>{{ totalCPUs | empty }}</td>
34+
</tr>
35+
<tr>
36+
<td i18n
37+
class="bold">Memory</td>
38+
<td>{{ totalMemory | empty }}</td>
39+
</tr>
40+
</tbody>
3941
</table>
4042
</fieldset>
4143
</div>
42-
43-
<div class="col-lg-9">
44-
<legend i18n
45-
class="cd-header">Host Details</legend>
46-
<cd-hosts [hiddenColumns]="['services', 'status']"
47-
[hideToolHeader]="true"
48-
[hasTableDetails]="false"
49-
[showGeneralActionsOnly]="true"
50-
[showExpandClusterBtn]="false">
44+
</div>
45+
<div cdsRow>
46+
<div cdsCol>
47+
<legend i18n
48+
class="cd-header">Host Details</legend>
49+
<cd-hosts [hiddenColumns]="['service_instances', 'status']"
50+
[hideToolHeader]="true"
51+
[hasTableDetails]="false"
52+
[showGeneralActionsOnly]="true"
53+
[showExpandClusterBtn]="false"
54+
[showInlineActions]="false">
5155
</cd-hosts>
5256
</div>
5357
</div>

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html‎

Lines changed: 70 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div class="container h-75"
22
*ngIf="startClusterCreation">
3-
<div class="row h-100 justify-content-center align-items-center">
3+
<div class="h-100 justify-content-center align-items-center"
4+
cdsRow>
45
<div class="blank-page">
56
<!-- htmllint img-req-src="false" -->
67
<img [src]="projectConstants.cephLogo"
@@ -13,12 +14,12 @@
1314
<h4 class="text-center"
1415
i18n>Please expand your cluster first</h4>
1516
<div class="text-center">
16-
<button class="btn btn-accent m-2"
17+
<button cdsButton="primary"
1718
name="expand-cluster"
1819
(click)="createCluster()"
1920
aria-label="Expand Cluster"
2021
i18n>Expand Cluster</button>
21-
<button class="btn btn-light"
22+
<button cdsButton="secondary"
2223
name="skip-cluster-creation"
2324
aria-label="Skip"
2425
(click)="skipClusterCreation()"
@@ -29,70 +30,77 @@
2930
</div>
3031
</div>
3132

32-
<div class="card"
33+
<div cdsRow
34+
class="form"
3335
*ngIf="!startClusterCreation">
34-
<div class="card-header"
35-
i18n>Expand Cluster</div>
36-
<div class="container-fluid">
36+
<div cdsCol
37+
[columnNumbers]="{'lg': 2, 'md': 2, 'sm': 2}"
38+
class="indicator-wrapper">
39+
40+
<div class="form-header"
41+
i18n>Expand Cluster</div>
3742
<cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
38-
<div class="card-body vertical-line">
39-
<ng-container [ngSwitch]="currentStep?.stepIndex">
40-
<div *ngSwitchCase="'1'"
41-
class="ms-5">
42-
<h4 class="title"
43-
i18n>Add Hosts</h4>
44-
<br>
45-
<cd-hosts [hiddenColumns]="['services']"
46-
[hideMaintenance]="true"
47-
[hasTableDetails]="false"
48-
[showGeneralActionsOnly]="true"
49-
[showExpandClusterBtn]="false"></cd-hosts>
50-
</div>
51-
<div *ngSwitchCase="'2'"
52-
class="ms-5">
53-
<h4 class="title"
54-
i18n>Create OSDs</h4>
55-
<div class="alignForm">
56-
<cd-osd-form [hideTitle]="true"
57-
[hideSubmitBtn]="true"
58-
(emitDriveGroup)="setDriveGroup($event)"
59-
(emitDeploymentOption)="setDeploymentOptions($event)"
60-
(emitMode)="setDeploymentMode($event)"></cd-osd-form>
61-
</div>
62-
</div>
63-
<div *ngSwitchCase="'3'"
64-
class="ms-5">
65-
<h4 class="title"
66-
i18n>Create Services</h4>
67-
<br>
68-
<cd-services [hasDetails]="false"
69-
[hiddenServices]="['mon', 'mgr', 'crash', 'agent']"
70-
[hiddenColumns]="['status.running', 'status.size', 'status.last_refresh']"
71-
[routedModal]="false"></cd-services>
72-
</div>
73-
<div *ngSwitchCase="'4'"
74-
class="ms-5">
75-
<cd-create-cluster-review></cd-create-cluster-review>
43+
</div>
44+
45+
<div cdsCol
46+
[columnNumbers]="{'lg': 14, 'md': 14, 'sm': 14}">
47+
<ng-container [ngSwitch]="currentStep?.stepIndex">
48+
<div *ngSwitchCase="'0'"
49+
class="ms-5">
50+
<h4 class="title"
51+
i18n>Add Hosts</h4>
52+
53+
<cd-hosts [hiddenColumns]="['service_instances']"
54+
[hideMaintenance]="true"
55+
[hasTableDetails]="false"
56+
[showGeneralActionsOnly]="true"
57+
[showExpandClusterBtn]="false"></cd-hosts>
58+
</div>
59+
<div *ngSwitchCase="'1'"
60+
class="ms-5">
61+
<h4 class="title"
62+
i18n>Create OSDs</h4>
63+
<div class="alignForm">
64+
<cd-osd-form [hideTitle]="true"
65+
[hideSubmitBtn]="true"
66+
(emitDriveGroup)="setDriveGroup($event)"
67+
(emitDeploymentOption)="setDeploymentOptions($event)"
68+
(emitMode)="setDeploymentMode($event)"></cd-osd-form>
7669
</div>
77-
</ng-container>
70+
</div>
71+
<div *ngSwitchCase="'2'"
72+
class="ms-5">
73+
<h4 class="title"
74+
i18n>Create Services</h4>
75+
<cd-services [hasDetails]="false"
76+
[hiddenServices]="['mon', 'mgr', 'crash', 'agent']"
77+
[hiddenColumns]="['status.running', 'status.size', 'status.last_refresh']"
78+
[routedModal]="false"></cd-services>
79+
</div>
80+
<div *ngSwitchCase="'3'"
81+
class="ms-5">
82+
<cd-create-cluster-review></cd-create-cluster-review>
83+
</div>
84+
</ng-container>
85+
<div cdsRow
86+
class="m-5">
87+
<button cdsButton="secondary"
88+
class="me-3"
89+
id="skipStepBtn"
90+
(click)="onSkip()"
91+
aria-label="Skip this step"
92+
*ngIf="stepTitles[currentStep?.stepIndex]?.label === 'Create OSDs'"
93+
i18n>Skip</button>
94+
<cd-back-button buttonType="secondary"
95+
aria-label="Close"
96+
(backAction)="onPreviousStep()"
97+
[name]="showCancelButtonLabel()"></cd-back-button>
98+
<button cdsButton="primary"
99+
(click)="onNextStep()"
100+
aria-label="Next"
101+
i18n>{{ showSubmitButtonLabel() }}</button>
78102
</div>
79103
</div>
80-
<div class="card-footer">
81-
<button class="btn btn-accent m-2 float-end"
82-
(click)="onNextStep()"
83-
aria-label="Next"
84-
i18n>{{ showSubmitButtonLabel() }}</button>
85-
<cd-back-button class="m-2 float-end"
86-
aria-label="Close"
87-
(backAction)="onPreviousStep()"
88-
[name]="showCancelButtonLabel()"></cd-back-button>
89-
<button class="btn btn-light m-2 me-4 float-end"
90-
id="skipStepBtn"
91-
(click)="onSkip()"
92-
aria-label="Skip this step"
93-
*ngIf="stepTitles[currentStep.stepIndex - 1] === 'Create OSDs'"
94-
i18n>Skip</button>
95-
</div>
96104
</div>
97105

98106
<ng-template #skipConfirmTpl>

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { WizardStepsService } from '~/app/shared/services/wizard-steps.service';
3232
import { DriveGroup } from '../osd/osd-form/drive-group.model';
3333
import { Location } from '@angular/common';
3434
import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
35+
import { Step } from 'carbon-components-angular';
3536

3637
@Component({
3738
selector: 'cd-create-cluster',
@@ -45,7 +46,23 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
4546
currentStepSub: Subscription;
4647
permissions: Permissions;
4748
projectConstants: typeof AppConstants = AppConstants;
48-
stepTitles = ['Add Hosts', 'Create OSDs', 'Create Services', 'Review'];
49+
stepTitles: Step[] = [
50+
{
51+
label: 'Add Hosts'
52+
},
53+
{
54+
label: 'Create OSDs',
55+
complete: false
56+
},
57+
{
58+
label: 'Create Services',
59+
complete: false
60+
},
61+
{
62+
label: 'Review',
63+
complete: false
64+
}
65+
];
4966
startClusterCreation = false;
5067
observables: any = [];
5168
modalRef: NgbModalRef;
@@ -79,10 +96,13 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
7996
.subscribe((step: WizardStepModel) => {
8097
this.currentStep = step;
8198
});
82-
this.currentStep.stepIndex = 1;
99+
this.currentStep.stepIndex = 0;
83100
}
84101

85102
ngOnInit(): void {
103+
this.stepTitles.forEach((steps, index) => {
104+
steps.onClick = () => (this.currentStep.stepIndex = index);
105+
});
86106
this.route.queryParams.subscribe((params) => {
87107
// reading 'welcome' value true/false to toggle expand-cluster wizand view and welcome view
88108
const showWelcomeScreen = params['welcome'];
@@ -97,10 +117,14 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
97117
});
98118

99119
this.stepTitles.forEach((stepTitle) => {
100-
this.stepsToSkip[stepTitle] = false;
120+
this.stepsToSkip[stepTitle.label] = false;
101121
});
102122
}
103123

124+
onStepClick(step: WizardStepModel) {
125+
this.wizardStepsService.setCurrentStep(step);
126+
}
127+
104128
createCluster() {
105129
this.startClusterCreation = false;
106130
}
@@ -236,8 +260,8 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
236260
}
237261

238262
onSkip() {
239-
const stepTitle = this.stepTitles[this.currentStep.stepIndex - 1];
240-
this.stepsToSkip[stepTitle] = true;
263+
const stepTitle = this.stepTitles[this.currentStep.stepIndex];
264+
this.stepsToSkip[stepTitle.label] = true;
241265
this.onNextStep();
242266
}
243267

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
[maxLimit]="25"
1919
(setExpandedRow)="setExpandedRow($event)"
2020
(updateSelection)="updateSelection($event)"
21-
[toolHeader]="!hideToolHeader">
21+
[toolHeader]="!hideToolHeader"
22+
[showMenu]="showMenu">
2223
<div class="table-actions">
2324
<cd-table-actions [permission]="permissions.hosts"
2425
[selection]="selection"

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
8282
@Input()
8383
showExpandClusterBtn = true;
8484

85+
@Input()
86+
showInlineActions = true;
87+
8588
permissions: Permissions;
8689
columns: Array<CdTableColumn> = [];
8790
hosts: Array<object> = [];

0 commit comments

Comments
 (0)