[#877] apply formatting and linting to editor module

ui/.eslintignore

@@ -24,4 +24,3 @@ cypress/fixtures/**/*.csv
 src/app/CustomMaterial
 src/app/dashboard
 src/app/data-explorer
-src/app/editor

ui/.prettierignore

@@ -24,4 +24,3 @@ cypress/fixtures/**/*.csv
 src/app/CustomMaterial
 src/app/dashboard
 src/app/data-explorer
-src/app/editor

ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts

@@ -19,28 +19,24 @@
 import { Input, Directive } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import {
-  DataProcessorInvocation,
-  OutputStrategy
+    DataProcessorInvocation,
+    OutputStrategy,
 } from '@streampipes/platform-services';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class BaseOutputStrategy<T extends OutputStrategy> {
+    @Input()
+    parentForm: UntypedFormGroup;
 
-  @Input()
-  parentForm: UntypedFormGroup;
+    @Input()
+    outputStrategy: T;
 
-  @Input()
-  outputStrategy: T;
+    @Input()
+    selectedElement: DataProcessorInvocation;
 
-  @Input()
-  selectedElement: DataProcessorInvocation;
-
-  @Input()
-  restrictedEditMode: boolean;
-
-  constructor() {
-
-  }
+    @Input()
+    restrictedEditMode: boolean;
 
+    constructor() {}
 }

ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html

@@ -17,35 +17,81 @@
   -->
 <div fxFlex="100" fxLayout="column">
     <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
-        <h5 style="margin-right:10px;">{{selectedElement.inputStreams[0].name}}</h5>
-        <button mat-button mat-raised-button color="accent" class="small-button"
-                (click)="selectAll(collectedPropertiesFirstStream)"
-                style="margin-right:10px;margin-left:10px;" [disabled]="restrictedEditMode">Select all
+        <h5 style="margin-right: 10px">
+            {{ selectedElement.inputStreams[0].name }}
+        </h5>
+        <button
+            mat-button
+            mat-raised-button
+            color="accent"
+            class="small-button"
+            (click)="selectAll(collectedPropertiesFirstStream)"
+            style="margin-right: 10px; margin-left: 10px"
+            [disabled]="restrictedEditMode"
+        >
+            Select all
         </button>
-        <button mat-button mat-raised-button class="mat-basic small-button"
-                (click)="deselectAll(collectedPropertiesFirstStream)" [disabled]="restrictedEditMode">Select
-            none
+        <button
+            mat-button
+            mat-raised-button
+            class="mat-basic small-button"
+            (click)="deselectAll(collectedPropertiesFirstStream)"
+            [disabled]="restrictedEditMode"
+        >
+            Select none
         </button>
     </div>
     <div *ngFor="let property of collectedPropertiesFirstStream; let i = index">
-        <property-selection (validateForm)="checkFormValidity()" [outputStrategy]="outputStrategy" [eventProperty]="property"
-                            [layer]="0" [restrictedEditMode]="restrictedEditMode"></property-selection>
+        <sp-property-selection
+            (validateForm)="checkFormValidity()"
+            [outputStrategy]="outputStrategy"
+            [eventProperty]="property"
+            [layer]="0"
+            [restrictedEditMode]="restrictedEditMode"
+        ></sp-property-selection>
     </div>
-    <div fxLayout="column" fxFlex="100" *ngIf="collectedPropertiesSecondStream.length > 0">
+    <div
+        fxLayout="column"
+        fxFlex="100"
+        *ngIf="collectedPropertiesSecondStream.length > 0"
+    >
         <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
-            <h5 style="margin-right:10px;">{{selectedElement.inputStreams[1].name}}</h5>
-            <button mat-button mat-raised-button color="accent" class="small-button"
-                    (click)="selectAll(collectedPropertiesSecondStream)"
-                    style="margin-right:10px;margin-left:10px;" [disabled]="restrictedEditMode">Select all
+            <h5 style="margin-right: 10px">
+                {{ selectedElement.inputStreams[1].name }}
+            </h5>
+            <button
+                mat-button
+                mat-raised-button
+                color="accent"
+                class="small-button"
+                (click)="selectAll(collectedPropertiesSecondStream)"
+                style="margin-right: 10px; margin-left: 10px"
+                [disabled]="restrictedEditMode"
+            >
+                Select all
             </button>
-            <button mat-button mat-raised-button class="mat-basic small-button"
-                    (click)="deselectAll(collectedPropertiesSecondStream)" [disabled]="restrictedEditMode">Select
-                none
+            <button
+                mat-button
+                mat-raised-button
+                class="mat-basic small-button"
+                (click)="deselectAll(collectedPropertiesSecondStream)"
+                [disabled]="restrictedEditMode"
+            >
+                Select none
             </button>
         </div>
-        <div *ngFor="let property of collectedPropertiesSecondStream; let i = index">
-            <property-selection [outputStrategy]="outputStrategy" [eventProperty]="property"
-                                [layer]="0" [restrictedEditMode]="restrictedEditMode"></property-selection>
+        <div
+            *ngFor="
+                let property of collectedPropertiesSecondStream;
+                let i = index
+            "
+        >
+            <sp-property-selection
+                [outputStrategy]="outputStrategy"
+                [eventProperty]="property"
+                [layer]="0"
+                [restrictedEditMode]="restrictedEditMode"
+            ></sp-property-selection>
         </div>
     </div>
 </div>

ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.scss

@@ -15,4 +15,3 @@
  * limitations under the License.
  *
  */
-

ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts

@@ -23,51 +23,74 @@ import { PropertySelectorService } from '../../../../services/property-selector.
 import { UntypedFormControl } from '@angular/forms';
 
 @Component({
-  selector: 'custom-output-strategy',
-  templateUrl: './custom-output-strategy.component.html',
-  styleUrls: ['./custom-output-strategy.component.scss']
+    selector: 'sp-custom-output-strategy',
+    templateUrl: './custom-output-strategy.component.html',
+    styleUrls: ['./custom-output-strategy.component.scss'],
 })
-export class CustomOutputStrategyComponent extends BaseOutputStrategy<CustomOutputStrategy> implements OnInit {
+export class CustomOutputStrategyComponent
+    extends BaseOutputStrategy<CustomOutputStrategy>
+    implements OnInit
+{
+    collectedPropertiesFirstStream: any;
+    collectedPropertiesSecondStream: any;
 
-  collectedPropertiesFirstStream: any;
-  collectedPropertiesSecondStream: any;
-
-  constructor(private propertySelectorService: PropertySelectorService) {
-    super();
-  }
+    constructor(private propertySelectorService: PropertySelectorService) {
+        super();
+    }
 
-  ngOnInit() {
-    this.parentForm.addControl('output-strategy', new UntypedFormControl());
-    this.collectedPropertiesFirstStream = this.propertySelectorService
-        .makeProperties(this.getProperties(0), this.outputStrategy.availablePropertyKeys, this.propertySelectorService.firstStreamPrefix);
-    this.collectedPropertiesSecondStream = this.propertySelectorService
-        .makeProperties(this.getProperties(1), this.outputStrategy.availablePropertyKeys, this.propertySelectorService.secondStreamPrefix);
-    this.checkFormValidity();
-  }
+    ngOnInit() {
+        this.parentForm.addControl('output-strategy', new UntypedFormControl());
+        this.collectedPropertiesFirstStream =
+            this.propertySelectorService.makeProperties(
+                this.getProperties(0),
+                this.outputStrategy.availablePropertyKeys,
+                this.propertySelectorService.firstStreamPrefix,
+            );
+        this.collectedPropertiesSecondStream =
+            this.propertySelectorService.makeProperties(
+                this.getProperties(1),
+                this.outputStrategy.availablePropertyKeys,
+                this.propertySelectorService.secondStreamPrefix,
+            );
+        this.checkFormValidity();
+    }
 
-  getProperties(streamIndex) {
-    return this.selectedElement.inputStreams[streamIndex] === undefined ?
-      [] : this.selectedElement.inputStreams[streamIndex].eventSchema.eventProperties;
-  }
+    getProperties(streamIndex) {
+        return this.selectedElement.inputStreams[streamIndex] === undefined
+            ? []
+            : this.selectedElement.inputStreams[streamIndex].eventSchema
+                  .eventProperties;
+    }
 
-  selectAll(collectedProperties) {
-    collectedProperties.forEach(ep => this.outputStrategy.selectedPropertyKeys.push(ep.runtimeId));
-    // This is needed to trigger update of scope
-    this.outputStrategy.selectedPropertyKeys = this.outputStrategy.selectedPropertyKeys.filter(el => true);
-    this.checkFormValidity();
-  }
+    selectAll(collectedProperties) {
+        collectedProperties.forEach(ep =>
+            this.outputStrategy.selectedPropertyKeys.push(ep.runtimeId),
+        );
+        // This is needed to trigger update of scope
+        this.outputStrategy.selectedPropertyKeys =
+            this.outputStrategy.selectedPropertyKeys.filter(el => true);
+        this.checkFormValidity();
+    }
 
-  deselectAll(collectedProperties) {
-    collectedProperties.forEach(ep => this.outputStrategy.selectedPropertyKeys =
-        this.outputStrategy.selectedPropertyKeys.filter(item => item !== ep.runtimeId));
-    this.checkFormValidity();
-  }
+    deselectAll(collectedProperties) {
+        collectedProperties.forEach(
+            ep =>
+                (this.outputStrategy.selectedPropertyKeys =
+                    this.outputStrategy.selectedPropertyKeys.filter(
+                        item => item !== ep.runtimeId,
+                    )),
+        );
+        this.checkFormValidity();
+    }
 
-  checkFormValidity() {
-    if (!this.outputStrategy.selectedPropertyKeys || this.outputStrategy.selectedPropertyKeys.length === 0) {
-      this.parentForm.controls['output-strategy'].setErrors({});
-    } else {
-      this.parentForm.controls['output-strategy'].setErrors(undefined);
+    checkFormValidity() {
+        if (
+            !this.outputStrategy.selectedPropertyKeys ||
+            this.outputStrategy.selectedPropertyKeys.length === 0
+        ) {
+            this.parentForm.controls['output-strategy'].setErrors({});
+        } else {
+            this.parentForm.controls['output-strategy'].setErrors(undefined);
+        }
     }
-  }
 }

ui/src/app/editor/components/output-strategy/output-strategy.component.html

@@ -22,22 +22,36 @@
             <b>Select output</b>
         </div>
         <div fxFlex="100">
-            <div class="customize-item-content"
-                 *ngIf="outputStrategy['@class'] === 'org.apache.streampipes.model.output.CustomOutputStrategy'">
-                <custom-output-strategy [outputStrategy]="outputStrategy"
-                               [selectedElement]="selectedElement"
-                               [parentForm]="parentForm"
-                               [restrictedEditMode]="restrictedEditMode">
-                </custom-output-strategy>
+            <div
+                class="customize-item-content"
+                *ngIf="
+                    outputStrategy['@class'] ===
+                    'org.apache.streampipes.model.output.CustomOutputStrategy'
+                "
+            >
+                <sp-custom-output-strategy
+                    [outputStrategy]="outputStrategy"
+                    [selectedElement]="selectedElement"
+                    [parentForm]="parentForm"
+                    [restrictedEditMode]="restrictedEditMode"
+                >
+                </sp-custom-output-strategy>
             </div>
-            <div class="customize-item-content"
-                 *ngIf="outputStrategy['@class'] === 'org.apache.streampipes.model.output.UserDefinedOutputStrategy'">
-                <user-defined-output-strategy [outputStrategy]="outputStrategy"
-                                     [selectedElement]="selectedElement"
-                                     [parentForm]="parentForm"
-                                     [restrictedEditMode]="restrictedEditMode">
-                </user-defined-output-strategy>
+            <div
+                class="customize-item-content"
+                *ngIf="
+                    outputStrategy['@class'] ===
+                    'org.apache.streampipes.model.output.UserDefinedOutputStrategy'
+                "
+            >
+                <sp-user-defined-output-strategy
+                    [outputStrategy]="outputStrategy"
+                    [selectedElement]="selectedElement"
+                    [parentForm]="parentForm"
+                    [restrictedEditMode]="restrictedEditMode"
+                >
+                </sp-user-defined-output-strategy>
             </div>
         </div>
     </div>
-</div>
+</div>

ui/src/app/editor/components/output-strategy/output-strategy.component.scss

@@ -17,8 +17,8 @@
  */
 
 .static-property-panel {
-  border-left:5px solid gray;
-  padding-left: 10px;
-  margin-bottom: 10px;
-  margin-top: 10px;
-}
+    border-left: 5px solid gray;
+    padding-left: 10px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}

ui/src/app/editor/components/output-strategy/output-strategy.component.ts

@@ -17,34 +17,39 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { DataProcessorInvocation, OutputStrategy } from '@streampipes/platform-services';
+import {
+    DataProcessorInvocation,
+    OutputStrategy,
+} from '@streampipes/platform-services';
 import { UntypedFormGroup } from '@angular/forms';
 
 @Component({
-  selector: 'output-strategy',
-  templateUrl: './output-strategy.component.html',
-  styleUrls: ['./output-strategy.component.scss']
+    selector: 'sp-output-strategy',
+    templateUrl: './output-strategy.component.html',
+    styleUrls: ['./output-strategy.component.scss'],
 })
 export class OutputStrategyComponent implements OnInit {
+    @Input()
+    parentForm: UntypedFormGroup;
 
-  @Input()
-  parentForm: UntypedFormGroup;
+    @Input()
+    outputStrategy: OutputStrategy;
 
-  @Input()
-  outputStrategy: OutputStrategy;
+    @Input()
+    selectedElement: DataProcessorInvocation;
 
-  @Input()
-  selectedElement: DataProcessorInvocation;
+    @Input()
+    restrictedEditMode: boolean;
 
-  @Input()
-  restrictedEditMode: boolean;
+    label: string;
 
-  label: string;
+    customizableOutputStrategy: boolean;
 
-  customizableOutputStrategy: boolean;
-
-  ngOnInit(): void {
-    this.customizableOutputStrategy = this.outputStrategy['@class'] === 'org.apache.streampipes.model.output.CustomOutputStrategy' ||
-        this.outputStrategy['@class'] === 'org.apache.streampipes.model.output.UserDefinedOutputStrategy';
-  }
+    ngOnInit(): void {
+        this.customizableOutputStrategy =
+            this.outputStrategy['@class'] ===
+                'org.apache.streampipes.model.output.CustomOutputStrategy' ||
+            this.outputStrategy['@class'] ===
+                'org.apache.streampipes.model.output.UserDefinedOutputStrategy';
+    }
 }