When creating a cluster, you can choose other clusters whose fede status is active as a template

frontend/src/app/view/federation/cluster-new/cluster-new.component.html

@@ -21,6 +21,50 @@ <h2>{{'NewCluster.name'| translate}}</h2>
             <label>{{'NewCluster.import'|translate}}</label>
           </clr-radio-wrapper>
         </clr-radio-container>
+
+        <!-- Whether to choose an existing template -->
+        <clr-toggle-container class="no-warp" clrInline *ngIf="isNewCluster">
+          <label>{{'NewCluster.chooseTemplate' | translate}}</label>
+          <clr-toggle-wrapper>
+            <input type="checkbox" clrToggle name="enableTemplate" formControlName="enableTemplate" [value]="false" />
+          </clr-toggle-wrapper>
+        </clr-toggle-container>
+
+        <div class="template-list" *ngIf="templateListFlag">
+          <div class="fed-select">
+            <clr-select-container class="no-warp">
+              <label>{{'CertificateDetail.federationName'| translate}}</label>
+              <select clrSelect name="federationName" formControlName="federationName"
+                (ngModelChange)="getFedClusterAll($event)">
+                <option *ngFor="let fed of fedList" value="{{fed.uuid}}">{{fed.name}}</option>
+              </select>
+            </clr-select-container>
+            <span *ngIf="templateFedLoading" class="spinner spinner-inline">
+              Loading...
+            </span>
+          </div>
+          <div class="fed-select">
+            <clr-select-container class="no-warp">
+              <label>{{'FederationDetail.clusterName'| translate}}</label>
+              <select clrSelect name="clusterName" formControlName="clusterName"
+                (ngModelChange)="getClusterDetail($event)">
+                <option *ngFor="let cluster of clusterList" value="{{cluster.uuid}}">{{cluster.name}}</option>
+              </select>
+            </clr-select-container>
+            <span *ngIf="templateClusterLoading" class="spinner spinner-inline">
+              Loading...
+            </span>
+          </div>
+          <clr-alert [clrAlertClosable]='false' clrAlertType="danger"
+          *ngIf="templateErrorFlag">
+          <clr-alert-item>
+            {{errorMessage}}
+          </clr-alert-item>
+        </clr-alert>
+
+        </div>
+
+
         <clr-input-container class="no-warp">
           <label>{{'CommonlyUse.name'| translate}}</label>
           <input clrInput formControlName="name" required (ngModelChange)="selectChange($event)" />
@@ -231,12 +275,12 @@ <h5>1. {{'NewCluster.pulsarServerCertificate'|translate}}:</h5>
             <clr-radio-container clrInline class="no-warp">
               <label>{{'NewCluster.server'|translate}}: </label>
               <clr-radio-wrapper>
-                <input type="radio" value='new' clrRadio name="pulsar_server_cert_info_radio" formControlName="pulsar_server_cert_info_radio"
+                <input type="radio" [value]='true' clrRadio name="pulsar_server_cert_info_radio" formControlName="pulsar_server_cert_info_radio"
                    >
                 <label>{{'NewCluster.addNew'|translate}}</label>
               </clr-radio-wrapper>
               <clr-radio-wrapper>
-                <input type="radio" clrRadio name="pulsar_server_cert_info_radio"  disabled  value=2 />
+                <input type="radio" clrRadio name="pulsar_server_cert_info_radio"  disabled  [value]='2' />
                 <label>{{'NewCluster.useExist'|translate}}</label>
               </clr-radio-wrapper>
             </clr-radio-container>
@@ -281,12 +325,12 @@ <h5>2. {{'NewCluster.certificate'|translate}}:</h5>
           <clr-radio-container clrInline class="no-warp">
             <label>{{'ExchangeNew.serviceType'|translate}}: </label>
             <clr-radio-wrapper>
-              <input type="radio" clrRadio name="serviceType" formControlName="serviceType" required value=1
+              <input type="radio" clrRadio name="serviceType" formControlName="serviceType" [value]='1'
                 (ngModelChange)="selectChange($event)" />
               <label>{{'ExchangeNew.loadBalancer'|translate}}</label>
             </clr-radio-wrapper>
             <clr-radio-wrapper>
-              <input type="radio" clrRadio name="serviceType" formControlName="serviceType" required value=2
+              <input type="radio" clrRadio name="serviceType" formControlName="serviceType" [value]='2'
                 (ngModelChange)="selectChange($event)" />
               <label>{{'ExchangeNew.nodePort'|translate}}</label>
             </clr-radio-wrapper>

frontend/src/app/view/federation/cluster-new/cluster-new.component.scss

@@ -85,4 +85,15 @@ clr-stepper-panel{
             }
         }
     }
+}
+.template-list {
+    .fed-select {
+        display: flex;
+        align-items: center;
+        .spinner {
+            position: relative;
+            top: 12px;
+            margin-left: 15px;
+        }
+    }
 }

frontend/src/app/view/federation/cluster-new/cluster-new.component.ts

@@ -34,6 +34,9 @@ export class ClusterNewComponent implements OnInit {
         name: [''],
         description: [''],
         clusterType: [''],
+        enableTemplate: [false],
+        federationName: [''],
+        clusterName: ['']
       }),
       external: this.formBuilder.group(
         ValidatorGroup([
@@ -86,14 +89,14 @@ export class ClusterNewComponent implements OnInit {
         cert: ['use'],
         site_portal_client_cert_mode: ['1'],
         site_portal_client_cert_uuid: [''],
-        site_portal_client_cert_mode_radio: {value: 'new'},
+        site_portal_client_cert_mode_radio: {value: true},
 
         site_portal_server_cert_mode: ['1'],
         site_portal_server_cert_uuid: [''],
-        site_portal_server_cert_mode_radio: {value: 'new'},
+        site_portal_server_cert_mode_radio: {value: true},
         pulsar_server_cert_info: ['1'],
         pulsar_server_cert_uuid: [''],
-        pulsar_server_cert_info_radio: {value: 'new'},
+        pulsar_server_cert_info_radio: [true],
       }),
       serviceType: this.formBuilder.group({
         serviceType: [null],
@@ -241,7 +244,6 @@ export class ClusterNewComponent implements OnInit {
           value: ''
         }
       ])),
-
       yaml: this.formBuilder.group({
         yaml: [''],
       })
@@ -253,6 +255,7 @@ export class ClusterNewComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.getFedList()
   }
 
   //support to create two type of exchange: create a new one or add an cluster
@@ -1076,5 +1079,87 @@ export class ClusterNewComponent implements OnInit {
 
   }
 
+
+  // Whether to enable template selection
+  get templateListFlag() {
+    return this.form.controls['info'].get('enableTemplate')?.value
+  }
+  fedList!:any 
+  clusterList!: any
+  fedUUID = ''
+  templateFedLoading = false
+  templateClusterLoading = false
+  templateErrorFlag = false
+  // This method is used to get the list of existing fed
+  getFedList() {
+    this.templateFedLoading = true
+    this.templateErrorFlag = false
+    this.fedservice.getFedList()
+    .subscribe((data: any) => {
+      this.fedList = data.data.filter((fed: {type: string}) => fed.type === 'FATE')
+      this.templateFedLoading = false
+    },
+    err => {
+      if (err.error.message) this.errorMessage = err.error.message
+      this.templateFedLoading = false
+      this.templateErrorFlag = true
+    });
+  }
+
+  // This method gets the following cluster list according to the currently selected fed
+  getFedClusterAll(fed_uuid: string) {
+    this.fedUUID = fed_uuid
+    this.templateClusterLoading = true
+    this.templateErrorFlag = false
+    this.fedservice.getFedParticipantList(fed_uuid)
+    .subscribe((data: any) => {
+      this.clusterList = data.data.clusters || [];
+      this.templateClusterLoading = false
+    },
+    err => {
+      if (err.error.message) this.errorMessage = err.error.message
+      this.templateClusterLoading = false
+      this.templateErrorFlag = true
+    }
+    );
+  }
+  // This method obtains details based on the currently selected cluster and fills in the form
+  getClusterDetail(cluster_uuid: string) {
+    this.fedservice.getClusterInfo(this.fedUUID, cluster_uuid).subscribe(
+      data => {
+        const detailInfo = data.data
+        if (detailInfo) {
+          // set form
+          this.form.controls['info'].get('description')?.setValue(detailInfo.description)
+
+          this.form.controls['external'].get('pulsarHost')?.setValue(detailInfo.access_info?.['pulsar-public-tls']?.host)
+          this.form.controls['external'].get('pulsarPort')?.setValue(detailInfo.access_info?.['pulsar-public-tls']?.port)
+          this.form.controls['external'].get('nginxHost')?.setValue(detailInfo.access_info?.nginx?.host)
+          this.form.controls['external'].get('nginxPort')?.setValue(detailInfo.access_info?.nginx?.port)
+
+          this.form.controls['endpoint'].get('endpoint_uuid')?.setValue(detailInfo.endpoint_uuid)
+          const endpoint = this.endpointlist.filter((ep: any) => ep.uuid === detailInfo.endpoint_uuid)
+          if (endpoint[0]) this.selectedEndpoint = endpoint[0]
+
+          this.form.controls['chart'].get('chart_uuid')?.setValue(detailInfo.chart_uuid)
+          this.form.controls['namespace'].get('namespace')?.setValue(detailInfo.chart_uuid)
+          this.form.controls['certificate'].get('site_portal_client_cert_mode')?.setValue(detailInfo.site_portal_client_cert_info?.binding_mode)
+          this.form.controls['certificate'].get('site_portal_client_cert_uuid')?.setValue(detailInfo.site_portal_client_cert_info?.uuid)
+          this.form.controls['certificate'].get('site_portal_server_cert_mode')?.setValue(detailInfo.site_portal_server_cert_info?.binding_mode)
+          this.form.controls['certificate'].get('site_portal_server_cert_uuid')?.setValue(detailInfo.site_portal_server_cert_info?.uuid)
+          this.form.controls['certificate'].get('pulsar_server_cert_info')?.setValue(detailInfo.pulsar_server_cert_info?.binding_mode)
+          this.form.controls['certificate'].get('pulsar_server_cert_uuid')?.setValue(detailInfo.pulsar_server_cert_info?.uuid)
+          this.form.controls['serviceType'].get('serviceType')?.setValue(detailInfo.type)
+        }
+
+      },
+      err => {
+        if (err.error.message) this.errorMessage = err.error.message
+        this.templateErrorFlag = true
+      }
+    )
+  }
+
+
 }
 

frontend/src/app/view/federation/fed-detail-fate/fed-detail-fate.component.ts

@@ -70,7 +70,7 @@ export class FedDetailFateComponent implements OnInit {
         this.exchange = this.participantList.exchange;
         this.exchangeInfoList = []
         if (this.exchange) {
-          const exchangeVersion = this.exchange.version.split('-')[0] || ''        
+          const exchangeVersion = this.exchange.version?.split('-')[0] || ''        
 
           for (const key in this.exchange.access_info) {
             const obj: any = {
@@ -86,7 +86,7 @@ export class FedDetailFateComponent implements OnInit {
           }
           this.clusterlist.forEach(cluster => {
             cluster.clusterList = []
-            const clusterVersion = cluster.version.split('-')[0]
+            const clusterVersion = cluster.version?.split('-')[0]
             if (clusterVersion !== exchangeVersion) {
               cluster.flag = true
             } else {

frontend/src/app/view/federation/fed-mg/fed-mg.component.ts

@@ -96,11 +96,11 @@ export class FedMgComponent implements OnInit {
         this.federationList = data.data;
         this.isPageLoading = false;
       },
-        err => {
-          if (err.error.message) this.errorMessage = err.error.message
-          this.isShowFedFailed = true
-          this.isPageLoading = false
-        });
+      err => {
+        if (err.error.message) this.errorMessage = err.error.message
+        this.isShowFedFailed = true
+        this.isPageLoading = false
+      });
   }
 
   isCreatedSubmit = false;

frontend/src/assets/i18n/en.json

@@ -270,7 +270,8 @@
     "pulsarMngPort": "Manager Port",
     "pulsarPort": "Port",
     "sslPort": "SSL Port",
-    "coresPerNode": "Cores Per Node"
+    "coresPerNode": "Cores Per Node",
+    "chooseTemplate": "Enable select an existing template"
   },
   "ExchangeNew": {
     "name": "Create a New Exchange",

frontend/src/assets/i18n/zh_CN.json

@@ -270,7 +270,8 @@
     "pulsarMngPort": "管理端口",
     "pulsarPort": "端口",
     "sslPort": "SSL 端口",
-    "coresPerNode": "单个节点核心数"
+    "coresPerNode": "单个节点核心数",
+    "chooseTemplate": "启用选择现有模板"
   },
   "ExchangeNew": {
     "name": "创建Exchange",