ready to write the tests

labapp/app/app.py

@@ -29,7 +29,8 @@ def render_md(file: str) -> str:
         content = md.read()
     html = markdown.markdown(
         content,
-        extensions=['markdown.extensions.attr_list','markdown.extensions.codehilite','markdown.extensions.fenced_code']
+        #extensions=['markdown.extensions.attr_list','markdown.extensions.codehilite','markdown.extensions.fenced_code']
+        extensions=['markdown.extensions.attr_list','markdown.extensions.fenced_code']
         )
     return html
 
@@ -125,14 +126,14 @@ def lb():
         udf=app.config['UDF']
     )
 
-@app.route('/path')
+@app.route('/route')
 def path():
-    """path page"""
+    """routing page"""
     ns = eph_ns()
-    html = render_md("markdown/path.md")
+    html = render_md("markdown/route.md")
     return render_template('exercise_standard.html',
-        title="MCN Practical: Path Routing",
-        content=html, 
+        title="MCN Practical: HTTP Routing",
+        content=html,
         ns=ns,
         udf=app.config['UDF']
     )

labapp/app/markdown/route.md

@@ -0,0 +1,127 @@
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
+    <img src="/static/path.png" width="300px" height="auto" alt="intro">
+</div>
+
+# **HTTP Routing**
+
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+Modern applications, and some classic ones, are often comprised of disparate services spread across sites. 
+MCN solutions must be able to make routing decisions based on characterstics of an HTTP request.
+
+<div style="height:25px"></div>
+
+### **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.
+
+<ul class="list-group">
+  <li class="list-group-item">
+  <img src="/static/origin-icon.png" width="auto" height="25px"> &nbsp; &nbsp;
+  Reuse the origin pools from the previous exercise
+  </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. 
+  </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. 
+  </li>
+</ul>
+
+<div style="height:25px"></div>
+
+#### **Test Criteria**
+
+```http
+GET https://eph-ns.mcn-lab.f5demos.com/aws/raw HTTP/1.1
+Host: eph-ns.mcn-lab.f5demos.com
+
+{
+  "env": "aws",
+  ...
+}
+```
+
+```http
+GET https://eph-ns.mcn-lab.f5demos.com/azure/raw HTTP/1.1
+Host: eph-ns.mcn-lab.f5demos.com
+
+{
+  "env": "azure",
+  ...
+}
+```
+
+<div style="height:25px"></div>
+
+<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', '/_path1', 'result1');
+});
+</script>
+
+<div style="height:25px"></div>
+
+### **Exercise 2: Header Routing**
+
+Build rules to route traffic between the two cloud apps based on an arbitrary HTTP request header.
+
+
+<ul class="list-group">
+  <li class="list-group-item">
+  <img src="/static/lb-icon.png" width="auto" height="25px"> &nbsp; &nbsp;
+  Route requests with an "<strong>X-MCN-Lab: aws</strong>" header 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 with an "<strong>X-MCN-Lab: azure</strong>" header to the Azure cloud app.
+  </li>
+</ul>
+
+<div style="height:25px"></div>
+
+#### **Test Criteria**
+
+```http
+GET https://eph-ns.mcn-lab.f5demos.com/raw HTTP/1.1
+Host: eph-ns.mcn-lab.f5demos.com
+X-MCN-lab: aws
+
+{
+  "env": "aws",
+  ...
+}
+```
+
+```http
+GET https://eph-ns.mcn-lab.f5demos.com/raw HTTP/1.1
+Host: eph-ns.mcn-lab.f5demos.com
+X-MCN-lab: azure
+
+{
+  "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', '/_path2', 'result2');
+});
+</script>
+
+
+
+Once you've completed both exercises, move on to the <a href="/header" class="alert-link">header manipulation</a> exercise.
+
+<div style="height:100px"></div>

labapp/app/static/dracula.css

@@ -0,0 +1,81 @@
+/* Dracula Theme v1.2.5
+ *
+ * https://github.com/dracula/highlightjs
+ *
+ * Copyright 2016-present, All rights reserved
+ *
+ * Code licensed under the MIT license
+ *
+ * @author Denis Ciccale <[email protected]>
+ * @author Zeno Rocha <[email protected]>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #282a36;
+}
+
+.hljs-built_in,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-link {
+  color: #8be9fd;
+}
+
+.hljs-keyword {
+  color: #ff79c6;
+}
+
+.hljs,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-meta-keyword {
+  font-style: italic;
+  color: #50fa7b;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-name,
+.hljs-type,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #f1fa8c;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: #6272a4;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-literal,
+.hljs-number {
+  color: #bd93f9;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}

labapp/app/templates/base.html

@@ -8,11 +8,12 @@
 
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css">
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-	<script>hljs.highlightAll();</script>	
-
+
+    <link rel="stylesheet" href="/static/dracula.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/http.min.js"></script>
+    <script>hljs.highlightAll();</script>
+
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <link href="/static/custom.css" rel="stylesheet">
 
@@ -118,7 +119,7 @@
                     <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="/path" class="link-dark rounded">Path Routing</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>
                       </ul>
                     </div>