walkthrough

labapp/app/app.py

@@ -87,16 +87,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,7 +358,22 @@ 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():
+    """Friend test"""
+    try:
+        s = requests.Session()
+        s.headers.update({"User-Agent": "MCN-Lab-Runner/1.0"})
+        ns = eph_ns()
+        if not ns:
+            raise LabException("Ephemeral NS not set")
+        url = f"https://{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))
+
 @app.route('/_port2', methods=['POST'])
 def port2():
     """Friend test"""

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>{{ ns }}.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

@@ -174,5 +174,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>
@@ -19,15 +19,15 @@ The lab environment contains three distributed sites meshed using the F5 Distrib
 
 <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"> &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"> &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 +40,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 +52,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 prior to the <button id="null" class="btn btn-primary disabled">Test Load Balancer</button> button.
 
 Here are some examples to try. 
 
@@ -131,13 +147,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

@@ -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>
 
@@ -107,4 +107,10 @@ 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>
 
-Congratulations on completing the App Connect exercises. Move on to the first Network Connect exercise on <strong><a href="/vnet">virtual networks</a></strong>.
+<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-sign-stop-fill"></i></a>
+      </li>
+    </ul>
+  </nav>

labapp/app/markdown/route.md

@@ -123,4 +123,10 @@ 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>
 
-Once you've completed the exercises, move on to the <strong><a href="/manipulation">manipulation</a></strong> exercise.
+<nav aria-label="labapp nav">
+    <ul class="pagination justify-content-end">
+      <li class="page-item">
+        <a class="page-link" href="/manipulation">Manipulation <i class="bi bi-arrow-right-circle-fill"></i></a>
+      </li>
+    </ul>
+  </nav>

labapp/app/markdown/setup.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>
 
-Log in to the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong> and open any namespaced tile (Multi-Cloud App Connect, Distributed Apps, etc.). The ephemeral namespace is a randomly generated concatenation of <strong><i>adjective-animal</i></strong> in the navigation bar towards the top.
+Log in to the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong> and open any namespaced tile -- <strong>Multi-Cloud App Connect</strong>, <strong>Distributed Apps</strong>, etc. The ephemeral namespace is a randomly generated concatenation of <strong><i>adjective-animal</i></strong> in the navigation bar towards the top.
 
 <img src="/static/eph-ns.png" width="500px" height="auto" class="rounded" alt="eph-ns"/>
 
@@ -18,7 +18,7 @@ The ephemeral namespace will be used to derive a unique URL for the load balance
         <label for="ENInput" class="form-label"></label>
         <input type="text" class="form-control" id="ENInput" name="eph_ns" placeholder="Enter ephemeral NS">
     </div>
-    <button type="submit" name="action" value="save" class="btn btn-primary">Save</button>
+    <button type="submit" name="action" value="save" class="btn btn-primary">&nbsp;&nbsp;Set&nbsp;&nbsp;</button>
     <button type="button" onclick="clearCookie()" class="btn btn-danger">Clear</button>
 </form>
 <script>
@@ -35,3 +35,4 @@ function clearCookie() {
 }
 </script>
 
+

labapp/app/markdown/welcome.md

@@ -7,9 +7,9 @@
 
 <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-This lab is a "practical" training activity.
-Each exercise will ask you to **configure** F5 Distributed Cloud ("XC") objects to reinforce core XC Multi-Cloud Networking ("MCN") concepts. 
-Once configured, you'll be asked to **test** your configuration using this web application.
+This lab is a <strong>practical</strong> training activity.
+Each exercise will ask you to <strong>configure</strong>F5 Distributed Cloud ("XC") objects to reinforce core XC Multi-Cloud Networking ("MCN") concepts. 
+Once configured, you will <strong>test</strong> the configuration using this web application.
 
 <div style="height:25px"></div>
 
@@ -22,18 +22,17 @@ When your UDF deployment launched, two automated processes started - Customer Ed
 ### **Customer Edge**
 
 The CE in the UDF deployment will registered with the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
-CEs on first launch update software and, often, their OS. This can be very time consuming ~20 min from when the CE is booted.
-
-This lab app includes an indicator of the CE's status along with the site name in the navigation pane.
-The **site name** is needed when configuring the load balancer advertise policy.
+CEs on first launch update software and, often, their OS. This can take ~20 min from when the CE is booted.
 
+This lab app includes an indicator of the CE's site name and status in the navigation pane (👀 look to the left).
+The **site name** is needed when configuring the load balancer's <strong>advertise policy</strong>.
 
 <div style="height:25px"></div>
 
 ### **Account Provisioning**
 
-Check the email used to launch your UDF deployment for a "welcome" or password reset email to the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
-Update your password and log into the tenant.
+Check the email used to launch your UDF deployment for a <strong>welcome</strong> or password reset email from the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
+Update your password to log into the tenant.
 
 <p float="left">
 <a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">
@@ -59,7 +58,7 @@ Here's a few things you can do while waiting for the CE to be registered and pro
   </li>
   <li class="list-group-item">
     <i class="bi bi-envelope-exclamation"></i>&nbsp; &nbsp;
-    Check for the tenant "welcome" email.
+    Check for the tenant <strong>welcome</strong> email.
   </li>
   <li class="list-group-item">
     <i class="bi bi-cup-hot"></i></i>&nbsp; &nbsp;
@@ -70,6 +69,13 @@ Here's a few things you can do while waiting for the CE to be registered and pro
 
 <div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-Welcome to the lab! Next, read an <strong><a href="/overview">overview</a></strong> that explains the lab environment, tools, and exercises.
+<nav aria-label="labapp nav">
+  <ul class="pagination justify-content-end">
+    <li class="page-item">
+      <a class="page-link" href="/overview">Overview <i class="bi bi-arrow-right-circle-fill"></i></a>
+    </li>
+  </ul>
+</nav>
+