Skip to content

Commit

Permalink
Refactor to ES6 modules.
Browse files Browse the repository at this point in the history
  • Loading branch information
@lwindolf
lwindolf committed Sep 3, 2023
1 parent 794ab1e commit 6fbdb22
Show file tree
Hide file tree
Showing 12 changed files with 227 additions and 152 deletions.
6 changes: 4 additions & 2 deletions backend/wurm
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
#!/bin/bash

# Start nodejs server if needed, always start in background
if ! pgrep -f WurmTermBackend >/dev/null; then
if ! pgrep -f WurmTermBacken >/dev/null; then
(nohup node server.js >/dev/null 2>&1 &)
fi
else
echo "Already running."
fi
7 changes: 4 additions & 3 deletions frontend/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ img.emojione {

#visualizedHost {
font-weight: bold;
color: white;
color: #333;
}
#visualContainer {
display: none;
Expand Down Expand Up @@ -114,7 +114,7 @@ img.emojione {
}

#nodes .node .name {
color:white;
color:#333;
font-weight:bold;
cursor:pointer;
}
Expand Down Expand Up @@ -238,6 +238,7 @@ span.severity_warning {
#menu a {
color: #AAC;
text-decoration: none;
cursor: pointer;
}
#menu a:hover {
text-decoration: underline;
Expand Down Expand Up @@ -280,7 +281,7 @@ span.severity_warning {

#settings .probe {
display: inline-block;
background: #444;
background: #bbb;
margin:3px;
padding:3px 6px;
border-radius: 3px;
Expand Down
46 changes: 33 additions & 13 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
<body>
<div id='menu'>
<span class='title'>🐛 WurmTerm</span>
[ <a href='javascript:view("main")'>Home</a> ]
[ <a href='javascript:view("notebook")'>Notebook</a> ]
[ <a href='javascript:view("settings")'>Settings</a> ]
[ <a data-view='main'>Home</a> ]
[ <a data-view='notebook'>Notebook</a> ]
[ <a data-view='settings'>Settings</a> ]
</div>

<div class='main' id='info'>
Expand Down Expand Up @@ -51,7 +51,14 @@
Host <input type='text' id='notebook-host' list='notebook-hosts' placeholder='localhost or SSH host' value='localhost'/>
<datalist id='notebook-hosts'>
<option value='localhost'>
</datalist>
</datalist>

Notebook <input type='text' id='notebook-name' list='notebook-names' placeholder='Name of a notebook' value='default'/>
<datalist id='notebook-names'>
<!-- FIXME load list automatically -->
<option value='default'>
<option value='systemd'>
</datalist>
</div>

<div class='main' id='settings'>
Expand Down Expand Up @@ -79,25 +86,38 @@ <h2>Backend Endpoint</h2>
</div>

<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/mermaid.min.js"></script>
<script type="text/javascript" src="js/probeapi.js"></script>
<script type="text/javascript">
var renderers = {};
window.initialNotebookContent = `
window.initialNotebookContent = `
# %% [markdown]
## Running Commands with Wurmterm
This is a WurmTerm interactive notebook (similar to Jupyter notebooks). Try to trigger a shell
command using the following cell, by clicking the play button on the left.
# %% [shell]
ls -a`;
echo "Enter a command here!"
# %% [markdown]
## Examples
Running processes
# %% [shell]
ps -xawf | head -20
# %% [markdown]
Failed systemd units
# %% [shell]
systemctl --failed`;
</script>
<script type="text/javascript" src="js/renderer/netmap.js"></script>
<script type="text/javascript" src="js/renderer/perf-flamegraph.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript" src="starboard-notebook.js"></script>
<script type="module">
import { setupApp } from './js/app.js';

<script type="text/javascript" src="js/main.js"></script>
(function() {
'use strict';

setupApp();
})();
</script>
</body>
</html>
125 changes: 25 additions & 100 deletions frontend/js/main.js → frontend/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
// vim: set ts=4 sw=4:
/*jshint esversion: 6 */
/* jshint esversion: 6 */

//import sb{ StarboardNotebookElement } from "./lib/starboard-notebook.js";
import { registerStarboardShellCellType } from './notebook.js';
import { settingsDialog, settingsLoad } from './settings.js';
import { ProbeAPI } from './probeapi.js';

import { perfRenderer } from './renderer/perf-flamegraph.js';
import { netmapRenderer } from './renderer/netmap.js';

var settings;
var hosts = {};
var renderers = {
'netmap': netmapRenderer,
'perfFlameGraph': perfRenderer
};
var extraHosts = []; // list of hosts manually added
var pAPI;

function multiMatch(text, severities) {
var matchResult;
Expand Down Expand Up @@ -64,7 +71,7 @@ function renderTable(d) {
}

function triggerProbe(host, name) {
pAPI.probe(host, name, probeResultCb, probeErrorCb);
ProbeAPI.probe(host, name, probeResultCb, probeErrorCb);
}

function probeErrorCb(e, probe, h) {
Expand Down Expand Up @@ -112,16 +119,15 @@ function visualizeHost(host, renderer) {
$('#renderer').val(renderer);
$('#visual').empty().height(600);
try {
var r = new renderers[renderer]();
r.render(pAPI, '#visual', host);
renderers[renderer](ProbeAPI, '#visual', host);
} catch(e) {
$('#visual').html('ERROR: Rendering failed!');
console.error(`render Error: host=${host} ${e}`);
}
}

function addHost(h) {
pAPI.start(h, probeResultCb, probeErrorCb);
ProbeAPI.start(h, probeResultCb, probeErrorCb);

var hId = strToId(h);
if(!$(`#${hId}`).length) {
Expand Down Expand Up @@ -234,7 +240,7 @@ function updateHosts(d) {
var h = $(n).data('host');
if(!d.includes(h) && !extraHosts.includes(h) && (h !== 'localhost')) {
console.log('stopping '+h);
pAPI.stop(h);
ProbeAPI.stop(h);
$(n).addClass('disconnected');
}
});
Expand Down Expand Up @@ -294,105 +300,22 @@ function view(id) {
$('starboard-notebook').show();
else
$('starboard-notebook').hide();
}

// Starboard-Notebook has no native shell type, so we register one
// see CoffeeScript example: https://starboard.gg/gz/coffeescript-custom-cell-type-n1VJRGC
function registerStarboardShellCellType() {
const StarboardTextEditor = runtime.exports.elements.StarboardTextEditor;
const ConsoleOutputElement = runtime.exports.elements.ConsoleOutputElement;
const cellControlsTemplate = runtime.exports.templates.cellControls;

const SHELL_CELL_TYPE_DEFINITION = {
name: "Shell",
cellType: ["shell"],
createHandler: (cell, runtime) => new ShellCellHandler(cell, runtime),
}

class ShellCellHandler {
constructor(cell, runtime) {
this.cell = cell;
this.runtime = runtime;
}

getControls() {
const runButton = {
icon: "bi bi-play-circle",
tooltip: "Run",
callback: () => this.runtime.controls.emit({id: this.cell.id, type: "RUN_CELL"}),
};
return cellControlsTemplate({ buttons: [runButton] });
}

attach(params) {
this.elements = params.elements;
const topElement = this.elements.topElement;
lit.render(this.getControls(), this.elements.topControlsElement);

this.editor = new StarboardTextEditor(this.cell, this.runtime, {language: "shell"});
topElement.appendChild(this.editor);
}

async run() {
const cmd = this.cell.textContent;
this.outputElement = new ConsoleOutputElement();

lit.render(html`${this.outputElement}`, this.elements.bottomElement);

pAPI.run($('#notebook-host').val(), 5, cmd).then((d) => {
const val = d.stdout+"\n"+d.stderr;
window.$_ = val;
this.outputElement.addEntry({
method: "result",
data: [val]
});
return val
}).catch((d) => {
this.outputElement.addEntry({
method: "error",
data: [d.error]
});
});

return undefined;
}

focusEditor() {
this.editor.focus();
}

async dispose() {
this.editor.remove();
}
}

runtime.definitions.cellTypes.map.delete('esm');
runtime.definitions.cellTypes.map.delete('js');
runtime.definitions.cellTypes.map.delete('javascript');
runtime.definitions.cellTypes.map.delete('css');
runtime.definitions.cellTypes.map.delete('html');
runtime.definitions.cellTypes.map.delete('python');
runtime.definitions.cellTypes.map.delete('python3');
runtime.definitions.cellTypes.map.delete('ipython3');
runtime.definitions.cellTypes.map.delete('py');
runtime.definitions.cellTypes.map.delete('pypy');
runtime.definitions.cellTypes.map.delete('latex');

runtime.definitions.cellTypes.register("shell", SHELL_CELL_TYPE_DEFINITION);
console.log(runtime.definitions.cellTypes);
if('settings' === id)
settingsDialog();
}

(function() {
'use strict';

function setupApp() {
if('serviceWorker' in navigator)
navigator.serviceWorker.register('./worker.js');

navigator.storage.persist();

settingsLoad().then(() => {
pAPI = new ProbeAPI(updateHosts, addHistory);
pAPI.connect();
ProbeAPI.connect();
$('#menu a').on('click', function() {
view($(this).attr('data-view'));
});
view('main');
registerStarboardShellCellType();

Expand All @@ -403,4 +326,6 @@ function registerStarboardShellCellType() {
console.error(info);
setInfo(info);
});
})();
}

export { setupApp, updateHosts, addHistory, setInfo, view };
Loading

0 comments on commit 6fbdb22

Please sign in to comment.