m/cup
1
0
Fork 0
mirror of https://github.com/sergi0g/cup.git synced 2025-11-11 22:53:48 -05:00
Code Wiki Activity

Finished basic functionality for multiple servers in the backend.

Browse Source 
No special CLI or Liquid support yet and also no refresh support
This commit is contained in:
Sergio
2025-01-03 16:10:17 +02:00
parent aeeffaccba
commit c0c7f7c0e9
17 changed files with 328 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cup.schema.json
View File

@@ -64,13 +64,13 @@
"minLength": 1 "minLength": 1
}, },
"servers": { "servers": {
"type": "array", "type": "object",
"description": "Additional servers to connect to and fetch update data from", "description": "Additional servers to connect to and fetch update data from",
"minItems": 1, "additionalProperties": {
"items": {
"type": "string", "type": "string",
"minLength": 1 "minLength": 1
} },
"minProperties": 1
}, },
"theme": { "theme": {
"description": "The theme used by the web UI", "description": "The theme used by the web UI",

43
src/check.rs
View File

@@ -10,22 +10,27 @@ use crate::{
registry::{check_auth, get_token}, registry::{check_auth, get_token},
structs::{image::Image, update::Update}, structs::{image::Image, update::Update},
utils::request::{get_response_body, parse_json}, utils::request::{get_response_body, parse_json},
warn,
}; };
/// Fetches image data from other Cup servers /// Fetches image data from other Cup instances
async fn get_remote_updates(servers: &[String], client: &Client) -> Vec<Update> { async fn get_remote_updates(servers: &FxHashMap<String, String>, client: &Client) -> Vec<Update> {
let mut remote_images = Vec::new(); let mut remote_images = Vec::new();
let futures: Vec<_> = servers let handles: Vec<_> = servers
.iter() .iter()
.map(|server| async { .map(|(name, url)| async {
let url = if server.starts_with("http://") || server.starts_with("https://") { let url = if url.starts_with("http://") || url.starts_with("https://") {
format!("{}/api/v3/json", server.trim_end_matches('/')) format!("{}/api/v3/json", url.trim_end_matches('/'))
} else { } else {
format!("https://{}/api/v3/json", server.trim_end_matches('/')) format!("https://{}/api/v3/json", url.trim_end_matches('/'))
}; };
match client.get(&url, vec![], false).await { match client.get(&url, vec![], false).await {
Ok(response) => { Ok(response) => {
if response.status() != 200 {
warn!("GET {}: Failed to fetch updates from server. Server returned invalid response code: {}",url,response.status());
return Vec::new();
}
let json = parse_json(&get_response_body(response).await); let json = parse_json(&get_response_body(response).await);
if let Some(updates) = json["images"].as_array() { if let Some(updates) = json["images"].as_array() {
let mut server_updates: Vec<Update> = updates let mut server_updates: Vec<Update> = updates
@@ -34,7 +39,7 @@ async fn get_remote_updates(servers: &[String], client: &Client) -> Vec<Update>
.collect(); .collect();
// Add server origin to each image // Add server origin to each image
for update in &mut server_updates { for update in &mut server_updates {
update.server = Some(server.clone()); update.server = Some(name.clone());
update.status = update.get_status(); update.status = update.get_status();
} }
return server_updates; return server_updates;
@@ -42,12 +47,15 @@ async fn get_remote_updates(servers: &[String], client: &Client) -> Vec<Update>
Vec::new() Vec::new()
} }
Err(_) => Vec::new(), Err(e) => {
warn!("Failed to fetch updates from server. {}", e);
Vec::new()
},
} }
}) })
.collect(); .collect();
for mut images in join_all(futures).await { for mut images in join_all(handles).await {
remote_images.append(&mut images); remote_images.append(&mut images);
} }
@@ -64,8 +72,7 @@ pub async fn get_updates(references: &Option<Vec<String>>, config: &Config) -> V
// Add extra images from references // Add extra images from references
if let Some(refs) = references { if let Some(refs) = references {
let image_refs: FxHashSet<&String> = let image_refs: FxHashSet<&String> = images.iter().map(|image| &image.reference).collect();
images.iter().map(|image| &image.reference).collect();
let extra = refs let extra = refs
.iter() .iter()
.filter(|&reference| !image_refs.contains(reference)) .filter(|&reference| !image_refs.contains(reference))
@@ -85,10 +92,7 @@ pub async fn get_updates(references: &Option<Vec<String>>, config: &Config) -> V
debug!( debug!(
config.debug, config.debug,
"Checking {:?}", "Checking {:?}",
images images.iter().map(|image| &image.reference).collect_vec()
.iter()
.map(|image| &image.reference)
.collect_vec()
); );
// Get a list of unique registries our images belong to. We are unwrapping the registry because it's guaranteed to be there. // Get a list of unique registries our images belong to. We are unwrapping the registry because it's guaranteed to be there.
@@ -106,7 +110,10 @@ pub async fn get_updates(references: &Option<Vec<String>>, config: &Config) -> V
let mut image_map: FxHashMap<&String, Vec<&Image>> = FxHashMap::default(); let mut image_map: FxHashMap<&String, Vec<&Image>> = FxHashMap::default();
for image in &images { for image in &images {
image_map.entry(&image.parts.registry).or_default().push(image); image_map
.entry(&image.parts.registry)
.or_default()
.push(image);
} }
// Retrieve an authentication token (if required) for each registry. // Retrieve an authentication token (if required) for each registry.
@@ -149,7 +156,7 @@ pub async fn get_updates(references: &Option<Vec<String>>, config: &Config) -> V
.collect::<Vec<&String>>(); .collect::<Vec<&String>>();
let mut handles = Vec::with_capacity(images.len()); let mut handles = Vec::with_capacity(images.len());
// Loop through images check for updates // Loop through images check for updates
for image in &images { for image in &images {
let is_ignored = ignored_registries.contains(&&image.parts.registry) let is_ignored = ignored_registries.contains(&&image.parts.registry)

4
src/config.rs
View File

@@ -45,7 +45,7 @@ pub struct Config {
pub images: ImageConfig, pub images: ImageConfig,
pub refresh_interval: Option<String>, pub refresh_interval: Option<String>,
pub registries: FxHashMap<String, RegistryConfig>, pub registries: FxHashMap<String, RegistryConfig>,
pub servers: Vec<String>, pub servers: FxHashMap<String, String>,
pub socket: Option<String>, pub socket: Option<String>,
pub theme: Theme, pub theme: Theme,
} }
@@ -59,7 +59,7 @@ impl Config {
images: ImageConfig::default(), images: ImageConfig::default(),
refresh_interval: None, refresh_interval: None,
registries: FxHashMap::default(), registries: FxHashMap::default(),
servers: Vec::new(), servers: FxHashMap::default(),
socket: None, socket: None,
theme: Theme::Default, theme: Theme::Default,
} }

7
src/registry.rs
View File

@@ -14,7 +14,8 @@ use crate::{
link::parse_link, link::parse_link,
request::{ request::{
get_protocol, get_response_body, parse_json, parse_www_authenticate, to_bearer_string, get_protocol, get_response_body, parse_json, parse_www_authenticate, to_bearer_string,
}, time::{elapsed, now}, },
time::{elapsed, now},
}, },
}; };
@@ -173,7 +174,9 @@ pub async fn get_latest_tag(
let tag = tags.iter().max(); let tag = tags.iter().max();
debug!( debug!(
config.debug, config.debug,
"Checked for tag update to {} in {}ms", image.reference, elapsed(start) "Checked for tag update to {} in {}ms",
image.reference,
elapsed(start)
); );
match tag { match tag {
Some(t) => { Some(t) => {

2
src/structs/image.rs
View File

@@ -188,7 +188,7 @@ impl Image {
}, },
time: self.time_ms, time: self.time_ms,
server: None, server: None,
status: Status::Unknown(String::new()) status: Status::Unknown(String::new()),
} }
} }

4
src/structs/mod.rs
View File

@@ -1,6 +1,6 @@
pub mod image; pub mod image;
pub mod inspectdata; pub mod inspectdata;
pub mod parts;
pub mod status; pub mod status;
pub mod version;
pub mod update; pub mod update;
pub mod parts; pub mod version;

2
src/structs/status.rs
View File

@@ -40,4 +40,4 @@ impl Default for Status {
fn default() -> Self { fn default() -> Self {
Self::Unknown("".to_string()) Self::Unknown("".to_string())
} }
} }

27
src/structs/update.rs
View File

@@ -9,7 +9,6 @@ pub struct Update {
pub parts: Parts, pub parts: Parts,
pub result: UpdateResult, pub result: UpdateResult,
pub time: u32, pub time: u32,
#[serde(skip_serializing)]
pub server: Option<String>, pub server: Option<String>,
#[serde(skip_serializing, skip_deserializing)] #[serde(skip_serializing, skip_deserializing)]
pub status: Status, pub status: Status,
@@ -79,19 +78,15 @@ impl Update {
Status::Unknown(s) => { Status::Unknown(s) => {
if s.is_empty() { if s.is_empty() {
match self.result.has_update { match self.result.has_update {
Some(true) => { Some(true) => match &self.result.info {
match &self.result.info { UpdateInfo::Version(info) => match info.version_update_type.as_str() {
UpdateInfo::Version(info) => { "major" => Status::UpdateMajor,
match info.version_update_type.as_str() { "minor" => Status::UpdateMinor,
"major" => Status::UpdateMajor, "patch" => Status::UpdatePatch,
"minor" => Status::UpdateMinor,
"patch" => Status::UpdatePatch,
_ => unreachable!(),
}
},
UpdateInfo::Digest(_) => Status::UpdateAvailable,
_ => unreachable!(), _ => unreachable!(),
} },
UpdateInfo::Digest(_) => Status::UpdateAvailable,
_ => unreachable!(),
}, },
Some(false) => Status::UpToDate, Some(false) => Status::UpToDate,
None => Status::Unknown(self.result.error.clone().unwrap()), None => Status::Unknown(self.result.error.clone().unwrap()),
@@ -99,8 +94,8 @@ impl Update {
} else { } else {
self.status.clone() self.status.clone()
} }
}, }
status => status.clone() status => status.clone(),
} }
} }
} }

2
src/utils/mod.rs
View File

@@ -4,4 +4,4 @@ pub mod logging;
pub mod reference; pub mod reference;
pub mod request; pub mod request;
pub mod sort_update_vec; pub mod sort_update_vec;
pub mod time; pub mod time;

4
src/utils/request.rs
View File

@@ -35,8 +35,8 @@ pub fn get_protocol(
} else { } else {
"https" "https"
} }
}, }
None => "https" None => "https",
} }
} }

384
web/index.html
View File

@@ -1,34 +1,34 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf8"> <meta charset="utf8" />
{% if theme == 'neutral' %} {% if theme == 'neutral' %}
<meta <meta
name="theme-color" name="theme-color"
media="(prefers-color-scheme: light)" media="(prefers-color-scheme: light)"
content="#fafafa" content="#fafafa"
> />
<meta <meta
name="theme-color" name="theme-color"
media="(prefers-color-scheme: dark)" media="(prefers-color-scheme: dark)"
content="#0a0a0a" content="#0a0a0a"
> />
{% else %} {% else %}
<meta <meta
name="theme-color" name="theme-color"
media="(prefers-color-scheme: light)" media="(prefers-color-scheme: light)"
content="#f9fafb" content="#f9fafb"
> />
<meta <meta
name="theme-color" name="theme-color"
media="(prefers-color-scheme: dark)" media="(prefers-color-scheme: dark)"
content="#030712" content="#030712"
> />
{% endif %} {% endif %}
<link rel="icon" type="image/svg+xml" href="favicon.svg"> <link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Cup</title> <title>Cup</title>
</head> </head>
<body> <body>
@@ -39,7 +39,9 @@
<div class="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-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="mx-auto my-8 h-full max-w-[48rem] flex-col">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<h1 class="text-5xl font-bold lg:text-6xl dark:text-white">Cup</h1> <h1 class="text-5xl font-bold lg:text-6xl dark:text-white">
Cup
</h1>
<svg <svg
version="1.1" version="1.1"
id="Layer_2" id="Layer_2"
@@ -108,109 +110,97 @@
<dl <dl
class="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4" 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: ',' %} {% assign metrics_to_show =
{% for metric in metrics %} 'monitored_images,up_to_date,updates_available,unknown' | split:
{% if metrics_to_show contains metric.name %} ',' %} {% for metric in metrics %} {% if metrics_to_show
<div contains metric.name %}
class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-800 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-800 gi" <div
class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-800 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-800 gi"
>
<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"
>
<dt
class="text-{{ theme }}-500 dark:text-{{ theme }}-400 leading-6 font-medium"
> >
<div {{ metric.name | replace: '_', ' ' | capitalize }}
class="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32" </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"
> >
<dt {{ metric.value }}
class="text-{{ theme }}-500 dark:text-{{ theme }}-400 leading-6 font-medium" </dd>
> {% case metric.name %} {% when 'monitored_images' %}
{{ metric.name | replace: '_', ' ' | capitalize }} <svg
</dt> xmlns="http://www.w3.org/2000/svg"
<div class="flex items-center justify-between gap-1"> width="24"
<dd height="24"
class="w-full text-3xl font-medium leading-10 tracking-tight text-black dark:text-white" viewBox="0 0 24 24"
> fill="currentColor"
{{ metric.value }} class="size-6 shrink-0 text-black dark:text-white"
</dd> >
{% case metric.name %} <path stroke="none" d="M0 0h24v24H0z" fill="none" />
{% when 'monitored_images' %} <path
<svg 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"
xmlns="http://www.w3.org/2000/svg" />
width="24" </svg>
height="24" {% when 'up_to_date' %}
viewBox="0 0 24 24" <svg
fill="currentColor" xmlns="http://www.w3.org/2000/svg"
class="size-6 shrink-0 text-black dark:text-white" width="24"
> height="24"
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> viewBox="0 0 24 24"
<path fill="currentColor"
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" class="size-6 shrink-0 text-green-500"
/> >
</svg> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
{% when 'up_to_date' %} <path
<svg 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"
xmlns="http://www.w3.org/2000/svg" />
width="24" </svg>
height="24" {% when 'updates_available' %} {% assign max_metric = ''
viewBox="0 0 24 24" %} {% assign max_value = 0 %} {% for m in metrics %} {%
fill="currentColor" unless metrics_to_show contains m.name %} {% if m.value >
class="size-6 shrink-0 text-green-500" max_value %} {% assign max_metric = m.name %} {% assign
> max_value = m.value %} {% endif %} {% endunless %} {%
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> endfor %} {% case max_metric %} {% when 'major_updates' %}
<path {% assign color = 'text-red-500' %} {% when
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" 'minor_updates' %} {% assign color = 'text-yellow-500' %}
/> {% else %} {% assign color = 'text-blue-500' %} {% endcase
</svg> %}
{% when 'updates_available' %} <svg
{% assign max_metric = '' %} xmlns="http://www.w3.org/2000/svg"
{% assign max_value = 0 %} width="24"
height="24"
{% for m in metrics %} viewBox="0 0 24 24"
{% unless metrics_to_show contains m.name %} fill="currentColor"
{% if m.value > max_value %} class="size-6 shrink-0 {{ color }}"
{% assign max_metric = m.name %} >
{% assign max_value = m.value %} <path stroke="none" d="M0 0h24v24H0z" fill="none" />
{% endif %} <path
{% endunless %} 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"
{% endfor %} />
</svg>
{% case max_metric %} {% when 'unknown' %}
{% when 'major_updates' %} <svg
{% assign color = 'text-red-500' %} xmlns="http://www.w3.org/2000/svg"
{% when 'minor_updates' %} width="24"
{% assign color = 'text-yellow-500' %} height="24"
{% else %} viewBox="0 0 24 24"
{% assign color = 'text-blue-500' %} fill="currentColor"
{% endcase %} class="size-6 text-{{ theme }}-500 shrink-0"
<svg >
xmlns="http://www.w3.org/2000/svg" <path stroke="none" d="M0 0h24v24H0z" fill="none" />
width="24" <path
height="24" 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"
viewBox="0 0 24 24" />
fill="currentColor" </svg>
class="size-6 shrink-0 {{ color }}" {% endcase %}
>
<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>
{% when '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>
{% endcase %}
</div>
</div>
</div> </div>
{% endif %} </div>
{% endfor %} </div>
{% endif %} {% endfor %}
</dl> </dl>
</div> </div>
<div <div
@@ -243,80 +233,74 @@
class="*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-{{ theme }}-800 divide-y dark:text-white" class="*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-{{ theme }}-800 divide-y dark:text-white"
> >
{% for image in images %} {% for image in images %}
<li> <li>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path <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" 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 22v-10" />
<path d="M12 12l8.73 -5.04" /> <path d="M12 12l8.73 -5.04" />
<path d="M3.27 6.96l8.73 5.04" /> <path d="M3.27 6.96l8.73 5.04" />
</svg> </svg>
{{ image.name }} {{ image.name }} {% case image.status %} {% when 'Up to date'
{% case image.status %} %}
{% when 'Up to date' %} <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" width="24"
width="24" height="24"
height="24" viewBox="0 0 24 24"
viewBox="0 0 24 24" fill="currentColor"
fill="currentColor" class="ml-auto text-green-500"
class="ml-auto text-green-500" >
> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path
<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"
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>
</svg> {% when 'Unknown' %}
{% when 'Unknown' %} <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" width="24"
width="24" height="24"
height="24" viewBox="0 0 24 24"
viewBox="0 0 24 24" fill="currentColor"
fill="currentColor" class="text-{{ theme }}-500 ml-auto"
class="text-{{ theme }}-500 ml-auto" >
> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path
<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"
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>
</svg> {% else %} {% case image.status %} {% when 'Major update' %}
{% else %} {% assign color = 'text-red-500' %} {% when 'Minor update' %}
{% case image.status %} {% assign color = 'text-yellow-500' %} {% else %} {% assign
{% when 'Major update' %} color = 'text-blue-500' %} {% endcase %}
{% assign color = 'text-red-500' %} <svg
{% when 'Minor update' %} xmlns="http://www.w3.org/2000/svg"
{% assign color = 'text-yellow-500' %} width="24"
{% else %} height="24"
{% assign color = 'text-blue-500' %} viewBox="0 0 24 24"
{% endcase %} fill="currentColor"
<svg class="ml-auto {{ color }}"
xmlns="http://www.w3.org/2000/svg" >
width="24" <path stroke="none" d="M0 0h24v24H0z" fill="none" />
height="24" <path
viewBox="0 0 24 24" 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"
fill="currentColor" />
class="ml-auto {{ color }}" </svg>
> {% endcase %}
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> </li>
<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>
{% endcase %}
</li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>

47
web/src/App.tsx
View File

@@ -8,6 +8,7 @@ import { Data } from "./types";
import { theme } from "./theme"; import { theme } from "./theme";
import RefreshButton from "./components/RefreshButton"; import RefreshButton from "./components/RefreshButton";
import Search from "./components/Search"; import Search from "./components/Search";
import { Server } from "./components/Server";
const SORT_ORDER = [ const SORT_ORDER = [
"monitored_images", "monitored_images",
@@ -40,15 +41,17 @@ function App() {
className={`bg-white shadow-sm dark:bg-${theme}-900 my-8 rounded-md`} className={`bg-white shadow-sm dark:bg-${theme}-900 my-8 rounded-md`}
> >
<dl className="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4"> <dl className="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4">
{Object.entries(data.metrics).sort((a, b) => { {Object.entries(data.metrics)
return SORT_ORDER.indexOf(a[0]) - SORT_ORDER.indexOf(b[0]); .sort((a, b) => {
}).map(([name]) => ( return SORT_ORDER.indexOf(a[0]) - SORT_ORDER.indexOf(b[0]);
<Statistic })
name={name as keyof typeof data.metrics} .map(([name]) => (
metrics={data.metrics} <Statistic
key={name} name={name as keyof typeof data.metrics}
/> metrics={data.metrics}
))} key={name}
/>
))}
</dl> </dl>
</div> </div>
<div <div
@@ -61,11 +64,27 @@ function App() {
<RefreshButton /> <RefreshButton />
</div> </div>
<Search onChange={setSearchQuery} /> <Search onChange={setSearchQuery} />
<ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}> <ul>
{data.images {Object.entries(
.filter((image) => image.reference.includes(searchQuery)) data.images.reduce(
.map((image) => ( (acc, image) => {
<Image data={image} key={image.reference} /> const server = image.server ?? "";
if (!acc[server]) acc[server] = [];
acc[server].push(image);
return acc;
},
{} as Record<string, typeof data.images>,
),
)
.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> </ul>
</div> </div>

7
web/src/components/Image.tsx
View File

@@ -51,11 +51,8 @@ export default function Image({ data }: { data: Image }) {
} }
return ( return (
<> <>
<button <button onClick={handleOpen} className="w-full">
onClick={handleOpen} <li className="flex items-center gap-4 break-all px-6 py-4 text-start">
className={`w-full *:flex *:items-center *:gap-3 *:px-6 *:py-4`}
>
<li className="break-all text-start">
<IconCube className="size-6 shrink-0" /> <IconCube className="size-6 shrink-0" />
{data.reference} {data.reference}
<Icon data={data} /> <Icon data={data} />

45
web/src/components/Server.tsx Normal file
View File

@@ -0,0 +1,45 @@
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from "@headlessui/react";
import { theme } from "../theme";
import { IconChevronDown } from "@tabler/icons-react";
export function Server({
name,
children,
}: {
name: string;
children: React.ReactNode;
}) {
if (name.length === 0)
return (
<li className="mb-8 last:mb-0">
<ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}>
{children}
</ul>
</li>
);
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>
<IconChevronDown
className={`duration:300 size-5 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 duration-300`}
/>
</DisclosureButton>
<DisclosurePanel
className={`dark:divide-${theme}-800 divide-y dark:text-white`}
as="ul"
transition
>
{children}
</DisclosurePanel>
</Disclosure>
);
}

1
web/src/types.ts
View File

@@ -26,6 +26,7 @@ export interface Image {
error: string | null; error: string | null;
}; };
time: number; time: number;
server: string | null;
} }
interface VersionInfo { interface VersionInfo {

8
web/tailwind.config.js
View File

@@ -41,6 +41,14 @@ export default {
{ {
pattern: /text-(gray|neutral)-700/, 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)-800/, pattern: /divide-(gray|neutral)-800/,
variants: ["dark"], variants: ["dark"],

2
web/vite.config.ts
View File

@@ -12,6 +12,6 @@ export default defineConfig({
chunkFileNames: `assets/[name].js`, chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`, assetFileNames: `assets/[name].[ext]`,
}, },
} },
}, },
}); });