Dashboard

package.json

@@ -8,6 +8,7 @@
   },
   "workspaces": [
     "packages/nars",
+    "packages/dashboard",
     "packages/nars-common",
     "packages/nars-client",
     "packages/reason-react-reconciler",

packages/dashboard/Client.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { spawn } from "child_process";
+import stylesheet from "./stylesheet";
+
+export default class Client extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      logs: [],
+    };
+  }
+
+  componentDidMount() {
+    const subprocess = spawn("yarn", ["build-client"], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      this.setState(state => ({
+        logs: [data.toString("utf-8"), ...state.logs],
+      }));
+    });
+  }
+
+  render() {
+    const { width, height, top, right, left } = this.props;
+
+    return (
+      <box
+        label="Client"
+        class={stylesheet.bordered}
+        top={top}
+        right={right}
+        left={left}
+        width={width}
+        height={height}
+        draggable={true}
+      >
+        <list items={this.state.logs} />
+      </box>
+    );
+  }
+}

packages/dashboard/Common.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { spawn } from "child_process";
+import stylesheet from "./stylesheet";
+
+export default class Common extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      logs: [],
+    };
+  }
+
+  componentDidMount() {
+    const subprocess = spawn("yarn", ["build-common"], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      this.setState(state => ({
+        logs: [data.toString("utf-8"), ...state.logs],
+      }));
+    });
+  }
+
+  render() {
+    const { width, height, top, right, left } = this.props;
+
+    return (
+      <box
+        label="Common"
+        class={stylesheet.bordered}
+        top={top}
+        right={right}
+        left={left}
+        width={width}
+        height={height}
+        draggable={true}
+      >
+        <list items={this.state.logs} />
+      </box>
+    );
+  }
+}

packages/dashboard/NarsClient.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { spawn } from "child_process";
+import stylesheet from "./stylesheet";
+
+export default class NarsClient extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      logs: [],
+    };
+  }
+
+  componentDidMount() {
+    const subprocess = spawn("yarn", ["build-nars-client"], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      this.setState(state => ({
+        logs: [data.toString("utf-8"), ...state.logs],
+      }));
+    });
+  }
+
+  render() {
+    const { width, height, top, right, left } = this.props;
+
+    return (
+      <box
+        label="Nars Client"
+        class={stylesheet.bordered}
+        top={top}
+        right={right}
+        left={left}
+        width={width}
+        height={height}
+        draggable={true}
+      >
+        <list items={[...this.state.logs]} />
+      </box>
+    );
+  }
+}

packages/dashboard/NarsCommon.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { spawn } from "child_process";
+import stylesheet from "./stylesheet";
+
+export default class NarsCommon extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      logs: [],
+    };
+  }
+
+  componentDidMount() {
+    const subprocess = spawn("yarn", ["build-nars-common"], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      this.setState(state => ({
+        logs: [data.toString("utf-8"), ...state.logs],
+      }));
+    });
+  }
+
+  render() {
+    const { width, height, top, right, left } = this.props;
+
+    return (
+      <box
+        label="Nars Common"
+        class={stylesheet.bordered}
+        top={top}
+        right={right}
+        left={left}
+        width={width}
+        height={height}
+        draggable={true}
+      >
+        <list items={[...this.state.logs]} />
+      </box>
+    );
+  }
+}

packages/dashboard/NarsRe.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { spawn } from "child_process";
+import stylesheet from "./stylesheet";
+
+export default class NarsRe extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      logs: [],
+    };
+  }
+
+  componentDidMount() {
+    const subprocess = spawn("yarn", ["build-nars-re"], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      this.setState(state => ({
+        logs: [data.toString("utf-8"), ...state.logs],
+      }));
+    });
+  }
+
+  render() {
+    const { width, height, top, right, left } = this.props;
+
+    return (
+      <box
+        label="Nars - RE"
+        class={stylesheet.bordered}
+        top={top}
+        right={right}
+        left={left}
+        width={width}
+        height={height}
+        draggable={true}
+      >
+        <list items={[...this.state.logs]} />
+      </box>
+    );
+  }
+}

packages/dashboard/NarsTs.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { spawn } from "child_process";
+import stylesheet from "./stylesheet";
+
+export default class NarsTs extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      logs: [],
+    };
+  }
+
+  componentDidMount() {
+    const subprocess = spawn("yarn", ["build-nars-ts"], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      this.setState(state => ({
+        logs: [data.toString("utf-8"), ...state.logs],
+      }));
+    });
+  }
+
+  render() {
+    const { width, height, top, right, left } = this.props;
+
+    return (
+      <box
+        label="Nars - TS"
+        class={stylesheet.bordered}
+        top={top}
+        right={right}
+        left={left}
+        width={width}
+        height={height}
+        draggable={true}
+      >
+        <list items={[...this.state.logs]} />
+      </box>
+    );
+  }
+}

packages/dashboard/Server.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { spawn } from "child_process";
+import stylesheet from "./stylesheet";
+
+export default class Server extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      logs: [],
+    };
+  }
+
+  componentDidMount() {
+    const subprocess = spawn("yarn", ["build-server"], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      this.setState(state => ({
+        logs: [data.toString("utf-8"), ...state.logs],
+      }));
+    });
+  }
+
+  render() {
+    const { width, height, top, right, left } = this.props;
+
+    return (
+      <box
+        label="Server"
+        class={stylesheet.bordered}
+        top={top}
+        right={right}
+        left={left}
+        width={width}
+        height={height}
+        draggable={true}
+      >
+        <list items={this.state.logs} />
+      </box>
+    );
+  }
+}

packages/dashboard/core.js

@@ -0,0 +1,36 @@
+import React from "react";
+import blessed from "blessed";
+import { render } from "react-blessed";
+import Server from "./Server";
+import Client from "./Client";
+import Common from "./Common";
+import NarsTs from "./NarsTs";
+import NarsRe from "./NarsRe";
+import NarsClient from "./NarsClient";
+import NarsCommon from "./NarsCommon";
+
+const Cpre = () => {
+  return (
+    <element>
+      <NarsTs height="50%" width="50%" />
+      <NarsRe top="50%" height="50%" width="50%" />
+      <NarsClient right="0" height="50%" width="50%" />
+      <NarsCommon top="50%" right="0" height="50%" width="50%" />
+    </element>
+  );
+};
+
+/**
+ * Rendering the screen.
+ */
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: "Nars core dashboard",
+});
+
+screen.key(["escape", "q", "C-c"], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<Cpre />, screen);

packages/dashboard/examples.js

@@ -0,0 +1,31 @@
+import React from "react";
+import blessed from "blessed";
+import { render } from "react-blessed";
+import Server from "./Server";
+import Client from "./Client";
+import Common from "./Common";
+
+const Examples = () => {
+  return (
+    <element>
+      <Client height="50%" width="100%" />
+      <Server top="50%" height="50%" width="70%" />
+      <Common top="50%" height="50%" width="30%" right="0" />
+    </element>
+  );
+};
+
+/**
+ * Rendering the screen.
+ */
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: "Nars examples dashboard",
+});
+
+screen.key(["escape", "q", "C-c"], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<Examples />, screen);