Release 1.2.8

Luligu · Apr 16, 2024 · 90162af · 90162af
1 parent e058903
commit 90162af
Show file tree

Hide file tree

Showing 16 changed files with 212 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,14 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
-## [1.2.8] - 2024-04-15
+## [1.2.8] - 2024-04-16
 
 ### Changed
 - [matter.js]: Update to @project-chip/matter-node.js v. 0.8.1
 
 ### Added
 
-- [frontend]: Added log for update and plugin install (soon the full log).
+- [frontend]: Added logs in the Home page and in the Log page.
+- [frontend]: Frontend got updated to 0.8.5.
+- [frontend]: Added log for update and plugin install.
 - [extension]: Started implementation of zigbee2MQTT internal extension.
 
 ### Fixed

diff --git a/frontend/build/asset-manifest.json b/frontend/build/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.4c325919.css",
-    "main.js": "/static/js/main.29591b00.js",
+    "main.js": "/static/js/main.90cbbf6e.js",
     "static/js/453.d855a71b.chunk.js": "/static/js/453.d855a71b.chunk.js",
     "index.html": "/index.html",
     "main.4c325919.css.map": "/static/css/main.4c325919.css.map",
-    "main.29591b00.js.map": "/static/js/main.29591b00.js.map",
+    "main.90cbbf6e.js.map": "/static/js/main.90cbbf6e.js.map",
     "453.d855a71b.chunk.js.map": "/static/js/453.d855a71b.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.4c325919.css",
-    "static/js/main.29591b00.js"
+    "static/js/main.90cbbf6e.js"
   ]
 }
diff --git a/frontend/build/index.html b/frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="/manifest.json"/><script defer="defer" src="/static/js/main.29591b00.js"></script><link href="/static/css/main.4c325919.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="/manifest.json"/><script defer="defer" src="/static/js/main.90cbbf6e.js"></script><link href="/static/css/main.4c325919.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/frontend/build/static/js/main.29591b00.js.map b/frontend/build/static/js/main.29591b00.js.map
diff --git a/frontend/build/static/js/main.29591b00.js → frontend/build/static/js/main.90cbbf6e.js b/frontend/build/static/js/main.29591b00.js → frontend/build/static/js/main.90cbbf6e.js
diff --git a/...ld/static/js/main.29591b00.js.LICENSE.txt → ...ld/static/js/main.90cbbf6e.js.LICENSE.txt b/...ld/static/js/main.29591b00.js.LICENSE.txt → ...ld/static/js/main.90cbbf6e.js.LICENSE.txt
diff --git a/frontend/build/static/js/main.90cbbf6e.js.map b/frontend/build/static/js/main.90cbbf6e.js.map
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -10,6 +10,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "matter-history": "file:../../matter-history",
+    "node-ansi-logger": "^1.9.5",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -7,6 +7,7 @@ import Home from './components/Home';
 import Devices from './components/Devices';
 import Settings from './components/Settings';
 import Test from './components/Test';
+import Log from './components/Log';
 
 /*
       <div style={{backgroundColor: 'lightgray'}} >
@@ -97,6 +98,7 @@ function LoginForm() {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/devices" element={<Devices />} />
+            <Route path="/log" element={<Log />} />
             <Route path="/settings" element={<Settings />} />
             <Route path="/test" element={<Test />} />
           </Routes>
@@ -161,6 +163,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/devices" element={<Devices />} />
+          <Route path="/log" element={<Log />} />
           <Route path="/settings" element={<Settings />} />
           <Route path="/test" element={<Test />} />
         </Routes>

diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
@@ -84,6 +84,7 @@ function Header() {
       <nav>
         <Link to="/" className="nav-link">Home</Link>
         <Link to="/devices" className="nav-link">Devices</Link>
+        <Link to="/log" className="nav-link">Log</Link>
         <Link to="/settings" className="nav-link">Settings</Link>
       </nav>
       <div className="header" style={{ flex: 1, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>

diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
@@ -1,5 +1,5 @@
 // Home.js
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import QRCode from 'qrcode.react';
 import { StatusIndicator } from './StatusIndicator';
 import QrCode2Icon from '@mui/icons-material/QrCode2';
@@ -18,6 +18,8 @@ import DownloadIcon from '@mui/icons-material/Download';
 // npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
 
 function Home() {
+  const [host, setHost] = useState(null);
+  const [port, setPort] = useState(null);
   const [qrCode, setQrCode] = useState('');
   const [pairingCode, setPairingCode] = useState('');
   const [systemInfo, setSystemInfo] = useState({});
@@ -27,6 +29,9 @@ function Home() {
   const [selectedPluginName, setSelectedPluginName] = useState('none'); // -1 no selection, 0 or greater for selected row
   const [open, setSnack] = useState(false);
 
+  const refAddRemove = useRef(null);
+  const refRegisteredPlugins = useRef(null);
+
   const handleSnackOpen = () => {
     console.log('handleSnackOpen');
     setSnack(true);
@@ -54,7 +59,19 @@ function Home() {
  /*
  */
   useEffect(() => {
-    // Fetch manual pairingCode
+    // Fetch wss host
+    fetch('/api/wsshost')
+      .then(response => response.json())
+      .then(data => { console.log('/api/wsshost:', data.host); setHost(data.host); localStorage.setItem('host', data.host); })
+      .catch(error => console.error('Error fetching wsshost:', error));
+
+    // Fetch wss port
+    fetch('/api/wssport')
+      .then(response => response.json())
+      .then(data => { console.log('/api/wssport:', data.port); setPort(data.port); localStorage.setItem('port', data.port); })
+      .catch(error => console.error('Error fetching wssport:', error));
+
+      // Fetch manual pairingCode
     fetch('/api/pairing-code')
       .then(response => response.json())
       .then(data => { 
@@ -92,6 +109,9 @@ function Home() {
       .then(data => { setPlugins(data); console.log('/api/plugins:', data)})
       .catch(error => console.error('Error fetching plugins:', error));
 
+      //if(refAddRemove && refRegisteredPlugins)
+        //console.log(`refAddRemove ${refAddRemove} refRegisteredPlugins ${refRegisteredPlugins}`, refAddRemove, refRegisteredPlugins);
+
   }, []); // The empty array causes this effect to run only once
 
   const handleSelect = (row) => {
@@ -127,15 +147,19 @@ function Home() {
   /*
         {matterbridgeInfo && <MatterbridgeInfoTable matterbridgeInfo={matterbridgeInfo}/>}
   */
+
+  if (host === null || port === null) {
+    return <div>Loading...</div>;
+  }
   return (
     <div style={{ display: 'flex', flexDirection: 'row', height: 'calc(100vh - 60px - 40px)', width: 'calc(100vw - 40px)', gap: '20px', margin: '0', padding: '0' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', flex: '0 1 auto', gap: '20px' }}>
+      <div  style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 60px - 40px)', flex: '0 1 auto', gap: '20px' }}>
         {qrCode && <QRDiv qrText={qrCode} pairingText={pairingCode} qrWidth={256} topText="QRCode" bottomText={selectedPluginName==='none'?'Matterbridge':selectedPluginName}/>}
         {systemInfo && <SystemInfoTable systemInfo={systemInfo}/>}
       </div>
-      <div style={{ display: 'flex', flexDirection: 'column', flex: '1 1 auto', gap: '20px' }}>
-        <AddRemovePluginsDiv plugins={plugins}/>
-        <table>
+      <div  style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 60px - 40px)', flex: '0 1 auto', width: '100%', gap: '20px' }}>
+        <AddRemovePluginsDiv ref={refAddRemove} plugins={plugins}/>
+        <table ref={refRegisteredPlugins}>
           <thead>
             <tr>
               <th className="table-header" colSpan="8">Registered plugins</th>
@@ -195,18 +219,33 @@ function Home() {
           </tbody>
         </table>
 
-        <div className="MbfWindowDiv" style={{alignItems: 'left', flex: '1 1 auto', overflow: 'auto'}}>
+        <div className="MbfWindowDiv" style={{display: 'flex', flexDirection: 'column', flex: '0 1 auto'}}>
           <div className="MbfWindowHeader">
             <p className="MbfWindowHeaderText" style={{textAlign: 'left'}}>Log</p>
           </div>
-          <div style={{ margin: '0px', padding: '0px', alignItems: 'left'}}>
-            <WebSocketComponent/>
+          <div style={{ margin: '5px', padding: '5px', height: '200px', maxHeight: '200px', overflow: 'auto'}}>
+            <WebSocketComponent host={host} port={port} height="100%"/>
           </div>
         </div>
 
       </div>
     </div>
   );}
+  /*
+        Working
+        <div className="MbfWindowDiv" style={{display: 'flex', flexDirection: 'column', flex: '0 1 auto'}}>
+          <div className="MbfWindowHeader">
+            <p className="MbfWindowHeaderText" style={{textAlign: 'left'}}>Log</p>
+          </div>
+          <div style={{ margin: '5px', padding: '5px', height: '200px', maxHeight: '200px', overflow: 'auto'}}>
+            <WebSocketComponent host={host} port={port} height="100%"/>
+          </div>
+        </div>
+
+        <div style={{ margin: '0px', padding: '0px', maxHeight: '200px', overflow: 'auto'}}>
+    style={{flex: '1 1 auto'}}
+    height: '200px'
+  */
 
   function AddRemovePluginsDiv({ plugins }) {
     const [pluginName, setPluginName] = useState('matterbridge-');

diff --git a/frontend/src/components/Log.js b/frontend/src/components/Log.js
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import WebSocketComponent from './WebSocketComponent';
+
+export const MatterbridgeInfoContext = React.createContext();
+
+function Log() {
+  const [host, setHost] = useState(null);
+  const [port, setPort] = useState(null);
+
+  useEffect(() => {
+    // Fetch wss host
+    fetch('/api/wsshost')
+      .then(response => response.json())
+      .then(data => { console.log('/api/wsshost:', data.host); setHost(data.host); localStorage.setItem('host', data.host); })
+      .catch(error => console.error('Error fetching wsshost:', error));
+
+    // Fetch wss port
+    fetch('/api/wssport')
+      .then(response => response.json())
+      .then(data => { console.log('/api/wssport:', data.port); setPort(data.port); localStorage.setItem('port', data.port); })
+      .catch(error => console.error('Error fetching wssport:', error));
+  }, []); // The empty array causes this effect to run only once
+
+  if (host === null || port === null) {
+    return <div>Loading...</div>;
+  }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 60px - 40px)', width: 'calc(100vw - 40px)', gap: '10px' , margin: '0', padding: '0' }}>
+      <h3>Logs:</h3>
+      <div style={{ flex: '1', overflow: 'auto', margin: '0px', padding: '0px' }}>
+        <WebSocketComponent host={host} port={port} height={300}/>
+      </div>  
+    </div>
+  );
+}
+
+export default Log;
+/*
+    <div style={{ display: 'flex', flex: 1, flexBasis: 'auto', flexDirection: 'column', height: 'calc(100vh - 60px - 40px)', width: 'calc(100vw - 40px)', gap: '10px' , margin: '0', padding: '0' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', flex: '0 0 auto' }}>
+        <h3>Logs:</h3>
+      </div>  
+      <div style={{ display: 'flex', flexDirection: 'row', flex: '1 1 auto', margin: '0px', padding: '0px', overflow: 'auto' }}>
+        <WebSocketComponent host={host} port={port} height={300}/>
+      </div>  
+    </div>
+
+
+
+
+*/
diff --git a/frontend/src/components/WebSocketComponent.js b/frontend/src/components/WebSocketComponent.js
@@ -1,11 +1,58 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import useWebSocket from './useWebSocket';
 
-function WebSocketComponent() {
+function WebSocketComponent(props) {
+    const { host, port, height } = props;
     const [message, setMessage] = useState('');
-    const { messages, sendMessage } = useWebSocket('ws://localhost:8284');
+    const { messages, sendMessage } = useWebSocket(`ws://${host}:${port}`);
+    const endOfMessagesRef = useRef(null); // Create a ref for scrolling purposes
+    const messageListRef = useRef(null); // Ref for the message list container
+    console.log(`WebSocketComponent host: ${host}, port: ${port}, height: ${height}`);
+
+    // Scroll to the bottom of the message list on every update, only if already at bottom
+    useEffect(() => {
+        const messageList = messageListRef.current;
+        if (messageList) {
+            const { scrollHeight, scrollTop, clientHeight } = messageList;
+            const isAtBottom = scrollHeight - scrollTop <= clientHeight; 
+            //console.log(`ScrollHeight: ${scrollHeight}, ScrollTop: ${scrollTop}, Difference:${scrollHeight - scrollTop} ,ClientHeight: ${clientHeight}, isAtBottom: ${isAtBottom}`);
+            if (isAtBottom) {
+                //console.log('User is at bottom, scrolling to bottom.');
+                endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth' });
+            } else {
+                //console.log('User is not at bottom, not scrolling.');
+            }
+        }
+    }, [messages]);
+
+    return (
+            <ul ref={messageListRef} style={{ margin: '10px', padding: '10px' }}>
+                {messages.map((msg, index) => (
+                    <li key={index}>{msg}</li>
+                ))}
+                <div ref={endOfMessagesRef} /> {/* Invisible element to mark the end */}
+            </ul>
+    );
+}
+
+export default WebSocketComponent;
 
     /*
+        <div>
+            <ul ref={messageListRef}>
+                {messages.map((msg, index) => (
+                    <li key={index}>{msg}</li>
+                ))}
+                <div ref={endOfMessagesRef} /> {}
+                </ul>
+                </div>
+            // Scroll to the bottom of the message list on every update
+    useEffect(() => {
+        if (endOfMessagesRef.current) {
+            endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages]);
+
             <input
                 type="text"
                 value={message}
@@ -16,15 +63,3 @@ function WebSocketComponent() {
                 Send Message
             </button>
     */
-    return (
-        <div>
-            <ul>
-                {messages.map((msg, index) => (
-                    <li key={index}>{msg}</li>
-                ))}
-            </ul>
-        </div>
-    );
-}
-
-export default WebSocketComponent;
diff --git a/frontend/src/components/useWebSocket.js b/frontend/src/components/useWebSocket.js
@@ -11,7 +11,7 @@ function useWebSocket(url) {
             const msg = JSON.parse(event.data);
             setMessages(prevMessages => {
                 // Create new array with new message
-                const newMessages = [...prevMessages, `${msg.type}: ${msg.message}`];
+                const newMessages = [...prevMessages, `${msg.subType}-[${msg.type}]: ${msg.message}`];
                 // Check if the new array length exceeds the maximum allowed
                 if (newMessages.length > maxMessages) {
                     // Remove the oldest messages to maintain maxMessages count

diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "version:major": "npm version major"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin": "^1.7.0",
+    "@stylistic/eslint-plugin": "^1.7.2",
     "@tsconfig/node-lts": "^20.1.3",
     "@types/express": "^4.17.21",
     "@types/node": "^20.12.7",
@@ -82,8 +82,8 @@
     "@project-chip/matter-node.js": "^0.8.1",
     "body-parser": "^1.20.2",
     "express": "^4.19.2",
-    "matter-history": "file:../matter-history",
-    "node-ansi-logger": "^1.9.3",
+    "matter-history": "^1.0.15",
+    "node-ansi-logger": "^1.9.5",
     "node-persist-manager": "^1.0.7",
     "ws": "^8.16.0"
   }