Update http functions overview page to show functions in searchable nested directory

2025-11-19 17:28:35 +11:00
parent b210188556
commit 00c0d19e3e
8 changed files with 366 additions and 207 deletions
--- a/db.py
+++ b/db.py
@@ -57,32 +57,41 @@ class DataBase():
        finally:
            cur.close()
    
-    def get_http_functions_for_user(self, user_id):
+    def get_http_functions_for_user(self, user_id, search_query=None):
+        if search_query:
+            search_pattern = f"%{search_query}%"
            http_functions = self.execute(
-            'SELECT id, user_id, NAME, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, runtime FROM http_functions WHERE user_id=%s ORDER by id DESC', [user_id])
+                'SELECT id, user_id, NAME, path, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, runtime FROM http_functions WHERE user_id=%s AND (NAME ILIKE %s OR path ILIKE %s) ORDER by id DESC', 
+                [user_id, search_pattern, search_pattern]
+            )
+        else:
+            http_functions = self.execute(
+                'SELECT id, user_id, NAME, path, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, runtime FROM http_functions WHERE user_id=%s ORDER by id DESC', 
+                [user_id]
+            )
        return http_functions
    
    def get_http_function(self, user_id, name):
        http_function = self.execute(
-            'SELECT id, user_id, NAME, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, created_at, runtime FROM http_functions WHERE user_id=%s AND NAME=%s', [user_id, name], one=True)
+            'SELECT id, user_id, NAME, path, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, created_at, runtime FROM http_functions WHERE user_id=%s AND NAME=%s', [user_id, name], one=True)
        return http_function
    
    def get_http_function_by_id(self, user_id, http_function_id):
        http_function = self.execute(
-            'SELECT id, user_id, NAME, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, created_at, runtime FROM http_functions WHERE user_id=%s AND id=%s', [user_id, http_function_id], one=True)
+            'SELECT id, user_id, NAME, path, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, created_at, runtime FROM http_functions WHERE user_id=%s AND id=%s', [user_id, http_function_id], one=True)
        return http_function
    
-    def create_new_http_function(self, user_id, name, script_content, environment_info, is_public, log_request, log_response, runtime):
+    def create_new_http_function(self, user_id, name, path, script_content, environment_info, is_public, log_request, log_response, runtime):
        self.execute(
-            'INSERT INTO http_functions (user_id, NAME, script_content, environment_info, is_public, log_request, log_response, runtime) VALUES (%s, %s, %s, %s, %s, %s, %s, %s)',
-            [user_id, name, script_content, environment_info, is_public, log_request, log_response, runtime],
+            'INSERT INTO http_functions (user_id, NAME, path, script_content, environment_info, is_public, log_request, log_response, runtime) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s)',
+            [user_id, name, path, script_content, environment_info, is_public, log_request, log_response, runtime],
            commit=True
        )

-    def edit_http_function(self, user_id, function_id, name, script_content, environment_info, is_public, log_request, log_response, runtime):
+    def edit_http_function(self, user_id, function_id, name, path, script_content, environment_info, is_public, log_request, log_response, runtime):
        updated_version = self.execute(
-            'UPDATE http_functions SET NAME=%s, script_content=%s, environment_info=%s, is_public=%s, log_request=%s, log_response=%s, runtime=%s WHERE user_id=%s AND id=%s RETURNING version_number',
-            [name, script_content, environment_info, is_public, log_request, log_response, runtime, user_id, function_id],
+            'UPDATE http_functions SET NAME=%s, path=%s, script_content=%s, environment_info=%s, is_public=%s, log_request=%s, log_response=%s, runtime=%s WHERE user_id=%s AND id=%s RETURNING version_number',
+            [name, path, script_content, environment_info, is_public, log_request, log_response, runtime, user_id, function_id],
            commit=True, one=True
        )
        return updated_version
--- a/routes/http.py
+++ b/routes/http.py
@@ -7,7 +7,7 @@ from datetime import datetime, timezone, timedelta
 import json
 from services import create_http_function_view_model, create_http_functions_view_model

-'''
+"""
 CREATE TABLE http_function_versions (
    id SERIAL PRIMARY KEY,
    http_function_id INT NOT NULL,
@@ -66,7 +66,7 @@ AFTER INSERT OR UPDATE
 ON http_functions
 FOR EACH ROW
 EXECUTE PROCEDURE fn_http_functions_versioning();
-'''
+"""

 DEFAULT_SCRIPT = """async (req) => {
    console.log(`Method:${req.method}`)
@@ -104,18 +104,52 @@ DEFAULT_PYTHON_SCRIPT = """def main(request, environment):
    return {"body": "Hello from Python!"}
 """

-http = Blueprint('http', __name__)
+http = Blueprint("http", __name__)
+
+
+def group_functions_by_path(functions):
+    grouped = {}
+    for function in functions:
+        # Use the explicit path column
+        full_path = function.get("path", "") or ""
+        path_parts = [p for p in full_path.split("/") if p]
+        
+        current_level = grouped
+        for part in path_parts:
+            if part not in current_level:
+                current_level[part] = {}
+            current_level = current_level[part]
+            
+        function["_is_function"] = True
+        current_level[function["name"]] = function
+    return grouped

@http.route("/overview", methods=["GET"])
@login_required
 def overview():
    user_id = current_user.id
-    http_functions = db.get_http_functions_for_user(user_id)
-    http_functions = create_http_functions_view_model(http_functions)
-    if htmx:
-        return render_block(environment, "dashboard/http_functions/overview.html", "page", http_functions=http_functions)
-    return render_template("dashboard/http_functions/overview.html", http_functions=http_functions)
+    search_query = request.args.get("q", "")
    
+    http_functions = db.get_http_functions_for_user(user_id, search_query)
+    http_functions_view_model = create_http_functions_view_model(http_functions)
+    grouped_functions = group_functions_by_path(http_functions_view_model)
+
+    if request.headers.get('HX-Target') == 'function-list':
+        return render_block(environment, "dashboard/http_functions/overview.html", "function_list", http_functions=grouped_functions)
+
+    if htmx:
+        return render_block(
+            environment,
+            "dashboard/http_functions/overview.html",
+            "page",
+            http_functions=grouped_functions,
+            search_query=search_query
+        )
+    return render_template(
+        "dashboard/http_functions/overview.html", 
+        http_functions=grouped_functions,
+        search_query=search_query
+    )

@http.route("/new", methods=["GET", "POST"])
@login_required
@@ -123,36 +157,52 @@ def new():
    user_id = current_user.id
    if request.method == "GET":
        context = {
-            'user_id': user_id,
-            'name': 'foo',
-            'script': DEFAULT_SCRIPT,
-            'default_python_script': DEFAULT_PYTHON_SCRIPT,
-            'environment_info': DEFAULT_ENVIRONMENT,
-            'is_public': False,
-            'log_request': True,
-            'log_response': False
+            "user_id": user_id,
+            "name": "foo",
+            "path": "",
+            "script": DEFAULT_SCRIPT,
+            "default_python_script": DEFAULT_PYTHON_SCRIPT,
+            "environment_info": DEFAULT_ENVIRONMENT,
+            "is_public": False,
+            "log_request": True,
+            "log_response": False,
        }
        if htmx:
-            return render_block(environment, 'dashboard/http_functions/new.html', 'page', **context)
+            return render_block(
+                environment, "dashboard/http_functions/new.html", "page", **context
+            )
        return render_template("dashboard/http_functions/new.html", **context)
    try:
-        name = request.json.get('name')
-        script_content = request.json.get('script_content')
-        environment_info = request.json.get('environment_info')
-        is_public = request.json.get('is_public')
-        log_request = request.json.get('log_request')
-        log_response = request.json.get('log_response')
-        runtime = request.json.get('runtime', 'node')
+        name = request.json.get("name")
+        path = request.json.get("path", "")
+        script_content = request.json.get("script_content")
+        environment_info = request.json.get("environment_info")
+        is_public = request.json.get("is_public")
+        log_request = request.json.get("log_request")
+        log_response = request.json.get("log_response")
+        runtime = request.json.get("runtime", "node")

-        db.create_new_http_function(user_id, name, script_content, environment_info, is_public, log_request, log_response, runtime)
+        db.create_new_http_function(
+            user_id,
+            name,
+            path,
+            script_content,
+            environment_info,
+            is_public,
+            log_request,
+            log_response,
+            runtime,
+        )

-        return jsonify({
-            "status": "success",
-            "message": "Http function created successfully"
-        }), 200
+        return (
+            jsonify(
+                {"status": "success", "message": "Http function created successfully"}
+            ),
+            200,
+        )
    except Exception as e:
        print(e)
-        return { "status": "error", "message": str(e) }
+        return {"status": "error", "message": str(e)}


@http.route("/edit/<int:function_id>", methods=["POST"])
@@ -160,20 +210,33 @@ def new():
 def edit(function_id):
    try:
        user_id = current_user.id
-        name = request.json.get('name')
-        script_content = request.json.get('script_content')
-        environment_info = request.json.get('environment_info')
-        is_public = request.json.get('is_public')
-        log_request = request.json.get('log_request')
-        log_response = request.json.get('log_response')
-        runtime = request.json.get('runtime', 'node')
+        name = request.json.get("name")
+        path = request.json.get("path", "")
+        script_content = request.json.get("script_content")
+        environment_info = request.json.get("environment_info")
+        is_public = request.json.get("is_public")
+        log_request = request.json.get("log_request")
+        log_response = request.json.get("log_response")
+        runtime = request.json.get("runtime", "node")

-        updated_version = db.edit_http_function(user_id, function_id, name, script_content, environment_info, is_public, log_request, log_response, runtime)
+        updated_version = db.edit_http_function(
+            user_id,
+            function_id,
+            name,
+            path,
+            script_content,
+            environment_info,
+            is_public,
+            log_request,
+            log_response,
+            runtime,
+        )

-        return { "status": "success", "message": f'{name} updated' }
+        return {"status": "success", "message": f"{name} updated"}
    except Exception as e:
        print(e)
-        return { "status": "error", "message": str(e) }
+        return {"status": "error", "message": str(e)}
+

@http.route("/delete/<int:function_id>", methods=["DELETE"])
@login_required
@@ -182,11 +245,15 @@ def delete(function_id):
        user_id = current_user.id

        db.execute(
-            'DELETE FROM http_functions WHERE user_id=%s AND id=%s', [user_id, function_id], commit=True)
+            "DELETE FROM http_functions WHERE user_id=%s AND id=%s",
+            [user_id, function_id],
+            commit=True,
+        )

-        return { "status": "success", "message": f'Function deleted' }
+        return {"status": "success", "message": f"Function deleted"}
    except Exception as e:
-        return jsonify({"status": 'error', "message": str(e)}), 500
+        return jsonify({"status": "error", "message": str(e)}), 500
+

@http.route("/logs/<int:function_id>", methods=["GET"])
@login_required
@@ -194,12 +261,27 @@ def logs(function_id):
    user_id = current_user.id
    http_function = db.get_http_function_by_id(user_id, function_id)
    if not http_function:
-        return jsonify({'error': 'Function not found'}), 404
-    name = http_function['name']
+        return jsonify({"error": "Function not found"}), 404
+    name = http_function["name"]
    http_function_invocations = db.get_http_function_invocations(function_id)
    if htmx:
-        return render_block(environment, 'dashboard/http_functions/logs.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function_invocations=http_function_invocations)
-    return render_template("dashboard/http_functions/logs.html", user_id=user_id, name=name, function_id=function_id, http_function_invocations=http_function_invocations)
+        return render_block(
+            environment,
+            "dashboard/http_functions/logs.html",
+            "page",
+            user_id=user_id,
+            function_id=function_id,
+            name=name,
+            http_function_invocations=http_function_invocations,
+        )
+    return render_template(
+        "dashboard/http_functions/logs.html",
+        user_id=user_id,
+        name=name,
+        function_id=function_id,
+        http_function_invocations=http_function_invocations,
+    )
+

@http.route("/client/<int:function_id>", methods=["GET"])
@login_required
@@ -207,49 +289,70 @@ def client(function_id):
    user_id = current_user.id
    http_function = db.get_http_function_by_id(user_id, function_id)
    if not http_function:
-        return jsonify({'error': 'Function not found'}), 404
+        return jsonify({"error": "Function not found"}), 404

    http_function = create_http_function_view_model(http_function)
    if htmx:
-        return render_block(environment, 'dashboard/http_functions/client.html', 'page', function_id=function_id, **http_function)
-    return render_template("dashboard/http_functions/client.html", function_id=function_id, **http_function)
+        return render_block(
+            environment,
+            "dashboard/http_functions/client.html",
+            "page",
+            function_id=function_id,
+            **http_function,
+        )
+    return render_template(
+        "dashboard/http_functions/client.html", function_id=function_id, **http_function
+    )

-@http.route('/history/<int:function_id>')
+
+@http.route("/history/<int:function_id>")
@login_required
 def history(function_id):
    # Fetch the http function to verify ownership
-    http_function = db.execute("""
+    http_function = db.execute(
+        """
        SELECT id, name, script_content AS code, version_number
        FROM http_functions 
        WHERE id = %s AND user_id = %s
-    """, [function_id, current_user.id], one=True)
+    """,
+        [function_id, current_user.id],
+        one=True,
+    )

    if not http_function:
-        flash('Http function not found', 'error')
-        return redirect(url_for('http.overview'))
+        flash("Http function not found", "error")
+        return redirect(url_for("http.overview"))

    # Fetch all versions
-    versions = db.execute("""
+    versions = db.execute(
+        """
        SELECT version_number, script_content AS script, updated_at AS versioned_at
        FROM http_functions_versions
        WHERE http_function_id = %s
        ORDER BY version_number DESC
-    """, [function_id])
+    """,
+        [function_id],
+    )

    # Convert datetime objects to ISO format strings
    for version in versions:
-        version['versioned_at'] = version['versioned_at'].isoformat() if version['versioned_at'] else None
+        version["versioned_at"] = (
+            version["versioned_at"].isoformat() if version["versioned_at"] else None
+        )

    args = {
-        'user_id': current_user.id,
-        'function_id': function_id,
-        'http_function': http_function,
-        'versions': versions
+        "user_id": current_user.id,
+        "function_id": function_id,
+        "http_function": http_function,
+        "versions": versions,
    }

    if htmx:
-        return render_block(environment, 'dashboard/http_functions/history.html', 'page', **args)
-    return render_template('dashboard/http_functions/history.html', **args)
+        return render_block(
+            environment, "dashboard/http_functions/history.html", "page", **args
+        )
+    return render_template("dashboard/http_functions/history.html", **args)
+

@http.route("/editor/<int:function_id>", methods=["GET"])
@login_required
@@ -257,27 +360,30 @@ def editor(function_id):
    user_id = current_user.id
    http_function = db.get_http_function_by_id(user_id, function_id)
    if not http_function:
-        return jsonify({'error': 'Function not found'}), 404
+        return jsonify({"error": "Function not found"}), 404

    # Create a view model with all necessary data for the editor
    editor_data = {
-        'id': http_function['id'],
-        'name': http_function['name'],
-        'script_content': http_function['script_content'],
-        'environment_info': json.dumps(http_function['environment_info'], indent=2),
-        'is_public': http_function['is_public'],
-        'log_request': http_function['log_request'],
-        'log_response': http_function['log_response'],
-        'version_number': http_function['version_number'],
-        'runtime': http_function.get('runtime', 'node'),
-        'user_id': user_id,
-        'function_id': function_id,
+        "id": http_function["id"],
+        "name": http_function["name"],
+        "path": http_function.get("path", ""),
+        "script_content": http_function["script_content"],
+        "environment_info": json.dumps(http_function["environment_info"], indent=2),
+        "is_public": http_function["is_public"],
+        "log_request": http_function["log_request"],
+        "log_response": http_function["log_response"],
+        "version_number": http_function["version_number"],
+        "runtime": http_function.get("runtime", "node"),
+        "user_id": user_id,
+        "function_id": function_id,
        # Add new URLs for navigation
-        'cancel_url': url_for('http.overview'),
-        'edit_url': url_for('http.editor', function_id=function_id),
+        "cancel_url": url_for("http.overview"),
+        "edit_url": url_for("http.editor", function_id=function_id),
    }

    if htmx:
-        return render_block(environment, "dashboard/http_functions/editor.html", "page", **editor_data)
+        return render_block(
+            environment, "dashboard/http_functions/editor.html", "page", **editor_data
+        )

    return render_template("dashboard/http_functions/editor.html", **editor_data)
--- a/services.py
+++ b/services.py
@@ -3,6 +3,8 @@ def create_http_function_view_model(http_function):
        "id": http_function['id'],
        "user_id": http_function['user_id'],
        "name": http_function['name'],
+        "path": http_function['path'],
+        "runtime": http_function['runtime'],
        "script_content": http_function['script_content'],
        "invoked_count": http_function['invoked_count'],
        "environment_info": http_function['environment_info'],
--- a/static/js/mithril/editor.js
+++ b/static/js/mithril/editor.js
@@ -23,8 +23,10 @@ const Editor = {

    // Name + version
    this.name = vnode.attrs.name || "foo";
+    this.path = vnode.attrs.path || "";
    this.versionNumber = vnode.attrs.versionNumber || "1";
    this.nameEditing = false;
+    this.pathEditing = false;

    // Editor defaults
    this.jsValue = vnode.attrs.jsValue || "";
@@ -151,6 +153,7 @@ const Editor = {
    try {
      let payload = {
        name: this.name,
+        path: this.path,
        script_content: this.jsValue,
        environment_info: this.jsonValue,
        is_public: this.isPublic,
@@ -175,6 +178,7 @@ const Editor = {
          }
        : {
            name: this.name,
+            path: this.path,
            script_content: this.jsValue,
            environment_info: this.jsonValue,
            is_public: this.isPublic,
@@ -296,6 +300,27 @@ const Editor = {
                      },
                      [
                        m("span", { class: "inline-flex items-center" }, [
+                          // Path
+                          !this.pathEditing
+                            ? m(
+                                "span",
+                                {
+                                  class: "font-mono text-gray-500 mr-1",
+                                  onclick: () => (this.pathEditing = true),
+                                },
+                                this.path ? `${this.path}/` : "/"
+                              )
+                            : m("input", {
+                                class:
+                                  "bg-gray-50 border border-gray-300 text-sm rounded-lg p-1.5 dark:bg-gray-700 dark:border-gray-600 w-24 mr-1",
+                                value: this.path,
+                                placeholder: "path",
+                                oninput: (e) => (this.path = e.target.value),
+                                onblur: () => (this.pathEditing = false),
+                                autofocus: true,
+                              }),
+
+                          // Name
                          !this.nameEditing
                            ? m(
                                "span",
@@ -349,7 +374,22 @@ const Editor = {

                // If adding a new function
                  this.isAdd
-                  ? m("div", { class: "w-full" }, [
+                  ? m("div", { class: "flex space-x-2 w-full" }, [
+                      m("div", { class: "w-1/3" }, [
+                        m(
+                          "label",
+                          { class: "block mb-2 text-sm font-medium" },
+                          "Path"
+                        ),
+                        m("input", {
+                          type: "text",
+                          class: "bg-gray-50 border w-full p-2.5 rounded-lg",
+                          placeholder: "api/v1",
+                          value: this.path,
+                          oninput: (e) => (this.path = e.target.value),
+                        }),
+                      ]),
+                      m("div", { class: "w-2/3" }, [
                        m(
                          "label",
                          { class: "block mb-2 text-sm font-medium" },
@@ -363,6 +403,7 @@ const Editor = {
                          value: this.name,
                          oninput: (e) => (this.name = e.target.value),
                        }),
+                      ]),
                    ])
                  : null,
              ])
--- a/templates/dashboard/http_functions/_function_list.html
+++ b/templates/dashboard/http_functions/_function_list.html
@@ -0,0 +1,68 @@
+{% macro render_functions(functions, path_prefix='') %}
+<div class="pl-4">
+    {% for name, children in functions.items() %}
+    {% if children['_is_function'] is not defined %}
+    <details class="group" {% if path_prefix=='' %}open{% endif %}>
+        <summary class="flex items-center gap-2 py-2 cursor-pointer text-gray-700 hover:text-gray-900 font-medium">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-5 h-5 text-gray-400 group-open:rotate-90 transition-transform">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+            </svg>
+            <span>{{ name }}</span>
+        </summary>
+        <div class="ml-4 border-l border-gray-200">
+            {{ render_functions(children, path_prefix + name + '/') }}
+        </div>
+    </details>
+    {% else %}
+    {% set function = children %}
+    <div class="flex items-center gap-2 py-2 pl-5 text-gray-800 hover:bg-gray-50 rounded-md">
+        <div class="flex-grow flex items-center gap-2 cursor-pointer"
+            hx-get="{{ url_for('http.editor', function_id=function['id']) }}" hx-target="#container" hx-swap="innerHTML"
+            hx-push-url="true">
+            <span class="font-medium">{{ function.name.split('/')[-1] }}</span>
+            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
+                v{{ function.version_number }}
+            </span>
+            <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full uppercase">
+                {{ function.runtime }}
+            </span>
+            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
+                {{ function.invoked_count }}
+            </span>
+        </div>
+        <div class="flex-shrink-0 flex items-center gap-2">
+            <button class="p-1 text-gray-400 hover:text-gray-600"
+                hx-get="{{ url_for('http.logs', function_id=function['id']) }}" hx-target="#container"
+                hx-swap="innerHTML" hx-push-url="true">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+            </button>
+            <a href="{{ url_for('execute_http_function', user_id=function.user_id, function=function.name) }}"
+                target="_blank" class="p-1 text-gray-400 hover:text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                </svg>
+            </a>
+            <button class="p-1 text-gray-400 hover:text-gray-600"
+                hx-get="{{ url_for('http.client', function_id=function['id']) }}" hx-target="#container"
+                hx-swap="innerHTML" hx-push-url="true">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>
+{% endmacro %}
--- a/templates/dashboard/http_functions/editor.html
+++ b/templates/dashboard/http_functions/editor.html
@@ -23,6 +23,7 @@ history_url=url_for('http.history', function_id=function_id)) }}
  m.mount(document.getElementById("app"), {
    view: () => m(Editor, {
      name: '{{ name }}',
+      path: '{{ path }}',
      functionId: {{ id }},
    jsValue: {{ script_content | tojson | safe }},
    jsonValue: {{ environment_info | tojson | safe }},
--- a/templates/dashboard/http_functions/new.html
+++ b/templates/dashboard/http_functions/new.html
@@ -23,6 +23,7 @@ title='New HTTP Function')
    m.mount(document.getElementById("app"), {
        view: () => m(Editor, {
            name: '{{ name }}',
+            path: '{{ path }}',
            jsValue: {{ script | tojson | safe }},
        pythonValue: {{ default_python_script | tojson | safe }},
        jsonValue: {{ environment_info | tojson | safe }},
--- a/templates/dashboard/http_functions/overview.html
+++ b/templates/dashboard/http_functions/overview.html
@@ -2,7 +2,7 @@

 {% block page %}

-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+<div class="px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex items-center mb-6" data-id="51">
        <h1 class="text-2xl font-bold text-gray-900">HTTP Functions</h1>
        <button
@@ -16,103 +16,34 @@
        </button>
    </div>

-    <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
-        <div class="overflow-x-auto">
-            <table class="w-full">
-                <thead>
-                    <tr class="bg-gray-50 border-b border-gray-200">
-                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Name</th>
-                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">URL
-                        </th>
-                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900 hidden md:table-cell">Actions
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-200">
-                    {% for function in http_functions %}
-                    <tr class="hover:bg-gray-50">
-                        <td class="px-6 py-4">
-                            <div class="flex items-center gap-2 cursor-pointer"
-                                hx-get="{{ url_for('http.editor', function_id=function.id) }}" hx-target="#container"
-                                hx-swap="innerHTML" hx-push-url="true">
-                                <span class="font-medium text-gray-900">{{ function.name }}</span>
-                                <span
-                                    class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
-                                    #{{ function.invoked_count }}
-                                </span>
-                                <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
-                                    v{{ function.version_number }}
-                                </span>
-                                {% if function.is_public %}
-                                <span class="text-gray-500">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                        stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
-                                    </svg>
-                                </span>
-                                {% endif %}
+    <div class="mb-6">
+        <input type="text" name="q" placeholder="Search functions..."
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
+            value="{{ search_query }}" hx-get="{{ url_for('http.overview') }}" hx-trigger="keyup changed delay:500ms"
+            hx-target="#function-list" hx-headers='{"HX-Target": "function-list"}' hx-push-url="true">
    </div>
-                        </td>
-                        <td class="px-6 py-4">
-                            <div class="flex items-center">
-                                <a href="{{ url_for('execute_http_function', user_id=function.user_id, function=function.name) }}"
-                                    class="text-blue-600 hover:text-blue-800">
-                                    {{ url_for('execute_http_function', user_id=function.user_id,
-                                    function=function.name) }}
-                                </a>
-                                <button class="ml-2 text-gray-400 hover:text-gray-600">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                        stroke-linejoin="round">
-                                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
-                                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
-                                    </svg>
-                                </button>
-                            </div>
-                        </td>
-                        <td class="px-6 py-4 hidden md:table-cell">
-                            <div class="flex gap-3">
-                                <button
-                                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-indigo-700 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-200"
-                                    hx-get="{{ url_for('http.logs', function_id=function.id) }}" hx-target="#container"
-                                    hx-swap="innerHTML" hx-push-url="true">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                    </svg>
-                                    Logs
-                                </button>
-                                <button
-                                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-indigo-700 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-200"
-                                    hx-get="{{ url_for('http.client', function_id=function.id) }}"
-                                    hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                    Try
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    {% endfor %}
+
+    <div id="function-list">
+        {% block function_list %}
+        {% from 'dashboard/http_functions/_function_list.html' import render_functions %}
+        {{ render_functions(http_functions) }}

        {% if http_functions|length == 0 %}
-                    <tr>
-                        <td colspan="3" class="px-6 py-8 text-center">
-                            <p class="text-gray-500 text-lg">No functions found</p>
-                        </td>
-                    </tr>
-                    {% endif %}
-                </tbody>
-            </table>
+        <div class="py-12">
+            <div class="text-center">
+                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                    aria-hidden="true">
+                    <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+                </svg>
+                <h3 class="mt-2 text-lg font-medium text-gray-900">No functions found</h3>
+                <p class="mt-1 text-sm text-gray-500">Get started by creating a new function.</p>
            </div>
        </div>
+        {% endif %}
+        {% endblock %}
+    </div>
 </div>

 {% endblock %}