[PUI] Machines table refactor (#8352)

* Reorganize MachineManagementPanel

- Use Accordion
- More consistent with PluginManagementPanel

* Code cleanup

* Refactor machine drawer display

* Refactor MachineTypeDetailDrawer

src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx

@@ -1,18 +1,20 @@
-import { Trans } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
+  Accordion,
   ActionIcon,
+  Alert,
   Code,
   Group,
   List,
-  Space,
   Stack,
-  Text,
+  Text
-  Title
 } 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={{}} />
-
+        </Accordion.Panel>
-      <Space h="10px" />
+      </Accordion.Item>
-
+      <Accordion.Item value="machinetypes">
-      <Stack gap={'xs'}>
+        <Accordion.Control>
-        <Title order={5}>
+          <StylishText size="lg">{t`Machine Types`}</StylishText>
-          <Trans>Machine types</Trans>
+        </Accordion.Control>
-        </Title>
+        <Accordion.Panel>
           <MachineTypeListTable props={{}} />
-      </Stack>
+        </Accordion.Panel>
-
+      </Accordion.Item>
-      <Space h="10px" />
+      <Accordion.Item value="machineerrors">
-
+        <Accordion.Control>
-      <Stack gap={'xs'}>
+          <StylishText size="lg">{t`Machine Errors`}</StylishText>
-        <Group>
+        </Accordion.Control>
-          <Title order={5}>
+        <Accordion.Panel>
-            <Trans>Machine Error Stack</Trans>
+          <Stack gap="xs">
-          </Title>
+            <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 &&
+            {hasErrors && (
-        registryStatus.registry_errors.length === 0 ? (
-          <Text style={{ fontStyle: 'italic' }}>
-            <Trans>There are no machine registry errors.</Trans>
-          </Text>
-        ) : (
               <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>
   );
 }

src/frontend/src/tables/machine/MachineListTable.tsx

@@ -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"
+        key="add-machine"
-        variant="outline"
+        tooltip={t`Add machine`}
         onClick={() => {
           setCreateFormMachineType(null);
           createMachineForm.open();
@@ -558,8 +569,8 @@ export function MachineListTable({
       {createMachineForm.modal}
       {renderMachineDrawer && (
         <DetailDrawer
-          title={t`Machine detail`}
+          title={t`Machine Detail`}
-          size={'lg'}
+          size={'xl'}
           renderContent={(id) => {
             if (!id || !id.startsWith('machine-')) return false;
             return (

src/frontend/src/tables/machine/MachineTypeTable.tsx

@@ -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' }}>
+          <Alert
-          <Trans>Machine type not found.</Trans>
+            color="red"
-        </Text>
+            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
-            <InfoItem name={t`Slug`} value={machineType?.slug} type="text" />
+                    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`}
+        title={t`Machine Type Detail`}
-        size={'lg'}
+        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`}
+        title={t`Machine Driver Detail`}
-        size={'lg'}
+        size={'xl'}
         renderContent={(id) => {
           if (!id || !id.startsWith('driver-')) return false;
           return (