mgr/dashboard: remove the option for authentication with token in

multi-cluster form

Signed-off-by: Aashish Sharma <[email protected]>

Author: Aashish Sharma

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

@@ -54,9 +54,7 @@ def _proxy(self, method, base_url, path, params=None, payload=None, verify=False
     @CreatePermission
     @EndpointDoc("Authenticate to a remote cluster")
     def auth(self, url: str, cluster_alias: str, username: str,
-             password=None, token=None, hub_url=None, cluster_fsid=None,
-             prometheus_api_url=None, ssl_verify=False, ssl_certificate=None, ttl=None):
-
+             password=None, hub_url=None, ssl_verify=False, ssl_certificate=None, ttl=None):
         try:
             hub_fsid = mgr.get('config')['fsid']
         except KeyError:
@@ -101,12 +99,7 @@ def auth(self, url: str, cluster_alias: str, username: str,
                                           ssl_verify, ssl_certificate)
             return True
 
-        if token and cluster_fsid and prometheus_api_url:
-            _set_prometheus_targets(prometheus_api_url)
-            self.set_multi_cluster_config(cluster_fsid, username, url,
-                                          cluster_alias, token, prometheus_api_url,
-                                          ssl_verify, ssl_certificate)
-        return True
+        return False
 
     def check_cluster_connection(self, url, payload, username, ssl_verify, ssl_certificate):
         try:
@@ -200,7 +193,7 @@ def set_config(self, config: object):
     @Endpoint('PUT')
     @UpdatePermission
     # pylint: disable=W0613
-    def reconnect_cluster(self, url: str, username=None, password=None, token=None,
+    def reconnect_cluster(self, url: str, username=None, password=None,
                           ssl_verify=False, ssl_certificate=None, ttl=None):
         multicluster_config = self.load_multi_cluster_config()
         if username and password:

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

@@ -17,14 +17,6 @@
                         spacingClass="mb-3"
                         i18n>{{ connectionMessage }}
         </cd-alert-panel>
-        <cd-alert-panel type="info"
-                        spacingClass="mb-3"
-                        i18n
-                        *ngIf="connectionVerified !== undefined && !connectionVerified && connectionMessage === 'Connection refused' || remoteClusterForm.getValue('showToken')">
-        <p>You need to set this cluster's url as the cross origin url in the remote cluster you are trying to connect.
-          You can do it by running this CLI command in your remote cluster and proceed with authentication via token.</p>
-          <cd-code-block [codes]="[crossOriginCmd]"></cd-code-block>
-        </cd-alert-panel>
         <div class="form-group row">
           <label class="cd-col-form-label required"
                  for="remoteClusterUrl"
@@ -53,6 +45,10 @@
                   *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'endpoint')"
                   i18n>Please enter a valid URL.
             </span>
+            <span class="invalid-feedback"
+                  *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'hubUrlCheck')"
+                  i18n>The hub cluster cannot be connected.
+            </span>
           </div>
         </div>
         <div class="form-group row">
@@ -100,51 +96,7 @@
           </div>
         </div>
         <div class="form-group row"
-             *ngIf="remoteClusterForm.getValue('showToken') && action !== 'edit'">
-          <label class="cd-col-form-label required"
-                 for="clusterFsid"
-                 i18n>Cluster FSID
-          </label>
-          <div class="cd-col-form-input">
-            <input id="clusterFsid"
-                   name="clusterFsid"
-                   class="form-control"
-                   type="text"
-                   formControlName="clusterFsid">
-            <span class="invalid-feedback"
-                  *ngIf="remoteClusterForm.showError('clusterFsid', frm, 'required')"
-                  i18n>This field is required.
-            </span>
-          </div>
-        </div>
-        <div class="form-group row"
-             *ngIf="remoteClusterForm.getValue('showToken') && action !== 'edit'">
-          <label class="cd-col-form-label required"
-                 for="prometheusApiUrl"
-                 i18n>Prometheus API URL
-            <cd-helper>
-              <span>
-                <p>Enter the Prometheus API URL. You can retrieve it from the CLI with: <b>{{ prometheusApiUrlCmd }} </b>
-                  <cd-copy-2-clipboard-button [source]="prometheusApiUrlCmd"
-                                              [byId]="false"></cd-copy-2-clipboard-button>
-                </p>
-              </span>
-            </cd-helper>
-          </label>
-          <div class="cd-col-form-input">
-            <input id="prometheusApiUrl"
-                   name="prometheusApiUrl"
-                   class="form-control"
-                   type="text"
-                   formControlName="prometheusApiUrl">
-            <span class="invalid-feedback"
-                  *ngIf="remoteClusterForm.showError('prometheusApiUrl', frm, 'required')"
-                  i18n>This field is required.
-            </span>
-          </div>
-        </div>
-        <div class="form-group row"
-             *ngIf="!remoteClusterForm.getValue('showToken') && !showCrossOriginError && action !== 'edit'">
+             *ngIf="action !== 'edit'">
           <label class="cd-col-form-label required"
                  for="password"
                  i18n>Password
@@ -172,24 +124,7 @@
           </div>
         </div>
         <div class="form-group row"
-             *ngIf="remoteClusterForm.getValue('showToken') && action !== 'edit'">
-          <label class="cd-col-form-label required"
-                 for="apiToken"
-                 i18n>Token
-          </label>
-          <div class="cd-col-form-input">
-            <input id="apiToken"
-                   name="apiToken"
-                   class="form-control"
-                   type="text"
-                   formControlName="apiToken">
-            <span class="invalid-feedback"
-                  *ngIf="remoteClusterForm.showError('apiToken', frm, 'required')"
-                  i18n>This field is required.</span>
-          </div>
-        </div>
-        <div class="form-group row"
-             *ngIf="!remoteClusterForm.getValue('showToken') && action !== 'edit'">
+             *ngIf="action !== 'edit'">
           <label class="cd-col-form-label"
                  for="ttl"
                  i18n>Login Expiration</label>
@@ -206,6 +141,24 @@
             </select>
           </div>
         </div>
+        <!--
+        <div class="form-group row"
+             *ngIf="action !== 'edit'">
+          <label class="cd-col-form-label required"
+                 for="apiToken"
+                 i18n>Token
+          </label>
+          <div class="cd-col-form-input">
+            <input id="apiToken"
+                   name="apiToken"
+                   class="form-control"
+                   type="text"
+                   formControlName="apiToken">
+            <span class="invalid-feedback"
+                  *ngIf="remoteClusterForm.showError('apiToken', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
         <div class="form-group row"
              *ngIf="action !== 'edit'">
           <div class="cd-col-form-offset">
@@ -221,7 +174,7 @@
                      i18n>Auth with token</label>
             </div>
           </div>
-        </div>
+        </div> -->
         <!-- ssl -->
         <div class="form-group row">
           <div class="cd-col-form-offset">

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

@@ -23,28 +23,30 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
   readonly ipv4Rgx = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/i;
   readonly ipv6Rgx = /^(?:[a-f0-9]{1,4}:){7}[a-f0-9]{1,4}$/i;
   clusterApiUrlCmd = 'ceph mgr services';
-  prometheusApiUrlCmd = 'ceph config get mgr mgr/dashboard/PROMETHEUS_API_HOST';
-  crossOriginCmd = `ceph dashboard set-cross-origin-url ${window.location.origin}`;
   remoteClusterForm: CdFormGroup;
-  showToken = false;
   connectionVerified: boolean;
   connectionMessage = '';
   private subs = new Subscription();
-  showCrossOriginError = false;
   action: string;
   cluster: MultiCluster;
   clustersData: MultiCluster[];
   clusterAliasNames: string[];
   clusterUrls: string[];
   clusterUsers: string[];
   clusterUrlUserMap: Map<string, string>;
+  hubUrl: string;
 
   constructor(
     public activeModal: NgbActiveModal,
     public actionLabels: ActionLabelsI18n,
     public notificationService: NotificationService,
     private multiClusterService: MultiClusterService
   ) {
+    this.subs.add(
+      this.multiClusterService.subscribe((resp: any) => {
+        this.hubUrl = resp['hub_url'];
+      })
+    );
     this.createForm();
   }
   ngOnInit(): void {
@@ -62,8 +64,6 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
       this.remoteClusterForm.get('clusterAlias').disable();
       this.remoteClusterForm.get('username').setValue(this.cluster.user);
       this.remoteClusterForm.get('username').disable();
-      this.remoteClusterForm.get('clusterFsid').setValue(this.cluster.name);
-      this.remoteClusterForm.get('clusterFsid').disable();
       this.remoteClusterForm.get('ssl').setValue(this.cluster.ssl_verify);
       this.remoteClusterForm.get('ssl_cert').setValue(this.cluster.ssl_certificate);
     }
@@ -76,7 +76,7 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
 
   createForm() {
     this.remoteClusterForm = new CdFormGroup({
-      showToken: new FormControl(false),
+      // showToken: new FormControl(false),
       username: new FormControl('', [
         CdValidators.custom('uniqueUrlandUser', (username: string) => {
           let remoteClusterUrl = '';
@@ -96,16 +96,6 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
           );
         })
       ]),
-      clusterFsid: new FormControl('', [
-        CdValidators.requiredIf({
-          showToken: true
-        })
-      ]),
-      prometheusApiUrl: new FormControl('', [
-        CdValidators.requiredIf({
-          showToken: true
-        })
-      ]),
       password: new FormControl('', []),
       remoteClusterUrl: new FormControl(null, {
         validators: [
@@ -120,14 +110,17 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
               );
             }
           }),
+          CdValidators.custom('hubUrlCheck', (remoteClusterUrl: string) => {
+            return this.action === 'connect' && remoteClusterUrl?.includes(this.hubUrl);
+          }),
           Validators.required
         ]
       }),
-      apiToken: new FormControl('', [
-        CdValidators.requiredIf({
-          showToken: true
-        })
-      ]),
+      // apiToken: new FormControl('', [
+      //   CdValidators.requiredIf({
+      //     showToken: true
+      //   })
+      // ]),
       clusterAlias: new FormControl(null, {
         validators: [
           Validators.required,
@@ -159,9 +152,7 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
   handleError(error: any): void {
     if (error.error.code === 'connection_refused') {
       this.connectionVerified = false;
-      this.showCrossOriginError = true;
       this.connectionMessage = error.error.detail;
-      this.crossOriginCmd = `ceph config set mgr mgr/dashboard/cross_origin_url ${window.location.origin} `;
     } else {
       this.connectionVerified = false;
       this.connectionMessage = error.error.detail;
@@ -189,9 +180,6 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
     const clusterAlias = this.remoteClusterForm.getValue('clusterAlias');
     const username = this.remoteClusterForm.getValue('username');
     const password = this.remoteClusterForm.getValue('password');
-    const token = this.remoteClusterForm.getValue('apiToken');
-    const clusterFsid = this.remoteClusterForm.getValue('clusterFsid');
-    const prometheusApiUrl = this.remoteClusterForm.getValue('prometheusApiUrl');
     const ssl = this.remoteClusterForm.getValue('ssl');
     const ttl = this.convertToHours(this.remoteClusterForm.getValue('ttl'));
     const ssl_certificate = this.remoteClusterForm.getValue('ssl_cert')?.trim();
@@ -219,7 +207,7 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
       case 'reconnect':
         this.subs.add(
           this.multiClusterService
-            .reConnectCluster(updatedUrl, username, password, token, ssl, ssl_certificate, ttl)
+            .reConnectCluster(updatedUrl, username, password, ssl, ssl_certificate, ttl)
             .subscribe(commonSubscribtion)
         );
         break;
@@ -231,10 +219,7 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
               clusterAlias,
               username,
               password,
-              token,
               window.location.origin,
-              clusterFsid,
-              prometheusApiUrl,
               ssl,
               ssl_certificate,
               ttl
@@ -247,10 +232,6 @@ export class MultiClusterFormComponent implements OnInit, OnDestroy {
     }
   }
 
-  toggleToken() {
-    this.showToken = !this.showToken;
-  }
-
   fileUpload(files: FileList, controlName: string) {
     const file: File = files[0];
     const reader = new FileReader();

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

@@ -19,6 +19,7 @@ import { MultiCluster } from '~/app/shared/models/multi-cluster';
 import { Router } from '@angular/router';
 import { CookiesService } from '~/app/shared/services/cookie.service';
 import { Observable, Subscription } from 'rxjs';
+import { SettingsService } from '~/app/shared/api/settings.service';
 
 @Component({
   selector: 'cd-multi-cluster-list',
@@ -55,7 +56,8 @@ export class MultiClusterListComponent implements OnInit, OnDestroy {
     private notificationService: NotificationService,
     private authStorageService: AuthStorageService,
     private modalService: ModalService,
-    private cookieService: CookiesService
+    private cookieService: CookiesService,
+    private settingsService: SettingsService
   ) {
     this.tableActions = [
       {
@@ -162,6 +164,8 @@ export class MultiClusterListComponent implements OnInit, OnDestroy {
         this.checkClusterConnectionStatus();
       })
     );
+
+    this.managedByConfig$ = this.settingsService.getValues('MANAGED_BY_CLUSTERS');
   }
 
   ngOnDestroy(): void {

src/pybind/mgr/dashboard/frontend/src/app/shared/api/multi-cluster.service.ts

@@ -128,10 +128,7 @@ export class MultiClusterService {
     clusterAlias: string,
     username: string,
     password: string,
-    token = '',
     hub_url = '',
-    clusterFsid = '',
-    prometheusApiUrl = '',
     ssl = false,
     cert = '',
     ttl: number
@@ -141,10 +138,7 @@ export class MultiClusterService {
       cluster_alias: clusterAlias,
       username,
       password,
-      token,
       hub_url,
-      cluster_fsid: clusterFsid,
-      prometheus_api_url: prometheusApiUrl,
       ssl_verify: ssl,
       ssl_certificate: cert,
       ttl: ttl
@@ -155,7 +149,6 @@ export class MultiClusterService {
     url: any,
     username: string,
     password: string,
-    token = '',
     ssl = false,
     cert = '',
     ttl: number
@@ -164,7 +157,6 @@ export class MultiClusterService {
       url,
       username,
       password,
-      token,
       ssl_verify: ssl,
       ssl_certificate: cert,
       ttl: ttl