diff options
| author | Asad Memon <asadmemon@google.com> | 2023-06-16 00:09:37 +0000 |
|---|---|---|
| committer | CQ Bot Account <pigweed-scoped@luci-project-accounts.iam.gserviceaccount.com> | 2023-06-16 00:09:37 +0000 |
| commit | feb469c15adaceea635c21a0005c947fe7c41edb (patch) | |
| tree | 09fa4dfc78cdc9cf5fe96e208846e05bd8faffc0 /pw_web | |
| parent | 592503204f5dd8c374599310c12c1cd44009d597 (diff) | |
| download | pigweed-feb469c15adaceea635c21a0005c947fe7c41edb.tar.gz | |
pw_web: Implement PigweedRPCLogSource for log viewer component
Change-Id: Icc8e21782edd61c75d6e68dbbae37f8e4de7a7ca
Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/150230
Reviewed-by: Luis Flores <lesprit@google.com>
Commit-Queue: Asad Memon <asadmemon@google.com>
Diffstat (limited to 'pw_web')
| -rw-r--r-- | pw_web/log-viewer/src/components/createLogViewer.ts | 2 | ||||
| -rw-r--r-- | pw_web/webconsole/pages/index.tsx | 15 | ||||
| -rw-r--r-- | pw_web/webconsole/styles/Home.module.scss | 4 | ||||
| -rw-r--r-- | pw_web/webconsole/styles/globals.css | 1 |
4 files changed, 17 insertions, 5 deletions
diff --git a/pw_web/log-viewer/src/components/createLogViewer.ts b/pw_web/log-viewer/src/components/createLogViewer.ts index 4e3832705..1944b80c5 100644 --- a/pw_web/log-viewer/src/components/createLogViewer.ts +++ b/pw_web/log-viewer/src/components/createLogViewer.ts @@ -33,7 +33,7 @@ export function createLogViewer(logSource: LogSource, root: HTMLElement) { // Define an event listener for the 'logEntry' event const logEntryListener = (logEntry: LogEntry) => { - logs.unshift(logEntry); + logs.push(logEntry); logViewer.logs = logs; logViewer.requestUpdate("logs", []); }; diff --git a/pw_web/webconsole/pages/index.tsx b/pw_web/webconsole/pages/index.tsx index b497393d8..1a020a424 100644 --- a/pw_web/webconsole/pages/index.tsx +++ b/pw_web/webconsole/pages/index.tsx @@ -21,12 +21,20 @@ import Connect from "../components/connect"; import BtnUploadDB from '../components/uploadDb'; import {WebSerial, Device} from "pigweedjs"; -import {useState} from 'react'; -type WebSerialTransport = WebSerial.WebSerialTransport +import {useState, useEffect} from 'react'; const Home: NextPage = () => { const [device, setDevice] = useState<Device | undefined>(undefined); const [tokenDB, setTokenDB] = useState(""); + useEffect(() => { + if (!device || !tokenDB) return; + // Dynamically load logging component + import('pigweedjs/logging') + .then(({createLogViewer, PigweedRPCLogSource}) => { + const source = new PigweedRPCLogSource(device, tokenDB); + createLogViewer(source, document.querySelector('.log-container')!); + }); + }, [device, tokenDB]); return ( <div className={styles.container}> <Head> @@ -47,8 +55,7 @@ const Home: NextPage = () => { </div> <div className={styles.grid}> - <div> - <Log device={device} tokenDB={tokenDB}></Log> + <div className={'log-container ' + styles.logsContainer}> </div> <div> <Repl device={device}></Repl> diff --git a/pw_web/webconsole/styles/Home.module.scss b/pw_web/webconsole/styles/Home.module.scss index 5f671c86a..cd63cee5f 100644 --- a/pw_web/webconsole/styles/Home.module.scss +++ b/pw_web/webconsole/styles/Home.module.scss @@ -67,6 +67,10 @@ } } +.logsContainer{ + height: calc(100vh - 78px); +} + @media (max-width: 600px) { .grid { width: 100%; diff --git a/pw_web/webconsole/styles/globals.css b/pw_web/webconsole/styles/globals.css index ac741785b..bc677fb2d 100644 --- a/pw_web/webconsole/styles/globals.css +++ b/pw_web/webconsole/styles/globals.css @@ -13,6 +13,7 @@ * License for the specific language governing permissions and limitations under * the License. */ +@import url('https://fonts.googleapis.com/css2?family=Google+Sans&family=Roboto+Mono:wght@400;500&family=Material+Symbols+Outlined&display=swap'); html, body { padding: 0; |