88 lines
2.7 KiB
Vue
88 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import MediaThumb from '@/components/MediaThumb.vue'
|
|
import type { CacheImageStat } from '@/composables/useVariantCache'
|
|
import { variantsCount } from '@/lib/variants/cacheFormat'
|
|
import { formatVariantSize } from '@/lib/variants/variantFormat'
|
|
|
|
defineProps<{
|
|
items: CacheImageStat[]
|
|
desktop: boolean
|
|
locked: boolean
|
|
isPurging: (id: number) => boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{ purge: [item: CacheImageStat] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<UCard
|
|
data-testid="cache-top-images"
|
|
:ui="{
|
|
root: 'min-w-0 rounded-none border border-default bg-default ring-0 divide-y-0',
|
|
header: 'flex min-h-11 items-center border-b border-default px-4 py-0 sm:px-4 sm:py-0',
|
|
body: 'p-0 sm:p-0',
|
|
}"
|
|
>
|
|
<template #header>
|
|
<h2 class="font-semibold text-highlighted">
|
|
{{ t('Top 10 images by variant disk usage') }}
|
|
</h2>
|
|
</template>
|
|
<div
|
|
v-for="(item, index) in items"
|
|
:key="item.id"
|
|
data-testid="cache-image-row"
|
|
class="flex min-h-15 items-center gap-3 px-3 sm:min-h-10 sm:px-4"
|
|
:class="index > 0 ? 'border-t border-muted' : ''"
|
|
>
|
|
<span class="w-5 font-mono text-xs text-muted">{{ index + 1 }}</span>
|
|
<MediaThumb
|
|
:item="{ url: item.url, content_type: '', sha256: '' }"
|
|
size="sm"
|
|
class="h-6 w-8 border border-default"
|
|
/>
|
|
<div class="flex min-w-0 flex-1 flex-col sm:flex-row sm:gap-3">
|
|
<span class="min-w-0 flex-1 truncate font-medium text-highlighted">
|
|
{{ item.filename }}
|
|
</span>
|
|
<span class="whitespace-nowrap text-xs text-muted sm:w-37.5">
|
|
{{ variantsCount(item.files)
|
|
}}{{ desktop ? '' : ` · ${formatVariantSize(item.bytes)}` }}
|
|
</span>
|
|
</div>
|
|
<span v-if="desktop" class="w-15 text-right text-toned">
|
|
{{ formatVariantSize(item.bytes) }}
|
|
</span>
|
|
<UTooltip v-if="!desktop" :text="t('Purge {0}', [item.filename])">
|
|
<UButton
|
|
color="neutral"
|
|
variant="outline"
|
|
icon="i-lucide-eraser"
|
|
:aria-label="t('Purge {0}', [item.filename])"
|
|
:loading="isPurging(item.id)"
|
|
:disabled="locked || isPurging(item.id)"
|
|
class="size-11 shrink-0 justify-center border border-accented bg-default text-highlighted ring-0"
|
|
:ui="{ leadingIcon: 'size-3.5' }"
|
|
@click="emit('purge', item)"
|
|
/>
|
|
</UTooltip>
|
|
<UButton
|
|
v-else
|
|
color="neutral"
|
|
variant="outline"
|
|
icon="i-lucide-eraser"
|
|
:aria-label="t('Purge {0}', [item.filename])"
|
|
:loading="isPurging(item.id)"
|
|
:disabled="locked || isPurging(item.id)"
|
|
class="h-6.5 shrink-0 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0"
|
|
:ui="{ leadingIcon: 'size-3.5' }"
|
|
@click="emit('purge', item)"
|
|
>
|
|
{{ t('Purge') }}
|
|
</UButton>
|
|
</div>
|
|
</UCard>
|
|
</template>
|