Stream editor contents validation

Validation

Validation

Validation

Author: BoykoAlex

ui/package.json

@@ -37,7 +37,7 @@
     "ngx-pagination": "^3.0.1",
     "rxjs": "^5.4.2",
     "sockjs-client": "^1.1.4",
-    "spring-flo": "git://github.com/spring-projects/spring-flo.git#b4e20eb9cd31764e2f96b178d03500c7d7d6628f",
+    "spring-flo": "git://github.com/spring-projects/spring-flo.git#b584fed1ed201f308bd9a4a6cb9e8f54c824e99d",
     "stompjs": "^2.3.3",
     "tixif-ngx-busy": "0.0.5",
     "zone.js": "^0.8.14"

ui/src/app/shared/services/parser.ts

@@ -671,7 +671,7 @@ export namespace Parser {
     }
 
     export interface Error {
-        message: String;
+        message: string;
         range: Range;
     }
 

ui/src/app/streams/flo/editor.service.ts

@@ -514,7 +514,7 @@ export class EditorService implements Flo.Editor {
         this.validateProperties(element, errors);
     }
 
-    validate(graph: dia.Graph): Promise<Map<string, Array<Flo.Marker>>> {
+    validate(graph: dia.Graph, dsl: string, flo: Flo.EditorContext): Promise<Map<string, Flo.Marker[]>> {
         return new Promise(resolve => {
             const allMarkers: Map<string, Array<Flo.Marker>> = new Map();
             graph.getElements().filter(e => !e.get('parent') && e.attr('metadata')).forEach(e => {

ui/src/app/streams/flo/metamodel.service.ts

@@ -138,9 +138,11 @@ export class MetamodelService implements Flo.Metamodel {
       private appsService: SharedAppsService,
     ) {}
 
-    textToGraph(flo: Flo.EditorContext, dsl: string): void {
+    textToGraph(flo: Flo.EditorContext, dsl: string): Promise<any> {
         console.log('> textToGraph ' + dsl);
-        this.load().then((metamodel) => { convertTextToGraph(dsl, flo, metamodel); });
+        return new Promise(resolve => {
+          this.load().then((metamodel) => resolve(convertTextToGraph(dsl, flo, metamodel)));
+        });
     }
 
     graphToText(flo: Flo.EditorContext): Promise<string> {

ui/src/app/streams/flo/text-to-graph.ts

@@ -420,7 +420,7 @@ export namespace JsonGraph {
     }
 
     export interface Graph {
-        errors: {}[];
+        errors: Parser.Error[];
         format: string;
         streamdefs;
         nodes: Node[];

ui/src/app/streams/stream-create/stream-create.component.html

@@ -1,6 +1,6 @@
 <div id="flo-container" class="stream-editor">
   <flo-editor (floApi)="editorContext = $event" [metamodel]="metamodelService" [renderer]="renderService"
-              [editor]="editorService" [paletteSize]="paletteSize" [(dsl)]="dsl" [paperPadding]="20">
+              [editor]="editorService" [paletteSize]="paletteSize" [(dsl)]="dsl" [paperPadding]="20" (validationMarkers)="validationMarkers = $event">
     <button (click)="createStreamDefs()" class="btn btn-default" type="button" [disabled]="!dsl">Create Stream</button>
     <button (click)="editorContext.clearGraph()" class="btn btn-default" type="button">Clear</button>
     <button (click)="arrangeAll()" class="btn btn-default" type="button">Layout</button>
@@ -11,7 +11,7 @@
     <div class="flow-definition-container">
       <dsl-editor [(dsl)]="dsl" line-numbers="true" line-wrapping="true" (blur)="editorContext.graphToTextSync=true"
                   (focus)="editorContext.graphToTextSync=false" placeholder="Enter stream definition..."
-                  [hintOptions]="hintOptions"></dsl-editor>
+                  [hintOptions]="hintOptions" [lintOptions]="lintOptions"></dsl-editor>
     </div>
   </flo-editor>
 </div>

ui/src/app/streams/stream-create/stream-create.component.spec.ts

@@ -12,6 +12,7 @@ import {ActivatedRoute} from '@angular/router';
 import { FloModule} from 'spring-flo';
 import {ModalModule, BsModalService} from 'ngx-bootstrap';
 import { ContentAssistService } from '../flo/content-assist.service';
+import { ParserService } from '../../shared/services/parser.service';
 
 /**
  * Test {@link StreamCreateComponent}.
@@ -25,6 +26,8 @@ describe('StreamCreateComponent', () => {
   const streamsService = new MockStreamsService();
   const metamodelService = new MockMetamodelService();
   const renderService = new RenderService(metamodelService);
+  const parserService = new ParserService();
+
   // const editorService = new EditorService(null);
   const commonTestParams = { id: '1' };
 
@@ -48,6 +51,7 @@ describe('StreamCreateComponent', () => {
         {provide: ContentAssistService},
         {provide: BsModalService},
         {provide: ActivatedRoute, useValue: activeRoute },
+        {provide: ParserService, useValue: parserService}
       ]
     })
       .compileComponents();

ui/src/app/streams/stream-create/stream-create.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Flo } from 'spring-flo';
+import { ParserService } from '../../shared/services/parser.service';
 import { MetamodelService } from '../flo/metamodel.service';
 import { RenderService } from '../flo/render.service';
 import { EditorService } from '../flo/editor.service';
@@ -25,17 +26,32 @@ export class StreamCreateComponent implements OnInit {
 
   hintOptions: any;
 
+  lintOptions: CodeMirror.LintOptions;
+
+  validationMarkers: Map<string, Flo.Marker[]>;
+
   constructor(public metamodelService: MetamodelService,
               public renderService: RenderService,
               public editorService: EditorService,
               private bsModalService: BsModalService,
-              private contentAssistService: ContentAssistService) {
-    console.log('Building');
+              private contentAssistService: ContentAssistService,
+              private parserService: ParserService) {
+
+    this.validationMarkers = new Map();
 
     this.hintOptions = {
       async: true,
       hint: (doc: CodeMirror.EditorFromTextArea) => this.contentAssist(doc)
     };
+
+    this.lintOptions = {
+      async: true,
+      hasGutters: true,
+      getAnnotations: (content: string,
+                       updateLintingCallback: CodeMirror.UpdateLintingCallback,
+                       options: CodeMirror.LintStateOptions,
+                       editor: CodeMirror.Editor) => this.lint(content, updateLintingCallback, editor)
+    };
   }
 
   ngOnInit() {
@@ -86,6 +102,31 @@ export class StreamCreateComponent implements OnInit {
 
   }
 
+  lint(dsl: string, updateLintingCallback: CodeMirror.UpdateLintingCallback, editor: CodeMirror.Editor): void {
+    const result = this.parserService.parseDsl(dsl, 'stream');
+    const annotations: CodeMirror.Annotation[] = [];
+    Array.from(this.validationMarkers.values())
+      .filter(markers => Array.isArray(markers))
+      .forEach(markers => markers
+        .filter(m => m.range && m.severity)
+        .forEach(m => annotations.push({
+          message: m.message,
+          from: m.range.start,
+          to: m.range.end,
+          severity: Flo.Severity[m.severity].toLowerCase()
+        }))
+      );
+    if (result.lines) {
+      result.lines.filter(l => Array.isArray(l.errors)).forEach(l => l.errors.forEach(e => annotations.push({
+        from: e.range.start,
+        to: e.range.end,
+        message: e.message,
+        severity: 'error'
+      })));
+    }
+    updateLintingCallback(editor, annotations);
+  }
+
   /**
    * The suggestions provided by rest api are very long and include the whole command typed
    * from the start of the line. This function determines the start of the 'interesting' part