@inventreedb/ui 0.0.1

package/src/tables/settings/ErrorTable.tsx

@@ -0,0 +1,170 @@
+import { t } from '@lingui/core/macro';
+import { Group, Loader, Stack, Table, Text } from '@mantine/core';
+import { useCallback, useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { CopyButton } from '../../components/buttons/CopyButton';
+import { DetailDrawer } from '../../components/nav/DetailDrawer';
+import { useDeleteApiFormModal } from '../../hooks/UseForm';
+import { useInstance } from '../../hooks/UseInstance';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction } from '../RowActions';
+
+function ErrorDetail({ errorId }: Readonly<{ errorId?: number }>) {
+  const { id } = useParams();
+
+  const errorPrimaryKey = useMemo(() => {
+    return errorId ?? id;
+  }, [errorId, id]);
+
+  const errorInstance = useInstance({
+    endpoint: ApiEndpoints.error_report_list,
+    pk: errorPrimaryKey,
+    defaultValue: {},
+    hasPrimaryKey: true,
+    refetchOnMount: true
+  });
+
+  const error = useMemo(
+    () => errorInstance.instance || {},
+    [errorInstance.instance]
+  );
+
+  if (
+    errorInstance.instanceQuery.isFetching ||
+    errorInstance.instanceQuery.isLoading
+  ) {
+    return <Loader />;
+  }
+
+  return (
+    <Stack gap='xs'>
+      <Table>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Th>{t`Message`}</Table.Th>
+            <Table.Td>{error.info}</Table.Td>
+            <Table.Td>
+              <Group justify='right'>
+                <CopyButton value={error.info} size='sm' />
+              </Group>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t`Timestamp`}</Table.Th>
+            <Table.Td>{error.when}</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t`Path`}</Table.Th>
+            <Table.Td>{error.path}</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t`Traceback`}</Table.Th>
+            <Table.Td colSpan={2}>
+              <Group justify='right'>
+                <CopyButton value={error.data} size='sm' />
+              </Group>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td colSpan={2}>
+              <Stack gap={3}>
+                {error.data?.split('\n').map((line: string, index: number) => (
+                  <Text size='xs' key={`error-line-${index}`}>
+                    {line}
+                  </Text>
+                ))}
+              </Stack>
+            </Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>
+    </Stack>
+  );
+}
+
+/*
+ * Table for display server error information
+ */
+export default function ErrorReportTable() {
+  const table = useTable('error-report');
+  const user = useUserState();
+  const navigate = useNavigate();
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'when',
+        title: t`When`,
+        sortable: true
+      },
+      {
+        accessor: 'path',
+        title: t`Path`,
+        sortable: true
+      },
+      {
+        accessor: 'info',
+        title: t`Error Information`
+      }
+    ];
+  }, []);
+
+  const [selectedError, setSelectedError] = useState<any>({});
+
+  const deleteErrorModal = useDeleteApiFormModal({
+    url: ApiEndpoints.error_report_list,
+    pk: selectedError.pk,
+    title: t`Delete Error Report`,
+    preFormContent: (
+      <Text c='red'>{t`Are you sure you want to delete this error report?`}</Text>
+    ),
+    successMessage: t`Error report deleted`,
+    table: table
+  });
+
+  const rowActions = useCallback((record: any): RowAction[] => {
+    return [
+      RowDeleteAction({
+        onClick: () => {
+          setSelectedError(record);
+          deleteErrorModal.open();
+        }
+      })
+    ];
+  }, []);
+
+  return (
+    <>
+      {deleteErrorModal.modal}
+      <DetailDrawer
+        title={t`Error Details`}
+        size={'xl'}
+        renderContent={(pk) => {
+          if (!pk) return;
+
+          return <ErrorDetail errorId={selectedError.pk} />;
+        }}
+      />
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.error_report_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          enableBulkDelete: user.isStaff(),
+          enableSelection: true,
+          rowActions: rowActions,
+          onRowClick: (row) => {
+            setSelectedError(row);
+            navigate(`${row.pk}/`);
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/tables/settings/ExportSessionTable.tsx

@@ -0,0 +1,60 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { t } from '@lingui/core/macro';
+import { useMemo } from 'react';
+import { AttachmentLink } from '../../components/items/AttachmentLink';
+import { RenderUser } from '../../components/render/User';
+import { useTable } from '../../hooks/UseTable';
+import type { TableColumn } from '../Column';
+import { DateColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+export default function ExportSessionTable() {
+  const table = useTable('exportsession');
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'output',
+        sortable: false,
+        render: (record: any) => <AttachmentLink attachment={record.output} />
+      },
+      {
+        accessor: 'output_type',
+        title: t`Output Type`,
+        sortable: true
+      },
+      {
+        accessor: 'plugin',
+        title: t`Plugin`,
+        sortable: true
+      },
+      DateColumn({
+        accessor: 'created',
+        title: t`Exported On`,
+        sortable: true
+      }),
+      {
+        accessor: 'user',
+        sortable: true,
+        title: t`User`,
+        render: (record: any) => RenderUser({ instance: record.user_detail })
+      }
+    ];
+  }, []);
+
+  return (
+    <>
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.data_output)}
+        tableState={table}
+        columns={columns}
+        props={{
+          enableBulkDelete: true,
+          enableSelection: true,
+          enableSearch: false
+        }}
+      />
+    </>
+  );
+}

package/src/tables/settings/FailedTasksTable.tsx

@@ -0,0 +1,103 @@
+import { t } from '@lingui/core/macro';
+import { Drawer, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import { useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { StylishText } from '../../components/items/StylishText';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+export default function FailedTasksTable({
+  onRecordsUpdated
+}: Readonly<{
+  onRecordsUpdated: () => void;
+}>) {
+  const table = useTable('tasks-failed');
+  const user = useUserState();
+
+  const [error, setError] = useState<string>('');
+
+  const [opened, { open, close }] = useDisclosure(false);
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'func',
+        title: t`Task`,
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'pk',
+        title: t`Task ID`
+      },
+      {
+        accessor: 'started',
+        title: t`Started`,
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'stopped',
+        title: t`Stopped`,
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'attempt_count',
+        title: t`Attempts`
+      }
+    ];
+  }, []);
+
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        size='xl'
+        position='right'
+        title={<StylishText>{t`Error Details`}</StylishText>}
+        onClose={close}
+      >
+        {error.split('\n').map((line: string, index: number) => {
+          return (
+            <Text key={`error-${index}`} size='sm'>
+              {line}
+            </Text>
+          );
+        })}
+      </Drawer>
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.task_failed_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          enableBulkDelete: user.isStaff(),
+          afterBulkDelete: onRecordsUpdated,
+          enableSelection: true,
+          onRowClick: (row: any) => {
+            if (row.result) {
+              setError(row.result);
+              open();
+            } else {
+              hideNotification('failed-task');
+              showNotification({
+                id: 'failed-task',
+                title: t`No Information`,
+                message: t`No error details are available for this task`,
+                color: 'red',
+                icon: <IconExclamationCircle />
+              });
+            }
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/tables/settings/GroupTable.tsx

@@ -0,0 +1,240 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  Accordion,
+  Group,
+  LoadingOverlay,
+  Pill,
+  PillGroup,
+  Stack,
+  Text
+} from '@mantine/core';
+import { useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import AdminButton from '../../components/buttons/AdminButton';
+import { EditApiForm } from '../../components/forms/ApiForm';
+import { StylishText } from '../../components/items/StylishText';
+import { DetailDrawer } from '../../components/nav/DetailDrawer';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal
+} from '../../hooks/UseForm';
+import { useInstance } from '../../hooks/UseInstance';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+export interface GroupDetailI {
+  pk: number;
+  name: string;
+}
+
+export function GroupDrawer({
+  id,
+  refreshTable
+}: Readonly<{
+  id: string;
+  refreshTable: () => void;
+}>) {
+  const {
+    instance,
+    refreshInstance,
+    instanceQuery: { isFetching, error }
+  } = useInstance({
+    endpoint: ApiEndpoints.group_list,
+    pk: id,
+    throwError: true,
+    params: {
+      permission_detail: true
+    }
+  });
+
+  const permissionsAccordion = useMemo(() => {
+    if (!instance?.permissions) return null;
+
+    const data = instance.permissions;
+    return (
+      <Accordion w={'100%'}>
+        {Object.keys(data).map((key) => (
+          <Accordion.Item key={key} value={key}>
+            <Accordion.Control>
+              <Pill>{instance.permissions[key].length}</Pill> {key}
+            </Accordion.Control>
+            <Accordion.Panel>
+              <PillGroup>
+                {data[key].map((perm: string) => (
+                  <Pill key={perm}>{perm}</Pill>
+                ))}
+              </PillGroup>
+            </Accordion.Panel>
+          </Accordion.Item>
+        ))}
+      </Accordion>
+    );
+  }, [instance]);
+
+  if (isFetching) {
+    return <LoadingOverlay visible={true} />;
+  }
+
+  if (error) {
+    return (
+      <Text>
+        {(error as any)?.response?.status === 404 ? (
+          <Trans>Group with id {id} not found</Trans>
+        ) : (
+          <Trans>An error occurred while fetching group details</Trans>
+        )}
+      </Text>
+    );
+  }
+
+  return (
+    <Stack>
+      <EditApiForm
+        props={{
+          url: ApiEndpoints.group_list,
+          pk: id,
+          fields: {
+            name: {}
+          },
+          onFormSuccess: () => {
+            refreshTable();
+            refreshInstance();
+          }
+        }}
+        id={`group-detail-drawer-${id}`}
+      />
+      <Group justify='space-between'>
+        <StylishText size='md'>
+          <Trans>Permission set</Trans>
+        </StylishText>
+        <AdminButton model={ModelType.group} id={instance.pk} />
+      </Group>
+      <Group>{permissionsAccordion}</Group>
+    </Stack>
+  );
+}
+
+/**
+ * Table for displaying list of groups
+ */
+export function GroupTable({
+  directLink = false
+}: Readonly<{ directLink?: boolean }>) {
+  const table = useTable('groups');
+  const navigate = useNavigate();
+  const user = useUserState();
+
+  const openDetailDrawer = useCallback(
+    (pk: number) => {
+      if (user.hasChangePermission(ModelType.group)) {
+        navigate(`group-${pk}/`);
+      }
+    },
+    [user]
+  );
+
+  const columns: TableColumn<GroupDetailI>[] = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        sortable: true,
+        title: t`Name`,
+        switchable: false
+      }
+    ];
+  }, []);
+
+  const rowActions = useCallback(
+    (record: GroupDetailI): RowAction[] => {
+      return [
+        RowEditAction({
+          onClick: () => openDetailDrawer(record.pk),
+          hidden: !user.hasChangePermission(ModelType.group)
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeletePermission(ModelType.group),
+          onClick: () => {
+            setSelectedGroup(record.pk);
+            deleteGroup.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const [selectedGroup, setSelectedGroup] = useState<number>(-1);
+
+  const deleteGroup = useDeleteApiFormModal({
+    url: ApiEndpoints.group_list,
+    pk: selectedGroup,
+    title: t`Delete group`,
+    successMessage: t`Group deleted`,
+    table: table,
+    preFormWarning: t`Are you sure you want to delete this group?`
+  });
+
+  const newGroup = useCreateApiFormModal({
+    url: ApiEndpoints.group_list,
+    title: t`Add group`,
+    fields: { name: {} },
+    table: table
+  });
+
+  const tableActions = useMemo(() => {
+    const actions = [];
+
+    actions.push(
+      <AddItemButton
+        key={'add-group'}
+        onClick={() => newGroup.open()}
+        tooltip={t`Add group`}
+        hidden={!user.hasAddPermission(ModelType.group)}
+      />
+    );
+
+    return actions;
+  }, [user]);
+
+  return (
+    <>
+      {newGroup.modal}
+      {deleteGroup.modal}
+      <DetailDrawer
+        title={t`Edit group`}
+        renderContent={(id) => {
+          if (!id || !id.startsWith('group-')) return false;
+          return (
+            <GroupDrawer
+              id={id.replace('group-', '')}
+              refreshTable={table.refreshTable}
+            />
+          );
+        }}
+      />
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.group_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          rowActions: directLink ? undefined : rowActions,
+          tableActions: tableActions,
+          onRowClick: directLink
+            ? undefined
+            : (record) => openDetailDrawer(record.pk),
+
+          modelType: ModelType.group
+        }}
+      />
+    </>
+  );
+}