import React, { Fragment } from 'react'; import { RequestCluster } from '../../request-cluster'; import './screenshot-generator.scss'; const SS_URL = 'https://screenshot-service.internet-czas-dzialac.pl'; enum taskState { WAITING = 'waiting', RUNNING = 'running', FINISHED = 'finished', } type Screenshot = { url: string; thumb_url: string; domain: string; filename: string; found_headers: string[]; }; interface screenshotTask { domains: string[]; elapsed_time_s: number; current_action: string; finished_time: number; id: string; images: Screenshot[]; jobs_ahead: number; output: string; processing_took: number; request_time: number; started_time: number; status: taskState; url: string; waiting_took: number; zip_url: string; preview: string; } function createTaskEndpoint(visited_url: string, domains: string[]) { return `${SS_URL}/api/requests?url=${encodeURIComponent(visited_url)}${domains.reduce( (prev: string, curr: string) => prev + '&domains[]=' + curr, '' )}`; } function createTask(visited_url: string, domains: string[]) { return fetch(createTaskEndpoint(visited_url, domains), { method: 'POST' }); } function pollTask(path: string): Promise { return fetch(path, { method: 'GET' }); } export default function ScreenshotGenerator({ visited_url, clusters, setReportWindowMode, setRequestPath, downloadFiles, user_role, }: { visited_url: string; clusters: Record; setReportWindowMode: Function; setRequestPath: Function; downloadFiles: Function; user_role: string; }) { const [mode, setMode] = React.useState('idle'); const [images, setImages] = React.useState([]); const [taskId, setTaskId] = React.useState(null); const [output, setOutput] = React.useState({}); const [currentAction, setCurrentAction] = React.useState(''); const [preview, setPreview] = React.useState(''); const [lastPreview, setLastPreview] = React.useState(''); async function subscribeTask(path: string): Promise { let response = { status: taskState.WAITING }; let last_preview = ''; while (response.status === taskState.WAITING || response.status === taskState.RUNNING) { await new Promise((resolve) => setTimeout(resolve, 1000)); response = await (await pollTask(path)).json(); setImages((response as screenshotTask)?.images); setCurrentAction((response as screenshotTask)?.current_action); setLastPreview(last_preview); setPreview((response as screenshotTask)?.preview); last_preview = (response as screenshotTask)?.preview; document.querySelector('.images')?.scrollTo({ top: document.querySelector('.images')?.scrollHeight, behavior: 'smooth', }); } if (response.status === taskState.FINISHED) { setMode('finished'); } return response as screenshotTask; } return (
{mode === 'idle' ? (

Przygotowanie zrzutów ekranów

Notka informacyjna

W celu udokumentowania procesów przetwarzania danych, jakie wykryła nasza wtyczka na tej stronie, warto wykonać zrzuty ekranu, na których widać przeglądarkę z otwartymi narzędziami deweloperskimi, ukazując wybrane elementy ruchu sieciowego generowanego przez stronę.

Jeżeli chcesz, wtyczka Rentgen może wygenerować je za Ciebie.

Uwaga: aby to zrobić, adres aktualnie odwiedzonej podstrony analizowanej witryny będzie wysłany na nasz serwer, aby na nim odwiedzić tę podstronę i wykonać zrzuty ekranu.

Serwer, na którym jest wykonywana analiza należy do inicjatywy{' '} Internet. Czas działać! . Zebrane dane nie są wysyłane do żadnych podmiotów trzecich i są usuwane z serwera po 24 godzinach. Wysłanie na serwer informacji o adresie przeglądanej strony jest konieczne, aby wykonać te zrzuty ekranu w sposób automatyczny. Jeżeli nie chcesz korzystać z opcji automatycznej, zachęcamy do wykonania zrzutów ekranu samodzielnie.

) : null} {mode === 'in_progress' || mode === 'finished' ? (

Przygotowanie zrzutów ekranów

{mode === 'in_progress' ? (

To może chwilkę zająć...

Nasz serwer właśnie odwiedza wskazaną przez Ciebie stronę i przygotowuje zrzuty ekranów narzędzi deweloperskich.

{currentAction}
) : null} {mode === 'finished' ? (

Gotowe!

Zrzuty ekranów narzędzi deweloperskich są gotowe do pobrania.

) : null}
{mode === 'in_progress' ? (
· · ·
) : null} {images.map((screenshot) => { return (
🕸 {screenshot.domain}
· · ·
); })}
{mode === 'finished' ? ( ) : null}
) : null}
); }