184 lines
13 KiB
Django/Jinja
184 lines
13 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">Environments & Destinations</h1>
|
|
</div>
|
|
|
|
{% if environments | length > 0 %}
|
|
<div class="space-y-6">
|
|
{% for env in environments %}
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="px-5 py-3 bg-gray-50 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full shrink-0 {% if 'prod' in env.name and 'preprod' not in env.name %}bg-pink-500{% elif 'preprod' in env.name or 'pre-prod' in env.name %}bg-orange-500{% elif 'stag' in env.name %}bg-yellow-500{% elif 'dev' in env.name %}bg-violet-500{% else %}bg-gray-400{% endif %}"></span>
|
|
<span class="font-medium text-gray-900">{{ env.name }}</span>
|
|
{% if env.description %}
|
|
<span class="text-xs text-gray-500">— {{ env.description }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<span class="text-xs text-gray-400">order: {{ env.sort_order }}</span>
|
|
</div>
|
|
|
|
{% if env.destinations | length > 0 %}
|
|
<div class="divide-y divide-gray-100">
|
|
{% for dest in env.destinations %}
|
|
<a href="/orgs/{{ org_name }}/destinations/detail?name={{ dest.name | urlencode }}" class="px-5 py-3 flex items-center justify-between hover:bg-gray-50 transition-colors block">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
<span class="text-sm font-medium text-gray-900">{{ dest.name }}</span>
|
|
{% if dest.type_name %}
|
|
<span class="text-xs px-1.5 py-0.5 rounded-full bg-blue-50 text-blue-700">{{ dest.type_name }}{% if dest.type_version %} v{{ dest.type_version }}{% endif %}</span>
|
|
{% endif %}
|
|
{% if dest.metadata | length > 0 %}
|
|
<span class="text-xs text-gray-400">{{ dest.metadata | length }} key{% if dest.metadata | length != 1 %}s{% endif %}</span>
|
|
{% endif %}
|
|
</div>
|
|
<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>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="px-5 py-3 text-sm text-gray-400">No destinations in this environment</div>
|
|
{% endif %}
|
|
|
|
{% if is_admin %}
|
|
<details class="border-t border-gray-100">
|
|
<summary class="px-5 py-3 bg-gray-50/50 text-sm text-gray-500 cursor-pointer hover:text-gray-700 select-none">Add destination to {{ env.name }}</summary>
|
|
<div class="px-5 py-4">
|
|
<form method="post" action="/orgs/{{ org_name }}/destinations/create" class="space-y-3">
|
|
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
|
<input type="hidden" name="environment" value="{{ env.name }}">
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Name</label>
|
|
<input type="text" name="name" placeholder="e.g. my-app-prod" required
|
|
class="w-full text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Type name <span class="text-gray-400">(optional)</span></label>
|
|
<input type="text" name="type_name" placeholder="e.g. kubernetes"
|
|
class="w-full text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Type org <span class="text-gray-400">(optional)</span></label>
|
|
<input type="text" name="type_organisation" placeholder="defaults to {{ org_name }}"
|
|
class="w-full text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Type version</label>
|
|
<input type="number" name="type_version" value="1" min="1"
|
|
class="w-full text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Metadata <span class="text-gray-400">(optional key-value pairs)</span></label>
|
|
<div class="space-y-1.5 create-meta-rows">
|
|
<div class="flex gap-2 items-center metadata-row">
|
|
<input type="text" name="metadata_keys" placeholder="key" class="flex-1 text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-green-500 font-mono">
|
|
<input type="text" name="metadata_values" placeholder="value" class="flex-1 text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-green-500 font-mono">
|
|
<button type="button" onclick="this.closest('.metadata-row').remove()"
|
|
class="text-gray-300 hover:text-red-500 transition-colors p-1" title="Remove row">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" onclick="addMetaRow(this.previousElementSibling)"
|
|
class="mt-1.5 text-xs text-green-600 hover:text-green-700 font-medium transition-colors flex items-center gap-1">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
|
Add row
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 transition-colors">Create destination</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</details>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if orphan_destinations | length > 0 %}
|
|
<div class="mt-6 border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="px-5 py-3 bg-gray-50">
|
|
<span class="font-medium text-gray-700">Other destinations</span>
|
|
</div>
|
|
<div class="divide-y divide-gray-100">
|
|
{% for dest in orphan_destinations %}
|
|
<a href="/orgs/{{ org_name }}/destinations/detail?name={{ dest.name | urlencode }}" class="px-5 py-3 flex items-center justify-between hover:bg-gray-50 transition-colors block">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
<span class="text-sm text-gray-900">{{ dest.name }}</span>
|
|
<span class="text-xs px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ dest.environment }}</span>
|
|
{% if dest.type_name %}
|
|
<span class="text-xs px-1.5 py-0.5 rounded-full bg-blue-50 text-blue-700">{{ dest.type_name }}{% if dest.type_version %} v{{ dest.type_version }}{% endif %}</span>
|
|
{% endif %}
|
|
</div>
|
|
<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>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="border border-gray-200 rounded-lg p-8 text-center text-gray-500">
|
|
<p class="font-medium text-gray-700">No environments yet</p>
|
|
<p class="mt-1 text-sm">Create your first environment below, or use <code class="bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">forest env create</code> from the CLI.</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if is_admin %}
|
|
<div class="mt-8 border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="px-5 py-3 bg-gray-50">
|
|
<span class="font-medium text-gray-900">Create environment</span>
|
|
</div>
|
|
<div class="px-5 py-4">
|
|
<form method="post" action="/orgs/{{ org_name }}/destinations/environments" class="flex flex-col gap-3 sm:flex-row sm:items-end">
|
|
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
|
<div class="flex-1">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Name</label>
|
|
<input type="text" name="name" placeholder="e.g. production" required
|
|
class="w-full text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
|
|
</div>
|
|
<div class="flex-1">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Description <span class="text-gray-400">(optional)</span></label>
|
|
<input type="text" name="description" placeholder="e.g. Live production environment"
|
|
class="w-full text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
|
|
</div>
|
|
<div class="w-24">
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Order</label>
|
|
<input type="number" name="sort_order" value="0"
|
|
class="w-full text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
|
|
</div>
|
|
<button type="submit" class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 transition-colors">Create</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<script>
|
|
function addMetaRow(container) {
|
|
const row = document.createElement('div');
|
|
row.className = 'flex gap-2 items-center metadata-row';
|
|
row.innerHTML = `
|
|
<input type="text" name="metadata_keys" placeholder="key" class="flex-1 text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-green-500 font-mono">
|
|
<input type="text" name="metadata_values" placeholder="value" class="flex-1 text-sm px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-green-500 font-mono">
|
|
<button type="button" onclick="this.closest('.metadata-row').remove()"
|
|
class="text-gray-300 hover:text-red-500 transition-colors p-1" title="Remove row">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
</button>`;
|
|
container.appendChild(row);
|
|
row.querySelector('input').focus();
|
|
}
|
|
</script>
|
|
{% endblock %}
|