Improvements for certificates table, adds expansion object to certificates

frontend/src/api/npm/getCertificates.ts

@@ -11,7 +11,7 @@ export async function getCertificates(
 	const { result } = await api.get(
 		{
 			url: "certificates",
-			params: { limit, offset, sort, ...filters },
+			params: { limit, offset, sort, expand: "user", ...filters },
 		},
 		abortController,
 	);

frontend/src/components/Monospace.tsx

@@ -0,0 +1,11 @@
+import { Text, TextProps } from "@chakra-ui/react";
+
+function Monospace(props: TextProps) {
+	return (
+		<Text as="span" className="monospace" {...props}>
+			{props.children}
+		</Text>
+	);
+}
+
+export { Monospace };

frontend/src/components/Table/Formatters.tsx

@@ -1,5 +1,5 @@
 import { Avatar, Badge, Text, Tooltip } from "@chakra-ui/react";
-import { RowAction, RowActionsMenu } from "components";
+import { Monospace, RowAction, RowActionsMenu } from "components";
 import { intl } from "locale";
 import getNiceDNSProvider from "modules/Acmesh";
 
@@ -73,13 +73,19 @@ function CapabilitiesFormatter() {
 
 function CertificateStatusFormatter() {
 	const formatCell = ({ value }: any) => {
-		return (
-			<Badge color={value ? "cyan.500" : "red.400"}>
-				{value
-					? intl.formatMessage({ id: "ready" })
-					: intl.formatMessage({ id: "setup-required" })}
-			</Badge>
-		);
+		let color = "cyan.500";
+		switch (value) {
+			case "failed":
+				color = "red.400";
+				break;
+			case "provided":
+				color = "green.400";
+				break;
+			case "requesting":
+				color = "yellow.400";
+				break;
+		}
+		return <Badge color={color}>{intl.formatMessage({ id: value })}</Badge>;
 	};
 
 	return formatCell;
@@ -185,6 +191,14 @@ function HostStatusFormatter() {
 	return formatCell;
 }
 
+function MonospaceFormatter() {
+	const formatCell = ({ value }: any) => {
+		return <Monospace>{value}</Monospace>;
+	};
+
+	return formatCell;
+}
+
 function UpstreamStatusFormatter() {
 	const formatCell = ({ value, row }: any) => {
 		if (value === "ready") {
@@ -245,6 +259,7 @@ export {
 	HostStatusFormatter,
 	HostTypeFormatter,
 	IDFormatter,
+	MonospaceFormatter,
 	SecondsFormatter,
 	UpstreamStatusFormatter,
 };

frontend/src/components/index.ts

@@ -5,6 +5,7 @@ export * from "./HelpDrawer";
 export * from "./Loader";
 export * from "./Loading";
 export * from "./LocalePicker";
+export * from "./Monospace";
 export * from "./Navigation";
 export * from "./Permissions";
 export * from "./PrettyButton";

frontend/src/index.scss

@@ -25,6 +25,10 @@ table td.w-80 {
 	width: 80px;
 }
 
+span.monospace {
+	font-family: monospace;
+}
+
 /* helpdoc */
 .helpdoc-body {
 	p {

frontend/src/pages/Certificates/CertificatesTable.tsx

@@ -3,7 +3,10 @@ import { useEffect, useMemo } from "react";
 import {
 	tableEvents,
 	ActionsFormatter,
+	CertificateStatusFormatter,
+	GravatarFormatter,
 	IDFormatter,
+	MonospaceFormatter,
 	TableFilter,
 	TableLayout,
 	TablePagination,
@@ -41,6 +44,11 @@ function CertificatesTable({
 }: CertificatesTableProps) {
 	const [columns, tableData] = useMemo(() => {
 		const columns = [
+			{
+				accessor: "user.gravatarUrl",
+				Cell: GravatarFormatter(),
+				className: "w-80",
+			},
 			{
 				Header: intl.formatMessage({ id: "column.id" }),
 				accessor: "id",
@@ -53,6 +61,7 @@ function CertificatesTable({
 				accessor: "name",
 				sortable: true,
 				Filter: TextFilter,
+				Cell: MonospaceFormatter(),
 			},
 			{
 				Header: intl.formatMessage({ id: "column.validation-type" }),
@@ -65,6 +74,7 @@ function CertificatesTable({
 				accessor: "status",
 				sortable: true,
 				Filter: TextFilter,
+				Cell: CertificateStatusFormatter(),
 			},
 			{
 				id: "actions",