hall / postmerkos-ui Goto Github PK
View Code? Open in Web Editor NEWA basic UI for meraki-builder
A basic UI for meraki-builder
I installed postmerkOS 2023-04-21 on an MS220-8P, and attempted to get the latest release here (0.4.0) up and running, but unfortunately without any luck. It turns out that the required switch binaries are not there yet, and that the data format is still a bit different.
FWIW, here's a patch that got things running with the latest available version of postmerkOS:
diff --git a/assets/cgi-bin/status b/assets/cgi-bin/status
index 15aa0fd..70f92d3 100644
--- a/assets/cgi-bin/status
+++ b/assets/cgi-bin/status
@@ -3,4 +3,4 @@ echo "Content-type: application/json"
echo "" # <- necessary; probably required by the rfc
# echo semi-minifies the response
-echo $(/root/configd -g)
+echo $(switch_status)
diff --git a/src/index.js b/src/index.js
index f09dbb4..8e5f0f5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,7 +14,7 @@ import useInterval from './hook';
let endpoint = "/cgi-bin";
// a local file to test port layouts in dev
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
- endpoint = "/test/24";
+ endpoint = "/test/8";
}
// getConfig returns the latest config file
@@ -164,20 +164,9 @@ export default class App extends Component {
</div>
<div>
<div>{get(this.state.status, "device")}</div>
- <div>{this.state.status.datetime}</div>
-
- {this.state.status &&
- Object.keys(get(this.state.status, "temperature", {})).map((type, value) => {
- return <div>
- <div>{type}:
- {this.state.status.temperature[type].map((c) => {
- return c.toFixed(1) + " "
- })}
- (<span style={{ fontSize: "0.8em" }}>°C</span>)
- </div>
- </div>
- })
- }
+ <div>{this.state.status.date}</div>
+
+ <div>CPU: {this.state.status.temperature} (<span style={{ fontSize: "0.8em" }}>°C</span>)</div>
</div>
</div>
{config &&
diff --git a/src/ports.js b/src/ports.js
index b0b2349..9dc9366 100644
--- a/src/ports.js
+++ b/src/ports.js
@@ -67,7 +67,7 @@ export default class Ports extends Component {
{
Object.keys(ports).sort(compare).map(port => {
let p =
- <Port number={port} port={{ ...status["ports"][port], ...ports[port] }} poe={poe} />
+ <Port number={port} port={status["ports"][port]} poe={poe} />
let idx = port % 12
if ((idx == 0 || idx == 11)) {
return [p, <div style={{ padding: "1rem" }}></div>]
diff --git a/src/table.js b/src/table.js
index cca4011..d45e86a 100644
--- a/src/table.js
+++ b/src/table.js
@@ -37,7 +37,7 @@ export default class Legend extends Component {
</tr>
{Object.keys(ports).map(port => {
// combine status and config
- let p = { ...status.ports[port], ...ports[port] };
+ let p = { ...ports[port], ...status.ports[port] };
let enabled = get(p, 'enabled', true);
let lacp = get(p, 'lacp');
let stp = get(p, 'stp');
@@ -67,13 +67,11 @@ export default class Legend extends Component {
</td>
<td>{get(p, 'link.speed')}</td>
-
- {/* TODO: not found in the merged dict */}
- {poe && <td>{get(status.ports[port], "poe.power").toFixed(2)}</td>}
+ {poe && <td>{Number(get(p, "poe.power")).toFixed(2)}</td>}
<td className={this.diffStyle(port, "vlan.pvid")} >
- <input name="pvid" type="number" min="1" max="4094"
+ <input name="pvid" type="number" min="1" max="4094"
value={get(p, 'vlan.pvid')}
style={"width: 6ch;"}
onChange={e =>
diff --git a/src/test/8/status b/src/test/8/status
index 503c8d2..83cafba 100644
--- a/src/test/8/status
+++ b/src/test/8/status
@@ -1,104 +1,197 @@
{
- "datetime": "2020-12-05T13:24:05Z",
- "device": "MS220-8P",
- "temperature": {
- "cpu": [
- 36.1
- ],
- "poe": [
- 29.8
- ]
+ "device": "MS220-8P",
+ "date": "2024-02-04T00:41:02Z",
+ "temperature": "45.2",
+ "ports": {
+ "1": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 0
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
},
- "ports": {
- "1": {
- "link": {
- "established": true,
- "speed": 1000
- },
- "poe": {
- "power": 100
- }
- },
- "2": {
- "link": {
- "established": true,
- "speed": 100
- },
- "poe": {
- "power": 0
- }
- },
- "3": {
- "link": {
- "established": false,
- "speed": 0
- },
- "poe": {
- "power": 0
- }
- },
- "4": {
- "link": {
- "established": false,
- "speed": 0
- },
- "poe": {
- "power": 0
- }
- },
- "5": {
- "link": {
- "established": false,
- "speed": 0
- },
- "poe": {
- "power": 0
- }
- },
- "6": {
- "link": {
- "established": false,
- "speed": 0
- },
- "poe": {
- "power": 0
- }
- },
- "7": {
- "link": {
- "established": false,
- "speed": 0
- },
- "poe": {
- "power": 0
- }
- },
- "8": {
- "link": {
- "established": false,
- "speed": 0
- },
- "poe": {
- "power": 0
- }
- },
- "9": {
- "link": {
- "established": false,
- "speed": 0
- },
- "poe": {
- "power": 0
- }
- },
- "10": {
- "link": {
- "established": false,
- "speed": 0
- },
- "poe": {
- "power": 0
- }
- }
+ "2": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 100
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
+ },
+ "3": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 1000
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
+ },
+ "4": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 0
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
+ },
+ "5": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 0
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
+ },
+ "6": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 0
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
+ },
+ "7": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 0
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
+ },
+ "8": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 0
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
+ },
+ "9": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 0
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
+ },
+ "10": {
+ "enabled": true,
+ "lacp": true,
+ "link": {
+ "established": true,
+ "speed": 0
+ },
+ "vlan": {
+ "pvid": 1,
+ "allowed": "1-4094",
+ "tag_in": 1,
+ "untag_in": 1
+ },
+ "poe": {
+ "enabled": true,
+ "standard": "802.3at",
+ "power": "0.0"
+ }
}
-}
\ No newline at end of file
+ }
+}
(package-lock.json
diff emitted... Node 16 wants to upgrade to v2 of the format, so it's unrelated to any of my tweaks).
It's slow, as has been pointed out, but it works, at least for the status display -- I haven't yet attempted to configure the switch with this.
Also, a question -- the code merged status
and config
with the latter winning, which meant that e.g. updates in the switch status weren't being displayed (e.g. link speed, PoE power, ...). ISTM that this should be the reverse, but I haven't quite dug into the way updates are done. In any case, doing so means I at least get a more-or-less realtime display of switch status vs. a static display of the config.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.