f5devcentral · kreynoldsf5 · May 6, 2024 · May 6, 2024
diff --git a/labapp/app/templates/loadbalancing.html b/labapp/app/templates/loadbalancing.html
@@ -28,7 +28,7 @@
 
 <div style="height:25px"></div>
 
-<h2><strong>Exercise 1: AWS Cloud App</strong></h2>
+<h1><strong>Exercise 1: AWS Cloud App</strong></h1>
 <p>
     For the initial exercise, make the cloud application running in AWS available to the UDF environment. 
     Build an origin pool and load balancer based on the exercise requirements.
@@ -66,7 +66,7 @@ <h2><strong>Exercise 1: AWS Cloud App</strong></h2>
 
 <div style="height:25px"></div>
 
-<h3><strong>Test Criteria</strong></h3>
+<h2><strong>Test Criteria</strong></h2>
 
 <pre class="hljs language-http rounded"><code>
 GET https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/ HTTP/1.1
@@ -136,7 +136,7 @@ <h3><strong>Test Criteria</strong></h3>
 <div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
 
-<h2><strong>Exercise 2: Azure Cloud App</strong></h2>
+<h1><strong>Exercise 2: Azure Cloud App</strong></h1>
 
 <p>
     For the second exercise, make the cloud application running in Azure available to the UDF environment.
@@ -169,7 +169,7 @@ <h2><strong>Exercise 2: Azure Cloud App</strong></h2>
 <div style="height:25px"></div>
 
 
-<h3><strong>Test Criteria</strong></h3> 
+<h2><strong>Test Criteria</strong></h2> 
 
 <pre class="hljs language-http rounded"><code>
 GET https://{{ ns }}.mcn-lab.f5demos.com/ HTTP/1.1

diff --git a/labapp/app/templates/manipulation.html b/labapp/app/templates/manipulation.html
@@ -28,7 +28,7 @@
 
 <div style="height:25px"></div>
 
-<h2><strong>Exercise 1: Path Rewrite</strong></h2>
+<h1><strong>Exercise 1: Path Rewrite</strong></h1>
 
 <p>
 Configure a path <strong>prefix rewrite</strong> to remove part of the request path when routing to an origin.
@@ -49,7 +49,7 @@ <h2><strong>Exercise 1: Path Rewrite</strong></h2>
 
 <div style="height:25px"></div>
 
-<h3><strong>Test Criteria</strong></h3>
+<h2><strong>Test Criteria</strong></h2>
 
 <pre class="hljs language-http rounded"><code>
 GET https://{{ ns or 'eph-ns' }}.mcn-lab.f5demos.com/aws/raw HTTP/1.1
@@ -99,7 +99,7 @@ <h3><strong>Test Criteria</strong></h3>
 
 <div style="height:25px"></div>
 
-<h2><strong>Exercise 2: Request Header Shenanigans</strong></h2>
+<h1><strong>Exercise 2: Request Header Shenanigans</strong></h1>
 
 <p>
     While blind header insertion or deletion is useful in some use cases, this exercise focuses on context aware header manipulation. 
@@ -123,7 +123,7 @@ <h2><strong>Exercise 2: Request Header Shenanigans</strong></h2>
 
 <div style="height:25px"></div>
 
-<h3><strong>Test Criteria</strong></h3>
+<h2><strong>Test Criteria</strong></h2>
 
 <pre class="hljs language-http rounded"><code>
 GET https://{{ ns or 'eph-ns '}}.mcn-lab.f5demos.com/ HTTP/1.1
@@ -156,7 +156,7 @@ <h3><strong>Test Criteria</strong></h3>
 
 <div style="height:25px"></div>
 
-<h2><strong>Exercise 3: Response Header Shenanigans</strong></h2>
+<h1><strong>Exercise 3: Response Header Shenanigans</strong></h1>
 
 <div style="height:25px"></div>
 
@@ -171,7 +171,7 @@ <h2><strong>Exercise 3: Response Header Shenanigans</strong></h2>
 
 <div style="height:25px"></div>
 
-<h3><strong>Test Criteria</strong></h3>
+<h2><strong>Test Criteria</strong></h2>
 
 <div class="alert alert-secondary" role="alert">
     <strong>This test validates multiple HTTP requests.</strong>

diff --git a/labapp/app/templates/overview.html b/labapp/app/templates/overview.html
@@ -17,7 +17,7 @@
 </p>
 <div style="height:25px"></div>
 
-<h2><strong>Architecture</strong></h2>
+<h1><strong>Architecture</strong></h1>
 
 <p>
 The lab environment contains three distributed sites meshed using the F5 Distributed Cloud Global Network.
@@ -44,7 +44,7 @@ <h2><strong>Architecture</strong></h2>
   <img src="/static/images/overview/mcn-prac-arch-base.png" alt="Arch" class="img-fluid">
 </div>
 
-<h2><strong>Lab Exercises</strong></h2>
+<h1><strong>Lab Exercises</strong></h1>
 
 <p>
 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>.
@@ -68,7 +68,7 @@ <h2><strong>Lab Exercises</strong></h2>
 
 <div style="height:25px"></div>
 
-<h4><strong>Test Criteria</strong></h4>
+<h2><strong>Test Criteria</strong></h2>
 
 <p>
 To complete lab exercises, you will run tests against the load balancer advertised from the Customer Edge in your UDF site.
@@ -93,7 +93,7 @@ <h4><strong>Test Criteria</strong></h4>
 </code></pre>
 
 <p>
-The second section shows a value the test expects in the response.
+The second section shows the value the test expects in the response.
 </p>
 
 <pre class="hljs language-json rounded"><code>
@@ -154,7 +154,7 @@ <h4><strong>Test Criteria</strong></h4>
 
 <div style="height:25px"></div>
 
-<h4><strong>Other Tools</strong></h4>
+<h2><strong>Other Tools</strong></h2>
 
 <p><code>curl</code> and <code>jq</code> are provided on the UDF <strong>Runner</strong> instance.</p>
 
@@ -173,7 +173,7 @@ <h4><strong>Other Tools</strong></h4>
 
 <div style="height:25px"></div>
 
-<h2><strong>Cloud App</strong></h2>
+<h1><strong>Cloud App</strong></h1>
 
 <p>
 Exercises are run against instances of the <strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp" target="_blank">cloud app</a></strong> hosted in each remote cloud environment.
@@ -201,7 +201,7 @@ <h2><strong>Cloud App</strong></h2>
 
 <div style="height:25px"></div>
 
-<h2><strong>Issues</strong></h2>
+<h1><strong>Issues</strong></h1>
 
 <p>
 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.

diff --git a/labapp/app/templates/portability.html b/labapp/app/templates/portability.html
@@ -30,7 +30,7 @@
 
 <div style="height:25px"></div>
 
-<h2><strong>Exercise 1: Advertise Policy</strong></h2>
+<h1><strong>Exercise 1: Advertise Policy</strong></h1>
 
 <div>
     <ul class="list-group">
@@ -43,7 +43,7 @@ <h2><strong>Exercise 1: Advertise Policy</strong></h2>
 
 <div style="height:25px"></div>
 
-<h3><strong>Test Criteria</strong></h3>
+<h2><strong>Test Criteria</strong></h2>
 
 <pre class="hljs language-http rounded"><code>
 GET https://{{ ns or 'eph-ns '}}.mcn-lab.f5demos.com/ HTTP/1.1
@@ -86,7 +86,7 @@ <h3><strong>Test Criteria</strong></h3>
 
 <div style="height:25px"></div>
 
-<h2><strong>Exercise 2: Find a Friend</strong></h2>
+<h1><strong>Exercise 2: Find a Friend</strong></h1>
 
 <p>
     Do you have a friend working on the lab?
@@ -105,7 +105,7 @@ <h2><strong>Exercise 2: Find a Friend</strong></h2>
 
 <div style="height:25px"></div>
 
-<h3><strong>Test Criteria</strong></h3>
+<h2><strong>Test Criteria</strong></h2>
 
 <div class="alert alert-secondary" role="alert">
     <strong>Use the example ephemeral NS if a friend is unavailable.</strong>

diff --git a/labapp/app/templates/route.html b/labapp/app/templates/route.html
@@ -27,7 +27,7 @@
 
 <div style="height:25px"></div>
 
-<h2><strong>Exercise 1: Path Routing</strong></h2>
+<h1><strong>Exercise 1: Path Routing</strong></h1>
 
 <p>
 Build routing rules and configure your load balancer to route traffic between the two cloud apps based on the request url.
@@ -53,7 +53,7 @@ <h2><strong>Exercise 1: Path Routing</strong></h2>
 
 <div style="height:25px"></div>
 
-<h3><strong>Test Criteria</strong></h3>
+<h2><strong>Test Criteria</strong></h2>
 
 <div class="alert alert-secondary" role="alert">
     <strong>This test validates multiple HTTP requests.</strong>
@@ -103,7 +103,7 @@ <h3><strong>Test Criteria</strong></h3>
 
 <div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
-<h2><strong>Exercise 2: Header Routing</strong></h2>
+<h1><strong>Exercise 2: Header Routing</strong></h1>
 
 <p>
 Build rules to route traffic between the two cloud apps based on an arbitrary HTTP request header.
@@ -124,7 +124,7 @@ <h2><strong>Exercise 2: Header Routing</strong></h2>
 
 <div style="height:25px"></div>
 
-<h3><strong>Test Criteria</strong></h3>
+<h2><strong>Test Criteria</strong></h2>
 
 <div class="alert alert-secondary" role="alert">
     <strong>This test validates multiple HTTP requests.</strong>

diff --git a/labapp/app/templates/score.html b/labapp/app/templates/score.html
@@ -33,6 +33,10 @@
 
 <div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
+<h1><strong>Test Results</strong></h1>
+<p>
+    Does your load balancer meet the test criteria?
+</p>
 
 <div class="container">
     <div class="row align-items-center">
@@ -62,21 +66,21 @@
 </div>
 
 <div class="container mt-1">
-    <button class="btn btn-danger" onclick="clearScore()">Clear Scores</button>
+    <button class="btn btn-danger" onclick="clearScore()">Clear Test Results</button>
 </div>
 
 <div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
 
 <div style="height:25px"></div>
 
 <div class="mt-6">
-    <h4><strong>Feedback</strong></h4>
+    <h1><strong>Feedback</strong></h1>
     <p>
         <img src="/static/images/score/ms-forms.png" height="50px" width="auto" class="rounded"/>
         Please tell us your thoughts about the lab using <strong><a href="https://forms.office.com/Pages/ResponsePage.aspx?id=L_093Ttq0UCb4L-DJ9gcULXGWCx14gdAhrSFCCStGodUQTlQNVpKSlNZWlpDSENIVFlPVU84Q1VJMC4u" target="_blank">this form</a></strong>.
     </p>
     <div style="height:25px"></div>
-    <h4><strong>Issues</strong></h4>
+    <h1><strong>Issues</strong></h1>
     <p>
         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.
     </p>

diff --git a/labapp/app/templates/setup.html b/labapp/app/templates/setup.html
@@ -41,22 +41,28 @@
                 <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">&nbsp;&nbsp;Set&nbsp;&nbsp;</button>
-            <button type="button" onclick="clearCookie()" class="btn btn-danger">Clear</button>
+            <button type="submit" name="action" value="save" class="btn btn-primary">Set Ephemeral NS</button>
+            <button type="button" onclick="clearCookie()" class="btn btn-danger">Clear Ephemeral NS</button>
         </form>
-
 
-    <div>
+        <div>
             {% with messages = get_flashed_messages(with_categories=true) %}
                 {% if messages %}
-                    <div class="mt-3">
+                    <div class="mt-3 text-center">
                         {% for category, message in messages %}
                             <div class="alert alert-{{ category }}">{{ message }}</div>
                         {% endfor %}
                     </div>
                 {% endif %}
             {% endwith %}
         </div>
+
+        {% if ns %}
+        <div class="mt-3 mb-3">
+                <div class="alert alert-secondary text-center">Current ephemeral namespace is <strong>{{ ns }}</strong>.</div>
+        </div>
+        {% endif %}
+
     </div>
 
     <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>