fix: add request_upgrades.py to image, add web dashboard
- Dockerfile: add COPY for request_upgrades.py (was missing — root cause of Monday upgrade CronJob failing with 'No such file'), add git (needed for repo cloning in upgrade workflow), copy web.py + templates/ - requirements.txt: add fastapi, uvicorn, jinja2 for web dashboard - web.py: FastAPI dashboard with image inventory and upgrade trigger pages - templates/: base layout, images page (namespace→app→container grouped with live version status), upgrade page (outdated list + trigger button + job history) - kubernetes/web-deployment.yaml: Deployment + LoadBalancer at 192.168.87.13 - kubernetes/rbac.yaml: add version-tracker-web ServiceAccount, ClusterRole (read pods/deployments/replicasets/statefulsets/daemonsets/jobs/cronjobs), and namespace Role to create upgrade Jobs - kubernetes/upgrade-cronjob.yaml: fix YAML indentation bug on GITEA_USERNAME and GITEA_COMMITTER_NAME env vars
This commit is contained in:
claude-code
@@ -0,0 +1,249 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user