feat: updated injector to receive a simpler format to load the remote (#416)

* feat: updated injector to receive a simpler format to load the remote

* feat: updated /api/get-remote to remove graphql and serve the new simple format

* fix read write token

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: reinaldorauch

dashboard-example/dsl/package.json

@@ -9,7 +9,7 @@
     "@webpack-cli/serve": "1.5.2",
     "babel-loader": "8.2.2",
     "css-loader": "5.2.7",
-    "esbuild-loader": "2.15.1",
+    "esbuild-loader": "2.19.0",
     "html-webpack-plugin": "5.3.2",
     "less": "4.1.2",
     "less-loader": "8.1.1",

dashboard-example/home/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.1.0",
     "antd": "^4.2.5",
-    "esbuild-loader": "^2.11.1",
+    "esbuild-loader": "^2.19.0",
     "lodash": "^4.17.15",
     "react": "17.0.2",
     "react-dom": "17.0.2"

dashboard-example/home/webpack.config.js

@@ -74,7 +74,7 @@ module.exports = {
             process.env.VERCEL_URL
               ? "https://federation-dashboard-alpha.vercel.app"
               : "http://localhost:3000"
-          }/api/get-remote?token=${process.env.DASHBOARD_WRITE_TOKEN}`,
+          }/api/get-remote?token=${process.env.DASHBOARD_READ_TOKEN}`,
         }),
         search: clientVersion({
           currentHost: "home",

dashboard-fe/pages/api/get-remote.js

@@ -0,0 +1,99 @@
+import { MongoClient } from "mongodb";
+import { createHash, randomUUID } from "crypto";
+
+export default async function handler(req, res) {
+  res.setHeader("Access-Control-Allow-Credentials", true);
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET,OPTIONS,POST");
+  res.setHeader(
+    "Access-Control-Allow-Headers",
+    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
+  );
+  res.setHeader("Cache-Control", "no-cache");
+
+  if (req.method === "OPTIONS") {
+    res.status(200).end();
+    return;
+  }
+  const { currentHost, remoteName, token } = req.query;
+  const id = randomUUID();
+  const log = (msg) =>
+    console.log(`REQ(${id}): ${currentHost}; ${remoteName}; ${msg}`);
+
+  const remoteFindLabel = "find-remote-" + id;
+  console.time(remoteFindLabel);
+
+  try {
+    const client = new MongoClient(process.env.MONGO_URL, {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+    });
+
+    await client.connect();
+
+    log("Connected to mongo db");
+
+    const mainDb = client.db("fmdashboard");
+    const siteSettings = mainDb.collection("siteSettings");
+
+    const foundSettings = await siteSettings.findOne({
+      tokens: { key: "readOnlyToken", value: token },
+    });
+
+    if (!foundSettings) {
+      log("User key not found");
+      res.status(401).end();
+      return;
+    }
+
+    const userDbId = createHash("md5").update(foundSettings.id).digest("hex");
+
+    const userDb = client.db(userDbId);
+
+    if (!userDb) {
+      log("User db not found");
+      res.status(404).end();
+      return;
+    }
+
+    const appVersionCollection = userDb.collection("applicationVersions");
+    const hostVersion = await appVersionCollection.findOne({
+      applicationId: currentHost,
+      "consumes.applicationID": remoteName,
+    });
+
+    if (!hostVersion) {
+      log("host not found");
+      res.status(404).end();
+      return;
+    }
+
+    const app = await appVersionCollection.findOne({
+      applicationId: remoteName,
+      latest: true,
+    });
+
+    if (!app) {
+      log("remote version not found");
+      res.status(404).end();
+      return;
+    }
+
+    const name = app.applicationId;
+    const version = app.version;
+    const remoteURL = app.metadata.find(
+      ({ name }) => name === "baseUrl"
+    )?.value;
+
+    if (!remoteURL) {
+      log("remote url not found");
+      res.status(404).end();
+      return;
+    }
+
+    res.json({ name, version, remoteURL });
+    console.timeEnd(remoteFindLabel);
+  } catch (err) {
+    res.status(500).json(err);
+  }
+}

dashboard-fe/pages/api/get-remote.ts

@@ -519,28 +519,27 @@ class FederationDashboardPlugin {
     );
   }
 
-  postDashboardData(dashData) {
-    return new Promise((resolve) => {
-      console.log("this._options.dashboardURL", this._options.dashboardURL);
-      fetch(this._options.dashboardURL, {
+  async postDashboardData(dashData) {
+    try {
+      const res = await fetch(this._options.dashboardURL, {
         method: "POST",
         body: dashData,
         headers: {
           Accept: "application/json",
           "Content-type": "application/json",
         },
-      })
-        .then((resp) => resp.json())
-        .then(resolve)
-        .catch((e) => {
-          console.warn(
-            `Error posting data to dashboard URL: ${this._options.dashboardURL}`
-          );
-          console.error(e);
-          resolve();
-        });
-    });
+      });
+
+      if (!res.ok) throw new Error(msg);
+    } catch (err) {
+      console.warn(
+        `Error posting data to dashboard URL: ${this._options.dashboardURL}`
+      );
+      console.error(e);
+    }
   }
 }
 
+FederationDashboardPlugin.clientVersion = require("./client-version");
+
 module.exports = FederationDashboardPlugin;

dashboard-plugin/FederationDashboardPlugin.js

@@ -60,39 +60,14 @@ module.exports = ({ currentHost, remoteName, dashboardURL }) => {
       Accept: "application/json",
     },
   })
-  .then(function(res){
-    return res.json()
-  })
+  .then((res) => res.json())
   .then(function(data){
-      var metadata;
+      // Here we have data as { name: string, remoteURL: string, version: string }
+      var metadata = [{name: 'baseUrl', value: data.remoteURL}];
       ${injectScript.toString()}
-      if(data && data.groups && data.groups[0] && data.groups[0].applications && data.groups[0].applications[0]) {
-        var currentApp = data.groups[0].applications[0];
-        if (!data.groups[0].applications[0].overrides.length) {
-              metadata = data.groups[0].applications[0].metadata
-          injectScript(document, "script", "federation-dynamic-remote-${remoteName}",data.groups[0].applications[0].metadata).then(function() {
-            resolve(window.${remoteName});
-            metadata = null
-          });
-          return;
-        }
-       currentApp.overrides.map((override) => {
-          var objVersion = override && override.version ? override.version.split('.').join('_') : "";
-         
-          metadata = override.application.metadata
-          return injectScript(
-            document,
-            "script",
-            "federation-dynamic-remote-${remoteName}-" + objVersion,
-            override,
-          ).then(function(){
-           var versionedModule =  "${remoteName}_" + objVersion;
-           resolve(window[versionedModule])
-          })
-        });
-      }
+      return injectScript(document, "script", "federation-dynamic-remote-${remoteName}").then(function() {
+        resolve(window.${remoteName});
+      });
     })
-  }).then((res)=>{
-  return res;
   }).catch(console.error)`;
 };