Table improvements, add modals
This commit is contained in:
Jamie Curnow
12
frontend/src/api/npm/getUpstreamNginxConfig.ts
Normal file
12
frontend/src/api/npm/getUpstreamNginxConfig.ts
Normal file
@ -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;
|
||||
}
|
||||
@ -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";
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -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";
|
||||
|
||||
19
frontend/src/hooks/useUpstreamNginxConfig.ts
Normal file
19
frontend/src/hooks/useUpstreamNginxConfig.ts
Normal file
@ -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 };
|
||||
@ -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"
|
||||
},
|
||||
|
||||
222
frontend/src/modals/AccessListCreateModal.tsx
Normal file
222
frontend/src/modals/AccessListCreateModal.tsx
Normal file
@ -0,0 +1,222 @@
|
||||
// TODO
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { CertificateAuthority } from "api/npm";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { useSetCertificateAuthority } from "hooks";
|
||||
import { intl } from "locale";
|
||||
import { validateNumber, validateString } from "modules/Validations";
|
||||
|
||||
interface AccessListCreateModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function AccessListCreateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: AccessListCreateModalProps) {
|
||||
const toast = useToast();
|
||||
const { mutate: setCertificateAuthority } = useSetCertificateAuthority();
|
||||
|
||||
const onSubmit = async (
|
||||
payload: CertificateAuthority,
|
||||
{ setErrors, setSubmitting }: any,
|
||||
) => {
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
setCertificateAuthority(payload, {
|
||||
onError: (err: any) => {
|
||||
if (err.message === "ca-bundle-does-not-exist") {
|
||||
setErrors({
|
||||
caBundle: intl.formatMessage({
|
||||
id: `error.${err.message}`,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
showErr(err.message);
|
||||
}
|
||||
},
|
||||
onSuccess: () => onClose(),
|
||||
onSettled: () => setSubmitting(false),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
name: "",
|
||||
acmeshServer: "",
|
||||
caBundle: "",
|
||||
maxDomains: 5,
|
||||
isWildcardSupported: false,
|
||||
} as CertificateAuthority
|
||||
}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "certificate-authority.create" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="name" validate={validateString(1, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.name && form.touched.name}>
|
||||
<FormLabel htmlFor="name">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="name"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>{form.errors.name}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="acmeshServer" validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.acmeshServer && form.touched.acmeshServer
|
||||
}>
|
||||
<FormLabel htmlFor="acmeshServer">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.acmesh-server",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="acmeshServer"
|
||||
placeholder="https://example.com/acme/directory"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.acmeshServer}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="caBundle" validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.caBundle && form.touched.caBundle
|
||||
}>
|
||||
<FormLabel htmlFor="caBundle">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.ca-bundle",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="caBundle"
|
||||
placeholder="/path/to/certs/custom-ca-bundle.crt"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.caBundle}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="maxDomains"
|
||||
validate={validateNumber(1)}
|
||||
type="number">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.maxDomains && form.touched.maxDomains
|
||||
}>
|
||||
<FormLabel htmlFor="maxDomains">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.max-domains",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input {...field} id="maxDomains" type="number" />
|
||||
<FormErrorMessage>
|
||||
{form.errors.maxDomains}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="isWildcardSupported" type="checkbox">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isInvalid={
|
||||
form.errors.isWildcardSupported &&
|
||||
form.touched.isWildcardSupported
|
||||
}>
|
||||
<Checkbox
|
||||
{...field}
|
||||
isChecked={field.checked}
|
||||
size="md"
|
||||
colorScheme="green">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.has-wildcard-support",
|
||||
})}
|
||||
</Checkbox>
|
||||
<FormErrorMessage>
|
||||
{form.errors.isWildcardSupported}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { AccessListCreateModal };
|
||||
219
frontend/src/modals/UpstreamCreateModal.tsx
Normal file
219
frontend/src/modals/UpstreamCreateModal.tsx
Normal file
@ -0,0 +1,219 @@
|
||||
// TODO
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { CertificateAuthority } from "api/npm";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { useSetCertificateAuthority } from "hooks";
|
||||
import { intl } from "locale";
|
||||
import { validateNumber, validateString } from "modules/Validations";
|
||||
|
||||
interface UpstreamCreateModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function UpstreamCreateModal({ isOpen, onClose }: UpstreamCreateModalProps) {
|
||||
const toast = useToast();
|
||||
const { mutate: setCertificateAuthority } = useSetCertificateAuthority();
|
||||
|
||||
const onSubmit = async (
|
||||
payload: CertificateAuthority,
|
||||
{ setErrors, setSubmitting }: any,
|
||||
) => {
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
setCertificateAuthority(payload, {
|
||||
onError: (err: any) => {
|
||||
if (err.message === "ca-bundle-does-not-exist") {
|
||||
setErrors({
|
||||
caBundle: intl.formatMessage({
|
||||
id: `error.${err.message}`,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
showErr(err.message);
|
||||
}
|
||||
},
|
||||
onSuccess: () => onClose(),
|
||||
onSettled: () => setSubmitting(false),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
name: "",
|
||||
acmeshServer: "",
|
||||
caBundle: "",
|
||||
maxDomains: 5,
|
||||
isWildcardSupported: false,
|
||||
} as CertificateAuthority
|
||||
}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "certificate-authority.create" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="name" validate={validateString(1, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.name && form.touched.name}>
|
||||
<FormLabel htmlFor="name">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="name"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>{form.errors.name}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="acmeshServer" validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.acmeshServer && form.touched.acmeshServer
|
||||
}>
|
||||
<FormLabel htmlFor="acmeshServer">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.acmesh-server",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="acmeshServer"
|
||||
placeholder="https://example.com/acme/directory"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.acmeshServer}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="caBundle" validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.caBundle && form.touched.caBundle
|
||||
}>
|
||||
<FormLabel htmlFor="caBundle">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.ca-bundle",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="caBundle"
|
||||
placeholder="/path/to/certs/custom-ca-bundle.crt"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.caBundle}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="maxDomains"
|
||||
validate={validateNumber(1)}
|
||||
type="number">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.maxDomains && form.touched.maxDomains
|
||||
}>
|
||||
<FormLabel htmlFor="maxDomains">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.max-domains",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input {...field} id="maxDomains" type="number" />
|
||||
<FormErrorMessage>
|
||||
{form.errors.maxDomains}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="isWildcardSupported" type="checkbox">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isInvalid={
|
||||
form.errors.isWildcardSupported &&
|
||||
form.touched.isWildcardSupported
|
||||
}>
|
||||
<Checkbox
|
||||
{...field}
|
||||
isChecked={field.checked}
|
||||
size="md"
|
||||
colorScheme="green">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.has-wildcard-support",
|
||||
})}
|
||||
</Checkbox>
|
||||
<FormErrorMessage>
|
||||
{form.errors.isWildcardSupported}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { UpstreamCreateModal };
|
||||
241
frontend/src/modals/UpstreamEditModal.tsx
Normal file
241
frontend/src/modals/UpstreamEditModal.tsx
Normal file
@ -0,0 +1,241 @@
|
||||
// TODO
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { CertificateAuthority } from "api/npm";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { useCertificateAuthority, useSetCertificateAuthority } from "hooks";
|
||||
import { intl } from "locale";
|
||||
import { validateNumber, validateString } from "modules/Validations";
|
||||
|
||||
interface UpstreamEditModalProps {
|
||||
editId: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function UpstreamEditModal({
|
||||
editId,
|
||||
isOpen,
|
||||
onClose,
|
||||
}: UpstreamEditModalProps) {
|
||||
const toast = useToast();
|
||||
const { status, data } = useCertificateAuthority(editId);
|
||||
const { mutate: setCertificateAuthority } = useSetCertificateAuthority();
|
||||
|
||||
const onSubmit = async (
|
||||
payload: CertificateAuthority,
|
||||
{ setErrors, setSubmitting }: any,
|
||||
) => {
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
setCertificateAuthority(payload, {
|
||||
onError: (err: any) => {
|
||||
if (err.message === "ca-bundle-does-not-exist") {
|
||||
setErrors({
|
||||
caBundle: intl.formatMessage({
|
||||
id: `error.${err.message}`,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
showErr(err.message);
|
||||
}
|
||||
},
|
||||
onSuccess: () => onClose(),
|
||||
onSettled: () => setSubmitting(false),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={() => {
|
||||
onClose();
|
||||
}}
|
||||
closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
{status === "loading" ? (
|
||||
// todo nicer
|
||||
<p>loading</p>
|
||||
) : (
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
id: data?.id,
|
||||
name: data?.name,
|
||||
acmeshServer: data?.acmeshServer,
|
||||
caBundle: data?.caBundle,
|
||||
maxDomains: data?.maxDomains,
|
||||
isWildcardSupported: data?.isWildcardSupported,
|
||||
} as CertificateAuthority
|
||||
}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "certificate-authority.edit" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="name" validate={validateString(1, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.name && form.touched.name}>
|
||||
<FormLabel htmlFor="name">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="name"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.name}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="acmeshServer"
|
||||
validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.acmeshServer &&
|
||||
form.touched.acmeshServer
|
||||
}>
|
||||
<FormLabel htmlFor="acmeshServer">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.acmesh-server",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="acmeshServer"
|
||||
placeholder="https://example.com/acme/directory"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.acmeshServer}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="caBundle" validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.caBundle && form.touched.caBundle
|
||||
}>
|
||||
<FormLabel htmlFor="caBundle">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.ca-bundle",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="caBundle"
|
||||
placeholder="/path/to/certs/custom-ca-bundle.crt"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.caBundle}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="maxDomains"
|
||||
validate={validateNumber(1)}
|
||||
type="number">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.maxDomains && form.touched.maxDomains
|
||||
}>
|
||||
<FormLabel htmlFor="maxDomains">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.max-domains",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input {...field} id="maxDomains" type="number" />
|
||||
<FormErrorMessage>
|
||||
{form.errors.maxDomains}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="isWildcardSupported" type="checkbox">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isInvalid={
|
||||
form.errors.isWildcardSupported &&
|
||||
form.touched.isWildcardSupported
|
||||
}>
|
||||
<Checkbox
|
||||
{...field}
|
||||
isChecked={field.checked}
|
||||
size="md"
|
||||
colorScheme="green">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.has-wildcard-support",
|
||||
})}
|
||||
</Checkbox>
|
||||
<FormErrorMessage>
|
||||
{form.errors.isWildcardSupported}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { UpstreamEditModal };
|
||||
62
frontend/src/modals/UpstreamNginxConfigModal.tsx
Normal file
62
frontend/src/modals/UpstreamNginxConfigModal.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
} from "@chakra-ui/react";
|
||||
import { useUpstreamNginxConfig } from "hooks";
|
||||
import { intl } from "locale";
|
||||
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import sh from "react-syntax-highlighter/dist/esm/languages/hljs/bash";
|
||||
import nord from "react-syntax-highlighter/dist/esm/styles/hljs/nord";
|
||||
|
||||
interface UpstreamNginxConfigModalProps {
|
||||
upstreamId: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function UpstreamNginxConfigModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
upstreamId,
|
||||
}: UpstreamNginxConfigModalProps) {
|
||||
const { isLoading, data } = useUpstreamNginxConfig(upstreamId);
|
||||
SyntaxHighlighter.registerLanguage("bash", sh);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent maxW="34rem">
|
||||
{isLoading ? (
|
||||
"loading"
|
||||
) : (
|
||||
<>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "nginx-config" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<SyntaxHighlighter
|
||||
language="bash"
|
||||
style={nord}
|
||||
customStyle={{
|
||||
maxWidth: "31rem",
|
||||
fontSize: "80%",
|
||||
borderWidth: "1px",
|
||||
borderColor: "#3C4960",
|
||||
borderRadius: "5px",
|
||||
marginBottom: "16px",
|
||||
}}>
|
||||
{data || ""}
|
||||
</SyntaxHighlighter>
|
||||
</ModalBody>
|
||||
</>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { UpstreamNginxConfigModal };
|
||||
@ -1,3 +1,4 @@
|
||||
export * from "./AccessListCreateModal";
|
||||
export * from "./CertificateAuthorityCreateModal";
|
||||
export * from "./CertificateAuthorityEditModal";
|
||||
export * from "./ChangePasswordModal";
|
||||
@ -5,5 +6,8 @@ export * from "./DNSProviderCreateModal";
|
||||
// export * from "./DNSProviderEditModal.tsx.disabled";
|
||||
export * from "./ProfileModal";
|
||||
export * from "./SetPasswordModal";
|
||||
export * from "./UpstreamCreateModal";
|
||||
export * from "./UpstreamEditModal";
|
||||
export * from "./UpstreamNginxConfigModal";
|
||||
export * from "./UserCreateModal";
|
||||
export * from "./UserEditModal";
|
||||
|
||||
@ -1,15 +1,33 @@
|
||||
import { Heading } from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { Heading, HStack } from "@chakra-ui/react";
|
||||
import { HelpDrawer, PrettyButton } from "components";
|
||||
import { intl } from "locale";
|
||||
import { AccessListCreateModal } from "modals";
|
||||
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
function AccessLists() {
|
||||
const [createShown, setCreateShown] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Heading mb={2}>
|
||||
{intl.formatMessage({ id: "access-lists.title" })}
|
||||
</Heading>
|
||||
<TableWrapper />
|
||||
<HStack mx={6} my={4} justifyContent="space-between">
|
||||
<Heading mb={2}>
|
||||
{intl.formatMessage({ id: "access-lists.title" })}
|
||||
</Heading>
|
||||
<HStack>
|
||||
<HelpDrawer section="Access-Lists" />
|
||||
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
|
||||
{intl.formatMessage({ id: "access-list.create" })}
|
||||
</PrettyButton>
|
||||
</HStack>
|
||||
</HStack>
|
||||
<TableWrapper onCreateClick={() => setCreateShown(true)} />
|
||||
<AccessListCreateModal
|
||||
isOpen={createShown}
|
||||
onClose={() => setCreateShown(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,48 +1,40 @@
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
import {
|
||||
tableEvents,
|
||||
ActionsFormatter,
|
||||
GravatarFormatter,
|
||||
UpstreamStatusFormatter,
|
||||
IDFormatter,
|
||||
TableFilter,
|
||||
TableLayout,
|
||||
TablePagination,
|
||||
TableSortBy,
|
||||
TextFilter,
|
||||
UpstreamStatusFormatter,
|
||||
} from "components";
|
||||
import { intl } from "locale";
|
||||
import { FiEdit } from "react-icons/fi";
|
||||
import { UpstreamEditModal, UpstreamNginxConfigModal } from "modals";
|
||||
import { FiEdit, FiHardDrive } from "react-icons/fi";
|
||||
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
|
||||
|
||||
const rowActions = [
|
||||
{
|
||||
title: intl.formatMessage({ id: "action.edit" }),
|
||||
onClick: (e: any, data: any) => {
|
||||
alert(JSON.stringify(data, null, 2));
|
||||
},
|
||||
icon: <FiEdit />,
|
||||
show: (data: any) => !data.isSystem,
|
||||
},
|
||||
];
|
||||
|
||||
export interface UpstreamsTableProps {
|
||||
export interface TableProps {
|
||||
data: any;
|
||||
pagination: TablePagination;
|
||||
sortBy: TableSortBy[];
|
||||
filters: TableFilter[];
|
||||
onTableEvent: any;
|
||||
}
|
||||
function UpstreamsTable({
|
||||
function Table({
|
||||
data,
|
||||
pagination,
|
||||
onTableEvent,
|
||||
sortBy,
|
||||
filters,
|
||||
}: UpstreamsTableProps) {
|
||||
}: TableProps) {
|
||||
const [editId, setEditId] = useState(0);
|
||||
const [configId, setConfigId] = useState(0);
|
||||
const [columns, tableData] = useMemo(() => {
|
||||
const columns: any[] = [
|
||||
const columns: any = [
|
||||
{
|
||||
accessor: "user.gravatarUrl",
|
||||
Cell: GravatarFormatter(),
|
||||
@ -73,8 +65,19 @@ function UpstreamsTable({
|
||||
{
|
||||
id: "actions",
|
||||
accessor: "id",
|
||||
Cell: ActionsFormatter(rowActions),
|
||||
className: "w-80",
|
||||
Cell: ActionsFormatter([
|
||||
{
|
||||
title: intl.formatMessage({ id: "action.edit" }),
|
||||
onClick: (e: any, { id }: any) => setEditId(id),
|
||||
icon: <FiEdit />,
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: "action.nginx-config" }),
|
||||
onClick: (e: any, { id }: any) => setConfigId(id),
|
||||
icon: <FiHardDrive />,
|
||||
},
|
||||
]),
|
||||
},
|
||||
];
|
||||
return [columns, data];
|
||||
@ -150,7 +153,25 @@ function UpstreamsTable({
|
||||
});
|
||||
}, [onTableEvent, tableInstance.state.filters]);
|
||||
|
||||
return <TableLayout pagination={pagination} {...tableInstance} />;
|
||||
return (
|
||||
<>
|
||||
<TableLayout pagination={pagination} {...tableInstance} />
|
||||
{editId ? (
|
||||
<UpstreamEditModal
|
||||
isOpen
|
||||
editId={editId}
|
||||
onClose={() => setEditId(0)}
|
||||
/>
|
||||
) : null}
|
||||
{configId ? (
|
||||
<UpstreamNginxConfigModal
|
||||
isOpen
|
||||
upstreamId={configId}
|
||||
onClose={() => setConfigId(0)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export { UpstreamsTable };
|
||||
export default Table;
|
||||
87
frontend/src/pages/Upstreams/TableWrapper.tsx
Normal file
87
frontend/src/pages/Upstreams/TableWrapper.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import { useEffect, useReducer, useState } from "react";
|
||||
|
||||
import { Alert, AlertIcon } from "@chakra-ui/react";
|
||||
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
|
||||
import { useUpstreams } from "hooks";
|
||||
import { intl } from "locale";
|
||||
|
||||
import Table from "./Table";
|
||||
|
||||
const initialState = {
|
||||
offset: 0,
|
||||
limit: 10,
|
||||
sortBy: [
|
||||
{
|
||||
id: "name",
|
||||
desc: false,
|
||||
},
|
||||
],
|
||||
filters: [],
|
||||
};
|
||||
|
||||
interface TableWrapperProps {
|
||||
onCreateClick: () => void;
|
||||
}
|
||||
function TableWrapper({ onCreateClick }: TableWrapperProps) {
|
||||
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
|
||||
tableEventReducer,
|
||||
initialState,
|
||||
);
|
||||
|
||||
const [tableData, setTableData] = useState(null);
|
||||
const { isFetching, isLoading, isError, error, data } = useUpstreams(
|
||||
offset,
|
||||
limit,
|
||||
sortBy,
|
||||
filters,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setTableData(data as any);
|
||||
}, [data]);
|
||||
|
||||
if (isFetching || isLoading || !tableData) {
|
||||
return <SpinnerPage />;
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<Alert status="error">
|
||||
<AlertIcon />
|
||||
{error?.message || "Unknown error"}
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
if (isFetching || isLoading || !tableData) {
|
||||
return <SpinnerPage />;
|
||||
}
|
||||
|
||||
// When there are no items and no filters active, show the nicer empty view
|
||||
if (data?.total === 0 && filters?.length === 0) {
|
||||
return (
|
||||
<EmptyList
|
||||
title={intl.formatMessage({ id: "create-upstream-title" })}
|
||||
summary={intl.formatMessage({ id: "create-hint" })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const pagination = {
|
||||
offset: data?.offset || initialState.offset,
|
||||
limit: data?.limit || initialState.limit,
|
||||
total: data?.total || 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<Table
|
||||
data={data?.items || []}
|
||||
pagination={pagination}
|
||||
sortBy={sortBy}
|
||||
filters={filters}
|
||||
onTableEvent={dispatch}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableWrapper;
|
||||
@ -1,80 +1,14 @@
|
||||
import { useEffect, useReducer, useState } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
|
||||
import {
|
||||
EmptyList,
|
||||
PrettyButton,
|
||||
SpinnerPage,
|
||||
tableEventReducer,
|
||||
} from "components";
|
||||
import { useUpstreams } from "hooks";
|
||||
import { Heading, HStack } from "@chakra-ui/react";
|
||||
import { HelpDrawer, PrettyButton } from "components";
|
||||
import { intl } from "locale";
|
||||
import { UpstreamCreateModal } from "modals";
|
||||
|
||||
import { UpstreamsTable } from "./UpstreamsTable";
|
||||
|
||||
const initialState = {
|
||||
offset: 0,
|
||||
limit: 10,
|
||||
sortBy: [
|
||||
{
|
||||
id: "name",
|
||||
desc: false,
|
||||
},
|
||||
],
|
||||
filters: [],
|
||||
};
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
function Upstreams() {
|
||||
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
|
||||
tableEventReducer,
|
||||
initialState,
|
||||
);
|
||||
|
||||
const [tableData, setTableData] = useState(null);
|
||||
const { isFetching, isLoading, error, data } = useUpstreams(
|
||||
offset,
|
||||
limit,
|
||||
sortBy,
|
||||
filters,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setTableData(data as any);
|
||||
}, [data]);
|
||||
|
||||
if (error || (!tableData && !isFetching && !isLoading)) {
|
||||
return (
|
||||
<Alert status="error">
|
||||
<AlertIcon />
|
||||
{error?.message || "Unknown error"}
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
if (isFetching || isLoading || !tableData) {
|
||||
return <SpinnerPage />;
|
||||
}
|
||||
|
||||
// When there are no items and no filters active, show the nicer empty view
|
||||
if (data?.total === 0 && filters?.length === 0) {
|
||||
return (
|
||||
<EmptyList
|
||||
title={intl.formatMessage({ id: "create-upstream-title" })}
|
||||
summary={intl.formatMessage({ id: "create-hint" })}
|
||||
createButton={
|
||||
<PrettyButton mt={5}>
|
||||
{intl.formatMessage({ id: "lets-go" })}
|
||||
</PrettyButton>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const pagination = {
|
||||
offset: data?.offset || initialState.offset,
|
||||
limit: data?.limit || initialState.limit,
|
||||
total: data?.total || 0,
|
||||
};
|
||||
const [createShown, setCreateShown] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -82,16 +16,17 @@ function Upstreams() {
|
||||
<Heading mb={2}>
|
||||
{intl.formatMessage({ id: "upstreams.title" })}
|
||||
</Heading>
|
||||
<PrettyButton size="sm">
|
||||
{intl.formatMessage({ id: "create-upstream" })}
|
||||
</PrettyButton>
|
||||
<HStack>
|
||||
<HelpDrawer section="Upstreams" />
|
||||
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
|
||||
{intl.formatMessage({ id: "upstream.create" })}
|
||||
</PrettyButton>
|
||||
</HStack>
|
||||
</HStack>
|
||||
<UpstreamsTable
|
||||
data={data?.items || []}
|
||||
pagination={pagination}
|
||||
sortBy={sortBy}
|
||||
filters={filters}
|
||||
onTableEvent={dispatch}
|
||||
<TableWrapper onCreateClick={() => setCreateShown(true)} />
|
||||
<UpstreamCreateModal
|
||||
isOpen={createShown}
|
||||
onClose={() => setCreateShown(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user