Implement RF Console with SSE or WebSocket tunnels

shah commented 2 years ago

Use a web sockets based live diagnostics page called "Console" to send access logs, error messages, etc. from the experimental (development) server. This will allow the CLI console to only have important status messages while all other logs are sent to the browser Console.

[x] support Oak Server-Sent Events instead (in addition to?) websockets (see Server-Sent Events: the alternative to WebSockets you should be using for elaboration)
[x] support WebSocket tunnels
[ ] create ephemeral logging in the browser through websockets
[x] Use Effector state manager
[ ] use Phoenix Live View Dashboard type content in Console
[x] create SQLite-based logging which could save content to file (implemented as a command proxy so that all commands could be trapped by middleware)
[ ] an alternative to consider is creating a RF Console browser extension
[ ] consider this or this polyfill for use in Deno or clients that don't support EventSource

Phoenix Live View Dashboard inspired requirements

Home - See general information about the system
OS Data - See general information about OS, such as CPU, Memory and Disk usage
Metrics - See how your application performs under different conditions by visualizing :telemetry events with real-time charts
Request logging - See everything that was logged for certain requests
Applications - See, filter, and search applications in the current node
Processes - See, filter, and search processes in the current node
Ports - See, filter, and search ports (responsible for I/O) in the current node
Sockets - See, filter, and search sockets (responsible for tcp/udp) in the current node

RF Console as a browser extension elaboration

Basically the Resource Factory Console could be a pane/plugin in Chrome / Edge Chromium developer tools for inspecting internals.

Turborepo has the "profiles" feature which they describe as "Profile in your browser: Generate build profiles and import them in Chrome or Edge to understand which tasks are taking the longest." We should do the same.

An interesting approach would be to not create a generic RF devtools extension but, instead, generate a custom devtools extension as an output of the site's build process. Basically, all diagnostics wrapped into an extension specific to that site?

For additional debugging assistance supply some devtool code snippets.

shah commented 2 years ago

This is an example of how to create /sse endpoint with Oak:

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const app = new Application();
const router = new Router();

router.get('/', ctx => {
  ctx.response.body = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>Server Send Events</title>
        <meta charset="utf-8">
        <script>
          const sse = new EventSource('/server-sent-events');
          sse.onerror = () => document.body.innerHTML = 'Connection Error';
          sse.onmessage = ({ data }) => document.body.innerHTML = data;
        </script>
      </head>
      <body></body>
    </html>
  `;
})

router.get("/server-sent-events", (ctx) => {
  const target = ctx.sendEvents();
  const sendDate = () => target.dispatchMessage(`${new Date()}`);
  sendDate();
  const interval = setInterval(sendDate, 1000);
});

app.use(router.routes());
await app.listen({ port: 8080 });

shah commented 2 years ago

Everything useful in this ticket has been completed, the rest of the incomplete tasks are not going to be implemented.

resFactory / factory

Implement RF Console with SSE or WebSocket tunnels #73

Phoenix Live View Dashboard inspired requirements

RF Console as a browser extension elaboration