lee/Scraperr
1
0
Fork 0
mirror of https://github.com/jaypyles/Scraperr.git synced 2026-05-03 07:50:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: make general fixes to dev containers and log pages

Browse Source
This commit is contained in:
Jayden Pyles
2024-10-18 17:19:46 -05:00
parent 9d388e2e91
commit 14cf2e9dbc
9 changed files with 121 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Makefile
+2 -2
View File
@@ -1,7 +1,7 @@
.DEFAULT_GOAL := help
COMPOSE_DEV = docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env
COMPOSE_PROD = docker compose -f docker-compose.yml --env-file .env
COMPOSE_DEV = docker compose -f docker-compose.yml -f docker-compose.dev.yml
COMPOSE_PROD = docker compose -f docker-compose.yml
.PHONY: help deps build pull up up-dev down setup deploy
docker-compose.dev.yml
+9 -3
View File
@@ -9,6 +9,12 @@ services:
- "traefik.http.services.scraperr.loadbalancer.server.port=3000"
- "traefik.http.routers.scraperr.tls=false"
volumes:
- "$PWD/dist:/project/dist"
- "$PWD/src:/project/src"
- "$PWD/api/backend:/project/api/backend"
- "$PWD/src:/app/src"
- "$PWD/public:/app/public"
- "$PWD/next.config.mjs:/app/next.config.mjs"
- "$PWD/package.json:/app/package.json"
- "$PWD/package-lock.json:/app/package-lock.json"
- "$PWD/tsconfig.json:/app/tsconfig.json"
scraperr_api:
ports:
- "8000:8000"
docker/api/Dockerfile
+1 -1
View File
@@ -21,6 +21,7 @@ RUN npm install
COPY public /app/public
COPY src /app/src
COPY tsconfig.json /app/tsconfig.json
COPY tailwind.config.js /app/tailwind.config.js
COPY next.config.mjs /app/next.config.mjs
@@ -42,7 +43,6 @@ ENV PYTHONPATH=/project/pkgs
COPY --from=pybuilder /usr/local/lib/python3.10/site-packages /usr/local/lib/python3.10/site-packages
COPY --from=pybuilder /usr/local/bin /usr/local/bin
COPY --from=pybuilder /project/app /project/
# COPY --from=jsbuilder /app/dist /project/dist
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
docker/frontend/Dockerfile
+3 -2
View File
@@ -5,13 +5,14 @@ WORKDIR /app
COPY package*.json ./
RUN npm install
COPY public /app/public
COPY src /app/src
COPY tsconfig.json /app/tsconfig.json
COPY tailwind.config.js /app/tailwind.config.js
COPY next.config.mjs /app/next.config.mjs
COPY postcss.config.js /app/postcss.config.js
COPY public /app/public
COPY src /app/src
RUN npm run build
EXPOSE 3000
public/manifest.json
+1 -1
View File
@@ -3,7 +3,7 @@
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.png",
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
src/components/logs/log-container/index.ts
+1
View File
@@ -0,0 +1 @@
export * from "./log-container";
src/components/logs/log-container/log-container.module.css
+3
View File
@@ -0,0 +1,3 @@
.logContainer {
max-width: none !important;
}
src/components/logs/log-container/log-container.tsx
+98
View File
@@ -0,0 +1,98 @@
import React, { useState, useEffect, useRef } from "react";
import { Container, IconButton } from "@mui/material";
import { ArrowUpward, ArrowDownward } from "@mui/icons-material";
import { Constants } from "../../../lib/constants";
import classes from "./log-container.module.css";
interface LogContainerProps {
initialLogs: string;
}
export const LogContainer: React.FC<LogContainerProps> = ({ initialLogs }) => {
const [logs, setLogs] = useState<string>(initialLogs);
const logsContainerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const eventSource = new EventSource(`${Constants.DOMAIN}/api/logs`);
setLogs("");
eventSource.onmessage = (event) => {
setLogs((prevLogs) => prevLogs + event.data + "\n");
if (logsContainerRef.current) {
logsContainerRef.current.scrollTop =
logsContainerRef.current.scrollHeight;
}
};
eventSource.onerror = () => {
eventSource.close();
};
return () => {
eventSource.close();
};
}, []);
const scrollToTop = () => {
if (logsContainerRef.current) {
logsContainerRef.current.scrollTop = 0;
}
};
const scrollToBottom = () => {
if (logsContainerRef.current) {
logsContainerRef.current.scrollTop =
logsContainerRef.current.scrollHeight;
}
};
return (
<Container
sx={{
position: "relative",
backgroundColor: "black",
color: "white",
padding: "10px",
overflowY: "scroll",
whiteSpace: "pre-wrap",
overflowWrap: "normal",
maxHeight: "95vh",
}}
className={classes.logContainer}
ref={logsContainerRef}
>
<pre
style={{
whiteSpace: "pre-wrap",
wordWrap: "break-word",
margin: 0,
}}
>
{logs}
</pre>
<IconButton
sx={{
position: "fixed",
top: 20,
right: 20,
backgroundColor: "rgba(255, 255, 255, 0.1)",
}}
onClick={scrollToTop}
>
<ArrowUpward style={{ color: "white" }} />
</IconButton>
<IconButton
sx={{
position: "fixed",
bottom: 20,
right: 20,
backgroundColor: "rgba(255, 255, 255, 0.1)",
}}
onClick={scrollToBottom}
>
<ArrowDownward style={{ color: "white" }} />
</IconButton>
</Container>
);
};
src/pages/logs.tsx
+3 -91
View File
@@ -1,7 +1,4 @@
import { Container, IconButton } from "@mui/material";
import { ArrowUpward, ArrowDownward } from "@mui/icons-material";
import { useEffect, useRef, useState } from "react";
import { Constants } from "../lib";
import { LogContainer } from "../components/logs/log-container";
interface logs {
logs: string;
@@ -9,7 +6,7 @@ interface logs {
export async function getStaticProps() {
try {
const response = await fetch(`http://scraperr_api:8000/api/initial_logs`);
const response = await fetch(`http://scraperr_api:8000/initial_logs`);
const logJson: logs = await response.json();
const initialLogs = logJson.logs;
@@ -33,92 +30,7 @@ interface LogProps {
}
const Logs = ({ initialLogs }: LogProps) => {
const [logs, setLogs] = useState<string>(initialLogs);
const logsContainerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const eventSource = new EventSource(`${Constants.DOMAIN}/api/logs`);
setLogs("");
eventSource.onmessage = (event) => {
setLogs((prevLogs) => prevLogs + event.data + "\n");
if (logsContainerRef.current) {
logsContainerRef.current.scrollTop =
logsContainerRef.current.scrollHeight;
}
};
eventSource.onerror = () => {
eventSource.close();
};
return () => {
eventSource.close();
};
}, []);
const scrollToTop = () => {
if (logsContainerRef.current) {
logsContainerRef.current.scrollTop = 0;
}
};
const scrollToBottom = () => {
if (logsContainerRef.current) {
logsContainerRef.current.scrollTop =
logsContainerRef.current.scrollHeight;
}
};
return (
<Container
sx={{
position: "relative",
backgroundColor: "black",
color: "white",
padding: "10px",
overflowY: "scroll",
whiteSpace: "pre-wrap",
overflowWrap: "normal",
maxHeight: "95vh",
}}
maxWidth="xl"
ref={logsContainerRef}
>
<pre
style={{
whiteSpace: "pre-wrap",
wordWrap: "break-word",
margin: 0,
}}
>
{logs}
</pre>
<IconButton
sx={{
position: "fixed",
top: 20,
right: 20,
backgroundColor: "rgba(255, 255, 255, 0.1)",
}}
onClick={scrollToTop}
>
<ArrowUpward style={{ color: "white" }} />
</IconButton>
<IconButton
sx={{
position: "fixed",
bottom: 20,
right: 20,
backgroundColor: "rgba(255, 255, 255, 0.1)",
}}
onClick={scrollToBottom}
>
<ArrowDownward style={{ color: "white" }} />
</IconButton>
</Container>
);
return <LogContainer initialLogs={initialLogs} />;
};
export default Logs;