Support GKE regional or zonal clusters

https://github.com/rancher/rancher/issues/22045

lib/shared/addon/components/cluster-driver/driver-googlegke/component.js

@@ -71,8 +71,12 @@ const diskType = [
   }
 ]
 
+const REGIONS = ['asia-east1', 'asia-east2', 'asia-northeast1', 'asia-northeast2', 'asia-south1', 'asia-southeast1', 'australia-southeast1', 'europe-north1', 'europe-west1', 'europe-west2', 'europe-west3', 'europe-west4', 'europe-west6', 'northamerica-northeast1', 'southamerica-east1', 'us-central1', 'us-east1', 'us-east4', 'us-west1', 'us-west2']
+
 const DEFAULT_AUTH_SCOPES = ['devstorage.read_only', 'logging.write', 'monitoring', 'servicecontrol', 'service.management.readonly', 'trace.append']
 
+const ZONE_TYPE = 'zonal';
+const REGION_TYPE = 'regional';
 
 export default Component.extend(ClusterDriver, {
   intl: service(),
@@ -94,6 +98,7 @@ export default Component.extend(ClusterDriver, {
   diskTypeContent:        diskType,
   scopeConfig:            {},
   hideNewField:           false,
+  locationType:           ZONE_TYPE,
 
   isNew:                  equal('mode', 'new'),
   editing:                equal('mode', 'edit'),
@@ -116,6 +121,7 @@ export default Component.extend(ClusterDriver, {
         maxNodeCount:       5,
         imageType:          'UBUNTU',
         diskType:           'pd-standard',
+        region:             'us-west2',
         taints:             [],
       });
 
@@ -193,7 +199,13 @@ export default Component.extend(ClusterDriver, {
       }
     }
 
-    set(this, 'initialMasterVersion', get(this, 'config.masterVersion'));
+    setProperties(this, {
+      initialMasterVersion: get(this, 'config.masterVersion'),
+      regionChoices:        REGIONS.map((region) => {
+        return { name: region }
+      }),
+      locationType: get(this, 'config.zone') ? ZONE_TYPE : REGION_TYPE,
+    })
   },
 
   actions: {
@@ -410,6 +422,10 @@ export default Component.extend(ClusterDriver, {
 
   locationContent: computed('config.zone', function() {
     const zone = get(this, 'config.zone')
+
+    if ( !zone ) {
+      return [];
+    }
     const arr = zone.split('-')
     const locationName = `${ arr[0] }-${ arr[1] }`
     const zoneChoices = get(this, 'zoneChoices')
@@ -502,7 +518,7 @@ export default Component.extend(ClusterDriver, {
       data:   {
         credentials: get(this, 'config.credential'),
         projectId:   get(this, 'config.projectId'),
-        zone:        get(this, 'config.zone'),
+        zone:        get(this, 'config.zone') || `${ get(this, 'config.region') }-b`,
       }
     }).then((xhr) => {
       const out = xhr.body;
@@ -525,7 +541,7 @@ export default Component.extend(ClusterDriver, {
       data:   {
         credentials: get(this, 'config.credential'),
         projectId:   get(this, 'config.projectId'),
-        zone:        get(this, 'config.zone'),
+        zone:        get(this, 'config.zone') || `${ get(this, 'config.region') }-b`,
       }
     }).then((xhr) => {
       const out = xhr.body.items;
@@ -568,7 +584,7 @@ export default Component.extend(ClusterDriver, {
 
   fetchSubnetworks() {
     const zone = get(this, 'config.zone')
-    const zoneSplit = zone.split('-')
+    const locationType = get(this, 'locationType');
 
     return get(this, 'globalStore').rawRequest({
       url:    '/meta/gkeSubnetworks',
@@ -576,7 +592,7 @@ export default Component.extend(ClusterDriver, {
       data:   {
         credentials: get(this, 'config.credential'),
         projectId:   get(this, 'config.projectId'),
-        region:      `${ zoneSplit[0] }-${ zoneSplit[1] }`,
+        region:      locationType === ZONE_TYPE ? `${ zone.split('-')[0] }-${ zone.split('-')[1] }` : get(this, 'config.region'),
       }
     }).then((xhr) => {
       const out = xhr.body.items || [];
@@ -678,6 +694,14 @@ export default Component.extend(ClusterDriver, {
   willSave() {
     const config = get(this, 'config') || {}
 
+    const locationType = get(this, 'locationType');
+
+    if ( locationType === ZONE_TYPE ) {
+      set(config, 'region', null);
+    } else {
+      set(config, 'zone', null);
+    }
+
     if (!get(config, 'enableNodepoolAutoscaling')) {
       setProperties(config, {
         minNodeCount: 0,

lib/shared/addon/components/cluster-driver/driver-googlegke/template.hbs

@@ -45,43 +45,90 @@
       <div class="row">
         <div class="col span-6">
           <label class="acc-label">
-            {{t "clusterNew.googlegke.zone.label"}}
+            {{t "clusterNew.googlegke.locationType.label"}}
           </label>
           {{#input-or-display
              editable=isNew
-             value=config.zone
+             value=locationType
           }}
-            {{new-select
-              classNames="form-control select-algin-checkbox"
-              optionValuePath="name"
-              optionLabelPath="name"
-              content=zoneChoices
-              value=config.zone
-              prompt="clusterNew.googlegke.zone.prompt"
-              localizedPrompt=true
-              disabled=editing
-            }}
+            <div class="radio">
+              <label>
+                {{radio-button selection=locationType value="zonal"}}
+                {{t "clusterNew.googlegke.locationType.zone"}}
+              </label>
+            </div>
+            <div class="radio">
+              <label>
+                {{radio-button selection=locationType value="regional"}}
+                {{t "clusterNew.googlegke.locationType.region"}}
+              </label>
+            </div>
           {{/input-or-display}}
         </div>
-        {{#unless hideNewField}}
+        {{#if (eq locationType "zonal")}}
+          <div class="col span-4">
+            <label class="acc-label">
+              {{t "clusterNew.googlegke.zone.label"}}
+            </label>
+            {{#input-or-display
+              editable=isNew
+              value=config.zone
+            }}
+              {{new-select
+                classNames="form-control select-algin-checkbox"
+                optionValuePath="name"
+                optionLabelPath="name"
+                content=zoneChoices
+                value=config.zone
+                prompt="clusterNew.googlegke.zone.prompt"
+                localizedPrompt=true
+                disabled=editing
+              }}
+            {{/input-or-display}}
+          </div>
+          {{#unless hideNewField}}
+            <div class="col span-2">
+              <label class="acc-label">
+                {{t "clusterNew.googlegke.locations.label"}}
+              </label>
+              {{#each locationContent as |location|}}
+                <div class="checkbox">
+                  <label class={{if editing "text-muted"}}>
+                    {{input
+                      type="checkbox"
+                      checked=location.checked
+                      disabled=editing
+                    }}
+                    {{location.name}}
+                  </label>
+                </div>
+              {{/each}}
+            </div>
+          {{/unless}}
+        {{/if}}
+
+        {{#if (eq locationType "regional")}}
           <div class="col span-6">
             <label class="acc-label">
-              {{t "clusterNew.googlegke.locations.label"}}
+              {{t "clusterNew.googlegke.region.label"}}
             </label>
-            {{#each locationContent as |location|}}
-              <div class="checkbox">
-                <label class={{if editing "text-muted"}}>
-                  {{input
-                    type="checkbox"
-                    checked=location.checked
-                    disabled=editing
-                  }}
-                  {{location.name}}
-                </label>
-              </div>
-            {{/each}}
+            {{#input-or-display
+              editable=isNew
+              value=config.region
+            }}
+              {{new-select
+                classNames="form-control select-algin-checkbox"
+                optionValuePath="name"
+                optionLabelPath="name"
+                content=regionChoices
+                value=config.region
+                prompt="clusterNew.googlegke.region.prompt"
+                localizedPrompt=true
+                disabled=editing
+              }}
+            {{/input-or-display}}
           </div>
-        {{/unless}}
+        {{/if}}
       </div>
 
       <div class="row">

translations/en-us.yaml

@@ -2884,6 +2884,13 @@ clusterNew:
     project:
       label: Project
       placeholder: e.g. my-project
+    locationType:
+      label: Location Type
+      zone: Zonal
+      region: Regional
+    region:
+      label: Region
+      prompt: Choose a Region...
     machineType:
       label: Machine Type
       prompt: Choose a Type...