Steam Definitions graph read-only view

- Add flo to stream defs view
- Simplify failing test on PhantomJS
- Fixes #398

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#b584fed1ed201f308bd9a4a6cb9e8f54c824e99d",
+    "spring-flo": "git://github.com/spring-projects/spring-flo.git#e4782f11e3454ac9925b96f70c043f2dcf6bf42a",
     "stompjs": "^2.3.3",
     "tixif-ngx-busy": "0.0.5",
     "zone.js": "^0.8.14"

ui/src/app/streams/flo/flo.scss

@@ -10,7 +10,7 @@ $btn-default-bg: #607580;
 $flo-shape-fill-color: #eeeeee;
 $spring-grey: $gray;
 
-#flow-view {
+.stream-editor #flow-view {
   height:625px;
   font-family: inherit;
 }
@@ -168,7 +168,7 @@ $spring-grey: $gray;
   z-index: 2000;
 }
 
-.stream-editor .canvas {
+.dataflow-main-container .canvas {
   border-color: $btn-default-border;
 }
 
@@ -185,7 +185,7 @@ $spring-grey: $gray;
   background-color: $spring-light-grey;
 }
 
-.stream-editor .palette-filter {
+.dataflow-main-container .palette-filter {
   border-color: $btn-default-border;
 }
 
@@ -194,7 +194,7 @@ $spring-grey: $gray;
   stroke: $btn-default-border;
 }
 
-.stream-editor #sidebar-resizer {
+.dataflow-main-container #sidebar-resizer {
   background-color: $btn-default-bg;
 }
 
@@ -224,7 +224,7 @@ $spring-grey: $gray;
 }
 
 .table .flow-view {
-  height: 225px;
+  height: 200px;
 }
 
 .undeployed .canvas {
@@ -399,7 +399,21 @@ $spring-grey: $gray;
   fill: 'transparent';
 }
 
-.stream-editor .zoom-canvas-input {
+table.zoom-canvas-control {
+  tr {
+    border: 0px;
+  }
+  tr:last-child {
+    border: 0px;
+  }
+  td {
+    border: 0px;
+    padding: 0px;
+  }
+}
+
+
+.dataflow-main-container .zoom-canvas-input {
   border: 0px;
   padding: 0px;
   font-size: 11px;

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

@@ -316,15 +316,16 @@ export class RenderService implements Flo.Renderer {
             const link = <dia.Link> cell;
             if (changedPropertyPath === 'props/isTapLink') {
                 const isTapLink = link.attr('props/isTapLink');
-                const linkView = paper.findViewByModel(link);
-                console.log('Adjusting link class isTapLink? ' + isTapLink);
-                // TODO: Check if need to switch bacl to _.each(...)
-                if (isTapLink) {
+                const linkView = paper ? paper.findViewByModel(link) : undefined;
+                if (linkView) {
+                  // TODO: Check if need to switch bacl to _.each(...)
+                  if (isTapLink) {
                     linkView.el.querySelectorAll('.connection, .marker-source, .marker-target')
                       .forEach(connection => joint.V(connection).addClass('tapped-output-from-app'));
-                } else {
+                  } else {
                     linkView.el.querySelectorAll('.connection, .marker-source, .marker-target')
                       .forEach(connection => joint.V(connection).removeClass('tapped-output-from-app'));
+                  }
                 }
             }
             console.log('link being refreshed');

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

@@ -76,9 +76,9 @@
         </td>
       </tr>
       <tr *ngIf="item.isExpanded">
-        <td colspan="4">
-          <div>This is in under development. We would love to hear feedback on the other available tabs/views.</div>
-        <td>
+        <td colspan="5">
+          <app-stream-graph-view [dsl]="item.dslText"></app-stream-graph-view>
+        </td>
       </tr>
     </ng-template>
   </tbody>

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

@@ -19,6 +19,8 @@ import {StreamDefinition} from '../model/stream-definition';
 import { RolesDirective } from '../../auth/directives/roles.directive';
 import { MockAuthService } from '../../tests/mocks/auth';
 import { AuthService } from '../../auth/auth.service';
+import { StreamGraphViewComponent } from '../stream-graph-view/stream-graph-view.component';
+import { FloModule } from 'spring-flo';
 
 /**
  * Test {@link StreamDefinitionsComponent}.
@@ -40,6 +42,7 @@ describe('StreamDefinitionsComponent', () => {
       declarations: [
         KeyValuePipe,
         RolesDirective,
+        StreamGraphViewComponent,
         StreamDefinitionsComponent,
       ],
       imports: [
@@ -48,6 +51,7 @@ describe('StreamDefinitionsComponent', () => {
         ModalModule.forRoot(),
         PopoverModule.forRoot(),
         FormsModule,
+        FloModule,
         ReactiveFormsModule,
         RouterTestingModule.withRoutes([])
       ],

ui/src/app/streams/stream-graph-view/stream-graph-view.component.html

@@ -0,0 +1,5 @@
+<div id="stream-graph-view-container">
+  <flo-editor (floApi)="setEditorContext($event)" [metamodel]="metamodelService" [renderer]="renderService"
+              [dsl]="dsl" [paperPadding]="5" >
+  </flo-editor>
+</div>

ui/src/app/streams/stream-graph-view/stream-graph-view.component.spec.ts

@@ -0,0 +1,63 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import { StreamGraphViewComponent } from '../stream-graph-view/stream-graph-view.component';
+import { FloModule } from 'spring-flo';
+import { MockMetamodelService } from '../flo/mocks/mock-metamodel.service';
+import { MetamodelService } from '../flo/metamodel.service';
+import { RenderService } from '../flo/render.service';
+
+/**
+ * Test {@link StreamGraphViewComponent}.
+ *
+ * @author Alex Boyko
+ */
+describe('StreamGraphViewComponent', () => {
+  let component: StreamGraphViewComponent;
+  let fixture: ComponentFixture<StreamGraphViewComponent>;
+  const metamodelService = new MockMetamodelService();
+  const renderService = new RenderService(metamodelService);
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        StreamGraphViewComponent
+      ],
+      imports: [
+        FloModule
+      ],
+      providers: [
+        { provide: MetamodelService, useValue: metamodelService },
+        { provide: RenderService, useValue: renderService }
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StreamGraphViewComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should be created', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+    expect(component.dsl).toBeUndefined();
+    expect(component.flo).toBeDefined();
+  });
+
+  it('check empty read-only view', () => {
+    fixture.detectChanges();
+    expect(component.flo.noPalette).toBeTruthy();
+    expect(component.flo.readOnlyCanvas).toBeTruthy();
+    expect(component.flo.getGraph().getCells().length).toEqual(0);
+  });
+
+  it('check stream in the view', (done) => {
+    component.dsl = 'http';
+    fixture.detectChanges();
+    let subscription = component.flo.textToGraphConversionSubject.subscribe(() => {
+      subscription.unsubscribe();
+      expect(component.flo.getGraph().getElements().length).toEqual(1);
+      done();
+    });
+  });
+});

ui/src/app/streams/stream-graph-view/stream-graph-view.component.ts

@@ -0,0 +1,34 @@
+import { Component, ViewEncapsulation, Input } from '@angular/core';
+import { Flo } from 'spring-flo';
+import { MetamodelService } from '../flo/metamodel.service';
+import { RenderService } from '../flo/render.service';
+
+@Component({
+  selector: 'app-stream-graph-view',
+  templateUrl: './stream-graph-view.component.html',
+  styleUrls: [ '../flo/flo.scss' ],
+  encapsulation: ViewEncapsulation.None
+})
+export class StreamGraphViewComponent {
+
+  @Input()
+  dsl: string;
+
+  private editorContext: Flo.EditorContext;
+
+  constructor(
+    public metamodelService: MetamodelService,
+    public renderService: RenderService
+  ) {}
+
+  setEditorContext(editorContext: Flo.EditorContext) {
+    this.editorContext = editorContext;
+    this.editorContext.noPalette = true;
+    this.editorContext.readOnlyCanvas = true;
+  }
+
+  get flo(): Flo.EditorContext {
+    return this.editorContext;
+  }
+
+}

ui/src/app/streams/streams.module.ts

@@ -23,6 +23,7 @@ import { TooltipModule } from 'ngx-bootstrap';
 import { NodeComponent } from './flo/node/node.component';
 import { DecorationComponent } from './flo/decoration/decoration.component';
 import { HandleComponent } from './flo/handle/handle.component';
+import { StreamGraphViewComponent } from './stream-graph-view/stream-graph-view.component';
 
 @NgModule({
   imports: [
@@ -48,7 +49,8 @@ import { HandleComponent } from './flo/handle/handle.component';
     PropertiesDialogComponent,
     NodeComponent,
     DecorationComponent,
-    HandleComponent
+    HandleComponent,
+    StreamGraphViewComponent
   ],
   entryComponents: [
     StreamCreateDialogComponent,