735 lines
25 KiB
TypeScript
735 lines
25 KiB
TypeScript
import {
|
|
DeesElement,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
css,
|
|
state,
|
|
cssManager,
|
|
} from '@design.estate/dees-element';
|
|
import * as appstate from '../../appstate.js';
|
|
import * as interfaces from '../../../dist_ts_interfaces/index.js';
|
|
import { viewHostCss } from '../shared/css.js';
|
|
import { type IStatsTile } from '@design.estate/dees-catalog';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'ops-view-certificates': OpsViewCertificates;
|
|
}
|
|
}
|
|
|
|
@customElement('ops-view-certificates')
|
|
export class OpsViewCertificates extends DeesElement {
|
|
@state()
|
|
accessor certState: appstate.ICertificateState = appstate.certificateStatePart.getState()!;
|
|
|
|
@state()
|
|
accessor acmeState: appstate.IAcmeConfigState = appstate.acmeConfigStatePart.getState()!;
|
|
|
|
constructor() {
|
|
super();
|
|
const certSub = appstate.certificateStatePart.select().subscribe((newState) => {
|
|
this.certState = newState;
|
|
});
|
|
this.rxSubscriptions.push(certSub);
|
|
const acmeSub = appstate.acmeConfigStatePart.select().subscribe((newState) => {
|
|
this.acmeState = newState;
|
|
});
|
|
this.rxSubscriptions.push(acmeSub);
|
|
}
|
|
|
|
async connectedCallback() {
|
|
await super.connectedCallback();
|
|
await appstate.certificateStatePart.dispatchAction(appstate.fetchCertificateOverviewAction, null);
|
|
await appstate.acmeConfigStatePart.dispatchAction(appstate.fetchAcmeConfigAction, null);
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
viewHostCss,
|
|
css`
|
|
.certificatesContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.acmeCard {
|
|
padding: 16px 20px;
|
|
background: ${cssManager.bdTheme('#f9fafb', '#111827')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.acmeCard.acmeCardEmpty {
|
|
background: ${cssManager.bdTheme('#fffbeb', '#1c1917')};
|
|
border-color: ${cssManager.bdTheme('#fde68a', '#78350f')};
|
|
}
|
|
|
|
.acmeCardHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.acmeCardTitle {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111827', '#f3f4f6')};
|
|
}
|
|
|
|
.acmeGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 12px 24px;
|
|
}
|
|
|
|
.acmeField {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.acmeLabel {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
}
|
|
|
|
.acmeValue {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#111827', '#f3f4f6')};
|
|
}
|
|
|
|
.acmeEmptyHint {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: ${cssManager.bdTheme('#78350f', '#fde68a')};
|
|
}
|
|
|
|
.statusBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 10px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.statusBadge.valid {
|
|
background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
|
|
color: ${cssManager.bdTheme('#166534', '#4ade80')};
|
|
}
|
|
|
|
.statusBadge.expiring {
|
|
background: ${cssManager.bdTheme('#fff7ed', '#431407')};
|
|
color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
|
|
}
|
|
|
|
.statusBadge.expired,
|
|
.statusBadge.failed {
|
|
background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
|
|
color: ${cssManager.bdTheme('#991b1b', '#f87171')};
|
|
}
|
|
|
|
.statusBadge.provisioning {
|
|
background: ${cssManager.bdTheme('#eff6ff', '#172554')};
|
|
color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};
|
|
}
|
|
|
|
.statusBadge.unknown {
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
|
|
color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
|
|
}
|
|
|
|
.sourceBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
|
|
color: ${cssManager.bdTheme('#374151', '#d1d5db')};
|
|
}
|
|
|
|
.routePills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.routePill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
background: ${cssManager.bdTheme('#e0e7ff', '#1e1b4b')};
|
|
color: ${cssManager.bdTheme('#3730a3', '#a5b4fc')};
|
|
}
|
|
|
|
.moreCount {
|
|
font-size: 11px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.errorText {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#991b1b', '#f87171')};
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.backoffIndicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
background: ${cssManager.bdTheme('#fff7ed', '#431407')};
|
|
}
|
|
|
|
.expiryInfo {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.expiryInfo .daysLeft {
|
|
font-size: 11px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
}
|
|
|
|
.expiryInfo .daysLeft.warn {
|
|
color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
|
|
}
|
|
|
|
.expiryInfo .daysLeft.danger {
|
|
color: ${cssManager.bdTheme('#991b1b', '#f87171')};
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
const { summary } = this.certState;
|
|
|
|
return html`
|
|
<dees-heading level="3">Certificates</dees-heading>
|
|
|
|
<div class="certificatesContainer">
|
|
${this.renderAcmeSettingsCard()}
|
|
${this.renderStatsTiles(summary)}
|
|
${this.renderCertificateTable()}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderAcmeSettingsCard(): TemplateResult {
|
|
const config = this.acmeState.config;
|
|
|
|
if (!config) {
|
|
return html`
|
|
<div class="acmeCard acmeCardEmpty">
|
|
<div class="acmeCardHeader">
|
|
<span class="acmeCardTitle">ACME Settings</span>
|
|
<dees-button
|
|
eventName="edit-acme"
|
|
@click=${() => this.showEditAcmeDialog()}
|
|
.type=${'highlighted'}
|
|
>Configure</dees-button>
|
|
</div>
|
|
<p class="acmeEmptyHint">
|
|
No ACME configuration yet. Click <strong>Configure</strong> to set up automated TLS
|
|
certificate issuance via Let's Encrypt. You'll also need at least one DNS provider
|
|
under <strong>Domains > Providers</strong>.
|
|
</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<div class="acmeCard">
|
|
<div class="acmeCardHeader">
|
|
<span class="acmeCardTitle">ACME Settings</span>
|
|
<dees-button eventName="edit-acme" @click=${() => this.showEditAcmeDialog()}>Edit</dees-button>
|
|
</div>
|
|
<div class="acmeGrid">
|
|
<div class="acmeField">
|
|
<span class="acmeLabel">Account email</span>
|
|
<span class="acmeValue">${config.accountEmail || '(not set)'}</span>
|
|
</div>
|
|
<div class="acmeField">
|
|
<span class="acmeLabel">Status</span>
|
|
<span class="acmeValue">
|
|
<span class="statusBadge ${config.enabled ? 'valid' : 'unknown'}">
|
|
${config.enabled ? 'enabled' : 'disabled'}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="acmeField">
|
|
<span class="acmeLabel">Mode</span>
|
|
<span class="acmeValue">
|
|
<span class="statusBadge ${config.useProduction ? 'valid' : 'provisioning'}">
|
|
${config.useProduction ? 'production' : 'staging'}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="acmeField">
|
|
<span class="acmeLabel">Auto-renew</span>
|
|
<span class="acmeValue">${config.autoRenew ? 'on' : 'off'}</span>
|
|
</div>
|
|
<div class="acmeField">
|
|
<span class="acmeLabel">Renewal threshold</span>
|
|
<span class="acmeValue">${config.renewThresholdDays} days</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private async showEditAcmeDialog() {
|
|
const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
|
|
const current = this.acmeState.config;
|
|
|
|
DeesModal.createAndShow({
|
|
heading: current ? 'Edit ACME Settings' : 'Configure ACME',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-text
|
|
.key=${'accountEmail'}
|
|
.label=${'Account email'}
|
|
.value=${current?.accountEmail ?? ''}
|
|
.required=${true}
|
|
></dees-input-text>
|
|
<dees-input-checkbox
|
|
.key=${'enabled'}
|
|
.label=${'Enabled'}
|
|
.value=${current?.enabled ?? true}
|
|
></dees-input-checkbox>
|
|
<dees-input-checkbox
|
|
.key=${'useProduction'}
|
|
.label=${"Use Let's Encrypt production (uncheck for staging)"}
|
|
.value=${current?.useProduction ?? true}
|
|
></dees-input-checkbox>
|
|
<dees-input-checkbox
|
|
.key=${'autoRenew'}
|
|
.label=${'Auto-renew certificates'}
|
|
.value=${current?.autoRenew ?? true}
|
|
></dees-input-checkbox>
|
|
<dees-input-text
|
|
.key=${'renewThresholdDays'}
|
|
.label=${'Renewal threshold (days)'}
|
|
.value=${String(current?.renewThresholdDays ?? 30)}
|
|
></dees-input-text>
|
|
</dees-form>
|
|
<p style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
|
|
Most fields take effect on the next dcrouter restart (SmartAcme is instantiated once at
|
|
startup). Changing the account email creates a new Let's Encrypt account — only do this
|
|
if you know what you're doing.
|
|
</p>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
|
|
{
|
|
name: 'Save',
|
|
action: async (modalArg: any) => {
|
|
const form = modalArg.shadowRoot
|
|
?.querySelector('.content')
|
|
?.querySelector('dees-form');
|
|
if (!form) return;
|
|
const data = await form.collectFormData();
|
|
const email = String(data.accountEmail ?? '').trim();
|
|
if (!email) {
|
|
DeesToast.show({
|
|
message: 'Account email is required',
|
|
type: 'warning',
|
|
duration: 2500,
|
|
});
|
|
return;
|
|
}
|
|
const threshold = parseInt(String(data.renewThresholdDays ?? '30'), 10);
|
|
await appstate.acmeConfigStatePart.dispatchAction(appstate.updateAcmeConfigAction, {
|
|
accountEmail: email,
|
|
enabled: Boolean(data.enabled),
|
|
useProduction: Boolean(data.useProduction),
|
|
autoRenew: Boolean(data.autoRenew),
|
|
renewThresholdDays: Number.isFinite(threshold) ? threshold : 30,
|
|
});
|
|
modalArg.destroy();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
private renderStatsTiles(summary: appstate.ICertificateState['summary']): TemplateResult {
|
|
const tiles: IStatsTile[] = [
|
|
{
|
|
id: 'total',
|
|
title: 'Total Certificates',
|
|
value: summary.total,
|
|
type: 'number',
|
|
icon: 'lucide:ShieldHalf',
|
|
color: '#3b82f6',
|
|
},
|
|
{
|
|
id: 'valid',
|
|
title: 'Valid',
|
|
value: summary.valid,
|
|
type: 'number',
|
|
icon: 'lucide:Check',
|
|
color: '#22c55e',
|
|
},
|
|
{
|
|
id: 'expiring',
|
|
title: 'Expiring Soon',
|
|
value: summary.expiring,
|
|
type: 'number',
|
|
icon: 'lucide:Clock',
|
|
color: '#f59e0b',
|
|
},
|
|
{
|
|
id: 'problems',
|
|
title: 'Failed / Expired',
|
|
value: summary.failed + summary.expired,
|
|
type: 'number',
|
|
icon: 'lucide:TriangleAlert',
|
|
color: '#ef4444',
|
|
},
|
|
];
|
|
|
|
return html`
|
|
<dees-statsgrid
|
|
.tiles=${tiles}
|
|
.minTileWidth=${200}
|
|
.gridActions=${[
|
|
{
|
|
name: 'Refresh',
|
|
iconName: 'lucide:RefreshCw',
|
|
action: async () => {
|
|
await appstate.certificateStatePart.dispatchAction(
|
|
appstate.fetchCertificateOverviewAction,
|
|
null
|
|
);
|
|
},
|
|
},
|
|
]}
|
|
></dees-statsgrid>
|
|
`;
|
|
}
|
|
|
|
private renderCertificateTable(): TemplateResult {
|
|
return html`
|
|
<dees-table
|
|
.data=${this.certState.certificates}
|
|
.showColumnFilters=${true}
|
|
.displayFunction=${(cert: interfaces.requests.ICertificateInfo) => ({
|
|
Domain: cert.domain,
|
|
Routes: this.renderRoutePills(cert.routeNames),
|
|
Status: this.renderStatusBadge(cert.status),
|
|
Source: this.renderSourceBadge(cert.source),
|
|
Expires: this.renderExpiry(cert.expiryDate),
|
|
Error: cert.backoffInfo
|
|
? html`<span class="backoffIndicator">${cert.backoffInfo.failures} failures, retry ${this.formatRetryTime(cert.backoffInfo.retryAfter)}</span>`
|
|
: cert.error
|
|
? html`<span class="errorText" title="${cert.error}">${cert.error}</span>`
|
|
: '',
|
|
})}
|
|
.dataActions=${[
|
|
{
|
|
name: 'Import Certificate',
|
|
iconName: 'lucide:upload',
|
|
type: ['header'],
|
|
actionFunc: async () => {
|
|
const { DeesModal } = await import('@design.estate/dees-catalog');
|
|
await DeesModal.createAndShow({
|
|
heading: 'Import Certificate',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-fileupload
|
|
key="certJsonFile"
|
|
label="Certificate JSON (.tsclass.cert.json)"
|
|
accept=".json"
|
|
.multiple=${false}
|
|
required
|
|
></dees-input-fileupload>
|
|
</dees-form>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'Import',
|
|
iconName: 'lucide:upload',
|
|
action: async (modal: any) => {
|
|
const { DeesToast } = await import('@design.estate/dees-catalog');
|
|
try {
|
|
const form = modal.shadowRoot!.querySelector('dees-form') as any;
|
|
const formData = await form.collectFormData();
|
|
const files = formData.certJsonFile;
|
|
if (!files || files.length === 0) {
|
|
DeesToast.show({ message: 'Please select a JSON file.', type: 'warning', duration: 3000 });
|
|
return;
|
|
}
|
|
const file = files[0];
|
|
const text = await file.text();
|
|
const cert = JSON.parse(text);
|
|
if (!cert.domainName || !cert.publicKey || !cert.privateKey) {
|
|
DeesToast.show({ message: 'Invalid cert JSON: missing domainName, publicKey, or privateKey.', type: 'error', duration: 4000 });
|
|
return;
|
|
}
|
|
await appstate.certificateStatePart.dispatchAction(
|
|
appstate.importCertificateAction,
|
|
cert,
|
|
);
|
|
DeesToast.show({ message: `Certificate imported for ${cert.domainName}`, type: 'success', duration: 3000 });
|
|
modal.destroy();
|
|
} catch (err: unknown) {
|
|
DeesToast.show({ message: `Import failed: ${(err as Error).message}`, type: 'error', duration: 4000 });
|
|
}
|
|
},
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
{
|
|
name: 'Reprovision',
|
|
iconName: 'lucide:RefreshCw',
|
|
type: ['inRow', 'contextmenu'],
|
|
actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
|
|
const cert = actionData.item;
|
|
if (!cert.canReprovision) {
|
|
const { DeesToast } = await import('@design.estate/dees-catalog');
|
|
DeesToast.show({
|
|
message: 'This certificate source does not support reprovisioning.',
|
|
type: 'warning',
|
|
duration: 3000,
|
|
});
|
|
return;
|
|
}
|
|
|
|
const doReprovision = async (forceRenew = false) => {
|
|
await appstate.certificateStatePart.dispatchAction(
|
|
appstate.reprovisionCertificateAction,
|
|
{ domain: cert.domain, forceRenew },
|
|
);
|
|
const { DeesToast } = await import('@design.estate/dees-catalog');
|
|
DeesToast.show({
|
|
message: forceRenew
|
|
? `Force renewal triggered for ${cert.domain}`
|
|
: `Reprovisioning triggered for ${cert.domain}`,
|
|
type: 'success',
|
|
duration: 3000,
|
|
});
|
|
};
|
|
|
|
if (cert.status === 'valid') {
|
|
const { DeesModal } = await import('@design.estate/dees-catalog');
|
|
DeesModal.createAndShow({
|
|
heading: 'Certificate Still Valid',
|
|
content: html`<p style="margin: 0; line-height: 1.5;">The certificate for <strong>${cert.domain}</strong> is still valid${cert.expiryDate ? ` until ${new Date(cert.expiryDate).toLocaleDateString()}` : ''}. Do you want to force renew it now?</p>`,
|
|
menuOptions: [
|
|
{ name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
|
|
{
|
|
name: 'Force Renew',
|
|
action: async (modalArg: any) => {
|
|
await modalArg.destroy();
|
|
await doReprovision(true);
|
|
},
|
|
},
|
|
],
|
|
});
|
|
} else {
|
|
await doReprovision();
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name: 'Export',
|
|
iconName: 'lucide:download',
|
|
type: ['inRow', 'contextmenu'],
|
|
actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
|
|
const { DeesToast } = await import('@design.estate/dees-catalog');
|
|
const cert = actionData.item;
|
|
try {
|
|
const response = await appstate.fetchCertificateExport(cert.domain);
|
|
if (response.success && response.cert) {
|
|
const safeDomain = cert.domain.replace(/\*/g, '_wildcard');
|
|
this.downloadJsonFile(`${safeDomain}.tsclass.cert.json`, response.cert);
|
|
DeesToast.show({ message: `Certificate exported for ${cert.domain}`, type: 'success', duration: 3000 });
|
|
} else {
|
|
DeesToast.show({ message: response.message || 'Export failed', type: 'error', duration: 4000 });
|
|
}
|
|
} catch (err: unknown) {
|
|
DeesToast.show({ message: `Export failed: ${(err as Error).message}`, type: 'error', duration: 4000 });
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name: 'Delete',
|
|
iconName: 'lucide:trash-2',
|
|
type: ['inRow', 'contextmenu'],
|
|
actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
|
|
const cert = actionData.item;
|
|
const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
|
|
await DeesModal.createAndShow({
|
|
heading: `Delete Certificate: ${cert.domain}`,
|
|
content: html`
|
|
<div style="padding: 20px; font-size: 14px;">
|
|
<p>Are you sure you want to delete the certificate data for <strong>${cert.domain}</strong>?</p>
|
|
<p style="color: #f59e0b; margin-top: 12px;">Note: The certificate may remain in proxy memory until the next restart or reprovisioning.</p>
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'Delete',
|
|
iconName: 'lucide:trash-2',
|
|
action: async (modal: any) => {
|
|
try {
|
|
await appstate.certificateStatePart.dispatchAction(
|
|
appstate.deleteCertificateAction,
|
|
cert.domain,
|
|
);
|
|
DeesToast.show({ message: `Certificate deleted for ${cert.domain}`, type: 'success', duration: 3000 });
|
|
modal.destroy();
|
|
} catch (err: unknown) {
|
|
DeesToast.show({ message: `Delete failed: ${(err as Error).message}`, type: 'error', duration: 4000 });
|
|
}
|
|
},
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
{
|
|
name: 'View Details',
|
|
iconName: 'fa:magnifyingGlass',
|
|
type: ['doubleClick', 'contextmenu'],
|
|
actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
|
|
const cert = actionData.item;
|
|
const { DeesModal } = await import('@design.estate/dees-catalog');
|
|
await DeesModal.createAndShow({
|
|
heading: `Certificate: ${cert.domain}`,
|
|
content: html`
|
|
<div style="padding: 20px;">
|
|
<dees-dataview-codebox
|
|
.heading=${'Certificate Details'}
|
|
progLang="json"
|
|
.codeToDisplay=${JSON.stringify(cert, null, 2)}
|
|
></dees-dataview-codebox>
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'Copy Domain',
|
|
iconName: 'lucide:Copy',
|
|
action: async () => {
|
|
await navigator.clipboard.writeText(cert.domain);
|
|
},
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
]}
|
|
heading1="Certificate Status"
|
|
heading2="TLS certificates by domain"
|
|
searchable
|
|
.pagination=${true}
|
|
.paginationSize=${50}
|
|
dataName="certificate"
|
|
></dees-table>
|
|
`;
|
|
}
|
|
|
|
private downloadJsonFile(filename: string, data: any): void {
|
|
const json = JSON.stringify(data, null, 2);
|
|
const blob = new Blob([json], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
private renderRoutePills(routeNames: string[]): TemplateResult {
|
|
const maxShow = 3;
|
|
const visible = routeNames.slice(0, maxShow);
|
|
const remaining = routeNames.length - maxShow;
|
|
|
|
return html`
|
|
<span class="routePills">
|
|
${visible.map((r) => html`<span class="routePill">${r}</span>`)}
|
|
${remaining > 0 ? html`<span class="moreCount">+${remaining} more</span>` : ''}
|
|
</span>
|
|
`;
|
|
}
|
|
|
|
private renderStatusBadge(status: interfaces.requests.TCertificateStatus): TemplateResult {
|
|
return html`<span class="statusBadge ${status}">${status}</span>`;
|
|
}
|
|
|
|
private renderSourceBadge(source: interfaces.requests.TCertificateSource): TemplateResult {
|
|
const labels: Record<string, string> = {
|
|
acme: 'ACME',
|
|
'provision-function': 'Custom',
|
|
static: 'Static',
|
|
none: 'None',
|
|
};
|
|
return html`<span class="sourceBadge">${labels[source] || source}</span>`;
|
|
}
|
|
|
|
private renderExpiry(expiryDate?: string): TemplateResult {
|
|
if (!expiryDate) {
|
|
return html`<span style="color: ${cssManager.bdTheme('#9ca3af', '#4b5563')}">--</span>`;
|
|
}
|
|
|
|
const expiry = new Date(expiryDate);
|
|
const now = new Date();
|
|
const daysLeft = Math.ceil((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
|
|
|
|
const dateStr = expiry.toLocaleDateString();
|
|
let daysClass = '';
|
|
let daysText = '';
|
|
|
|
if (daysLeft < 0) {
|
|
daysClass = 'danger';
|
|
daysText = `(expired)`;
|
|
} else if (daysLeft < 30) {
|
|
daysClass = 'warn';
|
|
daysText = `(${daysLeft}d left)`;
|
|
} else {
|
|
daysText = `(${daysLeft}d left)`;
|
|
}
|
|
|
|
return html`
|
|
<span class="expiryInfo">
|
|
${dateStr} <span class="daysLeft ${daysClass}">${daysText}</span>
|
|
</span>
|
|
`;
|
|
}
|
|
|
|
private formatRetryTime(retryAfter?: string): string {
|
|
if (!retryAfter) return 'soon';
|
|
const retryDate = new Date(retryAfter);
|
|
const now = new Date();
|
|
const diffMs = retryDate.getTime() - now.getTime();
|
|
if (diffMs <= 0) return 'now';
|
|
const diffMin = Math.ceil(diffMs / 60000);
|
|
if (diffMin < 60) return `in ${diffMin}m`;
|
|
const diffHours = Math.ceil(diffMin / 60);
|
|
return `in ${diffHours}h`;
|
|
}
|
|
}
|