Template variable

TemplateVariables.tsxSelectors populated by their own query, panels that name the variables, children that reset when a parent changes, and the values as a URL.Copy

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn } from "@/lib/utils";

export type Variable = {
  name: string;
  /** The query that populates it, run against the data, so the list is
   *  never stale and never hand-maintained. */
  query: string;
  /** What that query returned. Absent while it is still running. */
  options?: string[];
  /** A chained variable resets when its parent changes, so the page never
   *  shows a combination that never existed. */
  dependsOn?: string;
  allowAll?: boolean;
};

export type Panel = { title: string; query: string };
export type Values = Record<string, string>;

type Props = {
  variables: Variable[];
  values: Values;
  onChange: (values: Values) => void;
  /** Every panel names the variable, never a literal. The layout is written once. */
  panels: Panel[];
};

export const ALL = "all";

/** $service in a title or a query becomes the chosen value, so a screenshot
 *  says what it is a screenshot of. */
export const interpolate = (text: string, values: Values) =>
  text.replace(/\$(\w+)/g, (_, name) => values[name] ?? `$${name}`);

/** The chosen values as a query string, so a scoped view is a link. */
export const toSearch = (values: Values) =>
  "?" + Object.entries(values).filter(([, v]) => v && v !== ALL).map(([k, v]) => `var-${k}=${encodeURIComponent(v)}`).join("&");

export function TemplateVariables({ variables, values, onChange, panels }: Props) {
  const set = (name: string, value: string) => {
    const next = { ...values, [name]: value };
    const reset = (parent: string) => {
      for (const v of variables) if (v.dependsOn === parent) { next[v.name] = v.allowAll ? ALL : ""; reset(v.name); }
    };
    reset(name);
    onChange(next);
  };

  return (
    <div className="rounded-lg border bg-card p-4">
      {/* In reading order, above everything, on every screen size. */}
      <div className="flex flex-wrap gap-2">
        {variables.map((v) => {
          const value = values[v.name] ?? "";
          const loading = !v.options;
          const gone = !loading && value !== ALL && !v.options!.includes(value);
          const shown = loading ? "loading…" : value === ALL ? `all (${v.options!.length})` : gone ? `${value} (gone)` : value;
          return (
            <Select key={v.name} value={value} onValueChange={(next) => set(v.name, next)} disabled={loading}>
              <SelectTrigger
                className={cn("h-auto w-auto gap-1.5 px-2.5 py-1 text-[11px] shadow-none", gone && "border-status-warn text-status-warn")}
                title={v.query}
                aria-label={v.name}
              >
                <SelectValue>{`${v.name}: ${shown}`}</SelectValue>
              </SelectTrigger>
              <SelectContent>
                {v.allowAll && <SelectItem value={ALL}>all</SelectItem>}
                {(v.options ?? []).map((o) => <SelectItem key={o} value={o}>{o}</SelectItem>)}
              </SelectContent>
            </Select>
          );
        })}
      </div>

      <div className="mt-4 grid grid-cols-2 gap-2.5">
        {panels.map((p, i) => (
          <div key={p.query} className={cn("rounded border bg-muted p-2.5", i === panels.length - 1 && panels.length % 2 === 1 && "col-span-2")}>
            <p className="text-[11px] text-card-foreground">{interpolate(p.title, values)}</p>
            <code className="mt-1 block font-mono text-[10px] text-muted-foreground">{p.query}</code>
          </div>
        ))}
      </div>

      <code className="mt-4 block break-all font-mono text-[10px] text-muted-foreground">{toSearch(values)}</code>
    </div>
  );
}

demo.tsxHow it is called: env, service and host chained, three panel queries, prod and checkout in the URL.Copy

import { useState } from "react";
import { TemplateVariables, type Values, type Variable } from "./TemplateVariables";

/**
 * Three chained variables and three panels that name them. Service depends on
 * env, host on service; change env and the two below reset. The URL at the
 * bottom is what a real app would push into history on every change.
 */
const VARIABLES: Variable[] = [
  { name: "env", query: "label_values(env)", options: ["prod", "staging", "dev"] },
  {
    name: "service",
    query: "label_values(service)",
    dependsOn: "env",
    options: ["checkout", "search", "cart", "auth", "feed", "billing", "catalog", "email", "export", "gateway"],
  },
  {
    name: "host",
    query: "label_values(up{service=\"$service\"}, instance)",
    dependsOn: "service",
    allowAll: true,
    options: Array.from({ length: 40 }, (_, i) => `checkout-${String(i + 1).padStart(2, "0")}`),
  },
];

const PANELS = [
  { title: "$service error rate", query: "rate($service errors)" },
  { title: "$service p95 on $host", query: "p95($service, $host)" },
  { title: "pods up in $env", query: "sum by (pod) (up{env=\"$env\"})" },
];

export default function Demo() {
  const [values, setValues] = useState<Values>({ env: "prod", service: "checkout", host: "all" });
  return (
    <div className="max-w-[460px]">
      <TemplateVariables variables={VARIABLES} values={values} onChange={setValues} panels={PANELS} />
    </div>
  );
}