manip work

Author: kreynoldsf5

labapp/app/app.py

@@ -155,11 +155,11 @@ def path():
         udf=app.config['UDF']
     )
 
-@app.route('/header')
+@app.route('/manipulation')
 def header():
     """header page"""
     ns = eph_ns()
-    html = render_md("markdown/header.md")
+    html = render_md("markdown/manipulation.md")
     return render_template('exercise_standard.html',
         title="MCN Practical: Headers",
         content=html, 
@@ -235,4 +235,4 @@ def route2():
 
 
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=5001, debug=False)
+    app.run(host='127.0.0.1', port=5001, debug=False)

labapp/app/markdown/header.md

@@ -0,0 +1,76 @@
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
+    <img src="/static/manip.png" width="300px" height="auto" alt="intro">
+</div>
+
+# **Request Manipulation**
+
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+BLURB on why we need HTTP manipulation
+
+<div style="height:25px"></div>
+
+### **Exercise 1: Path Rewrite**
+
+BLURB HERE
+
+<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
+
+{
+  "env": "azure",
+  ...
+}
+```
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn1" class="btn btn-primary">Test Load Balancer</button>
+</div>
+<div id="result1" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn1').addEventListener('click', () => {
+    makeHttpRequest('requestBtn1', '/_manip1', 'result');
+});
+</script>
+
+<div style="height:25px"></div>
+
+### **Exercise 2: Header Shenanigans**
+
+BLURB
+
+<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
+
+{
+  "env": "azure",
+  ...
+}
+```
+
+<div class="left-aligned-button-container">
+    <button id="requestBtn2" class="btn btn-primary">Test Load Balancer</button>
+</div>
+<div id="result2" class="mt-3"></div>
+<script>
+document.getElementById('requestBtn2').addEventListener('click', () => {
+    makeHttpRequest('requestBtn2', '/_manip2', 'result2');
+});
+</script>
+
+<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+Nice 🚀! If you've completed all the exercises so far, you have a good foundation for how App Connect addresses common L7 MCN scenarios.
+In subsequent labs, we'll explore security and observabilty concepts that build on MCN functionality.
+Head over to the <a href="/vnet" class="alert-link">Network Connect</a> exercise.
+

labapp/app/markdown/manipulation.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 [lab tenant](https://f5-xc-lab-mcn.console.ves.volterra.io/) and open any namespaced tile (Multi-Cloud App Connect, Distributed Apps, etc.). Your ephemeral NS name is a randomly generated concatenation of _adjective_-_animal_ in the navigation bar towards the top.
+Log in to the [lab tenant](https://f5-xc-lab-mcn.console.ves.volterra.io/) and open any namespaced tile (Multi-Cloud App Connect, Distributed Apps, etc.). Your ephemeral namespace is a randomly generated concatenation of _adjective_-_animal_ in the navigation bar towards the top.
 
 <img src="/static/eph-ns.png" width="500px" height="auto" alt="eph-ns"/>
 

labapp/app/markdown/setup.md

@@ -104,7 +104,7 @@
                     <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
                       Home
                     </button>
-                    <div class="collapse" id="home-collapse">
+                    <div class="collapse show" id="home-collapse">
                       <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                         <li><a href="/" class="link-dark rounded">Overview</a></li>
                         <li><a href="/setup" class="link-dark rounded">Setup</a></li>
@@ -120,7 +120,7 @@
                       <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                         <li><a href="/lb" class="link-dark rounded">Load Balancing</a></li>
                         <li><a href="/route" class="link-dark rounded">HTTP Routing</a></li>
-                        <li><a href="/header" class="link-dark rounded">Header Manipulation</a></li>
+                        <li><a href="/manipulation" class="link-dark rounded">Request Manipulation</a></li>
                       </ul>
                     </div>
                   </li>
@@ -142,7 +142,7 @@
                     </button>
                     <div class="collapse" id="status-collapse">
                       <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                        <li><a href="#" class="link-dark rounded">CE State</a></li>
+                        <li><a href="#" class="link-dark rounded">Reference</a></li>
                         <li><a href="#" class="link-dark rounded">Scoreboard</a></li>
                       </ul>
                     </div>