diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
index 17888e6f28e6..c3a292a9c1a5 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
+++ b/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,
- 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,45 +34,77 @@ export default function MachineManagementPanel() {
staleTime: 10 * 1000
});
- return (
-
-
-
-
-
-
-
- <Trans>Machine types</Trans>
-
-
-
+ const hasErrors = useMemo(() => {
+ return (
+ registryStatus?.registry_errors &&
+ registryStatus.registry_errors.length > 0
+ );
+ }, [registryStatus]);
-
-
-
-
-
- <Trans>Machine Error Stack</Trans>
-
- refetch()}>
-
-
-
- {registryStatus?.registry_errors &&
- registryStatus.registry_errors.length === 0 ? (
-
- There are no machine registry errors.
-
- ) : (
-
- {registryStatus?.registry_errors?.map((error, i) => (
-
- {error.message}
-
- ))}
-
- )}
-
-
+ return (
+
+
+
+ {t`Machines`}
+
+
+
+
+
+
+
+ {t`Machine Types`}
+
+
+
+
+
+
+
+ {t`Machine Errors`}
+
+
+
+
+ {hasErrors ? (
+ }
+ >
+ {t`There are machine registry errors`}
+
+ ) : (
+ }
+ >
+ {t`There are no machine registry errors`}
+
+ )}
+ refetch()}>
+
+
+
+ {hasErrors && (
+
+ {registryStatus?.registry_errors?.map((error, i) => (
+
+ {error.message}
+
+ ))}
+
+ )}
+
+
+
+
);
}
diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx
index 2eb86b1105c1..a851ca096f0d 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 (
-
- {machineEditModal.modal}
- {machineDeleteModal.modal}
-
-
-
-
-
- {machine && }
- {machine?.name}
-
+ <>
+
+ {machineEditModal.modal}
+ {machineDeleteModal.modal}
+
+
+
+ {machine && }
+ {machine?.name}
+
-
- {machine?.restart_required && (
-
- Restart required
-
- )}
- ,
- 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)
- }
- ]}
- />
+
+ {machine?.restart_required && (
+
+ Restart required
+
+ )}
+ ,
+ 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)
+ }
+ ]}
+ />
+
-
-
-
-
-
- <Trans>Machine information</Trans>
-
- refetch()}>
-
-
-
-
-
-
-
- {machineType ? (
-
+
+
+ {t`Machine Information`}
+
+
+
+
+
+
+
+
+ {machineType ? (
+
+ ) : (
+ {machine?.machine_type}
+ )}
+ {machine && !machineType && }
+
+
+
+
+ {machineDriver ? (
+
+ ) : (
+ {machine?.driver}
+ )}
+ {!machine?.is_driver_available && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {machine?.status === -1 ? (
+ No status
+ ) : (
+ StatusRenderer({
+ status: `${machine?.status || -1}`,
+ type: `MachineStatus__${machine?.status_model}` as any
+ })
+ )}
+ {machine?.status_text}
+
+
+
+
+ Errors:
+
+ {machine && machine?.machine_errors.length > 0 ? (
+
+ {machine?.machine_errors.length}
+
+ ) : (
+
+ No errors reported
+
+ )}
+
+ {machine?.machine_errors.map((error, i) => (
+
+ {error}
+
+ ))}
+
+
+
+
+
+
+
+ {machine?.is_driver_available && (
+
+
+ {t`Machine Settings`}
+
+
+
+
- ) : (
- {machine?.machine_type}
- )}
- {machine && !machineType && }
-
-
-
-
- {machineDriver ? (
-
+
+
+ )}
+ {machine?.is_driver_available && (
+
+
+ {t`Driver Settings`}
+
+
+
+
- ) : (
- {machine?.driver}
- )}
- {!machine?.is_driver_available && }
-
-
-
-
-
-
-
-
-
-
- {machine?.status === -1 ? (
- No status
- ) : (
- StatusRenderer({
- status: `${machine?.status || -1}`,
- type: `MachineStatus__${machine?.status_model}` as any
- })
- )}
- {machine?.status_text}
-
-
-
-
- Errors:
-
- {machine && machine?.machine_errors.length > 0 ? (
-
- {machine?.machine_errors.length}
-
- ) : (
-
- No errors reported
-
- )}
-
- {machine?.machine_errors.map((error, i) => (
-
- {error}
-
- ))}
-
-
-
-
-
-
-
- {machine?.is_driver_available && (
- <>
-
-
- <Trans>Machine Settings</Trans>
-
-
-
-
-
-
- <Trans>Driver Settings</Trans>
-
-
-
-
- )}
-
+
+
+
+ )}
+
+
+
);
}
@@ -543,8 +554,8 @@ export function MachineListTable({
const tableActions = useMemo(() => {
return [
{
setCreateFormMachineType(null);
createMachineForm.open();
@@ -558,8 +569,8 @@ export function MachineListTable({
{createMachineForm.modal}
{renderMachineDrawer && (
{
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 (
-
-
-
- {machineType ? machineType.name : machineTypeSlug}
-
-
-
- {!machineType && (
-
- Machine type not found.
-
- )}
-
-
-
-
-
- <Trans>Machine type information</Trans>
-
- refresh()}>
-
-
-
-
-
-
-
-
-
- {!machineType?.is_builtin && (
-
- )}
-
-
-
-
-
-
-
-
+ <>
+
+
- <Trans>Available drivers</Trans>
+ {machineType ? machineType.name : machineTypeSlug}
+
- {
- return data.filter(
- (d: any) => d.machine_type === machineTypeSlug
- );
- },
- enableDownload: false,
- enableSearch: false,
- onRowClick: (machine) => navigate(`../driver-${machine.slug}/`)
- }}
- />
-
-
-
+ {!machineType && (
+ }
+ >
+ {t`Machine type not found.`}
+
+ )}
+
+
+
+
+ {t`Machine Type Information`}
+
+
+
+
+
+
+
+
+ {!machineType?.is_builtin && (
+
+ )}
+
+
+
+
+
+
+
+
+ {t`Available Drivers`}
+
+
+
+ {
+ return data.filter(
+ (d: any) => d.machine_type === machineTypeSlug
+ );
+ },
+ enableDownload: false,
+ enableSearch: false,
+ onRowClick: (machine) =>
+ navigate(`../driver-${machine.slug}/`)
+ }}
+ />
+
+
+
+
+
+
);
}
@@ -335,8 +354,8 @@ export function MachineTypeListTable({
return (
<>
{
if (!id || !id.startsWith('type-')) return false;
return (
@@ -345,8 +364,8 @@ export function MachineTypeListTable({
}}
/>
{
if (!id || !id.startsWith('driver-')) return false;
return (