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

Commit 3b853c9

Browse files
derklaroderklaro
committed
Implement fully working service live console, some other changes
1 parent 1185e47 commit 3b853c9

File tree

10 files changed

+366
-176
lines changed

10 files changed

+366
-176
lines changed

‎Dockerfile

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
FROM php:8.0-apache
2+
3+
COPY . usr/webinterface/
4+
WORKDIR usr/webinterface/
5+
6+
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
7+
RUN composer install --no-dev
8+
9+
USER www-data
10+
11+
EXPOSE 80 443
12+
CMD ["apachectl", "-D", "FOREGROUND"]

‎pages/header.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ class="h-10 w-10 flex justify-center items-center focus:outline-none text-yellow
9090
</button>
9191
</li>
9292
<li class="relative">
93-
<img src="assets/icons/status.svg"/>
93+
<img src="/assets/icons/status.svg"/>
9494
<span aria-hidden="true"
9595
class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full"></span>
9696
</li>

‎pages/webinterface/index.php

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<?php
2+
use webinterface\main;
23

3-
4-
$nodes = \webinterface\main::buildDefaultRequest("cluster", "GET");
4+
$nodes = main::buildDefaultRequest("cluster", "GET");
55

66
$services = 0;
77

88
$connectedNodeCount = 0;
9-
$totalNodeCount = sizeof($nodes);
9+
$totalNodeCount = sizeof($nodes['nodes']);
1010

1111
$memory_min = 0;
1212
$memory_max = 0;
@@ -148,7 +148,7 @@
148148
</div>
149149
</div>
150150
<!-- Status -->
151-
<?php $version = \webinterface\main::testIfLatestVersion(); ?>
151+
<?php $version = main::testIfLatestVersion(); ?>
152152
<?php if(!$version['success']){ ?>
153153
<div class="min-w-0 p-4 text-white bg-gradient-to-br from-red-600 to-red-800 rounded-lg shadow-xs">
154154
<h4 class="mb-4 font-bold">Warning!</h4>

‎pages/webinterface/login.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ class="-mx-6 px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-n
2222
class="-mx-6 px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-none"/>
2323
</div>
2424
</div>
25-
<br />
25+
<br/>
2626
<button type="submit"
2727
class="w-full py-2 rounded-full bg-green-600 text-gray-100 focus:outline-none">Login
2828
</button>

‎pages/webinterface/task/console.php

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,73 @@
1-
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
1+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
22
<script>
3-
function showMessage(messageHTML) {
4-
$('#socket_event').prepend(messageHTML);
5-
}
6-
let websocket;
3+
$(document).ready(() => {
4+
let socketUrl = "<?= webinterface\main::provideSocketUrl() . "/service/" . $service_name . "/liveLog?ticket=" . $ticket; ?>";
5+
let websocket = new WebSocket(socketUrl);
76

8-
$(document).ready(function () {
9-
function ws_connect() {
10-
websocket = new WebSocket("<?= \webinterface\main::provideSocketUrl()."/service/".$service_name."/liveLog"; ?>");
7+
websocket.onerror = () => websocket.close()
118

12-
websocket.onmessage = function (event) {
13-
showMessage(event.data);
14-
};
9+
websocket.onmessage = (event) => showMessage(event.data)
10+
websocket.onclose = () => showMessage('<div class="dark:text-gray-200 text-gray-800 text-sm">Connection closed by server</div>')
1511

16-
websocket.onclose = function (e) {
17-
showMessage('<div class="dark:text-gray-200 text-gray-800 text-sm">Cannot connect</div>');
18-
};
12+
setInterval(() => websocket.send(''), 15_000)
1913

20-
websocket.onerror = function (err) {
21-
websocket.close();
14+
// command sending
2215

23-
};
24-
};
25-
ws_connect();
16+
$('#execute-command').bind("click", () => pushCommandExecute(websocket))
17+
$(document).on("keypress", (event) => {
18+
if (event.which === 13) {
19+
pushCommandExecute(websocket)
20+
}
21+
})
2622
});
2723

28-
</script>
24+
function showMessage(messageHTML) {
25+
$('#socket_event')?.prepend(messageHTML + "<br/>");
26+
}
2927

28+
function pushCommandExecute(websocket) {
29+
let commandInput = $('#command-input')
30+
let command = commandInput.val()
3031

31-
<main class="w-full flex-grow p-6">
32+
if (command) { // check if there is an input
33+
websocket.send(command)
34+
commandInput.val('') // reset input field
35+
}
36+
}
37+
</script>
3238

39+
<main class="w-full flex-grow p-6">
3340
<div class="py-3">
3441
<main class="h-full overflow-y-auto">
3542
<div class="container mx-auto grid">
3643
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-1">
37-
<!-- Create Node -->
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 -->
3865
<div class="w-full">
3966
<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">
40-
4167
<div id="socket_event"></div>
42-
</div>
68+
</div>
4369
</div>
4470
</div>
45-
</div>
4671
</main>
4772
</div>
4873
</main>

‎pages/webinterface/tasks.php

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!--
2+
~ Copyright 2020 CloudNetService Project and contributors
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
-->
16+
17+
<div class="w-full overflow-x-hidden flex flex-col">
18+
<header class="grid justify-items-end w-full bg-transparent text-gray-400 p-4">
19+
<ul class="flex items-center flex-shrink-0 space-x-6">
20+
<li class="relative">
21+
<button id="switchTheme"
22+
class="h-10 w-10 flex justify-center items-center focus:outline-none text-yellow-500">
23+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
24+
<path fill-rule="evenodd"
25+
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
26+
clip-rule="evenodd"></path>
27+
</svg>
28+
</button>
29+
</li>
30+
<li class="relative">
31+
<img src="/assets/icons/status.svg"/>
32+
<span aria-hidden="true"
33+
class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full"></span>
34+
</li>
35+
<li class="relative">
36+
<img class="object-cover w-8 h-8 rounded-full"
37+
src="https://pbs.twimg.com/profile_images/1221609781296881665/FjGb4yqO_400x400.jpg" alt=""
38+
aria-hidden="true"/>
39+
</li>
40+
</ul>
41+
</header>
42+
43+
<main class="w-full flex-grow p-6">
44+
<div class="py-3">
45+
<main class="h-full overflow-y-auto">
46+
<div class="container mx-auto grid">
47+
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
48+
<!-- Tasks start -->
49+
<div class="min-w-0 p-4 dark:bg-gray-800 bg-white rounded-lg shadow-lg">
50+
<h4 class="mb-4 font-semibold text-blue-500">Lobby</h4>
51+
<div class="flex">
52+
<span class="text-gray-400">•</span>
53+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">Memory Usage:
54+
50MB/100MB<br></p>
55+
</div>
56+
<div class="flex">
57+
<span class="text-gray-400">•</span>
58+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">Nodes: Nodes-1<br></p>
59+
</div>
60+
<div class="flex">
61+
<span class="text-gray-400">•</span>
62+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">AutoDeleteOnStop: true<br>
63+
</p>
64+
</div>
65+
<div class="flex">
66+
<span class="text-gray-400">•</span>
67+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">StartPort: 25566<br>
68+
</p>
69+
</div>
70+
<div class="flex">
71+
<span class="text-gray-400">•</span>
72+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">Groups: Lobby<br></p>
73+
</div>
74+
<div class="flex">
75+
<span class="text-gray-400">•</span>
76+
<p class="flex-1 dark:text-white text-gray-900 items-center pl-2">Environment:
77+
MINECRAFT_SERVER<br></p>
78+
</div>
79+
<div class="flex justify-center mt-4 space-x-3 text-sm text-white">
80+
<div class="flex items-center">
81+
<button type="button"
82+
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">
83+
Edit
84+
</button>
85+
<button type="button"
86+
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">
87+
Delete
88+
</button>
89+
</div>
90+
</div>
91+
</div>
92+
<!-- Tasks end -->
93+
</div>
94+
</div>
95+
</main>
96+
</div>
97+
<div class="py-3">
98+
<main class="h-full overflow-y-auto">
99+
<div class="container mx-auto grid">
100+
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-1">
101+
<!-- Create Task -->
102+
<div class="w-full">
103+
<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">
104+
<div class="top mb-2 flex">
105+
<h4 class="mb-2 font-semibold dark:text-white text-gray-900">Create Task</h4>
106+
</div>
107+
<div class="flex-1 flex flex-col md:flex-row text-sm font-mono subpixel-antialiased">
108+
<div class="w-full flex-1 mx-2">
109+
<input placeholder="Name"
110+
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">
111+
</div>
112+
<div class="w-full flex-1 mx-2">
113+
<input placeholder="Ram"
114+
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">
115+
</div>
116+
<div class="w-full flex-1 mx-2">
117+
<select 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"
118+
id="node-state">
119+
<option class="text-sm font-mono subpixel-antialiased text-gray-100"
120+
disabled selected>Select Node
121+
</option>
122+
<option class="text-sm font-mono subpixel-antialiased">Node-1</option>
123+
<option class="text-sm font-mono subpixel-antialiased">Node-2</option>
124+
<option class="text-sm font-mono subpixel-antialiased">Node-3</option>
125+
</select>
126+
</div>
127+
<div class="w-full flex-1 mx-2">
128+
<input placeholder="Port"
129+
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">
130+
</div>
131+
<div class="w-full flex-1 mx-2">
132+
<label class="inline-flex items-center mt-3">
133+
<input type="checkbox" class="form-checkbox h-5 w-5"><span
134+
class="ml-2 dark:text-white text-gray-900">Static</span>
135+
</label>
136+
<label class="inline-flex items-center mt-3">
137+
<input type="checkbox" class="form-checkbox h-5 w-5" checked><span
138+
class="ml-2 dark:text-white text-gray-900">AutoDeleteOnStop</span>
139+
</label>
140+
</div>
141+
</div>
142+
<button type="button"
143+
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">
144+
Create
145+
</button>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
</main>
151+
</div>
152+
</main>
153+
<footer class="w-full bg-transparent text-gray-400 text-center p-4">Copyright © 2020 CloudNetService</footer>
154+
</div>

0 commit comments

Comments
 (0)