warble-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From humbed...@apache.org
Subject [incubator-warble-server] 01/02: New stab at the node list
Date Wed, 27 Jun 2018 18:15:13 GMT
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 <humbedooh@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


Mime
View raw message