Modified component model list

net_maestro/core/templates/net_maestro/partials/models_list.html

@@ -0,0 +1,58 @@
+<div class="bg-base-300 overflow-y-auto" style="height: calc(100vh - 64px);">
+  <div class="p-8">
+    <div class="flex flex-row items-start justify-between gap-4">
+      <div>
+        <h1 class="text-3xl font-semibold">Available Component Models</h1>
+      </div>
+
+      <a
+        href="{% url 'custom-component-create' %}"
+        hx-get="{% url 'custom-component-create' %}"
+        hx-target="#main-content"
+        hx-swap="innerHTML"
+        hx-push-url="true"
+        class="btn btn-primary"
+      >
+        <i class="ri-add-line" aria-hidden="true"></i>
+        New Component Model
+      </a>
+      {% comment %}
+        TODO: Hook this up to a dummy form and document future plans
+      {% endcomment %}
+    </div>
+
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mt-8">
+      {% for model in models %}
+      <div class="card bg-base-100 shadow-sm">
+        <div class="card-body">
+          <div class="flex flex-row items-start justify-between gap-4">
+            <div class="flex flex-row items-center gap-3">
+              <i class="{{ model.icon_class }} text-xl" aria-hidden="true"></i>
+              <h2 class="card-title">{{ model.name }}</h2>
+            </div>
+            <div class="flex flex-row gap-2">
+              <div class="badge badge-outline">{{ model.type }}</div>
+              {% comment %} <div class="badge badge-outline">{{ model.engine }}</div> {% endcomment %}
+            </div>
+
+          </div>
+          <p class="text-[12.5px] leading-relaxed" style="color:var(--text-dim);"> {{model.description}}</p>
+          <div class="flex flex-row gap-2">
+            {% for param in model.parameters %}
+            <div class="badge badge-outline">{{ param}}</div>
+            {% comment %} <div class="badge badge-outline">{{ model.engine }}</div> {% endcomment %}
+            {% endfor%}
+          </div>
+        </div>
+      </div>
+      {% empty %}
+      <div class="card bg-base-100 shadow-sm border border-dashed border-base-content/20 xl:col-span-2">
+        <div class="card-body items-center justify-center text-center min-h-72">
+          <i class="ri-stack-line text-4xl text-base-content/50" aria-hidden="true"></i>
+          <h2 class="card-title mt-4">No models available</h2>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>

net_maestro/core/templates/net_maestro/shared/sidebar.html

@@ -1,6 +1,21 @@
 <div class="menu menu-lg bg-neutral h-[calc(100vh-64px)] w-16 flex flex-col">
   <!-- Navigation menu items -->
   <ul class="grid h-screen gap-6 content-baseline">
+    <!-- Models List Section -->
+    <li>
+      <a
+        href="{% url 'models-list-partial' %}"
+        hx-get="{% url 'models-list-partial' %}"
+        hx-target="#main-content"
+        hx-swap="innerHTML"
+        hx-push-url="true"
+        class="flex items-center justify-center"
+        :class="{ 'menu-active': activeItem === 'modelsList' }"
+        @click="activeItem = 'modelsList'"
+      >
+        <i class="ri-layout-grid-2-fill" aria-hidden="true"></i>
+      </a>
+    </li>
     <!-- Base Models section -->
     <li>
       <a

net_maestro/core/views.py

@@ -20,6 +20,32 @@
 from .tasks import run_phold_simulation
 
 
+def _avail_models_context() -> dict[str, object]:
+    """Return available models context for the configuration page."""
+    return {
+        "models": [
+            {
+                "name": "nw-lp",
+                "type": "host",
+                "description": """Network LP for compute-node endpoints.
+                                Carries an inline workload: block — traffic pattern, message count,
+                                timing, payload size.""",
+                "parameters": ["traffic", "num_messages", "arrival_time", "payload_size"],
+                "icon_class": "ri-organization-chart",
+                "usage_count": 3,
+            },
+            {
+                "name": "simplep2p",
+                "type": "router",
+                "description": "Simple point-to-point router.",
+                "parameters": ["routing", "latency", "bandwidth", "chunk_size", "vc_size"],
+                "icon_class": "ri-router-fill",
+                "usage_count": 2,
+            },
+        ],
+    }
+
+
 def _custom_component_context() -> dict[str, object]:
     """Return custom component context for the configuration page.
 
@@ -35,15 +61,15 @@ def _custom_component_context() -> dict[str, object]:
                 "icon_class": "ri-organization-chart",
             },
             {
-                "name": "ESNet Host",
+                "name": "nw-lp",
                 "type": "Host",
-                "engine": "PDES (ROSS)",
+                "engine": "PDES (CODES)",
                 "icon_class": "ri-server-line",
             },
             {
-                "name": "ESNet Router",
+                "name": "simplep2p",
                 "type": "Router",
-                "engine": "PDES (ROSS)",
+                "engine": "PDES (CODES)",
                 "icon_class": "ri-router-fill",
             },
         ],
@@ -52,7 +78,7 @@ def _custom_component_context() -> dict[str, object]:
                 "id": 1,
                 "name": "High Traffic Host",
                 "type": "Host",
-                "base_model": "ESNet Host",
+                "base_model": "nw-lp",
                 "icon_class": "ri-server-line",
                 "color_class": "text-primary",
                 "badge_class": "badge-primary",
@@ -68,7 +94,7 @@ def _custom_component_context() -> dict[str, object]:
                 "id": 2,
                 "name": "Regional Backbone Router",
                 "type": "Router",
-                "base_model": "ESNet Router",
+                "base_model": "simplep2p",
                 "icon_class": "ri-router-fill",
                 "color_class": "text-secondary",
                 "badge_class": "badge-secondary",
@@ -77,7 +103,7 @@ def _custom_component_context() -> dict[str, object]:
                     {"label": "Egress Bandwidth", "value": "400 Gbps"},
                     {"label": "Ingress Latency", "value": "1.25 ms"},
                     {"label": "Egress Latency", "value": "1.25 ms"},
-                    {"label": "Engine", "value": "PDES (ROSS)"},
+                    {"label": "Engine", "value": "PDES (CODES)"},
                     {"label": "Role", "value": "Backbone Transit"},
                 ],
             },
@@ -337,6 +363,21 @@ def simulation_config(request: HttpRequest) -> HttpResponse:
     return render(request, "net_maestro/index.html", context)
 
 
+def models_list(request: HttpRequest) -> HttpResponse:
+    """Render the custom component list.
+
+    TODO: Replace models_context() with database queries.
+    TODO: Build absolute action URLs for create, edit, duplicate, and delete once those
+    routes are implemented.
+    """
+    context = _avail_models_context()
+    partial_template = "net_maestro/partials/models_list.html"
+    if request.headers.get("HX-Request"):
+        return render(request, partial_template, context)
+    context.update({"active_page": "modelsList", "partial_template": partial_template})
+    return render(request, "net_maestro/index.html", context)
+
+
 def page_view(
     request: HttpRequest,
     partial: str,

net_maestro/urls.py

@@ -78,6 +78,11 @@
         views.simulation_config,
         name="simulation-config",
     ),
+    path(
+        "models/",
+        views.models_list,
+        name="models-list-partial",
+    ),
 ]
 
 if settings.DEBUG: