functioning scoreboard

f5devcentral · May 3, 2024 · 55d71de · 55d71de
1 parent 3be8715
commit 55d71de
Show file tree

Hide file tree

Showing 13 changed files with 372 additions and 62 deletions.
diff --git a/labapp/app/app.py b/labapp/app/app.py
@@ -5,11 +5,13 @@
 import re
 import json
 import requests
+import urllib
 from flask import Flask, render_template, jsonify, request, redirect, make_response, flash, url_for
 from flask_caching import Cache
 import markdown
 from ce import get_ce_info, get_ce_state
 from fetch import get_runner_session, cloudapp_fetch, cloudapp_req_headers, cloudapp_res_headers
+from score import score_get_results, score_build_table
 
 app = Flask(__name__)
 app.config['ce_info'] = None
@@ -117,7 +119,7 @@ def ce_state():
     data = get_ce_state(app.config['ce_info'])
     return data
 
-@app.route('/lb')
+@app.route('/loadbalancing')
 def lb():
     """lb page"""
     ns = get_eph_ns()
@@ -184,7 +186,7 @@ def netp():
         ns=ns
     )
 
-@app.route('/ref')
+@app.route('/reference')
 def ref():
     """reference page"""
     ns = get_eph_ns()
@@ -199,27 +201,36 @@ def ref():
 def score():
     """scoreboard page"""
     ns = get_eph_ns()
-    score_cookie = request.cookies.get('score', '')
+    score_cookie = request.cookies.get('score', '%7B%7D') 
+    print(score_cookie)
     try:
-        this_score = {json.loads(k): v for k, v in json.loads(score_cookie).items()}
+        decoded_cookie = urllib.parse.unquote(score_cookie)
+        enc_score = json.loads(decoded_cookie)
+        this_score = {urllib.parse.unquote(k): v for k, v in enc_score.items()}
     except json.JSONDecodeError:
         this_score = {}
-    return render_template('score.html',
-        title="MCN Practical: Scoreboard",
-        score=this_score,
-        ns=ns
-    )
-
-@app.route('/scoreboard')
-def scoreboard():
-    progress_cookie = request.cookies.get('progress', '{}')
     try:
-        # Decode the JSON string and handle URL decoding
-        completed_requests = {json.loads(k): v for k, v in json.loads(progress_cookie).items()}
-    except json.JSONDecodeError:
-        completed_requests = {}
-    return render_template('scoreboard.html', completed_requests=completed_requests)
-
+        p_score = score_get_results(this_score)
+        over_table = score_build_table(p_score, 'overview', 'Overview')
+        lb_table = score_build_table(p_score, 'lb', 'Load Balancing')
+        route_table = score_build_table(p_score, 'route', 'Routing')
+        manip_table = score_build_table(p_score, 'manip', 'Manipulation')
+        port_table = score_build_table(p_score, 'port', 'Portability')
+    except LabException as e:
+        print(f"Couldn't build score table: {e}")
+    response = make_response(render_template('score.html',
+            title="MCN Practical: Scoreboard",
+            over_table=over_table,
+            lb_table=lb_table,
+            route_table=route_table,
+            manip_table=manip_table,
+            port_table=port_table,
+            ns=ns
+        ))
+    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' 
+    response.headers['Pragma'] = 'no-cache'
+    response.headers['Expires'] = '0'
+    return response
 
 @app.route('/_test1')
 def ex_test():

diff --git a/labapp/app/markdown/lb.md b/labapp/app/markdown/lb.md
@@ -61,7 +61,7 @@ Host: eph-ns.mcn-lab.f5demos.com
 <div id="result1" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_lb1', 'result1');
+    testHttpRequest('requestBtn1', '/_lb1', 'result1');
 });
 </script>
 
@@ -152,7 +152,7 @@ Host: eph-ns.mcn-lab.f5demos.com
 <div id="result2" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_lb2', 'result2');
+    testHttpRequest('requestBtn2', '/_lb2', 'result2');
 });
 </script>
 

diff --git a/labapp/app/markdown/manipulation.md b/labapp/app/markdown/manipulation.md
@@ -50,7 +50,7 @@ Host: eph-ns.mcn-lab.f5demos.com
 <div id="result1" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_manip1', 'result1');
+    testHttpRequest('requestBtn1', '/_manip1', 'result1');
 });
 </script>
 
@@ -117,7 +117,7 @@ Host: eph-ns.mcn-lab.f5demos.com
 <div id="result2" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_manip2', 'result2');
+    testHttpRequest('requestBtn2', '/_manip2', 'result2');
 });
 </script>
 
@@ -166,7 +166,7 @@ Host: eph-ns.mcn-lab.f5demos.com
 <div id="result3" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn3').addEventListener('click', () => {
-    makeHttpRequest('requestBtn3', '/_manip3', 'result3');
+    testHttpRequest('requestBtn3', '/_manip3', 'result3');
 });
 </script>
 

diff --git a/labapp/app/markdown/overview.md b/labapp/app/markdown/overview.md
@@ -100,7 +100,7 @@ GET https://foo.mcn-lab.f5demos.com/ HTTP/1.1
 <div id="result1" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_test1', 'result1');
+    testHttpRequest('requestBtn1', '/_test1', 'result1');
 });
 </script>
 
@@ -125,7 +125,7 @@ GET https://bar.mcn-lab.f5demos.com/ HTTP/1.1
 <div id="result2" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_test2', 'result2');
+    testHttpRequest('requestBtn2', '/_test2', 'result2');
 });
 </script>
 

diff --git a/labapp/app/markdown/portability.md b/labapp/app/markdown/portability.md
@@ -46,7 +46,7 @@ Host: eph-ns.mcn-lab.f5demos.com
 <div id="result1" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_port1', 'result1');
+    testHttpRequest('requestBtn1', '/_port1', 'result1');
 });
 </script>
 
@@ -108,7 +108,7 @@ Host: friend-eph-ns.mcn-lab.f5demos.com
 </div>
 <script>
 document.getElementById('requestBtn2').addEventListener('click', () => {
-    makePostRequest('requestBtn2', '/_port2', 'result2', 'inputText2');
+    testPostRequest('requestBtn2', '/_port2', 'result2', 'inputText2');
 });
 </script>
 

diff --git a/labapp/app/markdown/route.md b/labapp/app/markdown/route.md
@@ -63,7 +63,7 @@ Host: eph-ns.mcn-lab.f5demos.com
 <div id="result1" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn1').addEventListener('click', () => {
-    makeHttpRequest('requestBtn1', '/_route1', 'result1');
+    testHttpRequest('requestBtn1', '/_route1', 'result1');
 });
 </script>
 
@@ -117,7 +117,7 @@ X-MCN-lab: azure
 <div id="result2" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_route2', 'result2');
+    testHttpRequest('requestBtn2', '/_route2', 'result2');
 });
 </script>
 

diff --git a/labapp/app/score.py b/labapp/app/score.py
@@ -0,0 +1,127 @@
+"""
+Build Scoreboards
+"""
+import copy
+
+score_schema = {
+      "/_test1": {
+        "name": "Foo Test Example",
+        "key": "overview",
+        "href": "/overview",
+        "result": "none",
+    },
+    "/_test2": {
+        "name": "Bar Test Example",
+        "key": "overview",
+        "href": "/overview",
+        "result": "none"
+    },
+    "/_lb1": {
+        "name": "AWS Cloud App",
+        "key": "lb",
+        "href": "/loadbalancing",
+        "result": "none"
+    },
+    "/_lb2": {
+        "name": "Azure Cloud App",
+        "key": "lb",
+        "href": "/loadbalancing",
+        "result": "none"
+    },
+    "/_route1": {
+        "name": "Path Routing",
+        "key": "route",
+        "href": "/route",
+        "result": "none"
+    },
+    "/_route2": {
+        "name": "Header Routing",
+        "key": "route",
+        "href": "/route",
+        "result": "none"
+    },
+    "/_manip1:": {
+        "name": "Path Rewrite",
+        "key": "manip",
+        "href": "/manipulation",
+        "result": "none"
+    },
+    "/_manip2": {
+        "name": "Request Headers",
+        "key": "manip",
+        "href": "/manipulation",
+        "result": "none"
+    },
+    "/_manip3": {
+        "name": "Response Headers",
+        "key": "manip",
+        "href": "/manipulation",
+        "result": "none"
+    },
+    "/_port1": {
+        "name": "Advertise Policy",
+        "key": "port",
+        "href": "/portability",
+        "result": "none"
+    },
+    "/_port2": {
+        "name": "Find a Friend",
+        "key": "port",
+        "href": "/portability",
+        "result": "none"
+    }
+}
+
+result_map = {
+    "fail": '<i class="bi bi-x-circle-fill score-fail"></i>',
+    "pass": '<i class="bi bi-check-circle-fill score-pass"></i>',
+    "none": '<i class="bi bi-circle-fill score-unknown"></i>'
+}
+
+def score_get_results(cookie_results):
+    """
+    build score result from cookie
+    """
+    this_score = copy.deepcopy(score_schema)
+    for test_path, result in cookie_results.items():
+        if test_path in score_schema:
+            this_score[test_path]['result'] = result
+    print(this_score)
+    print(score_schema)
+    return this_score
+
+def score_sort(scores, key):
+    """sort score by key"""
+    scores = {k: v for k, v in scores.items() if v['key'] == key}
+    return scores
+
+def score_build_table(scores, section, name):
+    """build table section"""
+    section_scores = score_sort(scores, section)
+    rows_html = ""
+    for key, score in section_scores.items():
+        print(score['result'])
+        r_icon = result_map[score['result']]
+        section_html = f"""
+        <tr>
+        <td>{score['name']}</td>
+        <td>{r_icon}</td>
+        </tr>
+        """
+        rows_html += section_html
+    html = f"""
+    <table class="score-table"">
+        <thead>
+          <tr>
+            <th><strong>{name}</strong></th>
+          </tr>
+        </thead>
+        <tbody>
+            {rows_html}
+        </tbody>
+      </table>
+    """
+    return html
+
+
+
diff --git a/labapp/app/static/custom.css b/labapp/app/static/custom.css
@@ -43,6 +43,10 @@ main {
   padding: 50px;
 }
 
+.main-body {
+  padding: 50px;
+}
+
 .err {
   display: flex;
   justify-content: center; /* Centers horizontally */

diff --git a/labapp/app/static/helpers.js b/labapp/app/static/helpers.js
@@ -66,10 +66,23 @@ async function testHttpRequest(buttonId, requestUrl, resultDivId) {
         button.disabled = false;
         resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
-}
+  }
 
-function updateScoreCookie(requestUrl, status) {
-    let progress = JSON.parse(getCookie('score') || '{}');
+  function updateScoreCookie(requestUrl, status) {
+    // Get the current cookie, decode it, and parse it as JSON
+    const currentCookie = decodeURIComponent(getScoreCookie('score') || '%7B%7D'); // Ensure the default value is an encoded empty JSON object
+    let progress = JSON.parse(currentCookie);
     progress[encodeURIComponent(requestUrl)] = status;
-    document.cookie = `progress=${encodeURIComponent(JSON.stringify(progress))}; path=/; expires=${new Date(new Date().getTime() + 86400e3).toUTCString()};`;
+    document.cookie = `score=${encodeURIComponent(JSON.stringify(progress))}; path=/; expires=${new Date(new Date().getTime() + 86400e3).toUTCString()};`;
+  }
+
+  function getScoreCookie(name) {
+    let cookieArray = document.cookie.split(';');
+    for(let i = 0; i < cookieArray.length; i++) {
+      let cookiePair = cookieArray[i].split('=');
+      if(name == cookiePair[0].trim()) {
+        return cookiePair[1];
+      }
+    }
+    return null;
   }