Certificate table work, shows error message in popover

Author: jc21

backend/internal/acme/acmesh.go

@@ -107,7 +107,7 @@ func shExec(args []string, envs []string) (string, error) {
 	b, e := c.CombinedOutput()
 
 	if e != nil {
-		logger.Error("AcmeShError", fmt.Errorf("Command error: %s -- %v\n%+v", acmeSh, args, e))
+		// logger.Error("AcmeShError", fmt.Errorf("Command error: %s -- %v\n%+v", acmeSh, args, e))
 		logger.Warn(string(b))
 	}
 
@@ -128,7 +128,7 @@ func getCommonArgs() []string {
 	}
 
 	args = append(args, "--log", "/data/logs/acme.sh.log")
-	args = append(args, "--debug", "2")
+	// args = append(args, "--debug", "2")
 
 	return args
 }

backend/internal/entity/certificate/methods.go

@@ -41,6 +41,7 @@ func Create(certificate *Model) (int, error) {
 		domain_names,
 		expires_on,
 		status,
+		error_message,
 		meta,
 		is_ecc,
 		is_deleted
@@ -55,6 +56,7 @@ func Create(certificate *Model) (int, error) {
 		:domain_names,
 		:expires_on,
 		:status,
+		:error_message,
 		:meta,
 		:is_ecc,
 		:is_deleted
@@ -93,6 +95,7 @@ func Update(certificate *Model) error {
 		domain_names = :domain_names,
 		expires_on = :expires_on,
 		status = :status,
+		error_message = :error_message,
 		meta = :meta,
 		is_ecc = :is_ecc,
 		is_deleted = :is_deleted

frontend/src/components/Table/Formatters.tsx

@@ -1,4 +1,14 @@
-import { Avatar, Badge, Text, Tooltip } from "@chakra-ui/react";
+import {
+	Avatar,
+	Badge,
+	Text,
+	Tooltip,
+	Popover,
+	PopoverTrigger,
+	PopoverContent,
+	PopoverArrow,
+	PopoverBody,
+} from "@chakra-ui/react";
 import { Monospace, RowAction, RowActionsMenu } from "components";
 import { intl } from "locale";
 import getNiceDNSProvider from "modules/Acmesh";
@@ -72,7 +82,7 @@ function CapabilitiesFormatter() {
 }
 
 function CertificateStatusFormatter() {
-	const formatCell = ({ value }: any) => {
+	const formatCell = ({ value, row }: any) => {
 		let color = "cyan.500";
 		switch (value) {
 			case "failed":
@@ -85,6 +95,38 @@ function CertificateStatusFormatter() {
 				color = "yellow.400";
 				break;
 		}
+		// special case for failed to show an error popover
+		if (value === "failed" && row?.original?.errorMessage) {
+			return (
+				<Popover>
+					<PopoverTrigger>
+						<Badge color={color} style={{ cursor: "pointer" }}>
+							{intl.formatMessage({ id: value })}
+						</Badge>
+					</PopoverTrigger>
+					<PopoverContent>
+						<PopoverArrow />
+						<PopoverBody>
+							<pre className="wrappable error">
+								{row?.original?.errorMessage}
+							</pre>
+						</PopoverBody>
+					</PopoverContent>
+				</Popover>
+			);
+		}
+		return <Badge color={color}>{intl.formatMessage({ id: value })}</Badge>;
+	};
+
+	return formatCell;
+}
+
+function CertificateTypeFormatter() {
+	const formatCell = ({ value }: any) => {
+		let color = "cyan.500";
+		if (value === "dns") {
+			color = "green.400";
+		}
 		return <Badge color={color}>{intl.formatMessage({ id: value })}</Badge>;
 	};
 
@@ -252,6 +294,7 @@ export {
 	BooleanFormatter,
 	CapabilitiesFormatter,
 	CertificateStatusFormatter,
+	CertificateTypeFormatter,
 	DisabledFormatter,
 	DNSProviderFormatter,
 	DomainsFormatter,

frontend/src/index.scss

@@ -29,6 +29,19 @@ span.monospace {
 	font-family: monospace;
 }
 
+pre {
+	&.wrappable {
+		white-space: pre-wrap;       /* Since CSS 2.1 */
+		white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+		white-space: -pre-wrap;      /* Opera 4-6 */
+		white-space: -o-pre-wrap;    /* Opera 7 */
+		word-wrap: break-word;       /* Internet Explorer 5.5+ */
+	}
+	&.error {
+		color: rgb(245, 101, 101); /* red.500 */
+	}
+}
+
 /* helpdoc */
 .helpdoc-body {
 	p {

frontend/src/locale/src/en.json

@@ -410,6 +410,9 @@
 	"disabled": {
 		"defaultMessage": "Disabled"
 	},
+	"dns": {
+		"defaultMessage": "DNS"
+	},
 	"dns-provider.acmesh-name": {
 		"defaultMessage": "Acme.sh Provider"
 	},
@@ -449,6 +452,9 @@
 	"error.user-disabled": {
 		"defaultMessage": "Account is disabled"
 	},
+	"failed": {
+		"defaultMessage": "Failed"
+	},
 	"filter.apply": {
 		"defaultMessage": "Apply"
 	},
@@ -536,6 +542,9 @@
 	"hosts.title": {
 		"defaultMessage": "Hosts"
 	},
+	"http": {
+		"defaultMessage": "HTTP"
+	},
 	"http-https": {
 		"defaultMessage": "HTTP/HTTPS"
 	},
@@ -584,6 +593,9 @@
 	"ready": {
 		"defaultMessage": "Ready"
 	},
+	"requesting": {
+		"defaultMessage": "Requesting"
+	},
 	"restricted-access": {
 		"defaultMessage": "Restricted Access"
 	},

frontend/src/pages/Certificates/CertificatesTable.tsx

@@ -4,6 +4,7 @@ import {
 	tableEvents,
 	ActionsFormatter,
 	CertificateStatusFormatter,
+	CertificateTypeFormatter,
 	GravatarFormatter,
 	IDFormatter,
 	MonospaceFormatter,
@@ -67,13 +68,12 @@ function CertificatesTable({
 				Header: intl.formatMessage({ id: "column.validation-type" }),
 				accessor: "type",
 				sortable: true,
-				Filter: TextFilter,
+				Cell: CertificateTypeFormatter(),
 			},
 			{
 				Header: intl.formatMessage({ id: "column.status" }),
 				accessor: "status",
 				sortable: true,
-				Filter: TextFilter,
 				Cell: CertificateStatusFormatter(),
 			},
 			{