forage/client
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add compute

Browse Source 
Signed-off-by: kjuulh <contact@kjuulh.io>
This commit is contained in:
Kasper Juul Hermansen
2026-03-21 00:42:17 +01:00
parent 04e452ecc3
commit 7188b44624
17 changed files with 1307 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
templates/pages/compute.html.jinja Normal file
View File

@@ -0,0 +1,103 @@
{% extends "base.html.jinja" %}
{% block content %}
<section class="max-w-4xl mx-auto px-4 py-12">
<div class="flex items-center justify-between mb-8">
<h1 class="text-2xl font-bold">Compute</h1>
</div>
<p class="text-sm text-gray-500 mb-6">Managed container instances deployed through forage/containers destinations. Pay-as-you-go compute — no cluster setup required.</p>
{% if instances | length > 0 %}
<div class="border border-gray-200 rounded-lg overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-gray-50 text-left text-gray-500">
<tr>
<th class="px-5 py-3 font-medium">Project / Destination</th>
<th class="px-5 py-3 font-medium">Image</th>
<th class="px-5 py-3 font-medium">Region</th>
<th class="px-5 py-3 font-medium">Replicas</th>
<th class="px-5 py-3 font-medium">Resources</th>
<th class="px-5 py-3 font-medium">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
{% for inst in instances %}
<tr class="hover:bg-gray-50">
<td class="px-5 py-3">
{% if inst.project %}
<a href="/orgs/{{ org_name }}/projects/{{ inst.project }}" class="font-medium text-gray-900 hover:text-blue-600">{{ inst.project }}</a>
<span class="text-gray-400">/</span>
<span class="text-sm font-mono text-gray-600">{{ inst.destination }}</span>
{% if inst.environment %}
<span class="ml-1 text-xs px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500">{{ inst.environment }}</span>
{% endif %}
{% else %}
<span class="font-medium font-mono text-gray-900">{{ inst.resource_name }}</span>
{% endif %}
</td>
<td class="px-5 py-3 text-gray-600 font-mono text-xs">{{ inst.image }}</td>
<td class="px-5 py-3">
<span class="inline-flex items-center gap-1 text-xs font-mono">
<span class="w-1.5 h-1.5 rounded-full bg-green-400"></span>
{{ inst.region }}
</span>
</td>
<td class="px-5 py-3 text-gray-600 font-mono">{{ inst.replicas }}</td>
<td class="px-5 py-3 text-xs text-gray-500 font-mono">{{ inst.cpu }} / {{ inst.memory }}</td>
<td class="px-5 py-3">
{% if inst.status == "running" %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-green-700 bg-green-50 px-2 py-0.5 rounded-full">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Running
</span>
{% elif inst.status == "pending" %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-yellow-700 bg-yellow-50 px-2 py-0.5 rounded-full">
<span class="w-1.5 h-1.5 rounded-full bg-yellow-500 animate-pulse"></span>
Pending
</span>
{% else %}
<span class="text-xs text-gray-500">{{ inst.status }}</span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="border border-dashed border-gray-300 rounded-lg p-8 text-center">
<svg class="mx-auto mb-3 w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg>
<p class="text-sm text-gray-500 mb-2">No compute instances running</p>
<p class="text-xs text-gray-400">Create a <a href="/orgs/{{ org_name }}/destinations" class="text-blue-600 hover:underline">forage/containers destination</a> and deploy to get started.</p>
</div>
{% endif %}
{% if rollouts | length > 0 %}
<h2 class="text-lg font-semibold mt-10 mb-4">Recent Rollouts</h2>
<div class="border border-gray-200 rounded-lg overflow-hidden divide-y divide-gray-100">
{% for rollout in rollouts %}
<a href="/orgs/{{ org_name }}/compute/rollouts/{{ rollout.id }}" class="px-5 py-3 flex items-center justify-between hover:bg-gray-50 block">
<div class="flex items-center gap-3 min-w-0">
{% if rollout.status == "succeeded" %}
<span class="w-2 h-2 rounded-full bg-green-500 shrink-0"></span>
{% elif rollout.status == "in_progress" %}
<span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse shrink-0"></span>
{% elif rollout.status == "failed" %}
<span class="w-2 h-2 rounded-full bg-red-500 shrink-0"></span>
{% else %}
<span class="w-2 h-2 rounded-full bg-gray-400 shrink-0"></span>
{% endif %}
<span class="text-sm font-medium font-mono text-gray-900 truncate">{{ rollout.apply_id }}</span>
<span class="text-xs text-gray-400">{{ rollout.resources | length }} resource{% if rollout.resources | length != 1 %}s{% endif %}</span>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-gray-400">{{ rollout.status }}</span>
<svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</div>
</a>
{% endfor %}
</div>
{% endif %}
</section>
{% endblock %}

89
templates/pages/rollout_detail.html.jinja Normal file
View File

@@ -0,0 +1,89 @@
{% extends "base.html.jinja" %}
{% block content %}
<section class="max-w-4xl mx-auto px-4 py-12">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-6">
<a href="/orgs/{{ org_name }}/compute" class="hover:text-gray-700">Compute</a>
<span>/</span>
<span class="text-gray-900 font-mono">{{ rollout.apply_id }}</span>
</div>
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-3">
<h1 class="text-2xl font-bold">Rollout</h1>
{% if rollout.status == "succeeded" %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-green-700 bg-green-50 px-2 py-0.5 rounded-full">Succeeded</span>
{% elif rollout.status == "in_progress" %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-blue-700 bg-blue-50 px-2 py-0.5 rounded-full">In Progress</span>
{% elif rollout.status == "failed" %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-red-700 bg-red-50 px-2 py-0.5 rounded-full">Failed</span>
{% else %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-gray-600 bg-gray-100 px-2 py-0.5 rounded-full">{{ rollout.status }}</span>
{% endif %}
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-8 text-sm">
<div>
<dt class="text-gray-500">Apply ID</dt>
<dd class="font-mono text-xs mt-0.5">{{ rollout.apply_id }}</dd>
</div>
<div>
<dt class="text-gray-500">Namespace</dt>
<dd class="font-mono text-xs mt-0.5">{{ rollout.namespace }}</dd>
</div>
</div>
<h2 class="text-lg font-semibold mb-4">Resources ({{ rollout.resources | length }})</h2>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-gray-50 text-left text-gray-500">
<tr>
<th class="px-5 py-3 font-medium">Name</th>
<th class="px-5 py-3 font-medium">Kind</th>
<th class="px-5 py-3 font-medium">Status</th>
<th class="px-5 py-3 font-medium">Message</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
{% for r in rollout.resources %}
<tr>
<td class="px-5 py-3 font-medium font-mono text-gray-900">{{ r.name }}</td>
<td class="px-5 py-3 text-xs font-mono text-gray-500">{{ r.kind }}</td>
<td class="px-5 py-3">
{% if r.status == "succeeded" %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-green-700">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Succeeded
</span>
{% elif r.status == "in_progress" %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-blue-700">
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></span>
In Progress
</span>
{% elif r.status == "failed" %}
<span class="inline-flex items-center gap-1 text-xs font-medium text-red-700">
<span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>
Failed
</span>
{% else %}
<span class="text-xs text-gray-500">{{ r.status }}</span>
{% endif %}
</td>
<td class="px-5 py-3 text-xs text-gray-500">{{ r.message }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if rollout.labels | length > 0 %}
<h2 class="text-lg font-semibold mt-8 mb-4">Labels</h2>
<div class="flex flex-wrap gap-2">
{% for label in rollout.labels %}
<span class="text-xs font-mono px-2 py-1 rounded bg-gray-100 text-gray-600">{{ label.key }}={{ label.value }}</span>
{% endfor %}
</div>
{% endif %}
</section>
{% endblock %}