Merge pull request #4923 from trufflesuite/dashboard/events

Hook up example events -> dashboard communication

packages/dashboard-message-bus/lib/message/types.ts

@@ -31,6 +31,16 @@ export interface LogMessage extends Message {
   };
 }
 
+/**
+ * Message to log in Dashboard browser console
+ */
+export interface DebugMessage extends Message {
+  type: "debug";
+  payload: {
+    message: string;
+  };
+}
+
 /**
  * Message intended to invalidate earlier messages.
  * The payload is the ID of the message that should be invalidated.
@@ -51,6 +61,10 @@ export const isLogMessage = (message: Message): message is LogMessage => {
   return message.type === "log";
 };
 
+export const isDebugMessage = (message: Message): message is DebugMessage => {
+  return message.type === "debug";
+};
+
 export const isInvalidateMessage = (
   message: Message
 ): message is InvalidateMessage => {

packages/dashboard-message-bus/lib/utils.ts

@@ -6,6 +6,8 @@ import axios from "axios";
 
 any.shim();
 
+export class MessageBusConnectionError extends Error {}
+
 /**
  * Convert any JS object or value to a base64 representation of it
  */
@@ -152,7 +154,7 @@ export const getMessageBusPorts = async (
     }
   }
 
-  throw new Error(
+  throw new MessageBusConnectionError(
     `Could not connect to dashboard at http://${dashboardHost}:${dashboardPort}/ports`
   );
 };

packages/dashboard/src/Dashboard.tsx

@@ -4,12 +4,13 @@ import {
   connectToMessageBusWithRetries,
   isDashboardProviderMessage,
   isInvalidateMessage,
+  isDebugMessage,
   Message,
   base64ToJson
 } from "@truffle/dashboard-message-bus";
 import { useWeb3React } from "@web3-react/core";
 import { useEffect, useState } from "react";
-import { getPorts } from "./utils/utils";
+import { getPorts, respond } from "./utils/utils";
 import Header from "./components/Header/Header";
 import DashboardProvider from "./components/DashboardProvider/DashboardProvider";
 import ConnectNetwork from "./components/ConnectNetwork";
@@ -66,6 +67,10 @@ function Dashboard() {
           setDashboardProviderRequests(previousRequests =>
             previousRequests.filter(request => request.id !== message.payload)
           );
+        } else if (isDebugMessage(message)) {
+          const { payload } = message;
+          console.log(payload.message);
+          respond({ id: message.id }, connectedSocket);
         }
       }
     );

packages/events/defaultSubscribers/dashboard/client.js

@@ -0,0 +1,47 @@
+const {
+  connectToMessageBusWithRetries,
+  createMessage,
+  getMessageBusPorts,
+  sendAndAwait,
+  MessageBusConnectionError
+} = require("@truffle/dashboard-message-bus");
+
+module.exports = class DashboardMessageBusClient {
+  constructor(config) {
+    this.config = config.dashboard || {
+      host: "localhost",
+      port: 24012
+    };
+  }
+
+  async _getSocket() {
+    if (this._socket) {
+      return this._socket;
+    }
+
+    const { publishPort } = await getMessageBusPorts(
+      this.config.port,
+      this.config.host
+    );
+
+    this._socket = await connectToMessageBusWithRetries(
+      publishPort,
+      this.config.host
+    );
+
+    return this._socket;
+  }
+
+  async sendAndAwait({ type, payload }) {
+    try {
+      const socket = await this._getSocket();
+      const message = createMessage(type, payload);
+
+      return await sendAndAwait(socket, message);
+    } catch (err) {
+      if (!(err instanceof MessageBusConnectionError)) {
+        throw err;
+      } else return;
+    }
+  }
+};

packages/events/defaultSubscribers/dashboard.js → packages/events/defaultSubscribers/dashboard/index.js

@@ -1,7 +1,10 @@
 const Writable = require("stream").Writable;
+const DashboardMessageBusClient = require("./client");
 
 module.exports = {
   initialization: function (config) {
+    this.messageBus = new DashboardMessageBusClient(config);
+
     this._logger = {
       log: ((...args) => {
         if (config.quiet) {
@@ -13,6 +16,16 @@ module.exports = {
     };
   },
   handlers: {
+    "compile:start": [
+      async function () {
+        await this.messageBus.sendAndAwait({
+          type: "debug",
+          payload: {
+            message: "compile:start"
+          }
+        });
+      }
+    ],
     "rpc:request": [
       function (event) {
         const { payload } = event;