From ddc41fa055a3f200e173c8f72a660e722fb97644 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Wed, 2 Feb 2022 13:00:34 -0800 Subject: [PATCH] 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> --- assets/js/influxdb-url.js | 23 +++++++++++ assets/styles/layouts/_url-selector.scss | 39 +++++++++++++++++++ assets/styles/layouts/article/_tables.scss | 9 +++++ content/influxdb/cloud/reference/regions.md | 12 ++++++ data/influxdb_urls.yml | 5 +++ .../partials/footer/influxdb-url-modal.html | 34 ++++++++++++---- layouts/shortcodes/cloud_regions.html | 14 +++++-- 7 files changed, 125 insertions(+), 11 deletions(-) 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 @@
{{ if .short_name}}{{ .short_name }}{{ else }}{{ .name }}{{ end }}