feat: add new filter for in use images to web ui

src/check.rs

@@ -3,7 +3,7 @@ use itertools::Itertools;
 use rustc_hash::{FxHashMap, FxHashSet};
 
 use crate::{
-    docker::get_images_from_docker_daemon,
+    docker::{get_images_from_docker_daemon, get_in_use_images},
     http::Client,
     registry::{check_auth, get_token},
     structs::{image::Image, update::Update},
@@ -99,6 +99,15 @@ pub async fn get_updates(
     // Get local images
     ctx.logger.debug("Retrieving images to be checked");
     let mut images = get_images_from_docker_daemon(ctx, references).await;
+    let in_use_images = get_in_use_images(ctx).await;
+    ctx.logger.debug(format!("Found {} images in use", in_use_images.len()));
+
+    // Complete in_use field
+    images.iter_mut().for_each(|image| {
+        if in_use_images.contains(&image.reference) {
+            image.in_use = true
+        }
+    });
 
     // Add extra images from references
     if !all_references.is_empty() {
@@ -195,7 +204,10 @@ pub async fn get_updates(
     }
     // Await all the futures
     let images = join_all(handles).await;
-    let mut updates: Vec<Update> = images.iter().map(|image| image.to_update()).collect();
+    let mut updates: Vec<Update> = images
+        .iter()
+        .map(|image| image.to_update())
+        .collect();
     updates.extend_from_slice(&remote_updates);
     updates
 }

src/docker.rs

@@ -1,4 +1,4 @@
-use bollard::{models::ImageInspect, ClientVersion, Docker};
+use bollard::{container::ListContainersOptions, models::ImageInspect, ClientVersion, Docker};
 
 use futures::future::join_all;
 
@@ -94,3 +94,34 @@ pub async fn get_images_from_docker_daemon(
     local_images.append(&mut swarm_images);
     local_images
 }
+
+pub async fn get_in_use_images(ctx: &Context) -> Vec<String> {
+    let client: Docker = create_docker_client(ctx.config.socket.as_deref());
+
+    let containers = match client
+        .list_containers::<String>(Some(ListContainersOptions {
+            all: true,
+            ..Default::default()
+        }))
+        .await
+    {
+        Ok(containers) => containers,
+        Err(e) => {
+            error!("Failed to retrieve list of containers available!\n{}", e)
+        }
+    };
+
+    containers
+        .iter()
+        .filter_map(|container| match &container.image {
+            Some(image) => Some({
+                if image.contains(":") {
+                    image.clone()
+                } else {
+                    format!("{image}:latest")
+                }
+            }),
+            None => None,
+        })
+        .collect()
+}

src/structs/image.rs

@@ -38,6 +38,7 @@ pub struct Image {
     pub url: Option<String>,
     pub digest_info: Option<DigestInfo>,
     pub version_info: Option<VersionInfo>,
+    pub in_use: bool,
     pub error: Option<String>,
     pub time_ms: u32,
 }
@@ -221,6 +222,7 @@ impl Image {
             },
             time: self.time_ms,
             server: None,
+            in_use: self.in_use,
             status: has_update,
         }
     }

src/structs/update.rs

@@ -11,6 +11,7 @@ pub struct Update {
     pub result: UpdateResult,
     pub time: u32,
     pub server: Option<String>,
+    pub in_use: bool,
     #[serde(skip_serializing, skip_deserializing)]
     pub status: Status,
 }

web/bun.lock

@@ -5,6 +5,7 @@
       "name": "web",
       "dependencies": {
         "@headlessui/react": "^2.1.10",
+        "@radix-ui/react-checkbox": "^1.2.3",
         "@radix-ui/react-tooltip": "^1.1.2",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
@@ -145,6 +146,8 @@
 
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.4", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw=="],
 
+    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.2.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.0", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pHVzDYsnaDmBlAuwim45y3soIN8H4R7KbkSVirGhXO+R/kO2OLCe0eucUEbddaTcdMHHdzcIGHtZSMSQlA+apw=="],
+
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
@@ -175,6 +178,8 @@
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
+    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
+
     "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
 
     "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],

web/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.1.10",
+    "@radix-ui/react-checkbox": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.1.2",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",

web/src/App.tsx

@@ -4,12 +4,16 @@ import Statistic from "./components/Statistic";
 import Image from "./components/Image";
 import { LastChecked } from "./components/LastChecked";
 import Loading from "./components/Loading";
+import { Filters as FiltersType } from "./types";
 import { theme } from "./theme";
 import RefreshButton from "./components/RefreshButton";
 import Search from "./components/Search";
 import { Server } from "./components/Server";
 import { useData } from "./hooks/use-data";
 import DataLoadingError from "./components/DataLoadingError";
+import Filters from "./components/Filters";
+import { Filter, FilterX } from "lucide-react";
+import { WithTooltip } from "./components/ui/Tooltip";
 
 const SORT_ORDER = [
   "monitored_images",
@@ -24,10 +28,22 @@ const SORT_ORDER = [
 
 function App() {
   const { data, isLoading, isError } = useData();
+
+  const [showFilters, setShowFilters] = useState<boolean>(false);
+  const [filters, setFilters] = useState<FiltersType>({
+    onlyInUse: false,
+  });
   const [searchQuery, setSearchQuery] = useState("");
 
   if (isLoading) return <Loading />;
   if (isError || !data) return <DataLoadingError />;
+  const toggleShowFilters = () => {
+    if (showFilters) {
+      setFilters({ onlyInUse: false });
+    }
+    setShowFilters(!showFilters);
+  };
+
   return (
     <div
       className={`flex min-h-screen justify-center bg-white dark:bg-${theme}-950`}
@@ -61,14 +77,26 @@ function App() {
             className={`border shadow-sm border-${theme}-200 dark:border-${theme}-900 my-8 rounded-md`}
           >
             <div
-              className={`flex items-center justify-between px-6 py-4 text-${theme}-500`}
+              className={`flex items-center justify-between gap-3 px-6 py-4 text-${theme}-500`}
             >
               <LastChecked datetime={data.last_updated} />
-              <RefreshButton />
+              <div className="flex gap-3">
+                <WithTooltip
+                  text={showFilters ? "Clear filters" : "Show filters"}
+                >
+                  <button onClick={toggleShowFilters}>
+                    {showFilters ? <FilterX /> : <Filter />}
+                  </button>
+                </WithTooltip>
+                <RefreshButton />
+              </div>
             </div>
             <div className="flex gap-2 px-6 text-black dark:text-white">
               <Search onChange={setSearchQuery} />
             </div>
+            {showFilters && (
+              <Filters filters={filters} setFilters={setFilters} />
+            )}
             <ul>
               {Object.entries(
                 data.images.reduce<Record<string, typeof data.images>>(
@@ -85,6 +113,9 @@ function App() {
                 .map(([server, images]) => (
                   <Server name={server} key={server}>
                     {images
+                      .filter((image) =>
+                        filters.onlyInUse ? !!image.in_use : true,
+                      )
                       .filter((image) => image.reference.includes(searchQuery))
                       .map((image) => (
                         <Image data={image} key={image.reference} />

web/src/components/Filters.tsx

@@ -0,0 +1,33 @@
+import { theme } from "../theme";
+import { Filters as FiltersType } from "../types";
+import { Checkbox } from "./ui/Checkbox";
+
+interface Props {
+  filters: FiltersType;
+  setFilters: (filters: FiltersType) => void;
+}
+
+export default function Filters({ filters, setFilters }: Props) {
+  return (
+      <div className="flex w-fit flex-col gap-2 px-6 py-4">
+        <div className="ml-auto flex items-center space-x-2">
+          <Checkbox
+            id="inUse"
+            checked={filters.onlyInUse}
+            onCheckedChange={(value) => {
+              setFilters({
+                ...filters,
+                onlyInUse: value === "indeterminate" ? false : value,
+              });
+            }}
+          />
+          <label
+            htmlFor="inUse"
+            className={`text-sm font-medium leading-none text-${theme}-600 dark:text-${theme}-400 hover:text-black dark:hover:text-white peer-hover:text-black peer-hover:dark:text-white peer-data-[state=checked]:text-black dark:peer-data-[state=checked]:text-white transition-colors duration-200`}
+          >
+            Hide unused images
+          </label>
+        </div>
+      </div>
+  );
+}

web/src/components/Image.tsx

@@ -5,7 +5,7 @@ import {
   DialogPanel,
   DialogTitle,
 } from "@headlessui/react";
-import { WithTooltip } from "./Tooltip";
+import { WithTooltip } from "./ui/Tooltip";
 import type { Image } from "../types";
 import { theme } from "../theme";
 import { CodeBlock } from "./CodeBlock";

web/src/components/RefreshButton.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { WithTooltip } from "./Tooltip";
+import { WithTooltip } from "./ui/Tooltip";
 
 export default function RefreshButton() {
   const [disabled, setDisabled] = useState(false);

web/src/components/ui/Checkbox.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "../../utils";
+import { theme } from "../../theme";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      `border-${theme}-600 dark:border-${theme}-400 group peer h-4 w-4 shrink-0 rounded-sm border shadow transition-colors duration-200 hover:border-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-blue-500 data-[state=checked]:border-0 data-[state=checked]:bg-blue-500 data-[state=checked]:text-white hover:data-[state=checked]:bg-blue-600 dark:hover:border-white dark:hover:data-[state=checked]:bg-blue-400`,
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check
+        className={`h-3 w-3 group-data-[state=checked]:text-white dark:group-data-[state=checked]:text-${theme}-950`}
+        strokeWidth={3}
+      />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

web/src/components/ui/Tooltip.tsx

@@ -1,7 +1,7 @@
 import { Provider, Root, Trigger, Content } from "@radix-ui/react-tooltip";
-import { cn } from "../utils";
+import { cn } from "../../utils";
 import { forwardRef, ReactNode } from "react";
-import { theme } from "../theme";
+import { theme } from "../../theme";
 
 const TooltipContent = forwardRef<
   React.ElementRef<typeof Content>,

web/src/types.ts

@@ -28,6 +28,7 @@ export interface Image {
   };
   time: number;
   server: string | null;
+  in_use: boolean | null;
 }
 
 interface VersionInfo {
@@ -43,3 +44,7 @@ interface DigestInfo {
   local_digests: string[];
   remote_digest: string;
 }
+
+export interface Filters {
+  onlyInUse: boolean;
+}

web/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./src/App.tsx", "./src/components/*.tsx", "./index.liquid"],
+  content: ["./src/App.tsx", "./src/components/**/*.tsx", "./index.liquid"],
   theme: {
     extend: {},
   },
@@ -41,6 +41,10 @@ export default {
     {
       pattern: /text-(gray|neutral)-700/,
     },
+    {
+      pattern: /text-(gray|neutral)-950/,
+      variants: ["dark:group-data-[state=checked]"]
+    },
     {
       pattern: /text-(gray|neutral)-800/,
       variants: ["group-data-[hover]"],
@@ -54,10 +58,10 @@ export default {
       variants: ["dark"],
     },
     {
-      pattern: /border-(gray|neutral)-(200|300)/,
+      pattern: /border-(gray|neutral)-(600|300|400)/,
     },
     {
-      pattern: /border-(gray|neutral)-(700|800|900)/,
+      pattern: /border-(gray|neutral)-(400|700|800|900)/,
       variants: ["dark"],
     },
     {