From: Aashish Sharma Date: Wed, 10 Dec 2025 07:12:40 +0000 (+0530) Subject: mgr/dashboard: carbonise multi-cluster forms X-Git-Tag: testing/wip-pdonnell-testing-20260108.183402~23^2~1 X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=ff02a7987ea4b483d398edd52cf73e25fb01f808;p=ceph-ci.git mgr/dashboard: carbonise multi-cluster forms Fixes: https://tracker.ceph.com/issues/74171 Signed-off-by: Aashish Sharma --- 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 fc2dd0b5610..0de4ea6404a 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 @@ -59,6 +59,7 @@ import { SmbClusterListComponent } from './ceph/smb/smb-cluster-list/smb-cluster import { SmbJoinAuthListComponent } from './ceph/smb/smb-join-auth-list/smb-join-auth-list.component'; import { SmbUsersgroupsListComponent } from './ceph/smb/smb-usersgroups-list/smb-usersgroups-list.component'; import { SmbOverviewComponent } from './ceph/smb/smb-overview/smb-overview.component'; +import { MultiClusterFormComponent } from './ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component'; @Injectable() export class PerformanceCounterBreadcrumbsResolver extends BreadcrumbsResolver { @@ -209,11 +210,25 @@ const routes: Routes = [ }, { path: 'manage-clusters', - component: MultiClusterListComponent, - data: { - breadcrumbs: 'Multi-Cluster/Manage Clusters' - }, + data: { breadcrumbs: 'Multi-Cluster/Manage Clusters' }, + children: [ + { path: '', component: MultiClusterListComponent }, + { + path: URLVerbs.CONNECT, + component: MultiClusterFormComponent, + data: { breadcrumbs: ActionLabels.CONNECT } + }, + { + path: `${URLVerbs.EDIT}/:name`, + component: MultiClusterFormComponent, + data: { breadcrumbs: ActionLabels.EDIT } + }, + { + path: `${URLVerbs.RECONNECT}/:name`, + component: MultiClusterFormComponent, + data: { breadcrumbs: ActionLabels.RECONNECT } + }, { path: 'performance-details', component: MultiClusterDetailsComponent 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 d5c73717eba..5fe7ac88d81 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 @@ -18,7 +18,8 @@ import { IconModule, IconService, TagModule, - SelectModule + SelectModule, + LayoutModule } from 'carbon-components-angular'; import Analytics from '@carbon/icons/es/analytics/16'; import CloseFilled from '@carbon/icons/es/close--filled/16'; @@ -121,7 +122,8 @@ import { TextLabelListComponent } from '~/app/shared/components/text-label-list/ IconModule, TagModule, TextLabelListComponent, - SelectModule + SelectModule, + LayoutModule ], declarations: [ MonitorComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component.html index 4bdb2ad45c9..ba249eacc9b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component.html @@ -1,226 +1,191 @@ - - {{ action | titlecase }} Cluster - - +
+
-
- {{ connectionMessage }} - - {{ connectionMessage }} - -
- -
- - This field is required. - - Please enter a valid URL. - - The hub cluster cannot be connected. - -
-
-
- -
- - This field is required. - - The chosen alias name is already in use. - -
-
-
- -
- - This field is required. - - A cluster with the chosen user is already connected. - -
-
-
- -
-
- - - - - - - This field is required. - -
-
-
-
- -
- -
-
- - -
-
-
- - -
-
-
- - -
- -
- - - This field is required. - Invalid SSL certificate. -
-
+ [formGroup]="remoteClusterForm" + novalidate> + +
{{ action | titlecase }} Cluster
+ + + + + + + +
+ + Cluster API URL + + + + + This field is required. + Please enter a valid URL. + The hub cluster cannot be connected. + + + Enter the Dashboard API URL. CLI: {{ clusterApiUrlCmd }} +
-
- - + +
+ + Alias Name + + + + + + This field is required. + + + The chosen alias name is already in use. + +
+ +
+ + Username + + + + + + This field is required. + + + A cluster with the chosen user is already connected. + + +
+ +
+ Password + + +
+ +
+ + + + + + +
+ +
+ + SSL + +
+ +
+ +
+ + + +
+ + + + The SSL certificate in PEM format. + + + + + This field is required. + + + Invalid SSL certificate. + + +
+ + + - +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component.ts index 98e68fc971b..fd0dd8ef80a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-form/multi-cluster-form.component.ts @@ -1,5 +1,6 @@ import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core'; import { AbstractControl, FormControl, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import _ from 'lodash'; import { Subscription } from 'rxjs'; @@ -33,47 +34,101 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy { clusterUsers: string[]; clusterUrlUserMap: Map; hubUrl: string; + loading = false; + formPatched = false; + clusterTokenStatus: { [key: string]: any } = {}; constructor( public activeModal: NgbActiveModal, public actionLabels: ActionLabelsI18n, public notificationService: NotificationService, - private multiClusterService: MultiClusterService + private multiClusterService: MultiClusterService, + private router: Router ) { this.subs.add( this.multiClusterService.subscribe((resp: any) => { this.hubUrl = resp['hub_url']; }) ); - this.createForm(); + this.prepareFormForAction(); } + ngOnInit(): void { - if (this.action === 'edit') { - this.remoteClusterForm.get('remoteClusterUrl').setValue(this.cluster.url); - this.remoteClusterForm.get('clusterAlias').setValue(this.cluster.cluster_alias); - this.remoteClusterForm.get('ssl').setValue(this.cluster.ssl_verify); - this.remoteClusterForm.get('ssl_cert').setValue(this.cluster.ssl_certificate); + this.createForm(); + const clusterName = this.router.url.split('/').pop(); + this.subs.add( + this.multiClusterService.subscribe((resp: any) => { + if (resp && resp['config']) { + this.clustersData = Object.values(resp['config']).flat() as MultiCluster[]; + this.cluster = this.clustersData.find((c) => c.name === clusterName); + [this.clusterAliasNames, this.clusterUrls, this.clusterUsers] = [ + 'cluster_alias', + 'url', + USER + ].map((prop) => this.clustersData.map((c) => (c as any)[prop])); + if (!this.formPatched && this.cluster) { + this.formPatched = true; + this.prepareEditForm(this.cluster); + this.prepareReconnectForm(this.cluster); + } + } + }) + ); + + this.subs.add( + this.multiClusterService.subscribeClusterTokenStatus((resp: object) => { + this.clusterTokenStatus = resp; + this.checkClusterConnectionStatus(); + }) + ); + } + + checkClusterConnectionStatus() { + if (this.clusterTokenStatus && this.clustersData) { + this.clustersData.forEach((cluster: MultiCluster) => { + const clusterStatus = this.clusterTokenStatus[cluster.name]; + if (clusterStatus !== undefined) { + cluster.cluster_connection_status = clusterStatus.status; + cluster.ttl = clusterStatus.time_left; + } else { + cluster.cluster_connection_status = 2; + } + if (cluster.cluster_alias === 'local-cluster') { + cluster.cluster_connection_status = 0; + } + }); } - if (this.action === 'reconnect') { - this.remoteClusterForm.get('remoteClusterUrl').setValue(this.cluster.url); + } + + prepareEditForm(cluster: MultiCluster) { + if (this.action === 'Edit') { + this.remoteClusterForm.get('remoteClusterUrl').setValue(cluster.url); this.remoteClusterForm.get('remoteClusterUrl').disable(); - this.remoteClusterForm.get('clusterAlias').setValue(this.cluster.cluster_alias); + this.remoteClusterForm.get('clusterAlias').setValue(cluster.cluster_alias); + this.remoteClusterForm.get('username').setValue(cluster.user); + this.remoteClusterForm.get('username').disable(); + this.remoteClusterForm.get('ssl').setValue(cluster.ssl_verify); + this.remoteClusterForm.get('ssl_cert').setValue(cluster.ssl_certificate); + } + } + + prepareReconnectForm(cluster: MultiCluster) { + if (this.action === 'Reconnect') { + this.remoteClusterForm.get('remoteClusterUrl').setValue(cluster.url); + this.remoteClusterForm.get('remoteClusterUrl').disable(); + this.remoteClusterForm.get('clusterAlias').setValue(cluster.cluster_alias); this.remoteClusterForm.get('clusterAlias').disable(); - this.remoteClusterForm.get('username').setValue(this.cluster.user); + this.remoteClusterForm.get('username').setValue(cluster.user); this.remoteClusterForm.get('username').disable(); - this.remoteClusterForm.get('ssl').setValue(this.cluster.ssl_verify); - this.remoteClusterForm.get('ssl_cert').setValue(this.cluster.ssl_certificate); + this.remoteClusterForm.get('ssl').setValue(cluster.ssl_verify); + this.remoteClusterForm.get('ssl_cert').setValue(cluster.ssl_certificate); } - [this.clusterAliasNames, this.clusterUrls, this.clusterUsers] = [ - 'cluster_alias', - 'url', - USER - ].map((prop) => this.clustersData?.map((cluster) => cluster[prop])); } createForm() { this.remoteClusterForm = new CdFormGroup({ username: new FormControl('', [ + Validators.required, CdValidators.custom('uniqueUrlandUser', (username: string) => { let remoteClusterUrl = ''; if ( @@ -86,23 +141,29 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy { remoteClusterUrl = this.remoteClusterForm.getValue('remoteClusterUrl'); } return ( + this.action !== 'Edit' && this.remoteClusterForm && this.clusterUrls?.includes(remoteClusterUrl) && this.clusterUsers?.includes(username) ); }) ]), - password: new FormControl( - null, - CdValidators.custom('requiredNotEdit', (value: string) => { - return this.action !== 'edit' && !value; - }) - ), + password: new FormControl(null, { + validators: [ + Validators.required, + CdValidators.custom('requiredNotEdit', (value: string) => { + return this.action !== 'Edit' && !value; + }) + ] + }), remoteClusterUrl: new FormControl(null, { validators: [ CdValidators.url, CdValidators.custom('hubUrlCheck', (remoteClusterUrl: string) => { - return this.action === 'connect' && remoteClusterUrl?.includes(this.hubUrl); + if (this.action === 'Connect' && remoteClusterUrl?.includes(this.hubUrl)) { + return true; + } + return false; }), Validators.required ] @@ -112,7 +173,7 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy { Validators.required, CdValidators.custom('uniqueName', (clusterAlias: string) => { return ( - (this.action === 'connect' || this.action === 'edit') && + (this.action === 'Connect' || this.action === 'Edit') && this.clusterAliasNames && this.clusterAliasNames.indexOf(clusterAlias) !== -1 && this.cluster?.cluster_alias && @@ -121,8 +182,8 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy { }) ] }), - ssl: new FormControl(false), ttl: new FormControl(15), + ssl: new FormControl(false), ssl_cert: new FormControl('', { validators: [ CdValidators.requiredIf({ @@ -137,6 +198,17 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy { this.subs.unsubscribe(); } + prepareFormForAction() { + const url = this.router.url; + if (url.startsWith('/multi-cluster/manage-clusters/connect')) { + this.action = this.actionLabels.CONNECT; + } else if (url.startsWith('/multi-cluster/manage-clusters/reconnect')) { + this.action = this.actionLabels.RECONNECT; + } else if (url.startsWith('/multi-cluster/manage-clusters/edit')) { + this.action = this.actionLabels.EDIT; + } + } + handleError(error: any): void { if (error.error.code === 'connection_refused') { this.connectionVerified = false; @@ -155,7 +227,10 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy { handleSuccess(message?: string): void { this.notificationService.show(NotificationType.success, message); this.submitAction.emit(); - this.activeModal.close(); + const currentRoute = '/multi-cluster/manage-clusters'; + this.multiClusterService.refreshMultiCluster(currentRoute); + this.checkClusterConnectionStatus(); + this.multiClusterService.isClusterAdded(true); } convertToHours(value: number): number { @@ -182,7 +257,7 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy { }; switch (this.action) { - case 'edit': + case 'Edit': this.subs.add( this.multiClusterService .editCluster( @@ -199,14 +274,14 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy { }) ); break; - case 'reconnect': + case 'Reconnect': this.subs.add( this.multiClusterService .reConnectCluster(updatedUrl, username, password, ssl, ssl_certificate, ttl) .subscribe(commonSubscribtion) ); break; - case 'connect': + case 'Connect': this.subs.add( this.multiClusterService .addCluster( diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.html index 79cd60c970f..0aab4463947 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.html @@ -54,6 +54,7 @@
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.ts index 2a0c2d628b4..7abe686107d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.ts @@ -22,12 +22,15 @@ import { Observable, Subscription } from 'rxjs'; import { SettingsService } from '~/app/shared/api/settings.service'; import { ModalCdsService } from '~/app/shared/services/modal-cds.service'; import { ListWithDetails } from '~/app/shared/classes/list-with-details.class'; +import { URLBuilderService } from '~/app/shared/services/url-builder.service'; +const BASE_URL = 'multi-cluster/manage-clusters'; @Component({ selector: 'cd-multi-cluster-list', templateUrl: './multi-cluster-list.component.html', styleUrls: ['./multi-cluster-list.component.scss'], - standalone: false + standalone: false, + providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }] }) export class MultiClusterListComponent extends ListWithDetails implements OnInit, OnDestroy { @ViewChild(TableComponent) @@ -39,7 +42,7 @@ export class MultiClusterListComponent extends ListWithDetails implements OnInit private subs = new Subscription(); permissions: Permissions; tableActions: CdTableAction[]; - clusterTokenStatus: object = {}; + clusterTokenStatus: { [key: string]: any } = {}; columns: Array = []; data: any; selection = new CdTableSelection(); @@ -63,7 +66,8 @@ export class MultiClusterListComponent extends ListWithDetails implements OnInit private cookieService: CookiesService, private settingsService: SettingsService, private cdsModalService: ModalCdsService, - private route: ActivatedRoute + private route: ActivatedRoute, + private urlBuilder: URLBuilderService ) { super(); this.tableActions = [ @@ -71,22 +75,22 @@ export class MultiClusterListComponent extends ListWithDetails implements OnInit permission: 'create', icon: Icons.add, name: this.actionLabels.CONNECT, - disable: (selection: CdTableSelection) => this.getDisable('connect', selection), - click: () => this.openRemoteClusterInfoModal('connect') + disable: (selection: CdTableSelection) => this.getDisable('Connect', selection), + routerLink: () => this.urlBuilder.getConnect() }, { permission: 'update', icon: Icons.edit, name: this.actionLabels.EDIT, disable: (selection: CdTableSelection) => this.getDisable('edit', selection), - click: () => this.openRemoteClusterInfoModal('edit') + routerLink: () => this.urlBuilder.getEdit(this.selection.first().name) }, { permission: 'update', icon: Icons.refresh, name: this.actionLabels.RECONNECT, disable: (selection: CdTableSelection) => this.getDisable('reconnect', selection), - click: () => this.openRemoteClusterInfoModal('reconnect') + routerLink: () => this.urlBuilder.getReconnect(this.selection.first().name) }, { permission: 'delete', @@ -101,7 +105,7 @@ export class MultiClusterListComponent extends ListWithDetails implements OnInit ngOnInit(): void { this.subs.add( - this.multiClusterService.subscribe((resp: object) => { + this.multiClusterService.subscribe((resp: any) => { if (resp && resp['config']) { this.hubUrl = resp['hub_url']; this.currentUrl = resp['current_url']; @@ -255,12 +259,12 @@ export class MultiClusterListComponent extends ListWithDetails implements OnInit if (this.hubUrl !== this.currentUrl) { return $localize`Please switch to the local-cluster to ${action} a remote cluster`; } - if (!selection.hasSelection && action !== 'connect') { + if (!selection.hasSelection && action !== 'Connect') { return $localize`Please select one or more clusters to ${action}`; } if (selection.hasSingleSelection) { const cluster = selection.first(); - if (cluster['cluster_alias'] === 'local-cluster' && action !== 'connect') { + if (cluster['cluster_alias'] === 'local-cluster' && action !== 'Connect') { return $localize`Cannot ${action} local cluster`; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts index 2514f1f87cd..c487d8cc291 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts @@ -39,7 +39,11 @@ export enum URLVerbs { EXPIRE = 'expire', /* Daemons */ - RESTART = 'Restart' + RESTART = 'Restart', + + /* Multi-cluster */ + CONNECT = 'connect', + RECONNECT = 'reconnect' } export enum ActionLabels { @@ -78,7 +82,11 @@ export enum ActionLabels { START = 'Start', STOP = 'Stop', REDEPLOY = 'Redeploy', - RESTART = 'Restart' + RESTART = 'Restart', + + /* Multi-cluster */ + CONNECT = 'connect', + RECONNECT = 'reconnect' } @Injectable({ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/url-builder.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/url-builder.service.ts index b06f307ad2e..b63489b8bce 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/url-builder.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/url-builder.service.ts @@ -47,4 +47,12 @@ export class URLBuilderService { getRecreate(item: string, absolute = true): string { return this.getURL(URLVerbs.RECREATE, absolute, item); } + + getConnect(absolute = true): string { + return this.getURL(URLVerbs.CONNECT, absolute); + } + + getReconnect(item: string, absolute = true): string { + return this.getURL(URLVerbs.RECONNECT, absolute, item); + } }