mirror of
https://github.com/sergi0g/cup.git
synced 2025-11-17 17:43:37 -05:00
V3
Many many many changes, honestly just read the release notes
This commit is contained in:
Sergio
1
web/.prettierignore
Normal file
1
web/.prettierignore
Normal file
@@ -0,0 +1 @@
|
||||
index.html
|
||||
3
web/.prettierrc
Normal file
3
web/.prettierrc
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"plugins": ["prettier-plugin-tailwindcss"]
|
||||
}
|
||||
BIN
web/bun.lockb
BIN
web/bun.lockb
Binary file not shown.
405
web/index.html
405
web/index.html
@@ -1,25 +1,45 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf8" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<meta charset="utf8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
{% if theme == 'neutral' %}
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: light)"
|
||||
content="#ffffff"
|
||||
>
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
content="#0a0a0a"
|
||||
>
|
||||
{% else %}
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: light)"
|
||||
content="#ffffff"
|
||||
>
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
content="#030712"
|
||||
>
|
||||
{% endif %}
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
||||
<title>Cup</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div
|
||||
class="flex justify-center items-center min-h-screen bg-{{ theme }}-50 dark:bg-{{ theme }}-950"
|
||||
class="flex justify-center min-h-screen bg-white dark:bg-{{ theme }}-950"
|
||||
>
|
||||
<div class="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
|
||||
<div class="max-w-[48rem] mx-auto h-full my-8">
|
||||
<div class="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto my-8 h-full max-w-[48rem] flex-col">
|
||||
<div class="flex items-center gap-1">
|
||||
<h1 class="text-5xl lg:text-6xl font-bold dark:text-white">
|
||||
Cup
|
||||
</h1>
|
||||
<h1 class="text-5xl font-bold lg:text-6xl dark:text-white tracking-tight">Cup</h1>
|
||||
<svg
|
||||
version="1.1"
|
||||
id="Layer_2"
|
||||
@@ -83,184 +103,219 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="shadow-sm bg-white dark:bg-{{ theme }}-900 rounded-md my-8"
|
||||
class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-900 my-8 rounded-md"
|
||||
>
|
||||
<dl
|
||||
class="lg:grid-cols-4 grid-cols-2 gap-1 grid overflow-hidden *:relative"
|
||||
class="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4"
|
||||
>
|
||||
{% assign metrics_to_show = 'monitored_images,up_to_date,updates_available,unknown' | split: ',' %}
|
||||
{% for metric in metrics %}
|
||||
<div class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-800 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-800 gi">
|
||||
<div
|
||||
class="xl:px-8 px-6 py-4 gap-y-2 gap-x-4 justify-between align-baseline flex flex-col h-full"
|
||||
>
|
||||
<dt
|
||||
class="text-{{ theme }}-500 dark:text-{{ theme }}-400 leading-6 font-medium"
|
||||
{% if metrics_to_show contains metric.name %}
|
||||
<div
|
||||
class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-900 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-900 gi"
|
||||
>
|
||||
{{ metric.name }}
|
||||
</dt>
|
||||
<div class="flex gap-1 justify-between items-center">
|
||||
<dd
|
||||
class="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl w-full"
|
||||
<div
|
||||
class="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32"
|
||||
>
|
||||
{{ metric.value }}
|
||||
</dd>
|
||||
{% if metric.name == 'Monitored images' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6 text-black dark:text-white shrink-0"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 4c4.29 0 7.863 2.429 10.665 7.154l.22 .379l.045 .1l.03 .083l.014 .055l.014 .082l.011 .1v.11l-.014 .111a.992 .992 0 0 1 -.026 .11l-.039 .108l-.036 .075l-.016 .03c-2.764 4.836 -6.3 7.38 -10.555 7.499l-.313 .004c-4.396 0 -8.037 -2.549 -10.868 -7.504a1 1 0 0 1 0 -.992c2.831 -4.955 6.472 -7.504 10.868 -7.504zm0 5a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z"
|
||||
/>
|
||||
</svg>
|
||||
{% elsif metric.name == 'Up to date' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6 text-green-500 shrink-0"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
|
||||
/>
|
||||
</svg>
|
||||
{% elsif metric.name == 'Updates available' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6 text-blue-500 shrink-0"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z"
|
||||
/>
|
||||
</svg>
|
||||
{% elsif metric.name == 'Unknown' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6 text-{{ theme }}-500 shrink-0"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 13a1 1 0 0 0 -.993 .883l-.007 .117l.007 .127a1 1 0 0 0 1.986 0l.007 -.117l-.007 -.127a1 1 0 0 0 -.993 -.883zm1.368 -6.673a2.98 2.98 0 0 0 -3.631 .728a1 1 0 0 0 1.44 1.383l.171 -.18a.98 .98 0 0 1 1.11 -.15a1 1 0 0 1 -.34 1.886l-.232 .012a1 1 0 0 0 .111 1.994a3 3 0 0 0 1.371 -5.673z"
|
||||
/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
<dt
|
||||
class="text-{{ theme }}-500 dark:text-{{ theme }}-400 text-sm font-semibold uppercase leading-6"
|
||||
>
|
||||
{{ metric.name | replace: '_', ' ' }}
|
||||
</dt>
|
||||
<div class="flex items-center justify-between gap-1">
|
||||
<dd
|
||||
class="w-full text-3xl font-medium leading-10 tracking-tight text-black dark:text-white"
|
||||
>
|
||||
{{ metric.value }}
|
||||
</dd>
|
||||
{% case metric.name %}
|
||||
{% when 'monitored_images' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="size-6 shrink-0 text-black dark:text-white"
|
||||
>
|
||||
<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
{% when 'up_to_date' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="size-6 shrink-0 text-green-500"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>
|
||||
</svg>
|
||||
{% when 'updates_available' %}
|
||||
{% assign max_metric = '' %}
|
||||
{% assign max_value = 0 %}
|
||||
{% for m in metrics %}
|
||||
{% unless metrics_to_show contains m.name %}
|
||||
{% if m.value > max_value %}
|
||||
{% assign max_metric = m.name %}
|
||||
{% assign max_value = m.value %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% case max_metric %}
|
||||
{% when 'major_updates' %}
|
||||
{% assign color = 'text-red-500' %}
|
||||
{% when 'minor_updates' %}
|
||||
{% assign color = 'text-yellow-500' %}
|
||||
{% else %}
|
||||
{% assign color = 'text-blue-500' %}
|
||||
{% endcase %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="size-6 shrink-0 {{ color }}"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/>
|
||||
</svg>
|
||||
{% when 'unknown' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="size-6 text-{{ theme }}-500 shrink-0"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>
|
||||
</svg>
|
||||
{% endcase %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</dl>
|
||||
</div>
|
||||
<div
|
||||
class="shadow-sm bg-white dark:bg-{{ theme }}-900 rounded-md my-8"
|
||||
class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-900 my-8 rounded-md"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center px-6 py-4 text-{{ theme }}-500"
|
||||
class="flex justify-between items-center px-6 py-4"
|
||||
>
|
||||
<h3>Last checked: {{ last_updated }}</h3>
|
||||
<button class="group" onclick="refresh(event)">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="group-disabled:animate-spin"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M4,11A8.1,8.1 0 0 1 19.5,9M20,5v4h-4" />
|
||||
<path d="M20,13A8.1,8.1 0 0 1 4.5,15M4,19v-4h4" />
|
||||
</svg>
|
||||
</button>
|
||||
<h3 class="text-{{theme}}-600 dark:text-{{theme}}-500">Last checked: {{ last_updated }}</h3>
|
||||
</div>
|
||||
<ul
|
||||
class="*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-{{ theme }}-800 divide-y dark:text-white"
|
||||
>
|
||||
{% for image in images %}
|
||||
<li>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M21 16.008v-8.018a1.98 1.98 0 0 0 -1 -1.717l-7 -4.008a2.016 2.016 0 0 0 -2 0l-7 4.008c-.619 .355 -1 1.01 -1 1.718v8.018c0 .709 .381 1.363 1 1.717l7 4.008a2.016 2.016 0 0 0 2 0l7 -4.008c.619 -.355 1 -1.01 1 -1.718z"
|
||||
/>
|
||||
<path d="M12 22v-10" />
|
||||
<path d="M12 12l8.73 -5.04" />
|
||||
<path d="M3.27 6.96l8.73 5.04" />
|
||||
</svg>
|
||||
{{ image.name }} {% if image.has_update == 'false' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="text-green-500 ml-auto"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
|
||||
/>
|
||||
</svg>
|
||||
{% elsif image.has_update == 'true' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="text-blue-500 ml-auto"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z"
|
||||
/>
|
||||
</svg>
|
||||
{% elsif image.has_update == 'null' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="text-{{ theme }}-500 ml-auto"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 13a1 1 0 0 0 -.993 .883l-.007 .117l.007 .127a1 1 0 0 0 1.986 0l.007 -.117l-.007 -.127a1 1 0 0 0 -.993 -.883zm1.368 -6.673a2.98 2.98 0 0 0 -3.631 .728a1 1 0 0 0 1.44 1.383l.171 -.18a.98 .98 0 0 1 1.11 -.15a1 1 0 0 1 -.34 1.886l-.232 .012a1 1 0 0 0 .111 1.994a3 3 0 0 0 1.371 -5.673z"
|
||||
/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
</li>
|
||||
<ul>
|
||||
{% for server in server_ids %}
|
||||
<li class="mb-4 last:mb-0">
|
||||
<p
|
||||
class="my-4 text-lg font-semibold text-{{ theme }}-600 dark:text-{{ theme }}-400 px-6"
|
||||
>
|
||||
{% if server == '' %}
|
||||
Local images
|
||||
{% else %}
|
||||
{{ server }}
|
||||
{% endif %}
|
||||
</p>
|
||||
<ul
|
||||
class="dark:divide-{{theme}}-900 divide-y dark:text-white"
|
||||
>
|
||||
{% for image in servers[server] %}
|
||||
<li
|
||||
class="flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-{{theme}}-100 hover:dark:bg-{{theme}}-900/50 transition-colors duration-200"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="size-6 shrink-0 text-{{ theme }}-500"
|
||||
>
|
||||
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
|
||||
</svg>
|
||||
<span class="font-mono">{{ image.name }}</span>
|
||||
{% case image.status %}
|
||||
{% when 'Up to date' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="ml-auto text-green-500"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>
|
||||
</svg>
|
||||
{% when 'Unknown' %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="text-{{ theme }}-500 ml-auto"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>
|
||||
</svg>
|
||||
{% else %}
|
||||
{% case image.status %}
|
||||
{% when 'Major update' %}
|
||||
{% assign color = 'text-red-500' %}
|
||||
{% when 'Minor update' %}
|
||||
{% assign color = 'text-yellow-500' %}
|
||||
{% else %}
|
||||
{% assign color = 'text-blue-500' %}
|
||||
{% endcase %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="ml-auto {{ color }}"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/>
|
||||
</svg>
|
||||
{% endcase %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
1
web/index.liquid
Symbolic link
1
web/index.liquid
Symbolic link
@@ -0,0 +1 @@
|
||||
index.html
|
||||
@@ -11,10 +11,11 @@
|
||||
"fmt": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^2.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.1.2",
|
||||
"@tabler/icons-react": "^3.14.0",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^3.6.0",
|
||||
"lucide-react": "^0.475.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
@@ -33,6 +34,7 @@
|
||||
"globals": "^15.9.0",
|
||||
"postcss": "^8.4.42",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"typescript": "^5.5.3",
|
||||
"typescript-eslint": "^8.0.1",
|
||||
|
||||
@@ -8,6 +8,18 @@ import { Data } from "./types";
|
||||
import { theme } from "./theme";
|
||||
import RefreshButton from "./components/RefreshButton";
|
||||
import Search from "./components/Search";
|
||||
import { Server } from "./components/Server";
|
||||
|
||||
const SORT_ORDER = [
|
||||
"monitored_images",
|
||||
"updates_available",
|
||||
"major_updates",
|
||||
"minor_updates",
|
||||
"patch_updates",
|
||||
"other_updates",
|
||||
"up_to_date",
|
||||
"unknown",
|
||||
];
|
||||
|
||||
function App() {
|
||||
const [data, setData] = useState<Data | null>(null);
|
||||
@@ -15,41 +27,65 @@ function App() {
|
||||
if (!data) return <Loading onLoad={setData} />;
|
||||
return (
|
||||
<div
|
||||
className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
|
||||
className={`flex min-h-screen justify-center bg-white dark:bg-${theme}-950`}
|
||||
>
|
||||
<div className="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
|
||||
<div className="flex flex-col max-w-[48rem] mx-auto h-full my-8">
|
||||
<div className="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold dark:text-white">
|
||||
<h1 className="text-5xl font-bold tracking-tight lg:text-6xl dark:text-white">
|
||||
Cup
|
||||
</h1>
|
||||
<Logo />
|
||||
</div>
|
||||
<div
|
||||
className={`shadow-sm bg-white dark:bg-${theme}-900 rounded-md my-8`}
|
||||
className={`border shadow-sm border-${theme}-200 dark:border-${theme}-900 my-8 rounded-md`}
|
||||
>
|
||||
<dl className="lg:grid-cols-4 md:grid-cols-2 gap-1 grid-cols-1 grid overflow-hidden *:relative">
|
||||
{Object.entries(data.metrics).map(([name, value]) => (
|
||||
<Statistic name={name} value={value} key={name} />
|
||||
))}
|
||||
<dl className="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4">
|
||||
{Object.entries(data.metrics)
|
||||
.sort((a, b) => {
|
||||
return SORT_ORDER.indexOf(a[0]) - SORT_ORDER.indexOf(b[0]);
|
||||
})
|
||||
.map(([name]) => (
|
||||
<Statistic
|
||||
name={name as keyof typeof data.metrics}
|
||||
metrics={data.metrics}
|
||||
key={name}
|
||||
/>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
<div
|
||||
className={`shadow-sm bg-white dark:bg-${theme}-900 rounded-md my-8`}
|
||||
className={`border shadow-sm border-${theme}-200 dark:border-${theme}-900 my-8 rounded-md`}
|
||||
>
|
||||
<div
|
||||
className={`flex justify-between items-center px-6 py-4 text-${theme}-500`}
|
||||
className={`flex items-center justify-between px-6 py-4 text-${theme}-500`}
|
||||
>
|
||||
<LastChecked datetime={data.last_updated} />
|
||||
<RefreshButton />
|
||||
</div>
|
||||
<Search onChange={setSearchQuery}/>
|
||||
<ul
|
||||
className={`*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-${theme}-800 divide-y dark:text-white`}
|
||||
>
|
||||
{Object.entries(data.images).filter(([name]) => name.includes(searchQuery)).map(([name, status]) => (
|
||||
<Image name={name} status={status} key={name} />
|
||||
))}
|
||||
<Search onChange={setSearchQuery} />
|
||||
<ul>
|
||||
{Object.entries(
|
||||
data.images.reduce<Record<string, typeof data.images>>(
|
||||
(acc, image) => {
|
||||
const server = image.server ?? "";
|
||||
if (!acc[server]) acc[server] = [];
|
||||
acc[server].push(image);
|
||||
return acc;
|
||||
},
|
||||
{},
|
||||
),
|
||||
)
|
||||
.sort()
|
||||
.map(([server, images]) => (
|
||||
<Server name={server} key={server}>
|
||||
{images
|
||||
.filter((image) => image.reference.includes(searchQuery))
|
||||
.map((image) => (
|
||||
<Image data={image} key={image.reference} />
|
||||
))}
|
||||
</Server>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
45
web/src/components/CodeBlock.tsx
Normal file
45
web/src/components/CodeBlock.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { ReactNode, useState } from "react";
|
||||
import { theme } from "../theme";
|
||||
import { Clipboard, ClipboardCheck } from "lucide-react";
|
||||
|
||||
export function CodeBlock({
|
||||
children,
|
||||
enableCopy,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
enableCopy?: boolean;
|
||||
}) {
|
||||
const [copySuccess, setCopySuccess] = useState(false);
|
||||
const handleCopy = (text: string) => {
|
||||
return () => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
setCopySuccess(true);
|
||||
setTimeout(() => {
|
||||
setCopySuccess(false);
|
||||
}, 3000);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative flex w-full items-center rounded-lg bg-${theme}-100 px-3 py-2 font-mono text-${theme}-700 dark:bg-${theme}-950 dark:text-${theme}-300`}
|
||||
>
|
||||
<p className="overflow-scroll">{children}</p>
|
||||
{enableCopy &&
|
||||
navigator.clipboard &&
|
||||
(copySuccess ? (
|
||||
<ClipboardCheck
|
||||
className={`absolute right-3 size-7 bg-${theme}-100 py-1 pl-2 dark:bg-${theme}-950`}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
className={`duration-50 absolute right-3 bg-${theme}-100 py-1 pl-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-${theme}-950`}
|
||||
onClick={handleCopy(`docker pull ${children}`)}
|
||||
>
|
||||
<Clipboard className="size-5" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,46 +1,224 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
IconCircleArrowUpFilled,
|
||||
IconCircleCheckFilled,
|
||||
IconCube,
|
||||
IconHelpCircleFilled,
|
||||
} from "@tabler/icons-react";
|
||||
Dialog,
|
||||
DialogBackdrop,
|
||||
DialogPanel,
|
||||
DialogTitle,
|
||||
} from "@headlessui/react";
|
||||
import { WithTooltip } from "./Tooltip";
|
||||
import type { Image } from "../types";
|
||||
import { theme } from "../theme";
|
||||
import { CodeBlock } from "./CodeBlock";
|
||||
import {
|
||||
Box,
|
||||
CircleArrowUp,
|
||||
CircleCheck,
|
||||
HelpCircle,
|
||||
Timer,
|
||||
TriangleAlert,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Image({
|
||||
name,
|
||||
status,
|
||||
}: {
|
||||
name: string;
|
||||
status: boolean | null;
|
||||
}) {
|
||||
const clickable_registries = [
|
||||
"registry-1.docker.io",
|
||||
"ghcr.io",
|
||||
"quay.io",
|
||||
"gcr.io",
|
||||
]; // Not all registries redirect to an info page when visiting the image reference in a browser (e.g. Gitea and derivatives), so we only enable clicking those who do.
|
||||
|
||||
export default function Image({ data }: { data: Image }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const new_reference =
|
||||
data.result.info?.type == "version"
|
||||
? data.reference.split(":")[0] + ":" + data.result.info.new_tag
|
||||
: data.reference;
|
||||
const info = getInfo(data)!;
|
||||
let url: string | null = null;
|
||||
if (clickable_registries.includes(data.parts.registry)) {
|
||||
switch (data.parts.registry) {
|
||||
case "registry-1.docker.io":
|
||||
url = `https://hub.docker.com/r/${data.parts.repository}`;
|
||||
break;
|
||||
default:
|
||||
url = `https://${data.parts.registry}/${data.parts.repository}`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<li className="break-all">
|
||||
<IconCube className="size-6 shrink-0" />
|
||||
{name}
|
||||
{status == false && (
|
||||
<WithTooltip
|
||||
text="Up to date"
|
||||
className="text-green-500 ml-auto size-6 shrink-0"
|
||||
<>
|
||||
<button onClick={handleOpen} className="w-full">
|
||||
<li
|
||||
className={`flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-${theme}-100 hover:dark:bg-${theme}-900/50 transition-colors duration-200`}
|
||||
>
|
||||
<IconCircleCheckFilled />
|
||||
</WithTooltip>
|
||||
)}
|
||||
{status == true && (
|
||||
<WithTooltip
|
||||
text="Update available"
|
||||
className="text-blue-500 ml-auto size-6 shrink-0"
|
||||
>
|
||||
<IconCircleArrowUpFilled />
|
||||
</WithTooltip>
|
||||
)}
|
||||
{status == null && (
|
||||
<WithTooltip
|
||||
text="Unknown"
|
||||
className="text-gray-500 ml-auto size-6 shrink-0"
|
||||
>
|
||||
<IconHelpCircleFilled />
|
||||
</WithTooltip>
|
||||
)}
|
||||
</li>
|
||||
<Box className={`size-6 shrink-0 text-${theme}-500`} />
|
||||
<span className="font-mono">{data.reference}</span>
|
||||
<WithTooltip
|
||||
text={info.description}
|
||||
className={`ml-auto size-6 shrink-0 ${info.color}`}
|
||||
>
|
||||
<info.icon />
|
||||
</WithTooltip>
|
||||
</li>
|
||||
</button>
|
||||
<Dialog open={open} onClose={setOpen} className="relative z-10">
|
||||
<DialogBackdrop
|
||||
transition
|
||||
className={`fixed inset-0 bg-${theme}-500 dark:bg-${theme}-950 !bg-opacity-75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in`}
|
||||
/>
|
||||
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center text-center sm:items-center sm:p-0">
|
||||
<DialogPanel
|
||||
transition
|
||||
className={`relative transform overflow-hidden rounded-t-lg bg-white dark:border dark:border-${theme}-800 md:rounded-lg dark:bg-${theme}-900 w-full text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95 md:max-w-xl lg:max-w-2xl dark:text-white`}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-col gap-3 px-6 py-4 text-${theme}-600 dark:text-${theme}-400`}
|
||||
>
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<Box className={`size-6 shrink-0 text-${theme}-500`} />
|
||||
<DialogTitle className="font-mono text-black dark:text-white">
|
||||
{url ? (
|
||||
<>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group w-fit text-black hover:underline dark:text-white`}
|
||||
>
|
||||
<span>
|
||||
{data.reference}
|
||||
<svg
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
height="1cap"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-1 inline transition-all duration-100 group-hover:rotate-45"
|
||||
>
|
||||
<path
|
||||
d="M11 9.283V1H2.727v1.44h5.83L1 9.99 2.01 11l7.556-7.55v5.833H11Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
data.reference
|
||||
)}
|
||||
</DialogTitle>
|
||||
<button onClick={handleClose} className="ml-auto">
|
||||
<X
|
||||
className={`size-6 shrink-0 text-${theme}-500 transition-colors duration-200 hover:text-black dark:hover:text-white`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<info.icon className={`size-6 shrink-0 ${info.color}`} />
|
||||
{info.description}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Timer className="size-6 shrink-0 text-gray-500" />
|
||||
<span>
|
||||
Checked in <b>{data.time}</b> ms
|
||||
</span>
|
||||
</div>
|
||||
{data.result.error && (
|
||||
<div className="break-before mt-4 flex items-center gap-3 overflow-hidden rounded-md bg-yellow-400/10 px-3 py-2">
|
||||
<TriangleAlert className="size-6 shrink-0 text-yellow-500" />
|
||||
{data.result.error}
|
||||
</div>
|
||||
)}
|
||||
{data.result.has_update && (
|
||||
<div className="mt-4 flex flex-col gap-1">
|
||||
Pull command
|
||||
<CodeBlock enableCopy>
|
||||
docker pull {new_reference}
|
||||
</CodeBlock>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-1">
|
||||
{data.result.info?.type == "digest" && (
|
||||
<>
|
||||
{data.result.info.local_digests.length > 1
|
||||
? "Local digests"
|
||||
: "Local digest"}
|
||||
<CodeBlock enableCopy>
|
||||
{data.result.info.local_digests.join("\n")}
|
||||
</CodeBlock>
|
||||
{data.result.info.remote_digest && (
|
||||
<div className="flex flex-col gap-1">
|
||||
Remote digest
|
||||
<CodeBlock enableCopy>
|
||||
{data.result.info.remote_digest}
|
||||
</CodeBlock>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function getInfo(data: Image):
|
||||
| {
|
||||
color: string;
|
||||
icon: typeof HelpCircle;
|
||||
description: string;
|
||||
}
|
||||
| undefined {
|
||||
switch (data.result.has_update) {
|
||||
case null:
|
||||
return {
|
||||
color: "text-gray-500",
|
||||
icon: HelpCircle,
|
||||
description: "Unknown",
|
||||
};
|
||||
case false:
|
||||
return {
|
||||
color: "text-green-500",
|
||||
icon: CircleCheck,
|
||||
description: "Up to date",
|
||||
};
|
||||
case true:
|
||||
if (data.result.info?.type === "version") {
|
||||
switch (data.result.info.version_update_type) {
|
||||
case "major":
|
||||
return {
|
||||
color: "text-red-500",
|
||||
icon: CircleArrowUp,
|
||||
description: "Major update",
|
||||
};
|
||||
case "minor":
|
||||
return {
|
||||
color: "text-yellow-500",
|
||||
icon: CircleArrowUp,
|
||||
description: "Minor update",
|
||||
};
|
||||
case "patch":
|
||||
return {
|
||||
color: "text-blue-500",
|
||||
icon: CircleArrowUp,
|
||||
description: "Patch update",
|
||||
};
|
||||
}
|
||||
} else if (data.result.info?.type === "digest") {
|
||||
return {
|
||||
color: "text-blue-500",
|
||||
icon: CircleArrowUp,
|
||||
description: "Update available",
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import { intlFormatDistance } from "date-fns/intlFormatDistance";
|
||||
import { theme } from "../theme";
|
||||
|
||||
export function LastChecked({ datetime }: { datetime: string }) {
|
||||
const date = intlFormatDistance(new Date(datetime), new Date());
|
||||
return <h3>Last checked {date}</h3>;
|
||||
return (
|
||||
<h3 className={`text-${theme}-600 dark:text-${theme}-500`}>
|
||||
Last checked {date}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,31 +1,41 @@
|
||||
import { IconLoader2 } from "@tabler/icons-react";
|
||||
import { Data } from "../types";
|
||||
import Logo from "./Logo";
|
||||
import { theme } from "../theme";
|
||||
import { LoaderCircle } from "lucide-react";
|
||||
|
||||
export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
|
||||
fetch(
|
||||
process.env.NODE_ENV === "production"
|
||||
? "/json"
|
||||
: `http://${window.location.hostname}:8000/json`,
|
||||
).then((response) => response.json().then((data) => {onLoad(data as Data)}));
|
||||
? "/api/v3/json"
|
||||
: `http://${window.location.hostname}:8000/api/v3/json`,
|
||||
).then((response) =>
|
||||
response.json().then((data) => {
|
||||
onLoad(data as Data);
|
||||
}),
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
|
||||
className={`flex min-h-screen justify-center bg-${theme}-50 dark:bg-${theme}-950`}
|
||||
>
|
||||
<div className="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full absolute overflow-hidden">
|
||||
<div className="flex flex-col max-w-[48rem] mx-auto h-full my-8">
|
||||
<div className="absolute mx-auto h-full w-full max-w-[80rem] overflow-hidden px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold dark:text-white">
|
||||
<h1 className="text-5xl font-bold lg:text-6xl dark:text-white">
|
||||
Cup
|
||||
</h1>
|
||||
<Logo />
|
||||
</div>
|
||||
<div
|
||||
className={`h-full flex justify-center
|
||||
items-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
|
||||
className={`flex flex-col h-full items-center justify-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
|
||||
>
|
||||
Loading <IconLoader2 className="animate-spin" />
|
||||
<div className="flex gap-1 mb-8">
|
||||
Loading <LoaderCircle className="animate-spin" />
|
||||
</div>
|
||||
<p>
|
||||
If this takes more than a few seconds, there was probably a
|
||||
problem fetching the data. Please try reloading the page and
|
||||
report a bug if the problem persists.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { MouseEvent } from "react";
|
||||
import { useState } from "react";
|
||||
import { WithTooltip } from "./Tooltip";
|
||||
|
||||
export default function RefreshButton() {
|
||||
const refresh = (event: MouseEvent) => {
|
||||
const btn = event.currentTarget as HTMLButtonElement;
|
||||
btn.disabled = true;
|
||||
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const refresh = () => {
|
||||
setDisabled(true);
|
||||
const request = new XMLHttpRequest();
|
||||
request.onload = () => {
|
||||
if (request.status === 200) {
|
||||
@@ -15,14 +14,14 @@ export default function RefreshButton() {
|
||||
request.open(
|
||||
"GET",
|
||||
process.env.NODE_ENV === "production"
|
||||
? "/refresh"
|
||||
: `http://${window.location.hostname}:8000/refresh`,
|
||||
? "/api/v3/refresh"
|
||||
: `http://${window.location.hostname}:8000/api/v3/refresh`,
|
||||
);
|
||||
request.send();
|
||||
};
|
||||
return (
|
||||
<WithTooltip text="Reload">
|
||||
<button className="group" onClick={refresh}>
|
||||
<button className="group shrink-0" onClick={refresh} disabled={disabled}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
@@ -33,7 +32,7 @@ export default function RefreshButton() {
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="group-disabled:animate-spin"
|
||||
className="size-6 group-disabled:animate-spin"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M4,11A8.1,8.1 0 0 1 19.5,9M20,5v4h-4" />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ChangeEvent, useState } from "react";
|
||||
import { theme } from "../theme";
|
||||
import { IconSearch, IconX } from "@tabler/icons-react";
|
||||
import { SearchIcon, X } from "lucide-react";
|
||||
|
||||
export default function Search({
|
||||
onChange,
|
||||
@@ -23,27 +23,30 @@ export default function Search({
|
||||
onChange("");
|
||||
};
|
||||
return (
|
||||
<div className={`w-full px-6 text-${theme}-500`}>
|
||||
<div className={`w-full px-6 text-black dark:text-white`}>
|
||||
<div
|
||||
className={`flex items-center w-full rounded-md border border-${theme}-300 dark:border-${theme}-700 px-2 gap-1 bg-${theme}-200 dark:bg-${theme}-800 flex-nowrap peer`}
|
||||
className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 peer flex-nowrap`}
|
||||
>
|
||||
<IconSearch className="size-5" />
|
||||
<SearchIcon className={`size-5 text-${theme}-600 dark:text-${theme}-400`} />
|
||||
<div className="w-full">
|
||||
<input
|
||||
className={`w-full h-10 text-sm text-${theme}-600 dark:text-${theme}-400 focus:outline-none peer bg-transparent placeholder:text-${theme}-500`}
|
||||
className={`h-10 w-full text-sm text-${theme}-800 dark:text-${theme}-200 peer bg-transparent focus:outline-none placeholder:text-${theme}-600 placeholder:dark:text-${theme}-400`}
|
||||
placeholder="Search"
|
||||
onChange={handleChange}
|
||||
value={searchQuery}
|
||||
></input>
|
||||
</div>
|
||||
{showClear && (
|
||||
<button onClick={handleClear} className={`hover:text-${theme}-600 dark:hover:text-${theme}-400`}>
|
||||
<IconX className="size-5" />
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className={`hover:text-${theme}-600 dark:hover:text-${theme}-400 transition-colors duration-200`}
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="relative -translate-y-[8px] h-[8px] border-b-blue-600 border-b-2 w-0 peer-has-[:focus]:w-full transition-all duration-200 rounded-md left-1/2 -translate-x-1/2"
|
||||
className="relative left-1/2 h-[8px] w-0 -translate-x-1/2 -translate-y-[8px] rounded-md border-b-2 border-b-blue-600 transition-all duration-200 peer-has-[:focus]:w-full"
|
||||
style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
38
web/src/components/Server.tsx
Normal file
38
web/src/components/Server.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import {
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
DisclosurePanel,
|
||||
} from "@headlessui/react";
|
||||
import { theme } from "../theme";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
export function Server({
|
||||
name,
|
||||
children,
|
||||
}: {
|
||||
name: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
if (name.length === 0) name = "Local images";
|
||||
return (
|
||||
<Disclosure defaultOpen as="li" className={`mb-4 last:mb-0`}>
|
||||
<DisclosureButton className="group my-4 flex w-full items-center justify-between px-6">
|
||||
<span
|
||||
className={`text-lg font-semibold text-${theme}-600 dark:text-${theme}-400 group-data-[hover]:text-${theme}-800 group-data-[hover]:dark:text-${theme}-200 transition-colors duration-300`}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={`size-5 duration-300 text-${theme}-600 transition-transform group-data-[open]:rotate-180 dark:text-${theme}-400 group-data-[hover]:text-${theme}-800 group-data-[hover]:dark:text-${theme}-200 transition-colors`}
|
||||
/>
|
||||
</DisclosureButton>
|
||||
<DisclosurePanel
|
||||
className={`dark:divide-${theme}-900 divide-y dark:text-white`}
|
||||
as="ul"
|
||||
transition
|
||||
>
|
||||
{children}
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
);
|
||||
}
|
||||
@@ -1,48 +1,73 @@
|
||||
import {
|
||||
IconCircleArrowUpFilled,
|
||||
IconCircleCheckFilled,
|
||||
IconEyeFilled,
|
||||
IconHelpCircleFilled,
|
||||
} from "@tabler/icons-react";
|
||||
import { CircleArrowUp, CircleCheck, Eye, HelpCircle } from "lucide-react";
|
||||
import { theme } from "../theme";
|
||||
import { Data } from "../types";
|
||||
|
||||
const metricsToShow = [
|
||||
"monitored_images",
|
||||
"up_to_date",
|
||||
"updates_available",
|
||||
"unknown",
|
||||
];
|
||||
|
||||
export default function Statistic({
|
||||
name,
|
||||
value,
|
||||
metrics,
|
||||
}: {
|
||||
name: string;
|
||||
value: number;
|
||||
name: keyof Data["metrics"];
|
||||
metrics: Data["metrics"];
|
||||
}) {
|
||||
name = name.replaceAll("_", " ");
|
||||
name = name.slice(0, 1).toUpperCase() + name.slice(1); // Capitalize name
|
||||
if (!metricsToShow.includes(name)) return null;
|
||||
const displayName = name.replaceAll("_", " ");
|
||||
return (
|
||||
<div
|
||||
className={`before:bg-${theme}-200 before:dark:bg-${theme}-800 after:bg-${theme}-200 after:dark:bg-${theme}-800 gi`}
|
||||
className={`before:bg-${theme}-200 before:dark:bg-${theme}-900 after:bg-${theme}-200 after:dark:bg-${theme}-900 gi`}
|
||||
>
|
||||
<div className="xl:px-8 px-6 py-4 gap-y-2 gap-x-4 justify-between align-baseline flex flex-col h-full">
|
||||
<div className="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32">
|
||||
<dt
|
||||
className={`text-${theme}-500 dark:text-${theme}-400 leading-6 font-medium`}
|
||||
className={`text-${theme}-500 dark:text-${theme}-400 text-sm font-semibold uppercase leading-6`}
|
||||
>
|
||||
{name}
|
||||
{displayName}
|
||||
</dt>
|
||||
<div className="flex gap-1 justify-between items-center">
|
||||
<dd className="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl w-full">
|
||||
{value}
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<dd className="w-full text-3xl font-medium leading-10 tracking-tight text-black dark:text-white">
|
||||
{metrics[name]}
|
||||
</dd>
|
||||
{name == "Monitored images" && (
|
||||
<IconEyeFilled className="size-6 text-black dark:text-white shrink-0" />
|
||||
{name === "monitored_images" && (
|
||||
<Eye className="size-6 shrink-0 text-black dark:text-white" />
|
||||
)}
|
||||
{name == "Up to date" && (
|
||||
<IconCircleCheckFilled className="size-6 text-green-500 shrink-0" />
|
||||
{name === "up_to_date" && (
|
||||
<CircleCheck className="size-6 shrink-0 text-green-500" />
|
||||
)}
|
||||
{name == "Update available" && (
|
||||
<IconCircleArrowUpFilled className="size-6 text-blue-500 shrink-0" />
|
||||
)}
|
||||
{name == "Unknown" && (
|
||||
<IconHelpCircleFilled className="size-6 text-gray-500 shrink-0" />
|
||||
{name === "updates_available" && getUpdatesAvailableIcon(metrics)}
|
||||
{name === "unknown" && (
|
||||
<HelpCircle className="size-6 shrink-0 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getUpdatesAvailableIcon(metrics: Data["metrics"]) {
|
||||
const filteredMetrics = Object.entries(metrics).filter(
|
||||
([key]) => !metricsToShow.includes(key),
|
||||
);
|
||||
const maxMetric = filteredMetrics.reduce((max, current) => {
|
||||
if (Number(current[1]) > Number(max[1])) {
|
||||
return current;
|
||||
}
|
||||
return max;
|
||||
}, filteredMetrics[0])[0];
|
||||
let color = "";
|
||||
switch (maxMetric) {
|
||||
case "major_updates":
|
||||
color = "text-red-500";
|
||||
break;
|
||||
case "minor_updates":
|
||||
color = "text-yellow-500";
|
||||
break;
|
||||
default:
|
||||
color = "text-blue-500";
|
||||
}
|
||||
return <CircleArrowUp className={`size-6 shrink-0 ${color}`} />;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ const TooltipContent = forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
`z-50 overflow-hidden rounded-md border border-${theme}-200 bg-white px-3 py-1.5 text-sm text-${theme}-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-${theme}-800 dark:bg-${theme}-950 dark:text-${theme}-50`,
|
||||
`z-50 overflow-hidden rounded-md border border-${theme}-200 dark:border-${theme}-800 bg-white px-3 py-1.5 text-sm text-${theme}-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-${theme}-800 dark:bg-${theme}-950 dark:text-${theme}-50`,
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -2,9 +2,43 @@ export interface Data {
|
||||
metrics: {
|
||||
monitored_images: number;
|
||||
up_to_date: number;
|
||||
update_available: number;
|
||||
updates_available: number;
|
||||
major_updates: number;
|
||||
minor_updates: number;
|
||||
patch_updates: number;
|
||||
other_updates: number;
|
||||
unknown: number;
|
||||
};
|
||||
images: Record<string, boolean | null>;
|
||||
images: Image[];
|
||||
last_updated: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Image {
|
||||
reference: string;
|
||||
parts: {
|
||||
registry: string;
|
||||
repository: string;
|
||||
tag: string;
|
||||
};
|
||||
result: {
|
||||
has_update: boolean | null;
|
||||
info: VersionInfo | DigestInfo | null;
|
||||
error: string | null;
|
||||
};
|
||||
time: number;
|
||||
server: string | null;
|
||||
}
|
||||
|
||||
interface VersionInfo {
|
||||
type: "version";
|
||||
version_update_type: "major" | "minor" | "patch";
|
||||
new_tag: string;
|
||||
current_version: string;
|
||||
new_version: string;
|
||||
}
|
||||
|
||||
interface DigestInfo {
|
||||
type: "digest";
|
||||
local_digests: string[];
|
||||
remote_digest: string;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./src/App.tsx", "./src/components/*.tsx"],
|
||||
content: ["./src/App.tsx", "./src/components/*.tsx", "./index.liquid"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
@@ -8,7 +8,11 @@ export default {
|
||||
safelist: [
|
||||
// Generate minimum extra CSS
|
||||
{
|
||||
pattern: /bg-(gray|neutral)-50/,
|
||||
pattern: /bg-(gray|neutral)-(50|200|500)/,
|
||||
},
|
||||
{
|
||||
pattern: /bg-(gray|neutral)-100/,
|
||||
variants: ["hover"],
|
||||
},
|
||||
{
|
||||
pattern: /bg-(gray|neutral)-(900|950)/,
|
||||
@@ -19,30 +23,49 @@ export default {
|
||||
variants: ["before", "after"],
|
||||
},
|
||||
{
|
||||
pattern: /bg-(gray|neutral)-800/,
|
||||
variants: ["before:dark", "after:dark", "dark"],
|
||||
pattern: /bg-(gray|neutral)-900/,
|
||||
variants: ["before:dark", "after:dark", "dark", "hover:dark"],
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-600/,
|
||||
variants: ["hover"]
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-400/,
|
||||
variants: ["hover", "dark", "dark:hover"]
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-500/,
|
||||
variants: ["dark", "placeholder"],
|
||||
},
|
||||
{
|
||||
pattern: /divide-(gray|neutral)-800/,
|
||||
pattern: /text-(gray|neutral)-(50|300|200)/,
|
||||
variants: ["dark"],
|
||||
},
|
||||
{
|
||||
pattern: /border-(gray|neutral)-300/,
|
||||
pattern: /text-(gray|neutral)-600/,
|
||||
variants: ["dark", "hover"],
|
||||
},
|
||||
{
|
||||
pattern: /border-(gray|neutral)-700/,
|
||||
pattern: /text-(gray|neutral)-400/,
|
||||
variants: ["dark", "dark:hover"],
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-600/,
|
||||
variants: ["placeholder"],
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-400/,
|
||||
variants: ["placeholder:dark"],
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-700/,
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-800/,
|
||||
variants: ["group-data-[hover]"],
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-200/,
|
||||
variants: ["group-data-[hover]:dark"],
|
||||
},
|
||||
{
|
||||
pattern: /divide-(gray|neutral)-900/,
|
||||
variants: ["dark"],
|
||||
},
|
||||
{
|
||||
pattern: /border-(gray|neutral)-(200|300)/,
|
||||
},
|
||||
{
|
||||
pattern: /border-(gray|neutral)-(700|800|900)/,
|
||||
variants: ["dark"],
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user