diff --git a/packages/web_ui/src/components/InstanceViewPage.jsx b/packages/web_ui/src/components/InstanceViewPage.jsx index 46733bef..116b7e54 100644 --- a/packages/web_ui/src/components/InstanceViewPage.jsx +++ b/packages/web_ui/src/components/InstanceViewPage.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useContext, useState } from "react"; +import React, { useEffect, useContext, useRef, useState } from "react"; import { useHistory, useParams } from "react-router-dom"; import { notification, Button, Card, Checkbox, Col, Descriptions, Dropdown, Form, Input, InputNumber, Modal, @@ -114,9 +114,27 @@ function formatLog(info, key) { function InstanceConsole(props) { let control = useContext(ControlContext); - let [lines, setLines] = useState([{""}
]); + let anchor = useRef(); + let [pastLines, setPastLines] = useState([{"Loading past entries..."}
]); + let [lines, setLines] = useState([]); useEffect(() => { + // Scroll view to the anchor so it sticks to the bottom + let parent = anchor.current.parentElement; + parent.scrollTop = parent.scrollHeight - parent.clientHeight; + + libLink.messages.queryLog.send(control, { + all: false, + master: false, + slave_ids: [], + instance_ids: [props.id], + max_level: null, + }).then(result => { + setPastLines(result.log.slice(-400).map((info, index) => formatLog(info, index))); + }).catch(err => { + setPastLines([{`Error loading log: ${err.message}`}
]); + }); + function logHandler(info) { setLines(currentLines => currentLines.concat( [formatLog(info, currentLines.length)] @@ -131,8 +149,9 @@ function InstanceConsole(props) { return <> + {pastLines} {lines} -
+
; } diff --git a/packages/web_ui/src/index.css b/packages/web_ui/src/index.css index 647e2ab9..ba26fe24 100644 --- a/packages/web_ui/src/index.css +++ b/packages/web_ui/src/index.css @@ -109,6 +109,10 @@ body { height: 300px; overflow-y: scroll; white-space: pre-wrap; + + /* Make sure there's at least one pixel of scroll space, this */ + /* is necessary for the view to stick on the scroll anchor. */ + padding-top: 300px; } .instance-console .factorio-time {