Skip to content

Commit

Permalink
several ui improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@hobbyquaker
hobbyquaker committed May 15, 2019
1 parent c497d19 commit b6ef68b
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 33 deletions.
8 changes: 8 additions & 0 deletions addon_files/redmatic/bin/uptime.sh
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#!/bin/sh

PID=$(pidof node-red)
STARTTIME=$(awk '{print int($22 / 100)}' /proc/$PID/stat)
UPTIME=$(awk '{print int($1)}' /proc/uptime)
NOW=$(date +%s)
DIFF=$((NOW - (UPTIME - STARTTIME)))
date +"%b %d, %H:%M" -d @$DIFF
15 changes: 15 additions & 0 deletions addon_files/redmatic/www/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ iframe {
color: orange;
}

.status-upgrade {
color: darkorange;
}

.status-stopped {
color: red;
}
Expand Down Expand Up @@ -73,4 +77,15 @@ iframe {
text-align: center;
padding: 16px;
font-size: 2em;
}

.pkg-desc {
font-size: 10px;
color: #333;
display: inline-block;
}

#redmatic-version {
color: #666;
font-size: 12px;
}
74 changes: 66 additions & 8 deletions addon_files/redmatic/www/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ $(document).ready(() => {

let config;

let noderedState;

const qs = location.search;
let sid = '';
let tmp = qs.match(/sid=(@[0-9a-zA-Z]{10}@)/);
Expand All @@ -82,14 +84,15 @@ $(document).ready(() => {

function checkUpdate() {
$.getJSON(`update_check.cgi?cmd=versions&sid=${sid}`, (current, success) => {
$('#redmatic-version').html('RedMatic Version ' + current.redmatic);
$.get(`update_check.cgi?sid=${sid}`, (available, success) => {
if (current.redmatic !== $.trim(available)) {
available = $.trim(available);
if (available !== 'n/a' && current.redmatic !== available) {
$('#update-link').html(`<a href="https://github.com/rdmtc/RedMatic/releases/latest" target="_blank">Download Version ${available}</a>`);
$('#update-notify').show();
}
});
});

}

checkUpdate();
Expand All @@ -99,14 +102,26 @@ $(document).ready(() => {
$.get(`pkg.cgi?sid=${sid}&cmd=repo`, data => {
packages = data;
$.get(`pkg.cgi?sid=${sid}&cmd=ls`, data => {
$('#pkg-spinner').hide();
data.split('\n').forEach(line => {
if (line && packages[line]) {
packages[line].installed = true;
const [name, currentVersion] = line.split(' ');
if (name && packages[name]) {
packages[name].installed = true;
packages[name].currentVersion = currentVersion;
}
});
$packageTable.html('');
Object.keys(packages).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).forEach(name => {
$packageTable.append(`<tr><td>${name}</td><td>${packages[name].version}</td><td style="text-align: center;">${packages[name].installed ? '✓' : '&nbsp;'}</td><td><button data-pkg="${name}" type="button" class="btn btn-primary btn-sm pkg-install" ${packages[name].installed ? 'disabled' : ''}><span class="spinner-install spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
const installed = packages[name].installed ?
(packages[name].version === packages[name].currentVersion ? '✅' : `⚠${packages[name].currentVersion}`) :
'&nbsp;';

let url = packages[name].homepage || (packages[name].repository && packages[name].repository.url) || packages[name].repository;
if (url) {
url = url.replace(/^git\+/, '').replace(/\.git$/, '');
}

$packageTable.append(`<tr><td><a href="${url}" target="_blank">${name}</a><br><span class="pkg-desc">${packages[name].description || ''}</span></td><td>${packages[name].version}</td><td style="text-align: center;">${installed}</td><td><button data-pkg="${name}" type="button" class="btn btn-primary btn-sm pkg-install" ${packages[name].installed ? 'disabled' : ''}><span class="spinner-install spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
install</button> <button data-pkg="${name}" type="button" class="btn btn-danger btn-sm pkg-remove" ${packages[name].installed ? '' : 'disabled'}><span class="spinner-remove spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
remove</button></td></tr>`)
});
Expand Down Expand Up @@ -142,6 +157,11 @@ $(document).ready(() => {

pkg();

function refresh() {
checkUpdate();
pkg();
}

function cpu() {
$.get(`service.cgi?sid=${sid}&cmd=cpu`, (data, success) => {
$cpu.html(data ? 'cpu ' + data : '');
Expand All @@ -167,7 +187,15 @@ $(document).ready(() => {
if (!rss.endsWith('B')) {
rss += 'kB';
}
$status.html('<span class="status-running">running</span>');
$('#status-spinner').hide();
if (noderedState !== 'running') {
$status.html('<span class="status-running">running</span>');
noderedState = 'running';
refresh();
$.get(`service.cgi?sid=${sid}&cmd=uptime`, (uptime, success) => {
$status.html('<span class="status-running">running</span> <span id="uptime">(' + $.trim(uptime) + ')');
});
}
$memory.html(`vsz ${vsz}, rss ${rss}`);
found = true;
$dropdownRestart.removeClass('disabled');
Expand All @@ -180,6 +208,8 @@ $(document).ready(() => {
}
match = line.match(/([0-9]+[a-z]?)\s+([0-9]+[a-z]?)\s+.*red.js/);
if (match) {
noderedState = 'starting';
$('#status-spinner').show();
let [, vsz, rss] = match;
vsz = vsz.replace('m', 'MB').replace('g', 'GB');
rss = rss.replace('m', 'MB').replace('g', 'GB');
Expand All @@ -200,8 +230,25 @@ $(document).ready(() => {
psInterval = 2500;
return;
}
match = line.match(/redmatic-pkg install ([^\s]+)/);
if (match) {
noderedState = 'upgrading';
$('#status-spinner').show();
$status.html('<span class="status-upgrade">Upgrading ' + match[1] + '</span>');
$memory.html('');
found = true;
$dropdownRestart.addClass('disabled');
$stop.addClass('disabled');
$dropdownStart.addClass('disabled');
$linkRed.addClass('disabled');
$linkUi.addClass('disabled');
psInterval = 5000;
return;
}
});
if (!found) {
noderedState = 'stopped';
$('#status-spinner').hide();
$status.html('<span class="status-stopped">stopped</span>');
$memory.html('');
$dropdownRestart.addClass('disabled');
Expand Down Expand Up @@ -569,11 +616,14 @@ $(document).ready(() => {
$dropdownRestart.addClass('disabled');
$stop.addClass('disabled');
$dropdownStart.addClass('disabled');
$('#status-spinner').show();
$status.html('<span class="status-starting">stopping</span>');
$memory.html('');
$cpu.html('');
$.get({
url: `service.cgi?sid=${sid}&cmd=restart`,
success: data => {
console.log('restart', data)
if (data.match(/Starting Node-RED: OK/)) {
alert($alertExec);
} else if ($.trim(data) === 'error: invalid session') {
Expand All @@ -588,6 +638,10 @@ $(document).ready(() => {
}, 1000);
}
});
setTimeout(() => {
ps();
}, 10000);

}

$restart.click(() => {
Expand Down Expand Up @@ -691,6 +745,10 @@ $(document).ready(() => {
download('redmatic.' + (new Date()).toISOString() + '.log', 'log.cgi' + location.search);
});

$('#upgrade-log').on('click', () => {
download('redmatic-pkg-upgrade.' + (new Date()).toISOString() + '.log', 'log.cgi' + location.search + '&cmd=upgrade');
});

$('#autorestart').on('change', event => {
config.restartOnCrash = parseInt(event.target.value, 10);
save();
Expand All @@ -712,8 +770,8 @@ $(document).ready(() => {
$('#package-filter').on('keyup', () => {
const filter = $('#package-filter').val();
$packageTable.find('tr').each(function () {
const name = $(this).find('td').html();
if (name.includes(filter)) {
const name = $(this).find('td').html().toLowerCase();
if (name.includes(filter.toLowerCase())) {
$(this).show();
} else {
$(this).hide();
Expand Down
31 changes: 21 additions & 10 deletions addon_files/redmatic/www/log.cgi
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,31 @@ puts -nonewline "Content-Type: text/plain; charset=utf-8\r\n\r\n"

if {[info exists sid] && [check_session $sid]} {

catch {exec /usr/local/addons/redmatic/bin/redmaticVersions} result
puts $result
puts ""
if {[file exists /usr/local/addons/redmatic/var/pkg-upgrade.log]} {
catch {exec cat /usr/local/addons/redmatic/var/pkg-upgrade.log} result
if {[info exists cmd]} {
switch -glob $cmd {
"upgrade" {
if {[file exists /usr/local/addons/redmatic/var/pkg-upgrade.log]} {
catch {exec cat /usr/local/addons/redmatic/var/pkg-upgrade.log} result
puts $result
}
}
}
} else {
catch {exec /usr/local/addons/redmatic/bin/redmaticVersions} result
puts $result
puts ""
}
if {[file exists /var/log/messages.0]} {
catch {exec cat /var/log/messages.0 | grep node-red\\|redmatic } result
if {[file exists /usr/local/addons/redmatic/var/pkg-upgrade.log]} {
catch {exec cat /usr/local/addons/redmatic/var/pkg-upgrade.log} result
puts $result
puts ""
}
if {[file exists /var/log/messages.0]} {
catch {exec cat /var/log/messages.0 | grep node-red\\|redmatic } result
puts $result
}
catch {exec cat /var/log/messages | grep node-red\\|redmatic} result
puts $result
}
catch {exec cat /var/log/messages | grep node-red\\|redmatic} result
puts $result
exit 0
} else {
puts {error: invalid session}
Expand Down
4 changes: 3 additions & 1 deletion addon_files/redmatic/www/pkg.cgi
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ if {[info exists sid] && [check_session $sid]} {
}
"ls" {
puts -nonewline "Content-Type: text/plain; charset=utf-8\r\n\r\n"
puts [exec ls -1 /usr/local/addons/redmatic/lib/node_modules]
foreach pkgjson [glob /usr/local/addons/redmatic/lib/node_modules/*/package.json] {
puts "[lrange [file split $pkgjson] end-1 end-1] [exec /usr/local/addons/redmatic/bin/jq -r ".version" $pkgjson]"
}
}
"install" {
puts -nonewline "Content-Type: text/plain; charset=utf-8\r\n\r\n"
Expand Down
12 changes: 7 additions & 5 deletions addon_files/redmatic/www/service.cgi
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,20 @@ if {[info exists cmd]} {
}
}

if {$cmd == "ps"} {

# No session check to reduce costs of periodic calls, exposed information should be uncritical (it just
# discloses if Node-RED is running, this info can be obtained easily anyways...)
# No session checks for following commands to reduce costs of periodic calls, exposed information is uncritical imho

puts [exec ps -o vsz,rss,comm,args | grep node]
if {$cmd == "ps"} {
puts [exec ps -o vsz,rss,comm,args | grep "node\\|redmatic"]
exit 0
}
if {$cmd == "cpu"} {
puts [exec top -b -n 1 | grep "% node-red$" | awk "\{print \$7\}"]
exit 0
}
if {$cmd == "uptime"} {
puts [exec /usr/local/addons/redmatic/bin/uptime.sh]
exit 0
}
}

puts {error: invalid command}
Expand Down
31 changes: 22 additions & 9 deletions addon_files/redmatic/www/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@
<a class="nav-link pb-0" id="licenses-tab" data-toggle="tab" role="tab" aria-controls="licenses" href="#licenses">Lizenzen</a>
</li>
</ul>
<div class="ml-3 mr-2 pl-2">
<a id="link-red" role="button" class="btn btn-sm btn-outline-info" target="_blank" href="/addons/red/"><i class="fa fa-external-link-alt"></i> Node-RED</a>
<a id="link-ui" role="button" class="btn btn-sm btn-outline-info mr-3" target="_blank" href="/addons/red/ui/"><i class="fa fa-external-link-alt"></i> Dashboard</a>
</div>
<div style="min-width: 130px" id="redmatic-version"></div>
</nav>

<div id="container" class="container">
Expand Down Expand Up @@ -60,9 +65,7 @@
<div class="card mb-4">

<div class="card-body">
<a id="link-red" role="button" class="btn btn-sm btn-outline-info" target="_blank" href="/addons/red/"><i class="fa fa-external-link-alt"></i> Node-RED</a>
<a id="link-ui" role="button" class="btn btn-sm btn-outline-info mr-3" target="_blank" href="/addons/red/ui/"><i class="fa fa-external-link-alt"></i> Dashboard</a>

<label style="display: block">Node-RED Prozess</label>
<!--<a id="backup" role="button" class="btn btn-sm btn-primary mr-3 disabled">Backup</a>-->
<div class="dropdown" style="display: inline-block">
<button type="button" class="btn btn-sm btn-warning dropdown-toggle" id="dropdownRestart" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Expand All @@ -88,10 +91,15 @@
</div>
</div>

<div style="vertical-align: middle; display: inline-block; width: 148px; font-size: 11px; color: grey;" class="">
<div>Node-RED: <span id="node-red-status" style="font-weight: bold;"></span></div>
<div><span id="node-red-memory" style="font-weight: bold;"></span>&nbsp;</div>
<div><span id="node-red-cpu" style="font-weight: bold;"></span>&nbsp;</div>
<div style="width: 30px; display: inline-block">
<div id="status-spinner" class="spinner-border spinner-border-sm ml-2 mr-2" role="status" style="color: #6a737d; display: inline-block;">
<span class="sr-only">Please wait...</span>
</div>
</div>

<div style="vertical-align: middle; display: inline-block; width: 210px; font-size: 11px; color: grey;" class="">
<div><span id="node-red-status" style="font-weight: bold;"></span></div>
<div><span id="node-red-memory" style="font-weight: bold;"></span>&nbsp;<span id="node-red-cpu" style="font-weight: bold;"></span></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -151,7 +159,7 @@
<div class="card mb-4 pr-4">
<div class="card-body">
<div class="form-group">
<label for="projects">Projekte <a href="https://github.com/rdmtc/RedMatic/wiki/Backup" class="help-link" target="_blank"><i class="far fa-question-circle"></i></a></label>
<label for="projects">Projekte <a href="https://github.com/rdmtc/RedMatic/wiki/Projekte" class="help-link" target="_blank"><i class="far fa-question-circle"></i></a></label>
<select class="form-control" id="projects">
<option value="false">Nicht verwenden</option>
<option value="true">Aktiv</option>
Expand Down Expand Up @@ -286,14 +294,19 @@

</tbody>
</table>

<div id="pkg-spinner" class="text-center">
<div class="spinner-border text-center" role="status">
<span class="sr-only">Lade...</span>
</div>
</div>
</div>

<div class="tab-pane fade show" id="versions" role="tabpanel" aria-labelledby="versions-tab">

<div class="card mb-4">
<div class="card-body">
<button id="log" type="button" class="btn btn-sm btn-info"><i class="fa fa-link"></i> Log herunterladen</button>
<button id="upgrade-log" type="button" class="btn btn-sm btn-info"><i class="fa fa-link"></i> Upgrade Log herunterladen</button>
</div>
</div>

Expand Down

0 comments on commit b6ef68b

Please sign in to comment.