mirror of
https://github.com/lukaszraczylo/gohoarder.git
synced 2026-06-11 23:38:59 +00:00
Initial commit
This commit is contained in:
@@ -0,0 +1,609 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-gray-900">CVE Bypass Management</h2>
|
||||
<p class="text-gray-600 mt-1">Manage temporary security bypasses for packages and CVEs</p>
|
||||
</div>
|
||||
<Button @click="showCreateModal = true" class="bg-green-600 hover:bg-green-700">
|
||||
<i class="fas fa-plus mr-2"></i>Create Bypass
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium text-gray-700">Filter:</span>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
@click="activeFilter = 'all'"
|
||||
:variant="activeFilter === 'all' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
@click="activeFilter = 'active'"
|
||||
:variant="activeFilter === 'active' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
<i class="fas fa-check-circle mr-1"></i>Active
|
||||
</Button>
|
||||
<Button
|
||||
@click="activeFilter === 'expired'"
|
||||
:variant="activeFilter === 'expired' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
<i class="fas fa-clock mr-1"></i>Expired
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium text-gray-700">Type:</span>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
@click="typeFilter = ''"
|
||||
:variant="typeFilter === '' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
@click="typeFilter = 'cve'"
|
||||
:variant="typeFilter === 'cve' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
CVE
|
||||
</Button>
|
||||
<Button
|
||||
@click="typeFilter = 'package'"
|
||||
:variant="typeFilter === 'package' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
Package
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button @click="fetchBypasses" variant="outline" size="sm" class="sm:ml-auto">
|
||||
<i class="fas fa-sync-alt mr-2"></i>Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<Alert v-if="error" variant="destructive" class="mb-4">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<AlertDescription>{{ error }}</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Success Alert -->
|
||||
<Alert v-if="successMessage" class="mb-4 bg-green-50 border-green-200">
|
||||
<i class="fas fa-check-circle mr-2 text-green-600"></i>
|
||||
<AlertDescription class="text-green-800">{{ successMessage }}</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin text-4xl text-primary-600"></i>
|
||||
<p class="mt-4 text-gray-600">Loading bypasses...</p>
|
||||
</div>
|
||||
|
||||
<!-- Bypass List -->
|
||||
<Card v-else>
|
||||
<CardContent class="p-6">
|
||||
<div v-if="filteredBypasses.length === 0" class="text-center py-12 text-gray-500">
|
||||
<i class="fas fa-shield-alt text-6xl mb-4"></i>
|
||||
<p class="text-xl">No bypasses found</p>
|
||||
<p class="mt-2">Create a bypass to allow packages with known vulnerabilities</p>
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<div
|
||||
v-for="bypass in filteredBypasses"
|
||||
:key="bypass.id"
|
||||
class="border rounded-lg p-4 hover:bg-gray-50"
|
||||
:class="bypass.active ? 'border-gray-200' : 'border-gray-300 bg-gray-50'"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Badge :variant="bypass.type === 'cve' ? 'default' : 'outline'">
|
||||
{{ bypass.type.toUpperCase() }}
|
||||
</Badge>
|
||||
<Badge
|
||||
:class="bypass.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'"
|
||||
>
|
||||
{{ bypass.active ? 'ACTIVE' : 'INACTIVE' }}
|
||||
</Badge>
|
||||
<Badge
|
||||
v-if="isExpired(bypass.expires_at)"
|
||||
class="bg-red-100 text-red-800"
|
||||
>
|
||||
EXPIRED
|
||||
</Badge>
|
||||
</div>
|
||||
<h4 class="font-semibold text-lg text-gray-900">{{ bypass.target }}</h4>
|
||||
<p class="text-sm text-gray-600 mt-1">{{ bypass.reason }}</p>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-3 text-sm text-gray-500">
|
||||
<div>
|
||||
<i class="fas fa-user mr-1"></i>
|
||||
<strong>Created by:</strong> {{ bypass.created_by }}
|
||||
</div>
|
||||
<div>
|
||||
<i class="fas fa-calendar mr-1"></i>
|
||||
<strong>Created:</strong> {{ formatDate(bypass.created_at) }}
|
||||
</div>
|
||||
<div>
|
||||
<i class="fas fa-clock mr-1"></i>
|
||||
<strong>Expires:</strong> {{ formatDate(bypass.expires_at) }}
|
||||
</div>
|
||||
<div v-if="bypass.applies_to">
|
||||
<i class="fas fa-box mr-1"></i>
|
||||
<strong>Applies to:</strong> {{ bypass.applies_to }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 ml-4">
|
||||
<Button
|
||||
@click="editBypass(bypass)"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
title="Edit bypass"
|
||||
>
|
||||
<i class="fas fa-edit"></i>
|
||||
</Button>
|
||||
<Button
|
||||
@click="confirmDeleteBypass(bypass)"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
title="Delete bypass"
|
||||
>
|
||||
<i class="fas fa-trash"></i>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Create/Edit Bypass Modal -->
|
||||
<Dialog v-model:open="showCreateModal">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ editingBypass ? 'Edit' : 'Create' }} Bypass</DialogTitle>
|
||||
<DialogDescription>
|
||||
{{ editingBypass ? 'Update bypass settings' : 'Create a temporary bypass for a CVE or package' }}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Type Selection -->
|
||||
<div v-if="!editingBypass">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 block">Bypass Type</label>
|
||||
<div class="flex gap-4">
|
||||
<Button
|
||||
@click="bypassForm.type = 'cve'"
|
||||
:variant="bypassForm.type === 'cve' ? 'default' : 'outline'"
|
||||
class="flex-1"
|
||||
>
|
||||
<i class="fas fa-bug mr-2"></i>CVE Bypass
|
||||
</Button>
|
||||
<Button
|
||||
@click="bypassForm.type = 'package'"
|
||||
:variant="bypassForm.type === 'package' ? 'default' : 'outline'"
|
||||
class="flex-1"
|
||||
>
|
||||
<i class="fas fa-box mr-2"></i>Package Bypass
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Target -->
|
||||
<div v-if="!editingBypass">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 block">
|
||||
{{ bypassForm.type === 'cve' ? 'CVE ID' : 'Package' }}
|
||||
</label>
|
||||
<Input
|
||||
v-model="bypassForm.target"
|
||||
:placeholder="bypassForm.type === 'cve' ? 'CVE-2021-23337' : 'npm/lodash@4.17.20'"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
{{ bypassForm.type === 'cve' ? 'Enter the CVE ID (e.g., CVE-2021-23337)' : 'Enter package (e.g., npm/lodash@4.17.20 or npm/lodash for all versions)' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Applies To (CVE only) -->
|
||||
<div v-if="!editingBypass && bypassForm.type === 'cve'">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 block">
|
||||
Applies To (Optional)
|
||||
</label>
|
||||
<Input
|
||||
v-model="bypassForm.applies_to"
|
||||
placeholder="npm/lodash@4.17.20"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
Limit this CVE bypass to a specific package. Leave empty to apply to all packages with this CVE.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Reason -->
|
||||
<div>
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 block">Reason *</label>
|
||||
<Input
|
||||
v-model="bypassForm.reason"
|
||||
placeholder="No fix available, business critical dependency"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
Explain why this bypass is needed (required for audit trail)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Created By -->
|
||||
<div v-if="!editingBypass">
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 block">Created By *</label>
|
||||
<Input
|
||||
v-model="bypassForm.created_by"
|
||||
placeholder="admin@example.com"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Expires In -->
|
||||
<div>
|
||||
<label class="text-sm font-medium text-gray-700 mb-2 block">Expires In (Hours) *</label>
|
||||
<Input
|
||||
v-model.number="bypassForm.expires_in_hours"
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="168"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
How many hours until this bypass expires (e.g., 168 = 7 days, 720 = 30 days)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Active (Edit only) -->
|
||||
<div v-if="editingBypass" class="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="bypassForm.active"
|
||||
id="active-checkbox"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
<label for="active-checkbox" class="text-sm font-medium text-gray-700">
|
||||
Active
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Notify on Expiry -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="bypassForm.notify_on_expiry"
|
||||
id="notify-checkbox"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
<label for="notify-checkbox" class="text-sm font-medium text-gray-700">
|
||||
Send notification when bypass expires
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button @click="closeCreateModal" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button @click="submitBypass" :disabled="!isFormValid">
|
||||
{{ editingBypass ? 'Update' : 'Create' }} Bypass
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- Delete Confirmation Dialog -->
|
||||
<Dialog v-model:open="showDeleteModal">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirm Deletion</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete this bypass for <strong>{{ bypassToDelete?.target }}</strong>?
|
||||
This action cannot be undone and the security check will be re-enabled immediately.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button @click="showDeleteModal = false" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button @click="deleteBypass" variant="destructive">
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
interface Bypass {
|
||||
id: string
|
||||
type: 'cve' | 'package'
|
||||
target: string
|
||||
reason: string
|
||||
created_by: string
|
||||
created_at: string
|
||||
expires_at: string
|
||||
applies_to?: string
|
||||
notify_on_expiry: boolean
|
||||
active: boolean
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const successMessage = ref<string | null>(null)
|
||||
const bypasses = ref<Bypass[]>([])
|
||||
const activeFilter = ref<'all' | 'active' | 'expired'>('all')
|
||||
const typeFilter = ref<'' | 'cve' | 'package'>('')
|
||||
|
||||
const showCreateModal = ref(false)
|
||||
const showDeleteModal = ref(false)
|
||||
const editingBypass = ref<Bypass | null>(null)
|
||||
const bypassToDelete = ref<Bypass | null>(null)
|
||||
|
||||
const bypassForm = ref({
|
||||
type: 'cve' as 'cve' | 'package',
|
||||
target: '',
|
||||
reason: '',
|
||||
created_by: '',
|
||||
expires_in_hours: 168,
|
||||
applies_to: '',
|
||||
notify_on_expiry: false,
|
||||
active: true,
|
||||
})
|
||||
|
||||
// Get API key from localStorage or prompt user
|
||||
const apiKey = ref<string>('')
|
||||
|
||||
const filteredBypasses = computed(() => {
|
||||
let filtered = bypasses.value
|
||||
|
||||
// Filter by active/expired
|
||||
if (activeFilter.value === 'active') {
|
||||
filtered = filtered.filter(b => b.active && !isExpired(b.expires_at))
|
||||
} else if (activeFilter.value === 'expired') {
|
||||
filtered = filtered.filter(b => isExpired(b.expires_at))
|
||||
}
|
||||
|
||||
// Filter by type
|
||||
if (typeFilter.value) {
|
||||
filtered = filtered.filter(b => b.type === typeFilter.value)
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
if (editingBypass.value) {
|
||||
return bypassForm.value.reason.trim() !== '' && bypassForm.value.expires_in_hours > 0
|
||||
}
|
||||
return (
|
||||
bypassForm.value.target.trim() !== '' &&
|
||||
bypassForm.value.reason.trim() !== '' &&
|
||||
bypassForm.value.created_by.trim() !== '' &&
|
||||
bypassForm.value.expires_in_hours > 0
|
||||
)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// Try to get API key from localStorage
|
||||
apiKey.value = localStorage.getItem('admin_api_key') || ''
|
||||
if (!apiKey.value) {
|
||||
promptForApiKey()
|
||||
} else {
|
||||
fetchBypasses()
|
||||
}
|
||||
})
|
||||
|
||||
function promptForApiKey() {
|
||||
const key = prompt('Enter your admin API key:')
|
||||
if (key) {
|
||||
apiKey.value = key
|
||||
localStorage.setItem('admin_api_key', key)
|
||||
fetchBypasses()
|
||||
} else {
|
||||
error.value = 'Admin API key required to manage bypasses'
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchBypasses() {
|
||||
if (!apiKey.value) {
|
||||
promptForApiKey()
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const params = new URLSearchParams()
|
||||
if (activeFilter.value === 'active') {
|
||||
params.append('active_only', 'true')
|
||||
} else if (activeFilter.value === 'expired') {
|
||||
params.append('include_expired', 'true')
|
||||
}
|
||||
if (typeFilter.value) {
|
||||
params.append('type', typeFilter.value)
|
||||
}
|
||||
|
||||
const response = await axios.get('/api/admin/bypasses?' + params.toString(), {
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiKey.value}`,
|
||||
},
|
||||
})
|
||||
bypasses.value = response.data.bypasses || []
|
||||
} catch (err: any) {
|
||||
console.error('Failed to fetch bypasses:', err)
|
||||
if (err.response?.status === 401) {
|
||||
error.value = 'Invalid API key. Please check your credentials.'
|
||||
localStorage.removeItem('admin_api_key')
|
||||
apiKey.value = ''
|
||||
} else {
|
||||
error.value = err.response?.data?.error?.message || err.message || 'Failed to load bypasses'
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitBypass() {
|
||||
if (!isFormValid.value) return
|
||||
|
||||
loading.value = true
|
||||
error.value = null
|
||||
successMessage.value = null
|
||||
|
||||
try {
|
||||
if (editingBypass.value) {
|
||||
// Update existing bypass
|
||||
await axios.patch(
|
||||
`/api/admin/bypasses/${editingBypass.value.id}`,
|
||||
{
|
||||
active: bypassForm.value.active,
|
||||
reason: bypassForm.value.reason,
|
||||
expires_in_hours: bypassForm.value.expires_in_hours,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiKey.value}`,
|
||||
},
|
||||
}
|
||||
)
|
||||
successMessage.value = 'Bypass updated successfully'
|
||||
} else {
|
||||
// Create new bypass
|
||||
await axios.post(
|
||||
'/api/admin/bypasses',
|
||||
{
|
||||
type: bypassForm.value.type,
|
||||
target: bypassForm.value.target,
|
||||
reason: bypassForm.value.reason,
|
||||
created_by: bypassForm.value.created_by,
|
||||
expires_in_hours: bypassForm.value.expires_in_hours,
|
||||
applies_to: bypassForm.value.applies_to || undefined,
|
||||
notify_on_expiry: bypassForm.value.notify_on_expiry,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiKey.value}`,
|
||||
},
|
||||
}
|
||||
)
|
||||
successMessage.value = 'Bypass created successfully'
|
||||
}
|
||||
|
||||
closeCreateModal()
|
||||
await fetchBypasses()
|
||||
|
||||
// Clear success message after 5 seconds
|
||||
setTimeout(() => {
|
||||
successMessage.value = null
|
||||
}, 5000)
|
||||
} catch (err: any) {
|
||||
console.error('Failed to submit bypass:', err)
|
||||
error.value = err.response?.data?.error?.message || err.message || 'Failed to save bypass'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function editBypass(bypass: Bypass) {
|
||||
editingBypass.value = bypass
|
||||
bypassForm.value = {
|
||||
type: bypass.type,
|
||||
target: bypass.target,
|
||||
reason: bypass.reason,
|
||||
created_by: bypass.created_by,
|
||||
expires_in_hours: 168, // Default extension
|
||||
applies_to: bypass.applies_to || '',
|
||||
notify_on_expiry: bypass.notify_on_expiry,
|
||||
active: bypass.active,
|
||||
}
|
||||
showCreateModal.value = true
|
||||
}
|
||||
|
||||
function closeCreateModal() {
|
||||
showCreateModal.value = false
|
||||
editingBypass.value = null
|
||||
bypassForm.value = {
|
||||
type: 'cve',
|
||||
target: '',
|
||||
reason: '',
|
||||
created_by: '',
|
||||
expires_in_hours: 168,
|
||||
applies_to: '',
|
||||
notify_on_expiry: false,
|
||||
active: true,
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDeleteBypass(bypass: Bypass) {
|
||||
bypassToDelete.value = bypass
|
||||
showDeleteModal.value = true
|
||||
}
|
||||
|
||||
async function deleteBypass() {
|
||||
if (!bypassToDelete.value) return
|
||||
|
||||
loading.value = true
|
||||
error.value = null
|
||||
successMessage.value = null
|
||||
|
||||
try {
|
||||
await axios.delete(`/api/admin/bypasses/${bypassToDelete.value.id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiKey.value}`,
|
||||
},
|
||||
})
|
||||
|
||||
successMessage.value = 'Bypass deleted successfully'
|
||||
showDeleteModal.value = false
|
||||
bypassToDelete.value = null
|
||||
await fetchBypasses()
|
||||
|
||||
// Clear success message after 5 seconds
|
||||
setTimeout(() => {
|
||||
successMessage.value = null
|
||||
}, 5000)
|
||||
} catch (err: any) {
|
||||
console.error('Failed to delete bypass:', err)
|
||||
error.value = err.response?.data?.error?.message || err.message || 'Failed to delete bypass'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function isExpired(expiresAt: string): boolean {
|
||||
return new Date(expiresAt) < new Date()
|
||||
}
|
||||
|
||||
function formatDate(date: string): string {
|
||||
return new Date(date).toLocaleString()
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,208 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import Dashboard from './Dashboard.vue'
|
||||
import { usePackageStore } from '../stores/packages'
|
||||
|
||||
describe('Dashboard.vue', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
// Mock the fetch functions to prevent actual API calls
|
||||
const store = usePackageStore()
|
||||
vi.spyOn(store, 'fetchStats').mockResolvedValue()
|
||||
vi.spyOn(store, 'fetchPackages').mockResolvedValue()
|
||||
})
|
||||
|
||||
it('renders dashboard component', () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
expect(wrapper.find('h2').text()).toBe('Dashboard')
|
||||
})
|
||||
|
||||
it('displays error message when error occurs', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.error = 'Failed to load dashboard'
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Failed to load dashboard')
|
||||
})
|
||||
|
||||
it('displays loading state when loading', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = true
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Loading statistics...')
|
||||
})
|
||||
|
||||
it('displays overview stats cards', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 2,
|
||||
total_size: 3072,
|
||||
total_downloads: 30,
|
||||
scanned_packages: 2,
|
||||
vulnerable_packages: 0,
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Total Packages')
|
||||
expect(wrapper.text()).toContain('Total Size')
|
||||
expect(wrapper.text()).toContain('Total Downloads')
|
||||
})
|
||||
|
||||
it('displays total packages from stats', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 100,
|
||||
total_size: 0,
|
||||
total_downloads: 0,
|
||||
scanned_packages: 0,
|
||||
vulnerable_packages: 0,
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('100')
|
||||
})
|
||||
|
||||
it('displays total downloads from stats', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 0,
|
||||
total_size: 0,
|
||||
total_downloads: 500,
|
||||
scanned_packages: 0,
|
||||
vulnerable_packages: 0,
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('500')
|
||||
})
|
||||
|
||||
it('displays total size from stats', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 0,
|
||||
total_size: 1048576, // 1 MB
|
||||
total_downloads: 0,
|
||||
scanned_packages: 0,
|
||||
vulnerable_packages: 0,
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('1 MB')
|
||||
})
|
||||
|
||||
it('displays recent packages section', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = [
|
||||
{
|
||||
id: '1',
|
||||
registry: 'npm',
|
||||
name: 'test-package',
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: '2025-01-01T00:00:00Z',
|
||||
last_accessed: '2025-01-01T00:00:00Z',
|
||||
download_count: 10,
|
||||
},
|
||||
]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Recent Packages')
|
||||
})
|
||||
|
||||
it('shows recent packages sorted by cached_at', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = [
|
||||
{
|
||||
id: '1',
|
||||
registry: 'npm',
|
||||
name: 'old-package',
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: '2025-01-01T00:00:00Z',
|
||||
last_accessed: '2025-01-01T00:00:00Z',
|
||||
download_count: 10,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
registry: 'npm',
|
||||
name: 'new-package',
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: '2025-01-02T00:00:00Z',
|
||||
last_accessed: '2025-01-02T00:00:00Z',
|
||||
download_count: 5,
|
||||
},
|
||||
]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const recentPackagesSection = wrapper.text().split('Recent Packages')[1]
|
||||
|
||||
// new-package should appear before old-package since it's more recent
|
||||
expect(recentPackagesSection.indexOf('new-package')).toBeLessThan(
|
||||
recentPackagesSection.indexOf('old-package')
|
||||
)
|
||||
})
|
||||
|
||||
it('limits recent packages to 10 items', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = Array.from({ length: 15 }, (_, i) => ({
|
||||
id: `${i}`,
|
||||
registry: 'npm',
|
||||
name: `package${i}`,
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: `2025-01-${String(i + 1).padStart(2, '0')}T00:00:00Z`,
|
||||
last_accessed: `2025-01-${String(i + 1).padStart(2, '0')}T00:00:00Z`,
|
||||
download_count: i,
|
||||
}))
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const recentSection = wrapper.text().split('Recent Packages')[1]
|
||||
// Count how many "package" strings appear (each package has the word "package" in its name)
|
||||
const packageCount = (recentSection.match(/package\d+/g) || []).length
|
||||
expect(packageCount).toBeLessThanOrEqual(10)
|
||||
})
|
||||
|
||||
it('handles empty packages array', async () => {
|
||||
const wrapper = mount(Dashboard)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = []
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('0')
|
||||
expect(wrapper.text()).toContain('0 B')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8">Dashboard</h2>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<Alert v-if="error" variant="destructive" class="mb-4">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<AlertDescription>{{ error }}</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin text-4xl text-primary-600"></i>
|
||||
<p class="mt-4 text-gray-600">Loading statistics...</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
|
||||
<Card class="border-0 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm font-medium text-muted-foreground">Total Packages</p>
|
||||
<p class="text-3xl font-bold text-foreground tracking-tight">
|
||||
{{ formatNumber(stats?.total_packages || 0) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-boxes text-slate-700 text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-0 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm font-medium text-muted-foreground">Total Size</p>
|
||||
<p class="text-3xl font-bold text-foreground tracking-tight">
|
||||
{{ formatBytes(stats?.total_size || 0) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-sky-50 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-hard-drive text-sky-600 text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-0 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm font-medium text-muted-foreground">Total Downloads</p>
|
||||
<p class="text-3xl font-bold text-foreground tracking-tight">
|
||||
{{ formatNumber(stats?.total_downloads || 0) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-download text-emerald-600 text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-0 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm font-medium text-muted-foreground">Scanned Packages</p>
|
||||
<p class="text-3xl font-bold text-foreground tracking-tight">
|
||||
{{ formatNumber(stats?.scanned_packages || 0) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-violet-50 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-shield-alt text-violet-600 text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Downloads Chart -->
|
||||
<Card class="border-0 shadow-lg mb-10">
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-semibold text-foreground">Download Activity</h3>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
v-for="period in chartPeriods"
|
||||
:key="period.value"
|
||||
@click="selectedPeriod = period.value"
|
||||
:variant="selectedPeriod === period.value ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
{{ period.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-64 flex items-end justify-between gap-2">
|
||||
<div
|
||||
v-for="(value, index) in chartData"
|
||||
:key="index"
|
||||
class="flex-1 flex flex-col items-center gap-2"
|
||||
>
|
||||
<div class="w-full bg-slate-100 rounded-t-lg relative" :style="{ height: `${(value / maxChartValue) * 100}%` }">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-700 to-slate-500 rounded-t-lg"></div>
|
||||
</div>
|
||||
<span class="text-xs text-muted-foreground">{{ getChartLabel(index) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="chartLoading || chartData.length === 0" class="mt-4 text-center">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
{{ chartLoading ? 'Loading chart data...' : 'No download activity in this period' }}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Recent Packages -->
|
||||
<Card><CardContent class="p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-4">
|
||||
<i class="fas fa-clock mr-2"></i>Recent Packages
|
||||
</h3>
|
||||
<div v-if="packages.length === 0" class="text-center py-8 text-gray-500">
|
||||
<i class="fas fa-inbox text-4xl mb-4"></i>
|
||||
<p>No packages cached yet</p>
|
||||
</div>
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Package
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Version
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Registry
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Size
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Downloads
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr v-for="pkg in recentPackages" :key="pkg.id">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{{ pkg.name }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ pkg.version }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<Badge variant="outline" :class="getRegistryBadgeClass(pkg.registry)">
|
||||
{{ pkg.registry }}
|
||||
</Badge>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ formatBytes(pkg.size) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ formatNumber(pkg.download_count) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import axios from 'axios'
|
||||
import { usePackageStore } from '../stores/packages'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { getRegistryBadgeClass } from '@/composables/useBadgeStyles'
|
||||
|
||||
const store = usePackageStore()
|
||||
const { packages, stats, loading, error } = storeToRefs(store)
|
||||
|
||||
// Chart periods and data
|
||||
const selectedPeriod = ref<string>('1day')
|
||||
const chartPeriods = [
|
||||
{ value: '1h', label: '1 Hour' },
|
||||
{ value: '1day', label: '24 Hours' },
|
||||
{ value: '7day', label: '7 Days' },
|
||||
{ value: '30day', label: '30 Days' },
|
||||
]
|
||||
|
||||
// Time-series data from API
|
||||
interface TimeSeriesDataPoint {
|
||||
timestamp: string
|
||||
value: number
|
||||
}
|
||||
|
||||
interface TimeSeriesStats {
|
||||
period: string
|
||||
registry: string
|
||||
data_points: TimeSeriesDataPoint[]
|
||||
}
|
||||
|
||||
const timeSeriesData = ref<TimeSeriesStats | null>(null)
|
||||
const chartLoading = ref(false)
|
||||
|
||||
// Fetch time-series data from API
|
||||
async function fetchTimeSeriesData() {
|
||||
chartLoading.value = true
|
||||
try {
|
||||
const response = await axios.get(`/api/stats/timeseries?period=${selectedPeriod.value}`)
|
||||
timeSeriesData.value = response.data
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch time-series data:', err)
|
||||
timeSeriesData.value = null
|
||||
} finally {
|
||||
chartLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Extract chart values from time-series data
|
||||
const chartData = computed(() => {
|
||||
if (!timeSeriesData.value || !timeSeriesData.value.data_points) {
|
||||
return []
|
||||
}
|
||||
return timeSeriesData.value.data_points.map(point => point.value)
|
||||
})
|
||||
|
||||
const maxChartValue = computed(() => {
|
||||
if (chartData.value.length === 0) return 100
|
||||
const max = Math.max(...chartData.value)
|
||||
return max === 0 ? 100 : max
|
||||
})
|
||||
|
||||
function getChartLabel(index: number): string {
|
||||
// Use timestamp from data if available
|
||||
if (timeSeriesData.value && timeSeriesData.value.data_points[index]) {
|
||||
const date = new Date(timeSeriesData.value.data_points[index].timestamp)
|
||||
|
||||
switch (selectedPeriod.value) {
|
||||
case '1h':
|
||||
return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
|
||||
case '1day':
|
||||
return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
|
||||
case '7day':
|
||||
return date.toLocaleDateString('en-US', { weekday: 'short' })
|
||||
case '30day':
|
||||
return date.toLocaleDateString('en-US', { day: 'numeric' })
|
||||
default:
|
||||
return `${index}`
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to index-based labels
|
||||
const labels: Record<string, (i: number) => string> = {
|
||||
'1h': (i) => `${i * 5}m`,
|
||||
'1day': (i) => `${i}:00`,
|
||||
'7day': (i) => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][i] || `Day ${i + 1}`,
|
||||
'30day': (i) => `${i + 1}`,
|
||||
}
|
||||
return labels[selectedPeriod.value]?.(index) || `${index}`
|
||||
}
|
||||
|
||||
// API returns clean, deduplicated data - just sort and limit
|
||||
const recentPackages = computed(() => {
|
||||
return packages.value
|
||||
.slice()
|
||||
.sort((a, b) => new Date(b.cached_at).getTime() - new Date(a.cached_at).getTime())
|
||||
.slice(0, 10)
|
||||
})
|
||||
|
||||
// Watch for period changes and fetch new data
|
||||
watch(selectedPeriod, () => {
|
||||
fetchTimeSeriesData()
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await store.fetchStats()
|
||||
await store.fetchPackages()
|
||||
await fetchTimeSeriesData()
|
||||
})
|
||||
|
||||
function formatNumber(num: number): string {
|
||||
return new Intl.NumberFormat().format(num)
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-8">
|
||||
<!-- Header with Back Button -->
|
||||
<div class="mb-6">
|
||||
<Button @click="goBack" variant="ghost" class="mb-4">
|
||||
<i class="fas fa-arrow-left mr-2"></i>
|
||||
Back to Packages
|
||||
</Button>
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas fa-box text-3xl text-primary-600"></i>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">{{ packageName }}</h1>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<Badge :class="getRegistryBadgeClass(registry)">{{ registry }}</Badge>
|
||||
<Badge variant="outline" class="font-mono">v{{ version }}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin text-4xl text-primary-600"></i>
|
||||
<p class="mt-4 text-gray-600">Loading vulnerability details...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<Alert v-else-if="error" variant="destructive" class="mb-4">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<AlertDescription>{{ error }}</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Vulnerability Details -->
|
||||
<div v-else-if="vulnerabilities" class="space-y-6">
|
||||
<!-- Summary Card -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<i class="fas fa-shield-virus text-red-600"></i>
|
||||
Security Scan Summary
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||
<div class="text-center p-4 bg-red-50 rounded-lg border border-red-200">
|
||||
<p class="text-3xl font-bold text-red-600">{{ severityCounts.critical }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Critical</p>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-orange-50 rounded-lg border border-orange-200">
|
||||
<p class="text-3xl font-bold text-orange-600">{{ severityCounts.high }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">High</p>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-yellow-50 rounded-lg border border-yellow-200">
|
||||
<p class="text-3xl font-bold text-yellow-600">{{ severityCounts.moderate }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Moderate</p>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<p class="text-3xl font-bold text-blue-600">{{ severityCounts.low }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Low</p>
|
||||
</div>
|
||||
</div>
|
||||
<Separator class="my-4" />
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<div class="flex flex-col gap-3">
|
||||
<span class="text-gray-600">
|
||||
<i class="fas fa-search mr-1"></i>
|
||||
Scanned: {{ formatDate(vulnerabilities.scanned_at) }}
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-600">
|
||||
<i class="fas fa-cog mr-1"></i>
|
||||
Scanners:
|
||||
</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<Badge
|
||||
v-for="scanner in scannerList"
|
||||
:key="scanner"
|
||||
variant="secondary"
|
||||
class="text-xs"
|
||||
>
|
||||
{{ scanner }}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="bypassedCount > 0" class="flex items-center gap-2 text-green-600">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span>{{ bypassedCount }} bypassed</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- No Vulnerabilities -->
|
||||
<Card v-if="vulnerabilityList.length === 0">
|
||||
<CardContent class="text-center py-12">
|
||||
<i class="fas fa-check-circle text-6xl text-green-500 mb-4"></i>
|
||||
<p class="text-xl font-semibold text-gray-900">No Vulnerabilities Found</p>
|
||||
<p class="mt-2 text-gray-600">This package is clean and safe to use</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Vulnerability List -->
|
||||
<Card v-else>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<i class="fas fa-list text-gray-600"></i>
|
||||
Detected Vulnerabilities ({{ vulnerabilityList.length }})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="p-0">
|
||||
<div class="border-t overflow-x-auto">
|
||||
<Table class="min-w-[800px]">
|
||||
<TableHeader>
|
||||
<TableRow class="bg-gray-50 hover:bg-gray-50">
|
||||
<TableHead class="w-[100px]">Severity</TableHead>
|
||||
<TableHead class="w-[180px]">CVE ID</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead class="w-[120px]">Fix Version</TableHead>
|
||||
<TableHead class="w-[100px] text-center">Details</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<template v-for="(vuln, index) in vulnerabilityList" :key="vuln.id">
|
||||
<!-- Main Row -->
|
||||
<TableRow
|
||||
:class="getRowClass(index, vuln.severity)"
|
||||
@click="toggleRow(index)"
|
||||
>
|
||||
<TableCell>
|
||||
<Badge :class="getSeverityBadgeClass(vuln.severity)">
|
||||
{{ formatSeverityName(vuln.severity) }}
|
||||
</Badge>
|
||||
<span
|
||||
v-if="vuln.bypassed"
|
||||
class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800"
|
||||
title="Bypassed"
|
||||
>
|
||||
<i class="fas fa-unlock text-xs"></i>
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span class="font-mono text-sm font-medium">{{ vuln.id }}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<p class="text-sm text-gray-900 line-clamp-2 break-words">{{ vuln.title || vuln.description }}</p>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span v-if="vuln.fixed_in" class="inline-flex items-center text-sm text-green-700">
|
||||
<i class="fas fa-arrow-up text-xs mr-1"></i>
|
||||
v{{ vuln.fixed_in }}
|
||||
</span>
|
||||
<span v-else class="text-sm text-gray-400">-</span>
|
||||
</TableCell>
|
||||
<TableCell class="text-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-8 w-8 p-0"
|
||||
@click.stop="toggleRow(index)"
|
||||
>
|
||||
<i
|
||||
:class="[
|
||||
'fas transition-transform',
|
||||
expandedRows.has(index) ? 'fa-chevron-up' : 'fa-chevron-down'
|
||||
]"
|
||||
></i>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<!-- Expanded Details Row -->
|
||||
<TableRow v-if="expandedRows.has(index)" class="bg-gray-50 hover:bg-gray-50">
|
||||
<TableCell colspan="5" class="p-0">
|
||||
<div class="px-6 py-4 space-y-3">
|
||||
<!-- Full Description -->
|
||||
<div>
|
||||
<h5 class="font-semibold text-gray-900 mb-2">Description</h5>
|
||||
<div
|
||||
class="text-sm text-gray-700 leading-relaxed prose prose-sm max-w-none break-words overflow-hidden"
|
||||
v-html="renderMarkdown(vuln.description)"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Bypass Information -->
|
||||
<div v-if="vuln.bypassed && vuln.bypass" class="bg-green-50 border border-green-200 rounded-lg p-3">
|
||||
<h5 class="font-semibold text-green-900 mb-2 flex items-center gap-2">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Bypass Active
|
||||
</h5>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-green-800">
|
||||
<div class="break-words">
|
||||
<span class="font-medium">Reason:</span> {{ vuln.bypass.reason }}
|
||||
</div>
|
||||
<div class="break-words">
|
||||
<span class="font-medium">By:</span> {{ vuln.bypass.created_by }}
|
||||
</div>
|
||||
<div class="break-words">
|
||||
<span class="font-medium">Expires:</span> {{ formatDate(vuln.bypass.expires_at) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fix Information -->
|
||||
<div v-if="vuln.fixed_in" class="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fas fa-wrench text-blue-700"></i>
|
||||
<span class="text-sm text-blue-900">
|
||||
<span class="font-semibold">Fix Available:</span> Upgrade to version <strong>{{ vuln.fixed_in }}</strong> or later
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- References -->
|
||||
<div v-if="vuln.references && vuln.references.length > 0">
|
||||
<h5 class="font-semibold text-gray-900 mb-2 flex items-center gap-2">
|
||||
<i class="fas fa-link"></i>
|
||||
References ({{ vuln.references.length }})
|
||||
</h5>
|
||||
<div class="space-y-1.5">
|
||||
<div
|
||||
v-for="(ref, refIndex) in vuln.references"
|
||||
:key="refIndex"
|
||||
class="flex items-start gap-2 text-sm"
|
||||
>
|
||||
<i class="fas fa-external-link-alt text-gray-400 text-xs mt-0.5"></i>
|
||||
<a
|
||||
:href="ref"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-blue-600 hover:text-blue-800 hover:underline break-all"
|
||||
>
|
||||
{{ ref }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</template>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import axios from 'axios'
|
||||
import { marked } from 'marked'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
getSeverityBadgeClass,
|
||||
getRegistryBadgeClass,
|
||||
getVulnerabilityBorderClass,
|
||||
formatSeverityName,
|
||||
} from '@/composables/useBadgeStyles'
|
||||
|
||||
// Configure marked
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const registry = computed(() => route.params.registry as string)
|
||||
const packageName = computed(() => {
|
||||
// Handle package names with slashes (e.g., Go packages like github.com/user/repo)
|
||||
const nameParam = route.params.name
|
||||
if (Array.isArray(nameParam)) {
|
||||
return nameParam.join('/')
|
||||
}
|
||||
return nameParam as string
|
||||
})
|
||||
const version = computed(() => route.params.version as string)
|
||||
|
||||
interface BypassInfo {
|
||||
id: string
|
||||
reason: string
|
||||
created_by: string
|
||||
expires_at: string
|
||||
}
|
||||
|
||||
interface Vulnerability {
|
||||
id: string
|
||||
severity: string
|
||||
title: string
|
||||
description: string
|
||||
references: string[]
|
||||
fixed_in: string
|
||||
bypassed: boolean
|
||||
bypass?: BypassInfo
|
||||
}
|
||||
|
||||
interface VulnerabilityResponse {
|
||||
scanned: boolean
|
||||
scanner: string
|
||||
scanned_at: string
|
||||
status: string
|
||||
vulnerabilities: Vulnerability[]
|
||||
vulnerability_count: number
|
||||
severity_counts: {
|
||||
critical: number
|
||||
high: number
|
||||
moderate: number
|
||||
low: number
|
||||
}
|
||||
bypassed_count: number
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const vulnerabilities = ref<VulnerabilityResponse | null>(null)
|
||||
const expandedRows = ref<Set<number>>(new Set())
|
||||
|
||||
// Severity order for sorting (higher values = more severe)
|
||||
const severityOrder: Record<string, number> = {
|
||||
CRITICAL: 4,
|
||||
HIGH: 3,
|
||||
MEDIUM: 2,
|
||||
MODERATE: 2, // Treat MODERATE same as MEDIUM
|
||||
LOW: 1,
|
||||
UNKNOWN: 0,
|
||||
}
|
||||
|
||||
const vulnerabilityList = computed(() => {
|
||||
const vulns = vulnerabilities.value?.vulnerabilities || []
|
||||
// Sort by severity (most severe first)
|
||||
return [...vulns].sort((a, b) => {
|
||||
const severityA = severityOrder[a.severity.toUpperCase()] || 0
|
||||
const severityB = severityOrder[b.severity.toUpperCase()] || 0
|
||||
return severityB - severityA // Descending order
|
||||
})
|
||||
})
|
||||
|
||||
const severityCounts = computed(() => vulnerabilities.value?.severity_counts || { critical: 0, high: 0, moderate: 0, low: 0 })
|
||||
const bypassedCount = computed(() => vulnerabilities.value?.bypassed_count || 0)
|
||||
|
||||
// Parse scanner string into array of scanner names
|
||||
const scannerList = computed(() => {
|
||||
if (!vulnerabilities.value?.scanner) return []
|
||||
return vulnerabilities.value.scanner.split('+').map((s: string) => s.trim())
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchVulnerabilities()
|
||||
})
|
||||
|
||||
async function fetchVulnerabilities() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
vulnerabilities.value = null
|
||||
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`/api/packages/${registry.value}/${packageName.value}/${version.value}/vulnerabilities`
|
||||
)
|
||||
// Store the response data
|
||||
vulnerabilities.value = response.data
|
||||
} catch (err: any) {
|
||||
console.error('Failed to fetch vulnerabilities:', err)
|
||||
error.value = err.response?.data?.error || err.message || 'Failed to load vulnerability details'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push('/packages')
|
||||
}
|
||||
|
||||
function toggleRow(index: number) {
|
||||
if (expandedRows.value.has(index)) {
|
||||
expandedRows.value.delete(index)
|
||||
} else {
|
||||
expandedRows.value.add(index)
|
||||
}
|
||||
}
|
||||
|
||||
function getRowClass(index: number, severity: string): string {
|
||||
const classes = ['cursor-pointer']
|
||||
if (expandedRows.value.has(index)) {
|
||||
classes.push('bg-gray-50')
|
||||
}
|
||||
classes.push(getVulnerabilityBorderClass(severity))
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
function formatDate(date: string): string {
|
||||
return new Date(date).toLocaleString()
|
||||
}
|
||||
|
||||
function renderMarkdown(text: string): string {
|
||||
if (!text) return ''
|
||||
return marked.parse(text) as string
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,187 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import PackageList from './PackageList.vue'
|
||||
import { usePackageStore } from '../stores/packages'
|
||||
|
||||
describe('PackageList.vue', () => {
|
||||
beforeEach(() => {
|
||||
// Create a fresh pinia instance before each test
|
||||
setActivePinia(createPinia())
|
||||
})
|
||||
|
||||
it('renders package list component', () => {
|
||||
const wrapper = mount(PackageList)
|
||||
expect(wrapper.find('h2').text()).toBe('Packages')
|
||||
})
|
||||
|
||||
it('displays loading state when loading', async () => {
|
||||
const wrapper = mount(PackageList)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = true
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Loading packages...')
|
||||
})
|
||||
|
||||
it('displays error message when error occurs', async () => {
|
||||
const wrapper = mount(PackageList)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.error = 'Failed to fetch packages'
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Failed to fetch packages')
|
||||
})
|
||||
|
||||
it('displays empty state when no packages', async () => {
|
||||
const wrapper = mount(PackageList)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = []
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('No packages cached yet')
|
||||
})
|
||||
|
||||
it('displays package accordion when packages exist', async () => {
|
||||
const wrapper = mount(PackageList)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = [
|
||||
{
|
||||
id: '1',
|
||||
registry: 'npm',
|
||||
name: 'test-package',
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: '2025-01-01T00:00:00Z',
|
||||
last_accessed: '2025-01-01T00:00:00Z',
|
||||
download_count: 10,
|
||||
},
|
||||
]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('test-package')
|
||||
expect(wrapper.text()).toContain('1 version')
|
||||
})
|
||||
|
||||
it('calls fetchPackages on mount', () => {
|
||||
const store = usePackageStore()
|
||||
const fetchSpy = vi.spyOn(store, 'fetchPackages')
|
||||
|
||||
mount(PackageList)
|
||||
|
||||
expect(fetchSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('groups packages and displays version counts', async () => {
|
||||
const wrapper = mount(PackageList)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = [
|
||||
{
|
||||
id: '1',
|
||||
registry: 'npm',
|
||||
name: 'test-package',
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: '2025-01-01T00:00:00Z',
|
||||
last_accessed: '2025-01-01T00:00:00Z',
|
||||
download_count: 10,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
registry: 'npm',
|
||||
name: 'test-package',
|
||||
version: '2.0.0',
|
||||
size: 2048,
|
||||
cached_at: '2025-01-02T00:00:00Z',
|
||||
last_accessed: '2025-01-02T00:00:00Z',
|
||||
download_count: 20,
|
||||
},
|
||||
]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('test-package')
|
||||
expect(wrapper.text()).toContain('2 versions')
|
||||
})
|
||||
|
||||
it('formats bytes correctly', async () => {
|
||||
const wrapper = mount(PackageList)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = [
|
||||
{
|
||||
id: '1',
|
||||
registry: 'npm',
|
||||
name: 'test-package',
|
||||
version: '1.0.0',
|
||||
size: 1048576, // 1 MB
|
||||
cached_at: '2025-01-01T00:00:00Z',
|
||||
last_accessed: '2025-01-01T00:00:00Z',
|
||||
download_count: 10,
|
||||
},
|
||||
]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('1 MB')
|
||||
})
|
||||
|
||||
it('applies correct registry badge classes', async () => {
|
||||
const wrapper = mount(PackageList)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.packages = [
|
||||
{
|
||||
id: '1',
|
||||
registry: 'npm',
|
||||
name: 'npm-package',
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: '2025-01-01T00:00:00Z',
|
||||
last_accessed: '2025-01-01T00:00:00Z',
|
||||
download_count: 10,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
registry: 'pypi',
|
||||
name: 'python-package',
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: '2025-01-01T00:00:00Z',
|
||||
last_accessed: '2025-01-01T00:00:00Z',
|
||||
download_count: 5,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
registry: 'go',
|
||||
name: 'go-module',
|
||||
version: '1.0.0',
|
||||
size: 1024,
|
||||
cached_at: '2025-01-01T00:00:00Z',
|
||||
last_accessed: '2025-01-01T00:00:00Z',
|
||||
download_count: 3,
|
||||
},
|
||||
]
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
// Verify that all registry badges are displayed
|
||||
// Packages are grouped and sorted alphabetically, so order is: go-module, npm-package, python-package
|
||||
expect(wrapper.text()).toContain('npm')
|
||||
expect(wrapper.text()).toContain('pypi')
|
||||
expect(wrapper.text()).toContain('go')
|
||||
|
||||
// Verify badge component is used with correct classes
|
||||
const html = wrapper.html()
|
||||
expect(html).toContain('bg-blue-100') // npm badge
|
||||
expect(html).toContain('bg-green-100') // pypi badge
|
||||
expect(html).toContain('bg-yellow-100') // go badge
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900">Packages</h2>
|
||||
<Button @click="store.fetchPackages()">
|
||||
<i class="fas fa-sync-alt mr-2"></i>Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Filter and Search Section -->
|
||||
<div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium text-gray-700">Filter by registry:</span>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
@click="changeRegistryFilter('all')"
|
||||
:variant="selectedRegistry === 'all' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
@click="changeRegistryFilter('npm')"
|
||||
:variant="selectedRegistry === 'npm' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
<i class="fab fa-npm mr-2"></i>NPM
|
||||
</Button>
|
||||
<Button
|
||||
@click="changeRegistryFilter('pypi')"
|
||||
:variant="selectedRegistry === 'pypi' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
<i class="fab fa-python mr-2"></i>PyPI
|
||||
</Button>
|
||||
<Button
|
||||
@click="changeRegistryFilter('go')"
|
||||
:variant="selectedRegistry === 'go' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
<i class="fas fa-code mr-2"></i>Go
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto sm:ml-auto">
|
||||
<i class="fas fa-search text-gray-500"></i>
|
||||
<Input
|
||||
v-model="searchTerm"
|
||||
type="text"
|
||||
placeholder="Search packages..."
|
||||
class="w-full sm:w-64"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<Alert v-if="error" variant="destructive" class="mb-4">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<AlertDescription>{{ error }}</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin text-4xl text-primary-600"></i>
|
||||
<p class="mt-4 text-gray-600">Loading packages...</p>
|
||||
</div>
|
||||
|
||||
<!-- Package List -->
|
||||
<Card v-else>
|
||||
<CardContent class="p-6">
|
||||
<div v-if="packages.length === 0" class="text-center py-12 text-gray-500">
|
||||
<i class="fas fa-inbox text-6xl mb-4"></i>
|
||||
<p class="text-xl">No packages cached yet</p>
|
||||
<p class="mt-2">Packages will appear here once they are downloaded through the proxy</p>
|
||||
</div>
|
||||
<Accordion v-else type="multiple" class="w-full">
|
||||
<AccordionItem
|
||||
v-for="group in groupedPackages"
|
||||
:key="`${group.registry}:${group.name}`"
|
||||
:value="`${group.registry}:${group.name}`"
|
||||
class="border-b border-gray-200"
|
||||
>
|
||||
<AccordionTrigger class="px-4 py-4 hover:bg-gray-50">
|
||||
<div class="flex items-center justify-between w-full pr-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-left">
|
||||
<h4 class="font-semibold text-gray-900">{{ group.name }}</h4>
|
||||
<p class="text-sm text-gray-500">{{ group.versions.length }} version{{ group.versions.length > 1 ? 's' : '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<Badge variant="outline" :class="getRegistryBadgeClass(group.registry)">
|
||||
{{ group.registry }}
|
||||
</Badge>
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-medium text-gray-900">{{ formatBytes(group.totalSize) }}</p>
|
||||
<p class="text-xs text-gray-500">{{ formatNumber(group.totalDownloads) }} downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="px-4 pb-4">
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="version in group.versions"
|
||||
:key="version.id"
|
||||
class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100"
|
||||
>
|
||||
<div class="flex items-center space-x-4 flex-1">
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-900">{{ version.version.startsWith('v') ? version.version : 'v' + version.version }}</p>
|
||||
<div class="flex items-center space-x-4 mt-1 text-sm text-gray-500">
|
||||
<span>
|
||||
<i class="fas fa-download mr-1"></i>{{ formatNumber(version.download_count) }}
|
||||
</span>
|
||||
<span>
|
||||
<i class="fas fa-hard-drive mr-1"></i>{{ formatBytes(version.size) }}
|
||||
</span>
|
||||
<span>
|
||||
<i class="fas fa-clock mr-1"></i>{{ formatDate(version.cached_at) }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Vulnerability Badge -->
|
||||
<div v-if="version.vulnerabilities" class="mt-2">
|
||||
<VulnerabilityBadge
|
||||
:scanned="version.vulnerabilities.scanned"
|
||||
:status="version.vulnerabilities.status"
|
||||
:counts="version.vulnerabilities.counts"
|
||||
:total="version.vulnerabilities.total"
|
||||
:scannedAt="version.vulnerabilities.scannedAt"
|
||||
@click="showVulnerabilityDetails(group.registry, group.name, version.version)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="confirmDelete(version)"
|
||||
class="text-red-600 hover:text-red-900 p-2"
|
||||
title="Delete this version"
|
||||
>
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="totalPages > 1" class="mt-6 flex items-center justify-between border-t pt-4">
|
||||
<div class="text-sm text-gray-700">
|
||||
Page {{ currentPage }} of {{ totalPages }} ({{ allGroupedPackages.length }} total packages)
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
@click="changePage(currentPage - 1)"
|
||||
:disabled="currentPage === 1"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<i class="fas fa-chevron-left mr-2"></i>Previous
|
||||
</Button>
|
||||
|
||||
<div class="flex gap-1">
|
||||
<!-- First page -->
|
||||
<Button
|
||||
v-if="currentPage > 3"
|
||||
@click="changePage(1)"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
1
|
||||
</Button>
|
||||
<span v-if="currentPage > 4" class="px-2">...</span>
|
||||
|
||||
<!-- Page numbers around current page -->
|
||||
<Button
|
||||
v-for="page in getPageNumbers()"
|
||||
:key="page"
|
||||
@click="changePage(page)"
|
||||
:variant="page === currentPage ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
>
|
||||
{{ page }}
|
||||
</Button>
|
||||
|
||||
<span v-if="currentPage < totalPages - 3" class="px-2">...</span>
|
||||
<!-- Last page -->
|
||||
<Button
|
||||
v-if="currentPage < totalPages - 2"
|
||||
@click="changePage(totalPages)"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{{ totalPages }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
@click="changePage(currentPage + 1)"
|
||||
:disabled="currentPage === totalPages"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Next<i class="fas fa-chevron-right ml-2"></i>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Delete Confirmation Dialog -->
|
||||
<Dialog v-model:open="showDeleteModal">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirm Deletion</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete <strong>{{ packageToDelete?.name }}@{{ packageToDelete?.version }}</strong>?
|
||||
This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button @click="showDeleteModal = false" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button @click="deletePackage" variant="destructive">
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed, watch } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { usePackageStore, type Package } from '../stores/packages'
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@/components/ui/accordion'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import VulnerabilityBadge from './VulnerabilityBadge.vue'
|
||||
import { getRegistryBadgeClass } from '@/composables/useBadgeStyles'
|
||||
|
||||
// Props from router
|
||||
const props = defineProps<{
|
||||
registry?: string
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = usePackageStore()
|
||||
const { packages, loading, error } = storeToRefs(store)
|
||||
|
||||
const showDeleteModal = ref(false)
|
||||
const packageToDelete = ref<Package | null>(null)
|
||||
const selectedRegistry = ref<string>(props.registry || 'all')
|
||||
const searchTerm = ref<string>('')
|
||||
const currentPage = ref<number>(1)
|
||||
const itemsPerPage = ref<number>(10)
|
||||
|
||||
// Group packages by name
|
||||
const allGroupedPackages = computed(() => {
|
||||
const groups = new Map<string, Package[]>()
|
||||
|
||||
// Filter packages by selected registry and search term
|
||||
let filteredPackages = selectedRegistry.value === 'all'
|
||||
? packages.value
|
||||
: packages.value.filter(pkg => pkg.registry === selectedRegistry.value)
|
||||
|
||||
// Apply search filter if search term exists
|
||||
if (searchTerm.value.trim()) {
|
||||
const searchLower = searchTerm.value.toLowerCase()
|
||||
filteredPackages = filteredPackages.filter(pkg =>
|
||||
pkg.name.toLowerCase().includes(searchLower) ||
|
||||
pkg.version.toLowerCase().includes(searchLower)
|
||||
)
|
||||
}
|
||||
|
||||
filteredPackages.forEach(pkg => {
|
||||
const key = `${pkg.registry}:${pkg.name}`
|
||||
if (!groups.has(key)) {
|
||||
groups.set(key, [])
|
||||
}
|
||||
groups.get(key)!.push(pkg)
|
||||
})
|
||||
|
||||
// Convert to array and sort versions within each group
|
||||
return Array.from(groups.entries()).map(([key, versions]) => {
|
||||
const [registry, name] = key.split(':')
|
||||
return {
|
||||
registry,
|
||||
name,
|
||||
versions: versions.sort((a, b) =>
|
||||
new Date(b.cached_at).getTime() - new Date(a.cached_at).getTime()
|
||||
),
|
||||
totalSize: versions.reduce((sum, v) => sum + v.size, 0),
|
||||
totalDownloads: versions.reduce((sum, v) => sum + v.download_count, 0),
|
||||
}
|
||||
}).sort((a, b) => a.name.localeCompare(b.name))
|
||||
})
|
||||
|
||||
// Pagination
|
||||
const totalPages = computed(() => Math.ceil(allGroupedPackages.value.length / itemsPerPage.value))
|
||||
|
||||
const groupedPackages = computed(() => {
|
||||
const start = (currentPage.value - 1) * itemsPerPage.value
|
||||
const end = start + itemsPerPage.value
|
||||
return allGroupedPackages.value.slice(start, end)
|
||||
})
|
||||
|
||||
function changePage(page: number) {
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
currentPage.value = page
|
||||
// Scroll to top of packages list
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
}
|
||||
|
||||
// Get page numbers to display around current page
|
||||
function getPageNumbers(): number[] {
|
||||
const pages: number[] = []
|
||||
const start = Math.max(1, currentPage.value - 2)
|
||||
const end = Math.min(totalPages.value, currentPage.value + 2)
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
return pages
|
||||
}
|
||||
|
||||
// Reset to page 1 when filters change
|
||||
function resetPagination() {
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
// Watch for filter/search changes and reset pagination
|
||||
watch([selectedRegistry, searchTerm], () => {
|
||||
resetPagination()
|
||||
})
|
||||
|
||||
// Watch for route parameter changes to update filter
|
||||
watch(() => route.params.registry, (newRegistry) => {
|
||||
selectedRegistry.value = (newRegistry as string) || 'all'
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await store.fetchPackages()
|
||||
})
|
||||
|
||||
function confirmDelete(pkg: Package) {
|
||||
packageToDelete.value = pkg
|
||||
showDeleteModal.value = true
|
||||
}
|
||||
|
||||
async function deletePackage() {
|
||||
if (packageToDelete.value) {
|
||||
await store.deletePackage(
|
||||
packageToDelete.value.registry,
|
||||
packageToDelete.value.name,
|
||||
packageToDelete.value.version
|
||||
)
|
||||
showDeleteModal.value = false
|
||||
packageToDelete.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function formatNumber(num: number): string {
|
||||
return new Intl.NumberFormat().format(num)
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
function formatDate(date: string): string {
|
||||
return new Date(date).toLocaleString()
|
||||
}
|
||||
|
||||
function showVulnerabilityDetails(registry: string, name: string, version: string) {
|
||||
// Navigate to the package details page
|
||||
router.push({
|
||||
name: 'package-details',
|
||||
params: {
|
||||
registry,
|
||||
name,
|
||||
version,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function changeRegistryFilter(registry: string) {
|
||||
const path = registry === 'all' ? '/packages' : `/packages/${registry}`
|
||||
router.push(path)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,192 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import Stats from './Stats.vue'
|
||||
import { usePackageStore } from '../stores/packages'
|
||||
|
||||
describe('Stats.vue', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
})
|
||||
|
||||
it('renders stats component', () => {
|
||||
const wrapper = mount(Stats)
|
||||
expect(wrapper.find('h2').text()).toBe('Statistics')
|
||||
})
|
||||
|
||||
it('displays loading state when loading', async () => {
|
||||
const wrapper = mount(Stats)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = true
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Loading statistics...')
|
||||
})
|
||||
|
||||
it('displays error message when error occurs', async () => {
|
||||
const wrapper = mount(Stats)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.error = 'Failed to fetch statistics'
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Failed to fetch statistics')
|
||||
})
|
||||
|
||||
it('displays overall statistics', async () => {
|
||||
const wrapper = mount(Stats)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 100,
|
||||
total_size: 1073741824, // 1 GB
|
||||
total_downloads: 500,
|
||||
scanned_packages: 90,
|
||||
vulnerable_packages: 5,
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Overall Statistics')
|
||||
expect(wrapper.text()).toContain('100')
|
||||
expect(wrapper.text()).toContain('500')
|
||||
})
|
||||
|
||||
it('displays security scanning statistics', async () => {
|
||||
const wrapper = mount(Stats)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 100,
|
||||
total_size: 1073741824,
|
||||
total_downloads: 500,
|
||||
scanned_packages: 90,
|
||||
vulnerable_packages: 5,
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Security Scanning')
|
||||
expect(wrapper.text()).toContain('Scanned Packages')
|
||||
expect(wrapper.text()).toContain('Vulnerable Packages')
|
||||
})
|
||||
|
||||
it('displays registry breakdown', async () => {
|
||||
const wrapper = mount(Stats)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 100,
|
||||
total_size: 1073741824,
|
||||
total_downloads: 500,
|
||||
scanned_packages: 90,
|
||||
vulnerable_packages: 5,
|
||||
}
|
||||
store.registries = {
|
||||
npm: {
|
||||
count: 50,
|
||||
size: 536870912, // 512 MB
|
||||
downloads: 300,
|
||||
},
|
||||
pypi: {
|
||||
count: 30,
|
||||
size: 322122547, // ~307 MB
|
||||
downloads: 150,
|
||||
},
|
||||
go: {
|
||||
count: 20,
|
||||
size: 214748365, // ~205 MB
|
||||
downloads: 50,
|
||||
},
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Registry Breakdown')
|
||||
expect(wrapper.text()).toContain('NPM Registry')
|
||||
expect(wrapper.text()).toContain('PyPI Registry')
|
||||
expect(wrapper.text()).toContain('Go Modules')
|
||||
expect(wrapper.text()).toContain('50 packages')
|
||||
expect(wrapper.text()).toContain('30 packages')
|
||||
expect(wrapper.text()).toContain('20 packages')
|
||||
})
|
||||
|
||||
it('formats bytes correctly in overall stats', async () => {
|
||||
const wrapper = mount(Stats)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 100,
|
||||
total_size: 1073741824, // 1 GB
|
||||
total_downloads: 500,
|
||||
scanned_packages: 90,
|
||||
vulnerable_packages: 5,
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('1 GB')
|
||||
})
|
||||
|
||||
it('calls fetchStats on mount', () => {
|
||||
const store = usePackageStore()
|
||||
const fetchSpy = vi.spyOn(store, 'fetchStats')
|
||||
|
||||
mount(Stats)
|
||||
|
||||
expect(fetchSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('displays correct icon colors for different registries', async () => {
|
||||
const wrapper = mount(Stats)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 3,
|
||||
total_size: 0,
|
||||
total_downloads: 0,
|
||||
scanned_packages: 0,
|
||||
vulnerable_packages: 0,
|
||||
}
|
||||
store.registries = {
|
||||
npm: { count: 1, size: 0, downloads: 0 },
|
||||
pypi: { count: 1, size: 0, downloads: 0 },
|
||||
go: { count: 1, size: 0, downloads: 0 },
|
||||
}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const containers = wrapper.findAll('.rounded-full')
|
||||
expect(containers[0].classes()).toContain('bg-red-100') // npm
|
||||
expect(containers[1].classes()).toContain('bg-blue-100') // pypi
|
||||
expect(containers[2].classes()).toContain('bg-cyan-100') // go
|
||||
})
|
||||
|
||||
it('handles empty registries data', async () => {
|
||||
const wrapper = mount(Stats)
|
||||
const store = usePackageStore()
|
||||
|
||||
store.loading = false
|
||||
store.stats = {
|
||||
registry: '',
|
||||
total_packages: 0,
|
||||
total_size: 0,
|
||||
total_downloads: 0,
|
||||
scanned_packages: 0,
|
||||
vulnerable_packages: 0,
|
||||
}
|
||||
store.registries = {}
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.text()).toContain('Registry Breakdown')
|
||||
// Should have no registry items
|
||||
const registryItems = wrapper.findAll('.bg-gray-50')
|
||||
expect(registryItems.length).toBe(3) // Only the overall stats cards
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8">Statistics</h2>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<Alert v-if="error" variant="destructive" class="mb-4">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<AlertDescription>{{ error }}</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin text-4xl text-primary-600"></i>
|
||||
<p class="mt-4 text-gray-600">Loading statistics...</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div v-else>
|
||||
<!-- Overall Stats -->
|
||||
<Card class="mb-8">
|
||||
<CardContent class="p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-6">
|
||||
<i class="fas fa-chart-bar mr-2"></i>Overall Statistics
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="text-center p-6 bg-gray-50 rounded-lg">
|
||||
<p class="text-4xl font-bold text-primary-600 mb-2">
|
||||
{{ formatNumber(stats?.total_packages || 0) }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-600">Total Packages</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-50 rounded-lg">
|
||||
<p class="text-4xl font-bold text-blue-600 mb-2">
|
||||
{{ formatBytes(stats?.total_size || 0) }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-600">Total Storage Used</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-50 rounded-lg">
|
||||
<p class="text-4xl font-bold text-green-600 mb-2">
|
||||
{{ formatNumber(stats?.total_downloads || 0) }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-600">Total Downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Security Stats -->
|
||||
<Card class="mb-8">
|
||||
<CardContent class="p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-6">
|
||||
<i class="fas fa-shield-alt mr-2"></i>Security Scanning
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="flex items-center justify-between p-6 bg-green-50 rounded-lg border border-green-200">
|
||||
<div>
|
||||
<p class="text-3xl font-bold text-green-600">
|
||||
{{ formatNumber(stats?.scanned_packages || 0) }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Scanned Packages</p>
|
||||
</div>
|
||||
<i class="fas fa-check-circle text-5xl text-green-400"></i>
|
||||
</div>
|
||||
<div
|
||||
@click="showVulnerablePackages"
|
||||
class="flex items-center justify-between p-6 bg-red-50 rounded-lg border border-red-200 cursor-pointer hover:bg-red-100 transition-colors"
|
||||
:class="{ 'opacity-50': (stats?.vulnerable_packages || 0) === 0 }"
|
||||
>
|
||||
<div>
|
||||
<p class="text-3xl font-bold text-red-600">
|
||||
{{ formatNumber(stats?.vulnerable_packages || 0) }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 mt-1">
|
||||
Vulnerable Packages
|
||||
<span v-if="(stats?.vulnerable_packages || 0) > 0" class="text-xs ml-1">(click to view)</span>
|
||||
</p>
|
||||
</div>
|
||||
<i class="fas fa-exclamation-triangle text-5xl text-red-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Registry Breakdown -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-6">
|
||||
<i class="fas fa-server mr-2"></i>Registry Breakdown
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="registry in registries"
|
||||
:key="registry.name"
|
||||
class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div
|
||||
class="w-12 h-12 rounded-full flex items-center justify-center"
|
||||
:class="registry.color"
|
||||
>
|
||||
<i :class="registry.icon + ' text-2xl'"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-gray-900">{{ registry.label }}</p>
|
||||
<p class="text-sm text-gray-600">{{ registry.packages }} packages</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-lg font-bold text-gray-900">{{ registry.size }}</p>
|
||||
<p class="text-sm text-gray-600">{{ registry.downloads }} downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { usePackageStore } from '../stores/packages'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
const store = usePackageStore()
|
||||
const { stats, loading, error } = storeToRefs(store)
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(async () => {
|
||||
await store.fetchStats()
|
||||
})
|
||||
|
||||
function showVulnerablePackages() {
|
||||
if ((stats.value?.vulnerable_packages || 0) === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
router.push('/vulnerable-packages')
|
||||
}
|
||||
|
||||
// Registry configuration for icons and colors
|
||||
const registryConfig: Record<string, {label: string, icon: string, color: string}> = {
|
||||
npm: {
|
||||
label: 'NPM Registry',
|
||||
icon: 'fab fa-npm text-red-500',
|
||||
color: 'bg-red-100'
|
||||
},
|
||||
pypi: {
|
||||
label: 'PyPI Registry',
|
||||
icon: 'fab fa-python text-blue-500',
|
||||
color: 'bg-blue-100'
|
||||
},
|
||||
go: {
|
||||
label: 'Go Modules',
|
||||
icon: 'fas fa-code text-cyan-500',
|
||||
color: 'bg-cyan-100'
|
||||
}
|
||||
}
|
||||
|
||||
const registries = computed(() => {
|
||||
const apiRegistries = store.registries || {}
|
||||
return Object.entries(apiRegistries).map(([name, data]: [string, any]) => {
|
||||
const config = registryConfig[name] || {
|
||||
label: name.toUpperCase(),
|
||||
icon: 'fas fa-box',
|
||||
color: 'bg-gray-100'
|
||||
}
|
||||
return {
|
||||
name,
|
||||
label: config.label,
|
||||
icon: config.icon,
|
||||
color: config.color,
|
||||
packages: data.count || 0,
|
||||
size: formatBytes(data.size || 0),
|
||||
downloads: data.downloads || 0
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function formatNumber(num: number): string {
|
||||
return new Intl.NumberFormat().format(num)
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Critical Vulnerabilities -->
|
||||
<button
|
||||
v-if="counts.critical > 0"
|
||||
@click="handleClick('critical')"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-red-100 text-red-800 hover:bg-red-200 border border-red-300 transition-colors cursor-pointer"
|
||||
:title="`${counts.critical} critical vulnerabilities - click for details`"
|
||||
>
|
||||
<i class="fas fa-shield-virus mr-1"></i>
|
||||
CRITICAL: {{ counts.critical }}
|
||||
</button>
|
||||
|
||||
<!-- High Vulnerabilities -->
|
||||
<button
|
||||
v-if="counts.high > 0"
|
||||
@click="handleClick('high')"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-orange-100 text-orange-800 hover:bg-orange-200 border border-orange-300 transition-colors cursor-pointer"
|
||||
:title="`${counts.high} high severity vulnerabilities - click for details`"
|
||||
>
|
||||
<i class="fas fa-exclamation-triangle mr-1"></i>
|
||||
HIGH: {{ counts.high }}
|
||||
</button>
|
||||
|
||||
<!-- Moderate Vulnerabilities -->
|
||||
<button
|
||||
v-if="counts.moderate > 0"
|
||||
@click="handleClick('moderate')"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-yellow-100 text-yellow-800 hover:bg-yellow-200 border border-yellow-300 transition-colors cursor-pointer"
|
||||
:title="`${counts.moderate} moderate severity vulnerabilities - click for details`"
|
||||
>
|
||||
<i class="fas fa-exclamation-circle mr-1"></i>
|
||||
MODERATE: {{ counts.moderate }}
|
||||
</button>
|
||||
|
||||
<!-- Low Vulnerabilities -->
|
||||
<button
|
||||
v-if="counts.low > 0"
|
||||
@click="handleClick('low')"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 border border-blue-300 transition-colors cursor-pointer"
|
||||
:title="`${counts.low} low severity vulnerabilities - click for details`"
|
||||
>
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
LOW: {{ counts.low }}
|
||||
</button>
|
||||
|
||||
<!-- Clean Badge (no vulnerabilities) -->
|
||||
<span
|
||||
v-if="status === 'clean' && total === 0"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-green-100 text-green-800 border border-green-300"
|
||||
:title="scannedAt ? `No vulnerabilities found - Scanned ${formatTimestamp(scannedAt)}` : 'No vulnerabilities found'"
|
||||
>
|
||||
<i class="fas fa-check-circle mr-1"></i>
|
||||
CLEAN
|
||||
<span v-if="scannedAt" class="ml-1 text-[10px] opacity-70">
|
||||
({{ formatRelativeTime(scannedAt) }})
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- Pending Badge -->
|
||||
<span
|
||||
v-if="status === 'pending'"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-700 border border-gray-300"
|
||||
title="Security scan in progress"
|
||||
>
|
||||
<i class="fas fa-spinner fa-spin mr-1"></i>
|
||||
SCANNING...
|
||||
</span>
|
||||
|
||||
<!-- Not Scanned Badge -->
|
||||
<span
|
||||
v-if="status === 'not_scanned' || !scanned"
|
||||
class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-600 border border-gray-300"
|
||||
title="Not yet scanned for vulnerabilities"
|
||||
>
|
||||
<i class="fas fa-question-circle mr-1"></i>
|
||||
NOT SCANNED
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { VulnerabilityCounts } from '../stores/packages'
|
||||
|
||||
interface Props {
|
||||
scanned?: boolean
|
||||
status?: 'clean' | 'vulnerable' | 'pending' | 'not_scanned'
|
||||
counts?: VulnerabilityCounts
|
||||
total?: number
|
||||
scannedAt?: string // ISO 8601 timestamp
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
scanned: false,
|
||||
status: 'not_scanned',
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [severity: string]
|
||||
}>()
|
||||
|
||||
const counts = computed(() => props.counts || { critical: 0, high: 0, moderate: 0, low: 0 })
|
||||
|
||||
function handleClick(severity: string) {
|
||||
emit('click', severity)
|
||||
}
|
||||
|
||||
function formatTimestamp(timestamp: string): string {
|
||||
const date = new Date(timestamp)
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
function formatRelativeTime(timestamp: string): string {
|
||||
const date = new Date(timestamp)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffMins = Math.floor(diffMs / 60000)
|
||||
const diffHours = Math.floor(diffMs / 3600000)
|
||||
const diffDays = Math.floor(diffMs / 86400000)
|
||||
|
||||
if (diffMins < 1) return 'just now'
|
||||
if (diffMins < 60) return `${diffMins}m ago`
|
||||
if (diffHours < 24) return `${diffHours}h ago`
|
||||
if (diffDays < 7) return `${diffDays}d ago`
|
||||
return formatTimestamp(timestamp).split(',')[0] // Just the date part
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 py-8">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<Button @click="goBack" variant="ghost" class="mb-4">
|
||||
<i class="fas fa-arrow-left mr-2"></i>
|
||||
Back to Stats
|
||||
</Button>
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas fa-exclamation-triangle text-3xl text-red-600"></i>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">Vulnerable Packages</h1>
|
||||
<p class="text-gray-600 mt-1">
|
||||
Packages with known security vulnerabilities, sorted by risk
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin text-4xl text-primary-600"></i>
|
||||
<p class="mt-4 text-gray-600">Loading vulnerable packages...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<Alert v-else-if="error" variant="destructive" class="mb-4">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<AlertDescription>{{ error }}</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Empty State -->
|
||||
<Card v-else-if="sortedVulnerablePackages.length === 0">
|
||||
<CardContent class="text-center py-12">
|
||||
<i class="fas fa-check-circle text-6xl text-green-500 mb-4"></i>
|
||||
<p class="text-xl font-semibold text-gray-900">No Vulnerable Packages</p>
|
||||
<p class="mt-2 text-gray-600">All your packages are clean and safe to use!</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Vulnerable Packages List -->
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Summary Card -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div class="text-center p-4 bg-red-50 rounded-lg border border-red-200">
|
||||
<p class="text-3xl font-bold text-red-600">{{ criticalCount }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Critical</p>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-orange-50 rounded-lg border border-orange-200">
|
||||
<p class="text-3xl font-bold text-orange-600">{{ highCount }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">High</p>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-yellow-50 rounded-lg border border-yellow-200">
|
||||
<p class="text-3xl font-bold text-yellow-600">{{ moderateCount }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Moderate</p>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<p class="text-3xl font-bold text-blue-600">{{ lowCount }}</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Low</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Packages List -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<div class="mb-4">
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
<i class="fas fa-list mr-2"></i>
|
||||
Vulnerable Packages ({{ sortedVulnerablePackages.length }})
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">
|
||||
{{ groupedPackages.length }} unique package{{ groupedPackages.length !== 1 ? 's' : '' }} • Sorted by risk: Critical → High → Moderate → Low
|
||||
</p>
|
||||
</div>
|
||||
<Accordion type="multiple" class="w-full">
|
||||
<AccordionItem
|
||||
v-for="group in groupedPackages"
|
||||
:key="`${group.registry}:${group.name}`"
|
||||
:value="`${group.registry}:${group.name}`"
|
||||
class="border-b border-gray-200"
|
||||
>
|
||||
<AccordionTrigger class="px-4 py-4 hover:bg-gray-50">
|
||||
<div class="flex items-center justify-between w-full pr-4">
|
||||
<div class="flex items-center space-x-4 flex-1 min-w-0">
|
||||
<div class="text-left flex-1 min-w-0">
|
||||
<h4 class="font-semibold text-gray-900 break-words">{{ group.name }}</h4>
|
||||
<p class="text-sm text-gray-500">{{ group.versions.length }} vulnerable version{{ group.versions.length > 1 ? 's' : '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6 flex-shrink-0">
|
||||
<Badge variant="outline" :class="getRegistryBadgeClass(group.registry)">
|
||||
{{ group.registry }}
|
||||
</Badge>
|
||||
<div class="text-right whitespace-nowrap">
|
||||
<p class="text-sm font-medium text-gray-900">{{ formatBytes(group.totalSize) }}</p>
|
||||
<p class="text-xs text-gray-500">{{ formatNumber(group.totalDownloads) }} downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="px-4 pb-4">
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="version in group.versions"
|
||||
:key="version.id"
|
||||
class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer"
|
||||
@click="navigateToPackage(version)"
|
||||
>
|
||||
<div class="flex items-center space-x-4 flex-1">
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-900">{{ version.version.startsWith('v') ? version.version : 'v' + version.version }}</p>
|
||||
<div class="flex items-center space-x-4 mt-1 text-sm text-gray-500">
|
||||
<span>
|
||||
<i class="fas fa-download mr-1"></i>{{ formatNumber(version.download_count) }}
|
||||
</span>
|
||||
<span>
|
||||
<i class="fas fa-hard-drive mr-1"></i>{{ formatBytes(version.size) }}
|
||||
</span>
|
||||
<span>
|
||||
<i class="fas fa-clock mr-1"></i>{{ formatDate(version.cached_at) }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Vulnerability Badge -->
|
||||
<div v-if="version.vulnerabilities" class="mt-2">
|
||||
<VulnerabilityBadge
|
||||
:scanned="version.vulnerabilities.scanned"
|
||||
:status="version.vulnerabilities.status"
|
||||
:counts="version.vulnerabilities.counts"
|
||||
:total="version.vulnerabilities.total"
|
||||
:scannedAt="version.vulnerabilities.scannedAt"
|
||||
@click.stop="navigateToPackage(version)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0">
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { usePackageStore, type Package } from '../stores/packages'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@/components/ui/accordion'
|
||||
import VulnerabilityBadge from './VulnerabilityBadge.vue'
|
||||
import { getRegistryBadgeClass } from '@/composables/useBadgeStyles'
|
||||
|
||||
const store = usePackageStore()
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const vulnerablePackages = ref<Package[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchVulnerablePackages()
|
||||
})
|
||||
|
||||
async function fetchVulnerablePackages() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
await store.fetchPackages()
|
||||
vulnerablePackages.value = store.packages.filter(
|
||||
pkg => pkg.vulnerabilities?.status === 'vulnerable'
|
||||
)
|
||||
} catch (err: any) {
|
||||
console.error('Failed to load vulnerable packages:', err)
|
||||
error.value = err.message || 'Failed to load vulnerable packages'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Sort packages by risk: Critical count DESC, High count DESC, Moderate count DESC, Low count DESC
|
||||
const sortedVulnerablePackages = computed(() => {
|
||||
return [...vulnerablePackages.value].sort((a, b) => {
|
||||
const aVulns = a.vulnerabilities?.counts || { critical: 0, high: 0, moderate: 0, low: 0 }
|
||||
const bVulns = b.vulnerabilities?.counts || { critical: 0, high: 0, moderate: 0, low: 0 }
|
||||
|
||||
// Compare critical count (descending)
|
||||
if (aVulns.critical !== bVulns.critical) {
|
||||
return bVulns.critical - aVulns.critical
|
||||
}
|
||||
|
||||
// Compare high count (descending)
|
||||
if (aVulns.high !== bVulns.high) {
|
||||
return bVulns.high - aVulns.high
|
||||
}
|
||||
|
||||
// Compare moderate count (descending)
|
||||
if (aVulns.moderate !== bVulns.moderate) {
|
||||
return bVulns.moderate - aVulns.moderate
|
||||
}
|
||||
|
||||
// Compare low count (descending)
|
||||
return bVulns.low - aVulns.low
|
||||
})
|
||||
})
|
||||
|
||||
// Group packages by name and registry, with versions sorted by risk
|
||||
const groupedPackages = computed(() => {
|
||||
const groups = new Map<string, {
|
||||
registry: string
|
||||
name: string
|
||||
versions: Package[]
|
||||
totalSize: number
|
||||
totalDownloads: number
|
||||
}>()
|
||||
|
||||
sortedVulnerablePackages.value.forEach((pkg) => {
|
||||
const key = `${pkg.registry}:${pkg.name}`
|
||||
if (!groups.has(key)) {
|
||||
groups.set(key, {
|
||||
registry: pkg.registry,
|
||||
name: pkg.name,
|
||||
versions: [],
|
||||
totalSize: 0,
|
||||
totalDownloads: 0,
|
||||
})
|
||||
}
|
||||
const group = groups.get(key)!
|
||||
group.versions.push(pkg)
|
||||
group.totalSize += pkg.size || 0
|
||||
group.totalDownloads += pkg.download_count || 0
|
||||
})
|
||||
|
||||
return Array.from(groups.values())
|
||||
})
|
||||
|
||||
// Calculate total counts across all packages
|
||||
const criticalCount = computed(() =>
|
||||
vulnerablePackages.value.reduce((sum, pkg) => sum + (pkg.vulnerabilities?.counts?.critical || 0), 0)
|
||||
)
|
||||
|
||||
const highCount = computed(() =>
|
||||
vulnerablePackages.value.reduce((sum, pkg) => sum + (pkg.vulnerabilities?.counts?.high || 0), 0)
|
||||
)
|
||||
|
||||
const moderateCount = computed(() =>
|
||||
vulnerablePackages.value.reduce((sum, pkg) => sum + (pkg.vulnerabilities?.counts?.moderate || 0), 0)
|
||||
)
|
||||
|
||||
const lowCount = computed(() =>
|
||||
vulnerablePackages.value.reduce((sum, pkg) => sum + (pkg.vulnerabilities?.counts?.low || 0), 0)
|
||||
)
|
||||
|
||||
function navigateToPackage(pkg: Package) {
|
||||
router.push(`/package/${pkg.registry}/${pkg.name}/${pkg.version}`)
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push('/stats')
|
||||
}
|
||||
|
||||
function formatNumber(num: number): string {
|
||||
return new Intl.NumberFormat().format(num)
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
function formatDate(dateString: string): string {
|
||||
if (!dateString) return 'N/A'
|
||||
try {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
} catch {
|
||||
return dateString
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
|
||||
import {
|
||||
AccordionRoot,
|
||||
useForwardPropsEmits,
|
||||
} from "reka-ui"
|
||||
|
||||
const props = defineProps<AccordionRootProps>()
|
||||
const emits = defineEmits<AccordionRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</AccordionRoot>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import type { AccordionContentProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { AccordionContent } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionContent
|
||||
v-bind="delegatedProps"
|
||||
class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||
>
|
||||
<div :class="cn('pb-4 pt-0', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import type { AccordionItemProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { AccordionItem, useForwardProps } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionItem
|
||||
v-bind="forwardedProps"
|
||||
:class="cn('border-b', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</AccordionItem>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import type { AccordionTriggerProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { ChevronDown } from "lucide-vue-next"
|
||||
import {
|
||||
AccordionHeader,
|
||||
AccordionTrigger,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionHeader class="flex">
|
||||
<AccordionTrigger
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
<slot name="icon">
|
||||
<ChevronDown
|
||||
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
|
||||
/>
|
||||
</slot>
|
||||
</AccordionTrigger>
|
||||
</AccordionHeader>
|
||||
</template>
|
||||
@@ -0,0 +1,4 @@
|
||||
export { default as Accordion } from "./Accordion.vue"
|
||||
export { default as AccordionContent } from "./AccordionContent.vue"
|
||||
export { default as AccordionItem } from "./AccordionItem.vue"
|
||||
export { default as AccordionTrigger } from "./AccordionTrigger.vue"
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import type { AlertVariants } from "."
|
||||
import { cn } from "@/lib/utils"
|
||||
import { alertVariants } from "."
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
variant?: AlertVariants["variant"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn(alertVariants({ variant }), props.class)" role="alert">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
|
||||
<slot />
|
||||
</h5>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
export { default as Alert } from "./Alert.vue"
|
||||
export { default as AlertDescription } from "./AlertDescription.vue"
|
||||
export { default as AlertTitle } from "./AlertTitle.vue"
|
||||
|
||||
export const alertVariants = cva(
|
||||
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-background text-foreground",
|
||||
destructive:
|
||||
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type AlertVariants = VariantProps<typeof alertVariants>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import type { BadgeVariants } from "."
|
||||
import { cn } from "@/lib/utils"
|
||||
import { badgeVariants } from "."
|
||||
|
||||
const props = defineProps<{
|
||||
variant?: BadgeVariants["variant"]
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn(badgeVariants({ variant }), props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
export { default as Badge } from "./Badge.vue"
|
||||
|
||||
export const badgeVariants = cva(
|
||||
"inline-flex gap-1 items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type BadgeVariants = VariantProps<typeof badgeVariants>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import type { PrimitiveProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import type { ButtonVariants } from "."
|
||||
import { Primitive } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "."
|
||||
|
||||
interface Props extends PrimitiveProps {
|
||||
variant?: ButtonVariants["variant"]
|
||||
size?: ButtonVariants["size"]
|
||||
class?: HTMLAttributes["class"]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
as: "button",
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:as="as"
|
||||
:as-child="asChild"
|
||||
:class="cn(buttonVariants({ variant, size }), props.class)"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
export { default as Button } from "./Button.vue"
|
||||
|
||||
export const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
"default": "h-9 px-4 py-2",
|
||||
"xs": "h-7 rounded px-2",
|
||||
"sm": "h-8 rounded-md px-3 text-xs",
|
||||
"lg": "h-10 rounded-md px-8",
|
||||
"icon": "h-9 w-9",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type ButtonVariants = VariantProps<typeof buttonVariants>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'rounded-xl border bg-card text-card-foreground shadow',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('p-6 pt-0', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p :class="cn('text-sm text-muted-foreground', props.class)">
|
||||
<slot />
|
||||
</p>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('flex items-center p-6 pt-0', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h3
|
||||
:class="
|
||||
cn('font-semibold leading-none tracking-tight', props.class)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</h3>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
export { default as Card } from "./Card.vue"
|
||||
export { default as CardContent } from "./CardContent.vue"
|
||||
export { default as CardDescription } from "./CardDescription.vue"
|
||||
export { default as CardFooter } from "./CardFooter.vue"
|
||||
export { default as CardHeader } from "./CardHeader.vue"
|
||||
export { default as CardTitle } from "./CardTitle.vue"
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import type { DialogRootEmits, DialogRootProps } from "reka-ui"
|
||||
import { DialogRoot, useForwardPropsEmits } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogRootProps>()
|
||||
const emits = defineEmits<DialogRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</DialogRoot>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import type { DialogCloseProps } from "reka-ui"
|
||||
import { DialogClose } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogCloseProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogClose v-bind="props">
|
||||
<slot />
|
||||
</DialogClose>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import type { DialogContentEmits, DialogContentProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { X } from "lucide-vue-next"
|
||||
import {
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
useForwardPropsEmits,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
|
||||
const emits = defineEmits<DialogContentEmits>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogPortal>
|
||||
<DialogOverlay
|
||||
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
|
||||
/>
|
||||
<DialogContent
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<DialogClose
|
||||
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
||||
>
|
||||
<X class="w-4 h-4" />
|
||||
<span class="sr-only">Close</span>
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogPortal>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import type { DialogDescriptionProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { DialogDescription, useForwardProps } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogDescription
|
||||
v-bind="forwardedProps"
|
||||
:class="cn('text-sm text-muted-foreground', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</DialogDescription>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{ class?: HTMLAttributes["class"] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import type { DialogContentEmits, DialogContentProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { X } from "lucide-vue-next"
|
||||
import {
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
useForwardPropsEmits,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
|
||||
const emits = defineEmits<DialogContentEmits>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogPortal>
|
||||
<DialogOverlay
|
||||
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
|
||||
>
|
||||
<DialogContent
|
||||
:class="
|
||||
cn(
|
||||
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
v-bind="forwarded"
|
||||
@pointer-down-outside="(event) => {
|
||||
const originalEvent = event.detail.originalEvent;
|
||||
const target = originalEvent.target as HTMLElement;
|
||||
if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<DialogClose
|
||||
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
|
||||
>
|
||||
<X class="w-4 h-4" />
|
||||
<span class="sr-only">Close</span>
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogOverlay>
|
||||
</DialogPortal>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import type { DialogTitleProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { DialogTitle, useForwardProps } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogTitle
|
||||
v-bind="forwardedProps"
|
||||
:class="
|
||||
cn(
|
||||
'text-lg font-semibold leading-none tracking-tight',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</DialogTitle>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import type { DialogTriggerProps } from "reka-ui"
|
||||
import { DialogTrigger } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogTriggerProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogTrigger v-bind="props">
|
||||
<slot />
|
||||
</DialogTrigger>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
export { default as Dialog } from "./Dialog.vue"
|
||||
export { default as DialogClose } from "./DialogClose.vue"
|
||||
export { default as DialogContent } from "./DialogContent.vue"
|
||||
export { default as DialogDescription } from "./DialogDescription.vue"
|
||||
export { default as DialogFooter } from "./DialogFooter.vue"
|
||||
export { default as DialogHeader } from "./DialogHeader.vue"
|
||||
export { default as DialogScrollContent } from "./DialogScrollContent.vue"
|
||||
export { default as DialogTitle } from "./DialogTitle.vue"
|
||||
export { default as DialogTrigger } from "./DialogTrigger.vue"
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { useVModel } from "@vueuse/core"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
defaultValue?: string | number
|
||||
modelValue?: string | number
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: "update:modelValue", payload: string | number): void
|
||||
}>()
|
||||
|
||||
const modelValue = useVModel(props, "modelValue", emits, {
|
||||
passive: true,
|
||||
defaultValue: props.defaultValue,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)">
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Input } from "./Input.vue"
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import type { SeparatorProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { Separator } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = withDefaults(defineProps<
|
||||
SeparatorProps & { class?: HTMLAttributes["class"] }
|
||||
>(), {
|
||||
orientation: "horizontal",
|
||||
decorative: true,
|
||||
})
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Separator
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
'shrink-0 bg-border',
|
||||
props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Separator } from "./Separator.vue"
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface SkeletonProps {
|
||||
class?: HTMLAttributes["class"]
|
||||
}
|
||||
|
||||
const props = defineProps<SkeletonProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Skeleton } from "./Skeleton.vue"
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full overflow-auto">
|
||||
<table :class="cn('w-full caption-bottom text-sm', props.class)">
|
||||
<slot />
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
|
||||
<slot />
|
||||
</tbody>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<td :class="cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', props.class)">
|
||||
<slot />
|
||||
</td>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
|
||||
<slot />
|
||||
</th>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<thead :class="cn('[&_tr]:border-b', props.class)">
|
||||
<slot />
|
||||
</thead>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
|
||||
<slot />
|
||||
</tr>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
export { default as Table } from './Table.vue'
|
||||
export { default as TableHeader } from './TableHeader.vue'
|
||||
export { default as TableBody } from './TableBody.vue'
|
||||
export { default as TableRow } from './TableRow.vue'
|
||||
export { default as TableHead } from './TableHead.vue'
|
||||
export { default as TableCell } from './TableCell.vue'
|
||||
Reference in New Issue
Block a user