mirror of
https://github.com/khoaliber/dockhand.git
synced 2026-03-06 13:21:53 +00:00
Initial commit
This commit is contained in:
Jarek Krochmalski
213
routes/settings/registries/RegistriesTab.svelte
Normal file
213
routes/settings/registries/RegistriesTab.svelte
Normal file
@@ -0,0 +1,213 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { Plus, Trash2, Pencil, Star, Key, Download, Icon } from 'lucide-svelte';
|
||||
import { whale } from '@lucide/lab';
|
||||
import ConfirmPopover from '$lib/components/ConfirmPopover.svelte';
|
||||
import { canAccess } from '$lib/stores/auth';
|
||||
import RegistryModal from './RegistryModal.svelte';
|
||||
import { EmptyState } from '$lib/components/ui/empty-state';
|
||||
|
||||
// Registry types
|
||||
interface Registry {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
username?: string;
|
||||
hasCredentials: boolean;
|
||||
isDefault: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// Check if a registry is Docker Hub
|
||||
function isDockerHub(registry: Registry): boolean {
|
||||
const url = registry.url.toLowerCase();
|
||||
return url.includes('docker.io') ||
|
||||
url.includes('hub.docker.com') ||
|
||||
url.includes('registry.hub.docker.com');
|
||||
}
|
||||
|
||||
// Registry state
|
||||
let registries = $state<Registry[]>([]);
|
||||
let regLoading = $state(true);
|
||||
let showRegModal = $state(false);
|
||||
let editingReg = $state<Registry | null>(null);
|
||||
let confirmDeleteRegistryId = $state<number | null>(null);
|
||||
|
||||
async function fetchRegistries() {
|
||||
regLoading = true;
|
||||
try {
|
||||
const response = await fetch('/api/registries');
|
||||
registries = await response.json();
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch registries:', error);
|
||||
toast.error('Failed to fetch registries');
|
||||
} finally {
|
||||
regLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openRegModal(registry?: Registry) {
|
||||
editingReg = registry || null;
|
||||
showRegModal = true;
|
||||
}
|
||||
|
||||
async function deleteRegistry(id: number) {
|
||||
try {
|
||||
const response = await fetch(`/api/registries/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await fetchRegistries();
|
||||
toast.success('Registry deleted');
|
||||
} else {
|
||||
const data = await response.json();
|
||||
toast.error(data.error || 'Failed to delete registry');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to delete registry');
|
||||
}
|
||||
}
|
||||
|
||||
async function setRegDefault(id: number) {
|
||||
try {
|
||||
const response = await fetch(`/api/registries/${id}/default`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await fetchRegistries();
|
||||
toast.success('Default registry updated');
|
||||
} else {
|
||||
toast.error('Failed to set default registry');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to set default registry:', error);
|
||||
toast.error('Failed to set default registry');
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchRegistries();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<Badge variant="secondary" class="text-xs">{registries.length} total</Badge>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
{#if $canAccess('registries', 'create')}
|
||||
<Button size="sm" onclick={() => openRegModal()}>
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
Add registry
|
||||
</Button>
|
||||
{/if}
|
||||
<Button size="sm" variant="outline" onclick={fetchRegistries}>Refresh</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if regLoading && registries.length === 0}
|
||||
<p class="text-muted-foreground text-sm">Loading registries...</p>
|
||||
{:else if registries.length === 0}
|
||||
<EmptyState
|
||||
icon={Download}
|
||||
title="No registries found"
|
||||
description="Add a Docker registry to pull and push images"
|
||||
/>
|
||||
{:else}
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each registries as registry (registry.id)}
|
||||
<div out:fade={{ duration: 200 }}>
|
||||
<Card.Root class={registry.isDefault ? 'border-primary' : ''}>
|
||||
<Card.Header class="pb-2">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
{#if isDockerHub(registry)}
|
||||
<Icon iconNode={whale} class="w-5 h-5 text-muted-foreground" />
|
||||
{:else}
|
||||
<Download class="w-5 h-5 text-muted-foreground" />
|
||||
{/if}
|
||||
<Card.Title class="text-base">{registry.name}</Card.Title>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
{#if registry.isDefault}
|
||||
<Badge variant="default" class="text-xs">Default</Badge>
|
||||
{/if}
|
||||
{#if registry.hasCredentials}
|
||||
<Badge variant="secondary" class="text-xs">Auth</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-3">
|
||||
<div class="text-sm text-muted-foreground truncate" title={registry.url}>
|
||||
{registry.url}
|
||||
</div>
|
||||
|
||||
<!-- Always reserve space for username row -->
|
||||
<div class="flex items-center gap-2 text-xs text-muted-foreground h-4">
|
||||
{#if registry.username}
|
||||
<Key class="w-3 h-3" />
|
||||
<span>{registry.username}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-2 min-h-[32px]">
|
||||
{#if !registry.isDefault && $canAccess('registries', 'edit')}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => setRegDefault(registry.id)}
|
||||
>
|
||||
<Star class="w-3 h-3 mr-1" />
|
||||
Set default
|
||||
</Button>
|
||||
{/if}
|
||||
{#if $canAccess('registries', 'edit')}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => openRegModal(registry)}
|
||||
>
|
||||
<Pencil class="w-3 h-3" />
|
||||
</Button>
|
||||
{/if}
|
||||
{#if $canAccess('registries', 'delete')}
|
||||
<ConfirmPopover
|
||||
open={confirmDeleteRegistryId === registry.id}
|
||||
action="Delete"
|
||||
itemType="registry"
|
||||
itemName={registry.name}
|
||||
title="Remove"
|
||||
position="left"
|
||||
onConfirm={() => deleteRegistry(registry.id)}
|
||||
onOpenChange={(open) => confirmDeleteRegistryId = open ? registry.id : null}
|
||||
>
|
||||
{#snippet children({ open })}
|
||||
<Trash2 class="w-3 h-3 {open ? 'text-destructive' : 'text-muted-foreground hover:text-destructive'}" />
|
||||
{/snippet}
|
||||
</ConfirmPopover>
|
||||
{/if}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<RegistryModal
|
||||
bind:open={showRegModal}
|
||||
registry={editingReg}
|
||||
onClose={() => { showRegModal = false; editingReg = null; }}
|
||||
onSaved={fetchRegistries}
|
||||
/>
|
||||
Reference in New Issue
Block a user