Merge pull request #132 from com-pas/add-scl-validator

Added Validator Plugin to use CoMPAS SCL Validator Service.

Author: Rob Tjalma

public/js/plugins.js

@@ -91,6 +91,13 @@ export const officialPlugins = [
     requireDoc: true,
     position: 'top'
   },
+  {
+    name: 'Validate using OCL',
+    src: '/src/validators/ValidateSchemaWithCompas.js',
+    icon: 'rule_folder',
+    default: true,
+    kind: 'validator',
+  },
   {
     name: 'Validate project',
     src: '/src/validators/ValidateSchema.js',

src/Hosting.ts

@@ -36,7 +36,7 @@ interface MenuItem {
 }
 
 interface Validator {
-  validate: () => Promise<void>;
+  validate: (manual?: boolean) => Promise<void>;
 }
 
 interface MenuPlugin {
@@ -148,7 +148,7 @@ export function Hosting<
                   (<unknown>(
                     (<List>ae.target).items[ae.detail.index].lastElementChild
                   ))
-                )).validate()
+                )).validate(true)
               )
             );
           },
@@ -235,7 +235,7 @@ export function Hosting<
             .querySelector('mwc-list')!
             .items.filter(item => item.className === 'validator')
             .map(item =>
-              (<Validator>(<unknown>item.lastElementChild)).validate()
+              (<Validator>(<unknown>item.lastElementChild)).validate(false)
             )
         ).then();
         this.dispatchEvent(newPendingStateEvent(this.validated));

src/compas-services/CompasValidatorService.ts

@@ -0,0 +1,28 @@
+import {CompasSettings} from "../compas/CompasSettings.js";
+import {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;
+  }
+
+  return {
+    validateSCL(type: string, doc: Document): Promise<Document> {
+      const saaUrl = getCompasSettings().sclValidatorServiceUrl + '/validate/v1/' + type;
+      return fetch(saaUrl, {
+        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>`
+      }).catch(handleError)
+        .then(handleResponse)
+        .then(parseXml);
+    },
+  }
+}

src/compas/CompasSettings.ts

@@ -10,6 +10,7 @@ import {dispatchEventOnOpenScd} from "./foundation.js";
 
 export type CompasSettingsRecord = {
   sclDataServiceUrl: string;
+  sclValidatorServiceUrl: string;
   cimMappingServiceUrl: string;
   sclAutoAlignmentServiceUrl: string;
 };
@@ -20,6 +21,7 @@ export function CompasSettings() {
     get compasSettings(): CompasSettingsRecord {
       return {
         sclDataServiceUrl: this.getCompasSetting('sclDataServiceUrl'),
+        sclValidatorServiceUrl: this.getCompasSetting('sclValidatorServiceUrl'),
         cimMappingServiceUrl: this.getCompasSetting('cimMappingServiceUrl'),
         sclAutoAlignmentServiceUrl: this.getCompasSetting('sclAutoAlignmentServiceUrl'),
       };
@@ -28,6 +30,7 @@ export function CompasSettings() {
     get defaultSettings(): CompasSettingsRecord {
       return {
         sclDataServiceUrl: '/compas-scl-data-service',
+        sclValidatorServiceUrl: '/compas-scl-validator',
         cimMappingServiceUrl: '/compas-cim-mapping',
         sclAutoAlignmentServiceUrl: '/compas-scl-auto-alignment'
       }
@@ -57,6 +60,10 @@ export class CompasSettingsElement extends LitElement {
     return <TextFieldBase>this.shadowRoot!.querySelector('mwc-textfield[id="sclDataServiceUrl"]');
   }
 
+  getSclValidatorServiceUrlField(): TextFieldBase {
+    return <TextFieldBase>this.shadowRoot!.querySelector('mwc-textfield[id="sclValidatorServiceUrl"]');
+  }
+
   getCimMappingServiceUrlField(): TextFieldBase {
     return <TextFieldBase>this.shadowRoot!.querySelector('mwc-textfield[id="cimMappingServiceUrl"]');
   }
@@ -67,6 +74,7 @@ export class CompasSettingsElement extends LitElement {
 
   valid(): boolean {
     return this.getSclDataServiceUrlField().checkValidity()
+      && this.getSclValidatorServiceUrlField().checkValidity()
       && this.getCimMappingServiceUrlField().checkValidity()
       && this.getSclAutoAlignmentServiceUrlField().checkValidity();
   }
@@ -78,6 +86,7 @@ export class CompasSettingsElement extends LitElement {
 
     // Update settings from TextField.
     CompasSettings().setCompasSetting('sclDataServiceUrl', this.getSclDataServiceUrlField().value);
+    CompasSettings().setCompasSetting('sclValidatorServiceUrl', this.getSclValidatorServiceUrlField().value);
     CompasSettings().setCompasSetting('cimMappingServiceUrl', this.getCimMappingServiceUrlField().value);
     CompasSettings().setCompasSetting('sclAutoAlignmentServiceUrl', this.getSclAutoAlignmentServiceUrlField().value);
     return true;
@@ -101,6 +110,10 @@ export class CompasSettingsElement extends LitElement {
                      label="${translate('compas.settings.sclDataServiceUrl')}"
                      value="${this.compasSettings.sclDataServiceUrl}" required>
       </mwc-textfield>
+      <mwc-textfield dialogInitialFocus id="sclValidatorServiceUrl"
+                     label="${translate('compas.settings.sclValidatorServiceUrl')}"
+                     value="${this.compasSettings.sclValidatorServiceUrl}" required>
+      </mwc-textfield>
       <mwc-textfield id="cimMappingServiceUrl"
                      label="${translate('compas.settings.cimMappingServiceUrl')}"
                      value="${this.compasSettings.cimMappingServiceUrl}" required>

src/translations/de.ts

@@ -635,6 +635,7 @@ export const de: Translations = {
     settings: {
       title: 'CoMPAS Einstellungen',
       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',
     },

src/translations/en.ts

@@ -630,6 +630,7 @@ export const en = {
     settings: {
       title: 'CoMPAS Settings',
       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',
     },

src/validators/ValidateSchemaWithCompas.ts

@@ -0,0 +1,44 @@
+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";
+
+export default class ValidateTemplates 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.
+    if (!manual) {
+      return;
+    }
+
+    const docType = getTypeFromDocName(this.docName);
+    await CompasSclValidatorService().validateSCL(docType, this.doc)
+      .then(document => {
+        const validationErrors = Array.from(document.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'
+              })
+            );
+          })
+        }
+      })
+      .catch(createLogEvent);
+  }
+}

test/integration/__snapshots__/open-scd.test.snap.js

@@ -125,6 +125,24 @@ snapshots["open-scd looks like its snapshot"] =
         Redo
       </span>
     </mwc-list-item>
+    <mwc-list-item
+      aria-disabled="true"
+      class="validator"
+      disabled=""
+      graphic="icon"
+      iconid="rule_folder"
+      mwc-list-item=""
+      tabindex="-1"
+    >
+      <mwc-icon slot="graphic">
+        rule_folder
+      </mwc-icon>
+      <span>
+        Validate using OCL
+      </span>
+      <mwc-linear-progress indeterminate="">
+      </mwc-linear-progress>
+    </mwc-list-item>
     <mwc-list-item
       aria-disabled="true"
       class="validator"
@@ -854,6 +872,22 @@ snapshots["open-scd looks like its snapshot"] =
       role="separator"
     >
     </li>
+    <mwc-check-list-item
+      aria-disabled="false"
+      class="official"
+      graphic="control"
+      hasmeta=""
+      left=""
+      mwc-list-item=""
+      selected=""
+      tabindex="-1"
+      value="/src/validators/ValidateSchemaWithCompas.js"
+    >
+      <mwc-icon slot="meta">
+        rule_folder
+      </mwc-icon>
+      Validate using OCL
+    </mwc-check-list-item>
     <mwc-check-list-item
       aria-disabled="false"
       class="official"

test/unit/Plugging.test.ts

@@ -168,15 +168,15 @@ describe('PluggingElement', () => {
       ).to.have.property('position');
     });
     it('adds a new validator kind plugin on add button click', async () => {
-      expect(element.validators).to.have.lengthOf(2);
+      expect(element.validators).to.have.lengthOf(3);
       src.value = 'http://example.com/plugin.js';
       name.value = 'testName';
       validatorKindOption.click();
       await src.updateComplete;
       await name.updateComplete;
       primaryAction.click();
       await element.updateComplete;
-      expect(element.validators).to.have.lengthOf(3);
+      expect(element.validators).to.have.lengthOf(4);
     });
   });
 });