290 lines
10 KiB
Vue
290 lines
10 KiB
Vue
<template>
|
|
<div class="stats-info mb-4" id="statsInfo">
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ totalCerts }}</div>
|
|
<div class="stat-label">Total Certificates</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ activeCerts.length }}</div>
|
|
<div class="stat-label">Active Certificates</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ expiringCount }}</div>
|
|
<div class="stat-label">Expiring in 30 days</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ expiredCerts.length }}</div>
|
|
<div class="stat-label">Expired Certificates</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-3">
|
|
<div class="d-flex gap-3 align-items-center flex-wrap">
|
|
<div class="input-group input-group-sm" style="width: 250px;">
|
|
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
|
<input type="text" class="form-control" placeholder="Search by client name..." v-model="searchQuery">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="hideExpired" v-model="hideExpired">
|
|
<label class="form-check-label user-select-none text-muted" for="hideExpired">Hide Expired Certificates</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" id="certificatesCard">
|
|
<div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom">
|
|
<span><i class="fas fa-certificate me-2"></i>Certificates List</span>
|
|
<div>
|
|
<span class="status-badge status-valid me-1">
|
|
<i class="fas fa-check-circle me-1"></i><span>{{ activeCerts.length }}</span> Active
|
|
</span>
|
|
<span class="status-badge status-expired">
|
|
<i class="fas fa-times-circle me-1"></i><span>{{ expiredCerts.length }}</span> Expired
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Client Name</th>
|
|
<th>Validity Not After</th>
|
|
<th>Days Remaining</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="loading">
|
|
<td colspan="4" class="text-center py-4">
|
|
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-2 mb-0">Loading certificates...</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr v-else-if="activeCerts.length === 0 && expiredCerts.length === 0">
|
|
<td colspan="4" class="empty-state text-center py-5">
|
|
<i class="fas fa-certificate fa-2x mb-3 text-muted"></i>
|
|
<p class="text-muted">No certificates found</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<template v-else>
|
|
<!-- Active Section -->
|
|
<tr v-if="activeCerts.length > 0" class="section-divider">
|
|
<td colspan="4">Active Certificates ({{ activeCerts.length }})</td>
|
|
</tr>
|
|
<tr v-for="cert in activeCerts" :key="cert.common_name + '_active'">
|
|
<td>
|
|
<div class="fw-semibold" style="color: var(--text-heading);">{{ getClientName(cert) }}</div>
|
|
<div class="certificate-file text-muted small">{{ cert.file || 'N/A' }}</div>
|
|
</td>
|
|
<td>{{ formatDate(cert.not_after || cert.expiration_date) }}</td>
|
|
<td class="fw-semibold" :class="getDaysClass(cert.days_remaining)">
|
|
{{ cert.days_remaining || 'N/A' }}
|
|
</td>
|
|
<td v-html="getStatusBadgeHTML(cert.days_remaining)"></td>
|
|
</tr>
|
|
|
|
<!-- Expired Section -->
|
|
<template v-if="!hideExpired && expiredCerts.length > 0">
|
|
<tr class="section-divider">
|
|
<td colspan="4">Expired Certificates ({{ expiredCerts.length }})</td>
|
|
</tr>
|
|
<tr v-for="cert in expiredCerts" :key="cert.common_name + '_expired'">
|
|
<td>
|
|
<div class="fw-semibold" style="color: var(--text-heading);">{{ getClientName(cert) }}</div>
|
|
<div class="certificate-file text-muted small">{{ cert.file || 'N/A' }}</div>
|
|
</td>
|
|
<td>{{ formatDate(cert.not_after || cert.expiration_date) }}</td>
|
|
<td class="fw-semibold text-danger">
|
|
{{ formatExpiredDays(cert.days_remaining) }}
|
|
</td>
|
|
<td>
|
|
<span class="status-badge status-expired"><i class="fas fa-times-circle me-1"></i>Expired</span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useApi } from '../composables/useApi';
|
|
import { useFormatters } from '../composables/useFormatters';
|
|
|
|
const { fetchCertificates } = useApi();
|
|
// use locally defined format logic to match legacy specificities if needed, but simple date string is likely fine
|
|
const { formatDate: _formatDate } = useFormatters();
|
|
|
|
const loading = ref(true);
|
|
const allCertificates = ref([]);
|
|
const searchQuery = ref('');
|
|
const hideExpired = ref(false);
|
|
|
|
const getClientName = (cert) => {
|
|
const cn = cert.common_name || cert.subject || 'N/A';
|
|
return cn.replace('CN=', '').trim();
|
|
}
|
|
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr || dateStr === 'N/A') return 'N/A';
|
|
try {
|
|
const d = new Date(dateStr);
|
|
if(isNaN(d)) return dateStr;
|
|
// Legacy: 'May 16, 2033 11:32:06 AM' format roughly
|
|
// Using standard locale string which is close enough and better
|
|
return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
|
|
} catch(e) { return dateStr; }
|
|
};
|
|
|
|
const getDaysClass = (daysText) => {
|
|
if (!daysText || daysText === 'N/A') return 'text-success'; // default valid
|
|
if (daysText.includes('Expired')) return 'text-danger';
|
|
|
|
const days = parseInt(daysText);
|
|
if (!isNaN(days) && days <= 30) return 'text-warning';
|
|
return 'text-success';
|
|
};
|
|
|
|
const getStatusBadgeHTML = (daysText) => {
|
|
if (!daysText || daysText === 'N/A') return '<span class="status-badge text-muted">Unknown</span>';
|
|
|
|
const days = parseInt(daysText);
|
|
if (!isNaN(days)) {
|
|
if (days <= 30) {
|
|
return '<span class="status-badge status-expiring"><i class="fas fa-exclamation-triangle me-1"></i>Expiring Soon</span>';
|
|
} else {
|
|
return '<span class="status-badge status-valid"><i class="fas fa-check-circle me-1"></i>Valid</span>';
|
|
}
|
|
}
|
|
return '<span class="status-badge text-muted">Unknown</span>';
|
|
};
|
|
|
|
const formatExpiredDays = (daysText) => {
|
|
if(!daysText) return 'N/A';
|
|
if (daysText.includes('Expired')) {
|
|
return daysText.replace('Expired (', '').replace(' days ago)', '') + ' days ago';
|
|
}
|
|
return daysText;
|
|
};
|
|
|
|
// Data Processing
|
|
const filteredData = computed(() => {
|
|
let data = allCertificates.value;
|
|
if (searchQuery.value) {
|
|
const term = searchQuery.value.toLowerCase();
|
|
data = data.filter(c => {
|
|
const commonName = (c.common_name || c.subject || '').toLowerCase();
|
|
const fileName = (c.file || '').toLowerCase();
|
|
return commonName.includes(term) || fileName.includes(term);
|
|
});
|
|
}
|
|
return data;
|
|
});
|
|
|
|
const categorized = computed(() => {
|
|
const active = [];
|
|
const expired = [];
|
|
|
|
filteredData.value.forEach(cert => {
|
|
let isExpired = false;
|
|
if (cert.days_remaining && typeof cert.days_remaining === 'string' && cert.days_remaining.includes('Expired')) {
|
|
isExpired = true;
|
|
} else if ((!cert.days_remaining || cert.days_remaining === 'N/A') && cert.not_after) {
|
|
const expDate = new Date(cert.not_after);
|
|
if (expDate < new Date()) isExpired = true;
|
|
}
|
|
|
|
if (isExpired) expired.push(cert);
|
|
else active.push(cert);
|
|
});
|
|
|
|
// Sort logic from legacy
|
|
active.sort((a,b) => {
|
|
const aDays = parseInt(a.days_remaining) || 9999;
|
|
const bDays = parseInt(b.days_remaining) || 9999;
|
|
return aDays - bDays;
|
|
});
|
|
|
|
expired.sort((a,b) => {
|
|
const aMatch = (a.days_remaining||'').match(/\d+/);
|
|
const bMatch = (b.days_remaining||'').match(/\d+/);
|
|
const aDays = aMatch ? parseInt(aMatch[0]) : 0;
|
|
const bDays = bMatch ? parseInt(bMatch[0]) : 0;
|
|
return bDays - aDays;
|
|
});
|
|
|
|
return { active, expired };
|
|
});
|
|
|
|
const activeCerts = computed(() => categorized.value.active);
|
|
const expiredCerts = computed(() => categorized.value.expired);
|
|
const totalCerts = computed(() => allCertificates.value.length);
|
|
const expiringCount = computed(() => {
|
|
return activeCerts.value.filter(c => {
|
|
const days = parseInt(c.days_remaining);
|
|
return !isNaN(days) && days <= 30;
|
|
}).length;
|
|
});
|
|
|
|
const loadData = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const res = await fetchCertificates();
|
|
if(res.success) {
|
|
allCertificates.value = res.data;
|
|
}
|
|
} catch(e) {
|
|
console.error(e);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadData();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.stats-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
.stat-item {
|
|
background: var(--bg-card);
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
line-height: 1.2;
|
|
}
|
|
.stat-label {
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.section-divider td {
|
|
background-color: var(--bg-body);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
</style>
|