You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@warble.apache.org by hu...@apache.org on 2018/06/27 18:15:12 UTC
[incubator-warble-server] branch master updated (1a44b4c -> 79ca3a3)
This is an automated email from the ASF dual-hosted git repository.
humbedooh pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-warble-server.git.
from 1a44b4c regen JS
new 101fd1c New stab at the node list
new 79ca3a3 regen JS
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
ui/css/warble.min.css | 45 +++++++++--
ui/js/coffee/warble_clientlist.coffee | 97 +++++++++++------------
ui/js/warble.v1.js | 141 ++++++++++++++++------------------
3 files changed, 152 insertions(+), 131 deletions(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@warble.apache.org
For additional commands, e-mail: commits-help@warble.apache.org
[incubator-warble-server] 01/02: New stab at the node list
Posted by hu...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
humbedooh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-warble-server.git
commit 101fd1c1f5e351f6e51192e502e6c22a8988eded
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Wed Jun 27 13:14:57 2018 -0500
New stab at the node list
This also makes the node hostnames editable.
---
ui/css/warble.min.css | 45 +++++++++++++---
ui/js/coffee/warble_clientlist.coffee | 97 ++++++++++++++++++-----------------
2 files changed, 87 insertions(+), 55 deletions(-)
diff --git a/ui/css/warble.min.css b/ui/css/warble.min.css
index 49aa83b..1f27f78 100644
--- a/ui/css/warble.min.css
+++ b/ui/css/warble.min.css
@@ -3085,15 +3085,44 @@ body.error .logo h1 {
.clientcard {
float: left;
- width: 450px;
- height: 160px;
- border: 4px solid #666;
- border-radius: 6px;
- padding: 4px;
- background: #334249;
+ width: 90%;
+ border: 2px solid #666;
+ border-radius: 3px;
+ padding: 6px;
+ background: #333;
color: #DDD;
display: inline-block;
- margin: 10px;
+ margin: 5px;
+}
+
+.clientcard.green {
+ background: linear-gradient(to bottom, #9CB94E 0, #90B039 100%);
+ color: #FFF;
+}
+
+.clientcard.orange {
+ background: linear-gradient(to bottom, #B95929 0, #AF420B 100%);
+ color: #FFF;
+}
+
+.clientcard.grey {
+ background: linear-gradient(to bottom, #897c6e 0, #6b6259 100%);
+ color: #FFF;
+}
+
+
+
+
+
+
+.clientcard .banner {
+ float: left;
+ width: calc(100% + 8px);
+ margin: -4px;
+ font-size: 1.8rem;
+ border-bottom: 1px solid #333;
+ margin-bottom: 5px;
+ background: rgba(0,0,0,0.1);
}
.clientcard kbd {
@@ -3113,7 +3142,7 @@ body.error .logo h1 {
}
.clientcard:hover {
- background: #444;
+ /*background: rgba(0,0,0,0.2);*/
}
.clientcardline {
diff --git a/ui/js/coffee/warble_clientlist.coffee b/ui/js/coffee/warble_clientlist.coffee
index 3f65eed..8075f12 100644
--- a/ui/js/coffee/warble_clientlist.coffee
+++ b/ui/js/coffee/warble_clientlist.coffee
@@ -50,27 +50,41 @@ deleteNode = (id, stats) ->
if confirm('Are you sure you wish to delete this node?')
xdelete('node/modify', {id: id}, {}, location.reload())
-nodeLocation = (id, obj) ->
- if not document.getElementById("tnodeloc_#{id}")
+
+nodeVal = (id, obj, t) ->
+ if not document.getElementById("node_#{t}_tmp_#{id}")
loc = obj.innerText
obj.innerHTML = ""
- ip = new HTML('input', {style: { color: '#333', width: '320px', height: '24px', padding: '0px'}, data: loc, id: "tnodeloc_#{id}", type: 'text', onkeydown: "saveNodeLocation(#{id}, this, event);", onblur: "savedNodeLocation({}, {id: #{id}, location: this.getAttribute('data')});"})
+ ip = new HTML('input', {style: { color: '#333', width: '320px', height: '24px', padding: '0px'}, data: loc, id: "node_#{t}_tmp_#{id}", type: 'text', onkeydown: "saveNodeValue(#{id}, this, event, '#{t}');", onblur: "savedNodeValue({}, {id: #{id}, type: '#{t}', #{t}: this.getAttribute('data')});"})
ip.value = loc
app(obj, ip)
ip.focus()
-
-saveNodeLocation = (id, obj, e) ->
+
+saveNodeValue = (id, obj, e, t) ->
if e.key == 'Enter'
- nloc = obj.value
- post('node/modify', { id: id, location: nloc}, {id: id, location: nloc}, savedNodeLocation)
+ nval = obj.value
+ js = {
+ id: id
+ }
+ jsx = {
+ id: id,
+ type: t
+ }
+ js[t] = nval
+ jsx[t] = nval
+ post('node/modify', js, jsx, savedNodeValue)
else if e.key == 'Escape'
- savedNodeLocation({}, {id: id, location: obj.getAttribute('data')})
+ js = {id: id}
+ jsx = {id: id, type: t}
+ js[t] = obj.getAttribute('data')
+ jsx[t] = obj.getAttribute('data')
+ savedNodeValue(js, jsx)
-savedNodeLocation = (json, state) ->
- obj = document.getElementById("nodeloc_#{state.id}")
+savedNodeValue = (json, state) ->
+ obj = document.getElementById("node_#{state.type}_#{state.id}")
obj.innerHTML = ""
- app(obj, txt(state.location))
+ app(obj, txt(state[state.type]))
clientlist = (json, state) ->
@@ -85,56 +99,54 @@ clientlist = (json, state) ->
card = new HTML('div', {class: 'clientcard'} )
# node verified?
- d = new HTML('div', {height: '36px', position: 'relative', style: {marginBottom: '12px'}})
+ banner = new HTML('div', {class: 'banner'})
+ rline = new HTML('div', {style: { float: 'right', width: '300px', textAlign: 'center'}})
+ lline = new HTML('div', {style: { float: 'left', width: '500px', textAlign: 'center'}})
+
+ hn = new HTML('span', {title: 'Click to edit', id: "node_hostname_#{source.id}", onclick: "nodeVal(#{source.id}, this, 'hostname');"}, txt(source.hostname||"(unknown)"))
- line = new HTML('div', {style: { position: 'relative', lineHeight: '30px', height: '30px', float: 'left', padding: '2px', display: 'inline-block', textAlign: 'center', margin: '-5.25px', width: '225px', borderTopLeftRadius: '6px', background: '#4c8946', marginBottom: '4px'}})
+ lline.inject(hn)
vrf = []
if not source.verified
- line.style.background = '#bc9621'
- card.style.borderColor = '#bc9621'
- line.style.width = '445px'
+ card.setAttribute('class', 'clientcard orange')
vrf = [
'Unverified Node',
new HTML('button', {class: 'btn btn-sm btn-primary', onclick: "modifyNode(#{source.id}, {verified: true, enabled: true});"}, "Verify + Enable")
]
- line.inject(vrf)
+ rline.inject(vrf)
# delete btn
btn = new HTML('button', {title: 'Delete node', class: 'btn btn-square btn-danger', style: {position: 'relative', float: 'right', display: 'inline-block'}, onclick: "deleteNode(#{source.id});"},
new HTML('i', {class: 'fa fa-trash'}, '')
)
- line.inject(btn)
- d.inject(line)
+ rline.inject(btn)
# node enabled?
if source.verified
- line = new HTML('div', {style: {position: 'relative', lineHeight: '30px', height: '30px', float: 'right', padding: '2px',display: 'inline-block', textAlign: 'center', margin: '-5.25px', width: '445px', borderTopRightRadius: '6px', background: '#4c8946', marginBottom: '4px'}})
vrf = []
- card.style.borderColor = '#4c8946'
+ card.setAttribute('class', 'clientcard green')
if source.enabled
vrf = [
'Active',
new HTML('button', {class: 'btn btn-sm btn-warning', onclick: "modifyNode(#{source.id}, {enabled: false});"}, "Disable")
]
else
- line.style.background = '#777'
- card.style.borderColor = '#777'
+ card.setAttribute('class', 'clientcard grey')
vrf = [
'Disabled',
new HTML('button', {class: 'btn btn-sm btn-primary', onclick: "modifyNode(#{source.id}, {enabled: true});"}, "Re-enable")
]
- line.inject(vrf)
- d.inject(line)
+ rline.inject(vrf)
# delete btn
btn = new HTML('button', {title: 'Delete node', class: 'btn btn-square btn-danger', style: {position: 'relative', float: 'right', display: 'inline-block'}, onclick: "deleteNode(#{source.id});"},
new HTML('i', {class: 'fa fa-trash'}, '')
)
- line.inject(btn)
-
+ rline.inject(btn)
+ banner.inject(lline)
+ banner.inject(rline)
-
- card.inject(d)
+ card.inject(banner)
vlist.inject(card)
d = new HTML('p')
@@ -155,15 +167,7 @@ clientlist = (json, state) ->
txt(source.ip)
])
d.inject(line)
-
-
- # node hostname
- line = new HTML('div', {class: 'clientcardline'})
- line.inject( [
- new HTML('b', {}, "Hostname: "),
- txt(source.hostname)
- ])
- d.inject(line)
+
# node fingerprint
line = new HTML('div', {class: 'clientcardline'})
@@ -177,20 +181,19 @@ clientlist = (json, state) ->
line = new HTML('div', {class: 'clientcardline'})
line.inject( [
new HTML('b', {}, "Location: "),
- new HTML('span', {id: "nodeloc_#{source.id}", onclick: "nodeLocation(#{source.id}, this, event);"}, txt(source.location||"(unknown)"))
+ new HTML('span', {title: 'Click to edit', id: "node_location_#{source.id}", onclick: "nodeVal(#{source.id}, this, 'location');"}, txt(source.location||"(unknown)"))
])
d.inject(line)
-
-
+ # node last ping
+ line = new HTML('div', {class: 'clientcardline'})
+ lp = new Date(source.lastping*1000.0)
+ line.inject( [
+ new HTML('b', {}, "Last Active: "),
+ txt(moment(lp).fromNow() + " (" + lp.ISOBare() + ")")
+ ])
d.inject(line)
- line.inject(new HTML('br'))
- line.inject(new HTML('br'))
-
-
-
-
#app(slist, tbl)
state.widget.inject(slist, true)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@warble.apache.org
For additional commands, e-mail: commits-help@warble.apache.org
[incubator-warble-server] 02/02: regen JS
Posted by hu...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
humbedooh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-warble-server.git
commit 79ca3a302132d55eed36d33e06b157a42122cd10
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Wed Jun 27 13:15:04 2018 -0500
regen JS
---
ui/js/warble.v1.js | 141 ++++++++++++++++++++++++-----------------------------
1 file changed, 65 insertions(+), 76 deletions(-)
diff --git a/ui/js/warble.v1.js b/ui/js/warble.v1.js
index a382b23..4058c03 100644
--- a/ui/js/warble.v1.js
+++ b/ui/js/warble.v1.js
@@ -1,5 +1,5 @@
// Generated by CoffeeScript 1.9.3
-var API, APIVERSION, Chart, HTML, Row, WarbleLogin, WarbleLoginCallback, Widget, aSourceTypes, addSourceType, addSources, addorguser, addsources, affiliate, affiliation, affiliationWizard, altemail, app, badModal, bio, chartOnclick, chartToSvg, chartWrapperButtons, charts_donutchart, charts_gaugechart, charts_linechart, charts_linechart_stacked, charts_linked, charts_radarchart, ciexplorer, clientTypes, clientlist, cog, comShow, comstat, copyCSS, currentSources, dataTable, datepicker, da [...]
+var API, APIVERSION, Chart, HTML, Row, WarbleLogin, WarbleLoginCallback, Widget, aSourceTypes, addSourceType, addSources, addorguser, addsources, affiliate, affiliation, affiliationWizard, altemail, app, badModal, bio, chartOnclick, chartToSvg, chartWrapperButtons, charts_donutchart, charts_gaugechart, charts_linechart, charts_linechart_stacked, charts_linked, charts_radarchart, ciexplorer, clientTypes, clientlist, cog, comShow, comstat, copyCSS, currentSources, dataTable, datepicker, da [...]
indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
signup = function(form) {
@@ -4636,9 +4636,9 @@ deleteNode = function(id, stats) {
}
};
-nodeLocation = function(id, obj) {
+nodeVal = function(id, obj, t) {
var ip, loc;
- if (!document.getElementById("tnodeloc_" + id)) {
+ if (!document.getElementById("node_" + t + "_tmp_" + id)) {
loc = obj.innerText;
obj.innerHTML = "";
ip = new HTML('input', {
@@ -4649,10 +4649,10 @@ nodeLocation = function(id, obj) {
padding: '0px'
},
data: loc,
- id: "tnodeloc_" + id,
+ id: "node_" + t + "_tmp_" + id,
type: 'text',
- onkeydown: "saveNodeLocation(" + id + ", this, event);",
- onblur: "savedNodeLocation({}, {id: " + id + ", location: this.getAttribute('data')});"
+ onkeydown: "saveNodeValue(" + id + ", this, event, '" + t + "');",
+ onblur: "savedNodeValue({}, {id: " + id + ", type: '" + t + "', " + t + ": this.getAttribute('data')});"
});
ip.value = loc;
app(obj, ip);
@@ -4660,34 +4660,43 @@ nodeLocation = function(id, obj) {
}
};
-saveNodeLocation = function(id, obj, e) {
- var nloc;
+saveNodeValue = function(id, obj, e, t) {
+ var js, jsx, nval;
if (e.key === 'Enter') {
- nloc = obj.value;
- return post('node/modify', {
- id: id,
- location: nloc
- }, {
+ nval = obj.value;
+ js = {
+ id: id
+ };
+ jsx = {
id: id,
- location: nloc
- }, savedNodeLocation);
+ type: t
+ };
+ js[t] = nval;
+ jsx[t] = nval;
+ return post('node/modify', js, jsx, savedNodeValue);
} else if (e.key === 'Escape') {
- return savedNodeLocation({}, {
+ js = {
+ id: id
+ };
+ jsx = {
id: id,
- location: obj.getAttribute('data')
- });
+ type: t
+ };
+ js[t] = obj.getAttribute('data');
+ jsx[t] = obj.getAttribute('data');
+ return savedNodeValue(js, jsx);
}
};
-savedNodeLocation = function(json, state) {
+savedNodeValue = function(json, state) {
var obj;
- obj = document.getElementById("nodeloc_" + state.id);
+ obj = document.getElementById("node_" + state.type + "_" + state.id);
obj.innerHTML = "";
- return app(obj, txt(state.location));
+ return app(obj, txt(state[state.type]));
};
clientlist = function(json, state) {
- var btn, card, d, len, line, q, retval, slist, source, sources, vlist, vrf;
+ var banner, btn, card, d, hn, len, line, lline, lp, q, retval, rline, slist, source, sources, vlist, vrf;
slist = mk('div');
vlist = new HTML('div');
if (json.nodes) {
@@ -4703,41 +4712,39 @@ clientlist = function(json, state) {
card = new HTML('div', {
"class": 'clientcard'
});
- d = new HTML('div', {
- height: '36px',
- position: 'relative',
+ banner = new HTML('div', {
+ "class": 'banner'
+ });
+ rline = new HTML('div', {
style: {
- marginBottom: '12px'
+ float: 'right',
+ width: '300px',
+ textAlign: 'center'
}
});
- line = new HTML('div', {
+ lline = new HTML('div', {
style: {
- position: 'relative',
- lineHeight: '30px',
- height: '30px',
float: 'left',
- padding: '2px',
- display: 'inline-block',
- textAlign: 'center',
- margin: '-5.25px',
- width: '225px',
- borderTopLeftRadius: '6px',
- background: '#4c8946',
- marginBottom: '4px'
+ width: '500px',
+ textAlign: 'center'
}
});
+ hn = new HTML('span', {
+ title: 'Click to edit',
+ id: "node_hostname_" + source.id,
+ onclick: "nodeVal(" + source.id + ", this, 'hostname');"
+ }, txt(source.hostname || "(unknown)"));
+ lline.inject(hn);
vrf = [];
if (!source.verified) {
- line.style.background = '#bc9621';
- card.style.borderColor = '#bc9621';
- line.style.width = '445px';
+ card.setAttribute('class', 'clientcard orange');
vrf = [
'Unverified Node', new HTML('button', {
"class": 'btn btn-sm btn-primary',
onclick: "modifyNode(" + source.id + ", {verified: true, enabled: true});"
}, "Verify + Enable")
];
- line.inject(vrf);
+ rline.inject(vrf);
btn = new HTML('button', {
title: 'Delete node',
"class": 'btn btn-square btn-danger',
@@ -4750,28 +4757,11 @@ clientlist = function(json, state) {
}, new HTML('i', {
"class": 'fa fa-trash'
}, ''));
- line.inject(btn);
- d.inject(line);
+ rline.inject(btn);
}
if (source.verified) {
- line = new HTML('div', {
- style: {
- position: 'relative',
- lineHeight: '30px',
- height: '30px',
- float: 'right',
- padding: '2px',
- display: 'inline-block',
- textAlign: 'center',
- margin: '-5.25px',
- width: '445px',
- borderTopRightRadius: '6px',
- background: '#4c8946',
- marginBottom: '4px'
- }
- });
vrf = [];
- card.style.borderColor = '#4c8946';
+ card.setAttribute('class', 'clientcard green');
if (source.enabled) {
vrf = [
'Active', new HTML('button', {
@@ -4780,8 +4770,7 @@ clientlist = function(json, state) {
}, "Disable")
];
} else {
- line.style.background = '#777';
- card.style.borderColor = '#777';
+ card.setAttribute('class', 'clientcard grey');
vrf = [
'Disabled', new HTML('button', {
"class": 'btn btn-sm btn-primary',
@@ -4789,8 +4778,7 @@ clientlist = function(json, state) {
}, "Re-enable")
];
}
- line.inject(vrf);
- d.inject(line);
+ rline.inject(vrf);
btn = new HTML('button', {
title: 'Delete node',
"class": 'btn btn-square btn-danger',
@@ -4803,9 +4791,11 @@ clientlist = function(json, state) {
}, new HTML('i', {
"class": 'fa fa-trash'
}, ''));
- line.inject(btn);
+ rline.inject(btn);
}
- card.inject(d);
+ banner.inject(lline);
+ banner.inject(rline);
+ card.inject(banner);
vlist.inject(card);
d = new HTML('p');
card.inject(d);
@@ -4822,11 +4812,6 @@ clientlist = function(json, state) {
line = new HTML('div', {
"class": 'clientcardline'
});
- line.inject([new HTML('b', {}, "Hostname: "), txt(source.hostname)]);
- d.inject(line);
- line = new HTML('div', {
- "class": 'clientcardline'
- });
line.inject([new HTML('b', {}, "Fingerprint: "), new HTML('kbd', {}, source.fingerprint)]);
d.inject(line);
line = new HTML('div', {
@@ -4834,14 +4819,18 @@ clientlist = function(json, state) {
});
line.inject([
new HTML('b', {}, "Location: "), new HTML('span', {
- id: "nodeloc_" + source.id,
- onclick: "nodeLocation(" + source.id + ", this, event);"
+ title: 'Click to edit',
+ id: "node_location_" + source.id,
+ onclick: "nodeVal(" + source.id + ", this, 'location');"
}, txt(source.location || "(unknown)"))
]);
d.inject(line);
+ line = new HTML('div', {
+ "class": 'clientcardline'
+ });
+ lp = new Date(source.lastping * 1000.0);
+ line.inject([new HTML('b', {}, "Last Active: "), txt(moment(lp).fromNow() + " (" + lp.ISOBare() + ")")]);
d.inject(line);
- line.inject(new HTML('br'));
- line.inject(new HTML('br'));
}
}
state.widget.inject(slist, true);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@warble.apache.org
For additional commands, e-mail: commits-help@warble.apache.org