From 6d6b986a668af8ffae55af90f45be8f10cdcf0a2 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 29 Apr 2023 17:22:03 +1000 Subject: [PATCH] feat(ui): remove Console and redux logging state --- .../frontend/web/src/app/components/App.tsx | 4 - .../frontend/web/src/app/socketio/emitters.ts | 1 - .../web/src/app/socketio/listeners.ts | 1 - .../features/system/components/Console.tsx | 197 ------------------ .../src/features/system/store/systemSlice.ts | 65 +----- 5 files changed, 1 insertion(+), 267 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/system/components/Console.tsx diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index b42c8a9c1a..37d0c7ba72 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -1,5 +1,4 @@ import ImageUploader from 'common/components/ImageUploader'; -import Console from 'features/system/components/Console'; import ProgressBar from 'features/system/components/ProgressBar'; import SiteHeader from 'features/system/components/SiteHeader'; import InvokeTabs from 'features/ui/components/InvokeTabs'; @@ -121,9 +120,6 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => { - - - ); }; diff --git a/invokeai/frontend/web/src/app/socketio/emitters.ts b/invokeai/frontend/web/src/app/socketio/emitters.ts index 5c9057cac3..610f05b826 100644 --- a/invokeai/frontend/web/src/app/socketio/emitters.ts +++ b/invokeai/frontend/web/src/app/socketio/emitters.ts @@ -12,7 +12,6 @@ import { removeImage, } from 'features/gallery/store/gallerySlice'; import { - addLogEntry, generationRequested, modelChangeRequested, modelConvertRequested, diff --git a/invokeai/frontend/web/src/app/socketio/listeners.ts b/invokeai/frontend/web/src/app/socketio/listeners.ts index 39d4b4ec23..de2f86fd4c 100644 --- a/invokeai/frontend/web/src/app/socketio/listeners.ts +++ b/invokeai/frontend/web/src/app/socketio/listeners.ts @@ -6,7 +6,6 @@ import { v4 as uuidv4 } from 'uuid'; import * as InvokeAI from 'app/types/invokeai'; import { - addLogEntry, addToast, errorOccurred, processingCanceled, diff --git a/invokeai/frontend/web/src/features/system/components/Console.tsx b/invokeai/frontend/web/src/features/system/components/Console.tsx deleted file mode 100644 index 4f7946ee78..0000000000 --- a/invokeai/frontend/web/src/features/system/components/Console.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import { Flex, Text, Tooltip } from '@chakra-ui/react'; -import { createSelector } from '@reduxjs/toolkit'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import IAIIconButton from 'common/components/IAIIconButton'; -import { - errorSeen, - setShouldShowLogViewer, - SystemState, -} from 'features/system/store/systemSlice'; -import { isEqual } from 'lodash-es'; -import { Resizable } from 're-resizable'; -import { memo, useLayoutEffect, useRef, useState } from 'react'; -import { useHotkeys } from 'react-hotkeys-hook'; -import { useTranslation } from 'react-i18next'; -import { FaAngleDoubleDown, FaCode, FaMinus } from 'react-icons/fa'; -import { systemSelector } from '../store/systemSelectors'; - -const logSelector = createSelector( - systemSelector, - (system: SystemState) => system.log, - { - memoizeOptions: { - // We don't need a deep equality check for this selector. - resultEqualityCheck: (a, b) => a.length === b.length, - }, - } -); - -const consoleSelector = createSelector( - systemSelector, - (system: SystemState) => { - return { - shouldShowLogViewer: system.shouldShowLogViewer, - hasError: system.hasError, - wasErrorSeen: system.wasErrorSeen, - }; - }, - { - memoizeOptions: { - resultEqualityCheck: isEqual, - }, - } -); - -/** - * Basic log viewer, floats on bottom of page. - */ -const Console = () => { - const dispatch = useAppDispatch(); - const { t } = useTranslation(); - const log = useAppSelector(logSelector); - const { shouldShowLogViewer, hasError, wasErrorSeen } = - useAppSelector(consoleSelector); - - // Rudimentary autoscroll - const [shouldAutoscroll, setShouldAutoscroll] = useState(true); - const viewerRef = useRef(null); - - /** - * If autoscroll is on, scroll to the bottom when: - * - log updates - * - viewer is toggled - * - * Also scroll to the bottom whenever autoscroll is turned on. - */ - useLayoutEffect(() => { - if (viewerRef.current !== null && shouldAutoscroll) { - viewerRef.current.scrollTop = viewerRef.current.scrollHeight; - } - }, [shouldAutoscroll, log, shouldShowLogViewer]); - - const handleClickLogViewerToggle = () => { - dispatch(errorSeen()); - dispatch(setShouldShowLogViewer(!shouldShowLogViewer)); - }; - - useHotkeys( - '`', - () => { - dispatch(setShouldShowLogViewer(!shouldShowLogViewer)); - }, - [shouldShowLogViewer] - ); - - useHotkeys('esc', () => { - dispatch(setShouldShowLogViewer(false)); - }); - - const handleOnScroll = () => { - if (!viewerRef.current) return; - if ( - shouldAutoscroll && - viewerRef.current.scrollTop < - viewerRef.current.scrollHeight - viewerRef.current.clientHeight - ) { - setShouldAutoscroll(false); - } - }; - - return ( - <> - {shouldShowLogViewer && ( - - - {log.map((entry, i) => { - const { timestamp, message, level } = entry; - const colorScheme = level === 'info' ? 'base' : level; - return ( - - {timestamp}: - {message} - - ); - })} - - - )} - {shouldShowLogViewer && ( - - } - onClick={() => setShouldAutoscroll(!shouldAutoscroll)} - isChecked={shouldAutoscroll} - sx={{ - position: 'fixed', - insetInlineStart: 2, - bottom: 12, - zIndex: 1, - }} - /> - - )} - - : } - onClick={handleClickLogViewerToggle} - sx={{ - position: 'fixed', - insetInlineStart: 2, - bottom: 2, - zIndex: 1, - }} - colorScheme={hasError || !wasErrorSeen ? 'error' : 'base'} - /> - - - ); -}; - -export default memo(Console); diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index 17a0228ebe..0086389cd3 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts @@ -14,7 +14,6 @@ import { } from 'services/events/actions'; import i18n from 'i18n'; -import { isImageOutput } from 'services/types/guards'; import { ProgressImage } from 'services/events/types'; import { initialImageSelected } from 'features/parameters/store/generationSlice'; import { makeToast } from '../hooks/useToastWatcher'; @@ -22,7 +21,7 @@ import { sessionCanceled, sessionInvoked } from 'services/thunks/session'; import { receivedModels } from 'services/thunks/model'; import { parsedOpenAPISchema } from 'features/nodes/store/nodesSlice'; import { LogLevelName } from 'roarr'; -import { InvokeLogLevel, VALID_LOG_LEVELS } from 'app/logging/useLogger'; +import { InvokeLogLevel } from 'app/logging/useLogger'; export type LogLevel = 'info' | 'warning' | 'error'; @@ -44,7 +43,6 @@ export interface SystemState extends InvokeAI.SystemStatus, InvokeAI.SystemConfig { shouldDisplayInProgressType: InProgressImageType; - log: Array; shouldShowLogViewer: boolean; isGFPGANAvailable: boolean; isESRGANAvailable: boolean; @@ -108,7 +106,6 @@ export interface SystemState const initialSystemState: SystemState = { isConnected: false, isProcessing: false, - log: [], shouldShowLogViewer: false, shouldDisplayInProgressType: 'latents', shouldDisplayGuides: true, @@ -150,9 +147,6 @@ const initialSystemState: SystemState = { cancelType: 'immediate', isCancelScheduled: false, subscribedNodeIds: [], - // shouldTransformUrls: false, - // disabledTabs: [], - // disabledFeatures: [], wereModelsReceived: false, wasSchemaParsed: false, consoleLogLevel: 'info', @@ -196,25 +190,6 @@ export const systemSlice = createSlice({ ? i18n.t('common.statusConnected') : i18n.t('common.statusDisconnected'); }, - addLogEntry: ( - state, - action: PayloadAction<{ - timestamp: string; - message: string; - level?: LogLevel; - }> - ) => { - const { timestamp, message, level } = action.payload; - const logLevel = level || 'info'; - - const entry: LogEntry = { - timestamp, - message, - level: logLevel, - }; - - state.log.push(entry); - }, setShouldShowLogViewer: (state, action: PayloadAction) => { state.shouldShowLogViewer = action.payload; }, @@ -380,11 +355,6 @@ export const systemSlice = createSlice({ state.isConnected = true; state.currentStatus = i18n.t('common.statusConnected'); - state.log.push({ - timestamp, - message: `Connected to server`, - level: 'error', - }); }); /** @@ -395,11 +365,6 @@ export const systemSlice = createSlice({ state.isConnected = false; state.currentStatus = i18n.t('common.statusDisconnected'); - state.log.push({ - timestamp, - message: `Disconnected from server`, - level: 'error', - }); }); /** @@ -442,15 +407,6 @@ export const systemSlice = createSlice({ state.totalSteps = 0; state.progressImage = null; state.currentStatus = i18n.t('common.statusProcessingComplete'); - - // TODO: handle logging for other invocation types - if (isImageOutput(data.result)) { - state.log.push({ - timestamp, - message: `Generated: ${data.result.image.image_name}`, - level: 'info', - }); - } }); /** @@ -459,12 +415,6 @@ export const systemSlice = createSlice({ builder.addCase(invocationError, (state, action) => { const { data, timestamp } = action.payload; - state.log.push({ - timestamp, - message: `Server error: ${data.error}`, - level: 'error', - }); - state.wasErrorSeen = true; state.progressImage = null; state.isProcessing = false; @@ -472,12 +422,6 @@ export const systemSlice = createSlice({ state.toastQueue.push( makeToast({ title: i18n.t('toast.serverError'), status: 'error' }) ); - - state.log.push({ - timestamp, - message: `Server error: ${data.error}`, - level: 'error', - }); }); /** @@ -504,12 +448,6 @@ export const systemSlice = createSlice({ state.toastQueue.push( makeToast({ title: i18n.t('toast.canceled'), status: 'warning' }) ); - - state.log.push({ - timestamp, - message: `Processing canceled`, - level: 'warning', - }); }); /** @@ -538,7 +476,6 @@ export const systemSlice = createSlice({ export const { setShouldDisplayInProgressType, setIsProcessing, - addLogEntry, setShouldShowLogViewer, setIsConnected, setSocketId,