Merge "platform/moblab: Check in new UI application outline."
diff --git a/partner_ui/README.md b/partner_ui/README.md
new file mode 100644
index 0000000..1e02d92
--- /dev/null
+++ b/partner_ui/README.md
@@ -0,0 +1,31 @@
+# Testing
+
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.26.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Deploying to GitHub Pages
+
+Run `ng github-pages:deploy` to deploy to GitHub Pages.
+
+## Further help
+
+To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/partner_ui/angular-cli.json b/partner_ui/angular-cli.json
new file mode 100644
index 0000000..f273f75
--- /dev/null
+++ b/partner_ui/angular-cli.json
@@ -0,0 +1,57 @@
+{
+  "project": {
+    "version": "1.0.0-beta.26",
+    "name": "moblab-partner-ui"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false,
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
+  }
+}
diff --git a/partner_ui/e2e/app.e2e-spec.ts b/partner_ui/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000..062764e
--- /dev/null
+++ b/partner_ui/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { MoblabPartnerUiPage } from './app.po';
+
+describe('moblab-partner-ui App', function() {
+  let page: MoblabPartnerUiPage;
+
+  beforeEach(() => {
+    page = new MoblabPartnerUiPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
diff --git a/partner_ui/e2e/app.po.ts b/partner_ui/e2e/app.po.ts
new file mode 100644
index 0000000..ba29115
--- /dev/null
+++ b/partner_ui/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class MoblabPartnerUiPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
diff --git a/partner_ui/e2e/tsconfig.json b/partner_ui/e2e/tsconfig.json
new file mode 100644
index 0000000..656bdb1
--- /dev/null
+++ b/partner_ui/e2e/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}
diff --git a/partner_ui/karma.conf.js b/partner_ui/karma.conf.js
new file mode 100644
index 0000000..f24c4f6
--- /dev/null
+++ b/partner_ui/karma.conf.js
@@ -0,0 +1,41 @@
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'karma-remap-istanbul']
+              : ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
diff --git a/partner_ui/moblab-partner-ui.iml b/partner_ui/moblab-partner-ui.iml
new file mode 100644
index 0000000..ee7ee7d
--- /dev/null
+++ b/partner_ui/moblab-partner-ui.iml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/dist" />
+    </content>
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/partner_ui/package.json b/partner_ui/package.json
new file mode 100644
index 0000000..f08e339
--- /dev/null
+++ b/partner_ui/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "testing",
+  "version": "0.0.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
+    "test": "ng test",
+    "pree2e": "webdriver-manager update --standalone false --gecko false",
+    "e2e": "protractor"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^2.3.1",
+    "@angular/compiler": "^2.3.1",
+    "@angular/core": "^2.3.1",
+    "@angular/forms": "^2.3.1",
+    "@angular/http": "^2.3.1",
+    "@angular/platform-browser": "^2.3.1",
+    "@angular/platform-browser-dynamic": "^2.3.1",
+    "@angular/router": "^3.3.1",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.0.1",
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.7.2"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^2.3.1",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "^6.0.42",
+    "angular-cli": "1.0.0-beta.26",
+    "codelyzer": "~2.0.0-beta.1",
+    "jasmine-core": "2.5.2",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "~4.0.13",
+    "ts-node": "1.2.1",
+    "tslint": "^4.3.0",
+    "typescript": "~2.0.3"
+  }
+}
diff --git a/partner_ui/protractor.conf.js b/partner_ui/protractor.conf.js
new file mode 100644
index 0000000..ffded70
--- /dev/null
+++ b/partner_ui/protractor.conf.js
@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};
diff --git a/partner_ui/src/app/app.component.css b/partner_ui/src/app/app.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/partner_ui/src/app/app.component.css
diff --git a/partner_ui/src/app/app.component.html b/partner_ui/src/app/app.component.html
new file mode 100644
index 0000000..ebbdce3
--- /dev/null
+++ b/partner_ui/src/app/app.component.html
@@ -0,0 +1,3 @@
+<h1>Moblab</h1>
+<run-suite>Loading....</run-suite>
+
diff --git a/partner_ui/src/app/app.component.spec.ts b/partner_ui/src/app/app.component.spec.ts
new file mode 100644
index 0000000..5be2cb3
--- /dev/null
+++ b/partner_ui/src/app/app.component.spec.ts
@@ -0,0 +1,34 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});
diff --git a/partner_ui/src/app/app.component.ts b/partner_ui/src/app/app.component.ts
new file mode 100644
index 0000000..62bfbe0
--- /dev/null
+++ b/partner_ui/src/app/app.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ],
+})
+
+export class AppComponent {
+}
+
diff --git a/partner_ui/src/app/app.module.ts b/partner_ui/src/app/app.module.ts
new file mode 100644
index 0000000..1399f06
--- /dev/null
+++ b/partner_ui/src/app/app.module.ts
@@ -0,0 +1,22 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { RunSuiteModule } from './run-suite/run-suite.module';
+import { ServicesModule} from './services/services.module';
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    RunSuiteModule,
+    ServicesModule.forRoot(),
+  ],
+  bootstrap: [AppComponent]
+})
+
+export class AppModule { }
+
diff --git a/partner_ui/src/app/index.ts b/partner_ui/src/app/index.ts
new file mode 100644
index 0000000..875bdb2
--- /dev/null
+++ b/partner_ui/src/app/index.ts
@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';
diff --git a/partner_ui/src/app/manage-duts/manage-dut.component.ts b/partner_ui/src/app/manage-duts/manage-dut.component.ts
new file mode 100644
index 0000000..dc5b508
--- /dev/null
+++ b/partner_ui/src/app/manage-duts/manage-dut.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'manage-dut',
+  template: `
+  <h1> TBD </h1>
+    `,
+})
+
+export class ManageDutComponent {
+
+}
diff --git a/partner_ui/src/app/run-suite/run-suite.component.ts b/partner_ui/src/app/run-suite/run-suite.component.ts
new file mode 100644
index 0000000..39f1b26
--- /dev/null
+++ b/partner_ui/src/app/run-suite/run-suite.component.ts
@@ -0,0 +1,137 @@
+import {Component, ViewChild, OnInit} from '@angular/core';
+import {MoblabRpcService} from '../services/services.module';
+
+@Component({
+  selector: 'run-suite',
+  template: `
+    <table>
+        <tr>
+          <moblab-selector
+            #boardSelector
+            [title] = "'Select board:'"
+            [options] = "['Pick from available boards', 'veyron_jerry']"
+            (update) = "boardChanged($event.value, $event.index)">
+          </moblab-selector>
+          <moblab-selector
+            #buildSelector
+            [title] = "'Select build:'"
+            [options] = "['Pick from available builds']"
+            (update) = "buildChanged($event.value, $event.index)">
+          >
+          </moblab-selector>
+          <moblab-selector
+            #suiteSelector
+            [title] = "'Select suite:'"
+            [options] = "['Pick from available suites']"
+            (update) = "suiteChanged($event.value, $event.index)">
+          >
+          </moblab-selector>
+          <moblab-selector
+            #rwFirmwareSelector
+            [title] = "'RW Firmware (Optional):'"
+            [options] = "['Select the RW Firmware (Faft only) (Optional)']"
+          >
+          </moblab-selector>
+          <moblab-selector
+            #roFirmwareSelector
+            [title] = "'RO Firmware (Optional):'"
+            [options] = "['Select the RO Firmware (Faft only) (Optional)']"
+          >
+          </moblab-selector>
+          <moblab-selector
+            #poolSelector
+            [title] = "'Pool (Optional):'"
+            [options] = "['Select a pool']"
+          >
+          </moblab-selector>
+        </tr>
+    </table>
+    <button disabled #runSuiteButton (click)="onRunSuite()">Run Suite</button>
+    `,
+})
+
+export class RunSuiteComponent implements OnInit {
+  pickBoard = ["Pick from available boards"];
+  pickBuild = ["Pick from available builds"];
+  pickSuite = ["Pick from available suites"];
+  pickRwFirmware = ["Select the RW Firmware (Faft only) (Optional)"];
+  pickRoFirmware = ["Select the RO Firmware (Faft only) (Optional)"];
+  pickSuites = ["Select a pool"];
+  suites = ["bvt-cq", "bvt-inline", "cts", "gts", "hardware_storagequal", "hardware_memoryqual",
+            "faft_setup", "faft_ec", "faft_bios"];
+
+  constructor(private moblabRpcService: MoblabRpcService) { }
+
+  @ViewChild('boardSelector') boardSelector;
+  @ViewChild('buildSelector') buildSelector;
+  @ViewChild('suiteSelector') suiteSelector;
+  @ViewChild('rwFirmwareSelector') rwFirmwareSelector;
+  @ViewChild('roFirmwareSelector') roFirmwareSelector;
+  @ViewChild('poolSelector') poolSelector;
+  @ViewChild('runSuiteButton') runSuiteButton;
+
+  ngOnInit() {
+    var boards: string;
+    this.moblabRpcService.getBoards().subscribe(
+      response => { boards = response },
+      error => { console.log("Error happened" + error) },
+      () => {
+        this.boardSelector.options = this.pickBoard.concat(boards);
+        this.boardSelector.setDisabled(false);
+      });
+
+    var pools: string;
+    this.moblabRpcService.getPools().subscribe(
+      response => { pools = response },
+      error => { console.log("Error happened" + error) },
+      () => {
+        this.poolSelector.options = this.pickSuites.concat(pools);
+        if (pools.length > 0) {
+          this.poolSelector.setDisabled(false);
+        }
+      });
+  }
+
+  boardChanged(boardName, selectedIndex) {
+    if(selectedIndex == 0) {
+      this.buildSelector.options = [].concat(this.pickBuild);
+      this.buildSelector.setDisabled(true);
+    } else {
+      var builds: string;
+
+      this.moblabRpcService.getBuilds(boardName).subscribe(
+        response => { builds = response },
+        error => { console.log("Error happened" + error) },
+        () => {
+          this.buildSelector.options = [].concat(this.pickBuild).concat(builds);
+          this.buildSelector.setDisabled(false);
+        });
+    }
+  }
+
+  buildChanged(value, index) {
+    if(index == 0) {
+      this.suiteSelector.options = this.pickSuite;
+      this.suiteSelector.setDisabled(true);
+    } else {
+      this.suiteSelector.options = this.pickSuite.concat(this.suites);
+      this.suiteSelector.setDisabled(false);
+    }
+  };
+
+  suiteChanged(value, index) {
+    if(index != 0) {
+      this.runSuiteButton.nativeElement.disabled = false;
+    }
+  };
+
+  onRunSuite() {
+    this.moblabRpcService.runSuite(this.boardSelector.getSelectedValue(),
+      this.buildSelector.getSelectedValue(), this.suiteSelector.getSelectedValue(),
+      this.poolSelector.getSelectedValue(), null, null).subscribe(
+      response => { console.log(response) },
+      error => { console.log("Error happened" + error) });
+  }
+
+}
+
diff --git a/partner_ui/src/app/run-suite/run-suite.module.ts b/partner_ui/src/app/run-suite/run-suite.module.ts
new file mode 100644
index 0000000..97a5171
--- /dev/null
+++ b/partner_ui/src/app/run-suite/run-suite.module.ts
@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from "@angular/common";
+import {RunSuiteComponent} from './run-suite.component';
+import {WidgetsModule} from '../widgets/widgets.module';
+
+@NgModule({
+  declarations: [
+    RunSuiteComponent,
+  ],
+  exports: [
+    RunSuiteComponent,
+  ],
+  providers: [
+  ],
+  imports: [
+    CommonModule,
+    WidgetsModule,
+  ]
+
+})
+
+export class RunSuiteModule { }
diff --git a/partner_ui/src/app/services/moblab-rpc.service.ts b/partner_ui/src/app/services/moblab-rpc.service.ts
new file mode 100644
index 0000000..20bda3f
--- /dev/null
+++ b/partner_ui/src/app/services/moblab-rpc.service.ts
@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import {Http, Response, Headers, RequestMethod} from '@angular/http';
+import 'rxjs/Rx';
+import {Observable} from "rxjs";
+
+@Injectable()
+export class MoblabRpcService {
+
+  constructor(private http: Http) { }
+
+  sendRpcCall(method, params): Observable<string> {
+
+  var headers = new Headers();
+  headers.append('Content-Type','text/plain');
+
+    var content = JSON.stringify({
+      method: method,
+      params: [params],
+      id: 0
+    });
+
+    // TODO(haddowk) mock out the RPC service for UI developement rather than using a local server.
+    //return this.http.post("http://" + window.location.hostname + "/afe/server/rpc/", content,
+    return this.http.post("http://" + "100.96.49.106" + "/afe/server/rpc/", content,
+      {headers: headers, method: RequestMethod.Post, withCredentials: true})
+    .map((res:Response) => res.json().result)
+    .catch((error: any) => {
+      return Observable.throw(error.json().error || 'Server error');
+    });
+  }
+
+  getBoards(): Observable<string> {
+    return this.sendRpcCall("get_connected_boards", {});
+  }
+
+  getBuilds(board: string): Observable<string> {
+    return this.sendRpcCall("get_builds_for_board", {"board_name": board});
+  }
+
+  getPools(): Observable<string> {
+    return this.sendRpcCall("get_connected_pools", {});
+  }
+
+  runSuite(board: string, build: string, suite: string, pool: string, rw_firmware: string,
+           ro_firmware: string){
+    return this.sendRpcCall("run_suite", {"board": board, "build": build, "suite": suite,
+      "pool": pool, "rw_firmware": rw_firmware, "ro_firmware": ro_firmware});
+  }
+}
diff --git a/partner_ui/src/app/services/services.module.ts b/partner_ui/src/app/services/services.module.ts
new file mode 100644
index 0000000..74b18db
--- /dev/null
+++ b/partner_ui/src/app/services/services.module.ts
@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {MoblabRpcService} from './moblab-rpc.service';
+import {HttpModule} from "@angular/http";
+
+@NgModule({
+  imports: [
+    HttpModule,
+  ]
+})
+
+export class ServicesModule{
+  static forRoot(){
+    return {
+      ngModule: ServicesModule,
+      providers: [MoblabRpcService]
+    }
+  }
+}
+
+export {
+  MoblabRpcService
+}
diff --git a/partner_ui/src/app/widgets/moblab-selector.component.ts b/partner_ui/src/app/widgets/moblab-selector.component.ts
new file mode 100644
index 0000000..088f1ac
--- /dev/null
+++ b/partner_ui/src/app/widgets/moblab-selector.component.ts
@@ -0,0 +1,41 @@
+import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'moblab-selector',
+  template: `
+  <div>
+    {{title}}
+    <select disabled
+       #sel
+      (change)="update.emit({value:sel.value, index:sel.selectedIndex})">
+      <option *ngFor="let option of options" 
+          value="{{option}}">{{option}}
+       </option>
+    </select>
+  </div>
+`,
+  styleUrls: ['../app.component.css'],
+})
+
+export class MoblabSelector {
+  @Input() title: string;
+  @Input() options: string[];
+
+  @Output() update = new EventEmitter();
+
+  @ViewChild('sel', ) selector;
+
+  setDisabled(newState) : void {
+    this.selector.nativeElement.disabled=newState;
+  }
+
+  getSelectedValue() : string {
+    if (this.selector.nativeElement.selectedIndex == 0) {
+      return null;
+    } else {
+      return this.selector.nativeElement.options[this.selector.nativeElement.selectedIndex].text;
+    }
+  }
+}
+
+
diff --git a/partner_ui/src/app/widgets/widgets.module.ts b/partner_ui/src/app/widgets/widgets.module.ts
new file mode 100644
index 0000000..9b75ac5
--- /dev/null
+++ b/partner_ui/src/app/widgets/widgets.module.ts
@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {MoblabSelector} from './moblab-selector.component'
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+  declarations: [
+    MoblabSelector,
+  ],
+  exports: [
+    MoblabSelector,
+  ],
+  imports: [
+    CommonModule,
+  ]
+})
+
+export class WidgetsModule { }
+
diff --git a/partner_ui/src/assets/.gitkeep b/partner_ui/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/partner_ui/src/assets/.gitkeep
diff --git a/partner_ui/src/environments/environment.prod.ts b/partner_ui/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/partner_ui/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/partner_ui/src/environments/environment.ts b/partner_ui/src/environments/environment.ts
new file mode 100644
index 0000000..00313f1
--- /dev/null
+++ b/partner_ui/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false
+};
diff --git a/partner_ui/src/favicon.ico b/partner_ui/src/favicon.ico
new file mode 100644
index 0000000..8081c7c
--- /dev/null
+++ b/partner_ui/src/favicon.ico
Binary files differ
diff --git a/partner_ui/src/index.html b/partner_ui/src/index.html
new file mode 100644
index 0000000..8154698
--- /dev/null
+++ b/partner_ui/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>MoblabPartnerUi</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>
diff --git a/partner_ui/src/main.ts b/partner_ui/src/main.ts
new file mode 100644
index 0000000..ac78a71
--- /dev/null
+++ b/partner_ui/src/main.ts
@@ -0,0 +1,12 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/app.module';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/partner_ui/src/polyfills.ts b/partner_ui/src/polyfills.ts
new file mode 100644
index 0000000..4749399
--- /dev/null
+++ b/partner_ui/src/polyfills.ts
@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
diff --git a/partner_ui/src/styles.css b/partner_ui/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/partner_ui/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/partner_ui/src/test.ts b/partner_ui/src/test.ts
new file mode 100644
index 0000000..430d4df
--- /dev/null
+++ b/partner_ui/src/test.ts
@@ -0,0 +1,34 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/partner_ui/src/tsconfig.json b/partner_ui/src/tsconfig.json
new file mode 100644
index 0000000..1cf713a
--- /dev/null
+++ b/partner_ui/src/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": "",
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}
diff --git a/partner_ui/src/typings.d.ts b/partner_ui/src/typings.d.ts
new file mode 100644
index 0000000..ea52695
--- /dev/null
+++ b/partner_ui/src/typings.d.ts
@@ -0,0 +1,2 @@
+// Typings reference file, you can add your own global typings here
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
diff --git a/partner_ui/tslint.json b/partner_ui/tslint.json
new file mode 100644
index 0000000..86bc184
--- /dev/null
+++ b/partner_ui/tslint.json
@@ -0,0 +1,116 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [true, "rxjs"],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}