From 14cf2e9dbc7bb86ee20e6dac58d9ec8bf1493ebd Mon Sep 17 00:00:00 2001 From: Jayden Pyles Date: Fri, 18 Oct 2024 17:19:46 -0500 Subject: [PATCH] fix: make general fixes to dev containers and log pages --- Makefile | 4 +- docker-compose.dev.yml | 12 ++- docker/api/Dockerfile | 2 +- docker/frontend/Dockerfile | 5 +- public/manifest.json | 2 +- src/components/logs/log-container/index.ts | 1 + .../log-container/log-container.module.css | 3 + .../logs/log-container/log-container.tsx | 98 +++++++++++++++++++ src/pages/logs.tsx | 94 +----------------- 9 files changed, 121 insertions(+), 100 deletions(-) create mode 100644 src/components/logs/log-container/index.ts create mode 100644 src/components/logs/log-container/log-container.module.css create mode 100644 src/components/logs/log-container/log-container.tsx diff --git a/Makefile b/Makefile index e1788a3..b67740e 100644 --- a/Makefile +++ b/Makefile @@ -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 diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 14fd97d..1864bdc 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -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" diff --git a/docker/api/Dockerfile b/docker/api/Dockerfile index a261b17..9e9d8de 100644 --- a/docker/api/Dockerfile +++ b/docker/api/Dockerfile @@ -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 diff --git a/docker/frontend/Dockerfile b/docker/frontend/Dockerfile index db33fff..8e07482 100644 --- a/docker/frontend/Dockerfile +++ b/docker/frontend/Dockerfile @@ -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 diff --git a/public/manifest.json b/public/manifest.json index e83b198..080d6c7 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -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" }, diff --git a/src/components/logs/log-container/index.ts b/src/components/logs/log-container/index.ts new file mode 100644 index 0000000..6b05880 --- /dev/null +++ b/src/components/logs/log-container/index.ts @@ -0,0 +1 @@ +export * from "./log-container"; diff --git a/src/components/logs/log-container/log-container.module.css b/src/components/logs/log-container/log-container.module.css new file mode 100644 index 0000000..6eb60fc --- /dev/null +++ b/src/components/logs/log-container/log-container.module.css @@ -0,0 +1,3 @@ +.logContainer { + max-width: none !important; +} diff --git a/src/components/logs/log-container/log-container.tsx b/src/components/logs/log-container/log-container.tsx new file mode 100644 index 0000000..f74eb5d --- /dev/null +++ b/src/components/logs/log-container/log-container.tsx @@ -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 = ({ initialLogs }) => { + const [logs, setLogs] = useState(initialLogs); + const logsContainerRef = useRef(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 ( + + 
+        {logs}
+
+ + + + + + + + ); +}; diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx index 22adbe5..ec146fa 100644 --- a/src/pages/logs.tsx +++ b/src/pages/logs.tsx @@ -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(initialLogs); - const logsContainerRef = useRef(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 ( - - 
-        {logs}
-
- - - - - - - - ); + return ; }; export default Logs;