Merge pull request #3 from f5devcentral/dev

Dev

.github/workflows/cloudapp-build.yml

@@ -0,0 +1,59 @@
+name: CloudApp Build
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'dev'
+      - 'main'
+    paths:
+      - cloudapp/**
+    tags:
+      - 'v*'
+  pull_request:
+    branches:
+      - 'dev'
+    paths:
+      - cloudapp/**
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}/cloudapp
+  CONTEXT: cloudapp
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    permissions:
+        contents: read
+        packages: write
+    steps:
+      -
+        name: Checkout
+        uses: actions/checkout@v4
+      -
+        name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', github.event.repository.default_branch) }}
+      -
+        name: Login to Registry
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      -
+        name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: "{{defaultContext}}:${{env.CONTEXT}}"
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/lab-build.yml → .github/workflows/labapp-build.yml

@@ -1,4 +1,4 @@
-name: lab-build
+name: LabApp Build
 
 on:
   workflow_dispatch:

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "ms-azuretools.vscode-azurefunctions",
+    "ms-python.python"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Attach to Python Functions",
+            "type": "debugpy",
+            "request": "attach",
+            "connect": {
+                "host": "localhost",
+                "port": 9091
+            },
+            "preLaunchTask": "func: host start"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "azureFunctions.deploySubpath": "cloudapp/azure_function",
+    "azureFunctions.scmDoBuildDuringDeployment": true,
+    "azureFunctions.pythonVenv": ".venv",
+    "azureFunctions.projectLanguage": "Python",
+    "azureFunctions.projectRuntime": "~4",
+    "debug.internalConsoleOptions": "neverOpen",
+    "azureFunctions.projectSubpath": "cloudapp/azure_function",
+    "azureFunctions.projectLanguageModel": 2
+}

.vscode/tasks.json

@@ -0,0 +1,33 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "func",
+			"label": "func: host start",
+			"command": "host start",
+			"problemMatcher": "$func-python-watch",
+			"isBackground": true,
+			"dependsOn": "pip install (functions)",
+			"options": {
+				"cwd": "${workspaceFolder}/cloudapp/azure_function"
+			}
+		},
+		{
+			"label": "pip install (functions)",
+			"type": "shell",
+			"osx": {
+				"command": "${config:azureFunctions.pythonVenv}/bin/python -m pip install -r requirements.txt"
+			},
+			"windows": {
+				"command": "${config:azureFunctions.pythonVenv}\\Scripts\\python -m pip install -r requirements.txt"
+			},
+			"linux": {
+				"command": "${config:azureFunctions.pythonVenv}/bin/python -m pip install -r requirements.txt"
+			},
+			"problemMatcher": [],
+			"options": {
+				"cwd": "${workspaceFolder}/cloudapp/azure_function"
+			}
+		}
+	]
+}

cloudapp/.dockerignore

@@ -0,0 +1,10 @@
+.git
+.gitignore
+Dockerfile*
+docker-compose*
+README.md
+LICENSE
+SUPPORT.md
+.vscode
+.github
+zappa_settings.json

cloudapp/Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.10.14-slim
+LABEL org.opencontainers.image.description MCN Practical Cloud App
+
+ENV PYTHONUNBUFFERED=1
+WORKDIR /app
+COPY app .
+RUN pip install --no-cache-dir -r requirements.txt
+
+EXPOSE 5000
+ENV FLASK_APP app.py
+ENV FLASK_RUN_HOST 0.0.0.0
+
+CMD ["flask", "run"]

cloudapp/app/app.py

@@ -0,0 +1,58 @@
+"""
+MCN Practical Universal Web App
+"""
+import os
+import json
+from flask import Flask, jsonify, request, render_template
+
+def create_app():
+    app = Flask(__name__)
+    app.config['site'] =  os.getenv('SITE', "local")
+
+    @app.template_filter('to_pretty_json')
+    def to_pretty_json(value):
+        return json.dumps(value, sort_keys=True, indent=4)
+
+    @app.route('/raw', methods=['GET', 'POST', 'PUT', 'PATCH', 'DELETE'])
+    def echo():
+        """
+        Echo the request headers and data
+        """
+        headers = dict(request.headers)
+        data = None
+        if request.method in ['POST', 'PUT', 'PATCH', 'DELETE']:
+            try:
+                data = request.get_json() or request.form.to_dict()
+            except Exception as e:
+                print(e)
+        response = {
+            'request_headers': headers,
+            'request_env': app.config['site']
+        }
+        if data:
+            response['request_data'] = data
+        return jsonify(response)
+
+    @app.route('/', methods=['GET', 'POST', 'PUT', 'PATCH', 'DELETE'])
+    @app.route('/echo', methods=['GET', 'POST', 'PUT', 'PATCH', 'DELETE'])
+    def echo_html():
+        """ Same as /raw, just prettier"""
+        headers = dict(request.headers)
+        data = None
+        if request.method in ['POST', 'PUT', 'PATCH', 'DELETE']:
+            try:
+                data = request.get_json()
+            except Exception:
+                pass
+            try:
+                data = request.form.to_dict()
+            except Exception:
+                pass
+        return render_template('pretty_echo.html', request_env=app.config['site'], request_headers=headers, request_data=data)
+
+    return app
+
+app = create_app()
+
+if __name__ == '__main__':
+    app.run(debug=False)

cloudapp/app/requirements.txt

@@ -0,0 +1 @@
+flask ~=3.0.3

cloudapp/templates/pretty_echo.html → cloudapp/app/templates/pretty_echo.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Echo</title>
+    <title>MCN Practical Cloud App</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-dark.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
@@ -12,33 +12,39 @@
 
     <style>
         .json-output {
-            background-color: #333; /* Dark grey background */
-            color: #fff; /* Ensure text color is white */
+            background-color: #333; 
+            color: #fff; 
             padding: 1em;
             border-radius: 0.5em;
             overflow: auto;
         }
-        .json-output pre, .json-output code { /* Ensure all text within pre and code tags inherits white color */
+        .json-output pre, .json-output code { 
             color: inherit;
         }
+        pre code.hljs {
+            overflow-x: hidden;
+        }
+        pre code.hljs:hover {
+            overflow-x: auto;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div>
             <h1 class="mt-5">
-                <img src="/static/logo.png" alt="" width="auto" height="100"/>
+                <img src="https://github.com/f5devcentral/f5xc-lab-mcn-practical/blob/main/cloudapp/static/logo.png?raw=true" 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="/static/aws.png" alt="" width="auto" height="40">
+                <img src="https://github.com/f5devcentral/f5xc-lab-mcn-practical/blob/main/cloudapp/static/aws.png?raw=true" alt="" width="auto" height="40">
                 {% elif request_env == 'Azure' %}
-                <img src="/static/azure.png" alt="" width="auto" height="40">
+                <img src="https://github.com/f5devcentral/f5xc-lab-mcn-practical/blob/main/cloudapp/static/azure.png?raw=true" alt="" width="auto" height="40">
                 {% else %}
-                <img src="/static/flask.png" alt="" width="auto" height="40">
+                <img src="https://github.com/f5devcentral/f5xc-lab-mcn-practical/blob/main/cloudapp/static/flask.png?raw=true" alt="" width="auto" height="40">
                 {% endif %}
                 &nbsp{{ request_env }}
             </div>
@@ -55,39 +61,8 @@ <h1 class="mt-5">
             <div class="card-body json-output">
                 <pre><code class="json">{{ request_data | to_pretty_json }}</code></pre>
             </div>
-            <div>
-            <form action="/pretty_echo" method="POST">
-                <input type="hidden" name="example" value="data">
-                <button type="submit" class="btn btn-primary">Send POST Data</button>
-            </form>
-            </div>
         </div>
         {% endif %}
     </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', (event) => {
-            hljs.highlightAll();
-        });
-
-        function sendPostRequest() {
-            fetch('/pretty_echo', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    exampleField: 'exampleValue'
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                alert('POST request sent.');
-                console.log(data);
-            })
-            .catch((error) => {
-                console.error('Error:', error);
-            });
-        }
-        </script>
 </body>
 </html>