104 lines
6.1 KiB
Django/Jinja
104 lines
6.1 KiB
Django/Jinja
{% 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 %}
|