bastion/nginx-proxy-manager
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Certificates table compliance and other stuff

Browse Source
This commit is contained in:
Jamie Curnow
2023-01-16 14:57:14 +10:00
parent 9a5cbbba49
commit e890bfcf10
16 changed files with 666 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/pages/AccessLists/TableWrapper.tsx
View File

@ -1,7 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useAccessLists } from "hooks";
import { intl } from "locale";
@ -63,6 +68,11 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
<EmptyList
title={intl.formatMessage({ id: "create-access-list-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5} onClick={onCreateClick}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}

2
frontend/src/pages/AccessLists/index.tsx
View File

@ -17,7 +17,7 @@ function AccessLists() {
{intl.formatMessage({ id: "access-lists.title" })}
</Heading>
<HStack>
<HelpDrawer section="Access-Lists" />
<HelpDrawer section="AccessLists" />
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
{intl.formatMessage({ id: "access-list.create" })}
</PrettyButton>

47
frontend/src/pages/Certificates/CertificatesTable.tsx → frontend/src/pages/Certificates/Table.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo } from "react";
import { useEffect, useMemo, useState } from "react";
import {
tableEvents,
@ -15,34 +15,25 @@ import {
TextFilter,
} from "components";
import { intl } from "locale";
import { CertificateEditModal } from "modals";
import { FiEdit } 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 CertificatesTableProps {
export interface TableProps {
data: any;
pagination: TablePagination;
sortBy: TableSortBy[];
filters: TableFilter[];
onTableEvent: any;
}
function CertificatesTable({
function Table({
data,
pagination,
onTableEvent,
sortBy,
filters,
}: CertificatesTableProps) {
}: TableProps) {
const [editId, setEditId] = useState(0);
const [columns, tableData] = useMemo(() => {
const columns = [
{
@ -79,8 +70,17 @@ function CertificatesTable({
{
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 />,
disabled: (data: any) => data.isReadonly,
},
]),
},
];
return [columns, data];
@ -156,7 +156,18 @@ function CertificatesTable({
});
}, [onTableEvent, tableInstance.state.filters]);
return <TableLayout pagination={pagination} {...tableInstance} />;
return (
<>
<TableLayout pagination={pagination} {...tableInstance} />
{editId ? (
<CertificateEditModal
isOpen
editId={editId}
onClose={() => setEditId(0)}
/>
) : null}
</>
);
}
export { CertificatesTable };
export default Table;

97
frontend/src/pages/Certificates/TableWrapper.tsx Normal file
View File

@ -0,0 +1,97 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useCertificates } 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 } = useCertificates(
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-certificate-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5} onClick={onCreateClick}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}
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;

96
frontend/src/pages/Certificates/index.tsx
View File

@ -1,79 +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 { useCertificates } from "hooks";
import { Heading, HStack } from "@chakra-ui/react";
import { HelpDrawer, PrettyButton } from "components";
import { intl } from "locale";
import { CertificateCreateModal } from "modals";
import { CertificatesTable } from "./CertificatesTable";
const initialState = {
offset: 0,
limit: 10,
sortBy: [
{
id: "name",
desc: false,
},
],
filters: [],
};
import TableWrapper from "./TableWrapper";
function Certificates() {
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
tableEventReducer,
initialState,
);
const [tableData, setTableData] = useState(null);
const { isFetching, isLoading, error, data } = useCertificates(
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 />;
}
if (data?.total === 0 && filters?.length === 0) {
return (
<EmptyList
title={intl.formatMessage({ id: "create-certificate-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 (
<>
@ -81,16 +16,17 @@ function Certificates() {
<Heading mb={2}>
{intl.formatMessage({ id: "certificates.title" })}
</Heading>
<PrettyButton size="sm">
{intl.formatMessage({ id: "create-certificate" })}
</PrettyButton>
<HStack>
<HelpDrawer section="Certificates" />
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
{intl.formatMessage({ id: "certificate.create" })}
</PrettyButton>
</HStack>
</HStack>
<CertificatesTable
data={data?.items || []}
pagination={pagination}
sortBy={sortBy}
filters={filters}
onTableEvent={dispatch}
<TableWrapper onCreateClick={() => setCreateShown(true)} />
<CertificateCreateModal
isOpen={createShown}
onClose={() => setCreateShown(false)}
/>
</>
);

12
frontend/src/pages/DNSProviders/TableWrapper.tsx
View File

@ -1,7 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useDNSProviders } from "hooks";
import { intl } from "locale";
@ -63,6 +68,11 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
<EmptyList
title={intl.formatMessage({ id: "create-dns-provider-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5} onClick={onCreateClick}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}

16
frontend/src/pages/NginxTemplates/index.tsx
View File

@ -1,7 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
import { PrettyButton, SpinnerPage, tableEventReducer } from "components";
import {
HelpDrawer,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useNginxTemplates } from "hooks";
import { intl } from "locale";
@ -62,9 +67,12 @@ function NginxTemplates() {
<Heading mb={2}>
{intl.formatMessage({ id: "nginx-templates.title" })}
</Heading>
<PrettyButton size="sm">
{intl.formatMessage({ id: "create-nginx-template" })}
</PrettyButton>
<HStack>
<HelpDrawer section="NginxTemplates" />
<PrettyButton size="sm">
{intl.formatMessage({ id: "create-nginx-template" })}
</PrettyButton>
</HStack>
</HStack>
<NginxTemplatesTable
data={data?.items || []}

12
frontend/src/pages/Upstreams/TableWrapper.tsx
View File

@ -1,7 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useUpstreams } from "hooks";
import { intl } from "locale";
@ -63,6 +68,11 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
<EmptyList
title={intl.formatMessage({ id: "create-upstream-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5} onClick={onCreateClick}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}