Merge pull request #145 from com-pas/validator-websocket

Support validation using CoMPAS Service with both Rest and Websockets

Author: Rob Tjalma

public/js/plugins.js

@@ -102,7 +102,7 @@ export const officialPlugins = [
   },
   {
     name: 'Validate using OCL',
-    src: '/src/validators/ValidateSchemaWithCompas.js',
+    src: '/src/validators/CompasValidateSchema.js',
     icon: 'rule_folder',
     default: true,
     kind: 'validator',

src/compas-services/CompasValidatorService.ts

@@ -1,39 +1,64 @@
-import {CompasSettings} from "../compas/CompasSettings.js";
-import {handleError, handleResponse, parseXml} from "./foundation.js";
+import { CompasSettings } from "../compas/CompasSettings.js";
+import { Websockets } from "./Websockets.js";
+import {
+  getWebsocketUri,
+  handleError,
+  handleResponse,
+  parseXml
+} from "./foundation.js";
 
 export const SVS_NAMESPACE = 'https://www.lfenergy.org/compas/SclValidatorService/v1';
 
 export function CompasSclValidatorService() {
-  function getCompasSettings() {
-    return CompasSettings().compasSettings;
+  function getSclValidatorServiceUrl(): string {
+    return CompasSettings().compasSettings.sclValidatorServiceUrl;
+  }
+
+  function createRequest(doc: Document): string {
+    return `<?xml version="1.0" encoding="UTF-8"?>
+            <svs:SclValidateRequest xmlns:svs="${SVS_NAMESPACE}">
+              <svs:SclData><![CDATA[${new XMLSerializer().serializeToString(doc.documentElement)}]]></svs:SclData>
+            </svs:SclValidateRequest>`;
   }
 
   return {
-    validateSCL(type: string, doc: Document): Promise<Document> {
-      const svsUrl = getCompasSettings().sclValidatorServiceUrl + '/validate/v1/' + type;
+    useWebsocket(): boolean {
+      return CompasSettings().useWebsockets();
+    },
+
+    validateSCLUsingRest(type: string, doc: Document): Promise<Document> {
+      const svsUrl = getSclValidatorServiceUrl() + '/validate/v1/' + type;
       return fetch(svsUrl, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/xml'
         },
-        body: `<?xml version="1.0" encoding="UTF-8"?>
-               <svs:SclValidateRequest xmlns:svs="${SVS_NAMESPACE}">
-                 <svs:SclData><![CDATA[${new XMLSerializer().serializeToString(doc.documentElement)}]]></svs:SclData>
-               </svs:SclValidateRequest>`
+        body: createRequest(doc)
       }).catch(handleError)
         .then(handleResponse)
         .then(parseXml);
     },
 
+    validateSCLUsingWebsockets(type: string, doc: Document,
+                               callback: (doc: Document) => void,
+                               onCloseCallback: () => void) {
+      Websockets('CompasValidatorService')
+        .execute(
+          getWebsocketUri(getSclValidatorServiceUrl()) + '/validate-ws/v1/' + type,
+          createRequest(doc),
+          callback,
+          onCloseCallback);
+    },
+
     listNsdocFiles(): Promise<Document> {
-      const svsUrl = getCompasSettings().sclValidatorServiceUrl + '/nsdoc/v1';
+      const svsUrl = getSclValidatorServiceUrl() + '/nsdoc/v1';
       return fetch(svsUrl).catch(handleError)
         .then(handleResponse)
         .then(parseXml);
     },
 
     getNsdocFile(id: string): Promise<string> {
-      const svsUrl = getCompasSettings().sclValidatorServiceUrl + '/nsdoc/v1/' + id;
+      const svsUrl = getSclValidatorServiceUrl() + '/nsdoc/v1/' + id;
       return fetch(svsUrl).catch(handleError)
         .then(handleResponse);
     },

src/compas-services/Websockets.ts

@@ -0,0 +1,57 @@
+import { newPendingStateEvent } from "../foundation.js";
+import { dispatchEventOnOpenScd } from "../compas/foundation.js";
+import { createLogEvent, parseXml } from "./foundation.js";
+
+export function Websockets(serviceName: string) {
+  let websocket: WebSocket | undefined;
+
+  function sleep(sleepTime: number): Promise<unknown> {
+    return new Promise(resolve => setTimeout(resolve, sleepTime));
+  }
+
+  async function waitUntilValidated(): Promise<void> {
+    while (websocket !== undefined) {
+      await sleep(250);
+    }
+  }
+
+  return {
+    execute(url: string, request: string,
+            onMessageCallback: (doc: Document) => void,
+            onCloseCallback?: () => void) {
+      websocket = new WebSocket(url);
+
+      websocket.onopen = () => {
+        websocket?.send(request);
+      };
+
+      websocket.onmessage = (evt) => {
+        parseXml(evt.data)
+          .then(doc => {
+            onMessageCallback(doc);
+            websocket?.close();
+          })
+          .catch(reason => {
+            createLogEvent(reason);
+            websocket?.close();
+          });
+      };
+
+      websocket.onerror = () => {
+        createLogEvent(
+          { message: `Websocket Error in service "${serviceName}"`,
+            type: 'Error'})
+        websocket?.close();
+      };
+
+      websocket.onclose = () => {
+        websocket = undefined;
+        if (onCloseCallback) {
+          onCloseCallback();
+        }
+      }
+
+      dispatchEventOnOpenScd(newPendingStateEvent(waitUntilValidated()))
+    }
+  }
+}

src/compas-services/foundation.ts

@@ -77,3 +77,21 @@ export function createLogEvent(reason: any): void {
       message: get('compas.error.serverDetails', {type: reason.type, message: message})
     }));
 }
+
+export function getWebsocketUri(settingsUrl: string): string {
+  if (settingsUrl.startsWith("http://") || settingsUrl.startsWith("https://")) {
+    return settingsUrl.replace("http://", "ws://").replace("https://", "wss://");
+  }
+
+  return (document.location.protocol == "http:" ? "ws://" : "wss://")
+    + document.location.hostname  + ":" + getWebsocketPort()
+    + settingsUrl;
+}
+
+export function getWebsocketPort(): string {
+  if (document.location.port === "") {
+    return (document.location.protocol == "http:" ? "80" : "443")
+  }
+  return document.location.port;
+}
+

src/compas/CompasSettings.ts

@@ -7,12 +7,14 @@ import '@material/mwc-button';
 import {newWizardEvent} from '../foundation.js';
 import {TextFieldBase} from "@material/mwc-textfield/mwc-textfield-base";
 import {dispatchEventOnOpenScd} from "./foundation.js";
+import {Switch} from "@material/mwc-switch";
 
 export type CompasSettingsRecord = {
   sclDataServiceUrl: string;
   sclValidatorServiceUrl: string;
   cimMappingServiceUrl: string;
   sclAutoAlignmentServiceUrl: string;
+  useWebsockets: 'on' | 'off';
 };
 
 export function CompasSettings() {
@@ -23,7 +25,8 @@ export function CompasSettings() {
         sclDataServiceUrl: this.getCompasSetting('sclDataServiceUrl'),
         sclValidatorServiceUrl: this.getCompasSetting('sclValidatorServiceUrl'),
         cimMappingServiceUrl: this.getCompasSetting('cimMappingServiceUrl'),
-        sclAutoAlignmentServiceUrl: this.getCompasSetting('sclAutoAlignmentServiceUrl')
+        sclAutoAlignmentServiceUrl: this.getCompasSetting('sclAutoAlignmentServiceUrl'),
+        useWebsockets: this.getCompasSetting('useWebsockets')
       };
     },
 
@@ -32,10 +35,15 @@ export function CompasSettings() {
         sclDataServiceUrl: '/compas-scl-data-service',
         sclValidatorServiceUrl: '/compas-scl-validator',
         cimMappingServiceUrl: '/compas-cim-mapping',
-        sclAutoAlignmentServiceUrl: '/compas-scl-auto-alignment'
+        sclAutoAlignmentServiceUrl: '/compas-scl-auto-alignment',
+        useWebsockets: 'on'
       }
     },
 
+    useWebsockets(): boolean {
+      return this.compasSettings.useWebsockets === 'on';
+    },
+
     /** Update the `value` of `setting`, storing to `localStorage`. */
     setCompasSetting<T extends keyof CompasSettingsRecord>(setting: T, value: CompasSettingsRecord[T]): void {
       localStorage.setItem(setting, <string>(<unknown>value));
@@ -72,6 +80,10 @@ export class CompasSettingsElement extends LitElement {
     return <TextFieldBase>this.shadowRoot!.querySelector('mwc-textfield[id="sclAutoAlignmentServiceUrl"]');
   }
 
+  getUseWebsockets(): Switch {
+    return <Switch>this.shadowRoot!.querySelector('mwc-switch[id="useWebsockets"]');
+  }
+
   valid(): boolean {
     return this.getSclDataServiceUrlField().checkValidity()
       && this.getSclValidatorServiceUrlField().checkValidity()
@@ -89,6 +101,7 @@ export class CompasSettingsElement extends LitElement {
     CompasSettings().setCompasSetting('sclValidatorServiceUrl', this.getSclValidatorServiceUrlField().value);
     CompasSettings().setCompasSetting('cimMappingServiceUrl', this.getCimMappingServiceUrlField().value);
     CompasSettings().setCompasSetting('sclAutoAlignmentServiceUrl', this.getSclAutoAlignmentServiceUrlField().value);
+    CompasSettings().setCompasSetting('useWebsockets', this.getUseWebsockets().checked ? 'on' : 'off');
     return true;
   }
 
@@ -122,6 +135,11 @@ export class CompasSettingsElement extends LitElement {
                      label="${translate('compas.settings.sclAutoAlignmentServiceUrl')}"
                      value="${this.compasSettings.sclAutoAlignmentServiceUrl}" required>
       </mwc-textfield>
+      <mwc-formfield label="${translate('compas.settings.useWebsockets')}">
+        <mwc-switch id="useWebsockets"
+                    ?checked=${this.compasSettings.useWebsockets === 'on'}>
+        </mwc-switch>
+      </mwc-formfield>
 
       <mwc-button @click=${() => {
                     if (this.reset()) {
@@ -137,7 +155,7 @@ export class CompasSettingsElement extends LitElement {
       width: 20vw;
     }
 
-    mwc-textfield {
+    mwc-textfield, mwc-formfield {
       margin: 10px;
       width: 100%;
     }

src/translations/de.ts

@@ -650,7 +650,8 @@ export const de: Translations = {
       sclDataServiceUrl: 'CoMPAS SCL Data Service URL',
       sclValidatorServiceUrl: 'CoMPAS SCL Validator Service URL',
       cimMappingServiceUrl: 'CoMPAS CIM Mapping Service URL',
-      sclAutoAlignmentServiceUrl: 'CoMPAS SCL Auto Alignment Service URL'
+      sclAutoAlignmentServiceUrl: 'CoMPAS SCL Auto Alignment Service URL',
+      useWebsockets: '???',
     },
     session: {
       headingExpiring: '???',

src/translations/en.ts

@@ -565,7 +565,7 @@ export const en = {
     noSclVersions: 'No versions found for this project in CoMPAS',
     error: {
       type: 'Unable to determine type from document name!',
-      server: 'Error communicating with CoMPAS Server',
+      server: 'Error communicating with CoMPAS Ecosystem',
       serverDetails: '{{type}}: {{message}}',
     },
     changeset: {
@@ -645,7 +645,8 @@ export const en = {
       sclDataServiceUrl: 'CoMPAS SCL Data Service URL',
       sclValidatorServiceUrl: 'CoMPAS SCL Validator Service URL',
       cimMappingServiceUrl: 'CoMPAS CIM Mapping Service URL',
-      sclAutoAlignmentServiceUrl: 'CoMPAS SCL Auto Alignment Service URL'
+      sclAutoAlignmentServiceUrl: 'CoMPAS SCL Auto Alignment Service URL',
+      useWebsockets: 'Use Websockets',
     },
     session: {
       headingExpiring: 'Your session is about to expire!',

src/validators/CompasValidateSchema.ts

@@ -0,0 +1,70 @@
+import { LitElement, property } from "lit-element";
+
+import { newIssueEvent } from "../foundation.js";
+
+import { CompasSclValidatorService, SVS_NAMESPACE } from "../compas-services/CompasValidatorService.js";
+import { createLogEvent } from "../compas-services/foundation.js";
+import { dispatchEventOnOpenScd, getTypeFromDocName } from "../compas/foundation.js";
+
+// Boolean to prevent running the validation multiple times at the same time.
+let compasValidationSchemaRunning = false;
+
+export default class CompasValidateSchema extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  @property({ type: String })
+  docName!: string;
+
+  @property()
+  pluginId!: string;
+
+  async validate(manual: boolean): Promise<void> {
+    // We don't want to externally validate every time a save is done. So only start the validation when manually triggered.
+    // And also if one is already running we don't want to start another one, wait until it's finished.
+    if (!manual || compasValidationSchemaRunning) {
+      return;
+    }
+
+    // Block running another validation until this one is finished.
+    compasValidationSchemaRunning = true;
+
+    const docType = getTypeFromDocName(this.docName);
+    const service = CompasSclValidatorService();
+    if (service.useWebsocket()) {
+      service.validateSCLUsingWebsockets(docType, this.doc,
+        (doc) => {
+          this.processValidationResponse(doc);
+        },
+        () => {
+          compasValidationSchemaRunning = false;
+        });
+    } else {
+      const response = await service.validateSCLUsingRest(docType, this.doc)
+        .catch(createLogEvent);
+      if (response instanceof Document) {
+        this.processValidationResponse(response);
+      } else {
+        compasValidationSchemaRunning = false;
+      }
+    }
+  }
+
+  private processValidationResponse(response: Document): void {
+    const validationErrors = Array.from(response.querySelectorAll('SclValidateResponse > ValidationErrors') ?? []);
+    // Check if there are validation errors, if there are we will process them.
+    if (validationErrors.length > 0) {
+      validationErrors.forEach(validationError => {
+        const message = validationError.getElementsByTagNameNS(SVS_NAMESPACE, "Message")!.item(0)!.textContent;
+        dispatchEventOnOpenScd(
+          newIssueEvent({
+            validatorId: this.pluginId,
+            title: message ?? 'No message'
+          })
+        );
+      })
+    }
+
+    compasValidationSchemaRunning = false;
+  }
+}