website/integrations: chronograf: document (#12474)

* website/integrations: chronograf: init

Adds the version proposed in 8ac6761920/website/integrations/services/chronograf/index.md .

Signed-off-by: 4d62 <github-user@sdko.org>

* website/integrations: chronograf: start cleanup

Adds a `sidebar_label`, updates the start of the documentation to the follow the template, and updates `service.company` to `chronograf.company` in the preparation documentation.

Signed-off-by: 4d62 <github-user@sdko.org>

* website/integrations: chronograf: add to sidebar

Adds the integration to the `sidebarsIntegration.js` file.

Signed-off-by: 4d62 <github-user@sdko.org>

* website/integrations: chronograf: main body

Rewrite most of the documentation, cleanup unneeded bits, and update format.

Signed-off-by: 4d62 <github-user@sdko.org>

* website/integrations: chronograf: finishing touches

This PR is now ready for review. Cleans up sentence structure, grammar, and visual stuff.

Signed-off-by: 4d62 <github-user@sdko.org>

* website/integrations: chronograf: lint

Links modified file with prettier.

Signed-off-by: 4d62 <github-user@sdko.org>

* website/integrations: chronograf: add `USE_ID_TOKEN=true`

Adds `USE_ID_TOKEN=true` to the list of needed environment following this comment in the initial merge request:  https://github.com/goauthentik/authentik/pull/7766#issuecomment-1951393510

Signed-off-by: 4d62 <github-user@sdko.org>

* website/integrations: chronograf: apply review suggestions

Applies suggestions from the first review round

---------

Signed-off-by: 4d62 <github-user@sdko.org>

website/integrations/services/chronograf/index.md

@@ -0,0 +1,56 @@
+---
+title: Integrate with Chronograf
+sidebar_label: Chronograf
+---
+
+# Chronograf
+
+<span class="badge badge--secondary">Support level: Community</span>
+
+## What is Chronograf
+
+> Chronograf lets you quickly visualize the data stored in InfluxDB, enabling you to build robust queries and alerts. It is simple to use and comes with templates and libraries for rapidly creating dashboards with real-time data visualizations.
+>
+> -- https://www.influxdata.com/time-series-platform/chronograf/
+
+## Preparation
+
+The following placeholders are used in this guide:
+
+- `chronograf.company` is the FQDN of your Chronograf install.
+- `authentik.company` is the FQDN of your authentik install.
+
+## authentik configuration
+
+1. From the authentik Admin interface navigate to **Applications** -> **Applications** on the left sidebar.
+2. Create an application and an OAuth2/OpenID provider using the [wizard](https://docs.goauthentik.io/docs/add-secure-apps/applications/manage_apps#add-new-applications).
+    - Note the application slug, client ID, and client secret, as they will be required later.
+    - Set a strict redirect URI to `https://chronograf.company/oauth/authentik/callback`.
+    - Choose a signing key (any available key is acceptable).
+3. Complete and submit the settings to close the wizard.
+
+## Chronograf configuration
+
+Add the following environment variables to your Chronograf setup. If you are using a configuration file for Chronograf, these settings can also be included there. You may modify the values for `GENERIC_SCOPES` and `GENERIC_API_KEY` to suit your specific requirements.
+
+:::info  
+Refer to the [Chronograf configuration options documentation](https://docs.influxdata.com/chronograf/v1/administration/config-options/) for more information.  
+:::
+
+```
+PUBLIC_URL=https://chronograf.company
+TOKEN_SECRET=<A random secret>
+JWKS_URL=https://authentik.company/application/o/<application-slug>/jwks/
+GENERIC_NAME=authentik
+GENERIC_CLIENT_ID=<client-id>
+GENERIC_CLIENT_SECRET=<client-secret>
+GENERIC_SCOPES=email,profile,openid
+GENERIC_DOMAINS=authentik.company
+GENERIC_AUTH_URL=https://authentik.company/application/o/authorize/
+GENERIC_TOKEN_URL=https://auth.authentik.company/application/o/token/
+GENERIC_API_URL=https://auth.authentik.company/application/o/userinfo/
+GENERIC_API_KEY=email
+USE_ID_TOKEN=true
+```
+
+After restarting your Chronograf instance, the login page should display a "Log in with authentik" button.

website/sidebarsIntegrations.js

@@ -137,6 +137,7 @@ module.exports = {
                     type: "category",
                     label: "Monitoring",
                     items: [
+                        "services/chronograf/index",
                         "services/gatus/index",
                         "services/glitchtip/index",
                         "services/grafana/index",