New Grafana dashboards docs + InfluxDB update (#1161)

* [feat] add pathfinder page for grafana dashboards

* Rewrite `Grafana dashboards` first version

* Reorder the structure and internal links for the new `InfluxDB` documentation

* Complete new InfluxDB v2 instructions

* Update src/data/markdown/translated-guides/en/04 Results output/200 Real-time/00 InfluxDB.md

Co-authored-by: Matt Dodson <[email protected]>

* Update src/data/markdown/translated-guides/en/04 Results output/300 Grafana dashboards.md

Co-authored-by: Matt Dodson <[email protected]>

* Update src/data/markdown/translated-guides/en/04 Results output/200 Real-time/00 InfluxDB.md

Co-authored-by: Matt Dodson <[email protected]>

* Update src/data/markdown/translated-guides/en/04 Results output/200 Real-time/00 InfluxDB.md

Co-authored-by: Matt Dodson <[email protected]>

* Change old redirects

---------

Co-authored-by: Pepe Cano <[email protected]>

Author: MattDodsonEnglish

gatsby-node.js

@@ -1395,7 +1395,7 @@ const createRedirects = ({ actions }) => {
 
   createRedirect({
     fromPath: '/results-visualization/influxdb-+-grafana/',
-    toPath: '/results-output/real-time/influxdb-grafana/',
+    toPath: '/results-output/grafana-dashboards/',
     isPermanent: true,
   });
 
@@ -1547,12 +1547,6 @@ const createRedirects = ({ actions }) => {
     isPermanent: true,
   });
 
-  createRedirect({
-    fromPath: '/es/visualizacion-de-resultados/influxdb-+-grafana/',
-    toPath: '/es/visualizacion-de-resultados/influxdb-grafana/',
-    isPermanent: true,
-  });
-
   createRedirect({
     fromPath: '/using-k6/scenarios/arrival-rate',
     toPath: '/using-k6/scenarios/concepts/open-vs-closed',
@@ -1597,6 +1591,18 @@ const createRedirects = ({ actions }) => {
     isPermanent: true,
   });
 
+  createRedirect({
+    fromPath: '/es/visualizacion-de-resultados/influxdb-+-grafana/',
+    toPath: '/results-output/grafana-dashboards/',
+    isPermanent: true,
+  });
+
+  createRedirect({
+    fromPath: '/results-output/real-time/influxdb-grafana',
+    toPath: '/results-output/grafana-dashboards/',
+    isPermanent: true,
+  });
+
   const redirects = {
     '/javascript-api/k6-http/cookiejar-k6-http':
       '/javascript-api/k6-http/cookiejar/',
@@ -1646,7 +1652,7 @@ const createRedirects = ({ actions }) => {
     '/getting-started/results-output/datadog':
       '/results-visualization/datadog/',
     '/getting-started/results-output/influxdb':
-      '/results-output/real-time/influxdb-grafana/',
+      '/results-output/real-time/influxdb/',
     '/getting-started/results-output/json': '/results-visualization/json/',
     '/getting-started/results-output/statsd': '/results-visualization/statsd/',
     '/javascript-api/k6-metrics/counter-k6-metrics/counter-add-value-tags':

src/components/pages/doc-integrations/doc-icons-row/doc-icons-row.view.js

@@ -18,12 +18,18 @@ export const DocIconsRow = ({ className, title, subtitle, iconsData }) => (
           {to ? (
             <Link className={styles.link} to={to}>
               <Icon className={styles.icon} />
-              <p className={'link'}>{name}</p>
+              <p
+                className={'link'}
+                dangerouslySetInnerHTML={{ __html: name }}
+              />
             </Link>
           ) : (
             <a className={styles.link} href={link}>
               <Icon className={styles.icon} />
-              <p className={'link'}>{name}</p>
+              <p
+                className={'link'}
+                dangerouslySetInnerHTML={{ __html: name }}
+              />
             </a>
           )}
         </li>

src/data/markdown/docs/04 integrations/04 Results visualization/00 influxdb-grafana.md

@@ -1,4 +1,4 @@
 ---
-title: 'InfluxDB + Grafana'
-redirect: 'https://k6.io/docs/results-output/real-time/influxdb-grafana'
+title: 'InfluxDB'
+redirect: 'https://k6.io/docs/results-output/real-time/influxdb'
 ---

src/data/markdown/translated-guides/en/01 Get started/04 Results Output.md

@@ -88,7 +88,7 @@ The available built-in outputs include:
 - [Dynatrace](/results-output/real-time/dynatrace)
 - [Elasticsearch](/results-output/real-time/elasticsearch)
 - [Grafana Cloud Prometheus](/results-output/real-time/grafana-cloud-prometheus)
-- [InfluxDB](/results-output/real-time/influxdb-grafana)
+- [InfluxDB](/results-output/real-time/influxdb)
 - [JSON](/results-output/real-time/json)
 - [Netdata](/results-output/real-time/netdata)
 - [New Relic](/results-output/real-time/new-relic)

src/data/markdown/translated-guides/en/04 Results output/200 Real-time.md

@@ -34,7 +34,7 @@ You can also stream real-time metrics to the following services:
 - [Dynatrace](/results-output/real-time/dynatrace)
 - [Elasticsearch](/results-output/real-time/elasticsearch)
 - [Grafana Cloud Prometheus](/results-output/real-time/grafana-cloud-prometheus)
-- [InfluxDB](/results-output/real-time/influxdb-grafana)
+- [InfluxDB](/results-output/real-time/influxdb)
 - [Netdata](/results-output/real-time/netdata)
 - [New Relic](/results-output/real-time/new-relic)
 - [Prometheus remote write](/results-output/real-time/prometheus-remote-write)

src/data/markdown/translated-guides/en/04 Results output/200 Real-time/00 InfluxDB - Grafana.md

@@ -0,0 +1,58 @@
+---
+title: 'InfluxDB'
+excerpt: 'k6 has an output extension to store k6 metrics in InfluxDB v2. This document shows you how to configure this integration.'
+---
+
+Using the [InfluxDB extension](https://github.com/grafana/xk6-output-influxdb), you can store k6 metrics in [InfluxDB v2.0](https://docs.influxdata.com/influxdb/v2.0/) and analyze your performance results with Grafana or [other tools](https://docs.influxdata.com/influxdb/cloud-serverless/query-data/tools/).
+
+## Build the k6 version
+
+<InstallationInstructions extensionUrl="github.com/grafana/xk6-output-influxdb"/>
+
+## Run the test
+
+Check that the InfluxDB instance to store the k6 metrics is running.
+
+Use the previous k6 binary and run the test passing the following [options](#options):
+
+```bash
+K6_INFLUXDB_ORGANIZATION="<INFLUXDB-ORGANIZATION-ID>" \
+K6_INFLUXDB_BUCKET="<INFLUXDB-BUCKET>" \
+K6_INFLUXDB_TOKEN="<INFLUXDB-TOKEN>" \
+K6_INFLUXDB_ADDR="<INFLUXDB-HTTP-ADDRESS>" \
+./k6 run script.js -o xk6-influxdb
+```
+
+
+k6 runs the test script and sends the [k6 metrics](/using-k6/metrics/) in real-time to the InfluxDB instance. You can now select the bucket to [query](https://docs.influxdata.com/influxdb/v2.7/query-data/) and [visualize](https://docs.influxdata.com/influxdb/v2.7/visualize-data/) the stored k6 metrics, for example, using the [InfluxDB Data Explorer](https://docs.influxdata.com/influxdb/v2.7/query-data/execute-queries/data-explorer/).
+
+<br/>
+
+![InfluxDB Data Explorer / k6 bucket](./images/InfluxDB/influxdb-data-explorer-k6-bucket.png)
+
+
+## Options
+
+Here is the full list of options that can be configured and passed to the extension:
+
+<!-- vale off -->
+| ENV | Default | Description |
+|-----|---------|-------------|
+| K6_INFLUXDB_ORGANIZATION      |                       | Your InfluxDB organization ID. [View organizations](https://docs.influxdata.com/influxdb/v2.7/organizations/). |
+| K6_INFLUXDB_BUCKET            |                       | The bucket to store k6 metrics data. [Manage buckets](https://docs.influxdata.com/influxdb/v2.7/organizations/buckets/). |
+| K6_INFLUXDB_TOKEN             |                       | An API token that provides authorized access to store data. [Manage API tokens](https://docs.influxdata.com/influxdb/v2.7/security/tokens/). |
+| K6_INFLUXDB_ADDR              | http://localhost:8086 | The address of the InfluxDB instance. |
+| K6_INFLUXDB_PUSH_INTERVAL     | 1s | The flush's frequency of the `k6` metrics. |
+| K6_INFLUXDB_CONCURRENT_WRITES | 4 | Number of concurrent requests for flushing data. It is useful when a request takes more than the expected time (more than flush interval). |
+| K6_INFLUXDB_TAGS_AS_FIELDS    | vu:int,iter:int,url | A comma-separated string to set `k6` metrics as non-indexable fields (instead of tags). An optional type can be specified using :type as in vu:int will make the field integer. The possible field types are int, bool, float and string, which is the default. Example: vu:int,iter:int,url:string,event_time:int. |
+| K6_INFLUXDB_INSECURE          | false | When `true`, it will skip `https` certificate verification. |
+| K6_INFLUXDB_PRECISION         | 1ns | The timestamp [Precision](https://docs.influxdata.com/influxdb/v2.7/reference/glossary/#precision). |
+<!-- vale on -->
+
+## Grafana Dashboards
+
+You can use Grafana to query and visualize data from an InfluxDB instance. The instructions are available on [InfluxDB](https://docs.influxdata.com/influxdb/v2.7/tools/grafana/) and [Grafana](https://grafana.com/docs/grafana/latest/datasources/influxdb/).
+
+You can also build a [custom Grafana dashboard](/results-output/grafana-dashboards/) to visualize the testing results in your own way. 
+
+For testing purposes, the [influxdb extension](https://github.com/grafana/xk6-output-influxdb) repository includes a [docker-compose setup](https://github.com/grafana/xk6-output-influxdb#docker-compose) with two basic dashboards.

src/data/markdown/translated-guides/en/04 Results output/200 Real-time/00 InfluxDB.md

@@ -0,0 +1,26 @@
+---
+title: Grafana dashboards
+excerpt: With multiple k6 output formats, you also have multiple ways to visualize test results in a Grafana dashboard.
+---
+
+You have multiple ways to query k6 results in Grafana. 
+Having test results in a dashboard brings various benefits:
+- Visualize your results to analyze performance during the test run or over multiple test runs. 
+- Correlate test results with application and system metrics in the same dashboard to get a holistic overview of your system's performance and quickly find the root causes of performance issues. 
+
+![A grafana dashboard correlating k6 results with observability data](./images/correlated-grafana-dashboard-grafana-cloud-k6.png)
+
+## Options
+
+With [Grafana](https://grafana.com/grafana/), you can create a custom dashboard to query and **visualize data from multiple sources and any type of backend**. With k6, you can stream your test results to any backend using a [custom output extension](/extensions/get-started/create/output-extensions/) or an existing [real-time output](/results-output/real-time/#service).
+
+The flexibility and interoperability of Grafana and k6 let you join test and observability data in one dashboard, independently of where the data is stored.
+
+For inspiration about how to build a custom dashboard that visualizes k6 results, browse the list of [community-built k6 dashboards](https://grafana.com/grafana/dashboards/?search=k6). The following outputs include pre-built Grafana dashboards for their storage:
+
+- [AWSTimestream](https://github.com/leonyork/xk6-output-timestream)
+- [InfluxDB](/results-output/real-time/influxdb)
+- [Prometheus remote write](/results-output/real-time/prometheus-remote-write)
+- [TimescaleDB](/results-output/real-time/timescaledb/)
+
+For a managed solution, [Grafana Cloud k6](https://grafana.com/products/cloud/k6/) is our commercial offer bringing test storage, pre-built dashboards, enhanced collaboration features, and many more additional capabilities.