250 lines
10 KiB
HTML
250 lines
10 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block title %}Upgrade — K8s Dashboard{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div x-data="upgradePage()">
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="flex items-start justify-between mb-6">
|
||
|
|
<div>
|
||
|
|
<h1 class="text-2xl font-bold text-white">Image Upgrades</h1>
|
||
|
|
<p class="text-sm text-gray-500 mt-0.5">
|
||
|
|
Review outdated images and trigger the GitOps upgrade workflow.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{% if is_checking %}
|
||
|
|
<span class="flex items-center gap-2 text-blue-400 text-sm bg-blue-950 px-3 py-1.5 rounded-full ring-1 ring-blue-800">
|
||
|
|
<svg class="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
|
||
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
|
||
|
|
</svg>
|
||
|
|
Checking versions…
|
||
|
|
</span>
|
||
|
|
{% elif not last_updated %}
|
||
|
|
<a href="/"
|
||
|
|
class="text-sm text-yellow-400 bg-yellow-950 px-3 py-1.5 rounded ring-1 ring-yellow-800 hover:bg-yellow-900 transition-colors">
|
||
|
|
⚠ No version data — go to Images to start a check
|
||
|
|
</a>
|
||
|
|
{% else %}
|
||
|
|
<span class="text-xs text-gray-500">Data from {{ last_updated }}</span>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Two-column layout -->
|
||
|
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||
|
|
|
||
|
|
<!-- Left: outdated images (2/3 width) -->
|
||
|
|
<div class="xl:col-span-2 space-y-4">
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<h2 class="text-base font-semibold text-gray-200">
|
||
|
|
Outdated Images
|
||
|
|
{% if outdated_apps %}
|
||
|
|
<span class="ml-2 text-xs font-normal bg-red-950 text-red-400 ring-1 ring-red-800 px-2 py-0.5 rounded-full">
|
||
|
|
{{ outdated_apps | map(attribute='containers') | sum(start=[]) | list | length }} images
|
||
|
|
</span>
|
||
|
|
{% endif %}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% if not last_updated %}
|
||
|
|
<div class="bg-gray-900 border border-gray-800 rounded-lg px-6 py-12 text-center">
|
||
|
|
<div class="text-4xl mb-3">📋</div>
|
||
|
|
<div class="text-gray-400 font-medium">No version data yet</div>
|
||
|
|
<div class="text-sm text-gray-600 mt-1">
|
||
|
|
Visit the <a href="/" class="text-blue-400 hover:underline">Images page</a> to trigger a version check.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% elif not outdated_apps %}
|
||
|
|
<div class="bg-gray-900 border border-green-900 rounded-lg px-6 py-12 text-center">
|
||
|
|
<div class="text-4xl mb-3">✅</div>
|
||
|
|
<div class="text-green-400 font-medium">All images are up to date</div>
|
||
|
|
<div class="text-sm text-gray-600 mt-1">Last checked: {{ last_updated }}</div>
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
{% for app_data in outdated_apps %}
|
||
|
|
<div class="bg-gray-900 border border-gray-800 rounded-lg overflow-hidden">
|
||
|
|
<!-- App header -->
|
||
|
|
<div class="flex items-center gap-3 px-4 py-2.5 bg-gray-950 border-b border-gray-800">
|
||
|
|
<span class="text-xs font-mono px-1.5 py-0.5 rounded
|
||
|
|
{% if app_data.kind == 'Deployment' %}bg-blue-900 text-blue-300{% elif app_data.kind == 'StatefulSet' %}bg-purple-900 text-purple-300{% elif app_data.kind == 'DaemonSet' %}bg-orange-900 text-orange-300{% elif app_data.kind == 'CronJob' %}bg-teal-900 text-teal-300{% else %}bg-gray-700 text-gray-400{% endif %}">
|
||
|
|
{{ app_data.kind }}
|
||
|
|
</span>
|
||
|
|
<span class="text-sm font-semibold text-gray-100">{{ app_data.app }}</span>
|
||
|
|
<span class="text-xs text-gray-500 font-mono">{{ app_data.namespace }}</span>
|
||
|
|
</div>
|
||
|
|
<!-- Containers -->
|
||
|
|
<table class="w-full text-xs">
|
||
|
|
<thead>
|
||
|
|
<tr class="text-gray-600">
|
||
|
|
<th class="text-left px-4 py-2 font-medium w-32">Container</th>
|
||
|
|
<th class="text-left px-4 py-2 font-medium">Image</th>
|
||
|
|
<th class="text-left px-4 py-2 font-medium w-28">Current</th>
|
||
|
|
<th class="text-left px-4 py-2 font-medium w-28">Latest</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody class="divide-y divide-gray-800">
|
||
|
|
{% for c in app_data.containers %}
|
||
|
|
<tr>
|
||
|
|
<td class="px-4 py-2.5 text-gray-400 font-mono">{{ c.name }}</td>
|
||
|
|
<td class="px-4 py-2.5 text-gray-300 font-mono break-all">
|
||
|
|
{{ c.image_short.rsplit(':', 1)[0] if ':' in c.image_short else c.image_short }}
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2.5 font-mono text-gray-500">{{ c.tag }}</td>
|
||
|
|
<td class="px-4 py-2.5 font-mono text-red-400 font-semibold">{{ c.latest_tag or '—' }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right: trigger + history (1/3 width) -->
|
||
|
|
<div class="space-y-6">
|
||
|
|
|
||
|
|
<!-- Trigger card -->
|
||
|
|
<div class="bg-gray-900 border border-gray-800 rounded-lg p-5">
|
||
|
|
<h2 class="text-base font-semibold text-gray-200 mb-1">Trigger Upgrade</h2>
|
||
|
|
<p class="text-xs text-gray-500 mb-4">
|
||
|
|
Creates a Job from the <code class="text-gray-400">upgrade-requester</code> CronJob.
|
||
|
|
The workflow checks outdated images, requests Mattermost approval, then commits
|
||
|
|
updated image tags to the ArgoCD GitOps repo.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<!-- Info rows -->
|
||
|
|
<div class="space-y-2 mb-5 text-xs">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="text-gray-500">Approval timeout</span>
|
||
|
|
<span class="text-gray-300">60 min</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="text-gray-500">Applies changes via</span>
|
||
|
|
<span class="text-gray-300">GitOps / ArgoCD</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span class="text-gray-500">Scheduled run</span>
|
||
|
|
<span class="text-gray-300">Every Monday 09:00 UTC</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button @click="trigger()"
|
||
|
|
:disabled="triggering || triggerDone"
|
||
|
|
class="w-full py-2.5 rounded-lg text-sm font-semibold transition-all
|
||
|
|
bg-blue-600 hover:bg-blue-500 text-white
|
||
|
|
disabled:opacity-50 disabled:cursor-not-allowed">
|
||
|
|
<span x-show="!triggering && !triggerDone">⚡ Trigger Upgrade Now</span>
|
||
|
|
<span x-show="triggering" x-cloak class="flex items-center justify-center gap-2">
|
||
|
|
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
|
||
|
|
</svg>
|
||
|
|
Creating job…
|
||
|
|
</span>
|
||
|
|
<span x-show="triggerDone" x-cloak>✓ Job Created</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Result -->
|
||
|
|
<div x-show="triggerResult" x-cloak class="mt-3 p-2.5 rounded text-xs font-mono break-all"
|
||
|
|
:class="triggerError ? 'bg-red-950 text-red-400 ring-1 ring-red-800' : 'bg-green-950 text-green-400 ring-1 ring-green-800'"
|
||
|
|
x-text="triggerResult">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Recent jobs -->
|
||
|
|
<div class="bg-gray-900 border border-gray-800 rounded-lg p-5">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h2 class="text-base font-semibold text-gray-200">Recent Jobs</h2>
|
||
|
|
<button @click="refreshJobs()"
|
||
|
|
class="text-xs text-gray-500 hover:text-gray-300 transition-colors">
|
||
|
|
↻ Refresh
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div x-show="!jobs.length" class="text-xs text-gray-600 text-center py-4">
|
||
|
|
No upgrade jobs found
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-2">
|
||
|
|
<template x-for="job in jobs" :key="job.name">
|
||
|
|
<div class="flex items-start gap-3 p-2.5 bg-gray-950 rounded border border-gray-800">
|
||
|
|
<!-- Status dot -->
|
||
|
|
<div class="mt-0.5 w-2 h-2 rounded-full flex-shrink-0"
|
||
|
|
:class="{
|
||
|
|
'bg-green-500': job.status === 'succeeded',
|
||
|
|
'bg-red-500': job.status === 'failed',
|
||
|
|
'bg-blue-400 animate-pulse': job.status === 'running'
|
||
|
|
}">
|
||
|
|
</div>
|
||
|
|
<div class="min-w-0 flex-1">
|
||
|
|
<div class="text-xs font-mono text-gray-300 truncate" x-text="job.name"></div>
|
||
|
|
<div class="flex items-center gap-2 mt-0.5">
|
||
|
|
<span class="text-xs capitalize font-medium"
|
||
|
|
:class="{
|
||
|
|
'text-green-400': job.status === 'succeeded',
|
||
|
|
'text-red-400': job.status === 'failed',
|
||
|
|
'text-blue-400': job.status === 'running'
|
||
|
|
}"
|
||
|
|
x-text="job.status">
|
||
|
|
</span>
|
||
|
|
<span class="text-xs text-gray-600"
|
||
|
|
x-text="job.created ? new Date(job.created).toLocaleString() : ''">
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function upgradePage() {
|
||
|
|
return {
|
||
|
|
triggering: false,
|
||
|
|
triggerDone: false,
|
||
|
|
triggerResult: '',
|
||
|
|
triggerError: false,
|
||
|
|
jobs: {{ jobs | tojson }},
|
||
|
|
|
||
|
|
async trigger() {
|
||
|
|
this.triggering = true;
|
||
|
|
this.triggerResult = '';
|
||
|
|
this.triggerError = false;
|
||
|
|
try {
|
||
|
|
const res = await fetch('/api/upgrade/trigger', { method: 'POST' });
|
||
|
|
const data = await res.json();
|
||
|
|
if (!res.ok) {
|
||
|
|
this.triggerError = true;
|
||
|
|
this.triggerResult = data.error || 'Unknown error';
|
||
|
|
} else {
|
||
|
|
this.triggerDone = true;
|
||
|
|
this.triggerResult = 'Job created: ' + data.job_name;
|
||
|
|
setTimeout(() => this.refreshJobs(), 1000);
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
this.triggerError = true;
|
||
|
|
this.triggerResult = e.message;
|
||
|
|
} finally {
|
||
|
|
this.triggering = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async refreshJobs() {
|
||
|
|
try {
|
||
|
|
const res = await fetch('/api/upgrade/jobs');
|
||
|
|
const data = await res.json();
|
||
|
|
this.jobs = data.jobs;
|
||
|
|
} catch (e) {
|
||
|
|
console.error('Failed to refresh jobs:', e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|