added influxdb selector functionality
Scott Anderson
parent
0852562449
commit
07017fa340
|
|
@ -16,7 +16,8 @@ var elementWhiteList = [
|
|||
".code-tabs p a",
|
||||
".truncate-toggle",
|
||||
".children-links a",
|
||||
".list-links a"
|
||||
".list-links a",
|
||||
"a.url-trigger"
|
||||
]
|
||||
|
||||
$('.article a[href^="#"]:not(' + elementWhiteList + ')').click(function (e) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
var defaultUrl = "http://localhost:9999"
|
||||
|
||||
function getUrl() {
|
||||
var currentUrl = Cookies.get('influxdb_url')
|
||||
if (typeof currentUrl == 'undefined' ) {
|
||||
return defaultUrl
|
||||
} else {
|
||||
return currentUrl
|
||||
}
|
||||
}
|
||||
|
||||
function updateUrls(currentUrl, newUrl) {
|
||||
if (typeof currentUrl != newUrl) {
|
||||
$(".article--content pre").each(function() {
|
||||
$(this).html($(this).html().replace(currentUrl, newUrl));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function appendUrlSelector(currentUrl) {
|
||||
$(".article--content pre").each(function() {
|
||||
var code = $(this).html()
|
||||
if (code.includes(currentUrl)) {
|
||||
$(this).after("<div class='select-url'><a class='url-trigger' href='#'>InfluxDB URL</a></div>")
|
||||
$('.select-url').fadeIn(400)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleModal() {
|
||||
$(".modal").fadeToggle(200).toggleClass("open")
|
||||
}
|
||||
|
||||
function setRadioButton(currentUrl) {
|
||||
$('input[name="influxdb-loc"][value="' + currentUrl + '"]').prop("checked", true)
|
||||
}
|
||||
|
||||
function storeUrl(newUrl) {
|
||||
Cookies.set('influxdb_url', newUrl)
|
||||
}
|
||||
|
||||
$('input[name="influxdb-loc"]').change(function() {
|
||||
var newUrl = $(this).val()
|
||||
updateUrls(getUrl(), newUrl)
|
||||
storeUrl(newUrl)
|
||||
})
|
||||
|
||||
// Update URLs on load
|
||||
updateUrls(defaultUrl, getUrl())
|
||||
|
||||
// Append URL selector buttons to code blocks
|
||||
appendUrlSelector(getUrl())
|
||||
|
||||
// Set active radio button on page load
|
||||
setRadioButton(getUrl())
|
||||
|
||||
// Open and close modal window
|
||||
$("#modal-close, .modal-overlay, .url-trigger").click(function(e) {
|
||||
e.preventDefault()
|
||||
toggleModal()
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
var url = "https://us-west-2-1.aws.cloud2.influxdata.com"
|
||||
|
||||
// Create a way for users to select their region
|
||||
// store the region url as a cookie
|
||||
|
||||
// set a session cookie for the url
|
||||
// If the session cookie isn't defined, don't do anything
|
||||
|
||||
function updateUrls() {
|
||||
$(".article--content pre").each(function() {
|
||||
$(this).html($(this).html().replace("http://localhost:9999", url));
|
||||
});
|
||||
}
|
||||
|
||||
updateUrls()
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
.modal {
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include gradient($grad-miyazakisky);
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
max-width: 650px;
|
||||
max-height: 95vh;
|
||||
margin-top: 10vh;
|
||||
padding: .75rem 2rem 1.5rem;
|
||||
border-radius: $radius * 1.5;
|
||||
background: $article-bg;
|
||||
color: $article-text;
|
||||
font-size: 1rem;
|
||||
transition: margin .4s;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.modal-body { margin-top: 0; }
|
||||
}
|
||||
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
padding: .25rem;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: rgba($article-text, .5);
|
||||
transition: color .2s;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $article-text;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
overflow: scroll;
|
||||
|
||||
h3 {
|
||||
color: $article-heading;
|
||||
font-weight: $medium;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $article-heading;
|
||||
font-weight: $medium;
|
||||
margin: 1rem 0 .5rem $radius;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: .5rem 0 0;
|
||||
color: $article-bold;
|
||||
}
|
||||
|
||||
p,li {
|
||||
margin: .25rem 0;
|
||||
line-height: 1.5rem;
|
||||
strong {
|
||||
font-weight: $medium;
|
||||
color: $article-bold;
|
||||
}
|
||||
&.note {
|
||||
padding-top: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
color: rgba($article-text, .5);
|
||||
border-top: 1px solid rgba($article-text, .25);
|
||||
font-size: .9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $article-link;
|
||||
font-weight: $medium;
|
||||
text-decoration: none;
|
||||
transition: color .2s;
|
||||
&:hover {
|
||||
color: $article-link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.product {
|
||||
margin-right: .5rem;
|
||||
|
||||
.providers{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: .5rem 1rem;
|
||||
background: rgba($article-text, .05);
|
||||
border-radius: $radius;
|
||||
|
||||
.provider {
|
||||
flex-grow: 1;
|
||||
&:not(:last-child) {margin-right: 1rem;}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: .5rem .5rem .5rem 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 1.15em;
|
||||
width: 1.15em;
|
||||
background: rgba($article-text, .05);
|
||||
margin: 0 .3rem 0 .1rem;
|
||||
vertical-align: text-top;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid rgba($article-text, .2);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
margin-right: -1.1rem ;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
& + .radio:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
background: $article-link;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
transform: scale(2) translate(-20%, -20%);
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&:checked + .radio:after {
|
||||
opacity: 1;
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////// InfluxDB URL Triggers ////////////////////////////
|
||||
|
||||
.article--content {
|
||||
.select-url {
|
||||
margin: -2.5rem 0 1rem;
|
||||
text-align: right;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.url-trigger {
|
||||
padding: .25rem .5rem;
|
||||
display: inline-block;
|
||||
font-size: .85rem;
|
||||
font-style: italic;
|
||||
color: rgba($article-tab-code-text, .5);
|
||||
background: $article-code-bg;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
|
||||
&:before {
|
||||
content: "\e923";
|
||||
display: inline-block;
|
||||
margin-right: .35rem;
|
||||
font-family: "icomoon";
|
||||
font-style: normal;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $article-tab-code-text;
|
||||
}
|
||||
}
|
||||
|
||||
.code-tab-content {
|
||||
.select-url{margin-top: -3.25rem}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
pre { line-height: 1.25rem; }
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
/*text-shadow: 0 1px #101419;*/
|
||||
|
|
@ -50,8 +52,6 @@ pre[class*="language-"] {
|
|||
|
||||
.highlight { color: $article-code;
|
||||
|
||||
line-height: 1.25rem;
|
||||
|
||||
// COLORS
|
||||
|
||||
.gh, /* Generic.Heading */
|
||||
|
|
|
|||
|
|
@ -36,18 +36,18 @@
|
|||
}
|
||||
|
||||
.version-selector {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
right: 3.5rem;
|
||||
color: $g20-white;
|
||||
height: 2rem;
|
||||
@include gradient($version-selector-gradient);
|
||||
font-weight: $medium;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: right .2s;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
right: 5.5rem;
|
||||
color: $g20-white;
|
||||
height: 2rem;
|
||||
@include gradient($version-selector-gradient);
|
||||
font-weight: $medium;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: right .2s;
|
||||
|
||||
.selected {
|
||||
padding: 0 1.75rem 0 .75rem;
|
||||
|
|
@ -65,7 +65,6 @@
|
|||
|
||||
&.open {
|
||||
height: auto;
|
||||
@include gradient($version-selector-gradient);
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
|
@ -102,7 +101,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.theme-switcher, #search-btn {
|
||||
.theme-switcher, #search-btn, .url-trigger {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: 1.8rem;
|
||||
|
|
@ -126,6 +125,12 @@
|
|||
&#theme-switch-light { display: $theme-switch-light; }
|
||||
}
|
||||
|
||||
.url-trigger {
|
||||
font-size: 1.1rem;
|
||||
vertical-align: top;
|
||||
margin: .1rem 0 0 0;
|
||||
}
|
||||
|
||||
#search-btn {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@
|
|||
opacity: 0.25;
|
||||
transition: opacity .2s, background .2s, color .2s;
|
||||
background-color: rgba($article-btn, 0);
|
||||
color: $article-bold;
|
||||
|
||||
.icon-github {
|
||||
font-size: 1.2rem;
|
||||
|
|
@ -62,7 +61,6 @@
|
|||
.github-link {
|
||||
opacity: 1;
|
||||
background-color: rgba($article-btn, 1);
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -149,6 +147,7 @@
|
|||
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 1.15em;
|
||||
width: 1.15em;
|
||||
background: rgba($article-text, .05);
|
||||
|
|
@ -175,16 +174,16 @@
|
|||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
background: $article-link;
|
||||
top: .65rem;
|
||||
left: .35rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
transform: scale(2) translate(-20%, -20%);
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&:checked + .checkbox:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
.version-selector {
|
||||
right: 5.5rem;
|
||||
right: 7.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,4 +21,5 @@
|
|||
"layouts/syntax-highlighting",
|
||||
"layouts/algolia-search-overrides",
|
||||
"layouts/landing",
|
||||
"layouts/error-page";
|
||||
"layouts/error-page",
|
||||
"layouts/modal";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
oss:
|
||||
product: InfluxDB OSS
|
||||
name: localhost:9999
|
||||
url: http://localhost:9999
|
||||
providers:
|
||||
- name: Default
|
||||
regions:
|
||||
- name: localhost:9999
|
||||
url: http://localhost:9999
|
||||
|
||||
cloud:
|
||||
product: InfluxDB Cloud
|
||||
|
|
@ -9,7 +12,7 @@ cloud:
|
|||
- name: Amazon Web Services
|
||||
short_name: AWS
|
||||
regions:
|
||||
- name: US West (Orgeon)
|
||||
- name: US West (Oregon)
|
||||
url: https://us-west-2-1.aws.cloud2.influxdata.com
|
||||
- name: EU Frankfort
|
||||
url: https://eu-central-1-1.aws.cloud2.influxdata.com
|
||||
|
|
|
|||
|
|
@ -585,7 +585,7 @@ input:
|
|||
- name: InfiniBand
|
||||
id: infiniband
|
||||
description: |
|
||||
The InfiniBand input plugin gathers statistics for all InfiniBand devices and ports on the system.
|
||||
The InfiniBand input plugin gathers statistics for all InfiniBand devices and ports on the system.
|
||||
Counters are stored in `/sys/class/infiniband/<dev>/port/<port>/counters/`.
|
||||
introduced: 1.14.0
|
||||
tags: [linux, systems]
|
||||
|
|
@ -919,8 +919,8 @@ input:
|
|||
- name: Monit
|
||||
id: monit
|
||||
description: |
|
||||
The Monit input plugin gathers metrics and status information about local processes, remote hosts, files,
|
||||
file systems, directories, and network interfaces managed and watched by Monit. To use this plugin,
|
||||
The Monit input plugin gathers metrics and status information about local processes, remote hosts, files,
|
||||
file systems, directories, and network interfaces managed and watched by Monit. To use this plugin,
|
||||
enable the [HTTPD TCP port](https://mmonit.com/monit/documentation/monit.html#TCP-PORT) in Monit.
|
||||
introduced: 1.14.0
|
||||
tags: [linux, macos, windows, systems, networking]
|
||||
|
|
@ -2160,7 +2160,7 @@ processor:
|
|||
id: s2geo
|
||||
description: |
|
||||
The S2 Geo processor plugin adds tags with an S2 cell ID token of a specified [cell level](https://s2geometry.io/resources/s2cell_statistics.html).
|
||||
Tags are used in Flux `experimental/geo` functions.
|
||||
Tags are used in Flux `experimental/geo` functions.
|
||||
Specify `lat` and `lon` field values with WGS-84 coordinates in decimal degrees.
|
||||
introduced: 1.14.0
|
||||
tags: [linux, macos, windows]
|
||||
|
|
@ -2204,7 +2204,7 @@ processor:
|
|||
- name: Template
|
||||
id: template
|
||||
description: |
|
||||
The Template processor plugin applies a Go template to metrics to generate a new tag.
|
||||
The Template processor plugin applies a Go template to metrics to generate a new tag.
|
||||
Primarily used to create a tag for dynamic routing to multiple output plugins
|
||||
or to an output specific routing option. The template has access to each metric's measurement name,
|
||||
tags, fields, and timestamp using the interface in [template_metric.go](https://github.com/influxdata/telegraf/blob/release-1.14/plugins/processors/template/template_metric.go).
|
||||
|
|
|
|||
|
|
@ -1,18 +1,39 @@
|
|||
<div class="url-selector" style="background: #fff; padding: 1rem;">
|
||||
{{ range sort .Site.Data.influxdb_urls "product" "desc" }}
|
||||
<h4>{{ .product }}</h4>
|
||||
{{ if .name }}
|
||||
<ul><li data-url="{{ .url }}">{{ .name }}</li></ul>
|
||||
{{ end }}
|
||||
{{ if .providers }}
|
||||
{{ range .providers }}
|
||||
<strong>{{ if .short_name}}{{ .short_name }}{{ else }}{{ .name }}{{ end }}</strong>
|
||||
<ul>
|
||||
{{ range .regions }}
|
||||
<li data-url="{{ .url }}">{{ .name }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) .RelPermalink }}
|
||||
<div class="modal">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-wrapper">
|
||||
<div id="influxdb-url-list" class="modal-body">
|
||||
<a id="modal-close"href="#"><span class="icon-ui-remove"></span></a>
|
||||
<div class="modal-content">
|
||||
<h3>Where are you running InfluxDB?</h3>
|
||||
<p>Select where you're using InfluxDB and we'll customize code examples with your <strong>InfluxDB URL</strong>.</p>
|
||||
<div class="products">
|
||||
{{ range sort .Site.Data.influxdb_urls "product" "desc" }}
|
||||
<div class="product">
|
||||
<h4>{{ .product }}</h4>
|
||||
<div class="providers">
|
||||
{{ range .providers }}
|
||||
<div class="provider">
|
||||
<h5>{{ if .short_name}}{{ .short_name }}{{ else }}{{ .name }}{{ end }}</h5>
|
||||
<ul>
|
||||
{{ range .regions }}
|
||||
<li>
|
||||
<label for="{{ anchorize .name }}">
|
||||
<input type="radio" name="influxdb-loc" id="{{ anchorize .name }}" value="{{ .url }}" checked>
|
||||
<span class="radio"></span>
|
||||
{{ .name }}
|
||||
</label>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<p class="note">For more information, see <a href='{{ print "/" $currentVersion "/cloud/urls/"}}'>InfluxDB URLs</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{ $contentInteractions := resources.Get "js/content-interactions.js" }}
|
||||
{{ $searchInteractions := resources.Get "js/search-interactions.js" }}
|
||||
{{ $telegrafFilters := resources.Get "js/telegraf-filters.js" }}
|
||||
{{ $regionURLs := resources.Get "js/region-url.js" }}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $regionURLs | resources.Concat "js/footer.bundle.js" }}
|
||||
{{ $influxdbURLs := resources.Get "js/influxdb-url.js" }}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs | resources.Concat "js/footer.bundle.js" }}
|
||||
|
||||
<script type="text/javascript" src="{{ $footerjs.RelPermalink }}" ></script>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
|
||||
<button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
|
||||
<button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
|
||||
<button class="theme-switcher" id="theme-switch-dark" onclick="switch_style('dark-theme');return false;"><span class="icon-moon1"></span></button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue