CEL Playground

The CEL Playground relies on a compressed WebAssembly (.wasm) binary to run the CEL engine in the browser. The application automatically handles the fetching, decompression (using pako), and instantiation of the WASM module.

Requirements for manual implementation/integration:

• The WASM file must be available at assets/main.wasm.gz.
• The Go class (from wasm_exec.js) must be available in the global scope.
• pako must be available for ungzipping the asset.
• A polyfill for WebAssembly.instantiateStreaming is provided for older browsers like Microsoft Edge 17/18.

// The application performs this lifecycle automatically:
const go = new Go();
const buffer = pako.ungzip(await (await fetch("assets/main.wasm.gz")).arrayBuffer());

WebAssembly.instantiate(buffer, go.importObject)
  .then((result) => {
    go.run(result.instance);
    // WASM is now ready to use
  });

The playground allows you to evaluate Common Expression Language (CEL) expressions using a WebAssembly-powered Go backend. Evaluation is triggered by clicking the 'Run' button or by pressing Ctrl+Enter (or Cmd+Enter on macOS).

When an expression is run:

1. The current mode (e.g., a specific CEL implementation or configuration) is retrieved via getCurrentMode().
2. The expression and its associated values are passed to an eval(modeId, values) function.
3. If the evaluation results in an error, the error message is displayed in red in the output area.
4. If successful, the output is parsed. If the result contains a result key, it is stringified and displayed. Otherwise, the output is rendered using accordion components to show structured data.
5. If the result object contains a cost field, it is displayed using setCost().

// Trigger evaluation via UI
// Click the element with id='run'
// OR use keyboard shortcut: Ctrl/Cmd + Enter

When running the cel-playground WebAssembly module, a global eval function is exposed to the JavaScript environment. This function allows you to execute CEL (Common Expression Language) evaluations or Kubernetes-related policy checks (VAP and Webhooks) directly from JavaScript.

Function Signature

eval(mode, argMap)

• mode (string): The evaluation mode to use. Supported values are:
  • "cel": Standard CEL evaluation.
  • "vap": Kubernetes Validating Admission Policy evaluation.
  • "webhooks": Kubernetes Webhook evaluation.
• argMap (Object): A JavaScript object containing the necessary input data for the selected mode.

Return Value

Returns a JavaScript object with the following shape:

{
  "output": "string",
  "isError": boolean
}

If an error occurs, isError will be true and output will contain the error message string.

// Example: Standard CEL evaluation
const result = eval("cel", {
  cel: "request.time < timestamp('2023-01-01T00:00:00Z')",
  dataInput: "{ 'request': { 'time': '2022-01-01T00:00:00Z' } }"
});

if (result.isError) {
  console.error("Error:", result.output);
} else {
  console.log("Result:", result.output);
}

The argMap object passed to the eval function must contain specific keys depending on the mode selected.

Mode: cel

Requires:

• cel: The CEL expression string.
• dataInput: The input data for the expression.

Mode: vap (Validating Admission Policy)

Requires:

• vap: The VAP policy string.
• dataOldObject: The existing object data.
• dataObject: The new object data.
• dataNamespace: The namespace string.
• dataRequest: The admission request data.
• dataAuthorizer: The authorizer information.

Mode: webhooks

Requires:

• webhooks: The webhook configuration/policy string.
• dataOldObject: The existing object data.
• dataObject: The new object data.
• dataRequest: The admission request data.
• dataAuthorizer: The authorizer information.

// VAP Example
eval("vap", {
  vap: "...policy text...",
  dataOldObject: "...",
  dataObject: "...",
  dataNamespace: "...",
  dataRequest: "...",
  dataAuthorizer: "..."
});

// Webhook Example
eval("webhooks", {
  webhooks: "...webhook text...",
  dataOldObject: "...",
  dataObject: "...",
  dataRequest: "...",
  dataAuthorizer: "..."
});