Skip to content

Commit

Permalink
Regorus Playground
Browse files Browse the repository at this point in the history 
Signed-off-by: Anand Krishnamoorthi <[email protected]>
  • Loading branch information
@anakrish
anakrish committed Feb 6, 2024
1 parent 9f8a014 commit 3fec9f2
Show file tree
Hide file tree
Showing 6 changed files with 265 additions and 88 deletions.
2 changes: 1 addition & 1 deletion _site/feed.xml
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="http://localhost:4000/regorus/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/regorus/" rel="alternate" type="text/html" /><updated>2024-01-24T16:48:53-08:00</updated><id>http://localhost:4000/regorus/feed.xml</id><title type="html">Regorus Playground</title><subtitle>Run Regorus in a browser via WASM</subtitle></feed>
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-02-06T00:39:58-08:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Regorus Playground</title><subtitle>Run Regorus in a browser via WASM</subtitle></feed>
119 changes: 73 additions & 46 deletions _site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,48 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Regorus Playground</title>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="/regorus/node_modules/monaco-editor/min/vs/editor/editor.main.css" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<h2>Regorus Playground</h2>

<div id="leftPane" style="height:1000px; width:700px; float:inline-start">
<div class="paneheader">Policy</div>

<div id="rego_container" style="height:700px; width: 700px; border: 1px solid grey"></div>
</div>

<div style="width:20px; height:600px;float:left"></div>

<div id="rightPane" style="width:600px; height:600px; float:inline-start">
<div class="paneheader"> Input JSON</div>
<div id="input_container" style="height:300px;border: 1px solid grey"></div>
<button id="eval" stype="height:10px;padding:float:left">Eval</button>
<pre id="results" style="height:300px; border: 1px solid grey"></pre>
<h1>Regorus Playground</h1>
<div class="pane">
<div class="left-pane">
<h2>Rego</h2>
<div id="Rego" class="rego-box"></div>
</div>

<div class="right-pane-container">
<div class="button-container">
<button id="SelectInput" class="json-button">Input JSON</button>
<button id="SelectData" class="json-button">Data JSON</button>
<button id="Eval" class="json-button">Eval</button>
</div>
<div class="input-box-container">
<div id="Input" class="input-box"></div>
<div id="Data" class="data-box"></div>
</div>
<div class="output-box-container">
<h2>Output</h2>
<div id="Output" class="output-box"></div>
</div>
</div>
</div>

<script>
var require = { paths: { vs: "/regorus/node_modules/monaco-editor/min/vs" } };
var require = { paths: { vs: "/node_modules/monaco-editor/min/vs" } };
</script>
<script src="/regorus/node_modules/monaco-editor/min/vs/loader.js"></script>
<script src="/regorus/node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="/regorus/node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
<script src="/node_modules/monaco-editor/min/vs/loader.js"></script>
<script src="/node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="/node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>

<script type="module">



import init, { Engine } from '/regorus/pkg/regorus.js';
import init, { Engine } from "/pkg/regorus.js";

function loadFile(filePath) {
filePath = "/regorus/" + filePath
filePath = `/${filePath}`
var result = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", filePath, false);
Expand Down Expand Up @@ -135,19 +142,25 @@ <h2>Regorus Playground</h2>

let separator = "\n###POLICY###\n"
let framework_rego = 'package play'
var rego_editor = monaco.editor.create(document.getElementById('rego_container'), {
var rego_editor = monaco.editor.create(document.getElementById('Rego'), {
value: framework_rego,
language: 'Rego',
minimap: { enabled: false },
});

var input_editor = monaco.editor.create(document.getElementById('input_container'), {
var input_editor = monaco.editor.create(document.getElementById('Input'), {
value: '{}',
language: 'javascript',
language: 'json',
minimap: { enabled: false },
});

var results_editor = monaco.editor.create(document.getElementById('results'), {
var data_editor = monaco.editor.create(document.getElementById('Data'), {
value: '{}',
language: 'json',
minimap: { enabled: false },
});

var results_editor = monaco.editor.create(document.getElementById('Output'), {
value: '{}',
language: 'json',
readOnly: true,
Expand All @@ -156,30 +169,44 @@ <h2>Regorus Playground</h2>

rego_editor.setValue(loadFile("examples/example.rego"))
input_editor.setValue(loadFile("examples/input.json"))
data_editor.setValue("{}")
document.getElementById('Data').style.display = 'none'

function eval_query() {
let policy = rego_editor.getValue();
let files = policy.split(separator)

var startTime = new Date();
var engine = new Engine();
for (var i =0; i < files.length; ++i) {
engine.add_policy("policy.rego", files[i])
let policy = rego_editor.getValue();
let files = policy.split(separator)

try {
var startTime = new Date();
var engine = new Engine();
for (var i =0; i < files.length; ++i) {
engine.add_policy("policy.rego", files[i])
}

engine.set_input(input_editor.getValue());
engine.add_data(data_editor.getValue());
let parse_time = new Date() - startTime;

let results = engine.eval_query("data");
var elapsed = new Date() - startTime;
let output = `// Evaluation took ${elapsed} milliseconds. parse = ${parse_time}, eval = ${elapsed - parse_time}\n${results}`;
results_editor.setValue(output)
}
catch (error) {
results_editor.setValue(error)
}
}

let input = input_editor.getValue();
engine.set_input(input);

let results = engine.eval_query("data");
var elapsed = new Date() - startTime;

let output = `// Evaluation took ${elapsed} milliseconds.\n${results}`;
results_editor.setValue(output)

}
async function run() {
await init()
document.getElementById('eval').onclick = eval_query;
document.getElementById('Eval').onclick = eval_query;
document.getElementById('SelectInput').onclick = function() {
document.getElementById('Data').style.display = 'none'
document.getElementById('Input').style.display = 'inline'
}
document.getElementById('SelectData').onclick = function() {
document.getElementById('Input').style.display = 'none'
document.getElementById('Data').style.display = 'inline'
}
}
run();
</script>
Expand Down
Binary file modified _site/pkg/regorus_bg.wasm
View file
Binary file not shown.
108 changes: 67 additions & 41 deletions index.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,34 @@ layout: home
<title>Regorus Playground</title>
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="{{'node_modules/monaco-editor/min/vs/editor/editor.main.css'|relative_url}}"
href="{{'style.css'|relative_url}}"
/>
</head>
<body>
<h2>Regorus Playground</h2>

<div id="leftPane" style="height:1000px; width:700px; float:inline-start">
<div class="paneheader">Policy</div>

<div id="rego_container" style="height:700px; width: 700px; border: 1px solid grey"></div>
</div>

<div style="width:20px; height:600px;float:left"></div>

<div id="rightPane" style="width:600px; height:600px; float:inline-start">
<div class="paneheader"> Input JSON</div>
<div id="input_container" style="height:300px;border: 1px solid grey"></div>
<button id="eval" stype="height:10px;padding:float:left">Eval</button>
<pre id="results" style="height:300px; border: 1px solid grey"></pre>
<h1>Regorus Playground</h1>
<div class="pane">
<div class="left-pane">
<h2>Rego</h2>
<div id="Rego" class="rego-box"></div>
</div>

<div class="right-pane-container">
<div class="button-container">
<button id="SelectInput" class="json-button">Input JSON</button>
<button id="SelectData" class="json-button">Data JSON</button>
<button id="Eval" class="json-button">Eval</button>
</div>
<div class="input-box-container">
<div id="Input" class="input-box"></div>
<div id="Data" class="data-box"></div>
</div>
<div class="output-box-container">
<h2>Output</h2>
<div id="Output" class="output-box"></div>
</div>
</div>
</div>

<script>
var require = { paths: { vs: "{{'node_modules/monaco-editor/min/vs'|relative_url}}" } };
</script>
Expand Down Expand Up @@ -146,19 +152,25 @@ href="{{'node_modules/monaco-editor/min/vs/editor/editor.main.css'|relative_url}

let separator = "\n###POLICY###\n"
let framework_rego = 'package play'
var rego_editor = monaco.editor.create(document.getElementById('rego_container'), {
var rego_editor = monaco.editor.create(document.getElementById('Rego'), {
value: framework_rego,
language: 'Rego',
minimap: { enabled: false },
});

var input_editor = monaco.editor.create(document.getElementById('input_container'), {
var input_editor = monaco.editor.create(document.getElementById('Input'), {
value: '{}',
language: 'javascript',
language: 'json',
minimap: { enabled: false },
});

var results_editor = monaco.editor.create(document.getElementById('results'), {
var data_editor = monaco.editor.create(document.getElementById('Data'), {
value: '{}',
language: 'json',
minimap: { enabled: false },
});
var results_editor = monaco.editor.create(document.getElementById('Output'), {
value: '{}',
language: 'json',
readOnly: true,
Expand All @@ -167,30 +179,44 @@ href="{{'node_modules/monaco-editor/min/vs/editor/editor.main.css'|relative_url}

rego_editor.setValue(loadFile("examples/example.rego"))
input_editor.setValue(loadFile("examples/input.json"))
data_editor.setValue("{}")
document.getElementById('Data').style.display = 'none'

function eval_query() {
let policy = rego_editor.getValue();
let files = policy.split(separator)

var startTime = new Date();
var engine = new Engine();
for (var i =0; i < files.length; ++i) {
engine.add_policy("policy.rego", files[i])
let policy = rego_editor.getValue();
let files = policy.split(separator)

try {
var startTime = new Date();
var engine = new Engine();
for (var i =0; i < files.length; ++i) {
engine.add_policy("policy.rego", files[i])
}

engine.set_input(input_editor.getValue());
engine.add_data(data_editor.getValue());
let parse_time = new Date() - startTime;

let results = engine.eval_query("data");
var elapsed = new Date() - startTime;
let output = `// Evaluation took ${elapsed} milliseconds. parse = ${parse_time}, eval = ${elapsed - parse_time}\n${results}`;
results_editor.setValue(output)
}
catch (error) {
results_editor.setValue(error)
}
}

let input = input_editor.getValue();
engine.set_input(input);
let results = engine.eval_query("data");
var elapsed = new Date() - startTime;

let output = `// Evaluation took ${elapsed} milliseconds.\n${results}`;
results_editor.setValue(output)
}
async function run() {
await init()
document.getElementById('eval').onclick = eval_query;
document.getElementById('Eval').onclick = eval_query;
document.getElementById('SelectInput').onclick = function() {
document.getElementById('Data').style.display = 'none'
document.getElementById('Input').style.display = 'inline'
}
document.getElementById('SelectData').onclick = function() {
document.getElementById('Input').style.display = 'none'
document.getElementById('Data').style.display = 'inline'
}
}
run();
</script>
Expand Down
Binary file modified pkg/regorus_bg.wasm
View file
Binary file not shown.
Loading

0 comments on commit 3fec9f2

Please sign in to comment.