Merge pull request #190 from influxdata/new-variable-types

New variable types

assets/styles/layouts/_inline-icons.scss

@@ -3,6 +3,7 @@
   .inline {
     margin: 0 .15rem;
     &.middle:before { vertical-align: middle; }
+    &.top:before { vertical-align: text-top; }
     &.xsmall:before { font-size: .8rem; }
     &.small:before { font-size: .9rem; }
     &.large:before { font-size: 1.1rem; }

content/v2.0/visualize-data/variables/create-variable.md

@@ -15,6 +15,11 @@ _For information about variable types, see [Variable types](/v2.0/visualize-data
 
 ### Create a variable in the Data Explorer
 
+{{% note %}}
+Only [Query variables](/v2.0/visualize-data/variables/variable-types/#query)
+can be created from the Data Explorer.
+{{% /note %}}
+
 1. Click the **Data Explorer** icon in the sidebar.
 
     {{< nav-icon "data-explorer" >}}
@@ -35,8 +40,9 @@ _For information about variable types, see [Variable types](/v2.0/visualize-data
 2. Select the **Variables** tab.
 3. Click **+Create Variable**.
 4. Enter a name for your variable.
-5. Enter your variable.
-6. Click **Create**.
+5. Select your [variable type](/v2.0/visualize-data/variables/variable-types/).
+6. Enter the appropriate variable information.
+7. Click **Create**.
 
 ## Import a variable
 

content/v2.0/visualize-data/variables/delete-variable.md

@@ -8,6 +8,7 @@ menu:
 weight: 205
 "v2.0/tags": [variables]
 ---
+
 Delete an existing variable in the InfluxDB user interface (UI).
 
 ### Delete a variable
@@ -17,4 +18,9 @@ Delete an existing variable in the InfluxDB user interface (UI).
     {{< nav-icon "settings" >}}
 
 2. Select the **Variables** tab.
-3. Hover over a variable and click the trash can icon.
+3. Hover over a variable, click the **{{< icon "trash" >}}** icon, and **Delete**.
+
+{{% warn %}}
+Once deleted, any dashboards with queries that utilize the variable will no
+longer function correctly.
+{{% /warn %}}

content/v2.0/visualize-data/variables/export-variable.md

@@ -18,7 +18,8 @@ Variables are exported as downloadable JSON files.
     {{< nav-icon "settings" >}}
 
 2. Select the **Variables** tab.
-3. Hover over a variable in the list, then click the gear icon ({{< icon "gear" >}}) and select **Export**.
+3. Hover over a variable in the list, then click the gear icon (**{{< icon "gear" >}}**)
+   and select **Export**.
 4. Review the JSON in the window that appears.
 5. Select one of the following options:
   * **Download JSON**: Download the dashboard as a JSON file.

content/v2.0/visualize-data/variables/update-variable.md

@@ -19,5 +19,5 @@ Update an existing dashboard variable's name or JSON content in the InfluxDB use
 
 2. Select the **Variables** tab.
 3. Click on a variable's name from the list.
-4. Update the variable's name and query.
+4. Update the variable's name, type, and associated information.
 5. Click **Submit**.

content/v2.0/visualize-data/variables/variable-types.md

@@ -9,26 +9,43 @@ weight: 207
 "v2.0/tags": [variables]
 ---
 
-{{% note %}}
-In the current version of InfluxDB v2.0 alpha, only [query-populated variables](#query) are available.
-{{% /note %}}
-
 Variable types determine how a variable's list of possible values is populated.
+The following variable types are available:
+
+- [Map](#map)
+- [Query](#query)
+- [CSV](#csv)
+
+## Map
+Map variables use a list of key value pairs in CSV format to map keys to specific values.
+Keys populate the variable's value list in the InfluxDB user interface (UI), but
+values are used when actually processing the query.
+
+The most common use case for map variables is aliasing simple, human-readable keys
+to complex values.
+
+##### Map variable CSV example
+```js
+Juanito MacNeil,"5TKl6l8i4idg15Fxxe4P"
+Astrophel Chaudhary,"bDhZbuVj5RV94NcFXZPm"
+Ochieng Benes,"YIhg6SoMKRUH8FMlHs3V"
+Mila Emile,"o61AhpOGr5aO3cYVArC0"
+```
 
 ## Query
-Variable values are populated using the `_value` column of a Flux query.
+Query variable values are populated using the `_value` column of a Flux query.
 
-##### Variable query example
+##### Query variable example
 ```js
 // List all buckets
 buckets()
-	|> rename(columns: {"name": "_value"})
+  |> rename(columns: {"name": "_value"})
   |> keep(columns: ["_value"])
 ```
 
 _For examples of dashboard variable queries, see [Common variable queries](/v2.0/visualize-data/variables/common-variables)._
 
-
+{{% note %}}
 #### Important things to note about variable queries
 - The variable will only use values from the `_value` column.
   If the data you’re looking for is in a column other than `_value`, use the
@@ -39,3 +56,20 @@ _For examples of dashboard variable queries, see [Common variable queries](/v2.0
   Use the [`group()` function](/v2.0/reference/flux/functions/built-in/transformations/group)
   to group everything into a single table.
 - Do not use any [predefined dashboard variables](/v2.0/visualize-data/variables/#predefined-dashboard-variables) in variable queries.
+{{% /note %}}
+
+## CSV
+CSV variables use a CSV-formatted list to populate variable values.
+A common use case is when the list of potential values is static and cannot be
+queried from InfluxDB.
+
+##### CSV variable examples
+```
+value1, value2, value3, value4
+```
+```
+value1
+value2
+value3
+value4
+```

layouts/shortcodes/icon.html

@@ -45,7 +45,7 @@
 {{ else if eq $icon "search" }}
 <span class="inline icon-ui-search middle small"></span>
 {{ else if or (eq $icon "trash") (eq $icon "trashcan") (eq $icon "delete") }}
-<span class="inline icon-ui-trash small"></span>
+<span class="inline icon-ui-trash top small"></span>
 {{ else if eq $icon "triangle" }}
 <span class="inline icon-ui-triangle middle"></span>
 {{ else if eq $icon "cloud" }}