initial commit
This commit is contained in:
Timur Gordon
202
clients/openrpc/example-wasm.html
Normal file
202
clients/openrpc/example-wasm.html
Normal file
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hero Supervisor WASM OpenRPC Client Example</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
button {
|
||||
background: #007cba;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background: #005a87;
|
||||
}
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin: 5px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.output {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.error {
|
||||
color: #d32f2f;
|
||||
}
|
||||
.success {
|
||||
color: #2e7d32;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hero Supervisor WASM OpenRPC Client</h1>
|
||||
|
||||
<div class="container">
|
||||
<h2>Connection</h2>
|
||||
<input type="text" id="serverUrl" placeholder="Server URL" value="http://localhost:3030">
|
||||
<button onclick="testConnection()">Test Connection</button>
|
||||
<div id="connectionOutput" class="output"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h2>Runner Management</h2>
|
||||
<button onclick="listRunners()">List Runners</button>
|
||||
<div id="runnersOutput" class="output"></div>
|
||||
|
||||
<h3>Register Runner</h3>
|
||||
<input type="text" id="registerSecret" placeholder="Secret" value="admin123">
|
||||
<input type="text" id="runnerName" placeholder="Runner Name" value="wasm_runner">
|
||||
<input type="text" id="runnerQueue" placeholder="Queue Name" value="wasm_queue">
|
||||
<button onclick="registerRunner()">Register Runner</button>
|
||||
<div id="registerOutput" class="output"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h2>Job Execution</h2>
|
||||
<input type="text" id="jobSecret" placeholder="Secret" value="admin123">
|
||||
<input type="text" id="jobId" placeholder="Job ID" value="">
|
||||
<input type="text" id="jobRunnerName" placeholder="Runner Name" value="wasm_runner">
|
||||
<textarea id="jobPayload" placeholder="Job Payload" rows="3">echo "Hello from WASM client!"</textarea>
|
||||
<button onclick="runJob()">Run Job</button>
|
||||
<div id="jobOutput" class="output"></div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import init, {
|
||||
WasmSupervisorClient,
|
||||
WasmJob,
|
||||
create_client,
|
||||
create_job
|
||||
} from './pkg-wasm/hero_supervisor_openrpc_client_wasm.js';
|
||||
|
||||
let client = null;
|
||||
|
||||
// Initialize WASM module
|
||||
async function initWasm() {
|
||||
try {
|
||||
await init();
|
||||
console.log('WASM module initialized');
|
||||
document.getElementById('connectionOutput').textContent = 'WASM module loaded successfully';
|
||||
document.getElementById('connectionOutput').className = 'output success';
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize WASM:', error);
|
||||
document.getElementById('connectionOutput').textContent = `Failed to initialize WASM: ${error}`;
|
||||
document.getElementById('connectionOutput').className = 'output error';
|
||||
}
|
||||
}
|
||||
|
||||
// Test connection to supervisor
|
||||
window.testConnection = async function() {
|
||||
try {
|
||||
const serverUrl = document.getElementById('serverUrl').value;
|
||||
client = create_client(serverUrl);
|
||||
|
||||
const result = await client.discover();
|
||||
document.getElementById('connectionOutput').textContent = `Connection successful!\n${JSON.stringify(result, null, 2)}`;
|
||||
document.getElementById('connectionOutput').className = 'output success';
|
||||
} catch (error) {
|
||||
document.getElementById('connectionOutput').textContent = `Connection failed: ${error}`;
|
||||
document.getElementById('connectionOutput').className = 'output error';
|
||||
}
|
||||
};
|
||||
|
||||
// List all runners
|
||||
window.listRunners = async function() {
|
||||
try {
|
||||
if (!client) {
|
||||
throw new Error('Client not initialized. Test connection first.');
|
||||
}
|
||||
|
||||
const runners = await client.list_runners();
|
||||
document.getElementById('runnersOutput').textContent = `Runners:\n${JSON.stringify(runners, null, 2)}`;
|
||||
document.getElementById('runnersOutput').className = 'output success';
|
||||
} catch (error) {
|
||||
document.getElementById('runnersOutput').textContent = `Failed to list runners: ${error}`;
|
||||
document.getElementById('runnersOutput').className = 'output error';
|
||||
}
|
||||
};
|
||||
|
||||
// Register a new runner
|
||||
window.registerRunner = async function() {
|
||||
try {
|
||||
if (!client) {
|
||||
throw new Error('Client not initialized. Test connection first.');
|
||||
}
|
||||
|
||||
const secret = document.getElementById('registerSecret').value;
|
||||
const name = document.getElementById('runnerName').value;
|
||||
const queue = document.getElementById('runnerQueue').value;
|
||||
|
||||
await client.register_runner(secret, name, queue);
|
||||
document.getElementById('registerOutput').textContent = `Runner '${name}' registered successfully!`;
|
||||
document.getElementById('registerOutput').className = 'output success';
|
||||
} catch (error) {
|
||||
document.getElementById('registerOutput').textContent = `Failed to register runner: ${error}`;
|
||||
document.getElementById('registerOutput').className = 'output error';
|
||||
}
|
||||
};
|
||||
|
||||
// Run a job
|
||||
window.runJob = async function() {
|
||||
try {
|
||||
if (!client) {
|
||||
throw new Error('Client not initialized. Test connection first.');
|
||||
}
|
||||
|
||||
const secret = document.getElementById('jobSecret').value;
|
||||
let jobId = document.getElementById('jobId').value;
|
||||
const runnerName = document.getElementById('jobRunnerName').value;
|
||||
const payload = document.getElementById('jobPayload').value;
|
||||
|
||||
// Generate job ID if not provided
|
||||
if (!jobId) {
|
||||
jobId = 'job_' + Math.random().toString(36).substr(2, 9);
|
||||
document.getElementById('jobId').value = jobId;
|
||||
}
|
||||
|
||||
const job = create_job(jobId, payload, "SAL", runnerName);
|
||||
const result = await client.run_job(secret, job);
|
||||
|
||||
document.getElementById('jobOutput').textContent = `Job executed successfully!\nJob ID: ${jobId}\nResult: ${result}`;
|
||||
document.getElementById('jobOutput').className = 'output success';
|
||||
} catch (error) {
|
||||
document.getElementById('jobOutput').textContent = `Failed to run job: ${error}`;
|
||||
document.getElementById('jobOutput').className = 'output error';
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize on page load
|
||||
initWasm();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user