Small UI layout change on pki sync certs table

This commit is contained in:
Carlos Monastyrski
2025-10-30 15:55:51 -03:00
parent caee0b34e8
commit fc10089acb
@@ -145,9 +145,9 @@ export const PkiSyncCertificatesSection = ({ pkiSync }: Props) => {
<Table> <Table>
<THead> <THead>
<Tr> <Tr>
<Th className="w-3/8">SAN / CN</Th> <Th className="w-2/8">SAN / CN</Th>
<Th className="w-1/8">Status</Th> <Th className="w-3/16">Certificate Status</Th>
<Th className="w-1/8">Serial Number</Th> <Th className="w-3/16">Serial Number</Th>
<Th className="w-1/8">Sync Status</Th> <Th className="w-1/8">Sync Status</Th>
<Th className="w-1/8">Expires At</Th> <Th className="w-1/8">Expires At</Th>
<Th className="w-1/8" /> <Th className="w-1/8" />
@@ -163,23 +163,23 @@ export const PkiSyncCertificatesSection = ({ pkiSync }: Props) => {
// Calculate auto-renewal timeline // Calculate auto-renewal timeline
const hasAutoRenewal = Boolean( const hasAutoRenewal = Boolean(
syncCert.certificateRenewBeforeDays && syncCert.certificateRenewBeforeDays &&
syncCert.certificateRenewBeforeDays > 0 && syncCert.certificateRenewBeforeDays > 0 &&
!syncCert.certificateRenewalError && !syncCert.certificateRenewalError &&
syncCert.certificateNotAfter syncCert.certificateNotAfter
); );
const daysUntilRenewal = const daysUntilRenewal =
hasAutoRenewal && syncCert.certificateNotAfter hasAutoRenewal && syncCert.certificateNotAfter
? (() => { ? (() => {
const expiryDate = new Date(syncCert.certificateNotAfter); const expiryDate = new Date(syncCert.certificateNotAfter);
const renewalDate = new Date( const renewalDate = new Date(
expiryDate.getTime() - expiryDate.getTime() -
syncCert.certificateRenewBeforeDays! * 24 * 60 * 60 * 1000 syncCert.certificateRenewBeforeDays! * 24 * 60 * 60 * 1000
); );
const now = new Date(); const now = new Date();
const diffInMs = renewalDate.getTime() - now.getTime(); const diffInMs = renewalDate.getTime() - now.getTime();
return Math.max(0, Math.ceil(diffInMs / (24 * 60 * 60 * 1000))); return Math.max(0, Math.ceil(diffInMs / (24 * 60 * 60 * 1000)));
})() })()
: null; : null;
const { originalDisplayName } = getCertificateDisplayName( const { originalDisplayName } = getCertificateDisplayName(
@@ -223,7 +223,7 @@ export const PkiSyncCertificatesSection = ({ pkiSync }: Props) => {
</Td> </Td>
<Td> <Td>
{syncCert.lastSyncMessage && {syncCert.lastSyncMessage &&
syncCert.syncStatus === CertificateSyncStatus.Failed ? ( syncCert.syncStatus === CertificateSyncStatus.Failed ? (
<Tooltip content={syncCert.lastSyncMessage}> <Tooltip content={syncCert.lastSyncMessage}>
<Badge variant="danger">Failed</Badge> <Badge variant="danger">Failed</Badge>
</Tooltip> </Tooltip>
@@ -290,7 +290,7 @@ export const PkiSyncCertificatesSection = ({ pkiSync }: Props) => {
page={currentPage} page={currentPage}
perPage={pageSize} perPage={pageSize}
onChangePage={(page: number) => setCurrentPage(page)} onChangePage={(page: number) => setCurrentPage(page)}
onChangePerPage={() => {}} onChangePerPage={() => { }}
/> />
</div> </div>
)} )}