feat: establish a hook to get up2date validation information

api.http

@@ -1,6 +1,6 @@
 ###
 # Call supported-distribtions
-GET http://localhost:3000/validation/supported-distribtions
+GET http://localhost:3000/validation/supported-distributions
 
 ###
 # Call verification endpoint
@@ -29,7 +29,7 @@ service:
   extensions: [health_check, pprof, zpages]
   pipelines:
     traces:
-      receivers: [otlp]
+      receivers: [otlp, foobar]
       processors: [batch]
       exporters: [otlp]
     metrics:

package.json

@@ -33,6 +33,7 @@
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.0.0",
 		"js-yaml": "^4.1.0",
+		"lodash": "^4.17.21",
 		"lucide-react": "^0.284.0",
 		"monaco-editor": "^0.43.0",
 		"monaco-languageserver-types": "^0.2.3",
@@ -55,6 +56,7 @@
 		"@testing-library/react": "^14.0.0",
 		"@types/eslint": "^8.44.3",
 		"@types/js-yaml": "^4.0.6",
+		"@types/lodash": "^4.14.199",
 		"@types/node": "^18.16.0",
 		"@types/prettier": "^3.0.0",
 		"@types/react": "^18.2.22",

src/app/validation/route.ts

@@ -13,7 +13,7 @@ const redis = Redis.fromEnv();
 
 const rateLimit = new Ratelimit({
 	redis,
-	limiter: Ratelimit.slidingWindow(30, "1 m"),
+	limiter: Ratelimit.slidingWindow(40, "1 m"),
 	analytics: true,
 	prefix: "rate-limit-validate",
 });

src/components/AppHeader.tsx

@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: 2023 Dash0 Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import Logo from "./assets/svg/otelbin-logo-new.svg";
+import Logo from "~/components/assets/svg/otelbin-logo-new.svg";
 import { ButtonGroup, ButtonGroupItem } from "~/components/button-group";
 import { Columns, Code2, LogIn } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/tooltip";

src/components/monaco-editor/ErrorConsole.tsx

@@ -4,6 +4,7 @@
 import { useEffect, useState } from "react";
 import { ChevronDown, XCircle } from "lucide-react";
 import { type NextFont } from "next/dist/compiled/@next/font";
+import { useServerSideValidation } from "../validation/useServerSideValidation";
 
 export interface IAjvError {
 	message: string;
@@ -25,6 +26,9 @@ export default function ErrorConsole({ errors, font }: { errors?: IError; font:
 	const errorCount = (errors?.ajvErrors?.length ?? 0) + (errors?.jsYamlError != null ? 1 : 0);
 	const [isOpenErrorConsole, setIsOpenErrorConsole] = useState(false);
 
+	const serverSideValidationResult = useServerSideValidation();
+	console.log({ serverSideValidationResult });
+
 	useEffect(() => {
 		if (errorCount === 0) {
 			setIsOpenErrorConsole(false);

src/components/share/SignedInUrlSharing.tsx

@@ -3,18 +3,7 @@
 
 import useSWR from "swr";
 import { UrlCopy } from "~/components/share/UrlCopy";
-
-interface FetcherArgs {
-	url: string;
-	method: string;
-	body?: string;
-}
-
-const fetcher = (args: FetcherArgs) =>
-	fetch(args.url, {
-		method: args.method,
-		body: args.body,
-	}).then((res) => res.json());
+import { fetcher } from "~/lib/fetcher";
 
 export interface SignedInUrlSharingProps {
 	fullURL: string;

src/components/validation/binding.ts

@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: 2023 Dash0 Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export const distroBinding = {
+	prefix: "",
+	name: "distro",
+	fallback: null as string | null,
+} as const;
+
+export const distroVersionBinding = {
+	prefix: "",
+	name: "distroVersion",
+	fallback: null as string | null,
+} as const;

src/components/validation/useDistributions.ts

@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2023 Dash0 Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import useSWR from "swr";
+import { type Distributions } from "~/types";
+import { fetcher } from "~/lib/fetcher";
+
+export function useDistributions() {
+	return useSWR<Distributions>(
+		{
+			url: `validation/supported-distributions`,
+			method: "GET",
+		},
+		fetcher
+	);
+}

src/components/validation/useServerSideValidation.ts

@@ -0,0 +1,114 @@
+// SPDX-FileCopyrightText: 2023 Dash0 Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+"use client";
+
+import { debounce } from "lodash";
+import { useUrlState } from "~/lib/urlState/client/useUrlState";
+import { distroBinding, distroVersionBinding } from "~/components/validation/binding";
+import { editorBinding } from "~/components/monaco-editor/editorBinding";
+import { useEffect, useMemo, useState } from "react";
+import { type ServerSideValidationResult } from "~/types";
+
+interface ValidationState {
+	isLoading: boolean;
+	// the config that was/is being validated
+	config: string;
+	// the distro that was/is being validated
+	distro: string | null;
+	// the distroVersion that was/is being validated
+	distroVersion: string | null;
+	result: ServerSideValidationResult | null;
+}
+
+const initialValidationState: ValidationState = {
+	isLoading: false,
+	config: "",
+	distro: null,
+	distroVersion: null,
+	result: null,
+};
+
+export function useServerSideValidation(): ValidationState {
+	const [{ config, distro, distroVersion }] = useUrlState([distroBinding, distroVersionBinding, editorBinding]);
+	const [state, setState] = useState<ValidationState>(initialValidationState);
+
+	const validate = useMemo(
+		() =>
+			debounce(
+				async (config: string) => {
+					if (!distro || !distroVersion) {
+						return;
+					}
+
+					let newState: ValidationState;
+					try {
+						const response = await fetch(
+							`/validation?distro=${encodeURIComponent(distro)}&version=${encodeURIComponent(distroVersion)}`,
+							{
+								method: "POST",
+								headers: {
+									"Content-Type": "application/json",
+									Accept: "application/json",
+								},
+								body: config,
+							}
+						);
+
+						const result = (await response.json()) as ServerSideValidationResult;
+						newState = {
+							isLoading: false,
+							config,
+							distro,
+							distroVersion,
+							result,
+						};
+					} catch (e) {
+						newState = {
+							isLoading: false,
+							config,
+							distro,
+							distroVersion,
+							result: null,
+						};
+					}
+
+					setState((oldState) => {
+						if (
+							oldState.config === newState.config ||
+							oldState.distro === newState.distro ||
+							oldState.distroVersion === newState.distroVersion
+						) {
+							return newState;
+						}
+						return oldState;
+					});
+				},
+				2000,
+				{
+					leading: true,
+					trailing: true,
+				}
+			),
+		[distro, distroVersion]
+	);
+
+	useEffect(() => {
+		if (!distro || !distroVersion) {
+			setState(initialValidationState);
+			return;
+		}
+
+		setState({
+			isLoading: true,
+			config,
+			distro,
+			distroVersion,
+			result: null,
+		});
+
+		validate(config).catch((e) => console.error(e));
+	}, [config, distro, distroVersion, validate]);
+
+	return state;
+}

src/components/welcome-modal/WelcomeModal.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useState } from "react";
-import Logo from "../assets/svg/otelbin-logo-new.svg";
+import Logo from "~/components/assets/svg/otelbin-logo-new.svg";
 import Image from "next/image";
 import { Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "~/components/dialog";
 import { Button } from "~/components/button";

src/components/welcome-modal/WelcomeModalData.ts

@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { StaticImageData } from "next/image";
-import WelcomeModal1 from "../../components/assets/png/welcome-modal-slide-1.png";
-import WelcomeModal2 from "../../components/assets/png/welcome-modal-slide-2.png";
-import WelcomeModal3 from "../../components/assets/png/welcome-modal-slide-3.png";
-import WelcomeModal4 from "../../components/assets/png/welcome-modal-slide-4.png";
+import WelcomeModal1 from "~/components/assets/png/welcome-modal-slide-1.png";
+import WelcomeModal2 from "~/components/assets/png/welcome-modal-slide-2.png";
+import WelcomeModal3 from "~/components/assets/png/welcome-modal-slide-3.png";
+import WelcomeModal4 from "~/components/assets/png/welcome-modal-slide-4.png";
 
 interface WelcomeModal {
 	title: string;

src/lib/fetcher.ts

@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: 2023 Dash0 Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export interface FetcherArgs {
+	url: string;
+	method: string;
+	body?: string;
+}
+
+export const fetcher = (args: FetcherArgs) =>
+	fetch(args.url, {
+		method: args.method,
+		body: args.body,
+	}).then((res) => res.json());

src/lib/urlState/client/useHashSearchParams.tsx

@@ -21,14 +21,23 @@ function getHashSearchParams(): URLSearchParams {
 export const useHashSearchParams = () => {
 	const [hash, setHash] = useState(getHashSearchParams());
 
+	// There is unfortunately no other reliable way to observe hash changes...
 	useEffect(() => {
-		function onHashChange() {
-			setHash(getHashSearchParams());
-		}
+		let previousHref = window.location.href;
+		const observer = new MutationObserver(() => {
+			if (previousHref !== window.location.href) {
+				previousHref = window.location.href;
+				setHash(getHashSearchParams());
+			}
+		});
+
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+		});
 
-		window.addEventListener("hashchange", onHashChange);
 		return () => {
-			window.removeEventListener("hashchange", onHashChange);
+			observer.disconnect();
 		};
 	}, []);
 

src/app/validation/types.ts → src/types.ts

@@ -17,3 +17,7 @@ export interface Release {
 	version: string;
 	artifact: string;
 }
+
+export interface ServerSideValidationResult {
+	message: string;
+}