content, content, content

f5devcentral · May 1, 2024 · f078216 · f078216
1 parent d77e536
commit f078216
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 55 deletions.
diff --git a/labapp/app/app.py b/labapp/app/app.py
@@ -81,13 +81,23 @@ def return_err(err):
 @app.route('/')
 def index():
     """index page"""
-    html = render_md("markdown/overview.md")
+    html = render_md("markdown/welcome.md")
     return render_template('standard.html',
         title="MCN Practical: Overview",
         content=html, 
         udf=app.config['UDF'] 
     )
 
+@app.route('/overview')
+def arch():
+    """arch page"""
+    html = render_md("markdown/overview.md")
+    return render_template('standard.html',
+        title="MCN Practical: Architecture",
+        content=html,
+        udf=app.config['UDF']
+    )
+
 @app.route('/setup', methods=['GET', 'POST'])
 def setup():
     """setup page"""
@@ -114,16 +124,6 @@ def setup():
         udf=app.config['UDF']
     )
 
-@app.route('/arch')
-def arch():
-    """arch page"""
-    html = render_md("markdown/arch.md")
-    return render_template('standard.html',
-        title="MCN Practical: Architecture",
-        content=html,
-        udf=app.config['UDF']
-    )
-
 @app.route('/_ce_status')
 @cache.cached(timeout=30)
 def ce_state():

diff --git a/labapp/app/markdown/arch.md b/labapp/app/markdown/arch.md
diff --git a/labapp/app/markdown/overview.md b/labapp/app/markdown/overview.md
@@ -1,51 +1,63 @@
-<div style="height:25px"></div>
 <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
-    <img src="/static/practical.png" width="700px" height="auto" alt="intro">
+    <img src="/static/arch.png" width="300px" height="auto" alt="arch">
 </div>
 
-This lab is a "practical" training activity.
-Each exercise will ask you to **configure** F5 Distributed Cloud ("XC") objects to reinforce core XC Multi-Cloud Networking ("MCN") concepts. 
-Once configured, you'll be asked to **test** your configuration using this web application.
+# **Overview**
 
 <div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+The lab environment, it's apps, and method of interaction are intentionally simple in an attempt to streamline...
+
 <div style="height:25px"></div>
 
-# **Getting Started**
+## **Architecture**
 
-When your UDF deployment launched, two automated processes started - Customer Edge ("CE") registration and account provisioning in the [lab tenant](https://f5-xc-lab-mcn.console.ves.volterra.io/).
+The lab environment contains three distributed sites meshed using the F5 Distributed Cloud Global Network.
 
 <div style="height:25px"></div>
 
-## **Customer Edge**
+<ul class="list-group">
+  <li class="list-group-item">
+  <img src="/static/mcnp-aws.png" width="auto" height="30px"> &nbsp; &nbsp;
+    <strong>student-awsnet</strong> in Amazon Web Services
+  </li>
+  <li class="list-group-item">
+  <img src="/static/mcnp-azure.png" width="auto" height="30px"> &nbsp; &nbsp;
+  <strong>student-azurenet</strong> in Microsoft Azure
+  </li>
+  <li class="list-group-item">
+  <img src="/static/mcnp-udf.png" width="auto" height="30px"> &nbsp; &nbsp;&nbsp;
+  <strong>Lab CE</strong> in UDF 
+  </li>
+</ul>
 
-The CE in your UDF deployment is being registered with the [lab tenant](https://f5-xc-lab-mcn.console.ves.volterra.io/).
-CEs on first launch update software and, often, their OS. This can be very time consuming.
-This process will take 15-20 min from when the CE is booted.
-You can still get started on some preliminary tasks while waiting. 
+<div style="height:25px"></div>
 
-<img src="/static/ce.png" height="200px" width="auth"/>
+<img src="/static/mcn-prac-arch-base.png" width="auto" height="600px" alt="Arch diagram">
 
-**Note on status in nav and status page.**
+## **Cloud App**
 
-<div style="height:25px"></div>
+An instance of the [cloud app](https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp) is hosted in each cloud site.
+The [cloud app](https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp) is a simple application that echoes back an HTTP request.
+Remember while working through the lab, unless otherwise noted, the tests are displaying the headers and info **from the request received by the app**.
 
-## **Account Provisioning**
 
-Check the email used to launch your UDF deployment for a "welcome" or password reset email to the [lab tenant](https://f5-xc-lab-mcn.console.ves.volterra.io/).
-Update your password and log into the tenant.
+## **Lab Exercises**
 
-<p float="left">
-<a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">
-<img src="/static/email.png" height="300px" width="auth"/>
-<img src="/static/password.png" height="300px" width="auth"/>
-</a>
-</p>
+To complete the lab exercises, you will interact with a load balancer advertised from the Customer Edge in your UDF site in this [lab app](https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/labapp).
 
-<div class="alert alert-danger" role="alert">
-After you've logged in to the tenant you <strong>must</strong> visit the <a href="/setup" class="alert-link">setup page</a> before starting the exercises.
-</div>
+Curl on the UDF Runner
+
+criteria with symbols
+
+code block
+
+test
+
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+Next, visit the <strong><a href="/setup" >setup page</a></strong> before starting the exercises.
 
-<div style="height:25px"></div>
 
 
 

diff --git a/labapp/app/markdown/welcome.md b/labapp/app/markdown/welcome.md
@@ -0,0 +1,53 @@
+<div style="height:25px"></div>
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
+    <img src="/static/practical.png" width="700px" height="auto" alt="intro">
+</div>
+
+# **Welcome**
+
+<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+This lab is a "practical" training activity.
+Each exercise will ask you to **configure** F5 Distributed Cloud ("XC") objects to reinforce core XC Multi-Cloud Networking ("MCN") concepts. 
+Once configured, you'll be asked to **test** your configuration using this web application.
+
+<div style="height:25px"></div>
+
+## **Getting Started**
+
+When your UDF deployment launched, two automated processes started - Customer Edge ("CE") registration and account provisioning in the [lab tenant](https://f5-xc-lab-mcn.console.ves.volterra.io/).
+
+<div style="height:25px"></div>
+
+### **Customer Edge**
+
+The CE in the UDF deployment will registered with the [lab tenant](https://f5-xc-lab-mcn.console.ves.volterra.io/).
+CEs on first launch update software and, often, their OS. This can be very time consuming ~20 min from when the CE is booted.
+You can still get started on some preliminary tasks while waiting. 
+
+This lab app includes an indicator of the CE's status along with the site name in the navigation pane.
+The **site name** is needed when configuring the load balancer advertise policy. 
+
+<div style="height:25px"></div>
+
+### **Account Provisioning**
+
+Check the email used to launch your UDF deployment for a "welcome" or password reset email to the [lab tenant](https://f5-xc-lab-mcn.console.ves.volterra.io/).
+Update your password and log into the tenant.
+
+<p float="left">
+<a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">
+<img src="/static/email.png" height="300px" width="auth"/>
+<img src="/static/password.png" height="300px" width="auth"/>
+</a>
+</p>
+
+<div class="alert alert-danger" role="alert">
+After logging in to the tenant you <strong>must</strong> visit the <strong><a href="/setup" class="alert-link">setup page</a></strong> before starting the exercises.
+</div>
+
+<div  style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>
+
+Welcome to the lab! Next, read an <strong><a href="/overview" class="alert-link">overview</a></strong> that explains the lab environment, tools, and exercises.
+
+
diff --git a/labapp/app/static/mcn-prac-arch-base.png b/labapp/app/static/mcn-prac-arch-base.png
diff --git a/labapp/app/static/mcnp-aws.png b/labapp/app/static/mcnp-aws.png
diff --git a/labapp/app/static/mcnp-azure.png b/labapp/app/static/mcnp-azure.png
diff --git a/labapp/app/static/mcnp-udf.png b/labapp/app/static/mcnp-udf.png
diff --git a/labapp/app/templates/base.html b/labapp/app/templates/base.html
@@ -113,9 +113,9 @@
                     </button>
                     <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="/" class="link-dark rounded">Welcome</a></li>
+                        <li><a href="/overview" class="link-dark rounded">Overview</a></li>
                         <li><a href="/setup" class="link-dark rounded">Setup</a></li>
-                        <li><a href="/arch" class="link-dark rounded">Architecture</a></li>
                       </ul>
                     </div>
                   </li>