mirror of
https://github.com/inventree/InvenTree.git
synced 2025-04-28 11:36:44 +00:00
[PUI] Machines table refactor (#8352)
* Reorganize MachineManagementPanel - Use Accordion - More consistent with PluginManagementPanel * Code cleanup * Refactor machine drawer display * Refactor MachineTypeDetailDrawer
This commit is contained in:
Oliver
GitHub
parent
9f9afa1593
commit
328472701d
@ -1,18 +1,20 @@
|
||||
import { Trans } from '@lingui/macro';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Accordion,
|
||||
ActionIcon,
|
||||
Alert,
|
||||
Code,
|
||||
Group,
|
||||
List,
|
||||
Space,
|
||||
Stack,
|
||||
Text,
|
||||
Title
|
||||
Text
|
||||
} from '@mantine/core';
|
||||
import { IconRefresh } from '@tabler/icons-react';
|
||||
import { IconInfoCircle, IconRefresh } from '@tabler/icons-react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { api } from '../../../../App';
|
||||
import { StylishText } from '../../../../components/items/StylishText';
|
||||
import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
|
||||
import { apiUrl } from '../../../../states/ApiState';
|
||||
import { MachineListTable } from '../../../../tables/machine/MachineListTable';
|
||||
@ -32,36 +34,66 @@ export default function MachineManagementPanel() {
|
||||
staleTime: 10 * 1000
|
||||
});
|
||||
|
||||
const hasErrors = useMemo(() => {
|
||||
return (
|
||||
<Stack>
|
||||
registryStatus?.registry_errors &&
|
||||
registryStatus.registry_errors.length > 0
|
||||
);
|
||||
}, [registryStatus]);
|
||||
|
||||
return (
|
||||
<Accordion multiple defaultValue={['machinelist', 'machinetypes']}>
|
||||
<Accordion.Item value="machinelist">
|
||||
<Accordion.Control>
|
||||
<StylishText size="lg">{t`Machines`}</StylishText>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<MachineListTable props={{}} />
|
||||
|
||||
<Space h="10px" />
|
||||
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={5}>
|
||||
<Trans>Machine types</Trans>
|
||||
</Title>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="machinetypes">
|
||||
<Accordion.Control>
|
||||
<StylishText size="lg">{t`Machine Types`}</StylishText>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<MachineTypeListTable props={{}} />
|
||||
</Stack>
|
||||
|
||||
<Space h="10px" />
|
||||
|
||||
<Stack gap={'xs'}>
|
||||
<Group>
|
||||
<Title order={5}>
|
||||
<Trans>Machine Error Stack</Trans>
|
||||
</Title>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="machineerrors">
|
||||
<Accordion.Control>
|
||||
<StylishText size="lg">{t`Machine Errors`}</StylishText>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Stack gap="xs">
|
||||
<Group
|
||||
justify="space-beteen"
|
||||
wrap="nowrap"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{hasErrors ? (
|
||||
<Alert
|
||||
flex={10}
|
||||
color="red"
|
||||
title={t`Registry Registry Errors`}
|
||||
icon={<IconInfoCircle />}
|
||||
>
|
||||
<Text>{t`There are machine registry errors`}</Text>
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert
|
||||
flex={10}
|
||||
color="green"
|
||||
title={t`Machine Registry Errors`}
|
||||
icon={<IconInfoCircle />}
|
||||
>
|
||||
<Text>{t`There are no machine registry errors`}</Text>
|
||||
</Alert>
|
||||
)}
|
||||
<ActionIcon variant="outline" onClick={() => refetch()}>
|
||||
<IconRefresh />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
{registryStatus?.registry_errors &&
|
||||
registryStatus.registry_errors.length === 0 ? (
|
||||
<Text style={{ fontStyle: 'italic' }}>
|
||||
<Trans>There are no machine registry errors.</Trans>
|
||||
</Text>
|
||||
) : (
|
||||
{hasErrors && (
|
||||
<List>
|
||||
{registryStatus?.registry_errors?.map((error, i) => (
|
||||
<List.Item key={i}>
|
||||
@ -71,6 +103,8 @@ export default function MachineManagementPanel() {
|
||||
</List>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Trans, t } from '@lingui/macro';
|
||||
import {
|
||||
ActionIcon,
|
||||
Accordion,
|
||||
Badge,
|
||||
Box,
|
||||
Card,
|
||||
@ -10,7 +10,6 @@ import {
|
||||
Indicator,
|
||||
List,
|
||||
LoadingOverlay,
|
||||
Space,
|
||||
Stack,
|
||||
Text,
|
||||
Title
|
||||
@ -30,6 +29,7 @@ import {
|
||||
OptionsActionDropdown
|
||||
} from '../../components/items/ActionDropdown';
|
||||
import { InfoItem } from '../../components/items/InfoItem';
|
||||
import { StylishText } from '../../components/items/StylishText';
|
||||
import { UnavailableIndicator } from '../../components/items/UnavailableIndicator';
|
||||
import {
|
||||
DetailDrawer,
|
||||
@ -237,13 +237,12 @@ function MachineDrawer({
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack gap="xs">
|
||||
{machineEditModal.modal}
|
||||
{machineDeleteModal.modal}
|
||||
|
||||
<Group justify="space-between">
|
||||
<Box></Box>
|
||||
|
||||
<Group>
|
||||
{machine && <MachineStatusIndicator machine={machine} />}
|
||||
<Title order={4}>{machine?.name}</Title>
|
||||
@ -284,16 +283,17 @@ function MachineDrawer({
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Accordion
|
||||
multiple
|
||||
defaultValue={['machine-info', 'machine-settings', 'driver-settings']}
|
||||
>
|
||||
<Accordion.Item value="machine-info">
|
||||
<Accordion.Control>
|
||||
<StylishText size="lg">{t`Machine Information`}</StylishText>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Card withBorder>
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<Title order={4}>
|
||||
<Trans>Machine information</Trans>
|
||||
</Title>
|
||||
<ActionIcon variant="outline" onClick={() => refetch()}>
|
||||
<IconRefresh />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
<Stack pos="relative" gap="xs">
|
||||
<LoadingOverlay
|
||||
visible={isFetching}
|
||||
@ -322,7 +322,9 @@ function MachineDrawer({
|
||||
) : (
|
||||
<Text>{machine?.driver}</Text>
|
||||
)}
|
||||
{!machine?.is_driver_available && <UnavailableIndicator />}
|
||||
{!machine?.is_driver_available && (
|
||||
<UnavailableIndicator />
|
||||
)}
|
||||
</Group>
|
||||
</InfoItem>
|
||||
<InfoItem name={t`Initialized`}>
|
||||
@ -368,34 +370,43 @@ function MachineDrawer({
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Space h="10px" />
|
||||
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
{machine?.is_driver_available && (
|
||||
<>
|
||||
<Accordion.Item value="machine-settings">
|
||||
<Accordion.Control>
|
||||
<StylishText size="lg">{t`Machine Settings`}</StylishText>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Card withBorder>
|
||||
<Title order={5} pb={4}>
|
||||
<Trans>Machine Settings</Trans>
|
||||
</Title>
|
||||
<MachineSettingList
|
||||
machinePk={machinePk}
|
||||
configType="M"
|
||||
onChange={refreshAll}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
)}
|
||||
{machine?.is_driver_available && (
|
||||
<Accordion.Item value="driver-settings">
|
||||
<Accordion.Control>
|
||||
<StylishText size="lg">{t`Driver Settings`}</StylishText>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Card withBorder>
|
||||
<Title order={5} pb={4}>
|
||||
<Trans>Driver Settings</Trans>
|
||||
</Title>
|
||||
<MachineSettingList
|
||||
machinePk={machinePk}
|
||||
configType="D"
|
||||
onChange={refreshAll}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
)}
|
||||
</Accordion>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -543,8 +554,8 @@ export function MachineListTable({
|
||||
const tableActions = useMemo(() => {
|
||||
return [
|
||||
<AddItemButton
|
||||
key="outline"
|
||||
variant="outline"
|
||||
key="add-machine"
|
||||
tooltip={t`Add machine`}
|
||||
onClick={() => {
|
||||
setCreateFormMachineType(null);
|
||||
createMachineForm.open();
|
||||
@ -558,8 +569,8 @@ export function MachineListTable({
|
||||
{createMachineForm.modal}
|
||||
{renderMachineDrawer && (
|
||||
<DetailDrawer
|
||||
title={t`Machine detail`}
|
||||
size={'lg'}
|
||||
title={t`Machine Detail`}
|
||||
size={'xl'}
|
||||
renderContent={(id) => {
|
||||
if (!id || !id.startsWith('machine-')) return false;
|
||||
return (
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { Trans, t } from '@lingui/macro';
|
||||
import {
|
||||
Accordion,
|
||||
ActionIcon,
|
||||
Alert,
|
||||
Badge,
|
||||
Card,
|
||||
Code,
|
||||
@ -11,11 +13,12 @@ import {
|
||||
Text,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { IconRefresh } from '@tabler/icons-react';
|
||||
import { IconExclamationCircle, IconRefresh } from '@tabler/icons-react';
|
||||
import { useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { InfoItem } from '../../components/items/InfoItem';
|
||||
import { StylishText } from '../../components/items/StylishText';
|
||||
import { DetailDrawer } from '../../components/nav/DetailDrawer';
|
||||
import { ApiEndpoints } from '../../enums/ApiEndpoints';
|
||||
import { useTable } from '../../hooks/UseTable';
|
||||
@ -79,37 +82,49 @@ function MachineTypeDrawer({
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Group justify="center">
|
||||
<Group wrap="nowrap">
|
||||
<Title order={4}>
|
||||
{machineType ? machineType.name : machineTypeSlug}
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{!machineType && (
|
||||
<Text style={{ fontStyle: 'italic' }}>
|
||||
<Trans>Machine type not found.</Trans>
|
||||
</Text>
|
||||
<Alert
|
||||
color="red"
|
||||
title={t`Not Found`}
|
||||
icon={<IconExclamationCircle />}
|
||||
>
|
||||
<Text>{t`Machine type not found.`}</Text>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Accordion
|
||||
multiple
|
||||
defaultValue={['machine-type-info', 'machine-drivers']}
|
||||
>
|
||||
<Accordion.Item value="machine-type-info">
|
||||
<Accordion.Control>
|
||||
<StylishText size="lg">{t`Machine Type Information`}</StylishText>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Card withBorder>
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<Title order={4}>
|
||||
<Trans>Machine type information</Trans>
|
||||
</Title>
|
||||
<ActionIcon variant="outline" onClick={() => refresh()}>
|
||||
<IconRefresh />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
|
||||
<Stack pos="relative" gap="xs">
|
||||
<LoadingOverlay
|
||||
visible={isFetching}
|
||||
overlayProps={{ opacity: 0 }}
|
||||
/>
|
||||
<InfoItem name={t`Name`} value={machineType?.name} type="text" />
|
||||
<InfoItem name={t`Slug`} value={machineType?.slug} type="text" />
|
||||
<InfoItem
|
||||
name={t`Name`}
|
||||
value={machineType?.name}
|
||||
type="text"
|
||||
/>
|
||||
<InfoItem
|
||||
name={t`Slug`}
|
||||
value={machineType?.slug}
|
||||
type="text"
|
||||
/>
|
||||
<InfoItem
|
||||
name={t`Description`}
|
||||
value={machineType?.description}
|
||||
@ -139,15 +154,15 @@ function MachineTypeDrawer({
|
||||
type="boolean"
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="machine-drivers">
|
||||
<Accordion.Control>
|
||||
<StylishText size="lg">{t`Available Drivers`}</StylishText>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Card withBorder>
|
||||
<Stack gap="md">
|
||||
<Title order={4}>
|
||||
<Trans>Available drivers</Trans>
|
||||
</Title>
|
||||
|
||||
<InvenTreeTable
|
||||
url={apiUrl(ApiEndpoints.machine_driver_list)}
|
||||
tableState={table}
|
||||
@ -160,12 +175,16 @@ function MachineTypeDrawer({
|
||||
},
|
||||
enableDownload: false,
|
||||
enableSearch: false,
|
||||
onRowClick: (machine) => navigate(`../driver-${machine.slug}/`)
|
||||
onRowClick: (machine) =>
|
||||
navigate(`../driver-${machine.slug}/`)
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -335,8 +354,8 @@ export function MachineTypeListTable({
|
||||
return (
|
||||
<>
|
||||
<DetailDrawer
|
||||
title={t`Machine type detail`}
|
||||
size={'lg'}
|
||||
title={t`Machine Type Detail`}
|
||||
size={'xl'}
|
||||
renderContent={(id) => {
|
||||
if (!id || !id.startsWith('type-')) return false;
|
||||
return (
|
||||
@ -345,8 +364,8 @@ export function MachineTypeListTable({
|
||||
}}
|
||||
/>
|
||||
<DetailDrawer
|
||||
title={t`Machine driver detail`}
|
||||
size={'lg'}
|
||||
title={t`Machine Driver Detail`}
|
||||
size={'xl'}
|
||||
renderContent={(id) => {
|
||||
if (!id || !id.startsWith('driver-')) return false;
|
||||
return (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user