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

Conform hosts table

Browse Source
This commit is contained in:
Jamie Curnow
2023-01-16 15:33:04 +10:00
parent 4ff911def0
commit af9349d4a7
8 changed files with 355 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/pages/Hosts/HostsTable.tsx → frontend/src/pages/Hosts/Table.tsx
View File

@ -18,33 +18,22 @@ import { intl } from "locale";
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 HostsTableProps {
export interface TableProps {
data: any;
pagination: TablePagination;
sortBy: TableSortBy[];
filters: TableFilter[];
onTableEvent: any;
}
function HostsTable({
function Table({
data,
pagination,
onTableEvent,
sortBy,
filters,
}: HostsTableProps) {
}: TableProps) {
const [columns, tableData] = useMemo(() => {
const columns: any[] = [
const columns: any = [
{
accessor: "user.gravatarUrl",
Cell: GravatarFormatter(),
@ -82,7 +71,15 @@ function HostsTable({
{
id: "actions",
accessor: "id",
Cell: ActionsFormatter(rowActions),
Cell: ActionsFormatter([
{
title: intl.formatMessage({ id: "action.edit" }),
onClick: (e: any, data: any) => {
alert(JSON.stringify(data, null, 2));
},
icon: <FiEdit />,
},
]),
className: "w-80",
},
];
@ -162,4 +159,4 @@ function HostsTable({
return <TableLayout pagination={pagination} {...tableInstance} />;
}
export { HostsTable };
export default Table;

97
frontend/src/pages/Hosts/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 { useHosts } 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 } = useHosts(
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-host-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;

97
frontend/src/pages/Hosts/index.tsx
View File

@ -1,95 +1,30 @@
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 { useHosts } from "hooks";
import { Heading, HStack } from "@chakra-ui/react";
import { HelpDrawer, PrettyButton } from "components";
import { intl } from "locale";
import { HostCreateModal } from "modals";
import { HostsTable } from "./HostsTable";
const initialState = {
offset: 0,
limit: 10,
sortBy: [
{
id: "domain_names",
desc: false,
},
],
filters: [],
};
import TableWrapper from "./TableWrapper";
function Hosts() {
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
tableEventReducer,
initialState,
);
const [tableData, setTableData] = useState(null);
const { isFetching, isLoading, error, data } = useHosts(
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-host-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 (
<>
<HStack mx={6} my={4} justifyContent="space-between">
<Heading mb={2}>{intl.formatMessage({ id: "hosts.title" })}</Heading>
<PrettyButton size="sm">
{intl.formatMessage({ id: "create-host" })}
</PrettyButton>
<HStack>
<HelpDrawer section="Hosts" />
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
{intl.formatMessage({ id: "host.create" })}
</PrettyButton>
</HStack>
</HStack>
<HostsTable
data={data?.items || []}
pagination={pagination}
sortBy={sortBy}
filters={filters}
onTableEvent={dispatch}
<TableWrapper onCreateClick={() => setCreateShown(true)} />
<HostCreateModal
isOpen={createShown}
onClose={() => setCreateShown(false)}
/>
</>
);