@ixon-cdk/iframe-adapter 1.2.0-next.4

package/README.md

@@ -0,0 +1,3 @@
+# IXON Component Development Kit IFrame Adapter
+
+This library contains an iframe adapter for the IXON Component Development Kit (CDK). It creates a bridge between a component that mounts an `<iframe>` element and the application that is loaded inside of it. This allows the embedded application to use the same ComponentContext API's that are provided to the component.

package/index.js

@@ -0,0 +1,450 @@
+const EVENT_NS = 'cdk:cmpctx:';
+
+const EVENTS = {
+  // Lifecycle
+  Create: `${EVENT_NS}create`,
+  Created: `${EVENT_NS}created`,
+  Destroy: `${EVENT_NS}destroy`,
+
+  // ResourceDataClient
+  ResourceDataClientCreate: `${EVENT_NS}rdc:create`,
+  ResourceDataClientDestroy: `${EVENT_NS}rdc:destroy`,
+  ResourceDataClientQuery: `${EVENT_NS}rdc:query`,
+  ResourceDataClientQueryResult: `${EVENT_NS}rdc:queryresult`,
+  ResourceDataClientRender: `${EVENT_NS}rdc:render`,
+  ResourceDataClientRenderResult: `${EVENT_NS}rdc:renderresult`,
+
+  // VPN
+  ShowVpnStatusDetails: `${EVENT_NS}showvpnstatusdetails`,
+  ToggleVpn: `${EVENT_NS}togglevpn`,
+  VpnClientStatusChange: `${EVENT_NS}vpnclientstatuschange`,
+
+  // Miscellaneous
+  NavigateByUrl: `${EVENT_NS}navigatebyurl`,
+  SetTimeRange: `${EVENT_NS}settimerange`,
+  TimeRangeChange: `${EVENT_NS}timerangechange`,
+};
+
+class NotImplementedError extends Error {
+  constructor() {
+    super('Method is not implemented');
+    this.name = 'NotImplementedError';
+    this.message = 'Method is not implemented';
+    this.stack = 'NotImplementedError: Method is not implemented';
+  }
+}
+
+class ComponentContext {
+  ontimerangechange = null;
+  onvpnclientstatuschange = null;
+
+  constructor(serializableContext) {
+    this._getApiLinks = () => new Map(serializableContext._apiLinkEntries);
+    this.appData = serializableContext.appData;
+    this.componentBaseUrl = serializableContext.componentBaseUrl;
+    this.destroyed = serializableContext.destroyed;
+    this.mode = serializableContext.mode;
+    this.inputs = serializableContext.inputs;
+    this.inputMap = new Map(Object.entries(this.inputs));
+    this.timeRange = serializableContext.timeRange;
+    this.timeRangeIsAdjustable = serializableContext.timeRangeIsAdjustable;
+    this.vpnClientStatus = serializableContext.vpnClientStatus;
+    this._messageHandler = this._messageHandler.bind(this);
+    window.addEventListener('message', this._messageHandler, false);
+  }
+
+  _messageHandler(event) {
+    if (event.origin !== window.origin) {
+      return;
+    }
+
+    if (event.source !== window.parent) {
+      return;
+    }
+
+    switch (event.data.type) {
+      case EVENTS.TimeRangeChange:
+        if (this.ontimerangechange) {
+          this.ontimerangechange(...event.data.payload);
+        }
+        break;
+      case EVENTS.VpnClientStatusChange:
+        if (this.onvpnclientstatuschange) {
+          this.onvpnclientstatuschange(...event.data.payload);
+        }
+        break;
+    }
+  }
+
+  createBackendComponentClient() {
+    throw new NotImplementedError();
+  }
+
+  createLoggingDataClient() {
+    throw new NotImplementedError();
+  }
+
+  createResourceDataClient() {
+    const clientId = crypto.randomUUID();
+    window.parent.postMessage(
+      {
+        type: EVENTS.ResourceDataClientCreate,
+        payload: { clientId },
+      },
+      window.origin,
+    );
+    return new ResourceDataClient(clientId);
+  }
+
+  createTooltip() {
+    throw new NotImplementedError();
+  }
+
+  destroy() {
+    window.parent.postMessage({ type: EVENTS.Destroy }, window.origin);
+    window.removeEventListener('message', this._messageHandler, false);
+    this.destroyed = true;
+  }
+
+  getApiUrl(rel, params) {
+    const link = this._getApiLinks().get(rel);
+    if (!link) {
+      throw new Error('IxApiError: entry not found');
+    }
+    // NOTE:
+    // This implementation part is an exact copy of the shared `getLinkUrl` utility
+    // function which can be found in `@lib/ixon/ixapi/ixapi.utils.ts
+    if (params) {
+      return Object.keys(params)
+        .sort()
+        .reduce((href, key) => {
+          if (href.includes(`{${key}}`)) {
+            return href.replace(`{${key}}`, params[key]);
+          }
+          const url = new URL(href);
+          url.searchParams.set(key, params[key]);
+          return decodeURIComponent(url.href);
+        }, link.href);
+    }
+    return link.href;
+  }
+
+  navigateByUrl(url) {
+    window.parent.postMessage(
+      { type: EVENTS.NavigateByUrl, payload: { url } },
+      window.origin,
+    );
+  }
+
+  saveAsFile() {
+    throw new NotImplementedError();
+  }
+
+  setTimeRange(timeRange) {
+    window.parent.postMessage(
+      {
+        type: EVENTS.SetTimeRange,
+        payload: { timeRange },
+      },
+      window.origin,
+    );
+  }
+
+  showVpnStatusDetails(agentId) {
+    window.parent.postMessage(
+      {
+        type: EVENTS.ShowVpnStatusDetails,
+        payload: { agentId },
+      },
+      window.origin,
+    );
+  }
+
+  testVpnAccess() {
+    throw new NotImplementedError();
+  }
+
+  toggleVpn(agentId) {
+    window.parent.postMessage(
+      { type: EVENTS.ToggleVpn, payload: { agentId } },
+      window.origin,
+    );
+  }
+
+  translate() {
+    throw new NotImplementedError();
+  }
+}
+
+class ResourceDataClient {
+  constructor(id) {
+    this.id = id;
+  }
+
+  query(query, listener) {
+    const queryId = crypto.randomUUID();
+
+    window.addEventListener('message', _queryHandler, false);
+
+    window.parent.postMessage(
+      {
+        type: EVENTS.ResourceDataClientQuery,
+        payload: { clientId: this.id, queryId, query },
+      },
+      window.origin,
+    );
+
+    return () => {
+      window.removeEventListener('message', _queryHandler, false);
+    };
+
+    function _queryHandler(event) {
+      if (event.origin !== window.origin) {
+        return;
+      }
+
+      if (event.source !== window.parent) {
+        return;
+      }
+
+      if (
+        event.data.type === EVENTS.ResourceDataClientQueryResult &&
+        event.data.payload.queryId === queryId
+      ) {
+        listener(event.data.payload.results);
+      }
+    }
+  }
+
+  render(query, listener) {
+    const queryId = crypto.randomUUID();
+
+    window.addEventListener('message', _queryHandler, false);
+
+    window.parent.postMessage(
+      {
+        type: EVENTS.ResourceDataClientRender,
+        payload: { clientId: this.id, queryId, query },
+      },
+      window.origin,
+    );
+
+    return () => {
+      window.removeEventListener('message', _queryHandler, false);
+    };
+
+    function _queryHandler(event) {
+      if (event.origin !== window.origin) {
+        return;
+      }
+
+      if (event.source !== window.parent) {
+        return;
+      }
+
+      if (
+        event.data.type === EVENTS.ResourceDataClientRenderResult &&
+        event.data.payload.queryId === queryId
+      ) {
+        listener(event.data.payload.results);
+      }
+    }
+  }
+
+  destroy() {
+    window.parent.postMessage(
+      {
+        type: EVENTS.ResourceDataClientDestroy,
+        payload: { clientId: this.id },
+      },
+      window.origin,
+    );
+  }
+}
+
+export function getComponentContext(options) {
+  const hasInputMigrations = !!(options && options.migrateInputs);
+
+  if (!hasInputMigrations && getComponentContext.__cache__) {
+    return Promise.resolve(getComponentContext.__cache__);
+  }
+
+  return new Promise(resolve => {
+    window.addEventListener(
+      'message',
+      function messageHandler(event) {
+        if (event.origin !== window.origin) {
+          return;
+        }
+
+        if (event.source !== window.parent) {
+          return;
+        }
+
+        if (event.data && event.data.type === EVENTS.Created) {
+          let serializableContext = event.data.payload;
+
+          if (hasInputMigrations) {
+            serializableContext.inputs = options.migrateInputs(
+              serializableContext.inputs,
+              null,
+            );
+          }
+
+          const context = new ComponentContext(serializableContext);
+          resolve(context);
+
+          // memoize
+          if (!hasInputMigrations) {
+            getComponentContext.__cache__ = context;
+          }
+
+          window.removeEventListener('message', messageHandler, false);
+        }
+      },
+      false,
+    );
+
+    // dispatch "create" event
+    window.parent.postMessage({ type: EVENTS.Create }, window.origin);
+  });
+}
+
+export function connect({ iframe, context }) {
+  window.addEventListener('message', _adapterMessageHandler, false);
+
+  // Broadcasts time range changes to connected iframe
+  context.ontimerangechange = (...args) => {
+    iframe.contentWindow.postMessage({
+      type: EVENTS.TimeRangeChange,
+      payload: args,
+    });
+  };
+
+  // Broadcasts VPN Client status changes to connected iframe
+  context.onvpnclientstatuschange = (...args) => {
+    iframe.contentWindow.postMessage({
+      type: EVENTS.VpnClientStatusChange,
+      payload: args,
+    });
+  };
+
+  return {
+    destroy() {
+      window.removeEventListener('message', _adapterMessageHandler, false);
+    },
+  };
+
+  /**
+   * Returns a serializable object for the passed CompontContext instance
+   */
+  function _getSerializableContext(context) {
+    return {
+      _apiLinkEntries: [...context._getApiLinks().entries()],
+      appData: context.appData,
+      componentBaseUrl: context.componentBaseUrl,
+      destroyed: context.destroyed,
+      mode: context.mode,
+      inputs: context.inputs,
+      timeRange: context.timeRange,
+      timeRangeIsAdjustable: context.timeRangeIsAdjustable,
+      vpnClientStatus: context.vpnClientStatus,
+    };
+  }
+
+  function _adapterMessageHandler(event) {
+    _adapterMessageHandler._clients =
+      _adapterMessageHandler._clients || new Map([]);
+
+    if (event.origin !== window.origin) {
+      return;
+    }
+
+    if (event.source !== iframe.contentWindow) {
+      return;
+    }
+
+    switch (event.data.type) {
+      /**
+       * Lifecycle
+       */
+      case EVENTS.Create:
+        iframe.contentWindow.postMessage({
+          type: EVENTS.Created,
+          payload: _getSerializableContext(context),
+        });
+        break;
+      case EVENTS.Destroy:
+        context.destroy();
+        break;
+
+      /**
+       * ResourceDataClient
+       */
+      case EVENTS.ResourceDataClientCreate: {
+        const { clientId } = event.data.payload;
+        const client = context.createResourceDataClient(clientId);
+        _adapterMessageHandler._clients.set(clientId, client);
+        break;
+      }
+      case EVENTS.ResourceDataClientDestroy: {
+        const { clientId } = event.data.payload;
+        if (_adapterMessageHandler._clients.has(clientId)) {
+          _adapterMessageHandler._clients.get(clientId).destroy();
+          _adapterMessageHandler._clients.delete(clientId);
+        }
+        break;
+      }
+      case EVENTS.ResourceDataClientQuery: {
+        const { clientId, queryId, query } = event.data.payload;
+        let client = _adapterMessageHandler._clients.get(clientId);
+        if (client && !client._destroyed) {
+          client.query(query, results => {
+            if (client && !client._destroyed) {
+              iframe.contentWindow.postMessage({
+                type: EVENTS.ResourceDataClientQueryResult,
+                payload: { queryId, results },
+              });
+            }
+          });
+        }
+        break;
+      }
+      case EVENTS.ResourceDataClientRender: {
+        const { clientId, queryId, query } = event.data.payload;
+        let client = _adapterMessageHandler._clients.get(clientId);
+        if (client && !client._destroyed) {
+          client.render(query, results => {
+            if (client && !client._destroyed) {
+              iframe.contentWindow.postMessage({
+                type: EVENTS.ResourceDataClientRenderResult,
+                payload: { queryId, results },
+              });
+            }
+          });
+        }
+        break;
+      }
+
+      /**
+       * VPN
+       */
+      case EVENTS.ShowVpnStatusDetails:
+        context.showVpnStatusDetails(event.data.payload.agentId);
+        break;
+      case EVENTS.ToggleVpn:
+        context.toggleVpn(event.data.payload.agentId);
+        break;
+
+      /**
+       * Miscellaneous
+       */
+      case EVENTS.NavigateByUrl:
+        context.navigateByUrl(event.data.payload.url);
+        break;
+      case EVENTS.SetTimeRange:
+        context.setTimeRange(event.data.payload.timeRange);
+        break;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@ixon-cdk/iframe-adapter",
+  "version": "1.2.0-next.4",
+  "description": "",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC",
+  "files": [
+    "!index.spec.js"
+  ],
+  "peerDependencies": {
+    "@ixon-cdk/types": "^1.2.0-next.4"
+  }
+}