Initial commit: Thanos Systems Monitor
- Cyberpunk-themed Unraid dashboard - Disk usage monitoring with ring charts - System metrics (CPU, Memory, Parity) - Docker container status display - Optimized for Raspberry Pi 3 - GraphQL API integration 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Michael Simard
358
schema-test.html
Normal file
358
schema-test.html
Normal file
@@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Unraid API Schema Explorer</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Courier New', monospace;
|
||||
background-color: #000;
|
||||
color: #00ffff;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
text-shadow: 0 0 10px #00ffff;
|
||||
}
|
||||
.section {
|
||||
background-color: #0a0a0a;
|
||||
border: 2px solid #00ffff;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #1a1a1a;
|
||||
color: #00ffff;
|
||||
border: 1px solid #00ffff;
|
||||
padding: 10px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
button {
|
||||
background-color: #00ffff;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #00cccc;
|
||||
}
|
||||
pre {
|
||||
background-color: #1a1a1a;
|
||||
padding: 15px;
|
||||
border-left: 3px solid #00ffff;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.error {
|
||||
color: #ff0000;
|
||||
}
|
||||
.success {
|
||||
color: #00ff00;
|
||||
}
|
||||
.result-container {
|
||||
position: relative;
|
||||
}
|
||||
.copy-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: #00ffff;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
.copy-btn:hover {
|
||||
background-color: #00cccc;
|
||||
}
|
||||
.copy-btn.copied {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
.query-box {
|
||||
position: relative;
|
||||
}
|
||||
.copy-query-btn {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
right: 0;
|
||||
background-color: #00ffff;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.copy-query-btn:hover {
|
||||
background-color: #00cccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>UNRAID API SCHEMA EXPLORER</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>Introspection Query</h2>
|
||||
<p>This will query the GraphQL schema to discover available types and fields.</p>
|
||||
<button onclick="runIntrospection()">Run Introspection</button>
|
||||
<div id="introspection-result"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Custom Query Test</h2>
|
||||
<p>Enter a GraphQL query to test:</p>
|
||||
<div class="query-box">
|
||||
<button class="copy-query-btn" onclick="copyQuery()">Copy Query</button>
|
||||
<textarea id="custom-query">query { info { os { platform } } }</textarea>
|
||||
</div>
|
||||
<button onclick="runCustomQuery()">Execute Query</button>
|
||||
<div id="custom-result"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Preset Queries</h2>
|
||||
<button onclick="testMemoryQuery()">Test Memory Query</button>
|
||||
<button onclick="testArrayQuery()">Test Array Query</button>
|
||||
<button onclick="testDockerQuery()">Test Docker Query</button>
|
||||
<div id="preset-result"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_CONFIG = {
|
||||
serverUrl: 'http://YOUR_UNRAID_IP:PORT/graphql',
|
||||
apiKey: 'YOUR_API_KEY_HERE'
|
||||
};
|
||||
|
||||
async function executeQuery(query) {
|
||||
try {
|
||||
const response = await fetch(API_CONFIG.serverUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-api-key': API_CONFIG.apiKey
|
||||
},
|
||||
body: JSON.stringify({ query })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
return result;
|
||||
} catch (error) {
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(text, button) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'COPIED!';
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
button.classList.remove('copied');
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy:', err);
|
||||
alert('Failed to copy to clipboard');
|
||||
});
|
||||
}
|
||||
|
||||
function copyQuery() {
|
||||
const query = document.getElementById('custom-query').value;
|
||||
const button = event.target;
|
||||
copyToClipboard(query, button);
|
||||
}
|
||||
|
||||
function addCopyButton(resultDiv, data) {
|
||||
const button = document.createElement('button');
|
||||
button.className = 'copy-btn';
|
||||
button.textContent = 'COPY';
|
||||
button.onclick = function() {
|
||||
copyToClipboard(JSON.stringify(data, null, 2), button);
|
||||
};
|
||||
return button;
|
||||
}
|
||||
|
||||
async function runIntrospection() {
|
||||
const resultDiv = document.getElementById('introspection-result');
|
||||
resultDiv.innerHTML = '<p>Running introspection query...</p>';
|
||||
|
||||
// Query to get DockerContainer type fields
|
||||
const query = `
|
||||
query {
|
||||
__type(name: "DockerContainer") {
|
||||
name
|
||||
fields {
|
||||
name
|
||||
type {
|
||||
name
|
||||
kind
|
||||
ofType {
|
||||
name
|
||||
kind
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const result = await executeQuery(query);
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.className = 'result-container';
|
||||
|
||||
if (result.errors) {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'error';
|
||||
pre.textContent = JSON.stringify(result.errors, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.errors));
|
||||
container.appendChild(pre);
|
||||
} else {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'success';
|
||||
pre.textContent = JSON.stringify(result.data, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.data));
|
||||
container.appendChild(pre);
|
||||
}
|
||||
|
||||
resultDiv.innerHTML = '';
|
||||
resultDiv.appendChild(container);
|
||||
}
|
||||
|
||||
async function runCustomQuery() {
|
||||
const query = document.getElementById('custom-query').value;
|
||||
const resultDiv = document.getElementById('custom-result');
|
||||
resultDiv.innerHTML = '<p>Executing query...</p>';
|
||||
|
||||
const result = await executeQuery(query);
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.className = 'result-container';
|
||||
|
||||
if (result.errors) {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'error';
|
||||
pre.textContent = JSON.stringify(result.errors, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.errors));
|
||||
container.appendChild(pre);
|
||||
} else {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'success';
|
||||
pre.textContent = JSON.stringify(result.data, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.data));
|
||||
container.appendChild(pre);
|
||||
}
|
||||
|
||||
resultDiv.innerHTML = '';
|
||||
resultDiv.appendChild(container);
|
||||
}
|
||||
|
||||
async function testMemoryQuery() {
|
||||
const resultDiv = document.getElementById('preset-result');
|
||||
resultDiv.innerHTML = '<p>Testing memory query...</p>';
|
||||
|
||||
const query = `query { info { memory { __typename } } }`;
|
||||
const result = await executeQuery(query);
|
||||
|
||||
const header = document.createElement('h3');
|
||||
header.textContent = 'Memory Query Result:';
|
||||
const container = document.createElement('div');
|
||||
container.className = 'result-container';
|
||||
|
||||
if (result.errors) {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'error';
|
||||
pre.textContent = JSON.stringify(result.errors, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.errors));
|
||||
container.appendChild(pre);
|
||||
} else {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'success';
|
||||
pre.textContent = JSON.stringify(result.data, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.data));
|
||||
container.appendChild(pre);
|
||||
}
|
||||
|
||||
resultDiv.innerHTML = '';
|
||||
resultDiv.appendChild(header);
|
||||
resultDiv.appendChild(container);
|
||||
}
|
||||
|
||||
async function testArrayQuery() {
|
||||
const resultDiv = document.getElementById('preset-result');
|
||||
resultDiv.innerHTML = '<p>Testing array query...</p>';
|
||||
|
||||
const query = `query { array { state } }`;
|
||||
const result = await executeQuery(query);
|
||||
|
||||
const header = document.createElement('h3');
|
||||
header.textContent = 'Array Query Result:';
|
||||
const container = document.createElement('div');
|
||||
container.className = 'result-container';
|
||||
|
||||
if (result.errors) {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'error';
|
||||
pre.textContent = JSON.stringify(result.errors, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.errors));
|
||||
container.appendChild(pre);
|
||||
} else {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'success';
|
||||
pre.textContent = JSON.stringify(result.data, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.data));
|
||||
container.appendChild(pre);
|
||||
}
|
||||
|
||||
resultDiv.innerHTML = '';
|
||||
resultDiv.appendChild(header);
|
||||
resultDiv.appendChild(container);
|
||||
}
|
||||
|
||||
async function testDockerQuery() {
|
||||
const resultDiv = document.getElementById('preset-result');
|
||||
resultDiv.innerHTML = '<p>Testing Docker query...</p>';
|
||||
|
||||
const query = `query { dockerContainers { names state } }`;
|
||||
const result = await executeQuery(query);
|
||||
|
||||
const header = document.createElement('h3');
|
||||
header.textContent = 'Docker Query Result:';
|
||||
const container = document.createElement('div');
|
||||
container.className = 'result-container';
|
||||
|
||||
if (result.errors) {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'error';
|
||||
pre.textContent = JSON.stringify(result.errors, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.errors));
|
||||
container.appendChild(pre);
|
||||
} else {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'success';
|
||||
pre.textContent = JSON.stringify(result.data, null, 2);
|
||||
container.appendChild(addCopyButton(container, result.data));
|
||||
container.appendChild(pre);
|
||||
}
|
||||
|
||||
resultDiv.innerHTML = '';
|
||||
resultDiv.appendChild(header);
|
||||
resultDiv.appendChild(container);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user