Skip to content
This repository was archived by the owner on Jul 26, 2022. It is now read-only.

Commit ed78b25

Browse files
author
Moritz Walter
committed
add stop Service, add create/delete/console Node
fix some bugs
1 parent cc59f08 commit ed78b25

File tree

10 files changed

+1384
-153
lines changed

10 files changed

+1384
-153
lines changed

‎pages/header.php

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="UTF-8"/>
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6-
<link href="/assets/styles.css" rel="stylesheet">
7-
<script src="/assets/js/charts-ram.js" defer></script>
8-
<script src="/assets/js/charts-cpu.js" defer></script>
6+
<link href="<?= \webinterface\main::getUrl(); ?>/assets/styles.css" rel="stylesheet">
7+
<script src="<?= \webinterface\main::getUrl(); ?>/assets/js/charts-ram.js" defer></script>
8+
<script src="<?= \webinterface\main::getUrl(); ?>/assets/js/charts-cpu.js" defer></script>
99
</head>
1010
<body class="dark:bg-gray-900 bg-gray-100">
1111
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
@@ -57,7 +57,7 @@ class=""/></svg>
5757
<div :class="{'block': open, 'hidden': !open}"
5858
class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
5959
<a class="flex items-center py-2 px-8 dark:text-gray-100 hover:dark:text-gray-200 text-gray-800 hover:text-gray-900"
60-
href="../public/index.php?action=logout">
60+
href="<?= \webinterface\main::getUrl().'/logout'; ?>">
6161
<svg class="text-gray-900 dark:text-white" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
6262
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
6363
width="16" height="16" x="0" y="0" viewBox="0 0 512.00533 512"

‎pages/webinterface/cluster.php

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎pages/webinterface/cluster/console.php

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2+
<script>
3+
$(document).ready(() => {
4+
let socketUrl = "<?= webinterface\main::provideSocketUrl() . "/node/" . $node_id . "/liveConsole?ticket=" . $ticket; ?>";
5+
let websocket = new WebSocket(socketUrl);
6+
7+
websocket.onerror = () => websocket.close()
8+
9+
websocket.onmessage = (event) => showMessage('<div class="dark:text-gray-200 text-gray-800 text-sm">' + event.data + '</div>')
10+
websocket.onclose = () => showMessage('<div class="dark:text-gray-200 text-gray-800 text-sm">Connection closed by server</div>')
11+
12+
setInterval(() => websocket.send(''), 15_000)
13+
14+
// command sending
15+
16+
$('#execute-command').bind("click", () => pushCommandExecute(websocket))
17+
$(document).on("keypress", (event) => {
18+
if (event.which === 13) {
19+
pushCommandExecute(websocket)
20+
}
21+
})
22+
});
23+
24+
function showMessage(messageHTML) {
25+
$('#socket_event')?.prepend(messageHTML);
26+
}
27+
28+
function pushCommandExecute(websocket) {
29+
let commandInput = $('#command-input')
30+
let command = commandInput.val()
31+
32+
if (command) { // check if there is an input
33+
websocket.send(command)
34+
commandInput.val('') // reset input field
35+
}
36+
}
37+
</script>
38+
39+
<main class="w-full flex-grow p-6">
40+
<div class="py-3">
41+
<main class="h-full overflow-y-auto">
42+
<div class="container mx-auto grid">
43+
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-1">
44+
<!-- Command input -->
45+
<div class="w-full">
46+
<div class="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-100 dark:bg-gray-800 bg-white pb-6 pt-4 rounded-lg leading-normal overflow-hidden">
47+
<div class="top mb-2 flex">
48+
<h4 class="mb-2 font-semibold dark:text-white text-gray-900">Send command</h4>
49+
</div>
50+
<div class="flex-1 flex flex-col md:flex-row text-sm font-mono subpixel-antialiased">
51+
<div class="w-full flex-1 mx-2">
52+
<input placeholder="Command"
53+
id="command-input"
54+
class="my-2 p-2 dark:bg-gray-900 bg-gray-100 flex border dark:border-gray-900 border-gray-100 rounded px-2 appearance-none outline-none w-full dark:text-white text-gray-900 focus:ring-2 focus:ring-blue-600">
55+
</div>
56+
</div>
57+
<button type="button"
58+
id="execute-command"
59+
class="h-10 bg-blue-500 text-white rounded-md px-4 py-2 m-2 hover:bg-blue-600 focus:outline-none focus:shadow-outline">
60+
Execute
61+
</button>
62+
</div>
63+
</div>
64+
<!-- Create text output node -->
65+
<div class="w-full">
66+
<div class="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-100 dark:bg-gray-800 bg-white pb-6 pt-4 rounded-lg leading-normal overflow-hidden">
67+
<div id="socket_event"></div>
68+
69+
<?php
70+
#$console = \webinterface\main::buildDefaultRequest("node/" . $node_id."/logLines", "GET");
71+
#print_r($console);
72+
#foreach(array_reverse($console['lines']) as $log){
73+
# echo '<div class="dark:text-gray-200 text-gray-800 text-sm">'.$log.'</div>';
74+
#}
75+
?>
76+
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</main>
82+
</div>
83+
</main>

‎pages/webinterface/cluster/index.php

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<main class="w-full flex-grow p-6">
2+
<div class="py-3">
3+
<main class="h-full overflow-y-auto">
4+
<div class="container mx-auto grid">
5+
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
6+
<!-- Nodes start -->
7+
<?php
8+
$nodes = \webinterface\main::buildDefaultRequest("cluster", "GET");
9+
10+
11+
foreach ($nodes['nodes'] as $node) { ?>
12+
13+
<div class="min-w-0 p-4 dark:bg-gray-800 bg-white rounded-lg shadow-lg border-t-4 border-green-600">
14+
<div class="flex items-center justify-between">
15+
<h4 class="mb-4 font-semibold text-blue-500"><?= $node['node']['uniqueId']; ?></h4>
16+
<!-- State Starting: bg-yellow-600 // State Stop: bg-red-600 -->
17+
<?php if($node['available'] == true){ ?>
18+
<span class="text-sm text-center text-white h-6 w-16 bg-green-600 rounded-full">Online</span>
19+
<?php } else { ?>
20+
<span class="text-sm text-center text-white h-6 w-16 bg-red-600 rounded-full">Offline</span>
21+
<?php } ?>
22+
</div>
23+
<div class="flex">
24+
<span class="text-gray-400">•</span>
25+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">Memory Usage: <?= $node['nodeInfoSnapshot']['usedMemory']; ?>MB/<?= $node['nodeInfoSnapshot']['maxMemory']; ?>MB<br></p>
26+
</div>
27+
<div class="flex">
28+
<span class="text-gray-400">•</span>
29+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">CPU Usage: <?= min(round($node['nodeInfoSnapshot']['processSnapshot']['cpuUsage'] * 100), 100); ?>%<br></p>
30+
</div>
31+
<div class="flex">
32+
<span class="text-gray-400">•</span>
33+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">Version: <?= $node['nodeInfoSnapshot']['version'] ?><br></p>
34+
</div>
35+
<div class="flex">
36+
<span class="text-gray-400">•</span>
37+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">Host: <?= $node['node']['listeners'][0]['host'].":".$node['node']['listeners'][0]['port']; ?> <br></p>
38+
</div>
39+
<div class="flex justify-center mt-4 space-x-3 text-sm text-white">
40+
<div class="flex items-center">
41+
<form method="post">
42+
<input name="action" value="stopNode" type="hidden">
43+
<input name="node_id" value="<?= $node['node']['uniqueId']; ?>" type="hidden">
44+
<input name="csrf" value="<?= $_SESSION['cn3-wi-csrf'] ?>" type="hidden">
45+
46+
<button type="submit" class="h-10 bg-blue-500 text-white rounded-md px-4 py-2 m-2 hover:bg-blue-600 focus:outline-none focus:shadow-outline">Shutdown</button>
47+
</form>
48+
<form method="post">
49+
<input name="action" value="deleteNode" type="hidden">
50+
<input name="node_id" value="<?= $node['node']['uniqueId']; ?>" type="hidden">
51+
<input name="csrf" value="<?= $_SESSION['cn3-wi-csrf'] ?>" type="hidden">
52+
53+
<button type="submit" class="h-10 bg-blue-500 text-white rounded-md px-4 py-2 m-2 hover:bg-blue-600 focus:outline-none focus:shadow-outline">Delete</button>
54+
</form>
55+
</div>
56+
</div>
57+
</div>
58+
<?php } ?>
59+
<!-- Nodes end-->
60+
</div>
61+
</div>
62+
</main>
63+
</div>
64+
65+
<div class="py-3">
66+
<main class="h-full overflow-y-auto">
67+
<div class="container mx-auto grid">
68+
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-1">
69+
<!-- Create Node -->
70+
<div class="w-full">
71+
<div class="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-100 dark:bg-gray-800 bg-white pb-6 pt-4 rounded-lg leading-normal overflow-hidden">
72+
<div class="top mb-2 flex">
73+
<h4 class="mb-2 font-semibold dark:text-white text-gray-900">Create Node</h4>
74+
</div>
75+
<form method="post">
76+
<input name="action" value="createNode" type="hidden">
77+
<input name="csrf" value="<?= $_SESSION['cn3-wi-csrf'] ?>" type="hidden">
78+
79+
<div class="flex-1 flex flex-col md:flex-row text-sm font-mono subpixel-antialiased">
80+
<div class="w-full flex-1 mx-2">
81+
<input placeholder="Name" name="name" required class="my-2 p-2 dark:bg-gray-900 bg-gray-100 flex border dark:border-gray-900 border-gray-100 rounded px-2 appearance-none outline-none w-full dark:text-white text-gray-900 focus:ring-2 focus:ring-blue-600">
82+
</div>
83+
<div class="w-full flex-1 mx-2">
84+
<input placeholder="Host" name="host" required class="my-2 p-2 dark:bg-gray-900 bg-gray-100 flex border dark:border-gray-900 border-gray-100 rounded px-2 appearance-none outline-none w-full dark:text-white text-gray-900 focus:ring-2 focus:ring-blue-600">
85+
</div>
86+
<div class="w-full flex-1 mx-2">
87+
<input placeholder="Port" name="port" required class="my-2 p-2 dark:bg-gray-900 bg-gray-100 flex border dark:border-gray-900 border-gray-100 rounded px-2 appearance-none outline-none w-full dark:text-white text-gray-900 focus:ring-2 focus:ring-blue-600">
88+
</div>
89+
</div>
90+
<button type="submit" class="h-10 bg-blue-500 text-white rounded-md px-4 py-2 m-2 hover:bg-blue-600 focus:outline-none focus:shadow-outline">Create</button>
91+
</form>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
</main>
97+
</div>
98+
</main>

‎pages/webinterface/login.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<input name="csrf" value="<?= $_SESSION['cn3-wi-csrf'] ?>" type="hidden">
55
<div class="flex font-bold justify-center mt-6">
66
<img class="h-20 w-20"
7-
src="https://raw.githubusercontent.com/sefyudem/Responsive-Login-Form/master/img/avatar.svg">
7+
src="<?= \webinterface\main::getUrl(); ?>/assets/logo.svg">
88
</div>
9-
<h2 class="text-3xl text-center text-gray-700 mb-4">Interface login</h2>
9+
<h2 class="text-3xl text-center text-gray-700 mb-4">CloudNet Webinterface</h2>
1010
<div class="px-12 pb-10">
1111
<div class="w-full mb-2">
1212
<div class="flex items-center">

0 commit comments

Comments
 (0)