Basis for Upstreams UI

Author: jc21

frontend/src/Router.tsx

@@ -18,6 +18,7 @@ const NginxTemplates = lazy(() => import("pages/NginxTemplates"));
 const Login = lazy(() => import("pages/Login"));
 const GeneralSettings = lazy(() => import("pages/Settings"));
 const Setup = lazy(() => import("pages/Setup"));
+const Upstreams = lazy(() => import("pages/Upstreams"));
 const Users = lazy(() => import("pages/Users"));
 
 function Router() {
@@ -56,6 +57,7 @@ function Router() {
 				<Suspense fallback={Spinner}>
 					<Routes>
 						<Route path="/hosts" element={<Hosts />} />
+						<Route path="/upstreams" element={<Upstreams />} />
 						<Route path="/ssl/certificates" element={<Certificates />} />
 						<Route
 							path="/ssl/authorities"

frontend/src/api/npm/getUpstreams.ts

@@ -0,0 +1,19 @@
+import * as api from "./base";
+import { UpstreamsResponse } from "./responseTypes";
+
+export async function getUpstreams(
+	offset = 0,
+	limit = 10,
+	sort?: string,
+	filters?: { [key: string]: string },
+	abortController?: AbortController,
+): Promise<UpstreamsResponse> {
+	const { result } = await api.get(
+		{
+			url: "upstreams",
+			params: { limit, offset, sort, expand: "user", ...filters },
+		},
+		abortController,
+	);
+	return result;
+}

frontend/src/api/npm/index.ts

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

frontend/src/api/npm/models.ts

@@ -120,3 +120,28 @@ export interface NginxTemplate {
 	type: string;
 	template: string;
 }
+
+export interface Upstream {
+	// todo
+	id: number;
+	createdOn: number;
+	modifiedOn: number;
+	userId: number;
+	type: string;
+	nginxTemplateId: number;
+	listenInterface: number;
+	domainNames: string[];
+	upstreamId: number;
+	certificateId: number;
+	accessListId: number;
+	sslForced: boolean;
+	cachingEnabled: boolean;
+	blockExploits: boolean;
+	allowWebsocketUpgrade: boolean;
+	http2Support: boolean;
+	hstsEnabled: boolean;
+	hstsSubdomains: boolean;
+	paths: string;
+	advancedConfig: string;
+	isDisabled: boolean;
+}

frontend/src/api/npm/responseTypes.ts

@@ -7,6 +7,7 @@ import {
 	Setting,
 	Sort,
 	User,
+	Upstream,
 } from "./models";
 
 export interface BaseResponse {
@@ -56,3 +57,7 @@ export interface HostsResponse extends BaseResponse {
 export interface NginxTemplatesResponse extends BaseResponse {
 	items: NginxTemplate[];
 }
+
+export interface UpstreamsResponse extends BaseResponse {
+	items: Upstream[];
+}

frontend/src/components/Table/Formatters.tsx

@@ -185,6 +185,30 @@ function HostStatusFormatter() {
 	return formatCell;
 }
 
+function UpstreamStatusFormatter() {
+	const formatCell = ({ value, row }: any) => {
+		if (value === "ready") {
+			return (
+				<Badge color="cyan.500">{intl.formatMessage({ id: "ready" })}</Badge>
+			);
+		}
+		if (value === "ok") {
+			return (
+				<Badge color="green.500">{intl.formatMessage({ id: "ok" })}</Badge>
+			);
+		}
+		if (value === "error") {
+			return (
+				<Tooltip label={row.original.errorMessage}>
+					<Badge color="red.500">{intl.formatMessage({ id: "error" })}</Badge>
+				</Tooltip>
+			);
+		}
+	};
+
+	return formatCell;
+}
+
 function HostTypeFormatter() {
 	const formatCell = ({ value }: any) => {
 		return intl.formatMessage({ id: `host-type.${value}` });
@@ -222,4 +246,5 @@ export {
 	HostTypeFormatter,
 	IDFormatter,
 	SecondsFormatter,
+	UpstreamStatusFormatter,
 };

frontend/src/hooks/index.ts

@@ -8,5 +8,6 @@ export * from "./useHealth";
 export * from "./useHosts";
 export * from "./useNginxTemplates";
 export * from "./useSettings";
+export * from "./useUpstreams";
 export * from "./useUser";
 export * from "./useUsers";

frontend/src/hooks/useUpstreams.ts

@@ -0,0 +1,41 @@
+import {
+	getUpstreams,
+	HostsResponse,
+	tableSortToAPI,
+	tableFiltersToAPI,
+} from "api/npm";
+import { useQuery } from "react-query";
+
+const fetchUpstreams = (
+	offset = 0,
+	limit = 10,
+	sortBy?: any,
+	filters?: any,
+) => {
+	return getUpstreams(
+		offset,
+		limit,
+		tableSortToAPI(sortBy),
+		tableFiltersToAPI(filters),
+	);
+};
+
+const useUpstreams = (
+	offset = 0,
+	limit = 10,
+	sortBy?: any,
+	filters?: any,
+	options = {},
+) => {
+	return useQuery<HostsResponse, Error>(
+		["upstreams", { offset, limit, sortBy, filters }],
+		() => fetchUpstreams(offset, limit, sortBy, filters),
+		{
+			keepPreviousData: true,
+			staleTime: 15 * 1000, // 15 seconds
+			...options,
+		},
+	);
+};
+
+export { fetchUpstreams, useUpstreams };

frontend/src/locale/src/de.json

@@ -80,6 +80,9 @@
 	"column.name": {
 		"defaultMessage": "Name"
 	},
+	"column.servers": {
+		"defaultMessage": "Servers"
+	},
 	"column.status": {
 		"defaultMessage": "Status"
 	},
@@ -116,6 +119,12 @@
 	"create-host-title": {
 		"defaultMessage": "Es gibt keine Proxy-Hosts"
 	},
+	"create-upstream": {
+		"defaultMessage": "Create Upstream"
+	},
+	"create-upstream-title": {
+		"defaultMessage": "There are no Upstreams"
+	},
 	"dashboard.title": {
 		"defaultMessage": "Armaturenbrett"
 	},
@@ -257,6 +266,9 @@
 	"no-access": {
 		"defaultMessage": "Kein Zugang"
 	},
+	"ok": {
+		"defaultMessage": "OK"
+	},
 	"password.confirm": {
 		"defaultMessage": "Bestätige neues Passwort"
 	},

frontend/src/locale/src/en.json

@@ -254,6 +254,9 @@
 	"column.name": {
 		"defaultMessage": "Name"
 	},
+	"column.servers": {
+		"defaultMessage": "Servers"
+	},
 	"column.status": {
 		"defaultMessage": "Status"
 	},
@@ -290,6 +293,12 @@
 	"create-host-title": {
 		"defaultMessage": "There are no Proxy Hosts"
 	},
+	"create-upstream": {
+		"defaultMessage": "Create Upstream"
+	},
+	"create-upstream-title": {
+		"defaultMessage": "There are no Upstreams"
+	},
 	"dashboard.title": {
 		"defaultMessage": "Dashboard"
 	},
@@ -446,6 +455,9 @@
 	"no-access": {
 		"defaultMessage": "No Access"
 	},
+	"ok": {
+		"defaultMessage": "OK"
+	},
 	"password.confirm": {
 		"defaultMessage": "Confirm New Password"
 	},