Skip to content

Commit

Permalink
Refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@oleavr
oleavr committed Sep 21, 2024
1 parent f524ff1 commit 8b2fade
Show file tree
Hide file tree
Showing 2 changed files with 219 additions and 158 deletions.
199 changes: 41 additions & 158 deletions apps/tracer/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,7 @@ import DisassemblyView from "./DisassemblyView.tsx";
import EventView from "./EventView.tsx";
import HandlerEditor from "./HandlerEditor.tsx";
import HandlerList from "./HandlerList.tsx";
import {
Event,
Handler,
HandlerId,
ScopeId,
StagedItem,
StagedItemId,
TraceSpecScope
} from "./model.js";
import { useModel } from "./model.js";
import {
BlueprintProvider,
Callout,
Expand All @@ -21,114 +13,39 @@ import {
Tabs,
Tab,
} from "@blueprintjs/core";
import { useEffect, useState } from "react";
import { Resplit } from 'react-resplit';
import useWebSocket, { ReadyState } from "react-use-websocket";

export default function App() {
const [spawnedProgram, setSpawnedProgram] = useState<string | null>(null);
const [handlers, setHandlers] = useState<Handler[]>([]);
const [selectedScope, setSelectedScope] = useState<ScopeId>("");
const [selectedHandler, setSelectedHandler] = useState<HandlerId>(-1);
const [handlerCode, setHandlerCode] = useState("");
const [draftedCode, setDraftedCode] = useState("");
const [addingTargets, setAddingTargets] = useState(false);
const [events, setEvents] = useState<Event[]>([]);
const [latestMatchingEventIndex, setLatestMatchingEventIndex] = useState<number | null>(null);
const [highlightedEventIndex, setHighlightedEventIndex] = useState<number | null>(null);
const [stagedItems, setStagedItems] = useState<StagedItem[]>([]);
const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket<TracerMessage>(
(import.meta.env.MODE === "development")
? "ws://localhost:1337"
: `ws://${window.location.host}`);

function handleHandlerSelection(id: HandlerId) {
setSelectedHandler(id);
setHighlightedEventIndex(null);
sendJsonMessage({ type: "handler:load", id });
}

function deploy(code: string) {
setHandlerCode(code);
setDraftedCode(code);
sendJsonMessage({ type: "handler:save", id: selectedHandler, code });
}

function handleEventActivation(id: HandlerId) {
const handler = handlers.find(h => h.id === id);
setSelectedScope(handler!.scope);
handleHandlerSelection(id);
}

function handleAddTargetsClose() {
setAddingTargets(false);
setStagedItems([]);
}

function handleAddTargetsQuery(scope: TraceSpecScope, query: string) {
if (query.length === 0 || query === "*") {
return;
}

const spec = [
["include", scope, query],
];
sendJsonMessage({ type: "targets:stage", profile: { spec } });
}

function handleAddTargetsCommit(id: StagedItemId | null) {
handleAddTargetsClose();
sendJsonMessage({ type: "targets:commit", id });
}

function handleRespawnRequest() {
sendJsonMessage({ type: "tracer:respawn" });
}

useEffect(() => {
if (lastJsonMessage === null) {
return;
}

switch (lastJsonMessage.type) {
case "tracer:sync":
setSpawnedProgram(lastJsonMessage.spawned_program);
setHandlers(lastJsonMessage.handlers);
break;
case "handlers:add":
setHandlers(handlers.concat(lastJsonMessage.handlers));
break;
case "handler:loaded": {
const { code } = lastJsonMessage;
setHandlerCode(code);
setDraftedCode(code);
break;
}
case "targets:staged":
setStagedItems(lastJsonMessage.items);
break;
case "events:add":
setEvents(events.concat(lastJsonMessage.events));
break;
default:
console.log("TODO:", lastJsonMessage);
break;
}

}, [lastJsonMessage]);

useEffect(() => {
for (let i = events.length - 1; i !== -1; i--) {
const event = events[i];
if (event[0] === selectedHandler) {
setLatestMatchingEventIndex(i);
return;
}
}
setLatestMatchingEventIndex(null);
}, [selectedHandler, events]);

const connectionError = (readyState === ReadyState.CLOSED)
const {
lostConnection,

spawnedProgram,
respawn,

handlers,
selectedScope,
selectScope,
selectedHandler,
selectHandler,
handlerCode,
draftedCode,
setDraftedCode,
deployCode,

events,
latestMatchingEventIndex,
highlightedEventIndex,
setHighlightedEventIndex,

addingTargets,
startAddingTargets,
finishAddingTargets,
stageItems,
stagedItems,
commitItems,
} = useModel();

const connectionError = lostConnection
? <Callout
title="Lost connection to frida-trace"
intent="danger"
Expand All @@ -139,7 +56,7 @@ export default function App() {
<EventView
events={events}
highlightedIndex={highlightedEventIndex}
onActivate={handleEventActivation}
onActivate={selectHandler}
/>
);

Expand All @@ -155,13 +72,13 @@ export default function App() {
<HandlerList
handlers={handlers}
selectedScope={selectedScope}
onScopeSelect={scope => setSelectedScope(scope)}
onScopeSelect={selectScope}
selectedHandler={selectedHandler}
onHandlerSelect={handleHandlerSelection}
onHandlerSelect={selectHandler}
/>
<ButtonGroup className="target-actions" vertical={true} minimal={true} alignText="left">
<Button intent="success" icon="add" onClick={() => setAddingTargets(true)}>Add</Button>
{(spawnedProgram !== null) ? <Button intent="danger" icon="reset" onClick={handleRespawnRequest}>Respawn</Button> : null}
<Button intent="success" icon="add" onClick={startAddingTargets}>Add</Button>
{(spawnedProgram !== null) ? <Button intent="danger" icon="reset" onClick={respawn}>Respawn</Button> : null}
</ButtonGroup>
</section>
<section className="work-area">
Expand All @@ -170,7 +87,7 @@ export default function App() {
<Button
icon="rocket-slant"
disabled={draftedCode === handlerCode}
onClick={() => deploy(draftedCode)}
onClick={() => deployCode(draftedCode)}
>
Deploy
</Button>
Expand All @@ -186,7 +103,7 @@ export default function App() {
handlerId={selectedHandler}
handlerCode={handlerCode}
onChange={setDraftedCode}
onSave={deploy}
onSave={deployCode}
/>
</section>
</Resplit.Pane>
Expand All @@ -201,47 +118,13 @@ export default function App() {
<AddTargetsDialog
isOpen={addingTargets}
stagedItems={stagedItems}
onClose={handleAddTargetsClose}
onQuery={handleAddTargetsQuery}
onCommit={handleAddTargetsCommit}
onClose={finishAddingTargets}
onQuery={stageItems}
onCommit={commitItems}
/>
<BlueprintProvider>
<div />
</BlueprintProvider>
</>
);
}

type TracerMessage =
| TracerSyncMessage
| HandlersAddMessage
| HandlerLoadedMessage
| TargetsStagedMessage
| EventsAddMessage
;

interface TracerSyncMessage {
type: "tracer:sync";
spawned_program: string | null;
handlers: Handler[];
}

interface HandlersAddMessage {
type: "handlers:add";
handlers: Handler[];
}

interface HandlerLoadedMessage {
type: "handler:loaded";
code: string;
}

interface TargetsStagedMessage {
type: "targets:staged";
items: StagedItem[];
}

interface EventsAddMessage {
type: "events:add";
events: Event[];
}
Loading

0 comments on commit 8b2fade

Please sign in to comment.