Add MAC to pills

Retrieve and cache MACs one by one as users select clients.

2 files changed, 30 insertions, 1 deletions

diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 4605e5d..ffddc58 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -1,16 +1,33 @@
 const Endpoint = '/scopes/status';
+const macs = new Map();
 const Interval = 1000;
 let updateTimeoutId = null;
 
+async function show_client_mac(pill_id) {
+    const pill = $('#' +pill_id);
+    const ip = pill.html().split('<br>')[1]
+
+    if (!macs.get(ip)) {
+        const resp = await fetch('/client/mac?ip=' + ip);
+        const resp_mac = await resp.json();
+        macs.set(ip, resp_mac)
+    }
+
+    const mac = macs.get(ip)
+    pill.append('<br>' + mac);
+}
+
 function showSelectedClient(client_checkbox) {
     const container = $('#selected-clients');
     const pill_id = 'pill-' + client_checkbox.name.replaceAll(/[.]|[ ]/g, '_');
 
     if (client_checkbox.checked) {
-        if (!($('#' + pill_id).length))
+        if (!($('#' + pill_id).length)) {
             $(container).append('<div class="badge badge-pill og-pill badge-light" ' +
                                 'id="'+ pill_id + '">' + client_checkbox.name +
                                 '<br>' + client_checkbox.value + '</div>');
+            show_client_mac(pill_id);
+        }
         return;
     }
 
diff --git a/ogcp/views.py b/ogcp/views.py
index 7f54bcf..aae889f 100644
--- a/ogcp/views.py
+++ b/ogcp/views.py
@@ -284,6 +284,18 @@ def scopes_status():
     scopes, _clients = get_scopes()
     return jsonify(scopes)
 
+
+@app.route('/client/mac', methods=['GET'])
+@login_required
+def get_client_mac():
+    ip = parse_elements(request.args.to_dict())
+    payload = {'client': list(ip)}
+    resp = g.server.get('/client/info', payload)
+    client_info = resp.json()
+    mac = client_info.get('mac')
+    return jsonify(mac)
+
+
 @app.route('/scopes/')
 @login_required
 def scopes():