[Ruleset Engine] New fields reference (#19214)

---------

Co-authored-by: Kian Newman-Hazel <[email protected]>

Author: pedrosousa

astro.config.ts

@@ -193,6 +193,7 @@ export default defineConfig({
 									"/products/",
 									"/rules/snippets/examples/?operation=*",
 									"/rules/transform/examples/?operation=*",
+									"/ruleset-engine/rules-language/fields/reference/**",
 									"/workers/examples/?languages=*",
 									"/workers/examples/?tags=*",
 									"/workers-ai/models/**",

package-lock.json

@@ -77,6 +77,7 @@
 		"puppeteer": "^24.0.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-markdown": "^9.0.3",
 		"react-textarea-autosize": "^8.5.7",
 		"redirects-in-workers": "^0.0.5",
 		"rehype-autolink-headings": "^7.1.0",

package.json

@@ -750,7 +750,6 @@
 /logs/reference/logpush-api-configuration/examples/example-logpush-curl/ /logs/tutorials/examples/example-logpush-curl/ 301
 
 # magic-firewall
-/magic-firewall/reference/magic-firewall-fields/ /ruleset-engine/rules-language/fields/magic-firewall/ 301
 /magic-firewall/reference/examples/ /magic-firewall/how-to/add-rules/ 301
 /magic-firewall/how-to/pcaps-bucket-setup/ /magic-firewall/packet-captures/pcaps-bucket-setup/ 301
 /magic-firewall/how-to/collect-pcaps/ /magic-firewall/packet-captures/collect-pcaps/ 301
@@ -934,7 +933,6 @@
 /reference-architecture/load-balancing-reference-architecture/ /reference-architecture/architectures/load-balancing/ 301
 /reference-architecture/magic-transit-reference-architecture/ /reference-architecture/architectures/magic-transit/ 301
 /reference-architecture/multi-vendor-architecture/ /reference-architecture/architectures/multi-vendor/ 301
-
 /reference-architecture/secure-application-delivery-design-guide/ /reference-architecture/design-guides/secure-application-delivery/ 301
 
 # radar
@@ -973,6 +971,15 @@
 /rules/url-forwarding/single-redirects/examples/ /rules/url-forwarding/examples/ 301
 /rules/url-forwarding/dynamic-redirects/parameters/ /rules/url-forwarding/single-redirects/settings/ 301
 
+# ruleset engine
+/ruleset-engine/rules-language/fields/standard-fields/ /ruleset-engine/rules-language/fields/reference/ 301
+/ruleset-engine/rules-language/fields/dynamic-fields/ /ruleset-engine/rules-language/fields/reference/ 301
+/ruleset-engine/rules-language/fields/uri/ /ruleset-engine/rules-language/fields/reference/ 301
+/ruleset-engine/rules-language/fields/http-request-header/ /ruleset-engine/rules-language/fields/reference/ 301
+/ruleset-engine/rules-language/fields/http-request-body/ /ruleset-engine/rules-language/fields/reference/ 301
+/ruleset-engine/rules-language/fields/http-request-response/ /ruleset-engine/rules-language/fields/reference/ 301
+/ruleset-engine/rules-language/fields/magic-firewall/ /magic-firewall/reference/magic-firewall-fields/ 301
+
 # security center
 /security-center/indicator-feeds/getting-started/ /security-center/indicator-feeds/ 301
 /security-center/indicator-feeds/get-started/ /security-center/indicator-feeds/ 301

public/_redirects

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import FieldBadges from "./fields/FieldBadges";
+import Markdown from "react-markdown";
+
+const FieldCatalog = ({ fields }) => {
+	const [filters, setFilters] = useState({
+		search: "",
+		categories: [],
+		keywords: [],
+	});
+	const mapped = fields.sort((f1, f2) => {
+		return f1.name < f2.name ? -1 : 1;
+	});
+
+	const categories = [
+		...new Set(
+			fields
+				.map((field) => field.categories)
+				.flat()
+				.sort(),
+		),
+	];
+
+	// apply filters to the fields list
+	const fieldList = mapped.filter((field) => {
+		if (filters.categories.length > 0) {
+			if (!field.categories?.some((c) => filters.categories.includes(c))) {
+				return false;
+			}
+		}
+
+		if (filters.search) {
+			// search keywords
+			let keywordFound = field.keywords?.some(
+				(kw) => kw.indexOf(filters.search) >= 0,
+			);
+
+			if (
+				!field.name.toLowerCase().includes(filters.search.toLowerCase()) &&
+				!field.summary.toLowerCase().includes(filters.search.toLowerCase()) &&
+				!keywordFound
+			) {
+				return false;
+			}
+		}
+
+		return true;
+	});
+
+	return (
+		<div className="md:flex">
+			<div className="mr-8 w-full md:w-1/4">
+				<input
+					type="text"
+					className="mb-8 w-full rounded-md border-2 border-gray-200 bg-white px-2 py-2 dark:border-gray-700 dark:bg-gray-800"
+					placeholder="Search fields"
+					value={filters.search}
+					onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+				/>
+
+				<div className="!mb-8 hidden md:block">
+					<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
+						▼ Categories
+					</span>
+
+					{categories.map((category) => (
+						<label key={category} className="!my-2 block">
+							<input
+								type="checkbox"
+								className="mr-2"
+								value={category}
+								onClick={(e) => {
+									if (e.target.checked) {
+										setFilters({
+											...filters,
+											categories: [...filters.categories, e.target.value],
+										});
+									} else {
+										setFilters({
+											...filters,
+											categories: filters.categories.filter(
+												(f) => f !== e.target.value,
+											),
+										});
+									}
+								}}
+							/>{" "}
+							{category}
+						</label>
+					))}
+				</div>
+			</div>
+
+			<div className="!mt-0 flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4">
+				{fieldList.length === 0 && (
+					<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800">
+						<span className="text-lg !font-bold">No fields found</span>
+						<p>
+							Try a different search term, or broaden your search by removing
+							filters.
+						</p>
+					</div>
+				)}
+				{fieldList.map((field) => {
+					return (
+						<a
+							key={field.name}
+							className="mb-3 block w-full self-stretch rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 lg:w-[48%]"
+							href={`/ruleset-engine/rules-language/fields/reference/${field.name}/`}
+						>
+							<div className="-mb-1 flex items-center">
+								<span
+									className="font-semibold text-lg text-ellipsis overflow-hidden whitespace-nowrap"
+									title={`${field.name}: ${field.data_type}`}
+								>
+									{field.name}
+								</span>
+							</div>
+							<Markdown
+								className="!mt-2 line-clamp-2 text-sm leading-6"
+								disallowedElements={["a"]}
+								unwrapDisallowed={true}
+							>
+								{field.summary}
+							</Markdown>
+
+							{field.plan_info_label && (
+								<div className="!mt-2 text-xs">
+									<FieldBadges badges={[field.plan_info_label]} />
+								</div>
+							)}
+						</a>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default FieldCatalog;

src/components/FieldCatalog.jsx

@@ -0,0 +1,16 @@
+const FieldBadges = ({ badges }) => {
+	return (
+		<ul className="list-none m-0 p-0 inline-flex items-center gap-2 text-xs">
+			{badges.map((badge) => (
+				<li
+					key={badge}
+					className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-md block !mt-0"
+				>
+					{badge}
+				</li>
+			))}
+		</ul>
+	);
+};
+
+export default FieldBadges;

src/components/fields/FieldBadges.jsx

@@ -1,5 +1,6 @@
 import { z, defineCollection } from "astro:content";
 import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
+import { file } from "astro/loaders";
 import {
 	appsSchema,
 	changelogsSchema,
@@ -13,6 +14,7 @@ import {
 	videosSchema,
 	workersAiSchema,
 	changelogsNextSchema,
+	fieldsSchema,
 } from "~/schemas";
 
 const partialSchema = z.object({
@@ -78,4 +80,8 @@ export const collections = {
 	"changelogs-next": defineCollection({
 		schema: changelogsNextSchema,
 	}),
+	fields: defineCollection({
+		schema: fieldsSchema,
+		type: "data",
+	}),
 };

src/content/config.ts

@@ -31,4 +31,4 @@ As an example, to send the `x-send-jwt-claim-user` request header to the origin,
 4. Enter a rule name and a filter expression, if applicable.
 5. Choose **Set dynamic**.
 6. Set the header name to `x-send-jwt-claim-user`.
-7. Set the value to `lookup_json_string(http.request.jwt.claims["<TOKEN_CONFIGURATION_ID>"][0], "claim_name")`, where `<TOKEN_CONFIGURATION_ID>` is your token configuration ID found in JWT Validation and `claim_name` is the [JWT claim](/ruleset-engine/rules-language/fields/dynamic-fields/#json-web-tokens-validation-claims) you want to add to the header.
+7. Set the value to `lookup_json_string(http.request.jwt.claims["<TOKEN_CONFIGURATION_ID>"][0], "claim_name")`, where `<TOKEN_CONFIGURATION_ID>` is your token configuration ID found in JWT Validation and `claim_name` is the JWT claim you want to add to the header.

src/content/docs/api-shield/security/jwt-validation/transform-rules.mdx

@@ -90,7 +90,7 @@ Cloudflare has built an allowlist of good, automated bots, e.g. Google Search En
 
 This allowlist is large based on reverse DNS verification, meaning that the IPs we allow really match the requesting service. In addition to this, Cloudflare uses multiple validation methods including ASN blocks and public lists. If none of these validation types are available for a customer, we use internal Cloudflare data and machine learning to identify legitimate IP addresses from good bots.
 
-To allow traffic from good bots, use the [Verified Bot](/ruleset-engine/rules-language/fields/dynamic-fields/#cfbot_managementverified_bot) field in your WAF custom rule.
+To allow traffic from good bots, use the [Verified Bot](/ruleset-engine/rules-language/fields/reference/cf.bot_management.verified_bot/) field in your WAF custom rule.
 
 ---