Dashboard, Certificates & Access Pages

Relevant source files

• internal/domain/dtos/certificate.go
• internal/rest/handlers/certificates.go
• internal/rest/handlers/statistics.go
• migrations/1769313600_upgrade_v0.4.15.go
• ui/package-lock.json
• ui/package.json
• ui/src/App.tsx
• ui/src/api/certificates.ts
• ui/src/api/statistics.ts
• ui/src/components/DrawerForm.tsx
• ui/src/components/ModalForm.tsx
• ui/src/components/certificate/CertificateDetail.tsx
• ui/src/components/certificate/CertificateDetailDrawer.tsx
• ui/src/components/certificate/CertificateDownloadModal.tsx
• ui/src/components/workflow/WorkflowRunDetail.tsx
• ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
• ui/src/domain/certificate.ts
• ui/src/domain/workflowRun.ts
• ui/src/hooks/useAntdForm.ts
• ui/src/hooks/useAntdFormName.ts
• ui/src/i18n/locales.ts
• ui/src/i18n/resources/en/index.ts
• ui/src/i18n/resources/en/nls.certificate.json
• ui/src/i18n/resources/en/nls.common.json
• ui/src/i18n/resources/en/nls.dashboard.json
• ui/src/i18n/resources/en/nls.login.json
• ui/src/i18n/resources/en/nls.preset.json
• ui/src/i18n/resources/index.ts
• ui/src/i18n/resources/zh/nls.certificate.json
• ui/src/pages/accesses/AccessList.tsx
• ui/src/pages/certificates/CertificateList.tsx
• ui/src/pages/dashboard/Dashboard.tsx
• ui/src/pages/settings/Settings.tsx
• ui/src/pages/settings/SettingsDiagnostics.tsx
• ui/src/pages/workflows/WorkflowDetail.tsx
• ui/src/pages/workflows/WorkflowDetailRuns.tsx
• ui/src/pages/workflows/WorkflowList.tsx
• ui/src/repository/access.ts
• ui/src/repository/certificate.ts
• ui/src/repository/workflow.ts
• ui/src/repository/workflowRun.ts

This page documents the primary management interfaces of the Certimate UI, including the high-level status dashboard, the workflow orchestration list, certificate lifecycle management, and credential (access) configuration. These pages interact with the backend via a dedicated repository layer that wraps the PocketBase SDK.

Dashboard

The Dashboard serves as the landing page, providing real-time statistics and a summary of recent system activity.

Implementation and Data Flow

The Dashboard component ui/src/pages/dashboard/Dashboard.tsx37-63 aggregates three main sections:

1. StatisticCards: Displays counts for total certificates, expiring soon, expired, and active workflows ui/src/pages/dashboard/Dashboard.tsx115-161 It fetches data from the getStatistics API ui/src/pages/dashboard/Dashboard.tsx25 which targets the backend statistics handler. It uses useBrowserTheme to dynamically calculate card gradients based on the system theme ui/src/pages/dashboard/Dashboard.tsx131-136
2. Shortcuts: Quick links to common actions like "Create Workflow" or "Add Access" ui/src/pages/dashboard/Dashboard.tsx51-54
3. WorkflowRunHistoryTable: Lists the most recent executions using the listWorkflowRuns repository method ui/src/pages/dashboard/Dashboard.tsx33

Code Entity Mapping: Dashboard

UI Component	Backend/Repo Entity	Function/Route
StatisticCards	Statistics	getStatistics() ui/src/pages/dashboard/Dashboard.tsx25
WorkflowRunHistoryTable	WorkflowRunModel	listWorkflowRuns ui/src/repository/workflowRun.ts14-31
WorkflowRunDetailDrawer	WorkflowRun Collection	getWorkflowRun ui/src/repository/workflowRun.ts33-38

Sources: ui/src/pages/dashboard/Dashboard.tsx37-212 ui/src/domain/statistics.ts1-12 ui/src/api/statistics.ts1-7 ui/src/repository/workflowRun.ts14-38

---

Workflow Management

Workflow management is split between a high-level list and a detailed view for orchestration and history.

WorkflowList

The WorkflowList component ui/src/pages/workflows/WorkflowList.tsx24-200 provides a table-based interface to manage automation tasks. Key features include:

• Trigger Visualization: Distinguishes between MANUAL and SCHEDULED (CRON) triggers based on WORKFLOW_TRIGGERS ui/src/pages/workflows/WorkflowList.tsx68-81 ui/src/domain/workflow.ts19
• Status Toggling: Direct activation/deactivation of workflows via the enabled field ui/src/pages/workflows/WorkflowList.tsx89-94
• Execution: Immediate triggering of a workflow run via startWorkflowRun ui/src/pages/workflows/WorkflowList.tsx12 which invokes the backend service.
• Last Run Status: Displays the result of the most recent execution using the WorkflowStatus component ui/src/pages/workflows/WorkflowList.tsx112-123

WorkflowDetail

The WorkflowDetail page ui/src/pages/workflows/WorkflowDetail.tsx16-167 uses a tabbed interface managed by Segmented ui/src/pages/workflows/WorkflowDetail.tsx118-133:

1. Design Tab: Loads the design sub-route for graph editing ui/src/pages/workflows/WorkflowDetail.tsx41
2. Runs Tab: Displays history of WorkflowRun records via the runs sub-route ui/src/pages/workflows/WorkflowDetail.tsx42

It utilizes useWorkflowStore to manage state synchronization between the list and detail views ui/src/pages/workflows/WorkflowDetail.tsx25

WorkflowRunDetail

When a specific run is selected, the WorkflowRunDetail component ui/src/components/workflow/WorkflowRunDetail.tsx33-113 visualizes the execution:

• Real-time Updates: Uses subscribeWorkflowRun ui/src/repository/workflowRun.ts40-42 to listen for PocketBase realtime events while a run is PENDING or PROCESSING ui/src/components/workflow/WorkflowRunDetail.tsx41-52
• Execution Graph: Renders the specific graph version used for that run in a read-only designer ui/src/components/workflow/WorkflowRunDetail.tsx139-144
• Logs and Artifacts: Aggregates logs via listLogsByWorkflowRunId ui/src/repository/workflowLog.ts17 and certificates via listCertificatesByWorkflowRunId ui/src/repository/certificate.ts67-79

Sources: ui/src/pages/workflows/WorkflowList.tsx24-200 ui/src/pages/workflows/WorkflowDetail.tsx16-167 ui/src/repository/workflow.ts1-102 ui/src/repository/certificate.ts67-79 ui/src/components/workflow/WorkflowRunDetail.tsx33-113

---

Certificate Lifecycle

The Certificate page manages the inventory of issued and imported SSL/TLS certificates.

Filtering and Expiry Logic

The CertificateList ui/src/pages/certificates/CertificateList.tsx20-140 calculates validity states on the fly:

• Expiry Threshold: Retrieves certificatesWarningDaysBeforeExpire from persistenceSettings via usePersistenceSettingsStore ui/src/pages/certificates/CertificateList.tsx32-40
• Visual Indicators: Certificates are flagged as success (valid), warning (expiring soon), or danger (expired/revoked) based on validityNotAfter ui/src/pages/certificates/CertificateList.tsx71-96

Key Operations

• Revocation: Calls revokeCertificate ui/src/pages/certificates/CertificateList.tsx10 via the API layer. The backend handler processes the request and updates the isRevoked status.
• Removal: Performs a soft-delete by setting the deleted timestamp in the PocketBase certificate collection via the remove repository function ui/src/repository/certificate.ts89-103
• Workflow Reference: Certificates issued via workflows maintain a workflowRef, allowing navigation back to the source orchestration ui/src/pages/certificates/CertificateList.tsx124-142
• Detail View: The CertificateDetail component ui/src/components/certificate/CertificateDetail.tsx17-103 provides PEM-formatted views of the certificate and private key with copy-to-clipboard functionality ui/src/components/certificate/CertificateDetail.tsx58-88

Sources: ui/src/pages/certificates/CertificateList.tsx20-140 ui/src/repository/certificate.ts1-103 ui/src/components/certificate/CertificateDetail.tsx17-103

---

Access & Credential Management

The Access page manages third-party credentials (API Keys, SSH Keys) categorized by their usage.

Categorization

Access records are filtered by usage ui/src/pages/accesses/AccessList.tsx48-53 Categories are filtered in the refreshData request based on accessProvidersMap logic ui/src/pages/accesses/AccessList.tsx207-210

• dns-hosting: For DNS-01 challenge providers.
• deploy-target: For SSH, Kubernetes, or Cloud provider targets.
• notification: For webhook or SMTP credentials.

Provider Integration

The UI uses accessProvidersMap ui/src/domain/provider.ts16 to map provider IDs (e.g., aliyun, tencent) to display names and icons ui/src/pages/accesses/AccessList.tsx79-85 The list utilizes useAccessesStore for state management and fetching ui/src/pages/accesses/AccessList.tsx36-46

Sources: ui/src/pages/accesses/AccessList.tsx24-210 ui/src/repository/access.ts1-18 ui/src/domain/provider.ts16

---

Repository Layer Data Flow

The frontend utilizes a repository pattern to abstract PocketBase collection interactions.

Architecture Diagram: Frontend Data Flow

Title: Frontend Repository to PocketBase Mapping

Key Repository Functions

File	Function	Purpose
workflow.ts	list	Fetches paginated workflows with keyword/enabled filters ui/src/repository/workflow.ts34-64
certificate.ts	remove	Performs a soft-delete by updating the deleted field ui/src/repository/certificate.ts89-103
workflowRun.ts	subscribe	Establishes a WebSocket connection for real-time run updates ui/src/repository/workflowRun.ts40-42
access.ts	get	Fetches a single access record by ID ui/src/repository/access.ts18

Sources: ui/src/repository/workflow.ts1-64 ui/src/repository/certificate.ts1-103 ui/src/repository/workflowRun.ts1-44 ui/src/repository/access.ts1-18

---

Code Entity to Natural Language Mapping

This diagram maps visual UI elements to their corresponding technical identifiers in the codebase.

Title: UI Elements to Code Entities Mapping

Sources: ui/src/pages/workflows/WorkflowList.tsx89-94 ui/src/pages/workflows/WorkflowDetail.tsx139-141 ui/src/pages/certificates/CertificateList.tsx71-96 ui/src/domain/provider.ts16