From bffdede0fa355f3ca6f8ba57c0b8b68ab98ec309 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 29 Apr 2023 17:20:49 +1000 Subject: [PATCH] feat(ui): improve log messages --- .../web/src/features/nodes/store/nodesSlice.ts | 9 ++++++++- .../web/src/services/events/actions.ts | 5 +++++ .../web/src/services/events/middleware.ts | 13 ++++++++----- .../services/events/util/setEventListeners.ts | 18 ++++++++++++++---- .../web/src/services/thunks/gallery.ts | 4 ++-- .../frontend/web/src/services/thunks/image.ts | 10 ++++++++-- .../frontend/web/src/services/thunks/model.ts | 4 ++-- .../web/src/services/thunks/session.ts | 13 ++++++++----- 8 files changed, 55 insertions(+), 21 deletions(-) diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts index 960625135a..d0202a5932 100644 --- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts +++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts @@ -16,6 +16,8 @@ import { receivedOpenAPISchema } from 'services/thunks/schema'; import { isFulfilledAnyGraphBuilt } from 'services/thunks/session'; import { InvocationTemplate, InvocationValue } from '../types/types'; import { parseSchema } from '../util/parseSchema'; +import { log } from 'app/logging/useLogger'; +import { size } from 'lodash-es'; export type NodesState = { nodes: Node[]; @@ -85,7 +87,12 @@ const nodesSlice = createSlice({ parsedOpenAPISchema: (state, action: PayloadAction) => { try { const parsedSchema = parseSchema(action.payload); - console.debug('Parsed schema: ', parsedSchema); + + // TODO: Achtung! Side effect in a reducer! + log.info( + { namespace: 'schema', nodes: parsedSchema }, + `Parsed ${size(parsedSchema)} nodes` + ); state.invocationTemplates = parsedSchema; } catch (err) { console.error(err); diff --git a/invokeai/frontend/web/src/services/events/actions.ts b/invokeai/frontend/web/src/services/events/actions.ts index 5ea0a1e9e1..84268773a9 100644 --- a/invokeai/frontend/web/src/services/events/actions.ts +++ b/invokeai/frontend/web/src/services/events/actions.ts @@ -1,6 +1,7 @@ import { createAction } from '@reduxjs/toolkit'; import { GeneratorProgressEvent, + GraphExecutionStateCompleteEvent, InvocationCompleteEvent, InvocationErrorEvent, InvocationStartedEvent, @@ -45,6 +46,10 @@ export const invocationError = createAction< BaseSocketPayload & { data: InvocationErrorEvent } >('socket/invocationError'); +export const graphExecutionStateComplete = createAction< + BaseSocketPayload & { data: GraphExecutionStateCompleteEvent } +>('socket/graphExecutionStateComplete'); + export const generatorProgress = createAction< BaseSocketPayload & { data: GeneratorProgressEvent } >('socket/generatorProgress'); diff --git a/invokeai/frontend/web/src/services/events/middleware.ts b/invokeai/frontend/web/src/services/events/middleware.ts index 0b52ae8f0b..e57851e19c 100644 --- a/invokeai/frontend/web/src/services/events/middleware.ts +++ b/invokeai/frontend/web/src/services/events/middleware.ts @@ -118,7 +118,9 @@ export const socketMiddleware = () => { if (system.sessionId) { const sessionLog = moduleLog.child({ sessionId: system.sessionId }); - sessionLog.debug('Re-subscribe'); + sessionLog.debug( + `Subscribed to existing session (${system.sessionId})` + ); socket.emit('subscribe', { session: system.sessionId }); dispatch( @@ -158,9 +160,10 @@ export const socketMiddleware = () => { // }; if (oldSessionId) { - sessionLog - .child({ oldSessionId }) - .debug('Unsubscribe from old session'); + sessionLog.debug( + { oldSessionId }, + `Unsubscribed from old session (${oldSessionId})` + ); // Unsubscribe when invocations complete socket.emit('unsubscribe', { session: oldSessionId, @@ -185,7 +188,7 @@ export const socketMiddleware = () => { }); } - sessionLog.debug('Subscribe'); + sessionLog.debug(`Subscribe to new session (${sessionId})`); socket.emit('subscribe', { session: sessionId }); dispatch( socketSubscribed({ diff --git a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts index b7599df9cc..90a285d238 100644 --- a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts +++ b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts @@ -5,6 +5,7 @@ import { sessionCanceled } from 'services/thunks/session'; import { Socket } from 'socket.io-client'; import { generatorProgress, + graphExecutionStateComplete, invocationComplete, invocationError, invocationStarted, @@ -24,22 +25,22 @@ export const setEventListeners = (arg: SetEventListenersArg) => { const { dispatch, getState } = store; // Set up listeners for the present subscription socket.on('invocation_started', (data) => { - sessionLog.child({ data }).info('Invocation started'); + sessionLog.child({ data }).info(`Invocation started (${data.node.type})`); dispatch(invocationStarted({ data, timestamp: getTimestamp() })); }); socket.on('generator_progress', (data) => { - sessionLog.child({ data }).trace('Generator progress'); + sessionLog.child({ data }).trace(`Generator progress (${data.node.type})`); dispatch(generatorProgress({ data, timestamp: getTimestamp() })); }); socket.on('invocation_error', (data) => { - sessionLog.child({ data }).error('Invocation error'); + sessionLog.child({ data }).error(`Invocation error (${data.node.type})`); dispatch(invocationError({ data, timestamp: getTimestamp() })); }); socket.on('invocation_complete', (data) => { - sessionLog.child({ data }).info('Invocation complete'); + sessionLog.child({ data }).info(`Invocation complete (${data.node.type})`); const sessionId = data.graph_execution_state_id; const { cancelType, isCancelScheduled } = getState().system; @@ -58,4 +59,13 @@ export const setEventListeners = (arg: SetEventListenersArg) => { }) ); }); + + socket.on('graph_execution_state_complete', (data) => { + sessionLog + .child({ data }) + .info( + `Graph execution state complete (${data.graph_execution_state_id})` + ); + dispatch(graphExecutionStateComplete({ data, timestamp: getTimestamp() })); + }); }; diff --git a/invokeai/frontend/web/src/services/thunks/gallery.ts b/invokeai/frontend/web/src/services/thunks/gallery.ts index 824baa1bca..f908cbddcb 100644 --- a/invokeai/frontend/web/src/services/thunks/gallery.ts +++ b/invokeai/frontend/web/src/services/thunks/gallery.ts @@ -15,7 +15,7 @@ export const receivedResultImagesPage = createAppAsyncThunk( perPage: IMAGES_PER_PAGE, }); - galleryLog.info({ response }, 'Received page of results images'); + galleryLog.info({ response }, `Received ${response.items.length} results`); return response; } @@ -30,7 +30,7 @@ export const receivedUploadImagesPage = createAppAsyncThunk( perPage: IMAGES_PER_PAGE, }); - galleryLog.info({ response }, 'Received page of uploads images'); + galleryLog.info({ response }, `Received ${response.items.length} uploads`); return response; } diff --git a/invokeai/frontend/web/src/services/thunks/image.ts b/invokeai/frontend/web/src/services/thunks/image.ts index 7010e1565a..c4da9d9f16 100644 --- a/invokeai/frontend/web/src/services/thunks/image.ts +++ b/invokeai/frontend/web/src/services/thunks/image.ts @@ -53,7 +53,10 @@ export const imageUploaded = createAppAsyncThunk( const response = await ImagesService.uploadImage(arg); const { location } = getHeaders(response); - imagesLog.info({ arg: '', response, location }, 'Image uploaded'); + imagesLog.info( + { arg: '', response, location }, + `Image uploaded (${response.image_name})` + ); return { response, location }; } @@ -108,7 +111,10 @@ export const imageDeleted = createAppAsyncThunk( const response = await ImagesService.deleteImage(arg); - imagesLog.info({ arg, response }, 'Image deleted'); + imagesLog.info( + { arg, response }, + `Image deleted (${arg.imageType} - ${arg.imageName})` + ); return response; } diff --git a/invokeai/frontend/web/src/services/thunks/model.ts b/invokeai/frontend/web/src/services/thunks/model.ts index 78d74569dc..84f7a24e81 100644 --- a/invokeai/frontend/web/src/services/thunks/model.ts +++ b/invokeai/frontend/web/src/services/thunks/model.ts @@ -1,7 +1,7 @@ import { log } from 'app/logging/useLogger'; import { createAppAsyncThunk } from 'app/store/storeUtils'; import { Model } from 'features/system/store/modelSlice'; -import { reduce } from 'lodash-es'; +import { reduce, size } from 'lodash-es'; import { ModelsService } from 'services/api'; const models = log.child({ namespace: 'model' }); @@ -23,7 +23,7 @@ export const receivedModels = createAppAsyncThunk( {} as Record ); - models.info({ response }, 'Received models'); + models.info({ response }, `Received ${size(response.models)} models`); return deserializedModels; } diff --git a/invokeai/frontend/web/src/services/thunks/session.ts b/invokeai/frontend/web/src/services/thunks/session.ts index ff9592e8c8..0641437d52 100644 --- a/invokeai/frontend/web/src/services/thunks/session.ts +++ b/invokeai/frontend/web/src/services/thunks/session.ts @@ -50,7 +50,7 @@ export const sessionCreated = createAppAsyncThunk( requestBody: arg.graph, }); - sessionLog.info({ arg, response }, 'Session created'); + sessionLog.info({ arg, response }, `Session created (${response.id})`); return response; } @@ -77,7 +77,7 @@ export const nodeAdded = createAppAsyncThunk( sessionId: arg.sessionId, }); - sessionLog.info({ arg, response }, 'Node added'); + sessionLog.info({ arg, response }, `Node added (${response})`); return response; } @@ -96,7 +96,7 @@ export const sessionInvoked = createAppAsyncThunk( all: true, }); - sessionLog.info({ arg, response }, 'Session invoked'); + sessionLog.info({ arg, response }, `Session invoked (${sessionId})`); return response; } @@ -118,7 +118,7 @@ export const sessionCanceled = createAppAsyncThunk( sessionId, }); - sessionLog.info({ arg, response }, 'Session canceled'); + sessionLog.info({ arg, response }, `Session canceled (${sessionId})`); return response; } @@ -136,7 +136,10 @@ export const listedSessions = createAppAsyncThunk( async (arg: SessionsListedArg, _thunkApi) => { const response = await SessionsService.listSessions(arg); - sessionLog.info({ arg, response }, 'Sessions listed'); + sessionLog.info( + { arg, response }, + `Sessions listed (${response.items.length})` + ); return response; }