From bb09a562f6ad88fa6f5ea36cc2ca61a22871f99e Mon Sep 17 00:00:00 2001 From: simoleo89 Date: Mon, 11 May 2026 16:56:56 +0000 Subject: [PATCH] Extract Monitor tab JSX into WiredMonitorTabView + drop dead overlays MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Third (and final, for now) inline-tab extraction in WiredCreatorToolsView. With this commit Monitor / Inspection / Variables / Settings are all sibling components; the parent only orchestrates state. What moved - ~60 lines of live JSX (Statistics card, Logs table, "Clear all" + "View full logs" buttons) → src/components/wired-tools/WiredMonitorTabView.tsx - The new component takes 7 typed props (3 data + 4 callbacks), no state or effects. Dead code removed - The Monitor block also contained three modal-style overlays (History / Info / Error info) wrapped in `{ false && ... }` — they never rendered. The live versions of those modals are mounted by the parent outside the NitroCardView (lines ~3327, ~3393, ~3679 in the new layout). Dropping the dead duplicates removes ~115 lines and ten otherwise-unused symbol references from the parent. Impact - WiredCreatorToolsView.tsx: 3710 → 3544 lines (−166 net). Combined with the previous two extractions and the types/constants/helpers split in 3c68d97, the file is now down from 4493 → 3544 lines (−949, −21%). - The three tab files are each ~150 lines and trivially scannable. Conscious non-goals - No state hoisted to a store yet. The shared-state Zustand slice is a separate PR. This commit only relocates JSX. - Behavior unchanged for live code paths. Removing the `{ false && ... }` overlays cannot change behavior because they were dead branches; the live overlays at the bottom of the parent module are the ones the user actually sees. Verification - yarn eslint on the two files: 34 problems baseline, 34 after (no new issues introduced). - yarn test: 49/49 passing. - yarn tsc on the touched files: clean. --- .../wired-tools/WiredCreatorToolsView.tsx | 186 +----------------- .../wired-tools/WiredMonitorTabView.tsx | 115 +++++++++++ 2 files changed, 125 insertions(+), 176 deletions(-) create mode 100644 src/components/wired-tools/WiredMonitorTabView.tsx diff --git a/src/components/wired-tools/WiredCreatorToolsView.tsx b/src/components/wired-tools/WiredCreatorToolsView.tsx index c189cf5..7c188fc 100644 --- a/src/components/wired-tools/WiredCreatorToolsView.tsx +++ b/src/components/wired-tools/WiredCreatorToolsView.tsx @@ -10,6 +10,7 @@ import { DIRECTION_NAMES, EDITABLE_FURNI_VARIABLES, EDITABLE_USER_VARIABLES, INS import { createEmptyMonitorSnapshot, formatMonitorHistoryOccurrence, formatMonitorLatestOccurrence, formatMonitorSource, formatVariableTimestamp, getHotelDateTimeParts, getHotelTimeFormatter, normalizeMonitorReason } from './WiredCreatorTools.helpers'; import { HotelDateTimeParts, InspectionElementButton, InspectionElementType, InspectionFurniLiveState, InspectionFurniSelection, InspectionUserLiveState, InspectionUserSelection, InspectionUserTeamData, InspectionVariable, ManagedHolderVariableEntry, MonitorLog, MonitorLogDetails, MonitorSnapshot, MonitorStat, ParsedWallLocation, TeamEffectData, VariableDefinition, VariableHighlightOverlay, VariableHighlightTarget, VariableManageEntry, VariableTextValue, VariablesElementButton, VariablesElementType, WiredToolsTab } from './WiredCreatorTools.types'; import { WiredInspectionTabView } from './WiredInspectionTabView'; +import { WiredMonitorTabView } from './WiredMonitorTabView'; import { WiredToolsSettingsTabView } from './WiredToolsSettingsTabView'; import { WiredVariablesTabView } from './WiredVariablesTabView'; @@ -3073,182 +3074,15 @@ export const WiredCreatorToolsView: FC<{}> = () => { (activeTab === 'monitor') && -
-
-
-
- Statistics: - -
- { monitorStats.map(stat => ( -
- { stat.label }: - { stat.value } -
- )) } -
-
- Monitor preview -
-
-
- Logs: -
- - - - - - - - - - - { monitorLogs.map((log, index) => ( - openMonitorLogDetails(log.type, { - severity: log.category, - amount: log.amount, - latest: log.latest, - reason: log.latestReason, - sourceLabel: log.latestSourceLabel, - sourceId: log.latestSourceId - }) }> - - - - - - )) } - -
TypeSeverityAmountLatest occurrence
{ log.type }{ log.category }{ log.amount }{ log.latest }
-
-
- - -
-
- { false && isMonitorHistoryOpen && -
-
-
- Wired Monitor Logs - -
-
-
- Severity: - { [ 'ALL', 'WARNING', 'ERROR' ].map(severity => ( - - )) } - Type: - -
-
- - - - - - - - - - - - { !filteredMonitorHistoryRows.length && - - - } - { filteredMonitorHistoryRows.map((row, index) => ( - openMonitorLogDetails(row.type, { - severity: row.category, - occurredAt: row.occurredAt, - reason: row.reason, - sourceLabel: row.sourceLabel, - sourceId: row.sourceId - }) }> - - - - - - - )) } - -
TypeSeverityTriggerMotivationOccurred at
No log history for the current filters
{ row.type }{ row.category }{ formatMonitorSource(row.sourceLabel, row.sourceId) }{ row.reason }{ row.occurredAt }
-
-
-
-
} - { false && isMonitorInfoOpen && -
-
-
- Wired Monitor Information - -
-
- { monitorInfoSections.map(section => ( -
- { section.title } - { section.lines.map((line, index) => ( - { line } - )) } -
- )) } -
-
-
} - { false && !!selectedMonitorErrorInfo && -
-
-
- Wired Error Information - -
-
-
- { selectedMonitorErrorInfo.title } - - { selectedMonitorLogDetails?.severity ?? selectedMonitorErrorInfo.severity } - -
- { !!selectedMonitorLogDetails && -
- Trigger: { selectedMonitorDetailSource } - Motivation: { selectedMonitorLogDetails.reason } - { !!selectedMonitorLogDetails.amount && Amount: { selectedMonitorLogDetails.amount } } - { !!selectedMonitorLogDetails.latest && Latest occurrence: { selectedMonitorLogDetails.latest } } - { !!selectedMonitorLogDetails.occurredAt && Occurred at: { selectedMonitorLogDetails.occurredAt } } -
} - { selectedMonitorErrorInfo.description.map((paragraph, index) => ( - { paragraph } - )) } -
-
-
} -
} + setIsMonitorInfoOpen(true) } + onOpenMonitorHistory={ () => setIsMonitorHistoryOpen(true) } + onClearMonitorLogs={ clearMonitorLogs } + onOpenMonitorLogDetails={ openMonitorLogDetails } + /> } { (activeTab === 'inspection') && void; + onOpenMonitorHistory: () => void; + onClearMonitorLogs: () => void; + onOpenMonitorLogDetails: (type: string, details: Pick) => void; +} + +/** + * The "Monitor" tab body of WiredCreatorToolsView, extracted from the + * parent's inline JSX. The three modal overlays that used to live + * inside this block were dead code (`{ false && ... }`) and have been + * dropped; the live versions of those modals (Monitor History, Monitor + * Info, Error Info) are mounted outside the NitroCardView by the parent. + */ +export const WiredMonitorTabView = (props: WiredMonitorTabViewProps) => +{ + const { + monitorStats, + monitorLogs, + monitorHistoryRows, + onOpenMonitorInfo, + onOpenMonitorHistory, + onClearMonitorLogs, + onOpenMonitorLogDetails + } = props; + + return ( +
+
+
+
+ Statistics: + +
+ { monitorStats.map(stat => ( +
+ { stat.label }: + { stat.value } +
+ )) } +
+
+ Monitor preview +
+
+
+ Logs: +
+ + + + + + + + + + + { monitorLogs.map((log, index) => ( + onOpenMonitorLogDetails(log.type, { + severity: log.category, + amount: log.amount, + latest: log.latest, + reason: log.latestReason, + sourceLabel: log.latestSourceLabel, + sourceId: log.latestSourceId + }) }> + + + + + + )) } + +
TypeSeverityAmountLatest occurrence
{ log.type }{ log.category }{ log.amount }{ log.latest }
+
+
+ + +
+
+
+ ); +};