Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): disable queue-related buttons when disconnected

Browse Source
This commit is contained in:
psychedelicious 2023-09-21 09:41:43 +10:00 committed by Kent Keirsey
parent 8954953eca
commit 2b08d9e53b
12 changed files with 63 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemButton.tsx
View File

@ -12,12 +12,12 @@ type Props = {
const CancelCurrentQueueItemButton = ({ asIconButton, sx }: Props) => {
const { t } = useTranslation();
const { cancelQueueItem, isLoading, currentQueueItemId } =
const { cancelQueueItem, isLoading, isDisabled } =
useCancelCurrentQueueItem();
return (
<QueueButton
isDisabled={!currentQueueItemId}
isDisabled={isDisabled}
isLoading={isLoading}
asIconButton={asIconButton}
label={t('queue.cancel')}

4
invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
View File

@ -13,7 +13,7 @@ type Props = {
const ClearQueueButton = ({ asIconButton, sx }: Props) => {
const { t } = useTranslation();
const { clearQueue, isLoading, queueStatus } = useClearQueue();
const { clearQueue, isLoading, isDisabled } = useClearQueue();
return (
<IAIAlertDialog
@ -22,7 +22,7 @@ const ClearQueueButton = ({ asIconButton, sx }: Props) => {
acceptButtonText={t('queue.clear')}
triggerComponent={
<QueueButton
isDisabled={!queueStatus?.queue.total}
isDisabled={isDisabled}
isLoading={isLoading}
asIconButton={asIconButton}
label={t('queue.clear')}

4
invokeai/frontend/web/src/features/queue/components/PauseProcessorButton.tsx
View File

@ -10,14 +10,14 @@ type Props = {
const PauseProcessorButton = ({ asIconButton }: Props) => {
const { t } = useTranslation();
const { pauseProcessor, isLoading, isStarted } = usePauseProcessor();
const { pauseProcessor, isLoading, isDisabled } = usePauseProcessor();
return (
<QueueButton
asIconButton={asIconButton}
label={t('queue.pause')}
tooltip={t('queue.pauseTooltip')}
isDisabled={!isStarted}
isDisabled={isDisabled}
isLoading={isLoading}
icon={<FaPause />}
onClick={pauseProcessor}

4
invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx
View File

@ -10,11 +10,11 @@ type Props = {
const PruneQueueButton = ({ asIconButton }: Props) => {
const { t } = useTranslation();
const { pruneQueue, isLoading, finishedCount } = usePruneQueue();
const { pruneQueue, isLoading, finishedCount, isDisabled } = usePruneQueue();
return (
<QueueButton
isDisabled={!finishedCount}
isDisabled={isDisabled}
isLoading={isLoading}
asIconButton={asIconButton}
label={t('queue.prune')}

4
invokeai/frontend/web/src/features/queue/components/ResumeProcessorButton.tsx
View File

@ -10,14 +10,14 @@ type Props = {
const ResumeProcessorButton = ({ asIconButton }: Props) => {
const { t } = useTranslation();
const { resumeProcessor, isLoading, isStarted } = useResumeProcessor();
const { resumeProcessor, isLoading, isDisabled } = useResumeProcessor();
return (
<QueueButton
asIconButton={asIconButton}
label={t('queue.resume')}
tooltip={t('queue.resumeTooltip')}
isDisabled={isStarted}
isDisabled={isDisabled}
isLoading={isLoading}
icon={<FaPlay />}
onClick={resumeProcessor}

5
invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts
View File

@ -1,4 +1,4 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -8,6 +8,7 @@ import {
} from 'services/api/endpoints/queue';
export const useCancelBatch = (batch_id: string) => {
const isConnected = useAppSelector((state) => state.system.isConnected);
const { isCanceled } = useGetBatchStatusQuery(
{ batch_id },
{
@ -49,5 +50,5 @@ export const useCancelBatch = (batch_id: string) => {
}
}, [batch_id, dispatch, isCanceled, t, trigger]);
return { cancelBatch, isLoading, isCanceled };
return { cancelBatch, isLoading, isCanceled, isDisabled: !isConnected };
};

15
invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts
View File

@ -1,4 +1,4 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -8,6 +8,7 @@ import {
} from 'services/api/endpoints/queue';
export const useCancelCurrentQueueItem = () => {
const isConnected = useAppSelector((state) => state.system.isConnected);
const { data: queueStatus } = useGetQueueStatusQuery();
const [trigger, { isLoading }] = useCancelQueueItemMutation();
const dispatch = useAppDispatch();
@ -38,5 +39,15 @@ export const useCancelCurrentQueueItem = () => {
}
}, [currentQueueItemId, dispatch, t, trigger]);
return { cancelQueueItem, isLoading, currentQueueItemId };
const isDisabled = useMemo(
() => !isConnected || !currentQueueItemId,
[isConnected, currentQueueItemId]
);
return {
cancelQueueItem,
isLoading,
currentQueueItemId,
isDisabled,
};
};

5
invokeai/frontend/web/src/features/queue/hooks/useCancelQueueItem.ts
View File

@ -1,10 +1,11 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useCancelQueueItemMutation } from 'services/api/endpoints/queue';
export const useCancelQueueItem = (item_id: number) => {
const isConnected = useAppSelector((state) => state.system.isConnected);
const [trigger, { isLoading }] = useCancelQueueItemMutation();
const dispatch = useAppDispatch();
const { t } = useTranslation();
@ -27,5 +28,5 @@ export const useCancelQueueItem = (item_id: number) => {
}
}, [dispatch, item_id, t, trigger]);
return { cancelQueueItem, isLoading };
return { cancelQueueItem, isLoading, isDisabled: !isConnected };
};

14
invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts
View File

@ -1,6 +1,6 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback } from 'react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useClearQueueMutation,
@ -10,10 +10,9 @@ import { listCursorChanged, listPriorityChanged } from '../store/queueSlice';
export const useClearQueue = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { data: queueStatus } = useGetQueueStatusQuery();
const isConnected = useAppSelector((state) => state.system.isConnected);
const [trigger, { isLoading }] = useClearQueueMutation({
fixedCacheKey: 'clearQueue',
});
@ -43,5 +42,10 @@ export const useClearQueue = () => {
}
}, [queueStatus?.queue.total, trigger, dispatch, t]);
return { clearQueue, isLoading, queueStatus };
const isDisabled = useMemo(
() => !isConnected || !queueStatus?.queue.total,
[isConnected, queueStatus?.queue.total]
);
return { clearQueue, isLoading, queueStatus, isDisabled };
};

10
invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts
View File

@ -1,4 +1,4 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -10,6 +10,7 @@ import {
export const usePauseProcessor = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const isConnected = useAppSelector((state) => state.system.isConnected);
const { data: queueStatus } = useGetQueueStatusQuery();
const [trigger, { isLoading }] = usePauseProcessorMutation({
fixedCacheKey: 'pauseProcessor',
@ -42,5 +43,10 @@ export const usePauseProcessor = () => {
}
}, [isStarted, trigger, dispatch, t]);
return { pauseProcessor, isLoading, isStarted };
const isDisabled = useMemo(
() => !isConnected || !isStarted,
[isConnected, isStarted]
);
return { pauseProcessor, isLoading, isStarted, isDisabled };
};

12
invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts
View File

@ -1,6 +1,6 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback } from 'react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useGetQueueStatusQuery,
@ -11,6 +11,7 @@ import { listCursorChanged, listPriorityChanged } from '../store/queueSlice';
export const usePruneQueue = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const isConnected = useAppSelector((state) => state.system.isConnected);
const [trigger, { isLoading }] = usePruneQueueMutation({
fixedCacheKey: 'pruneQueue',
});
@ -51,5 +52,10 @@ export const usePruneQueue = () => {
}
}, [finishedCount, trigger, dispatch, t]);
return { pruneQueue, isLoading, finishedCount };
const isDisabled = useMemo(
() => !isConnected || !finishedCount,
[finishedCount, isConnected]
);
return { pruneQueue, isLoading, finishedCount, isDisabled };
};

10
invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts
View File

@ -1,4 +1,4 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -9,6 +9,7 @@ import {
export const useResumeProcessor = () => {
const dispatch = useAppDispatch();
const isConnected = useAppSelector((state) => state.system.isConnected);
const { data: queueStatus } = useGetQueueStatusQuery();
const { t } = useTranslation();
const [trigger, { isLoading }] = useResumeProcessorMutation({
@ -42,5 +43,10 @@ export const useResumeProcessor = () => {
}
}, [isStarted, trigger, dispatch, t]);
return { resumeProcessor, isLoading, isStarted };
const isDisabled = useMemo(
() => !isConnected || isStarted,
[isConnected, isStarted]
);
return { resumeProcessor, isLoading, isStarted, isDisabled };
};