taking shape

f5devcentral · Apr 30, 2024 · d77e536 · d77e536
1 parent a0bc5b8
commit d77e536
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 13 deletions.
diff --git a/labapp/app/app.py b/labapp/app/app.py
@@ -161,7 +161,7 @@ def header():
     ns = eph_ns()
     html = render_md("markdown/manipulation.md")
     return render_template('exercise_standard.html',
-        title="MCN Practical: Headers",
+        title="MCN Practical: Manipulation",
         content=html, 
         ns=ns,
         udf=app.config['UDF']

diff --git a/labapp/app/markdown/manipulation.md b/labapp/app/markdown/manipulation.md
@@ -2,28 +2,45 @@
     <img src="/static/manip.png" width="300px" height="auto" alt="intro">
 </div>
 
-# **Request Manipulation**
+# **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
+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)). 
+"Proxy Pass" functionality has been part of web servers since the early Apache days.
+Adding, removing, or altering HTTP Headers is 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**
 
-BLURB HERE
+Configure a path <strong>prefix rewrite</strong> to remove part of the request path when routing to an origin.
+
+<ul class="list-group">
+  <li class="list-group-item">
+  <img src="/static/lb-icon.png" width="auto" height="25px"> &nbsp; &nbsp;
+  Keep your routing rules from the previous exercise in place. 
+  </li>
+  <li class="list-group-item">
+  <img src="/static/lb-icon.png" width="auto" height="25px"> &nbsp; &nbsp;
+  Requests to "<u>https://<i>eph-ns</i>.mcn-lab.f5demos.com<strong>/aws/raw</strong></u>" need to arrive at the origin with a path of "<strong>/raw</strong></u>"
+  </li>
+</ul>
 
 <div style="height:25px"></div>
 
 #### **Test Criteria**
 
 ```http
-GET https://eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
+GET https://eph-ns.mcn-lab.f5demos.com/aws/raw HTTP/1.1
 Host: eph-ns.mcn-lab.f5demos.com
 
 {
-  "env": "azure",
+  "info": {
+    "path": "/raw"
+  }
   ...
 }
 ```
@@ -38,11 +55,34 @@ document.getElementById('requestBtn1').addEventListener('click', () => {
 });
 </script>
 
+Since questions on this functionality are often asked on [F5 DevCentral](https://community.f5.com/), a hint might be warranted. 
+
+<div id="hints">
+<p>
+  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Route Hint</a>
+  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Rewrite Hint</button>
+</p>
+<div class="row">
+
+  <div class="collapse multi-collapse" id="multiCollapseExample1" data-bs-parent="#hints">
+    <div class="">
+      <img src="/static/rewrite1.png" width="800px" height="auto" alt="temp">
+    </div>
+  </div>
+
+  <div class="collapse multi-collapse" id="multiCollapseExample2" data-bs-parent="#hints">
+    <div class="">
+      <img src="/static/rewrite2.png" width="800px" height="auto" alt="temp">
+    </div>
+  </div>
+</div>
+</div>
+
 <div style="height:25px"></div>
 
 ### **Exercise 2: Header Shenanigans**
 
-BLURB
+Insert headers to identify 
 
 <div style="height:25px"></div>
 

diff --git a/labapp/app/markdown/portability.md b/labapp/app/markdown/portability.md
@@ -0,0 +1,82 @@
+<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>
+
+# **Portability**
+
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+
+So far we've built an object handling load balancing, routing, and content manipulation across multiple sites.
+XC refers to these as "load balancers" but it's really the holistic representation of a service whose components live across a distributed network.
+Our object is a simplified representation that does not include WAAP, API Protection, or service policies.
+XC is incredibly flexible in defining where that object is advertised.
+
+<div style="height:25px"></div>
+
+### **Exercise 1: Advertise Policy**
+
+-- advertise from the Virtual Site
+
+<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: Find a Friend (Optional)**
+
+Test a friend's site. Look at the headers from the previous exercises.
+
+We need an input button for the friend's LB. I can keep my funny name LB around for this as well. 
+
+<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.
+
diff --git a/labapp/app/markdown/route.md b/labapp/app/markdown/route.md
@@ -14,7 +14,7 @@ F5 XC App Connect is a distributed L7 proxy that provide intelligent routing, vi
 
 ### **Exercise 1: Path Routing**
 
-Build routing rules and configure your load balancer to route traffic between the two cloud apps based on HTTP the request url.
+Build routing rules and configure your load balancer to route traffic between the two cloud apps based on the request url.
 
 <ul class="list-group">
   <li class="list-group-item">
@@ -23,11 +23,11 @@ Build routing rules and configure your load balancer to route traffic between th
   </li>
   <li class="list-group-item">
   <img src="/static/lb-icon.png" width="auto" height="25px"> &nbsp; &nbsp;
-  Route requests to <u>https://<i>ephemeral-ns</i>.mcn-lab.f5demos.com/<strong>aws</strong></u> to the AWS cloud app. 
+  Route requests to "<u>https://<i>eph-ns</i>.mcn-lab.f5demos.com/<strong>aws</strong></u>" to the AWS cloud app. 
   </li>
   <li class="list-group-item">
   <img src="/static/lb-icon.png" width="auto" height="25px"> &nbsp; &nbsp;
-  Route requests to <u>https://<i>ephemeral-ns</i>.mcn-lab.f5demos.com/<strong>azure</strong></u> to the Azure cloud app. 
+  Route requests to "<u>https://<i>eph-ns</i>.mcn-lab.f5demos.com/<strong>azure</strong></u>" to the Azure cloud app. 
   </li>
 </ul>
 

diff --git a/labapp/app/templates/base.html b/labapp/app/templates/base.html
@@ -126,8 +126,8 @@
                     <div class="collapse show" id="appconnect-collapse">
                       <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="/manipulation" class="link-dark rounded">Request Manipulation</a></li>
+                        <li><a href="/route" class="link-dark rounded">Routing</a></li>
+                        <li><a href="/manipulation" class="link-dark rounded">Manipulation</a></li>
                       </ul>
                     </div>
                   </li>
@@ -145,7 +145,7 @@
                   <li class="border-top my-3"></li>
                   <li class="mb-1">
                     <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#status-collapse" aria-expanded="false">
-                      Status
+                      Miscellaneous
                     </button>
                     <div class="collapse" id="status-collapse">
                       <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">