Handle new screenshot-service API
This commit is contained in:
parent
48809c7cc5
commit
58c40efc79
|
@ -2,23 +2,31 @@ import React, { Fragment } from 'react';
|
||||||
import { RequestCluster } from '../../request-cluster';
|
import { RequestCluster } from '../../request-cluster';
|
||||||
import './screenshot-generator.scss';
|
import './screenshot-generator.scss';
|
||||||
|
|
||||||
|
const SS_URL = 'http://65.108.60.135:3000';
|
||||||
|
|
||||||
enum taskState {
|
enum taskState {
|
||||||
WAITING = 'waiting',
|
WAITING = 'waiting',
|
||||||
RUNNING = 'running',
|
RUNNING = 'running',
|
||||||
FINISHED = 'finished',
|
FINISHED = 'finished',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type Screenshot = {
|
||||||
|
url: string;
|
||||||
|
domain: string;
|
||||||
|
found_headers: string[];
|
||||||
|
};
|
||||||
|
|
||||||
interface screenshotTask {
|
interface screenshotTask {
|
||||||
url: string;
|
url: string;
|
||||||
domains: string[];
|
domains: string[];
|
||||||
id: string;
|
id: string;
|
||||||
status: taskState;
|
status: taskState;
|
||||||
output: string;
|
output: string;
|
||||||
files: string[];
|
images: Screenshot[];
|
||||||
}
|
}
|
||||||
|
|
||||||
function createTaskEndpoint(visited_url: string, domains: string[]) {
|
function createTaskEndpoint(visited_url: string, domains: string[]) {
|
||||||
return `http://65.108.60.135:3000/api/requests?url=${visited_url}${domains.reduce(
|
return `${SS_URL}/api/requests?url=${visited_url}${domains.reduce(
|
||||||
(prev: string, curr: string) => prev + '&domains[]=' + curr,
|
(prev: string, curr: string) => prev + '&domains[]=' + curr,
|
||||||
''
|
''
|
||||||
)}`;
|
)}`;
|
||||||
|
@ -42,7 +50,7 @@ export default function ScreenshotGenerator({
|
||||||
setReportWindowMode: Function;
|
setReportWindowMode: Function;
|
||||||
}) {
|
}) {
|
||||||
const [mode, setMode] = React.useState<string>('idle');
|
const [mode, setMode] = React.useState<string>('idle');
|
||||||
const [images, setImages] = React.useState<string[]>([]);
|
const [images, setImages] = React.useState<Screenshot[]>([]);
|
||||||
const [taskId, setTaskId] = React.useState<string>(null);
|
const [taskId, setTaskId] = React.useState<string>(null);
|
||||||
|
|
||||||
async function subscribeTask(path: string): Promise<screenshotTask> {
|
async function subscribeTask(path: string): Promise<screenshotTask> {
|
||||||
|
@ -50,7 +58,7 @@ export default function ScreenshotGenerator({
|
||||||
while (response.status === taskState.WAITING || response.status === taskState.RUNNING) {
|
while (response.status === taskState.WAITING || response.status === taskState.RUNNING) {
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
response = await (await pollTask(path)).json();
|
response = await (await pollTask(path)).json();
|
||||||
setImages((response as screenshotTask)?.files);
|
setImages((response as screenshotTask)?.images);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (response.status === taskState.FINISHED) {
|
if (response.status === taskState.FINISHED) {
|
||||||
|
@ -60,7 +68,7 @@ export default function ScreenshotGenerator({
|
||||||
}
|
}
|
||||||
|
|
||||||
function downloadFiles() {
|
function downloadFiles() {
|
||||||
const urls = images.map((el) => `http://65.108.60.135:3000/static/${taskId}/${el}`);
|
const urls = images.map((el) => `${SS_URL}${el}`);
|
||||||
|
|
||||||
for (const url of urls) {
|
for (const url of urls) {
|
||||||
let a = document.createElement('a');
|
let a = document.createElement('a');
|
||||||
|
@ -108,7 +116,7 @@ export default function ScreenshotGenerator({
|
||||||
const urlArr = task.url.split('/');
|
const urlArr = task.url.split('/');
|
||||||
setTaskId(urlArr[urlArr.length - 1]);
|
setTaskId(urlArr[urlArr.length - 1]);
|
||||||
const response = await subscribeTask(task.url);
|
const response = await subscribeTask(task.url);
|
||||||
setImages(response.files);
|
setImages(response.images);
|
||||||
console.log('output', response);
|
console.log('output', response);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -131,18 +139,18 @@ export default function ScreenshotGenerator({
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="images">
|
<div className="images">
|
||||||
{images.map((filename: string) => {
|
{images.map((screenshot) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={`${taskId}_${filename}`}
|
key={`${taskId}_${screenshot.url}`}
|
||||||
className="browser browser--filled"
|
className="browser browser--filled"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(http://65.108.60.135:3000/static/${taskId}/${filename})`,
|
backgroundImage: `url(${SS_URL}${screenshot.url})`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="browser__header">
|
<div className="browser__header">
|
||||||
<div className="browser__header--address-bar">
|
<div className="browser__header--address-bar">
|
||||||
{filename}
|
{screenshot.url}
|
||||||
</div>
|
</div>
|
||||||
<div className="browser__header--controls">· · ·</div>
|
<div className="browser__header--controls">· · ·</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user