Table improvements, add modals

Author: jc21

frontend/package.json

@@ -15,6 +15,7 @@
 		"@types/react": "18.0.15",
 		"@types/react-dom": "18.0.6",
 		"@types/react-router-dom": "5.3.3",
+		"@types/react-syntax-highlighter": "^15.5.6",
 		"@types/react-table": "^7.7.12",
 		"@types/styled-components": "5.1.25",
 		"@typescript-eslint/eslint-plugin": "^5.30.6",
@@ -57,6 +58,7 @@
 		"react-query": "^3.39.1",
 		"react-router-dom": "^6.3.0",
 		"react-scripts": "5.0.1",
+		"react-syntax-highlighter": "^15.5.0",
 		"react-table": "7.8.0",
 		"rooks": "5.11.8",
 		"tmp": "^0.2.1",

frontend/src/api/npm/getUpstreamNginxConfig.ts

@@ -0,0 +1,12 @@
+import * as api from "./base";
+
+export async function getUpstreamNginxConfig(
+	id: number,
+	params = {},
+): Promise<string> {
+	const { result } = await api.get({
+		url: `/upstreams/${id}/nginx-config`,
+		params,
+	});
+	return result;
+}

frontend/src/api/npm/index.ts

@@ -13,6 +13,7 @@ export * from "./getHosts";
 export * from "./getNginxTemplates";
 export * from "./getSettings";
 export * from "./getToken";
+export * from "./getUpstreamNginxConfig";
 export * from "./getUpstreams";
 export * from "./getUser";
 export * from "./getUsers";

frontend/src/components/Table/Formatters.tsx

@@ -13,6 +13,8 @@ import { Monospace, RowAction, RowActionsMenu } from "components";
 import { intl } from "locale";
 import getNiceDNSProvider from "modules/Acmesh";
 
+const errorColor = "red.400";
+
 function ActionsFormatter(rowActions: RowAction[]) {
 	const formatCell = (instance: any) => {
 		return <RowActionsMenu data={instance.row.original} actions={rowActions} />;
@@ -24,7 +26,7 @@ function ActionsFormatter(rowActions: RowAction[]) {
 function BooleanFormatter() {
 	const formatCell = ({ value }: any) => {
 		return (
-			<Badge color={value ? "cyan.500" : "red.400"}>
+			<Badge color={value ? "cyan.500" : errorColor}>
 				{value ? "true" : "false"}
 			</Badge>
 		);
@@ -86,7 +88,7 @@ function CertificateStatusFormatter() {
 		let color = "cyan.500";
 		switch (value) {
 			case "failed":
-				color = "red.400";
+				color = errorColor;
 				break;
 			case "provided":
 				color = "green.400";
@@ -137,7 +139,7 @@ function DisabledFormatter() {
 	const formatCell = ({ value, row }: any) => {
 		if (row?.original?.isDisabled) {
 			return (
-				<Text color="red.500">
+				<Text color={errorColor}>
 					<Tooltip label={intl.formatMessage({ id: "user.disabled" })}>
 						{value}
 					</Tooltip>
@@ -173,7 +175,7 @@ function DomainsFormatter() {
 				</>
 			);
 		}
-		return <Badge color="red.400">No domains!</Badge>;
+		return <Badge color={errorColor}>No domains!</Badge>;
 	};
 
 	return formatCell;
@@ -191,7 +193,9 @@ function HostStatusFormatter() {
 	const formatCell = ({ row }: any) => {
 		if (row.original.isDisabled) {
 			return (
-				<Badge color="red.400">{intl.formatMessage({ id: "disabled" })}</Badge>
+				<Badge color={errorColor}>
+					{intl.formatMessage({ id: "disabled" })}
+				</Badge>
 			);
 		}
 
@@ -209,7 +213,9 @@ function HostStatusFormatter() {
 			if (row.original.certificate.status === "error") {
 				return (
 					<Tooltip label={row.original.certificate.errorMessage}>
-						<Badge color="red.400">{intl.formatMessage({ id: "error" })}</Badge>
+						<Badge color={errorColor}>
+							{intl.formatMessage({ id: "error" })}
+						</Badge>
 					</Tooltip>
 				);
 			}
@@ -255,9 +261,21 @@ function UpstreamStatusFormatter() {
 		}
 		if (value === "error") {
 			return (
-				<Tooltip label={row.original.errorMessage}>
-					<Badge color="red.500">{intl.formatMessage({ id: "error" })}</Badge>
-				</Tooltip>
+				<Popover>
+					<PopoverTrigger>
+						<Badge color={errorColor} style={{ cursor: "pointer" }}>
+							{intl.formatMessage({ id: "error" })}
+						</Badge>
+					</PopoverTrigger>
+					<PopoverContent>
+						<PopoverArrow />
+						<PopoverBody>
+							<pre className="wrappable error">
+								{row?.original?.errorMessage}
+							</pre>
+						</PopoverBody>
+					</PopoverContent>
+				</Popover>
 			);
 		}
 	};

frontend/src/hooks/index.ts

@@ -9,6 +9,7 @@ export * from "./useHealth";
 export * from "./useHosts";
 export * from "./useNginxTemplates";
 export * from "./useSettings";
+export * from "./useUpstreamNginxConfig";
 export * from "./useUpstreams";
 export * from "./useUser";
 export * from "./useUsers";

frontend/src/hooks/useUpstreamNginxConfig.ts

@@ -0,0 +1,19 @@
+import { getUpstreamNginxConfig } from "api/npm";
+import { useQuery } from "react-query";
+
+const fetchUpstreamNginxConfig = (id: any) => {
+	return getUpstreamNginxConfig(id);
+};
+
+const useUpstreamNginxConfig = (id: number, options = {}) => {
+	return useQuery<string, Error>(
+		["upstream-nginx-config", id],
+		() => fetchUpstreamNginxConfig(id),
+		{
+			staleTime: 30 * 1000, // 30 seconds
+			...options,
+		},
+	);
+};
+
+export { useUpstreamNginxConfig };

frontend/src/locale/src/en.json

@@ -1,4 +1,7 @@
 {
+	"access-list.create": {
+		"defaultMessage": "Create Access List"
+	},
 	"access-lists.title": {
 		"defaultMessage": "Access Lists"
 	},
@@ -242,6 +245,9 @@
 	"action.edit": {
 		"defaultMessage": "Edit"
 	},
+	"action.nginx-config": {
+		"defaultMessage": "View Nginx Config"
+	},
 	"action.set-password": {
 		"defaultMessage": "Set Password"
 	},
@@ -372,7 +378,7 @@
 		"defaultMessage": "Wildcard Support"
 	},
 	"create-access-list-title": {
-		"defaultMessage": "Create Access List"
+		"defaultMessage": "There are no Access Lists"
 	},
 	"create-certificate": {
 		"defaultMessage": "Create Certificate"
@@ -398,9 +404,6 @@
 	"create-host-title": {
 		"defaultMessage": "There are no Proxy Hosts"
 	},
-	"create-upstream": {
-		"defaultMessage": "Create Upstream"
-	},
 	"create-upstream-title": {
 		"defaultMessage": "There are no Upstreams"
 	},
@@ -521,6 +524,9 @@
 	"general-settings.title": {
 		"defaultMessage": "General Settings"
 	},
+	"nginx-config": {
+		"defaultMessage": "Nginx Config"
+	},
 	"nginx-templates.title": {
 		"defaultMessage": "Nginx Templates"
 	},
@@ -653,6 +659,9 @@
 	"unhealthy.title": {
 		"defaultMessage": "Nginx Proxy Manager is unhealthy"
 	},
+	"upstream.create": {
+		"defaultMessage": "Create Upstream"
+	},
 	"upstreams.title": {
 		"defaultMessage": "Upstreams"
 	},