Alloy Support

.github/workflows/deploy.yaml

@@ -7,8 +7,6 @@ on:
   workflow_dispatch:
 env:
   REACT_APP_FARO_URL: ${{ secrets.REACT_APP_FARO_URL }}
-  REACT_APP_CONVERT_ENDPOINT: 'https://agent-configurator-backend-m8gy7.ondigitalocean.app/convert'
-
 
 permissions:
   contents: read
@@ -47,10 +45,10 @@ jobs:
       - name: Build and push
         working-directory: backend
         run: |
-          export KO_DOCKER_REPO=ghcr.io/grafana/agent-configurator-backend
+          export KO_DOCKER_REPO=ghcr.io/grafana/alloy-configurator-backend
           ko build --sbom=none --bare --platform linux/arm64,linux/arm/v7,linux/amd64 -t ${{ github.ref_name }} \
-          --image-label org.opencontainers.image.title=agent-configurator-backend \
-          --image-label org.opencontainers.image.description="Backend for the agent-configurator" \
+          --image-label org.opencontainers.image.title=alloy-configurator-backend \
+          --image-label org.opencontainers.image.description="Backend for the alloy-configurator" \
           --image-label org.opencontainers.image.url=${{ github.server_url }}/${{ github.repository }} \
           --image-label org.opencontainers.image.revision=${{ github.sha }} \
           --image-label org.opencontainers.image.version=${{ github.ref_name }} \

README.md

@@ -1,23 +1,23 @@
-# Agent Configurator Tool
+# Alloy Configurator Tool
 
-The _Agent Configuration Generator_ is an easy to use web interface for creating and editing agent configuration files. It targets the flow configuration format.
+The _Alloy Configuration Generator_ is an easy to use web interface for creating and editing alloy configuration files. It targets the flow configuration format.
 
-Try it out here: [grafana.github.io/agent-configurator/](https://grafana.github.io/agent-configurator/)
+Try it out here: [grafana.github.io/alloy-configurator/](https://grafana.github.io/alloy-configurator/)
 
-**This is an experimental tool and still in its early days!**. While we aim to support all agent components and are commited to adding support for new components, complete support will take some time.
+**This is an experimental tool and still in its early days!**. While we aim to support all alloy components and are commited to adding support for new components, complete support will take some time.
 
 ## Core Features
 
 Features marked as completed are currently present while the rest are still in development.
 
-* [x] Create a fresh agent configuration file using a guided configuration wizard
+* [x] Create a fresh alloy configuration file using a guided configuration wizard
 * [x] Update existing configurations by editing existing components or adding new ones
-* [ ] Have [all components](https://grafana.com/docs/agent/latest/flow/reference/components/) configurable without writing code
+* [ ] Have [all components](https://grafana.com/docs/alloy/latest/reference/components/) configurable without writing code
 * [x] Share configurations as URLs
 
 ## Target Audience
 
-* First time agent users
+* First time alloy users
   * Provide value by allowing _mix and match_ configuration without having to understand the configuration language
 * Advanced users
   * Provide value by improving discoverability of components and configuration options

backend/go.mod

@@ -1,10 +1,10 @@
-module github.com/grafana/agent-configurator/backend
+module github.com/grafana/alloy-configurator/backend
 
 go 1.21.0
 
 toolchain go1.21.3
 
-require github.com/grafana/agent v0.39.1
+require github.com/grafana/alloy v0.39.1
 
 require (
 	cloud.google.com/go/pubsub v1.33.0 // indirect

backend/main.go

@@ -8,8 +8,8 @@ import (
 	"os"
 	"time"
 
-	"github.com/grafana/agent/converter"
-	"github.com/grafana/agent/converter/diag"
+	"github.com/grafana/alloy/converter"
+	"github.com/grafana/alloy/converter/diag"
 	"github.com/rs/cors"
 )
 

package.json

@@ -128,7 +128,7 @@
       "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
     },
     "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+        "[/\\\\]node_modules[/\\\\](?!@grafana/ui|d3-interpolate|d3-color|ol).+\\.(js|jsx|mjs|cjs|ts|tsx)$",
       "^.+\\.module\\.(css|sass|scss)$"
     ],
     "modulePaths": [],

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Configure your Grafana Agent with ease!"
+      content="Configure Alloy with ease!"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Grafana Agent Configurator</title>
+    <title>Grafana Alloy Configurator</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.tsx

@@ -59,16 +59,15 @@ function App() {
       <Header></Header>
       <section className={styles.firstSection}>
         <div className={styles.hero}>
-          <h1>Welcome to the Grafana Agent Configuration Generator</h1>
+          <h1>Welcome to the Grafana Alloy Configuration Generator</h1>
           <p>
-            This tool allows for easy configuration of Grafana Agents{" "}
-            <i>Flow</i> system. To get started click on{" "}
-            <code>Add Component</code> in the editor below
+            This tool allows for easy configuration of Grafana Alloy. To get
+            started click on <code>Add Component</code> in the editor below
           </p>
           <hr />
           <VerticalGroup>
             <p>
-              If this is your first time working with the agent, we recommend
+              If this is your first time working with the Alloy, we recommend
               you use the configuration wizard or get started with an example
               configuration, based on your usecase.
             </p>
@@ -87,11 +86,11 @@ function App() {
               </Button>
               <LinkButton
                 variant="secondary"
-                href="https://grafana.com/docs/agent/latest/flow/"
+                href="https://grafana.com/docs/alloy/latest/"
                 target="_blank"
                 icon="external-link-alt"
               >
-                View Flow Docs
+                View Alloy Docs
               </LinkButton>
               <div
                 className={css`

src/components/ComponentEditor/common/AuthenticationEditor.tsx

@@ -81,7 +81,7 @@ const Component = ({
       {watchAuthType === "in_cluster" && (
         <Alert
           severity="info"
-          title="No further configuration is neccesarry when running the agent in a
+          title="No further configuration is neccesarry when running alloy in a
             Kubernetes environment with the correct service account"
         />
       )}
@@ -212,7 +212,7 @@ const AuthenticationEditor = {
   Component,
   preTransform(
     data: Record<string, any>,
-    def: AuthenticationType = "none"
+    def: AuthenticationType = "none",
   ): Record<string, any> {
     data["auth_type"] = def;
     if (data.bearer_token || data.bearer_token_file)
@@ -242,7 +242,7 @@ const AuthenticationEditor = {
       case "oauth2":
         data.oauth2.scopes = data.oauth2.scopes.map(
           (x: string | SelectableValue<string>) =>
-            typeof x === "object" ? x.value : x
+            typeof x === "object" ? x.value : x,
         );
 
         delete data["bearer_token"];

src/components/ComponentEditor/components/ImportGit.tsx

@@ -0,0 +1,59 @@
+import { FormAPI, InlineField } from "@grafana/ui";
+
+import TypedInput from "../inputs/TypedInput";
+
+const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+  return (
+    <>
+      <InlineField
+        label="Repository"
+        tooltip="Source repository containing an alloy module"
+        labelWidth={20}
+      >
+        <TypedInput width={64} control={methods.control} name="repository" />
+      </InlineField>
+      <InlineField
+        label="Revision"
+        tooltip="Branch, Commit or Tag to use when checking out the repository"
+        labelWidth={20}
+      >
+        <TypedInput
+          width={64}
+          placeholder="main"
+          control={methods.control}
+          name="revision"
+        />
+      </InlineField>
+      <InlineField
+        label="Path"
+        tooltip="Path of the alloy module file to import"
+        labelWidth={20}
+      >
+        <TypedInput width={64} control={methods.control} name="path" />
+      </InlineField>
+      <InlineField
+        label="Pull frequency"
+        tooltip="How often the repository should be checked for updates to the specified revision"
+        labelWidth={20}
+      >
+        <TypedInput
+          width={64}
+          control={methods.control}
+          name="pull_frequency"
+        />
+      </InlineField>
+    </>
+  );
+};
+
+const ImportGit = {
+  preTransform(data: Record<string, any>): Record<string, any> {
+    return data;
+  },
+  postTransform(data: Record<string, any>): Record<string, any> {
+    return data;
+  },
+  Component,
+};
+
+export default ImportGit;

src/components/ComponentEditor/components/LokiProcess.tsx

@@ -386,9 +386,9 @@ const stages = [
           <p>
             The metrics processing stage is currently not supported for
             graphical editing. If this feature is important to you, please open
-            an issue in the{" "}
+            an issue in the
             <a
-              href="https://github.com/grafana/agent-configurator"
+              href="https://github.com/grafana/alloy-configurator"
               target="_blank"
               rel="noreferrer"
             >

src/components/ComponentEditor/components/modules/GrafanaCloudAutoConfigure.tsx

@@ -16,7 +16,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           {...commonOptions}
         >
           <TypedInput
-            name="arguments.stack_name"
+            name="stack_name"
             control={methods.control}
             rules={{ required: true }}
           />
@@ -29,7 +29,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           {...commonOptions}
         >
           <TypedInput
-            name="arguments.token"
+            name="token"
             control={methods.control}
             rules={{ required: true }}
           />

src/components/ComponentEditor/index.tsx

@@ -7,7 +7,7 @@ import {
   HorizontalGroup,
 } from "@grafana/ui";
 import { faro } from "@grafana/faro-web-sdk";
-import { Attribute, Block, toBlock } from "../../lib/river";
+import { Block, toBlock } from "../../lib/river";
 import PrometheusRemoteWrite from "./components/PrometheusRemoteWrite";
 import PrometheusExporterRedis from "./components/PrometheusExporterRedis";
 import PrometheusScrape from "./components/PrometheusScrape";
@@ -22,7 +22,6 @@ import { css } from "@emotion/css";
 import { GrafanaTheme2 } from "@grafana/data";
 import OTelColProcessorBatch from "./components/OTelColProcessorBatch";
 import OTelColExporterPrometheus from "./components/OTelColExporterPrometheus";
-import GrafanaCloudAutoconfigure from "./components/modules/GrafanaCloudAutoConfigure";
 import OTelColExporterLoki from "./components/OTelColExporterLoki";
 import PrometheusExporterUnix from "./components/PrometheusExporterUnix";
 import LokiSourceFile from "./components/LokiSourceFile";
@@ -37,6 +36,8 @@ import LokiWrite from "./components/LokiWrite";
 import LokiSourceWindowsEvent from "./components/LokiSourceWindowsEvent";
 import PrometheusExporterWindows from "./components/PrometheusExporterWindows";
 import LokiProcess from "./components/LokiProcess";
+import { useComponentContext } from "../../state";
+import ImportGit from "./components/ImportGit";
 
 interface ComponentEditorProps {
   updateComponent: (component: Block) => void;
@@ -49,6 +50,7 @@ const ComponentEditor = ({
   discard,
 }: ComponentEditorProps) => {
   const styles = useStyles(getStyles);
+  const { imports } = useComponentContext();
 
   const {
     Component,
@@ -130,20 +132,13 @@ const ComponentEditor = ({
         return DiscoveryRelabel;
       case "pyroscope.scrape":
         return PyroscopeScrape;
-      //@ts-ignore if no module matches, we fall through to the unsupported component path
-      case "module.git":
-        const repo = component.attributes.find(
-          (x) => x.name === "repository",
-        ) as Attribute | null;
-        const path = component.attributes.find(
-          (x) => x.name === "path",
-        ) as Attribute | null;
-        switch (`${repo?.value};${path?.value}`) {
-          case "https://github.com/grafana/agent-modules.git;modules/grafana-cloud/autoconfigure/module.river":
-            return GrafanaCloudAutoconfigure;
-        }
-      //@ts-ignore if no module matches, we fall through to the unsupported component path
+      case "import.git":
+        return ImportGit;
       default:
+        const moduleEditor = imports[component.name]?.componentForm;
+        if (moduleEditor) {
+          return moduleEditor;
+        }
         faro.api?.pushEvent("edit_unsupported", { component: component.name });
         return {
           Component: UnsupportedComponent,
@@ -153,7 +148,9 @@ const ComponentEditor = ({
     }
   })();
 
-  let spec = KnownComponents[component.name];
+  let spec = KnownComponents[component.name]
+    ? KnownComponents[component.name]
+    : imports[component.name];
   let formValues = component.formValues(spec);
   formValues = preTransform(formValues);
   if (spec && spec.multi) formValues["label"] = component.label;

src/components/ComponentEditor/inputs/ReferenceMultiSelect.tsx

@@ -14,14 +14,15 @@ const ReferenceMultiSelect = ({
   width,
   defaultValue,
 }: ReferenceSelectProps<{ "-reference": string }[]>) => {
-  const { components } = useComponentContext();
+  const { components, imports } = useComponentContext();
   defaultValue = defaultValue ?? get(control.defaultValuesRef.current, name);
   const [value, setValue] = useState<SelectableValue<object>[]>(() => {
     if (!defaultValue) return [];
     return defaultValue.map((v) => ({ label: v["-reference"], value: v }));
   });
   const targetComponents = toOptions(
     components.map((x) => x.block),
+    imports,
     exportName,
   );
   return (

src/components/ComponentEditor/inputs/ReferenceSelect.tsx

@@ -14,14 +14,15 @@ const ReferenceSelect = ({
   defaultValue,
   rules,
 }: ReferenceSelectProps<{ "-reference": string }>) => {
-  const { components } = useComponentContext();
+  const { components, imports } = useComponentContext();
   defaultValue = defaultValue ?? get(control.defaultValuesRef.current, name);
   const [value, setValue] = useState<SelectableValue<object>>(() => {
     if (!defaultValue) return null;
     return { label: defaultValue["-reference"], value: defaultValue };
   });
   const targetComponents = toOptions(
     components.map((x) => x.block),
+    imports,
     exportName,
   );
   return (