github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(model meneger queue): backend disconnected visual feedback

Browse Source
This commit is contained in:
joshistoast
2026-03-04 01:18:57 -07:00
parent db1c17a84d
commit 2e014dca03
2 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx
View File

@@ -287,8 +287,8 @@ export const ModelInstallQueue = memo(() => {
<Tbody>
{data?.length === 0 ? (
<Tr>
<Td colSpan={4} textAlign="center" py={8} color="base.500">
<Text>{t('modelManager.queueEmpty')}</Text>
<Td colSpan={4} textAlign="center" py={8}>
<Text variant="subtext">{t('modelManager.queueEmpty')}</Text>
</Td>
</Tr>
) : (

38
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx
View File

@@ -1,5 +1,18 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Badge, Button, CircularProgress, Flex, Icon, IconButton, Td, Text, Tooltip, Tr } from '@invoke-ai/ui-library';
import {
Badge,
Box,
Button,
CircularProgress,
Flex,
Icon,
IconButton,
Td,
Text,
Tooltip,
Tr,
} from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { isNil } from 'es-toolkit/compat';
import { getApiErrorDetail } from 'features/modelManagerV2/util/getApiErrorDetail';
import { toast } from 'features/toast/toast';
@@ -11,6 +24,7 @@ import {
PiMinusBold,
PiPauseFill,
PiPlayFill,
PiWarningBold,
PiWarningDiamondBold,
PiWarningFill,
PiXBold,
@@ -23,6 +37,7 @@ import {
useResumeModelInstallMutation,
} from 'services/api/endpoints/models';
import type { ModelInstallJob } from 'services/api/types';
import { $isConnected } from 'services/events/stores';
import { ModelInstallQueueBadge } from './ModelInstallQueueBadge';
@@ -84,6 +99,7 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => {
const [restartFailedModelInstall] = useRestartFailedModelInstallMutation();
const [restartModelInstallFile] = useRestartModelInstallFileMutation();
const resumeFromScratchShown = useRef(false);
const isConnected = useStore($isConnected);
const handleDeleteModelImport = useCallback(() => {
deleteImportModel(installJob.id)
@@ -312,6 +328,10 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => {
installJob.status === 'running' ||
installJob.status === 'paused';
const showDisconnectedIndicator =
!isConnected &&
(installJob.status === 'downloading' || installJob.status === 'waiting' || installJob.status === 'running');
return (
<Tr>
{/* Progress */}
@@ -323,7 +343,10 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => {
size="20px"
value={progressValue ?? 0}
isIndeterminate={
progressValue === null || installJob.status === 'waiting' || installJob.status === 'running'
!isConnected ||
progressValue === null ||
installJob.status === 'waiting' ||
installJob.status === 'running'
}
aria-label={t('accessibility.invokeProgressBar')}
sx={CircularProgressSx}
@@ -399,10 +422,19 @@ export const ModelInstallQueueItem = memo((props: ModelListItemProps) => {
{/* Status */}
<Td>
<Flex sx={BadgesColumnSx}>
{showDisconnectedIndicator && (
<Tooltip label={t('common.statusDisconnected')}>
<Box padding={1}>
<Icon as={PiWarningBold} color="error.300" />
</Box>
</Tooltip>
)}
<ModelInstallQueueBadge status={installJob.status} label={installJob.error} />
{hasRestartRequired && (
<Tooltip label={t('modelManager.restartRequiredTooltip')}>
<Badge colorScheme="red">{t('modelManager.restartRequired')}</Badge>
<Box>
<Badge colorScheme="red">{t('modelManager.restartRequired')}</Badge>
</Box>
</Tooltip>
)}
</Flex>