Merge pull request #465 from TIBCOSoftware/profile-support

Device Profile Support

src/client/app/flogo.apps.add/components/profile-select.component.ts

@@ -0,0 +1,69 @@
+import {Component, AfterViewInit, Output, ViewChild} from "@angular/core";
+import {ModalComponent} from "ng2-bs3-modal/ng2-bs3-modal";
+import {EventEmitter} from "@angular/common/src/facade/async";
+import {ProfilesAPIService} from "../../../common/services/restapi/v2/profiles-api.service";
+import {FLOGO_PROFILE_TYPE} from "../../../common/constants";
+
+interface DeviceProfile {
+  type: string;
+  id: string;
+}
+
+@Component({
+  selector: 'flogo-apps-profile-selection',
+  templateUrl: 'profile-selection.tpl.html',
+  styleUrls: ['profile-selection.less']
+})
+export class ProfileSelectionComponent  implements AfterViewInit {
+  @ViewChild('profileSelectionModal') profileSelectionModal: ModalComponent;
+
+  @Output() onClose: EventEmitter<any> = new EventEmitter();
+  @Output() onAdd: EventEmitter<any> = new EventEmitter();
+
+  showList: boolean = false;
+  devicesList: DeviceProfile[];
+  FLOGO_PROFILE_TYPE: typeof FLOGO_PROFILE_TYPE = FLOGO_PROFILE_TYPE;
+
+  constructor(private profilesService: ProfilesAPIService) {}
+
+  ngAfterViewInit() {
+    this.openModal();
+  }
+
+  openModal() {
+    this.profileSelectionModal.open();
+  }
+
+  closeModal() {
+    this.profileSelectionModal.close();
+    this.onModalCloseOrDismiss();
+  }
+
+  onModalCloseOrDismiss() {
+    this.onClose.emit();
+  }
+
+  showDevicesList() {
+    this.profilesService.getProfilesList().then((response) => {
+      this.showList = true;
+      this.devicesList = response;
+    });
+  }
+
+  onAddProfile(profileType: FLOGO_PROFILE_TYPE, profile?: string) {
+    let profileDetails:any = {profileType};
+    if(profileType === FLOGO_PROFILE_TYPE.DEVICE){
+      profileDetails.profile ="github.com/TIBCOSoftware/flogo-contrib/device/profile/feather_m0_wifi";
+      profileDetails.deviceType = profile;
+      profileDetails.settings = {
+        "mqtt:server": "",
+        "mqtt:port": "",
+        "mqtt:user": "",
+        "mqtt:pass": "",
+        "wifi:ssid": "",
+        "wifi:password": ""
+      }
+    }
+    this.onAdd.emit(profileDetails);
+  }
+}

src/client/app/flogo.apps.add/components/profile-select.spec.ts

@@ -0,0 +1,81 @@
+import {ProfileSelectionComponent} from "./profile-select.component";
+import {ComponentFixture, inject, TestBed} from "@angular/core/testing";
+import {TranslateModule} from "ng2-translate";
+import {ModalComponent} from "ng2-bs3-modal/ng2-bs3-modal";
+import {ProfilesAPIService} from "../../../common/services/restapi/v2/profiles-api.service";
+import {MockProfilesAPIService} from "../../../common/services/restapi/v2/profiles-api.service.mock";
+import {By} from "@angular/platform-browser";
+import {FLOGO_PROFILE_TYPE} from "../../../common/constants";
+describe("Component: ProfileSelectionComponent", ()=>{
+  let comp: ProfileSelectionComponent, service = null,
+    fixture: ComponentFixture<ProfileSelectionComponent>;
+
+  function compileComponent() {
+    return TestBed.compileComponents();
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ProfileSelectionComponent, ModalComponent], // declare the test component
+      providers: [{provide: ProfilesAPIService, useClass: MockProfilesAPIService}]
+    });
+  });
+
+  beforeEach(inject([ProfilesAPIService], (serviceAPI: ProfilesAPIService)=> {
+    service = serviceAPI;
+  }));
+
+  it("Should emit 'microservice' when selecting microservice profile", (done) => {
+    compileComponent()
+      .then(() => {
+        fixture = TestBed.createComponent(ProfileSelectionComponent);
+        comp = fixture.componentInstance;
+        comp.profileSelectionModal.open();
+        fixture.detectChanges();
+        comp.onAdd.subscribe((profileDetails)=>{
+          expect(profileDetails.profileType).toEqual(FLOGO_PROFILE_TYPE.MICRO_SERVICE);
+          done();
+        });
+        let de = fixture.debugElement.queryAll(By.css('.flogo-profile__section'));
+        de[1].nativeElement.click();
+      });
+  });
+
+  it("Should show 3 devices in the list when device is selected", (done) => {
+    compileComponent()
+      .then(() => {
+        fixture = TestBed.createComponent(ProfileSelectionComponent);
+        comp = fixture.componentInstance;
+        comp.profileSelectionModal.open();
+        comp.showList = true;
+        service.getProfilesList().then((res)=> {
+          comp.devicesList = res;
+          fixture.detectChanges();
+          let de = fixture.debugElement.queryAll(By.css('.flogo-profile__list-element'));
+          expect(de.length).toEqual(3);
+          done();
+        });
+      });
+  });
+
+  it("Should emit 'Atmel AVR' when selecting Atmel AVR device profile", (done) => {
+    compileComponent()
+      .then(() => {
+        fixture = TestBed.createComponent(ProfileSelectionComponent);
+        comp = fixture.componentInstance;
+        comp.profileSelectionModal.open();
+        comp.onAdd.subscribe((profileDetails)=>{
+          expect(profileDetails.deviceType).toEqual('Atmel AVR');
+          done();
+        });
+        comp.showList = true;
+        service.getProfilesList().then((res)=> {
+          comp.devicesList = res;
+          fixture.detectChanges();
+          let de = fixture.debugElement.queryAll(By.css('.flogo-profile__list-element'));
+          de[0].nativeElement.click();
+        });
+      });
+  });
+});

src/client/app/flogo.apps.add/components/profile-selection.less

@@ -0,0 +1,115 @@
+@import "../../../assets/_variables";
+
+.flogo-profile__modal-body {
+  text-align: center;
+}
+
+.flogo-profile__close {
+  color: #b5b5b5;
+  position: fixed;
+  top: 24px;
+  right: 24px;
+
+  height: 18px;
+  width: 18px;
+
+  cursor: pointer;
+}
+
+.flogo-profile__head {
+  font-size: 24px;
+  color: #666666;
+  letter-spacing: 0.4px;
+}
+
+.flogo-profile__container {
+  padding: 30px 0;
+
+  .flogo-profile__section-wrapper {
+    display: flex;
+
+    .flogo-profile__section {
+      padding: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: 120px;
+      height: 120px;
+
+      .flogo-profile__button{
+        margin-bottom: 12px;
+      }
+
+      .flogo-profile__label {
+        margin: 0;
+        font-size: 0.9em;
+        line-height: normal;
+      }
+    }
+
+    .flogo-profile__section:nth-of-type(1) {
+      margin-left: 90px;
+    }
+
+    .flogo-profile__section:nth-of-type(2) {
+      margin-left: 53px;
+    }
+
+    .flogo-profile__labels {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: auto;
+      width: 350px;
+      margin-top: 10px;
+      padding: 0
+    }
+  }
+
+
+
+
+
+
+}
+
+.flogo-profile__list-container {
+  text-align: left;
+  padding: 10px;
+
+  .flogo-profile__modal-thumbnail {
+    width: 30px;
+    height: 30px;
+    float: left;
+    margin-right: 20px;
+    background-size: 95%;
+    border-radius: 2px;
+    background-position: 0px;
+  }
+
+  .flogo-profile__list {
+    border: 1px solid @profile-device-color;
+    padding: 10px;
+    padding-right: 5px;
+    height: 230px;
+    overflow-y: auto;
+
+    .flogo-profile__list-element {
+      margin: 0;
+      padding: 4px 12px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba(197, 202, 233, 0.5);
+      }
+    }
+  }
+}
+
+.flogo-profile__list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.flogo-profile__list::-webkit-scrollbar-thumb {
+  border-radius: 100px;
+  background-color: rgba(114, 114, 114, 0.2);
+}

src/client/app/flogo.apps.add/components/profile-selection.tpl.html

@@ -0,0 +1,48 @@
+<modal [cssClass]="'flogo-common-modal flogo-profile__modal'" #profileSelectionModal (onClose)="onModalCloseOrDismiss()"
+       (onDismiss)="onModalCloseOrDismiss()">
+  <div class="flogo-profile__modal-body">
+    <i class="flogo-icon-close flogo-profile__close" (click)="closeModal()"></i>
+    <div *ngIf="!showList">
+      <h4 class="flogo-profile__head">{{'PROFILE-MODAL:SELECT_PROFILE' | translate}}</h4>
+
+      <div class="flogo-profile__container">
+
+        <div class="flogo-profile__section-wrapper">
+          <!--
+          Temporarily avoiding the showDevicesList() call when user clicks on the device icon.
+          <div class="flogo-profile__section" (click)="showDevicesList()">
+          -->
+          <div class="flogo-profile__section" (click)="onAddProfile(FLOGO_PROFILE_TYPE.DEVICE, 'Feather M0 WIFI')">
+            <div class="flogo-profile__tile flogo-profile__device--selectable">
+            </div>
+          </div>
+          <div class="flogo-profile__section" (click)="onAddProfile(FLOGO_PROFILE_TYPE.MICRO_SERVICE)">
+            <div class="flogo-profile__tile flogo-profile__microservice--selectable">
+            </div>
+          </div>
+        </div>
+
+        <div class="flogo-profile__section-wrapper">
+          <div class="flogo-profile__labels">
+            <div class="flogo-profile__label flogo-profile__device-label">{{'PROFILE-MODAL:LABEL_DEVICE' | translate}}</div>
+            <div class="flogo-profile__label flogo-profile__microservice-label">{{'PROFILE-MODAL:LABEL_MICROSERVICE' | translate}}</div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div *ngIf="showList" class="flogo-profile__list-container">
+      <div class="flogo-profile__list-head">
+        <div class="flogo-profile__device flogo-profile__modal-thumbnail"></div>
+        <h4 class="flogo-profile__head">{{'PROFILE-MODAL:SELECT_DEVICE' | translate}}</h4>
+      </div>
+      <ul class="flogo-profile__list list-unstyled clearfix">
+        <li *ngFor="let device of devicesList" (click)="onAddProfile(FLOGO_PROFILE_TYPE.DEVICE, device.type)"
+            class="flogo-profile__list-element">
+          {{device.type}}
+        </li>
+      </ul>
+    </div>
+  </div>
+</modal>