Merge pull request #7 from f5devcentral/dev

Dev

cloudapp/app/templates/pretty_echo.html

@@ -33,18 +33,18 @@
     <div class="container">
         <div>
             <h1 class="mt-5">
-                <img src="https://github.com/f5devcentral/f5xc-lab-mcn-practical/blob/main/cloudapp/static/logo.png?raw=true" alt="" width="auto" height="100"/>
+                <img src="https://raw.githubusercontent.com/f5devcentral/f5xc-lab-mcn-practical/main/cloudapp/app/static/logo.png" alt="" width="auto" height="100"/>
                 MCN Practical Cloud App</h1>
         </div>
         <div class="card mt-3">
             <div class="card-header">Environment</div>
             <div class="card-body">
                 {% if request_env == 'AWS' %}
-                <img src="https://github.com/f5devcentral/f5xc-lab-mcn-practical/blob/main/cloudapp/app/static/aws.png" alt="" width="auto" height="40">
+                <img src="https://raw.githubusercontent.com/f5devcentral/f5xc-lab-mcn-practical/main/cloudapp/app/static/aws.png" alt="" width="auto" height="40">
                 {% elif request_env == 'Azure' %}
-                <img src="https://github.com/f5devcentral/f5xc-lab-mcn-practical/blob/main/cloudapp/app/static/azure.png" alt="" width="auto" height="40">
+                <img src="https://raw.githubusercontent.com/f5devcentral/f5xc-lab-mcn-practical/main/cloudapp/app/static/azure.png" alt="" width="auto" height="40">
                 {% else %}
-                <img src="https://github.com/f5devcentral/f5xc-lab-mcn-practical/blob/main/cloudapp/app/static/flask.png" alt="" width="auto" height="40">
+                <img src="https://raw.githubusercontent.com/f5devcentral/f5xc-lab-mcn-practical/main/cloudapp/app/static/flask.png" alt="" width="auto" height="40">
                 {% endif %}
                 &nbsp{{ request_env }}
             </div>

labapp/app/app.py

@@ -1,12 +1,12 @@
 """
 Flask app for lab/guide
 """
+import os
+import re
 from flask import Flask, render_template, jsonify, request, redirect, make_response, flash, url_for
 from flask_caching import Cache
 import requests
 import markdown
-import validators
-import os
 from ce import get_ce_info, get_ce_state
 
 app = Flask(__name__)
@@ -15,11 +15,31 @@
 if app.config['udf']:
     info = get_ce_info()
 app.config['ce_info'] = info
-app.config['base_url'] = "lab-mcn.f5demos.com"
+app.config['base_url'] = "mcn-lab.f5demos.com"
 app.config['CACHE_TYPE'] = 'SimpleCache'
 cache = Cache(app)
 app.secret_key = "blahblahblah"
 
+def render_md(file: str) -> str:
+    """render markdown w/ common extentions"""
+    with open(file, "r") as file:
+        content = file.read()
+    html = markdown.markdown(
+        content,
+        extensions=['markdown.extensions.attr_list','markdown.extensions.codehilite','markdown.extensions.fenced_code']
+        )
+    return html
+
+def validate_eph_ns(input_name):
+    """validate ephemeral namespace name"""
+    pattern = r'^[a-zA-Z]+-[a-zA-Z]+$'
+    return bool(re.match(pattern, input_name))
+
+def eph_ns() -> str:
+    """check if ephemeral namespace is set"""
+    eph_ns = request.cookies.get('eph_ns', None)
+    return eph_ns
+
 @app.errorhandler(404)
 @app.errorhandler(500)
 def return_err(err):
@@ -32,92 +52,89 @@ def return_err(err):
 
 @app.route('/')
 def index():
-    with open("markdown/overview.md", "r") as file:
-        content = file.read()
-    html = markdown.markdown(content)
+    """index page"""
+    html = render_md("markdown/overview.md")
     return render_template('overview.html', content=html)
 
 @app.route('/setup', methods=['GET', 'POST'])
 def setup():
+    """setup page"""
     if request.method == 'POST':
         action = request.form['action']
         if action == 'save':
-            base_url = request.form['base_url'].strip()
-            if not validators.domain(base_url):
-                flash("Invalid domain format.", "info")
-                return redirect(url_for('setup'))
-            if not base_url.endswith(app.config['base_url']):
-                flash(f"Domain must end with {app.config['base_url']}.", "info")
+            eph_ns = request.form['eph_ns'].strip()
+            print(eph_ns)
+            if not validate_eph_ns(eph_ns):
+                flash("Invalid ephemeral NS.", "danger")
                 return redirect(url_for('setup'))
             response = make_response(redirect('/setup'))
-            response.set_cookie('base_url', base_url, max_age=60*60*24)
-            flash("Domain successfully set.", "success")
+            response.set_cookie('eph_ns', eph_ns, max_age=60*60*24)
+            flash("Ephemeral NS successfully set.", "success")
             return response
         elif action == 'clear':
             response = make_response(redirect('/setup'))
-            response.set_cookie('base_url', '', expires=0)
-            flash("Domain setting cleared.", "info")
+            response.set_cookie('eph_ns', '', expires=0)
+            flash("Ephemeral NS cleared.", "info")
             return response
-    return render_template('setup.html', base_url=app.config['base_url'])
+    html = render_md("markdown/setup.md")
+    return render_template('setup.html', content=html)
+
+@app.route('/arch')
+def arch():
+    """arch page"""
+    html = render_md("markdown/arch.md")
+    return render_template('standard.html', content=html, title="MCN Practical: Architecture")
 
 @app.route('/_ce_state')
 @cache.cached(timeout=30)
 def ce_state():
+    """get ce state (internal route)"""
     data = get_ce_state(app.config['ce_info'])
     return data
 
-@app.route('/test')
-def test():
-    base_url = request.cookies.get('base_url')
-    url = f"https://echo.{base_url}"
-    try:
-        response = requests.get(url)
-        response.raise_for_status()
-        return jsonify(status='success', data=response.json())
-    except requests.RequestException as e:
-        return jsonify(status='fail', error=str(e))
-
 @app.route('/lb')
 def lb():
-    with open("markdown/lb.md", "r") as file:
-        content = file.read()
-    html = markdown.markdown(
-        content,
-        extensions=['markdown.extensions.codehilite','markdown.extensions.fenced_code']
-        )
-    return render_template('lb.html', content=html)
+    """lb page"""
+    ns = eph_ns()
+    html = render_md("markdown/lb.md")
+    return render_template('exercise_standard.html', title="MCN Practical: LB", content=html, ns=ns)
 
 @app.route('/path')
 def path():
-    with open("markdown/path.md", "r") as file:
-        content = file.read()
-    html = markdown.markdown(
-        content,
-        extensions=['markdown.extensions.codehilite','markdown.extensions.fenced_code']
-        )
-    return render_template('path.html', content=html)
+    """path page"""
+    ns = eph_ns()
+    html = render_md("markdown/path.md")
+    return render_template('exercise_standard.html', title="MCN Practical: Path Routing", content=html, ns=ns)
 
 @app.route('/header')
 def header():
-    with open("markdown/header.md", "r") as file:
-        content = file.read()
-    html = markdown.markdown(
-        content,
-        extensions=['markdown.extensions.codehilite','markdown.extensions.fenced_code']
-        )
-    return render_template('header.html', context=html)
+    """header page"""
+    ns = eph_ns()
+    html = render_md("markdown/header.md")
+    return render_template('exercise_standard.html', title="MCN Practical: Headers", content=html, ns=ns)
 
-@app.route('/appCon-aws')
-def make_request_ac1_aws():
+@app.route('/_lb_aws')
+def lb_aws():
+    """AWS LB test"""
     try:
-        response = requests.get('https://ifconfig.io/all.json')
-        response.raise_for_status() 
+        ns = eph_ns()
+        if not ns:
+            raise Exception("Ephemeral NS not set.")
+        url = f"https://{ns}.{app.config['base_url']}/raw"
+        print(url)
+        response = requests.get(url, timeout=5)
+        print(response.text)
+        print(response.json())
+        response.raise_for_status()
+        if response.json()['request_env'] != "AWS":
+            raise Exception("Invalid request env.")
         return jsonify(status='success', data=response.json())
-    except requests.RequestException as e:
+    except Exception as e:
         return jsonify(status='fail', error=str(e))
 
-@app.route('/appCon-azure')
-def make_request_ac1_azure():
+@app.route('/_lb_azure')
+def lb_azure():
+    """Azure LB test"""
     try:
         response = requests.get('https://ifconfig1.io/all.json')
         response.raise_for_status() 

labapp/app/markdown/arch.md

@@ -0,0 +1,14 @@
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
+    <img src="/static/arch.png" width="300px" height="auto" alt="arch">
+</div>
+
+# **Architecture**
+
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+
+<div class="err">
+    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
+        <img src="/static/coming-soon.png" alt="Descriptive Text">
+    </a>
+</div>

labapp/app/markdown/header.md

@@ -0,0 +1,44 @@
+<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>
+
+# **Header Manipulation**
+
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+<div style="height:25px"></div>
+
+### **Exercise 1: Add/Remove**
+
+HERE
+
+<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', async () => {
+        const resultDiv = document.getElementById('result2');
+        try {
+            const response = await axios.get('/_lb_azure');
+            if(response.data.status === 'success') {
+                const prettyJson = JSON.stringify(response.data.data, null, 4);
+                resultDiv.innerHTML = `<pre class="alert alert-success"><code>${prettyJson}</code></pre>`;
+            } else {
+                resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed</b></div>`;
+            }
+            resultDiv.scrollIntoView({ behavior: 'smooth', block: 'end' }); // Smooth scroll to the resultDiv
+        } catch (error) {
+            resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
+            resultDiv.scrollIntoView({ behavior: 'smooth', block: 'end' }); // Smooth scroll to the resultDiv
+        }
+    });
+</script>
+
+<div style="height:25px"></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.
+
+<div style="height:25px"></div>