Enable Grafana Cloud k6 Docs (#1187)

* Enable `Grafana Cloud k6` Docs

* Add `query` param for grafana.com links

* Add `blockquote` on the k6 Cloud homepage

* Add external link icon on header menu option

* Update `Running k6/Execution modes`

* Update `Cloud` option to stream results

* Update `Test Builder`

* Fix grammar

* Sort the `Cloud docs` header menu

Author: ppcano

gatsby-node.js

@@ -193,6 +193,13 @@ const topLevelLinks = [
   {
     label: 'Cloud Docs',
     to: '/cloud/',
+    submenu: [
+      { label: 'k6 Cloud', to: `/cloud/` },
+      {
+        label: 'Grafana Cloud k6',
+        to: 'https://grafana.com/docs/grafana-cloud/k6',
+      },
+    ],
   },
   {
     label: 'Extensions',

src/components/blocks/footer/footer.view.js

@@ -124,17 +124,17 @@ export const Footer = () => {
                     <li className={styles.navColumnItem}>
                       <a
                         className={styles.navColumnLink}
-                        href={`${main}/cloud`}
+                        href={'https://grafana.com/products/cloud/k6/?src=k6io'}
                       >
-                        Cloud
+                        Grafana Cloud k6
                       </a>
                     </li>
                     <li className={styles.navColumnItem}>
                       <a
                         className={styles.navColumnLink}
-                        href={`${main}/pricing`}
+                        href={'https://grafana.com/pricing/?src=k6io'}
                       >
-                        Pricing
+                        Grafana Cloud k6 Pricing
                       </a>
                     </li>
                     <li className={styles.navColumnItem}>
@@ -148,17 +148,9 @@ export const Footer = () => {
                     <li className={styles.navColumnItem}>
                       <a
                         className={styles.navColumnLink}
-                        href={'https://go2.grafana.com/k6-contact.html'}
+                        href={`${main}/what-to-consider-when-building-or-buying-a-load-testing-solution`}
                       >
-                        Schedule a Cloud Demo
-                      </a>
-                    </li>
-                    <li className={styles.navColumnItem}>
-                      <a
-                        className={styles.navColumnLink}
-                        href={`${main}/professional-services`}
-                      >
-                        Professional services
+                        Build vs Buy
                       </a>
                     </li>
                     <li className={styles.navColumnItem}>
@@ -180,8 +172,11 @@ export const Footer = () => {
                       </a>
                     </li>
                     <li className={styles.navColumnItem}>
-                      <Link className={styles.navColumnLink} to={'/cloud/'}>
-                        Cloud Docs
+                      <Link
+                        className={styles.navColumnLink}
+                        href={'https://grafana.com/docs/grafana-cloud/k6'}
+                      >
+                        Grafana Cloud k6 Docs
                       </Link>
                     </li>
                     <li className={styles.navColumnItem}>
@@ -200,14 +195,6 @@ export const Footer = () => {
                         Integrations
                       </Link>
                     </li>
-                    <li className={styles.navColumnItem}>
-                      <a
-                        className={styles.navColumnLink}
-                        href={`${main}/why-your-organization-should-perform-load-testing`}
-                      >
-                        Not a developer. Why k6?
-                      </a>
-                    </li>
                     <li className={styles.navColumnItem}>
                       <a
                         className={styles.navColumnLink}
@@ -219,9 +206,9 @@ export const Footer = () => {
                     <li className={styles.navColumnItem}>
                       <a
                         className={styles.navColumnLink}
-                        href={`${main}/what-to-consider-when-building-or-buying-a-load-testing-solution/`}
+                        href={`${main}/why-your-organization-should-perform-load-testing`}
                       >
-                        Build vs Buy
+                        Not a developer. Why k6?
                       </a>
                     </li>
                   </ul>

src/components/blocks/header/item-with-submenu/item-with-submenu.module.scss

@@ -88,6 +88,19 @@
     padding: 0;
     height: 100%;
   }
+  svg {
+    margin-left: 6px;
+    path {
+      stroke: $color-primary;
+    }
+  }
+  &:hover {
+    svg {
+      path {
+        stroke: $color-accent-primary;
+      }
+    }
+  }
 }
 
 .link {

src/components/blocks/header/item-with-submenu/item-with-submenu.view.js

@@ -4,6 +4,7 @@ import React from 'react';
 import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
 
 import styles from './item-with-submenu.module.scss';
+import ExternalIcon from './svg/exnternal-link-icon.inline.svg';
 
 export const ItemWithSubmenu = ({ label, submenu, shouldBeHighlighted }) => {
   const { buttonProps, itemProps, isOpen } = useDropdownMenu(submenu.length);
@@ -46,6 +47,9 @@ export const ItemWithSubmenu = ({ label, submenu, shouldBeHighlighted }) => {
                 {...itemProps[i]}
               >
                 {item.label}
+                {item.to.startsWith('http') && !item.to.includes('k6.io/') && (
+                  <ExternalIcon />
+                )}
               </Link>
             </li>
           ))}

src/components/blocks/header/item-with-submenu/svg/exnternal-link-icon.inline.svg

@@ -21,7 +21,7 @@ On this page, read about how to:
 ## Before you start
 
 To run tests on k6 Cloud, you to need to:
-- [ ] Have a k6 Cloud account. If you don't have one, [sign up](https://app.k6.io/account/register) and get 50 cloud tests with the Free Trial.
+- [ ] Have a k6 Cloud account.
 - [ ] [Install k6](/get-started/installation) on your local machine:
 
 ## Run test on the CLI

src/data/markdown/docs/03 cloud/01 Creating and running a test/02 Cloud tests from the cli.md

@@ -198,13 +198,13 @@ You can run the same test in different modes with minimal changes.
 
 k6 supports three execution modes to run a k6 test: local, distributed, and cloud. 
 
-- [Local](#running-local-tests): the test execution happens entirely on a single machine, container, or CI server. 
+- **Local**: the test execution happens entirely on a single machine, container, or CI server. 
 
   ```bash
   k6 run script.js
   ```
 
-- [Distributed](https://k6.io/blog/running-distributed-tests-on-k8s/): the test execution is distributed across a Kubernetes cluster. 
+- **Distributed**: the test execution is [distributed across a Kubernetes cluster](https://k6.io/blog/running-distributed-tests-on-k8s/). 
 
   <CodeGroup labels={["Running", "k6-resource.yaml"]} lineNumbers={[true]}> 
 
@@ -228,11 +228,11 @@ k6 supports three execution modes to run a k6 test: local, distributed, and clou
 
   </CodeGroup>
 
-- [Cloud](/cloud/creating-and-running-a-test/cloud-tests-from-the-cli/): the test runs on k6 Cloud.
+- **Cloud**: the test runs on [k6 Cloud](/cloud/creating-and-running-a-test/cloud-tests-from-the-cli/) or [Grafana Cloud k6](https://grafana.com/docs/grafana-cloud/k6/get-started/run-cloud-tests-from-the-cli/).
 
   ```bash
   k6 cloud script.js
   ```
 
-  Additionally, k6 Cloud can run cloud tests on your [own cloud infrastructure](/cloud/creating-and-running-a-test/private-load-zones/), and accept the test results from a [local](/results-output/real-time/cloud/) or [distributed test](https://github.com/grafana/k6-operator#k6-cloud-output).
+  Additionally, cloud-based solutions can run cloud tests on your [own cloud infrastructure](/cloud/creating-and-running-a-test/private-load-zones/), and accept the test results from a [local](/results-output/real-time/cloud/) or [distributed test](https://github.com/grafana/k6-operator#k6-cloud-output).
 

src/data/markdown/translated-guides/en/01 Get started/03 Running k6.md

@@ -1,20 +1,14 @@
 ---
 title: 'Cloud'
-excerpt: 'When streaming the results to the k6 Cloud, the machine - where you execute the k6 CLI command - runs the test and uploads the results to the k6 Cloud. Then, you will be able to visualize and analyze the results on the web app in real-time.'
+excerpt: 'When streaming the results to the cloud, the machine - where you execute the k6 CLI command - runs the test and uploads the results to the cloud. Then, you will be able to visualize and analyze the results on the web app in real-time.'
 ---
 
-Besides [running cloud tests](/cloud/creating-and-running-a-test/cloud-tests-from-the-cli), you can also run a test locally and stream the results to the [k6 Cloud](/cloud).
+Besides [running cloud tests](/get-started/running-k6/#execution-modes), you can also run a test locally and stream the results to: 
+- [Grafana Cloud k6](https://grafana.com/docs/grafana-cloud/k6/get-started/run-cloud-tests-from-the-cli/#run-locally-and-stream-to-the-cloud)
+- [k6 Cloud](/cloud) (only available for existing customers)
 
-When streaming the results to the k6 Cloud, the machine - where you execute the k6 CLI command - runs the test and uploads the results to the k6 Cloud. Then, you will be able to visualize and analyze the results on the web app in real-time.
+When streaming the results to the cloud, the machine - where you execute the k6 CLI command - runs the test and uploads the results to the cloud-based solution. Then, you will be able to visualize and analyze the results on the web app in real-time.
 
-<Blockquote mod="attention"
-title="k6 charges your subscription for cloud streaming"
->
-
-Data storage and processing are primary cloud costs,
-so `k6 run --out cloud` will consume VUh or test runs from your subscription.
-
-</Blockquote>
 
 
 ## Streaming results vs. running on cloud servers
@@ -25,48 +19,57 @@ cloud script.js`.
 Fundamentally the difference is the machine that the test runs on:
 
 - `k6 run --out cloud` runs k6 locally and streams the results to the cloud.
-- `k6 cloud`, on the other hand, uploads your script to [k6 cloud](/cloud) and runs the test on the cloud infrastructure,
-to run the
-  In this case you'll only see status updates in your CLI.
+- `k6 cloud`, on the other hand, uploads your script to the cloud solution and runs the test on the cloud infrastructure. In this case you'll only see status updates in your CLI.
+
+In all cases you'll be able to see your test results at [k6 Cloud](https://app.k6.io) or [Grafana Cloud](https://grafana.com/products/cloud/).
+
+<Blockquote mod="attention"
+title="k6 charges your subscription for cloud streaming"
+>
+
+Data storage and processing are primary cloud costs,
+so `k6 run --out cloud` will consume VUh or test runs from your subscription.
+
+</Blockquote>
 
-In all cases you'll be able to see your test results at `https://app.k6.io`.
 
 ## Instructions
 
-**1 (Optional) - Log in to the k6 Cloud**
+**1 (Optional) - Log in to the cloud**
 
-Assuming you have installed k6, the first step is to log in to k6 Cloud. You can use your [API token](https://app.k6.io/account/api-token) or username and password:
+Assuming you have installed k6, the first step is to log in to the cloud service. 
 
-<CodeGroup labels={["Log in to k6 Cloud", "Log in with username and password"]}>
+With the `k6 login cloud` command, you can set up your API token on the k6 machine to authenticate against the cloud service.
+
+Copy your token from [k6 Cloud](https://app.k6.io/account/api-token) or [Grafana Cloud k6](https://grafana.com/docs/grafana-cloud/k6/author-run/tokens-and-cli-authentication/) and pass it as:
 
-```bash
-$ k6 login cloud --token <YOUR_K6_CLOUD_API_TOKEN>
-```
+
+<CodeGroup labels={["Log in to the cloud"]}>
 
 ```bash
-$ k6 login cloud
+$ k6 login cloud --token <YOUR_API_TOKEN>
 ```
 
 </CodeGroup>
 
 **2 - Run the tests and upload the results**
 
-Now, k6 will authenticate you against the k6 Cloud, and you can use the `--out` option to send the k6 results to the k6 Cloud as:
+Now, k6 will authenticate you against the cloud service, and you can use the `--out` option to send the k6 results to the cloud as:
 
-<CodeGroup labels={["Upload results to the k6 Cloud"]}>
+<CodeGroup labels={["Upload results to the cloud"]}>
 
 ```bash
 $ k6 run --out cloud script.js
 ```
 
 </CodeGroup>
 
-Alternatively, you could skip the `k6 login` command when using your [API token](https://app.k6.io/account/api-token) with the `k6 run` command as:
+Alternatively, you could skip the `k6 login cloud` command when passing your API token to the `k6 run` command as:
 
-<CodeGroup labels={["Upload results to the k6 Cloud using K6_CLOUD_TOKEN"]}>
+<CodeGroup labels={["Upload results to the cloud using K6_CLOUD_TOKEN"]}>
 
 ```bash
-$ K6_CLOUD_TOKEN=<YOUR_K6_CLOUD_API_TOKEN> k6 run --out cloud script.js
+$ K6_CLOUD_TOKEN=<YOUR_API_TOKEN> k6 run --out cloud script.js
 ```
 
 </CodeGroup>
@@ -77,15 +80,15 @@ After running the command, the console shows an URL. Copy this URL and paste it
 
 ```bash
 execution: local
-    output: cloud (https://app.k6.io/runs/721751)
+    output: cloud (https://acmecorp.grafana.net/a/k6-app/runs/123456)
     script: script.js
 ```
 
 </CodeGroup>
 
-![k6 Cloud Test Results](./images/Cloud/k6-cloud-results.png)
+![Grafana Cloud k6 Test Results](./images/Cloud/screenshot-stream-k6-results-to-grafana-cloud-k6.png)
 
-When you send the results to the k6 Cloud with `k6-out`, data will be
+When you send the results to the k6 Cloud with `k6 run --out`, data will be
 continuously streamed to the cloud. While this happens the state of the test run
 will be marked as `Running`. A test run that ran its course will be marked
 `Finished`. The run state has nothing to do with the test passing any
@@ -95,12 +98,12 @@ If you deliberately abort your test (e.g. by pressing _Ctrl-C_), your test will
 end up as `Aborted by User`. You can still look and analyze the test data you
 streamed so far. The test will just have run shorter than originally planned.
 
-Another possibility would be if you lose network connection with the k6 Cloud
-while your test is running. In that case the k6 Cloud will patiently wait for
+Another possibility would be if you lose network connection with the cloud service
+while your test is running. In that case the cloud service will patiently wait for
 you to reconnect. In the meanwhile your test's run state will continue to
 appear as `Running` on the web app.
 
-If no reconnection happens, the k6 Cloud will time out after two minutes of no
+If no reconnection happens, the cloud service will time out after two minutes of no
 data, setting the run state to `Timed out`. You can still analyze a timed out
 test but you'll of course only have access to as much data as was streamed
 before the network issue.
@@ -113,9 +116,9 @@ When streaming, k6 will collect all data and send it to the cloud in batches.
 
 | Name | Description |
 | ---- | ----------- |
-| `K6_CLOUD_METRIC_PUSH_INTERVAL`               | How often to send data to the k6 cloud (default `'1s'`).                                        |
+| `K6_CLOUD_METRIC_PUSH_INTERVAL`               | How often to send data to the cloud (default `'1s'`).                                        |
 
-k6 can also _aggregate_ the data it sends to the k6 cloud each batch. This
+k6 can also _aggregate_ the data it sends to the cloud each batch. This
 reduces the amount of data sent to the cloud. Aggregation is disabled by
 default.
 
@@ -138,10 +141,5 @@ Outlier data&mdash;far outside the lower and upper quartiles&mdash; is not aggre
 > aggregate. For that case the aggregation settings are however set by the
 > cloud infrastructure and are not controllable from the CLI.
 
-## Read more
-
-- [Analyzing results on the k6 Cloud](/cloud/analyzing-results/overview)
-- [Running cloud tests](/cloud/creating-and-running-a-test/cloud-tests-from-the-cli)
-
 
 [iqr]: https://en.wikipedia.org/wiki/Interquartile_range