diff --git a/assets/js/content-interactions.js b/assets/js/content-interactions.js index 4e02a7125..e4e7d3c85 100644 --- a/assets/js/content-interactions.js +++ b/assets/js/content-interactions.js @@ -84,3 +84,10 @@ $(".truncate-toggle").click(function(e) { e.preventDefault() $(this).closest('.truncate').toggleClass('closed'); }) + +//////////////////// Replace Missing Images with Placeholder /////////////////// + +$(".article--content img").on("error", function() { + $(this).attr("src", "/img/coming-soon.svg"); + $(this).attr("style", "max-width:500px;"); +}); diff --git a/assets/js/search-interactions.js b/assets/js/search-interactions.js new file mode 100644 index 000000000..c516fea03 --- /dev/null +++ b/assets/js/search-interactions.js @@ -0,0 +1,8 @@ +$('#algolia-search-input').focus(function() { + $('.content-wrapper').fadeTo(400, .35); +}) + +$('#algolia-search-input').blur(function() { + $('.content-wrapper').fadeTo(200, 1); + $('.ds-dropdown-menu').hide(); +}) diff --git a/assets/styles/layouts/_algolia-search-overrides.scss b/assets/styles/layouts/_algolia-search-overrides.scss new file mode 100644 index 000000000..f5146caec --- /dev/null +++ b/assets/styles/layouts/_algolia-search-overrides.scss @@ -0,0 +1,135 @@ +.algolia-autocomplete { + width: 100%; + + /* Main dropdown wrapper */ + .ds-dropdown-menu { + width: 74vw; + max-width: 800px; + background: $article-bg; + + [class^=ds-dataset-] { + background-color: $article-bg; + border: none; + box-shadow: 2px 2px 10px $sidebar-search-shadow; + transition: background-color .2s; + } + &:before { + display: none; + } + + .ds-suggestions { + padding: 2rem; + } + } + + /* Main category (eg. Getting Started) */ + .algolia-docsearch-suggestion { + background: $article-bg; + + &--category-header { + color: $article-heading; + border-color: $article-hr; + text-decoration: none; + &-lvl0{ + font-size: 1.5rem; + font-weight: bold !important; + padding-bottom: 1rem; + } + } + + /* Category (eg. Downloads) */ + &--subcategory-column { + color: rgba($article-text, .5) !important; + &:before { background: $article-hr; } + } + + /* Title (eg. Bootstrap CDN) */ + &--title { + font-weight: bold; + color: $article-heading; + } + + /* Description description (eg. Bootstrap currently works...) */ + &--text { + font-size: 0.8rem; + color: $article-text; + } + + /* Highlighted text */ + &--highlight { + color: $article-link; + } + + &--content { + &:before { background: $article-hr; } + } + } +} + +//////////////////////////////// HARD OVERRIDES //////////////////////////////// +.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main +.algolia-docsearch-suggestion--category-header, +.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary { + text-decoration: none; +} + +.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main +.algolia-docsearch-suggestion--category-header { + padding-bottom: .75rem; + margin-bottom: .5rem; +} + +.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu { + left: 24vw !important; + top: -.45rem !important; +} + +.ds-suggestion:not(:first-child) { + .algolia-docsearch-suggestion--category-header{ + margin-top: 1.5rem; + } +} + +//////////////////////////////////////////////////////////////////////////////// +///////////////////////////////// MEDIA QUERIES //////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// + +@media (min-width: 801px) and (max-width: 1200px) { + .algolia-autocomplete .ds-dropdown-menu { + max-width: 70vw; + } + .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu { + left: 28.5vw !important; + top: -.45rem !important; + } +} + +@include media(medium) { + .algolia-autocomplete .ds-dropdown-menu { + max-width: 100vw; + width: 100vw; + min-width: 0; + } + .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu { + left: -1rem !important; + top: 112% !important; + } + .algolia-autocomplete .algolia-docsearch-suggestion { + .algolia-docsearch-suggestion--subcategory-column, + .algolia-docsearch-suggestion--content { + display: block; + margin: 2px 0; + float: none; + &:after { content: ""; } + } + } +} + +@include media(small) { + .algolia-autocomplete .ds-dropdown-menu { + width: 100vw; + } + .algolia-autocomplete .ds-dropdown-menu .ds-suggestions { + padding: .5rem; + } +} diff --git a/assets/styles/layouts/_layout-content-wrapper.scss b/assets/styles/layouts/_layout-content-wrapper.scss index 31e896503..918e7480b 100644 --- a/assets/styles/layouts/_layout-content-wrapper.scss +++ b/assets/styles/layouts/_layout-content-wrapper.scss @@ -3,6 +3,7 @@ width: 75%; position: relative; border-radius: $border-radius 0 0 $border-radius; + overflow: hidden; .copyright { padding: .5rem 1rem .5rem .5rem; diff --git a/assets/styles/layouts/_layout-landing.scss b/assets/styles/layouts/_layout-landing.scss new file mode 100644 index 000000000..3330239d8 --- /dev/null +++ b/assets/styles/layouts/_layout-landing.scss @@ -0,0 +1,101 @@ +.cards { + display: flex; + justify-content: space-between; + flex-direction: column; + + a { + text-decoration: none; + color: inherit; + } + + .group { + display: flex; + background: linear-gradient(127deg, $landing-sm-gradient-left, $landing-sm-gradient-right); + flex-wrap: wrap; + } + + .card { + text-align: center; + + &.full { + width: 100%; + padding: 5rem 2rem; + } + + &.quarter { + flex-grow: 2; + margin: 1px; + padding: 2rem; + background: rgba($landing-sm-gradient-overlay, .5); + transition: background-color .4s; + &:hover { + background: rgba($landing-sm-gradient-overlay, 0); + } + } + + h1,h2,h3,h4 { + font-family: $klavika; + font-weight: 300; + font-style: italic; + text-align: center; + color: $g20-white; + } + + h1 { + margin: 0 0 1.25rem; + font-size: 2.25rem; + } + + h3 { font-size: 1.35rem;} + + &#get-started { + background: linear-gradient(127deg, $landing-lg-gradient-left, $landing-lg-gradient-right ); + text-align: center; + + .btn { + display: inline-block; + padding: .85rem 1.5rem; + color: $g20-white; + font-weight: bold; + background: rgba($g20-white, .1); + border: 2px solid rgba($g20-white, .5); + border-radius: $border-radius; + transition: background-color .2s, color .2s; + + &:hover { + background: $g20-white; + color: $b-pool; + } + } + } + } +} + +//////////////////////////////////////////////////////////////////////////////// +///////////////////////////////// MEDIA QUERIES //////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// + + +@include media(large) { + .cards { + .card { + &.full { padding: 3.5rem;} + &.quarter { width: 48%; } + } + } +} + +@include media(small) { + .cards { + .group { flex-direction: column; } + .card{ + &.full { padding: 2.5rem;} + &.quarter { + width: 100%; + max-width: 100%; + padding: 1.25rem; + } + h1 { font-size: 2rem; } + } + } +} diff --git a/assets/styles/layouts/_layout-topnav.scss b/assets/styles/layouts/_layout-topnav.scss index 1ca72c5b8..8b3280e17 100644 --- a/assets/styles/layouts/_layout-topnav.scss +++ b/assets/styles/layouts/_layout-topnav.scss @@ -130,6 +130,10 @@ &#theme-switch-dark { display: $theme-switch-dark; } &#theme-switch-light { display: $theme-switch-light; } } + + #search-btn { + opacity: 0; + } } //////////////////////////////////////////////////////////////////////////////// diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss index 41d4bda93..6c52d0e2e 100644 --- a/assets/styles/styles-default.scss +++ b/assets/styles/styles-default.scss @@ -17,4 +17,6 @@ "layouts/layout-content-wrapper", "layouts/layout-article", "layouts/syntax-highlighting", + "layouts/algolia-search-overrides", + "layouts/layout-landing", "layouts/layout-error-page"; diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index 227b14417..cbdafc7e5 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -137,3 +137,10 @@ $error-page-btn: $b-ocean !default; $error-page-btn-text: $g20-white !default; $error-page-btn-hover: $g20-white !default; $error-page-btn-hover-text: $b-ocean !default; + +// Landing Page colors +$landing-lg-gradient-left: $b-ocean !default; +$landing-lg-gradient-right: $b-pool !default; +$landing-sm-gradient-left: $p-planet !default; +$landing-sm-gradient-right: $p-star !default; +$landing-sm-gradient-overlay: $p-shadow !default; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index e352dd786..aad767491 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -136,3 +136,10 @@ $error-page-btn: $b-ocean; $error-page-btn-text: $g20-white; $error-page-btn-hover: $b-pool; $error-page-btn-hover-text: $g20-white; + +// Landing Page colors +$landing-lg-gradient-left: $b-ocean; +$landing-lg-gradient-right: $b-pool; +$landing-sm-gradient-left: $p-star; +$landing-sm-gradient-right: $p-comet; +$landing-sm-gradient-overlay: $p-planet; diff --git a/assets/styles/tools/_icomoon.scss b/assets/styles/tools/_icomoon.scss index 9dc0c8631..6f20c90e3 100644 --- a/assets/styles/tools/_icomoon.scss +++ b/assets/styles/tools/_icomoon.scss @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('fonts/icomoon.eot?cn4x5l'); - src: url('fonts/icomoon.eot?cn4x5l#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?cn4x5l') format('truetype'), - url('fonts/icomoon.woff?cn4x5l') format('woff'), - url('fonts/icomoon.svg?cn4x5l#icomoon') format('svg'); + src: url('fonts/icomoon.eot?rws1o3'); + src: url('fonts/icomoon.eot?rws1o3#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?rws1o3') format('truetype'), + url('fonts/icomoon.woff?rws1o3') format('woff'), + url('fonts/icomoon.svg?rws1o3#icomoon') format('svg'); font-weight: normal; font-style: normal; } @@ -87,6 +87,12 @@ .icon-menu:before { content: "\e91b"; } +.icon-minus:before { + content: "\e91d"; +} +.icon-plus:before { + content: "\e91e"; +} .icon-settings:before { content: "\e914"; } diff --git a/config.toml b/config.toml index 099ac8cd6..de5881dc8 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,4 @@ -baseURL = "http://docs.influxdata.com/" +baseURL = "https://v2.docs.influxdata.com/" languageCode = "en-us" title = "InfluxDB Documentation" diff --git a/content/v2.0/UI/exploring-metrics.md b/content/v2.0/UI/exploring-metrics.md deleted file mode 100644 index eaeae8a34..000000000 --- a/content/v2.0/UI/exploring-metrics.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Exploring metrics -description: -menu: - v2_0: - name: Exploring metrics - weight: 1 - parent: Placeholder parent ---- - -Explore and visualize your data in the **Data Explorer**. The user interface allows you to move seamlessly between using the builder or templates and manually editing the query; when possible, the interface automatically populates the builder with the information from your raw query. Choose between [visualization types](/chronograf/latest/guides/visualization-types/) for your query. - -To open the **Data Explorer**, click the **Explore** icon in the navigation bar: - - - -## Explore data with Flux - -Flux is InfluxData's new functional data scripting language designed for querying, analyzing, and acting on time series data. To learn more about Flux, see [Getting started with Flux](/flux/v0.7/introduction/getting-started). - -1. Click the **Data Explorer** icon in the sidebar. -2. Use the builder to select from your existing data and have the query automatically formatted for you. -Alternatively, click **Edit Query As Flux** to manually edit the query. To switch back to the query builder, click **Visual Query Builder**. -3. Use the **Functions** pane to review the available Flux functions. Click on a function from the list to add it to your query. -4. Click **Submit** to run your query. You can then preview your graph in the above pane. - -## Visualize your query - -**To visualize your query**: - -* Select a visualization type from the dropdown menu in the upper-left. -<> -* Select the **Visualization** tab at the bottom of the **Data Explorer**. For details about all of the available visualization options, see [Visualization types](/chronograf/latest/guides/visualization-types/). - -## Save your query as a dashboard cell or task - -**To save your query**: - -1. Click **Save as** in the upper right. -2. Click **Dashboard Cell** to add your query to a dashboard. -3. Click **Task** to save your query as a task. diff --git a/content/v2.0/_index.md b/content/v2.0/_index.md index e0cb26b13..ac3d16b97 100644 --- a/content/v2.0/_index.md +++ b/content/v2.0/_index.md @@ -1,11 +1,26 @@ --- -title: InfluxDB v2.0 -seotitle: This is the SEO title for InfluxDB v2.0 -description: placeholder +description: > + InfluxDB is an open source time series database designed to handle high write and query loads. + Learn how to use and leverage InfluxDB in use cases such as monitoring metrics, IoT data, and events. layout: version-landing menu: versions: name: v2.0 --- -_This placeholder content for the landing page for v2.0._ +#### Welcome +Welcome to the InfluxDB v2.0 documentation! +InfluxDB is an open source time series database designed to handle high write and query loads. + +This documentation is meant to help you learn how to use and leverage InfluxDB to meet your needs. +Common use cases include infrastructure monitoring, IoT data collection, events handling and more. +If your use case involves time series data, InfluxDB is purpose-built to handle it. + +{{% note %}} +This is an alpha release of InfluxDB v2.0. +Feedback and bug reports are welcome and encouraged both for InfluxDB and this documentation. +Issue tracking is managed through Github. + +[Submit an InfluxDB issue](https://github.com/influxdata/influxdb/issues/new) +[Submit a documentation issue](https://github.com/influxdata/docs-v2/issues/new) +{{% /note %}} diff --git a/content/v2.0/get-started/setup.md b/content/v2.0/get-started/setup.md index 9160b05f5..1ff10c5b9 100644 --- a/content/v2.0/get-started/setup.md +++ b/content/v2.0/get-started/setup.md @@ -24,6 +24,20 @@ influxd _See the [`influxd` documentation](/v2.0/reference/cli/influxd) for information about available flags and options._ +{{% note %}} +#### InfluxDB "phone-home" +By default, InfluxDB sends telemetry data back to InfluxData. +The [InfluxData telemetry](https://www.influxdata.com/telemetry) page provides +information about what data is collected and how it is used. + +Top opt-out of sending telemetry data back to InfluxData, include the +`--reporting-disabled` flag when starting `influxd`. + +```bash +influxd --reporting-disabled +``` +{{% /note %}} + ## Set up InfluxDB through the UI diff --git a/content/v2.0/process-data/_index.md b/content/v2.0/process-data/_index.md index 0ba0c738c..4a0647a88 100644 --- a/content/v2.0/process-data/_index.md +++ b/content/v2.0/process-data/_index.md @@ -7,7 +7,7 @@ description: > menu: v2_0: name: Process data - weight: 3 + weight: 5 --- InfluxDB's _**task engine**_ is designed for processing and analyzing data. diff --git a/content/v2.0/process-data/manage-tasks/create-task.md b/content/v2.0/process-data/manage-tasks/create-task.md index 64616ea95..520de0b42 100644 --- a/content/v2.0/process-data/manage-tasks/create-task.md +++ b/content/v2.0/process-data/manage-tasks/create-task.md @@ -26,7 +26,7 @@ The InfluxDB UI provides multiple ways to create a task: ### Create a task from the Data Explorer 1. Click on the **Data Explorer** icon in the left navigation menu. - {{< img-hd src="/img/data-explorer-icon.png" alt="Data Explorer Icon" />}} + {{< img-hd src="/img/data-explorer-icon.png" title="Data Explorer Icon" />}} 2. Building a query and click **Save As** in the upper right. 3. Select the **Task** option. @@ -34,12 +34,12 @@ The InfluxDB UI provides multiple ways to create a task: for detailed information about each option. 5. Click **Save as Task**. -{{< img-hd src="/img/data-explorer-save-as-task.png" alt="Add a task from the Data Explorer"/>}} +{{< img-hd src="/img/data-explorer-save-as-task.png" title="Add a task from the Data Explorer"/>}} ### Create a task in the Task UI 1. Click on the **Tasks** icon in the left navigation menu. - {{< img-hd src="/img/tasks-icon.png" alt="Tasks Icon" />}} + {{< img-hd src="/img/tasks-icon.png" title="Tasks Icon" />}} 2. Click **+ Create Task** in the upper right. 3. In the left panel, specify the task options. @@ -47,7 +47,7 @@ The InfluxDB UI provides multiple ways to create a task: 4. In the right panel, enter your task script. 5. Click **Save** in the upper right. -{{< img-hd src="/img/tasks-create-edit.png" alt="Create a task" />}} +{{< img-hd src="/img/tasks-create-edit.png" title="Create a task" />}} ### Import a task 1. Click on the **Tasks** icon in the left navigation menu. @@ -55,8 +55,6 @@ The InfluxDB UI provides multiple ways to create a task: 3. Drag and drop or select a file to upload. 4. Click **Upload Task**. -{{< img-hd src="/img/tasks-import-task.png" alt="Import a task" />}} - ## Create a task using the influx CLI Use `influx task create` command to create a new task. It accepts either a file path or raw Flux. diff --git a/content/v2.0/process-data/manage-tasks/delete-task.md b/content/v2.0/process-data/manage-tasks/delete-task.md index 064bd79f0..b8d963502 100644 --- a/content/v2.0/process-data/manage-tasks/delete-task.md +++ b/content/v2.0/process-data/manage-tasks/delete-task.md @@ -20,8 +20,6 @@ menu: 3. Click **Delete** on the far right. 4. Click **Confirm**. -{{< img-hd src="/img/tasks-delete-task.png" alt="Delete a task" />}} - ## Delete a task with the influx CLI Use the `influx task delete` command to delete a task. diff --git a/content/v2.0/process-data/manage-tasks/view-tasks.md b/content/v2.0/process-data/manage-tasks/view-tasks.md index 40f019b92..9cbf410a1 100644 --- a/content/v2.0/process-data/manage-tasks/view-tasks.md +++ b/content/v2.0/process-data/manage-tasks/view-tasks.md @@ -23,8 +23,6 @@ Click the **Tasks** icon in the left navigation to view the lists of tasks. 3. Select an organization from the **All Organizations** dropdown to filter the list by organization. 4. Click on the heading of any column to sort by that field. -{{< img-hd src="/img/tasks-list.png" alt="View and filter tasks" />}} - ## View tasks with the influx CLI Use the `influx task find` command to return a list of created tasks. diff --git a/content/v2.0/query-data/execute-queries.md b/content/v2.0/query-data/execute-queries.md index 43ec6c883..cef541c64 100644 --- a/content/v2.0/query-data/execute-queries.md +++ b/content/v2.0/query-data/execute-queries.md @@ -20,7 +20,7 @@ This guide covers the different options: ## Data Explorer Queries can be built, executed, and visualized in InfluxDB UI's Data Explorer. -![Data Explorer with Flux](/img/flux-data-explorer.png) +![Data Explorer with Flux](/img/data-explorer-ui.png) ## Influx REPL The [`influx repl` command](/v2.0/reference/cli/influx/repl) starts an interactive diff --git a/content/v2.0/reference/cli/influxd.md b/content/v2.0/reference/cli/influxd.md index 4504a97dc..991ba6c11 100644 --- a/content/v2.0/reference/cli/influxd.md +++ b/content/v2.0/reference/cli/influxd.md @@ -25,7 +25,6 @@ influxd [flags] | `-h`, `--help` | Help for `influxd` | | | `--http-bind-address` | Bind address for the REST HTTP API (default `:9999`) | string | | `--log-level` | Supported log levels are debug, info, and error (default `info`) | string | -| `--nats-path` | Path to NATS queue for scraping tasks (default `~/.influxdbv2/nats`) | string | | `--reporting-disabled` | Disable sending telemetry data to https://telemetry.influxdata.com | | | `--protos-path` | Path to protos on the filesystem (default `~/.influxdbv2/protos`) | string | | `--secret-store` | Data store for secrets (bolt or vault) (default `bolt`) | string | diff --git a/content/v2.0/reference/flux/functions/transformations/fill.md b/content/v2.0/reference/flux/functions/transformations/fill.md index 372fd3d19..7d5ca6826 100644 --- a/content/v2.0/reference/flux/functions/transformations/fill.md +++ b/content/v2.0/reference/flux/functions/transformations/fill.md @@ -8,7 +8,7 @@ menu: weight: 1 --- -The `fill()` function replaces all null values in an input stream and replace them with a non-null value. +The `fill()` function replaces all null values in an input stream with a non-null value. The output stream is the same as the input stream with all null values replaced in the specified column. _**Function type:** Transformation_ diff --git a/content/v2.0/ui/labels.md b/content/v2.0/ui/labels.md deleted file mode 100644 index f75f73d73..000000000 --- a/content/v2.0/ui/labels.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Managing labels -description: This is just an example post to show the format of new 2.0 posts -menu: - v2_0: - name: Managing labels - weight: 1 - parent: Placeholder parent ---- -Labels are !!!. - -**To view labels**: - -* Click the **Configuration** icon in the navigation bar. -* Review the list of labels or enter a search to filter the list of labels. diff --git a/content/v2.0/visualize-data/_index.md b/content/v2.0/visualize-data/_index.md new file mode 100644 index 000000000..4cbd56e4b --- /dev/null +++ b/content/v2.0/visualize-data/_index.md @@ -0,0 +1,15 @@ +--- +title: Visualize data with InfluxDB +description: > + InfluxDB offers a complete dashboard solution for visualizing your time series data. + Create custom dashboards with flexible queries and visualization types. +menu: + v2_0: + name: Visualize data + weight: 4 +--- + +The InfluxDB user interface provides tools for building custom dashboards to visualize your data. +The following articles outline ways to customize and manage dashboards. + +{{< children >}} diff --git a/content/v2.0/UI/dashboards.md b/content/v2.0/visualize-data/dashboards.md similarity index 59% rename from content/v2.0/UI/dashboards.md rename to content/v2.0/visualize-data/dashboards.md index 883cd9068..ca5f0ded6 100644 --- a/content/v2.0/UI/dashboards.md +++ b/content/v2.0/visualize-data/dashboards.md @@ -1,15 +1,17 @@ --- -title: Managing dashboards -description: This is just an example post to show the format of new 2.0 posts +title: Manage InfluxDB dashboards +description: Create, edit, and manage custom dashboards in the InfluxDB user interface (UI). menu: v2_0: - name: Managing dashboards + name: Manage dashboards + parent: Visualize data weight: 1 - parent: Placeholder parent --- Create, edit, and manage dashboards from the **Dashboards** tab in the left navigation. +{{< img-hd src="/img/dashboards-icon.png" title="Dashboard icon" />}} + Variable names changed--instead of dashboard time, it's time range start/time range end (double-check). Window interval replaces interval Save as somewhere--same as send to dashboard @@ -17,7 +19,7 @@ Also save as dashboard/save as tasks Multiple tabs, hide/show tabs, rename tabs -## Creating dashboards +## Create a dashboard **To create a dashboard**: @@ -25,32 +27,33 @@ Multiple tabs, hide/show tabs, rename tabs 2. Click the **+Create Dashboard** button in the upper right. 3. Enter a name for your dashboard in the **Name this dashboard** field in the upper left. -**To add data to your dashboard**: +#### Add data to your dashboard 1. From your dashboard, click **Add Cell** in the upper right. The Data Explorer overlay opens. -2. Create a query in the Data Explorer following the instructions in <>. +2. Create a query in the Data Explorer following the instructions in [Exlpore metrics](/v2.0/visualize-data/explore-metrics). 3. Enter a name for your cell in the upper left. 4. Click the checkmark icon to save the cell to your dashboard. You can also send data to your dashboard directly from the Data Explorer. For details, see <>. -**To add a note to your dashboard**: +#### Add a note to your dashboard 1. From your dashboard, click **Add Note** in the upper right. 2. Enter your note in the window that appears. You can use Markdown syntax to format your note. 3. To preview your Markdown formatting, click the **Preview** option. 4. Click **Save**. -## Modifying dashboards +## Modify a dashboard - **To delete a dashboard**: - 1. Hover over the dashboard name in the list of dashboards to show options. - 2. Click **Delete**. - <> - 3. Click **Confirm** to continue deleting your dashboard. +#### Delete a dashboard +1. Hover over the dashboard name in the list of dashboards to show options. +2. Click **Delete**. +3. Click **Confirm** to continue deleting your dashboard. -**To clone a dashboard**: -* Hover over the dashbaord name in the list of dashboard to show options. -* Click **Clone**. -<> - The cloned dashboard opens. + ![Delete a dashboard](/img/dashboard-delete.png) + +#### Clone a dashboard +1. Hover over the dashbaord name in the list of dashboard to show options. +2. Click **Clone**. The cloned dashboard opens. + + ![Clone a dashboard](/img/dashboard-clone.png) diff --git a/content/v2.0/visualize-data/explore-metrics.md b/content/v2.0/visualize-data/explore-metrics.md new file mode 100644 index 000000000..ae2539342 --- /dev/null +++ b/content/v2.0/visualize-data/explore-metrics.md @@ -0,0 +1,54 @@ +--- +title: Explore metrics with InfluxDB +description: > + Explore and visualize your data in InfluxDB's Data Explorer. + The InfluxDB user interface (UI) allows you to move seamlessly between using the + Flux builder and manually editing the query. +menu: + v2_0: + name: Explore metrics + parent: Visualize data + weight: 1 +--- + +Explore and visualize your data in the **Data Explorer**. +The InfluxDB user interface (UI) allows you to move seamlessly between using the +Flux builder or templates and manually editing the query. +Choose between [visualization types](/v2.0/visualize-data/visualization-types/) for your query. + +To open the **Data Explorer**, click the **Data Explorer** icon in the navigation bar: + +{{< img-hd src="/img/data-explorer-icon.png" title="Data Explorer icon" />}} + +## Explore data with Flux + +Flux is InfluxData's functional data scripting language designed for querying, +analyzing, and acting on time series data. +See [Get started with Flux](/v2.0/query-data/get-started) to learn more about Flux. + +1. Click the **Data Explorer** icon in the sidebar. +2. Use the Flux builder in the bottom panel to select a bucket and filters such as measurement, field or tag. + Alternatively, click **Script Editor** to manually edit the query. + To switch back to the query builder, click **Query Builder**. +3. Use the **Functions** list to review the available Flux functions. + Click on a function from the list to add it to your query. +4. Click **Submit** to run your query. You can then preview your graph in the above pane. + +## Visualize your query +To visualize your query: + +1. Select a visualization type from the dropdown menu in the upper-left. + + {{< img-hd src="/img/visualization-dropdown.png" title="Visualization dropdown" />}} + +2. Select the **Visualization** tab at the bottom of the **Data Explorer**. + For details about all of the available visualization options, see + [Visualization types](/v2.0/visualize-data/visualization-types/). + +## Save your query as a dashboard cell or task + +**To save your query**: + +1. Click **Save as** in the upper right. +2. Click **Dashboard Cell** to add your query to a dashboard. +3. Click **Task** to save your query as a task. diff --git a/content/v2.0/visualize-data/labels.md b/content/v2.0/visualize-data/labels.md new file mode 100644 index 000000000..1ef843a91 --- /dev/null +++ b/content/v2.0/visualize-data/labels.md @@ -0,0 +1,43 @@ +--- +title: Manage labels in the InfluxDB UI +description: > + Labels are a way to add visual metadata to dashboards, tasks, and other items + in the InfluxDB UI. View and manage labels in the InfluxDB user interface. +menu: + v2_0: + name: Manage labels + parent: Visualize data + weight: 1 +--- + +Labels are a way to add visual metadata to dashboards, tasks, and other items in the InfluxDB UI. +To manage labels, click the **Configuration** icon in the navigation bar and select **Labels**. + +{{< img-hd src="/img/labels-nav-link.png" title="Labels configuration" />}} + +#### Create a label +1. Click **+ Create Label**. +2. Enter a **Name** for the label. +3. Select a **Color** for the lable. +4. Enter a description for the label _(Optional)_. +5. Click **Create label**. + +#### Edit a label +1. In the label list view, click the name of the label you would like to edit. + The **Edit Label** overlay will appear. +2. Make the desired changes to the label. +3. Click **Save Changes**. + +#### Delete a label +1. In the label list view, hover over the label you would like to delete. +2. Click **Delete** in the far right of the label row. + +### Add labels to dashboards and tasks +1. In the list view of dashboards or tasks, hover over the item to which you would like to add a label. +2. Click the + + icon that appears to the right of the name. + The **Manage Labels** overlay will appear. +3. Type the name of the label you would like to add to filter the list of available labels. + Click the label you would like to add. More than one label can be added. +4. Click **Save Changes**. diff --git a/content/v2.0/UI/sources.md b/content/v2.0/visualize-data/sources.md similarity index 95% rename from content/v2.0/UI/sources.md rename to content/v2.0/visualize-data/sources.md index b2c483c8f..ad2bf09bf 100644 --- a/content/v2.0/UI/sources.md +++ b/content/v2.0/visualize-data/sources.md @@ -1,15 +1,15 @@ --- -title: Managing sources -description: This is just an example post to show the format of new 2.0 posts +title: Manage sources +description: InfluxDB offers a complete dashboard solution for visualizing your data and monitoring your infrastructure. menu: v2_0: - name: Managing sources + name: Manage sources + parent: Visualize data weight: 1 - parent: Placeholder parent --- -Chronograf offers a complete dashboard solution for visualizing your data and monitoring your infrastructure: +InfluxDB offers a complete dashboard solution for visualizing your data and monitoring your infrastructure: * View [pre-created dashboards](/chronograf/latest/guides/using-precreated-dashboards) from the Host List page. Dashboards are available depending on which Telegraf input plugins you have enabled. These pre-created dashboards cannot be cloned or edited. * Create custom dashboards from scratch by building queries in the Data Explorer, as described [below](#build-a-dashboard). diff --git a/content/v2.0/UI/visualization-types.md b/content/v2.0/visualize-data/visualization-types.md similarity index 80% rename from content/v2.0/UI/visualization-types.md rename to content/v2.0/visualize-data/visualization-types.md index 495c7e06f..73a0a8c36 100644 --- a/content/v2.0/UI/visualization-types.md +++ b/content/v2.0/visualize-data/visualization-types.md @@ -1,15 +1,20 @@ --- title: Visualization types -description: This is just an example post to show the format of new 2.0 posts +description: > + InfluxDB dashboards support mulitple visualization types including line graphs, + gauges, tables, and more. menu: v2_0: name: Visualization types + parent: Visualize data weight: 1 - parent: Placeholder parent --- -Chronograf's dashboard views support the following visualization types, which can be selected in the **Visualization Type** selection view of the <>. -[Visualization Type selector](/img/chronograf/chrono-viz-types-selector.png) +The InfluxDB's user interface's (UI) dashboard views support the following visualization types, +which can be selected in the **Visualization Type** selection view of the +[Data Explorer](/v2.0/visualize-data/explore-metrices). + +[Visualization Type selector](/img/chrono-viz-types-selector.png) Each of the available visualization types and available user controls are described below. @@ -22,7 +27,7 @@ Each of the available visualization types and available user controls are descri * [Gauge](#gauge) * [Table](#table) -For information on adding and displaying annotations in graph views, see [Adding annotations to Chronograf views](/chronograf/v1.7/guides/annotations/). +For information on adding and displaying annotations in graph views, see [Adding annotations to Chronograf views](/v1.7/guides/annotations/). ### Graphs @@ -32,11 +37,11 @@ There are several types of graphs you can create. The **Line Graph** view displays a time series in a line graph. -![Line Graph selector](/img/chronograf/chrono-viz-line-graph-selector.png) +![Line Graph selector](/img/chrono-viz-line-graph-selector.png) ##### Line Graph Controls -![Line Graph Controls](/img/chronograf/chrono-viz-line-graph-controls.png) +![Line Graph Controls](/img/chrono-viz-line-graph-controls.png) Use the **Line Graph Controls** to specify the following: @@ -55,18 +60,18 @@ Use the **Line Graph Controls** to specify the following: ##### Line Graph example -![Line Graph example](/img/chronograf/chrono-viz-line-graph-example.png) +![Line Graph example](/img/chrono-viz-line-graph-example.png) #### Stacked Graph The **Stacked Graph** view displays multiple time series bars as segments stacked on top of each other. -![Stacked Graph selector](/img/chronograf/chrono-viz-stacked-graph-selector.png) +![Stacked Graph selector](/img/chrono-viz-stacked-graph-selector.png) ##### Stacked Graph Controls -![Stacked Graph Controls](/img/chronograf/chrono-viz-stacked-graph-controls.png) +![Stacked Graph Controls](/img/chrono-viz-stacked-graph-controls.png) Use the **Stacked Graph Controls** to specify the following: @@ -85,18 +90,18 @@ Use the **Stacked Graph Controls** to specify the following: ##### Stacked Graph example -![Stacked Graph example](/img/chronograf/chrono-viz-stacked-graph-example.png) +![Stacked Graph example](/img/chrono-viz-stacked-graph-example.png) ### Step Graph The **Step-Plot Graph** view displays a time series in a staircase graph. -![Step-Plot Graph selector](/img/chronograf/chrono-viz-step-plot-graph-selector.png) +![Step-Plot Graph selector](/img/chrono-viz-step-plot-graph-selector.png) #### Step Graph Controls -![Step-Plot Graph Controls](/img/chronograf/chrono-viz-step-plot-graph-controls.png) +![Step-Plot Graph Controls](/img/chrono-viz-step-plot-graph-controls.png) Use the **Step-Plot Graph Controls** to specify the following: @@ -113,7 +118,7 @@ Use the **Step-Plot Graph Controls** to specify the following: #### Step-Plot Graph example -![Step-Plot Graph example](/img/chronograf/chrono-viz-step-plot-graph-example.png) +![Step-Plot Graph example](/img/chrono-viz-step-plot-graph-example.png) ### Bar Graph @@ -122,11 +127,11 @@ The **Bar Graph** view displays the specified time series using a bar chart. To select this view, click the Bar Graph selector icon. -![Bar Graph selector](/img/chronograf/chrono-viz-bar-graph-selector.png) +![Bar Graph selector](/img/chrono-viz-bar-graph-selector.png) #### Bar Graph Controls -![Bar Graph Controls](/img/chronograf/chrono-viz-bar-graph-controls.png) +![Bar Graph Controls](/img/chrono-viz-bar-graph-controls.png) Use the **Bar Graph Controls** to specify the following: @@ -143,7 +148,7 @@ Use the **Bar Graph Controls** to specify the following: #### Bar Graph example -![Bar Graph example](/img/chronograf/chrono-viz-bar-graph-example.png) +![Bar Graph example](/img/chrono-viz-bar-graph-example.png) ### Line Graph + Single Stat @@ -152,11 +157,11 @@ The **Line Graph + Single Stat** view displays the specified time series in a li To select this view, click the **Line Graph + Single Stat** view option. -![Line Graph + Single Stat selector](/img/chronograf/chrono-viz-line-graph-single-stat-selector.png) +![Line Graph + Single Stat selector](/img/chrono-viz-line-graph-single-stat-selector.png) #### Line Graph + Single Stat Controls -![Line Graph + Single Stat Controls](/img/chronograf/chrono-viz-line-graph-single-stat-controls.png) +![Line Graph + Single Stat Controls](/img/chrono-viz-line-graph-single-stat-controls.png) Use the **Line Graph + Single Stat Controls** to specify the following: @@ -173,13 +178,13 @@ Use the **Line Graph + Single Stat Controls** to specify the following: #### Line Graph + Single Stat example -![Line Graph + Single Stat example](/img/chronograf/chrono-viz-line-graph-single-stat-example.png) +![Line Graph + Single Stat example](/img/chrono-viz-line-graph-single-stat-example.png) ### Single Stat The **Single Stat** view displays the most recent value of the specified time series as a numerical value. -![Single Stat view](/img/chronograf/chrono-viz-single-stat-selector.png) +![Single Stat view](/img/chrono-viz-single-stat-selector.png) If a cell's query includes a [`GROUP BY` tag](/influxdb/latest/query_language/data_exploration/#group-by-tags) clause, Chronograf sorts the different [series](/influxdb/latest/concepts/glossary/#series) lexicographically and shows the most recent [field value](/influxdb/latest/concepts/glossary/#field-value) associated with the first series. For example, if a query groups by the `name` [tag key](/influxdb/latest/concepts/glossary/#tag-key) and `name` has two [tag values](/influxdb/latest/concepts/glossary/#tag-value) (`chronelda` and `chronz`), Chronograf shows the most recent field value associated with the `chronelda` series. @@ -205,11 +210,11 @@ The **Gauge** view displays the single value most recent value for a time series To select this view, click the Gauge selector icon. -![Gauge selector](/img/chronograf/chrono-viz-gauge-selector.png) +![Gauge selector](/img/chrono-viz-gauge-selector.png) #### Gauge Controls -![Gauge Controls](/img/chronograf/chrono-viz-gauge-controls.png) +![Gauge Controls](/img/chrono-viz-gauge-controls.png) Use the **Gauge Controls** to specify the following: @@ -223,17 +228,17 @@ Use the **Gauge Controls** to specify the following: #### Gauge example -![Gauge example](/img/chronograf/chrono-viz-gauge-example.png) +![Gauge example](/img/chrono-viz-gauge-example.png) ### Table The **Table** panel displays the results of queries in a tabular view, which is sometimes easier to analyze than graph views of data. -![Table selector](/img/chronograf/chrono-viz-table-selector.png) +![Table selector](/img/chrono-viz-table-selector.png) #### Table Controls -![Table Controls](/img/chronograf/chrono-viz-table-controls.png) +![Table Controls](/img/chrono-viz-table-controls.png) Use the **Table Controls** to specify the following: @@ -259,4 +264,4 @@ Threshold settings apply to any cells with values, except when they appear in th #### Table view example -![Table example](/img/chronograf/chrono-viz-table-example.png) +![Table example](/img/chrono-viz-table-example.png) diff --git a/layouts/_default/version-landing.html b/layouts/_default/version-landing.html index 35d996e1c..a74423a9c 100644 --- a/layouts/_default/version-landing.html +++ b/layouts/_default/version-landing.html @@ -4,11 +4,30 @@ {{ partial "sidebar.html" . }}
- +
-
-

{{ $.Page.Title }}

+
+ {{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) }} +

InfluxDB {{ $currentVersion }} Documentation

Get Started +
+
+ + +

Collect Data

+ + + +

Query Data

+ + + +

Visualize Data

+ + + +

Process Data

+
diff --git a/layouts/partials/article/latest-version.html b/layouts/partials/article/latest-version.html index f9a75775e..1f75d28e0 100644 --- a/layouts/partials/article/latest-version.html +++ b/layouts/partials/article/latest-version.html @@ -2,7 +2,7 @@ {{ $latestVersion := $.Site.Data.versions.latest_version }} {{ $latestVersionURL := replaceRE "[^/]+.*?[0]" $latestVersion .RelPermalink }} {{ if not (eq $currentVersion $latestVersion) }} -
+

This page documents an earlier version of InfluxDB. View the latest version of this page in the InfluxDB {{ $latestVersion }} documentation. diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a58b1fe01..fa7149361 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,20 @@ + {{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) }} + + + + {{ partial "footer/javascript.html" }} diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html index 3d5407e70..f0d0bbee5 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.html @@ -1,5 +1,6 @@ {{ $versionSelector := resources.Get "js/version-selector.js" }} {{ $contentInteractions := resources.Get "js/content-interactions.js" }} -{{ $footerjs := slice $versionSelector $contentInteractions | resources.Concat "js/footer.bundle.js" }} +{{ $searchInteractions := resources.Get "js/search-interactions.js" }} +{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions | resources.Concat "js/footer.bundle.js" }} diff --git a/layouts/partials/header/stylesheets.html b/layouts/partials/header/stylesheets.html index e668de9f8..c400b9ca3 100644 --- a/layouts/partials/header/stylesheets.html +++ b/layouts/partials/header/stylesheets.html @@ -1,3 +1,6 @@ + + + {{ $cssOptionsDark := (dict "targetPath" "dark-theme.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $cssOptionsLight := (dict "targetPath" "light-theme.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $cssSidebarOpen := (dict "targetPath" "sidebar-open.css" "outputStyle" "compressed" "enableSourceMap" true) }} diff --git a/layouts/sitemap.xml b/layouts/sitemap.xml new file mode 100644 index 000000000..a7ce78de8 --- /dev/null +++ b/layouts/sitemap.xml @@ -0,0 +1,21 @@ + + {{ range .Data.Pages }} + + {{ .Permalink }}{{ if not .Lastmod.IsZero }} + {{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}{{ end }}{{ with .Sitemap.ChangeFreq }} + {{ . }}{{ end }}{{ if ge .Sitemap.Priority 0.0 }} + {{ .Sitemap.Priority }}{{ end }}{{ if .IsTranslated }}{{ range .Translations }} + {{ end }} + {{ end }} + + {{ end }} + diff --git a/static/fonts/icomoon.eot b/static/fonts/icomoon.eot index 18e383421..9add80a76 100755 Binary files a/static/fonts/icomoon.eot and b/static/fonts/icomoon.eot differ diff --git a/static/fonts/icomoon.svg b/static/fonts/icomoon.svg index 695661357..1deca15a0 100755 --- a/static/fonts/icomoon.svg +++ b/static/fonts/icomoon.svg @@ -36,6 +36,8 @@ + + diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf index ab5d0d5f4..d590167c0 100755 Binary files a/static/fonts/icomoon.ttf and b/static/fonts/icomoon.ttf differ diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff index 0990bc118..465c4be0a 100755 Binary files a/static/fonts/icomoon.woff and b/static/fonts/icomoon.woff differ diff --git a/static/img/coming-soon.svg b/static/img/coming-soon.svg new file mode 100644 index 000000000..633405792 --- /dev/null +++ b/static/img/coming-soon.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/dashboard-clone.png b/static/img/dashboard-clone.png new file mode 100644 index 000000000..d35c1d4de Binary files /dev/null and b/static/img/dashboard-clone.png differ diff --git a/static/img/dashboard-delete.png b/static/img/dashboard-delete.png new file mode 100644 index 000000000..0e53b77b3 Binary files /dev/null and b/static/img/dashboard-delete.png differ diff --git a/static/img/dashboards-icon.png b/static/img/dashboards-icon.png new file mode 100644 index 000000000..2c65c7c50 Binary files /dev/null and b/static/img/dashboards-icon.png differ diff --git a/static/img/data-explorer-icon.png b/static/img/data-explorer-icon.png new file mode 100644 index 000000000..8da32b1b1 Binary files /dev/null and b/static/img/data-explorer-icon.png differ diff --git a/static/img/data-explorer-save-as-task.png b/static/img/data-explorer-save-as-task.png new file mode 100644 index 000000000..52791ab5f Binary files /dev/null and b/static/img/data-explorer-save-as-task.png differ diff --git a/static/img/data-explorer-ui.png b/static/img/data-explorer-ui.png new file mode 100644 index 000000000..15daf3c78 Binary files /dev/null and b/static/img/data-explorer-ui.png differ diff --git a/static/img/labels-nav-link.png b/static/img/labels-nav-link.png new file mode 100644 index 000000000..c0020b1b0 Binary files /dev/null and b/static/img/labels-nav-link.png differ diff --git a/static/img/tasks-create-edit.png b/static/img/tasks-create-edit.png new file mode 100644 index 000000000..6ab89e794 Binary files /dev/null and b/static/img/tasks-create-edit.png differ diff --git a/static/img/tasks-icon.png b/static/img/tasks-icon.png new file mode 100644 index 000000000..e40cf4a95 Binary files /dev/null and b/static/img/tasks-icon.png differ diff --git a/static/img/visualization-dropdown.png b/static/img/visualization-dropdown.png new file mode 100644 index 000000000..8cf5bea0b Binary files /dev/null and b/static/img/visualization-dropdown.png differ