Add TSM/IOx wayfinding modal (#4813)
* add tsm/iox wayfinding modal * Update assets/js/iox-wayfinding.js * Update assets/js/iox-wayfinding.js * Update assets/js/iox-wayfinding.js * Update assets/js/iox-wayfinding.js * Update assets/js/iox-wayfinding.js * Update assets/js/iox-wayfinding.js * feat(iox): enable iox-wayfinder modal. --------- Co-authored-by: Jason Stirnaman <stirnamanj@gmail.com>pull/4826/head
Scott Anderson
GitHub
parent
62733881c9
commit
e5c9c0489d
|
|
@ -0,0 +1,145 @@
|
|||
// Store the host value for the current page
|
||||
currentPageHost = window.location.href.match(/^(?:[^\/]*\/){2}[^\/]+/g)[0]
|
||||
|
||||
// Define iox-wayfinding elements
|
||||
var wayfindingModal = document.getElementById('iox-wayfinding-modal');
|
||||
var wayfindingClose = document.getElementById('iox-wayfinding-close');
|
||||
var wayfindingStay = document.getElementById('iox-wayfinding-stay');
|
||||
var wayfindingSwitch = document.getElementById('iox-wayfinding-switch');
|
||||
var wayfindingOptOut = document.getElementById('iox-wayfinding-opt-out');
|
||||
var wayfindingOptOutInput = document.getElementById('iox-wayfinding-opt-out-input');
|
||||
var wayfindingFindOutToggle = document.getElementById('find-out-toggle');
|
||||
var wayfindingFindOutInstructions = document.getElementById('find-out-instructions');
|
||||
|
||||
/**
|
||||
* Builds a referrer whitelist array that includes the current page host and all
|
||||
* values from the cloudUrls array defined in layouts/partials/footer/javascript.html
|
||||
*/
|
||||
var referrerWhitelist = cloudUrls.concat(currentPageHost);
|
||||
|
||||
// iox-wayfinding preference cookie name
|
||||
var wayfindingPrefCookie = 'influx-iox-show-wayfinding'
|
||||
|
||||
// Toggle the iox-wayfinding modal
|
||||
function toggleWayfinding() {
|
||||
wayfindingModal.classList.toggle("open");
|
||||
}
|
||||
|
||||
// Toggle wayfinding modal preference cookie
|
||||
function toggleWayfindingPreference() {
|
||||
if (Cookies.get(wayfindingPrefCookie) === 'true') {
|
||||
Cookies.set(wayfindingPrefCookie, 'false')
|
||||
} else {
|
||||
Cookies.set(wayfindingPrefCookie, 'true')
|
||||
}
|
||||
}
|
||||
|
||||
// Define the slideDown and slideUp animations
|
||||
function slideDown(elem) {
|
||||
elem.style.height = `${elem.scrollHeight}px`;
|
||||
elem.style.opacity = 1;
|
||||
}
|
||||
|
||||
function slideUp(elem) {
|
||||
elem.style.height = 0;
|
||||
elem.style.opacity = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check to see if the iox-wayfinding modal should be opened:
|
||||
* - Is the user coming from a non-whitelisted external referrer?
|
||||
* - Has the user opted out of the wayfinding modal?
|
||||
*/
|
||||
function shouldOpenWayfinding() {
|
||||
var isExternalReferrer = !referrerWhitelist.includes(referrerHost);
|
||||
var wayfindingOptedOut = Cookies.get(wayfindingPrefCookie) !== 'false';
|
||||
|
||||
// Only return true if all conditions are true
|
||||
return isExternalReferrer && wayfindingOptedOut;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function that checks the wayfindingPrefCookie and sets the state of the
|
||||
* wayfinding checkbox input.
|
||||
*/
|
||||
function setWayfindingInputState() {
|
||||
var currentPreference = Cookies.get(wayfindingPrefCookie);
|
||||
|
||||
if (currentPreference === 'false') {
|
||||
wayfindingOptOutInput.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
function submitWayfindingData(engine, action) {
|
||||
|
||||
const pageData = {
|
||||
host: location.hostname,
|
||||
path: location.pathname,
|
||||
referrer: (document.referrer === '') ? 'direct' : document.referrer,
|
||||
}
|
||||
|
||||
// Build lp using page data and engine data
|
||||
const lp = `ioxwayfinding,host=${pageData.host},path=${pageData.path},referrer=${pageData.referrer},engine=${engine} action="${action}"`
|
||||
|
||||
// Send the wayfinding data
|
||||
xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', 'https://j32dswat7l.execute-api.us-east-1.amazonaws.com/prod/wayfinding');
|
||||
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
||||
xhr.setRequestHeader('Access-Control-Allow-Origin', `${location.protocol}//${location.host}`);
|
||||
xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
|
||||
xhr.setRequestHeader('Accept', 'application/json');
|
||||
xhr.send(lp);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// When the user clicks on the stay button, close modal, submit data, and stay on the page.
|
||||
wayfindingStay.onclick = function(event) {
|
||||
var engine = wayfindingStay.dataset.engine;
|
||||
var action = 'stay';
|
||||
|
||||
event.preventDefault();
|
||||
submitWayfindingData(engine, action)
|
||||
toggleWayfinding();
|
||||
}
|
||||
|
||||
// When the user clicks on the switch button, submit data and follow link.
|
||||
wayfindingSwitch.onclick = function(event) {
|
||||
var engine = wayfindingSwitch.dataset.engine;
|
||||
var action = 'switch';
|
||||
|
||||
submitWayfindingData(engine, action)
|
||||
}
|
||||
|
||||
// When the user clicks on the "X" wayfinding close element, close the modal
|
||||
wayfindingClose.onclick = function(event) {
|
||||
toggleWayfinding();
|
||||
}
|
||||
|
||||
wayfindingOptOut.onclick = function(event) {
|
||||
toggleWayfindingPreference();
|
||||
}
|
||||
|
||||
// Toggle instructions for finding out which storage engine you're using
|
||||
wayfindingFindOutToggle.onclick = function(event) {
|
||||
event.preventDefault();
|
||||
if (wayfindingFindOutInstructions.classList.contains('open')) {
|
||||
slideUp(wayfindingFindOutInstructions);
|
||||
wayfindingFindOutInstructions.classList.remove('open');
|
||||
} else {
|
||||
slideDown(wayfindingFindOutInstructions);
|
||||
wayfindingFindOutInstructions.classList.add('open');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check to see if the referrer is in the referrer whitelist, otherwise trigger
|
||||
* the iox-wayfinding modal.
|
||||
* This reuses the referrerHost variable defined in assets/js/influxdb-url.js
|
||||
*/
|
||||
if (shouldOpenWayfinding()) {
|
||||
toggleWayfinding();
|
||||
}
|
||||
|
||||
// Set the state of the show wayfinding input checkbox
|
||||
setWayfindingInputState();
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
#iox-wayfinding-modal {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: -100vh;
|
||||
padding: 2rem;
|
||||
z-index: 200;
|
||||
backdrop-filter: blur(15px);
|
||||
transition: top .75s ease-in-out;
|
||||
|
||||
&.open {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wayfinding-wrapper {
|
||||
@include gradient($grad-burningDusk);
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
pointer-events: all;
|
||||
border-radius: $radius * 2;
|
||||
}
|
||||
|
||||
.wayfinding-content {
|
||||
padding: 1.5rem;
|
||||
color: $g20-white;
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wayfinding-content-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
p {
|
||||
color: rgba($g20-white, .85);
|
||||
line-height: 1.65rem;
|
||||
|
||||
strong {color: $g20-white;}
|
||||
}
|
||||
|
||||
a#find-out-toggle {
|
||||
position: relative;
|
||||
color: inherit;
|
||||
font-size: .95rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
border-top: 1px solid $g20-white;
|
||||
bottom: -.1rem;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 0%;
|
||||
transition: width .2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $g20-white;
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#find-out-instructions {
|
||||
text-align: center;
|
||||
transition: height .2s ease-out, opacity .2s;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
margin-top: -.5rem;
|
||||
font-size: .95rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
color: $g20-white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
border-top: 1px solid $g20-white;
|
||||
bottom: -.2rem;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 0%;
|
||||
transition: width .2s;
|
||||
}
|
||||
|
||||
&:hover:after {width: 100%;}
|
||||
}
|
||||
}
|
||||
|
||||
.powered-by-example {
|
||||
padding: 1rem 1.25rem;
|
||||
display: inline-block;
|
||||
border-radius: $radius;
|
||||
background: $g0-obsidian;
|
||||
color: $b-dodger;
|
||||
font-size: .95rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wayfinding-actions {
|
||||
min-width: 33%;
|
||||
margin-left: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.iox-wayfinding-btn {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
margin-bottom: .5rem;
|
||||
border-radius: $radius;
|
||||
background-color: $g20-white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: $br-new-purple;
|
||||
box-shadow: 0px 0px 10px rgba($g20-white, 0);
|
||||
transition: color .2s, box-shadow .2s;
|
||||
|
||||
&:hover {
|
||||
color: $p-void;
|
||||
box-shadow: 0 0 10px rgba($g20-white, .9);
|
||||
}
|
||||
|
||||
.small {font-size: 1rem;}
|
||||
|
||||
}
|
||||
|
||||
#iox-wayfinding-close {
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
right: .75rem;
|
||||
color: $g20-white;
|
||||
font-size: 2rem;
|
||||
opacity: .65;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox styles
|
||||
label {
|
||||
margin-top: .5rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: .95rem;
|
||||
font-style: italic;
|
||||
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1.5px solid rgba($g20-white, .85);
|
||||
vertical-align: middle;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-right: 2px solid rgba($g20-white, .85);
|
||||
border-bottom: 2px solid rgba($g20-white, .85);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg) scale(0);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
&:checked + .checkbox {
|
||||
border-color: rgba($g20-white, .85);
|
||||
&:before {
|
||||
transform: translate(-50%, -60%) rotate(45deg) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-text {
|
||||
margin-left: 4px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
@include media(small) {
|
||||
#iox-wayfinding-modal {
|
||||
.wayfinding-content-info {
|
||||
flex-direction: column;
|
||||
}
|
||||
#find-out-instructions {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.wayfinding-actions {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,7 +30,8 @@
|
|||
"layouts/v1-overrides",
|
||||
"layouts/notifications",
|
||||
"layouts/custom-time-trigger",
|
||||
"layouts/code-controls";
|
||||
"layouts/code-controls",
|
||||
"layouts/iox-wayfinding";
|
||||
|
||||
// Import Product-specifc color schemes
|
||||
@import "product-overrides/telegraf",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ weight: 2
|
|||
influxdb/cloud/tags: [get-started]
|
||||
aliases:
|
||||
- /influxdb/cloud/introduction/get-started/
|
||||
alt_engine: /influxdb/cloud-iox/get-started/
|
||||
---
|
||||
|
||||
InfluxDB {{< current-version >}} is the platform purpose-built to collect, store,
|
||||
|
|
|
|||
|
|
@ -56,38 +56,7 @@
|
|||
to download and verify InfluxData software packages.
|
||||
|
||||
For more information, see the
|
||||
[Linux Package Signing Key Rotation blog post](https://www.influxdata.com/blog/linux-package-signing-key-rotation/).
|
||||
|
||||
- id: iox-doc-fork
|
||||
level: note
|
||||
scope:
|
||||
- /influxdb/cloud-iox/
|
||||
title: InfluxDB Cloud backed by InfluxDB IOx
|
||||
message: |
|
||||
All InfluxDB Cloud organizations created on or after **January 31, 2023**
|
||||
are backed by the new InfluxDB IOx storage engine.
|
||||
Check the right column of your [InfluxDB Cloud organization homepage](https://cloud2.influxdata.com)
|
||||
to see which InfluxDB storage engine you're using.
|
||||
|
||||
**If powered by IOx**, this is the correct documentation.
|
||||
|
||||
**If powered by TSM**, see the [TSM-based InfluxDB Cloud documentation](/influxdb/cloud/).
|
||||
|
||||
- id: tsm-doc-fork
|
||||
level: note
|
||||
scope:
|
||||
- /influxdb/cloud/
|
||||
title: InfluxDB Cloud backed by InfluxDB TSM
|
||||
message: |
|
||||
All InfluxDB Cloud organizations created on or after **January 31, 2023**
|
||||
are backed by the new InfluxDB IOx storage engine which enables nearly unlimited
|
||||
series cardinality and SQL query support.
|
||||
Check the right column of your [InfluxDB Cloud organization homepage](https://cloud2.influxdata.com)
|
||||
to see which InfluxDB storage engine you're using.
|
||||
|
||||
**If powered by TSM**, this is the correct documentation.
|
||||
|
||||
**If powered by IOx**, see the [IOx-based InfluxDB Cloud documentation](/influxdb/cloud-iox/).
|
||||
[Linux Package Signing Key Rotation blog post](https://www.influxdata.com/blog/linux-package-signing-key-rotation/).
|
||||
|
||||
- id: iox-wip
|
||||
level: warn
|
||||
|
|
|
|||
|
|
@ -16,6 +16,11 @@
|
|||
<!-- Custom time modal trigger-->
|
||||
{{ partial "footer/custom-time-trigger" . }}
|
||||
|
||||
<!-- IOx wayfinding modal -->
|
||||
{{ if in (slice "cloud" "cloud-iox") $currentVersion }}
|
||||
{{ partial "footer/iox-wayfinding.html" . }}
|
||||
{{ end }}
|
||||
|
||||
</body>
|
||||
{{ partial "footer/javascript.html" . }}
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
|
||||
{{ $version := index $productPathData 1 }}
|
||||
{{ $altVersion := cond (ne $version "cloud-iox") "cloud-iox" "cloud" }}
|
||||
{{ $engine := cond (eq $version "cloud-iox") "IOx" "TSM" }}
|
||||
{{ $altEngine := cond (eq $version "cloud-iox") "TSM" "IOx" }}
|
||||
{{ $altDoc := .Page.Params.alt_engine | default "" }}
|
||||
{{ $altLink := cond (ne $altDoc "") $altDoc (print "/influxdb/" $altVersion "/") }}
|
||||
|
||||
<div id="iox-wayfinding-modal">
|
||||
<div class="wayfinding-wrapper">
|
||||
<div class="wayfinding-content">
|
||||
<h4>InfluxDB Cloud powered by {{ $engine }}</h4>
|
||||
<div class="wayfinding-content-info">
|
||||
<div>
|
||||
<p>
|
||||
You are currently viewing documentation specific to InfluxDB Cloud
|
||||
powered by the <strong>{{ $engine }} storage engine</strong>, which
|
||||
offers different functionality than InfluxDB Cloud powered by the
|
||||
{{ $altEngine }} storage engine.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Are you using the {{ $engine }} storage engine?</strong>
|
||||
<a href="#" id="find-out-toggle">How to find out?</a>
|
||||
</p>
|
||||
<div id="find-out-instructions">
|
||||
<p>
|
||||
Visit <a href="https://cloud2.influxdata.com" target="_blank">your organization's homepage</a>
|
||||
and look for:
|
||||
</p>
|
||||
<div class="powered-by-example">
|
||||
InfluxDB Cloud powered by {{ $engine }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wayfinding-actions">
|
||||
<a class="iox-wayfinding-btn" data-engine="{{ $engine | lower }}" href="#" id="iox-wayfinding-stay"><strong>Yes</strong><span class="small"> – I'm using {{ $engine }}</span></a>
|
||||
<a class="iox-wayfinding-btn" data-engine="{{ $altEngine | lower }}" id="iox-wayfinding-switch" href="{{ $altLink }}"><strong>No</strong><span class="small"> – I'm using {{ $altEngine }}</span></a>
|
||||
<label>
|
||||
<input id="iox-wayfinding-opt-out-input" type="checkbox" />
|
||||
<span id="iox-wayfinding-opt-out" class="checkbox"></span>
|
||||
<span class="checkbox-text">Don't ask again</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span id="iox-wayfinding-close" class="cf-icon Remove_New"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,11 +14,13 @@
|
|||
{{ $codeControls := resources.Get "js/code-controls.js" }}
|
||||
{{ $pageFeedback := resources.Get "js/page-feedback.js" }}
|
||||
{{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
|
||||
{{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js"}}
|
||||
{{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js" }}
|
||||
{{ $ioxWayfinding := resources.Get "/js/iox-wayfinding.js"}}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $modals $influxdbURLs $featureCallouts $tabbedContent $notifications $keybindings $codeControls $pageFeedback $homepageInteractions $fluxInfluxDBVersions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $fluxGroupKeyjs := slice $fluxGroupKeys | resources.Concat "js/flux-group-keys.js" | resources.Fingerprint }}
|
||||
{{ $fluxCurrentTimejs := slice $fluxCurrentTime | resources.Concat "js/flux-current-time.js" | resources.Fingerprint }}
|
||||
{{ $influxdbGSTimestampsjs := slice $influxdbGSTimestamps | resources.Concat "js/get-started-timestamps.js" | resources.Fingerprint }}
|
||||
{{ $ioxWayfindingjs := slice $ioxWayfinding | resources.Concat "js/iox-wayfinding.js" | resources.Fingerprint }}
|
||||
|
||||
<!-- Load cloudUrls array -->
|
||||
<script type="text/javascript">
|
||||
|
|
@ -61,4 +63,9 @@
|
|||
{{ if or (.Page.HasShortcode "influxdb/custom-timestamps") (.Page.HasShortcode "influxdb/custom-timestamps-span") }}
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker.min.js"></script>
|
||||
<script type="text/javascript" src="{{ $influxdbGSTimestampsjs.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Load IOx wayfinding JS if page is in cloud or cloud-iox -->
|
||||
{{ if in (slice "cloud" "cloud-iox") (index (findRE "[^/]+.*?" .Page.RelPermalink) 1) }}
|
||||
<script type="text/javascript" src="{{ $ioxWayfinding.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue