From 48787427b279ce02f17140c73de0d19bb33608fa Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 24 Oct 2024 03:16:52 +0000
Subject: [PATCH 1/4] Reorganize MachineManagementPanel

- Use Accordion
- More consistent with PluginManagementPanel
---
 .../AdminCenter/MachineManagementPanel.tsx    | 119 +++++++++++-------
 1 file changed, 77 insertions(+), 42 deletions(-)

diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
index 17888e6f28e6..40ab044a13f7 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
@@ -1,18 +1,21 @@
-import { Trans } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import {
+  Accordion,
   ActionIcon,
+  Alert,
   Code,
   Group,
   List,
-  Space,
   Stack,
   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,45 +35,77 @@ export default function MachineManagementPanel() {
     staleTime: 10 * 1000
   });
 
-  return (
-    <Stack>
-      <MachineListTable props={{}} />
-
-      <Space h="10px" />
-
-      <Stack gap={'xs'}>
-        <Title order={5}>
-          <Trans>Machine types</Trans>
-        </Title>
-        <MachineTypeListTable props={{}} />
-      </Stack>
+  const hasErrors = useMemo(() => {
+    return (
+      registryStatus?.registry_errors &&
+      registryStatus.registry_errors.length > 0
+    );
+  }, [registryStatus]);
 
-      <Space h="10px" />
-
-      <Stack gap={'xs'}>
-        <Group>
-          <Title order={5}>
-            <Trans>Machine Error Stack</Trans>
-          </Title>
-          <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>
-        ) : (
-          <List>
-            {registryStatus?.registry_errors?.map((error, i) => (
-              <List.Item key={i}>
-                <Code>{error.message}</Code>
-              </List.Item>
-            ))}
-          </List>
-        )}
-      </Stack>
-    </Stack>
+  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>
+      </Accordion.Item>
+      <Accordion.Item value="machinetypes">
+        <Accordion.Control>
+          <StylishText size="lg">{t`Machine Types`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <MachineTypeListTable props={{}} />
+        </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>
+            {hasErrors && (
+              <List>
+                {registryStatus?.registry_errors?.map((error, i) => (
+                  <List.Item key={i}>
+                    <Code>{error.message}</Code>
+                  </List.Item>
+                ))}
+              </List>
+            )}
+          </Stack>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
   );
 }

From 5ff485c624079b14582d5cfffbd5f77b27a267f3 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 24 Oct 2024 03:17:57 +0000
Subject: [PATCH 2/4] Code cleanup

---
 .../Index/Settings/AdminCenter/MachineManagementPanel.tsx    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
index 40ab044a13f7..c3a292a9c1a5 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
@@ -1,4 +1,4 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
   Accordion,
   ActionIcon,
@@ -7,8 +7,7 @@ import {
   Group,
   List,
   Stack,
-  Text,
-  Title
+  Text
 } from '@mantine/core';
 import { IconInfoCircle, IconRefresh } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';

From 9230282d6cbafdb71d097b16876bd93594a0d3e6 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 24 Oct 2024 03:30:37 +0000
Subject: [PATCH 3/4] Refactor machine drawer display

---
 .../src/tables/machine/MachineListTable.tsx   | 329 +++++++++---------
 1 file changed, 170 insertions(+), 159 deletions(-)

diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx
index 2eb86b1105c1..70fb0ca77adc 100644
--- a/src/frontend/src/tables/machine/MachineListTable.tsx
+++ b/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,165 +237,176 @@ 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>
-        </Group>
+    <>
+      <Stack gap="xs">
+        {machineEditModal.modal}
+        {machineDeleteModal.modal}
+
+        <Group justify="space-between">
+          <Group>
+            {machine && <MachineStatusIndicator machine={machine} />}
+            <Title order={4}>{machine?.name}</Title>
+          </Group>
 
-        <Group>
-          {machine?.restart_required && (
-            <Badge color="red">
-              <Trans>Restart required</Trans>
-            </Badge>
-          )}
-          <OptionsActionDropdown
-            tooltip={t`Machine Actions`}
-            actions={[
-              EditItemAction({
-                tooltip: t`Edit machine`,
-                onClick: machineEditModal.open
-              }),
-              DeleteItemAction({
-                tooltip: t`Delete machine`,
-                onClick: machineDeleteModal.open
-              }),
-              {
-                icon: <IconRefresh />,
-                name: t`Restart`,
-                tooltip:
-                  t`Restart machine` +
-                  (machine?.restart_required
-                    ? ' (' + t`manual restart required` + ')'
-                    : ''),
-                indicator: machine?.restart_required
-                  ? { color: 'red' }
-                  : undefined,
-                onClick: () => machine && restartMachine(machine?.pk)
-              }
-            ]}
-          />
+          <Group>
+            {machine?.restart_required && (
+              <Badge color="red">
+                <Trans>Restart required</Trans>
+              </Badge>
+            )}
+            <OptionsActionDropdown
+              tooltip={t`Machine Actions`}
+              actions={[
+                EditItemAction({
+                  tooltip: t`Edit machine`,
+                  onClick: machineEditModal.open
+                }),
+                DeleteItemAction({
+                  tooltip: t`Delete machine`,
+                  onClick: machineDeleteModal.open
+                }),
+                {
+                  icon: <IconRefresh />,
+                  name: t`Restart`,
+                  tooltip:
+                    t`Restart machine` +
+                    (machine?.restart_required
+                      ? ' (' + t`manual restart required` + ')'
+                      : ''),
+                  indicator: machine?.restart_required
+                    ? { color: 'red' }
+                    : undefined,
+                  onClick: () => machine && restartMachine(machine?.pk)
+                }
+              ]}
+            />
+          </Group>
         </Group>
-      </Group>
 
-      <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}
-              overlayProps={{ opacity: 0 }}
-            />
-            <InfoItem name={t`Machine Type`}>
-              <Group gap="xs">
-                {machineType ? (
-                  <DetailDrawerLink
-                    to={`../type-${machine?.machine_type}`}
-                    text={machineType.name}
+        <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">
+                  <Stack pos="relative" gap="xs">
+                    <LoadingOverlay
+                      visible={isFetching}
+                      overlayProps={{ opacity: 0 }}
+                    />
+                    <InfoItem name={t`Machine Type`}>
+                      <Group gap="xs">
+                        {machineType ? (
+                          <DetailDrawerLink
+                            to={`../type-${machine?.machine_type}`}
+                            text={machineType.name}
+                          />
+                        ) : (
+                          <Text>{machine?.machine_type}</Text>
+                        )}
+                        {machine && !machineType && <UnavailableIndicator />}
+                      </Group>
+                    </InfoItem>
+                    <InfoItem name={t`Machine Driver`}>
+                      <Group gap="xs">
+                        {machineDriver ? (
+                          <DetailDrawerLink
+                            to={`../driver-${machine?.driver}`}
+                            text={machineDriver.name}
+                          />
+                        ) : (
+                          <Text>{machine?.driver}</Text>
+                        )}
+                        {!machine?.is_driver_available && (
+                          <UnavailableIndicator />
+                        )}
+                      </Group>
+                    </InfoItem>
+                    <InfoItem name={t`Initialized`}>
+                      <YesNoButton value={machine?.initialized || false} />
+                    </InfoItem>
+                    <InfoItem name={t`Active`}>
+                      <YesNoButton value={machine?.active || false} />
+                    </InfoItem>
+                    <InfoItem name={t`Status`}>
+                      <Flex direction="column">
+                        {machine?.status === -1 ? (
+                          <Text fz="xs">No status</Text>
+                        ) : (
+                          StatusRenderer({
+                            status: `${machine?.status || -1}`,
+                            type: `MachineStatus__${machine?.status_model}` as any
+                          })
+                        )}
+                        <Text fz="sm">{machine?.status_text}</Text>
+                      </Flex>
+                    </InfoItem>
+                    <Group justify="space-between" gap="xs">
+                      <Text fz="sm" fw={700}>
+                        <Trans>Errors</Trans>:
+                      </Text>
+                      {machine && machine?.machine_errors.length > 0 ? (
+                        <Badge color="red" style={{ marginLeft: '10px' }}>
+                          {machine?.machine_errors.length}
+                        </Badge>
+                      ) : (
+                        <Text fz="xs">
+                          <Trans>No errors reported</Trans>
+                        </Text>
+                      )}
+                      <List w="100%">
+                        {machine?.machine_errors.map((error, i) => (
+                          <List.Item key={i}>
+                            <Code>{error}</Code>
+                          </List.Item>
+                        ))}
+                      </List>
+                    </Group>
+                  </Stack>
+                </Stack>
+              </Card>
+            </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>
+                  <MachineSettingList
+                    machinePk={machinePk}
+                    configType="M"
+                    onChange={refreshAll}
                   />
-                ) : (
-                  <Text>{machine?.machine_type}</Text>
-                )}
-                {machine && !machineType && <UnavailableIndicator />}
-              </Group>
-            </InfoItem>
-            <InfoItem name={t`Machine Driver`}>
-              <Group gap="xs">
-                {machineDriver ? (
-                  <DetailDrawerLink
-                    to={`../driver-${machine?.driver}`}
-                    text={machineDriver.name}
+                </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>
+                  <MachineSettingList
+                    machinePk={machinePk}
+                    configType="D"
+                    onChange={refreshAll}
                   />
-                ) : (
-                  <Text>{machine?.driver}</Text>
-                )}
-                {!machine?.is_driver_available && <UnavailableIndicator />}
-              </Group>
-            </InfoItem>
-            <InfoItem name={t`Initialized`}>
-              <YesNoButton value={machine?.initialized || false} />
-            </InfoItem>
-            <InfoItem name={t`Active`}>
-              <YesNoButton value={machine?.active || false} />
-            </InfoItem>
-            <InfoItem name={t`Status`}>
-              <Flex direction="column">
-                {machine?.status === -1 ? (
-                  <Text fz="xs">No status</Text>
-                ) : (
-                  StatusRenderer({
-                    status: `${machine?.status || -1}`,
-                    type: `MachineStatus__${machine?.status_model}` as any
-                  })
-                )}
-                <Text fz="sm">{machine?.status_text}</Text>
-              </Flex>
-            </InfoItem>
-            <Group justify="space-between" gap="xs">
-              <Text fz="sm" fw={700}>
-                <Trans>Errors</Trans>:
-              </Text>
-              {machine && machine?.machine_errors.length > 0 ? (
-                <Badge color="red" style={{ marginLeft: '10px' }}>
-                  {machine?.machine_errors.length}
-                </Badge>
-              ) : (
-                <Text fz="xs">
-                  <Trans>No errors reported</Trans>
-                </Text>
-              )}
-              <List w="100%">
-                {machine?.machine_errors.map((error, i) => (
-                  <List.Item key={i}>
-                    <Code>{error}</Code>
-                  </List.Item>
-                ))}
-              </List>
-            </Group>
-          </Stack>
-        </Stack>
-      </Card>
-      <Space h="10px" />
-
-      {machine?.is_driver_available && (
-        <>
-          <Card withBorder>
-            <Title order={5} pb={4}>
-              <Trans>Machine Settings</Trans>
-            </Title>
-            <MachineSettingList
-              machinePk={machinePk}
-              configType="M"
-              onChange={refreshAll}
-            />
-          </Card>
-
-          <Card withBorder>
-            <Title order={5} pb={4}>
-              <Trans>Driver Settings</Trans>
-            </Title>
-            <MachineSettingList
-              machinePk={machinePk}
-              configType="D"
-              onChange={refreshAll}
-            />
-          </Card>
-        </>
-      )}
-    </Stack>
+                </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,7 +569,7 @@ export function MachineListTable({
       {createMachineForm.modal}
       {renderMachineDrawer && (
         <DetailDrawer
-          title={t`Machine detail`}
+          title={t`Machine Detail`}
           size={'lg'}
           renderContent={(id) => {
             if (!id || !id.startsWith('machine-')) return false;

From 95e5ef638a0016b27f02144ab657900c3e0e3337 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 24 Oct 2024 03:48:27 +0000
Subject: [PATCH 4/4] Refactor MachineTypeDetailDrawer

---
 .../src/tables/machine/MachineListTable.tsx   |   2 +-
 .../src/tables/machine/MachineTypeTable.tsx   | 197 ++++++++++--------
 2 files changed, 109 insertions(+), 90 deletions(-)

diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx
index 70fb0ca77adc..a851ca096f0d 100644
--- a/src/frontend/src/tables/machine/MachineListTable.tsx
+++ b/src/frontend/src/tables/machine/MachineListTable.tsx
@@ -570,7 +570,7 @@ export function MachineListTable({
       {renderMachineDrawer && (
         <DetailDrawer
           title={t`Machine Detail`}
-          size={'lg'}
+          size={'xl'}
           renderContent={(id) => {
             if (!id || !id.startsWith('machine-')) return false;
             return (
diff --git a/src/frontend/src/tables/machine/MachineTypeTable.tsx b/src/frontend/src/tables/machine/MachineTypeTable.tsx
index 5e224d34d4d5..19acaead82c0 100644
--- a/src/frontend/src/tables/machine/MachineTypeTable.tsx
+++ b/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,93 +82,109 @@ function MachineTypeDrawer({
   );
 
   return (
-    <Stack>
-      <Group justify="center">
-        <Title order={4}>
-          {machineType ? machineType.name : machineTypeSlug}
-        </Title>
-      </Group>
-
-      {!machineType && (
-        <Text style={{ fontStyle: 'italic' }}>
-          <Trans>Machine type not found.</Trans>
-        </Text>
-      )}
-
-      <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`Description`}
-              value={machineType?.description}
-              type="text"
-            />
-            {!machineType?.is_builtin && (
-              <InfoItem
-                name={t`Provider plugin`}
-                value={machineType?.provider_plugin?.name}
-                type="text"
-                link={
-                  machineType?.provider_plugin?.pk !== null
-                    ? `../../plugin/${machineType?.provider_plugin?.pk}/`
-                    : undefined
-                }
-                detailDrawerLink
-              />
-            )}
-            <InfoItem
-              name={t`Provider file`}
-              value={machineType?.provider_file}
-              type="code"
-            />
-            <InfoItem
-              name={t`Builtin`}
-              value={machineType?.is_builtin}
-              type="boolean"
-            />
-          </Stack>
-        </Stack>
-      </Card>
-
-      <Card withBorder>
-        <Stack gap="md">
+    <>
+      <Stack>
+        <Group wrap="nowrap">
           <Title order={4}>
-            <Trans>Available drivers</Trans>
+            {machineType ? machineType.name : machineTypeSlug}
           </Title>
+        </Group>
 
-          <InvenTreeTable
-            url={apiUrl(ApiEndpoints.machine_driver_list)}
-            tableState={table}
-            columns={machineDriverTableColumns}
-            props={{
-              dataFormatter: (data: any) => {
-                return data.filter(
-                  (d: any) => d.machine_type === machineTypeSlug
-                );
-              },
-              enableDownload: false,
-              enableSearch: false,
-              onRowClick: (machine) => navigate(`../driver-${machine.slug}/`)
-            }}
-          />
-        </Stack>
-      </Card>
-    </Stack>
+        {!machineType && (
+          <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 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`Description`}
+                    value={machineType?.description}
+                    type="text"
+                  />
+                  {!machineType?.is_builtin && (
+                    <InfoItem
+                      name={t`Provider plugin`}
+                      value={machineType?.provider_plugin?.name}
+                      type="text"
+                      link={
+                        machineType?.provider_plugin?.pk !== null
+                          ? `../../plugin/${machineType?.provider_plugin?.pk}/`
+                          : undefined
+                      }
+                      detailDrawerLink
+                    />
+                  )}
+                  <InfoItem
+                    name={t`Provider file`}
+                    value={machineType?.provider_file}
+                    type="code"
+                  />
+                  <InfoItem
+                    name={t`Builtin`}
+                    value={machineType?.is_builtin}
+                    type="boolean"
+                  />
+                </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>
+                <InvenTreeTable
+                  url={apiUrl(ApiEndpoints.machine_driver_list)}
+                  tableState={table}
+                  columns={machineDriverTableColumns}
+                  props={{
+                    dataFormatter: (data: any) => {
+                      return data.filter(
+                        (d: any) => d.machine_type === machineTypeSlug
+                      );
+                    },
+                    enableDownload: false,
+                    enableSearch: false,
+                    onRowClick: (machine) =>
+                      navigate(`../driver-${machine.slug}/`)
+                  }}
+                />
+              </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 (