Support cloud regions with multiple clusters in the docs (#3693)

* support multiple clusters in cloud regions * Apply suggestions from code review Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com> Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com>
2022-02-02 13:00:34 -08:00 · 2022-02-02 13:00:34 -08:00 · ddc41fa055
parent 7e10ebcf0a
commit ddc41fa055
7 changed files with 125 additions and 11 deletions
--- a/assets/js/influxdb-url.js
+++ b/assets/js/influxdb-url.js
@ -276,6 +276,29 @@ $("#modal-close, .modal-overlay, .url-trigger").click(function(e) {
  toggleModal()
 })

+
+// Add checked to fake-radio if cluster is selected on page load
+if ($("ul.clusters label input").is(":checked")) {
+  var group = $("ul.clusters label input:checked").parent().parent().parent().siblings();
+  $(".fake-radio", group).addClass("checked");
+};
+
+// Select first cluster when region is clicked
+$("p.region").click(function () {
+  if (!$(".fake-radio", this).hasClass("checked")) {
+    $(".fake-radio", this).addClass("checked");
+    $("+ ul.clusters li:first label", this).trigger("click");
+  };
+});
+
+// Remove checked class from fake-radio when another region is selected
+$(".region-group").click(function () {
+  if (!$(".fake-radio", this).hasClass("checked")) {
+    $(".fake-radio", !this).removeClass("checked");
+    $(".fake-radio", this).addClass("checked");
+  }
+})
+
 // Update URLs and URL preference when selected/clicked in the modal
 $('input[name="influxdb-cloud-url"]').change(function() {
  var newUrl = $(this).val()
--- a/assets/styles/layouts/_url-selector.scss
+++ b/assets/styles/layouts/_url-selector.scss
@ -131,6 +131,45 @@
        margin: .5rem .5rem .5rem 0;
        padding: 0;
        list-style: none;
+
+        &.clusters {
+          padding-left: 1.75rem;
+        }
+      }
+
+      p.region {
+
+        .fake-radio  {
+          position: relative;
+          display: inline-block;
+          height: 1.15em;
+          width: 1.15em;
+          margin: 0 0.3rem 0 0.1rem;
+          border-radius: $radius;
+          border: 1.5px solid transparent;
+          background: rgba($article-text, 0.05);
+          border: 1.5px solid rgba($article-text, 0.2);
+          vertical-align: text-top;
+          cursor: pointer;
+
+          &:after {
+            content: "";
+            position: absolute;
+            display: block;
+            height: .5rem;
+            width: .5rem;
+            top: .23rem;
+            left: .23rem;
+            border-radius: 50%;
+            background: rgba($article-text, .3);
+            opacity: 0;
+            transition: opacity .2s;
+          }
+
+          &.checked:after {
+            opacity: 1;
+          }
+        }
      }
    }
  }
--- a/assets/styles/layouts/article/_tables.scss
+++ b/assets/styles/layouts/article/_tables.scss
@ -49,6 +49,15 @@ table {
  }

  img { margin-bottom: 0; }
+
+  &.cloud-urls {
+    a { white-space: nowrap; }
+    p {
+      margin: 0 0 .5rem 0;
+      &:last-child { margin-bottom: 0 }
+    }
+    .cluster-name { font-weight: $medium; color: $article-bold; }
+  }
 }

 table + table {
--- a/content/influxdb/cloud/reference/regions.md
+++ b/content/influxdb/cloud/reference/regions.md
@ -19,4 +19,16 @@ Use the URLs below to interact with your InfluxDB Cloud instances with the

 <a href="https://www.influxdata.com/influxdb-cloud-2-0-provider-region/" target="_blank" class="btn">Request a cloud region</a>

+{{% note %}}
+#### Regions with multiple clusters
+Some InfluxDB Cloud regions have multiple Cloud clusters, each with a unique URL.
+To find your cluster URL, [log in to your InfluxDB Cloud organization](https://cloud2.influxdata.com)
+and review your organization URL. The first subdomain identifies your 
+InfluxDB Cloud cluster. For example:
+
+<pre class="highlight">
+https://<span class="bp" style="font-weight:bold;margin:0 .15rem">us-west-2-1</span>.aws.cloud2.influxdata.com/orgs/03a2bbf46249a000/...
+</pre>
+{{% /note %}}
+
 {{< cloud_regions >}}
--- a/data/influxdb_urls.yml
+++ b/data/influxdb_urls.yml
@ -17,6 +17,11 @@ cloud:
        - name: US West (Oregon)
          location: Oregon, USA
          url: https://us-west-2-1.aws.cloud2.influxdata.com
+          clusters:
+            - name: us-west-2-1
+              url: https://us-west-2-1.aws.cloud2.influxdata.com
+            - name: us-west-2-2
+              url: https://us-west-2-2.aws.cloud2.influxdata.com
        - name: US East (Virginia)
          location: Virginia, USA
          url: https://us-east-1-1.aws.cloud2.influxdata.com
--- a/layouts/partials/footer/influxdb-url-modal.html
+++ b/layouts/partials/footer/influxdb-url-modal.html
@ -15,13 +15,13 @@
  {{ .Scratch.Set "modalTitle" "Select your InfluxDB Cloud region" }}
 {{ end }}

-{{ .Scratch.Set "modalMessage" "Select your **InfluxDB Cloud region** or your **InfluxDB OSS URL** and we'll customize code examples for you." }}
+{{ .Scratch.Set "modalMessage" "Select your **InfluxDB Cloud region and cluster** or your **InfluxDB OSS URL** and we'll customize code examples for you. _[Identify your InfluxDB Cloud cluster](/influxdb/cloud/reference/regions/#regions-with-multiple-clusters)_." }}
 {{ if $isOSS }}
  {{ .Scratch.Set "modalMessage" "Customize your **InfluxDB OSS URL** and we'll update code examples for you." }}
 {{ else if $isEnterprise }}
  {{ .Scratch.Set "modalMessage" "Customize your **InfluxDB Enterprise URL** and we'll update code examples for you." }}
 {{ else if $isCloud }}
-  {{ .Scratch.Set "modalMessage" "Select your **InfluxDB Cloud region** and we'll customize code examples for you." }}
+  {{ .Scratch.Set "modalMessage" "Select your **InfluxDB Cloud region and cluster** and we'll customize code examples for you. _[Identify your InfluxDB Cloud cluster](/influxdb/cloud/reference/regions/#regions-with-multiple-clusters)_." }}
 {{ end }}

 {{ .Scratch.Set "modalRefLinks" (print "[InfluxDB Cloud regions](" $CloudLink ") or [InfluxDB OSS URLs](" $OSSLink ")") }}
@ -62,12 +62,30 @@
            <h5>{{ if .short_name}}{{ .short_name }}{{ else }}{{ .name }}{{ end }}</h5>
            <ul>
            {{ range .regions }}
-              <li>
-                <label for="{{ anchorize .name }}" {{ if .status }}class="{{ .status }}"{{ end }}>
-                  <input type="radio" name="influxdb-{{ $formID }}-url" id="{{ anchorize .name }}" value="{{ .url }}" checked>
-                  <span class="radio"></span>
-                  {{ .name }}
-                </label>
+              <li class="region-group">
+                {{ if .clusters }}
+                  <p class="region">
+                    <span class="fake-radio"></span>
+                    {{ .name }}
+                  </p>
+                  <ul class="clusters">
+                  {{ range .clusters }}
+                    <li>
+                      <label for="{{ anchorize .name }}" {{ if .status }}class="{{ .status }}"{{ end }}>
+                      <input type="radio" name="influxdb-{{ $formID }}-url" id="{{ anchorize .name }}" value="{{ .url }}" checked>
+                      <span class="radio"></span>
+                      {{ .name }}
+                    </label>
+                    </li>
+                  {{ end }}
+                  </ul>
+                {{ else }}
+                  <label for="{{ anchorize .name }}" {{ if .status }}class="{{ .status }}"{{ end }}>
+                    <input type="radio" name="influxdb-{{ $formID }}-url" id="{{ anchorize .name }}" value="{{ .url }}" checked>
+                    <span class="radio"></span>
+                    {{ .name }}
+                  </label>
+                {{ end }}
              </li>
            {{ end }}
          {{ end }}
--- a/layouts/shortcodes/cloud_regions.html
+++ b/layouts/shortcodes/cloud_regions.html
@ -10,17 +10,25 @@
    {{ $title := $scratch.Get "title" }}
    {{ $titleID := anchorize $title }}
    <h3 id="{{ $titleID }}">{{ $title }}</h3>
-    <table>
+    <table class="cloud-urls">
      <thead>
        <th align="left">Region</th>
        <th align="left">Location</th>
-        <th align="left">URL</th>
+        <th align="left">URL(s)</th>
      </thead>
      {{ range .regions }}
        <tr>
          <td {{ if .status }}class="{{ .status }}"{{ end }}>{{ .name }}</td>
          <td>{{ .location }}</td>
-          <td><a href="{{ .url }}">{{ .url }}</a></td>
+          <td>
+            {{ if .clusters }}
+              {{ range .clusters }}
+                <p><span class="cluster-name">{{ .name }}:</span> <a href="{{ .url }}">{{ .url }}</a></p>
+              {{ end }}
+            {{ else }}
+              <a href="{{ .url }}">{{ .url }}</a>
+            {{ end }}
+          </td>
        </tr>
      {{ end }}
    </table>