diff --git a/assets/js/influxdb-url.js b/assets/js/influxdb-url.js index cc09b030c..c03a04e02 100644 --- 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() diff --git a/assets/styles/layouts/_url-selector.scss b/assets/styles/layouts/_url-selector.scss index fcbd9e83e..3f5a53c04 100644 --- 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; + } + } } } } diff --git a/assets/styles/layouts/article/_tables.scss b/assets/styles/layouts/article/_tables.scss index 6d043b0ca..5c419dc69 100644 --- 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 { diff --git a/content/influxdb/cloud/reference/regions.md b/content/influxdb/cloud/reference/regions.md index e2555b575..5049dc568 100644 --- 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 Request a cloud region +{{% 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: + +
+https://us-west-2-1.aws.cloud2.influxdata.com/orgs/03a2bbf46249a000/...
+
+{{% /note %}}
+
{{< cloud_regions >}}
diff --git a/data/influxdb_urls.yml b/data/influxdb_urls.yml
index c08a7e4b6..e4ca27c95 100644
--- 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
diff --git a/layouts/partials/footer/influxdb-url-modal.html b/layouts/partials/footer/influxdb-url-modal.html
index aeadc40cc..896129750 100644
--- 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 @@
+ + {{ .name }} +
+| Region | Location | -URL | +URL(s) | {{ range .regions }}
|---|---|---|---|
| {{ .name }} | {{ .location }} | -{{ .url }} | +
+ {{ if .clusters }}
+ {{ range .clusters }}
+ {{ .name }}: {{ .url }} + {{ end }} + {{ else }} + {{ .url }} + {{ end }} + |