diff --git a/_site/feed.xml b/_site/feed.xml index 089d5965..2c576ff9 100644 --- a/_site/feed.xml +++ b/_site/feed.xml @@ -1 +1 @@ -Jekyll2024-01-24T16:48:53-08:00http://localhost:4000/regorus/feed.xmlRegorus PlaygroundRun Regorus in a browser via WASM \ No newline at end of file +Jekyll2024-02-06T00:39:58-08:00http://localhost:4000/feed.xmlRegorus PlaygroundRun Regorus in a browser via WASM \ No newline at end of file diff --git a/_site/index.html b/_site/index.html index 45ddb2f5..9444e6a6 100644 --- a/_site/index.html +++ b/_site/index.html @@ -3,41 +3,48 @@ Regorus Playground - + -

Regorus Playground

- -
-
Policy
- -
-
- -
- -
-
Input JSON
-
- -

+    

Regorus Playground

+
+
+

Rego

+
+
+ +
+
+ + + +
+
+
+
+
+
+

Output

+
+
+
- + - - - + + + diff --git a/_site/pkg/regorus_bg.wasm b/_site/pkg/regorus_bg.wasm index 2f98e23e..d1ed1797 100644 Binary files a/_site/pkg/regorus_bg.wasm and b/_site/pkg/regorus_bg.wasm differ diff --git a/index.markdown b/index.markdown index 4c3657e6..fbd13b5f 100644 --- a/index.markdown +++ b/index.markdown @@ -12,28 +12,34 @@ layout: home Regorus Playground -

Regorus Playground

- -
-
Policy
- -
-
- -
- -
-
Input JSON
-
- -

+    

Regorus Playground

+
+
+

Rego

+
+
+ +
+
+ + + +
+
+
+
+
+
+

Output

+
+
+
- + @@ -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, @@ -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(); diff --git a/pkg/regorus_bg.wasm b/pkg/regorus_bg.wasm index 2f98e23e..d1ed1797 100644 Binary files a/pkg/regorus_bg.wasm and b/pkg/regorus_bg.wasm differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..96dd3ae8 --- /dev/null +++ b/style.css @@ -0,0 +1,124 @@ +body { + font-family: sans-serif; + background-color: rgba(218, 218, 211, .75); + color: var(--font-color); + max-width: 90%; + margin: 0 auto; + font-size: 18px; +} + + +h1 { + color: var(--heading-color); + font-size: 2rem; + margin-bottom: 1vh; + margin-top: 2vh; +} + +h2 { + color: var(--heading-color); + font-size: 1rem; +} + +.pane { + width: 100%; + height: 85%; + position: relative; + display: flex +} + +.left-pane { + flex: 1; + margin-right: 15px; +} +.rego-box { + width: 100%; + height: 100%; + border-top: inset 3px; + border-left: inset 3px; + border-right: inset 3px rgb(192, 188, 188); + border-bottom: inset 3px rgb(192, 188, 188); +} + + + + +.right-pane-container { + flex: 1; +} + +.button-container { + height: 5%; + margin-top: 9px; + } + +.input-box-container { + height: 50%; + } + +.input-box { + height: 100%; + border-top: inset 3px; + border-left: inset 3px; + border-right: inset 3px rgb(192, 188, 188); + border-bottom: inset 3px rgb(192, 188, 188); +} + +.data-box-container { + height: 50%; +} +.data-box { + height: 100%; + border-top: inset 3px; + border-left: inset 3px; + border-right: inset 3px rgb(192, 188, 188); + border-bottom: inset 3px rgb(192, 188, 188); + display: block; +} + +.output-box-container { + height: 40%; + display: block; +} +.output-box { + height: 95%; + border-top: inset 3px; + border-left: inset 3px; + border-right: inset 3px rgb(192, 188, 188); + border-bottom: inset 3px rgb(192, 188, 188); +} + + +.json-button { + background-color: #FFFFFF; + border: 1px solid rgb(209,213,219); + border-radius: .5rem; + box-sizing: border-box; + color: #111827; + font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + font-size: .875rem; + font-weight: 600; + line-height: 1.25rem; + padding: .15rem 1rem; + text-align: center; + text-decoration: none #D1D5DB solid; + text-decoration-thickness: auto; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + cursor: pointer; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +.json-button:hover { + background-color: rgb(249,250,251); +} + +.json-button:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.json-button:focus-visible { + box-shadow: none; +}