rentgen/report-window/report-window.tsx

124 lines
3.6 KiB
TypeScript
Raw Normal View History

2021-11-25 21:14:40 +01:00
import React, { useEffect, useState } from "react";
2021-11-07 13:57:24 +01:00
import ReactDOM from "react-dom";
2021-11-07 17:23:48 +01:00
import { getMemory } from "../memory";
2021-11-25 21:14:40 +01:00
import { Classifications, StolenDataEntry } from "../stolen-data-entry";
import { reduceConcat, useEmitter } from "../util";
2021-11-08 20:14:28 +01:00
import EmailTemplate from "./email-template";
import HARConverter from "./har-converter";
2021-11-07 13:57:24 +01:00
2021-11-25 21:14:40 +01:00
function DataPreview({
entries,
refresh,
}: {
entries: StolenDataEntry[];
refresh: () => void;
}) {
// currently not used, maybe scraped entirely in the future
return (
<table>
<thead>
<tr>
<th>Adres docelowy</th>
<th>Źródło danych</th>
<th>Treść danych</th>
<th>Klasyfikacja</th>
</tr>
</thead>
<tbody>
{entries.map((entry) => (
<tr
key={entry.id}
style={{
backgroundColor:
entry.classification == "id" ? "yellow" : "white",
}}
>
<td>{entry.request.shorthost}</td>
<td style={{ overflowWrap: "anywhere" }}>
{entry.source}:{entry.name}
</td>
<td
style={{
width: "400px",
overflowWrap: "anywhere",
backgroundColor: entry.isRelatedToID() ? "#ffff0054" : "white",
}}
>
{entry.getValuePreview()}
{/* always gonna have
one key, because unwrapEntry is called above */}
</td>
<td>
<select
value={entry.classification}
onChange={(e) => {
entry.classification = e.target
.value as keyof typeof Classifications;
refresh();
}}
>
{[
["history", "Historia przeglądania"],
["id", "Sztucznie nadane id"],
["location", "Lokalizacja"],
].map(([key, name]) => (
<option key={key} value={key}>
{name}
</option>
))}
</select>
</td>
</tr>
))}
</tbody>
</table>
);
}
2021-11-07 13:57:24 +01:00
function Report() {
2021-11-25 21:14:40 +01:00
console.time("getOrigin");
2021-11-07 15:45:26 +01:00
const origin = new URL(document.location.toString()).searchParams.get(
"origin"
);
2021-11-25 21:14:40 +01:00
console.timeEnd("getOrigin");
console.time("useMemory");
const [counter, setCounter] = useEmitter(getMemory());
2021-11-25 21:14:40 +01:00
console.timeEnd("useMemory");
function refresh() {
setCounter((c) => c + 1);
}
2021-11-25 21:14:40 +01:00
console.time("getClustersForOrigin");
2021-11-07 15:45:26 +01:00
const clusters = getMemory().getClustersForOrigin(origin);
2021-11-25 21:14:40 +01:00
console.timeEnd("getClustersForOrigin");
const [entries, setEntries] = useState<StolenDataEntry[]>([]);
console.time("useEffect report-window");
useEffect(() => {
setEntries(
Object.values(clusters)
.map((cluster) => {
cluster.calculatetRepresentativeStolenData();
return cluster.representativeStolenData;
})
.reduce(reduceConcat, [])
.filter((entry) => entry.isMarked)
);
}, []);
console.timeEnd("useEffect report-window");
if (entries.length == 0) {
return <>Wczytywanie...</>;
}
console.time("rendering template");
const result = (
<div {...{ "data-version": counter }}>
2021-11-25 21:14:40 +01:00
{/*<DataPreview {...{entries, refresh}} */}
2021-11-07 15:45:26 +01:00
<h1>Generuj treść maila dla {origin}</h1>
2021-11-22 17:54:15 +01:00
<EmailTemplate {...{ entries, clusters, version: counter }} />
<HARConverter {...{ entries }} />
2021-11-07 13:57:24 +01:00
</div>
);
2021-11-25 21:14:40 +01:00
console.timeEnd("rendering template");
return result;
2021-11-07 13:57:24 +01:00
}
ReactDOM.render(<Report />, document.getElementById("app"));