Dev

labapp/app/app.py

@@ -56,6 +56,7 @@ def return_err(err):
 
 @app.after_request
 def cache_control(response):
+    """cache control"""
     if request.path.startswith("/static/") and request.path.endswith(".png"):
         response.headers['Cache-Control'] = 'public, max-age=3600'
     return response
@@ -87,16 +88,16 @@ def setup():
         if action == 'save':
             this_eph_ns = request.form['eph_ns'].strip()
             if not validate_eph_ns(this_eph_ns):
-                flash("Invalid ephemeral NS.", "danger")
+                flash("Invalid ephemeral namespace.", "danger")
                 return redirect(url_for('setup'))
             response = make_response(redirect('/setup'))
             response.set_cookie('eph_ns', this_eph_ns, max_age=60*60*24)
-            flash('Ephemeral NS successfully set.', "success")
+            flash('Ephemeral namespace successfully set.', "success")
             return response
         if action == 'clear':
             response = make_response(redirect('/setup'))
             response.set_cookie('eph_ns', '', expires=0)
-            flash("Ephemeral NS cleared.", "info")
+            flash("Ephemeral namespace cleared.", "info")
             return response
     html = render_md("markdown/setup.md")
     return render_template('setup.html',
@@ -358,10 +359,10 @@ def manip3():
         return jsonify(status='success', data=data)
     except (LabException, requests.RequestException, ValueError) as e:
         return jsonify(status='fail', error=str(e))
-    
+
 @app.route('/_port1')
 def port1():
-    """Azure LB test"""
+    """Friend test"""
     try:
         s = requests.Session()
         s.headers.update({"User-Agent": "MCN-Lab-Runner/1.0"})
@@ -374,6 +375,21 @@ def port1():
     except (LabException, requests.RequestException, ValueError) as e:
         return jsonify(status='fail', error=str(e))
 
+@app.route('/_port2', methods=['POST'])
+def port2():
+    """Friend test"""
+    try:
+        s = requests.Session()
+        s.headers.update({"User-Agent": "MCN-Lab-Runner/1.0"})
+        data = request.get_json()
+        print(data)
+        eph_ns = data['userInput']
+        url = f"https://{eph_ns}.{app.config['base_url']}/"
+        data = cloudapp_fetch(s, url, 7, 'info', {"method": "GET", "path": "/"})
+        return jsonify(status='success', data=data)
+    except (LabException, requests.RequestException, ValueError) as e:
+        return jsonify(status='fail', error=str(e))
+
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=5001, debug=False)

labapp/app/markdown/lb.md

@@ -1,5 +1,5 @@
 <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/lb.png" width="300px" height="auto" alt="intro">
+    <img src="/static/load-balancing.png" width="300px" height="auto" alt="intro">
 </div>
 
 # **Load Balancing**
@@ -32,6 +32,10 @@ Build an origin pool and load balancer based on the exercise requirements.
     The cloud app is TLS only. 
   </li>
   <li class="list-group-item">
+  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
+    The load balancer domain is <strong><i>your-ephemeral-namespace</i>.mcn-lab.f5demos.com</strong>. 
+  </li>
+  <li class="list-group-item">
   <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
     Use the wildcard cert provided in the shared NS, <strong>mcn-lab-wildcard</strong>, to enable TLS on the LB. 
   </li>
@@ -146,5 +150,11 @@ document.getElementById('requestBtn2').addEventListener('click', () => {
 
 <div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-After completing both exercises, move on to the <strong><a href="/route" class="alert-link">routing</a></strong> exercise.
+<nav aria-label="labapp nav">
+    <ul class="pagination justify-content-end">
+      <li class="page-item">
+        <a class="page-link" href="/route">Routing <i class="bi bi-arrow-right-circle-fill"></i></a>
+      </li>
+    </ul>
+  </nav>
 

labapp/app/markdown/manipulation.md

@@ -6,12 +6,11 @@
 
 <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-Since web traffic has been traversing proxies, engineers have needed to alter HTTP content for increased observability ([XFF](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For)), performance ([cache-control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)), or other reasons ([JWT](https://en.wikipedia.org/wiki/JSON_Web_Token)). 
+Since web traffic has been traversing proxies, engineers have needed to alter HTTP content for increased observability (<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For">XFF</a>), performance (<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control">Cache-Control</a>), or core functionality (<a href="https://en.wikipedia.org/wiki/JSON_Web_Token">JWT</a>).
 "Proxy Pass" functionality has been part of web servers since the early Apache days.
 Adding, removing, and altering Headers are tablestakes for ADCs, CDNs, and software-based load balancers.
 F5 XC App Connect enables this functionality granularly on routes or broadly on the load balancer.
 
-
 <div style="height:25px"></div>
 
 ### **Exercise 1: Path Rewrite**
@@ -55,7 +54,7 @@ document.getElementById('requestBtn1').addEventListener('click', () => {
 });
 </script>
 
-Since questions on this functionality are often asked on <strong><a href="https://community.f5.com/" target="_blank">F5 DevCentral</a></strong>, a hint might be warranted. 
+Questions on this functionality are often asked on <strong><a href="https://community.f5.com/" target="_blank">F5 DevCentral</a></strong>. Here's a hint. 
 
 <div id="hints">
 <p>
@@ -86,11 +85,11 @@ Use the <strong><a href="https://docs.cloud.f5.com/docs/how-to/advanced-security
 <ul class="list-group">
   <li class="list-group-item">
   <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Insert a request header named <strong>X-MCN-src-site</strong> to identifies the UDF CE to the origin. <u>Do not use a static value</u>. 
+  Insert a request header named <strong>X-MCN-src-site</strong> to identify the UDF CE to the origin. <u>Do not use a static value</u>. 
   </li>
   <li class="list-group-item">
   <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
-  Insert a request header named <strong>X-MCN-namespace</strong> to identifies the ephemeral namespace to the origin. <u>Do not use a static value</u>. 
+  Insert a request header named <strong>X-MCN-namespace</strong> to identify the ephemeral namespace to the origin. <u>Do not use a static value</u>. 
   </li>
 </ul>
 
@@ -139,9 +138,9 @@ document.getElementById('requestBtn2').addEventListener('click', () => {
 
 #### **Test Criteria**
 
-<div style="height:25px"></div>
-
-<strong><u>This test will evaluate response headers.</u></strong>
+<div class="alert alert-secondary" role="alert">
+  This test evaluates response headers.
+</div>
 
 ```http
 GET https://eph-ns.mcn-lab.f5demos.com/aws HTTP/1.1
@@ -174,5 +173,11 @@ document.getElementById('requestBtn3').addEventListener('click', () => {
 
 <div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-Finish off App Connect with an exercise on load balancer <strong><a href="/portability" class="alert-link">portability</a></strong>.
+<nav aria-label="labapp nav">
+    <ul class="pagination justify-content-end">
+      <li class="page-item">
+        <a class="page-link" href="/portability">Portability <i class="bi bi-arrow-right-circle-fill"></i></a>
+      </li>
+    </ul>
+  </nav>
 

labapp/app/markdown/overview.md

@@ -6,7 +6,7 @@
 
 <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-The lab environment, the application endpoints, and how you interact with the load balancer have been simplified in an effort to focus on concepts.
+The lab environment, the service endpoints, and how you interact with the load balancer have been simplified in an effort to focus on concepts.
 Understanding the environment, it's topology, and the rudimentary functionality of the <strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp" target="_blank">cloud app</a></strong> will help in completing the exercises.
 
 <div style="height:25px"></div>
@@ -15,19 +15,17 @@ Understanding the environment, it's topology, and the rudimentary functionality
 
 The lab environment contains three distributed sites meshed using the F5 Distributed Cloud Global Network.
 
-<div style="height:25px"></div>
-
 <ul class="list-group">
   <li class="list-group-item">
-  <img src="/static/mcnp-aws.png" width="auto" height="30px"> &nbsp;&nbsp;
+  <img src="/static/aws.png" width="40px" height="auto" class="rounded"> &nbsp;&nbsp;&nbsp;
     <strong>student-awsnet</strong> in Amazon Web Services
   </li>
   <li class="list-group-item">
-  <img src="/static/mcnp-azure.png" width="auto" height="30px"> &nbsp;&nbsp;&nbsp;
+  <img src="/static/azure.png" width="40px" height="auto" class="rounded"> &nbsp;&nbsp;&nbsp;
   <strong>student-azurenet</strong> in Microsoft Azure
   </li>
   <li class="list-group-item">
-  <img src="/static/mcnp-udf.png" width="auto" height="30px"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  <img src="/static/mcnp-udf.png" width="40px" height="auto"> &nbsp;&nbsp;&nbsp;
   <strong>Lab CE</strong> in UDF 
   </li>
 </ul>
@@ -40,7 +38,7 @@ The lab environment contains three distributed sites meshed using the F5 Distrib
 
 An instance of the <strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp" target="_blank">cloud app</a></strong> is hosted in each remote cloud environment.
 The cloud app is a simple application that echoes back an HTTP request.
-While working through the lab, unless otherwise noted, the test results are displaying the headers and info **from the request received by the app**.
+While working through the lab, unless otherwise noted, test results display headers and info **from the request received by the app**.
 
 For testing, you can access an endpoint of each cloud app from your browser.
 
@@ -52,21 +50,37 @@ For testing, you can access an endpoint of each cloud app from your browser.
 <img src="/static/azure.png" height="100px" width="auto"  class="rounded"/>
 </a></p>
 
-
-
 <div style="height:25px"></div>
 
 ## **Lab Exercises**
 
 Lab exercises will ask you to create configuration in the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
-To complete a lab exercise, you will run a test against the load balancer advertised from the Customer Edge in your UDF site.
-Tests are integrated in this lab app.
+Exercise requirements are listed in a table along with an object type indicator. 
+
+<ul class="list-group">
+  <li class="list-group-item">
+  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
+    <strong>Load Balancer</strong>
+  </li>
+  <li class="list-group-item">
+  <img src="/static/origin-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
+    <strong>Origin Pool</strong>
+  </li>
+  <li class="list-group-item">
+  <img src="/static/route-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
+    <strong>Route</strong> 
+  </li>
+</ul>
 
 <div style="height:25px"></div>
 
 #### **Test Criteria**
 
-Exercises will specify thier success criteria along with the test.
+To complete lab exercises, you will run tests against the load balancer advertised from the Customer Edge in your UDF site.
+You will build this load balancer in the <strong><a href="/lb">first exercise</a></strong>.
+All tests will be run from this lab app.
+
+Each test will specify success criteria immediately before to the <button id="null" class="btn btn-primary disabled">Test Load Balancer</button> button.
 
 Here are some examples to try. 
 
@@ -131,13 +145,25 @@ ubuntu@ubuntu:~$ curl -s https://foo.mcn-lab.f5demos.com/ | jq
   "info": "bar"
 }
 ```
+<div class="alert alert-secondary" role="alert">
+  Responses displayed in exercise tests are truncated for readibility.
+</div>
+
+<div style="height:25px"></div>
 
+## **Issues**
 
-Note that responses displayed in exercise tests are truncated for readibility.
+Use the lab repository <i class="bi bi-github"> </i><strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/" target="_blank">issue tracker</a></strong> to report bugs, typos, or lab enhancements.
 
 <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-Next, visit the <strong><a href="/setup" >setup page</a></strong> before starting the exercises.
+<nav aria-label="labapp nav">
+  <ul class="pagination justify-content-end">
+    <li class="page-item">
+      <a class="page-link" href="/setup">Setup <i class="bi bi-arrow-right-circle-fill"></i></a>
+    </li>
+  </ul>
+</nav>
 
 
 

labapp/app/markdown/portability.md

@@ -11,7 +11,7 @@ The configuration built so far handles load balancing, routing, and content mani
 XC refers to this object as a "load balancer" -- but it's really the holistic representation of an application whose service endpoints live across the distributed network.
 The object is simple -- it doesn't yet include configuration for WAAP, API protection, or a service policy.
 
-What seperate XC from traditional ADCs is the flexibility of defining <strong>where the object is advertised</strong>.
+What seperates XC from traditional ADCs is flexibility in defining <strong>where a load balancer is advertised</strong>.
 
 <div style="height:25px"></div>
 
@@ -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', 'result');
+    makeHttpRequest('requestBtn1', '/_port1', 'result1');
 });
 </script>
 
@@ -67,17 +67,22 @@ document.getElementById('requestBtn1').addEventListener('click', () => {
 
 ### **Exercise 2: Find a Friend**
 
-Do you have a friend working on the lab?
-Ask them their ephemeral namespace and test that their load balancer is being advertised from your site.
+Do you have a friend working on the lab? Find thier <strong>ephemeral namespace</strong> (or use the one provided).
 
+<ul class="list-group">
+  <li class="list-group-item">
+  <img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
+  Test if your friend's load balancer is being advertised to the UDF site.
+  </li>
+</ul>
 
 <div style="height:25px"></div>
 
 #### **Test Criteria**
 
 ```http
-GET https://eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
-Host: eph-ns.mcn-lab.f5demos.com
+GET https://friend-eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
+Host: friend-eph-ns.mcn-lab.f5demos.com
 
 {
   "info": {
@@ -87,19 +92,30 @@ Host: eph-ns.mcn-lab.f5demos.com
 }
 ```
 
-<div class="left-aligned-button-container">
-    <button id="requestBtn2" class="btn btn-primary">Test Load Balancer</button>
+<div class="container mt-4">
+    <div class="row">
+        <div class="col-md-6">
+            <div class="input-group mb-3">
+                <input type="text" id="inputText2" class="form-control"
+                  placeholder="Enter your string here" aria-label="User input" value="wiggly-yellowtail">
+                <button id="requestBtn2" class="btn btn-primary" type="button">Test Load Balancer</button>
+            </div>
+        </div>
+    </div>
+    <div id="result2" class="mt-3"></div>
 </div>
-<div id="result2" class="mt-3"></div>
 <script>
 document.getElementById('requestBtn2').addEventListener('click', () => {
-    makeHttpRequest('requestBtn2', '/_manip2', 'result2');
+    makePostRequest('requestBtn2', '/_port2', 'result2', 'inputText2');
 });
 </script>
 
 <div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-🚀 Nice 🚀! 
-</br>
-
-
+<nav aria-label="labapp nav">
+    <ul class="pagination justify-content-end">
+      <li class="page-item">
+        <a class="page-link" href="/score">Scoreboard <i class="bi bi-arrow-right-circle-fill"></i></a>
+      </li>
+    </ul>
+  </nav>