From 7b75d4f0bb29f84563563380a1ec209e2a1f5c51 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Mon, 30 Nov 2020 02:27:09 +0100
Subject: [PATCH] Fetch log in web interface instance view

Use the queryLog request to add past entries to the log fix the console
view to scroll to the bottom and stick there upon being loaded up.
---
 .../src/components/InstanceViewPage.jsx       | 25 ++++++++++++++++---
 packages/web_ui/src/index.css                 |  4 +++
 2 files changed, 26 insertions(+), 3 deletions(-)

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([<span key={0}>{"<previous messages are not shown>"}<br/></span>]);
+	let anchor = useRef();
+	let [pastLines, setPastLines] = useState([<span key={0}>{"Loading past entries..."}<br/></span>]);
+	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([<span key={0}>{`Error loading log: ${err.message}`}<br/></span>]);
+		});
+
 		function logHandler(info) {
 			setLines(currentLines => currentLines.concat(
 				[formatLog(info, currentLines.length)]
@@ -131,8 +149,9 @@ function InstanceConsole(props) {
 
 	return <>
 		<Paragraph code className="instance-console">
+			{pastLines}
 			{lines}
-			<div className="scroll-anchor" />
+			<div className="scroll-anchor" ref={anchor} />
 		</Paragraph>
 	</>;
 }
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 {