gh-716 Task Module: refactoring

Tasks module:

- Refactoring
- Remove Bulk Import Page
- Remove Applications Page
- Fix UX lists

Author: oodamien

ui/src/app/shared/shared.module.ts

@@ -45,6 +45,7 @@ import { ConfirmService } from './components/confirm/confirm.service';
 import { ConfirmComponent } from './components/confirm/confirm.component';
 import { BusyService } from './services/busy.service';
 import { AutoResizeDirective } from './directives/auto-resize.directive';
+import { StreamDslComponent } from './components/dsl/dsl.component';
 
 const busyConfig: BusyConfig = {
   message: 'Processing..',
@@ -96,6 +97,7 @@ const busyConfig: BusyConfig = {
     HandleComponent,
     PropertiesDialogComponent,
     GraphViewComponent,
+    StreamDslComponent,
     TruncatePipe,
     OrderByPipe,
     ConfirmComponent
@@ -112,6 +114,7 @@ const busyConfig: BusyConfig = {
     BusyService
   ],
   exports: [
+    StreamDslComponent,
     NgBusyModule,
     ClickOutsideDirective,
     CommonModule,

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

@@ -36,7 +36,6 @@ import { EditorService } from './components/flo/editor.service';
 import { ContentAssistService } from './components/flo/content-assist.service';
 import { StreamGraphComponent } from './stream/graph/stream-graph.component';
 import { StreamSummaryComponent } from './stream/summary/stream-summary.component';
-import { StreamDslComponent } from '../shared/components/dsl/dsl.component';
 import { StreamStatusComponent } from './components/stream-status/stream-status.component';
 import { StreamDeployBuilderErrorsComponent } from './stream-deploy/builder/errors/errors.component';
 import { StreamsUndeployComponent } from './streams-undeploy/streams-undeploy.component';
@@ -78,7 +77,6 @@ import { StreamsDestroyComponent } from './streams-destroy/streams-destroy.compo
     StreamDeployBuilderComponent,
     StreamGraphComponent,
     StreamSummaryComponent,
-    StreamDslComponent,
     StreamStatusComponent,
     StreamDeployBuilderErrorsComponent,
     StreamsUndeployComponent,

ui/src/app/tasks/flo/content-assist.service.ts renamed to ui/src/app/tasks/components/flo/content-assist.service.ts

@@ -1,15 +1,16 @@
 import { Injectable } from '@angular/core';
 import { Http, URLSearchParams } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
-import { HttpUtils } from '../../shared/support/http.utils';
+import { HttpUtils } from '../../../shared/support/http.utils';
 
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
 
 @Injectable()
 export class ContentAssistService {
 
-  constructor(private http: Http) {}
+  constructor(private http: Http) {
+  }
 
   getProposals(prefix: string): Observable<Array<string>> {
     const options = HttpUtils.getDefaultRequestOptions();

ui/src/app/tasks/flo/editor.service.spec.ts renamed to ui/src/app/tasks/components/flo/editor.service.spec.ts

@@ -1,12 +1,12 @@
-import {MockSharedAppService} from '../../tests/mocks/shared-app';
-import {Constants, EditorComponent, Flo, FloModule} from 'spring-flo';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MetamodelService} from './metamodel.service';
-import {RenderService} from './render.service';
-import {EditorService} from './editor.service';
-import {dia} from 'jointjs';
+import { MockSharedAppService } from '../../../tests/mocks/shared-app';
+import { Constants, EditorComponent, Flo, FloModule } from 'spring-flo';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MetamodelService } from './metamodel.service';
+import { RenderService } from './render.service';
+import { EditorService } from './editor.service';
+import { dia } from 'jointjs';
 import * as _joint from 'jointjs';
-import {MockToolsService} from '../../tests/mocks/mock-tools';
+import { MockToolsService } from '../../../tests/mocks/mock-tools';
 
 const joint: any = _joint;
 
@@ -29,9 +29,9 @@ describe('Task RenderService', () => {
         FloModule
       ],
       providers: [
-        {provide: MetamodelService, useValue: METAMODEL_SERVICE},
-        {provide: RenderService, useValue: RENDER_SERVICE},
-        {provide: EditorService, useValue: EDITOR_SERVICE}
+        { provide: MetamodelService, useValue: METAMODEL_SERVICE },
+        { provide: RenderService, useValue: RENDER_SERVICE },
+        { provide: EditorService, useValue: EDITOR_SERVICE }
       ]
     })
       .compileComponents();
@@ -121,16 +121,16 @@ describe('Task RenderService', () => {
   });
 
   it('simple dnd', () => {
-    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), {x: 100, y: 200});
+    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), { x: 100, y: 200 });
     expect(taskA.attr('metadata/name')).toBe('a');
     expect(taskA.get('position').x).toBe(100);
     expect(taskA.get('position').y).toBe(200);
     expect(flo.getPaper().findViewByModel(taskA)).toBeDefined();
   });
 
   it('drop node from the palette on link', () => {
-    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), {x: 100, y: 20});
-    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 100, y: 200});
+    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), { x: 100, y: 20 });
+    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 100, y: 200 });
     const link = createLink(taskA, taskB);
     const taskC = dropNodeFromPaletteOnCanvasLink(METAMODEL.get('task').get('c'), link);
     const links = flo.getGraph().getLinks();
@@ -146,9 +146,9 @@ describe('Task RenderService', () => {
     expect(link2.get('target').id).toBe(taskB.id);
   });
 
-  it ('drag descriptor - drop on output port', () => {
-    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), {x: 100, y: 20});
-    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 100, y: 200});
+  it('drag descriptor - drop on output port', () => {
+    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), { x: 100, y: 20 });
+    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 100, y: 200 });
     const rectA = taskA.getBBox();
     const dropPt = joint.g.point(rectA.x + rectA.width / 2, rectA.y + rectA.height);
     const dragDescriptor = EDITOR_SERVICE.calculateDragDescriptor(flo, flo.getPaper().findViewByModel(taskB),
@@ -160,9 +160,9 @@ describe('Task RenderService', () => {
     expect(dragDescriptor.target.cssClassSelector).toBe('.output-port');
   });
 
-  it ('drag descriptor - drop on input port', () => {
-    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), {x: 100, y: 20});
-    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 100, y: 200});
+  it('drag descriptor - drop on input port', () => {
+    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), { x: 100, y: 20 });
+    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 100, y: 200 });
     const rectA = taskA.getBBox();
     const dropPt = joint.g.point(rectA.x + rectA.width / 2, rectA.y);
     const dragDescriptor = EDITOR_SERVICE.calculateDragDescriptor(flo,
@@ -177,10 +177,10 @@ describe('Task RenderService', () => {
     expect(dragDescriptor.target.cssClassSelector).toBe('.input-port');
   });
 
-  it ('drag descriptor - drop connected node on port', () => {
-    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), {x: 100, y: 20});
-    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 100, y: 200});
-    const taskC = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 300, y: 20});
+  it('drag descriptor - drop connected node on port', () => {
+    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), { x: 100, y: 20 });
+    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 100, y: 200 });
+    const taskC = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 300, y: 20 });
     const link = createLink(taskB, taskC);
     const rectA = taskA.getBBox();
     const dropPt = joint.g.point(rectA.x + rectA.width / 2, rectA.y);
@@ -196,9 +196,9 @@ describe('Task RenderService', () => {
   });
 
   it('pre-delete', () => {
-    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), {x: 100, y: 20});
-    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 100, y: 200});
-    const taskC = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 300, y: 20});
+    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), { x: 100, y: 20 });
+    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 100, y: 200 });
+    const taskC = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 300, y: 20 });
     createLink(taskB, taskC);
     createLink(taskC, taskA);
 
@@ -217,8 +217,8 @@ describe('Task RenderService', () => {
   });
 
   it('drop node on node input port', () => {
-    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), {x: 100, y: 20});
-    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 100, y: 200});
+    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), { x: 100, y: 20 });
+    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 100, y: 200 });
     const dragDescriptor = {
       sourceComponent: Constants.CANVAS_CONTEXT,
       source: {
@@ -245,8 +245,8 @@ describe('Task RenderService', () => {
   });
 
   it('drop node on node output port', () => {
-    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), {x: 100, y: 20});
-    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), {x: 100, y: 200});
+    const taskA = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('a'), { x: 100, y: 20 });
+    const taskB = dropNodeFromPaletteOnCanvas(METAMODEL.get('task').get('b'), { x: 100, y: 200 });
     const dragDescriptor = {
       sourceComponent: Constants.CANVAS_CONTEXT,
       source: {

ui/src/app/tasks/flo/editor.service.ts renamed to ui/src/app/tasks/components/flo/editor.service.ts

@@ -5,7 +5,7 @@ import { CONTROL_GROUP_TYPE, END_NODE_TYPE, START_NODE_TYPE, SYNC_NODE_TYPE } fr
 import { dia } from 'jointjs';
 import * as _joint from 'jointjs';
 import { TaskPropertiesDialogComponent } from './properties/task-properties-dialog-component';
-import {TaskGraphPropertiesSource} from './properties/task-properties-source';
+import { TaskGraphPropertiesSource } from './properties/task-properties-source';
 
 const joint: any = _joint;
 
@@ -20,9 +20,8 @@ const DND_ENABLED = true; // Is smart DnD enabled?
 @Injectable()
 export class EditorService implements Flo.Editor {
 
-  constructor(
-    private bsModalService: BsModalService
-  ) {}
+  constructor(private bsModalService: BsModalService) {
+  }
 
   interactive = {
     vertexAdd: true
@@ -121,29 +120,29 @@ export class EditorService implements Flo.Editor {
 
   preDelete(flo: Flo.EditorContext, deletedElement: dia.Cell): void {
     if (deletedElement instanceof joint.dia.Element) {
-      flo.getGraph().getConnectedLinks(deletedElement).forEach(function(link) {
+      flo.getGraph().getConnectedLinks(deletedElement).forEach(function (link) {
         link.remove();
       });
     }
   }
 
-  private validateConnectedLinks(graph: dia.Graph, element: dia.Element, markers: Array<Flo.Marker>)  {
+  private validateConnectedLinks(graph: dia.Graph, element: dia.Element, markers: Array<Flo.Marker>) {
     if (element.attr('metadata') && !element.attr('metadata/unresolved')) {
       const type = element.attr('metadata/name');
-      const incoming = graph.getConnectedLinks(element, {inbound: true});
-      const outgoing = graph.getConnectedLinks(element, {outbound: true});
+      const incoming = graph.getConnectedLinks(element, { inbound: true });
+      const outgoing = graph.getConnectedLinks(element, { outbound: true });
 
       // Verify that there is no more than link with the same 'ExitStatus' coming out
       // Verify there are no outgoing links to same type tasks (to duplicates)
       const exitStatusNumber = new Map<string, number>();
       outgoing.filter(l => l.attr('props/ExitStatus')).forEach(l => {
-          const exitStatus = l.attr('props/ExitStatus');
-          const number = exitStatusNumber.get(l.attr('props/ExitStatus'));
-          if (typeof number === 'number') {
-            exitStatusNumber.set(exitStatus, number + 1);
-          } else {
-            exitStatusNumber.set(exitStatus, 1);
-          }
+        const exitStatus = l.attr('props/ExitStatus');
+        const number = exitStatusNumber.get(l.attr('props/ExitStatus'));
+        if (typeof number === 'number') {
+          exitStatusNumber.set(exitStatus, number + 1);
+        } else {
+          exitStatusNumber.set(exitStatus, 1);
+        }
       });
       Array.from(exitStatusNumber.keys())
         .filter(status => exitStatusNumber.get(status) && exitStatusNumber.get(status) > 1)
@@ -369,7 +368,7 @@ export class EditorService implements Flo.Editor {
               }
             }
           });
-      });
+        });
     }
     if (closestData) {
       return closestData;
@@ -394,65 +393,65 @@ export class EditorService implements Flo.Editor {
                          shouldRepairDamage: boolean) {
     side = side || 'left';
     // if (this.canSwap(flo, node, pivotNode, side)) {
-      if (side === 'left') {
-        const sources: Array<string> = [];
-        if (shouldRepairDamage) {
-          this.repairDamage(flo, node);
-        }
-        flo.getGraph().getConnectedLinks(pivotNode, {inbound: true}).forEach(link => {
-          sources.push(link.get('source').id);
-          link.remove();
-        });
-        sources.forEach(source => {
-          flo.createLink({
-            'id': source,
-            'selector': '.output-port',
-            'port': 'output'
-          }, {
-            'id': node.id,
-            'selector': '.input-port',
-            'port': 'input'
-          });
-        });
+    if (side === 'left') {
+      const sources: Array<string> = [];
+      if (shouldRepairDamage) {
+        this.repairDamage(flo, node);
+      }
+      flo.getGraph().getConnectedLinks(pivotNode, { inbound: true }).forEach(link => {
+        sources.push(link.get('source').id);
+        link.remove();
+      });
+      sources.forEach(source => {
         flo.createLink({
-          'id': node.id,
+          'id': source,
           'selector': '.output-port',
           'port': 'output'
         }, {
-          'id': pivotNode.id,
+          'id': node.id,
           'selector': '.input-port',
           'port': 'input'
         });
-      } else if (side === 'right') {
-        const targets: Array<string> = [];
-        if (shouldRepairDamage) {
-          this.repairDamage(flo, node);
-        }
-        flo.getGraph().getConnectedLinks(pivotNode, {outbound: true}).forEach(link => {
-          targets.push(link.get('target').id);
-          link.remove();
-        });
-        targets.forEach(target => {
-          flo.createLink({
-            'id': node.id,
-            'selector': '.output-port',
-            'port': 'output'
-          }, {
-            'id': target,
-            'selector': '.input-port',
-            'port': 'input'
-          });
-        });
+      });
+      flo.createLink({
+        'id': node.id,
+        'selector': '.output-port',
+        'port': 'output'
+      }, {
+        'id': pivotNode.id,
+        'selector': '.input-port',
+        'port': 'input'
+      });
+    } else if (side === 'right') {
+      const targets: Array<string> = [];
+      if (shouldRepairDamage) {
+        this.repairDamage(flo, node);
+      }
+      flo.getGraph().getConnectedLinks(pivotNode, { outbound: true }).forEach(link => {
+        targets.push(link.get('target').id);
+        link.remove();
+      });
+      targets.forEach(target => {
         flo.createLink({
-          'id': pivotNode.id,
+          'id': node.id,
           'selector': '.output-port',
           'port': 'output'
         }, {
-          'id': node.id,
+          'id': target,
           'selector': '.input-port',
           'port': 'input'
         });
-      }
+      });
+      flo.createLink({
+        'id': pivotNode.id,
+        'selector': '.output-port',
+        'port': 'output'
+      }, {
+        'id': node.id,
+        'selector': '.input-port',
+        'port': 'input'
+      });
+    }
     // }
   }
 
@@ -502,8 +501,7 @@ export class EditorService implements Flo.Editor {
       } else if (dragDescriptor.target.cssClassSelector === '.input-port') {
         this.moveNodeOnNode(flo, <dia.Element> source.model, <dia.Element> target.model, 'left', false);
       }
-    } else
-    if (source instanceof joint.dia.ElementView && target instanceof joint.dia.LinkView) {
+    } else if (source instanceof joint.dia.ElementView && target instanceof joint.dia.LinkView) {
       this.moveNodeOnLink(flo, <dia.Element> source.model, <dia.Link> target.model);
     }
   }