User range recommendations

package.json

@@ -24,7 +24,7 @@
     "@angular/platform-browser-dynamic": "2.0.0",
     "@angular/router": "3.0.0",
     "@angular/upgrade": "2.0.0",
-    "angular2-moment": "^0.8.2",
+    "angular2-moment": "^1.0.0",
     "angular2-token": "0.1.14",
     "angulartics2": "^1.4.2",
     "bootstrap": "^3.3.7",
@@ -41,8 +41,9 @@
     "ng2-bootstrap": "1.1.5",
     "ng2-charts": "1.3.x",
     "ng2-gravatar-directive": "1.4.1",
+    "ng2-nouislider": "^1.4.1",
     "ng2-validators": "1.5.1",
-    "nouislider": "^8.5.1",
+    "nouislider": "^9.1.0",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
     "showdown": "^1.4.1",

src/app/api/services/ingredient.service.ts

@@ -43,6 +43,12 @@ export class IngredientService extends RestService {
           .catch(this.handleError);
     }
 
+    recommendationsCompleted(id: number): Observable<Recommendation[]> {
+      return this.http.get(this.configs.apiUrl + '/' + this.pluralizedResourceName() + '/' + id + '/recommendations_completed', this.request.getOptions(null, null))
+          .map(res => <this> res.json())
+          .catch(this.handleError);
+    }
+
     findRecommendations(id: number): Observable<any> {
         return this.http.get(this.configs.apiUrl + '/' + this.pluralizedResourceName() + '/' + id + '/has_recommendations', this.request.getOptions(null, null))
             .map(res => <this> res.json())
@@ -61,6 +67,12 @@ export class IngredientService extends RestService {
           .catch(this.handleError);
     }
 
+    triggerRangeRecommendation(id: number, min: number, max: number, step: number): Observable<{job_id: string}> {
+      return this.http.post(this.configs.apiUrl + '/' + this.pluralizedResourceName() + '/' + id + '/trigger_range', {ingredient_id: id, min: min, max: max, step: step}, this.request.getOptions(null, null))
+          .map(res => <this> res.json())
+          .catch(this.handleError);
+    }
+
     instantiate(id: number): Observable<Ingredient> {
       return this.http.get(this.configs.apiUrl + '/' + this.pluralizedResourceName() + '/' + id + '/instance', this.request.getOptions(null, null))
           .map(res => <this> res.json())

src/app/api/services/recommendation.service.ts

@@ -34,6 +34,33 @@ export class RecommendationService extends RestService {
         });
     }
 
+    triggerRange(ingredientId: number, min: number, max: number, step: number): Observable<Recommendation[]> {
+      return Observable.create(subscriber => {
+          // first, trigger the job to generate the recommendation
+          this._ingredientService.triggerRangeRecommendation(ingredientId, min, max, step).subscribe(
+            result => {
+              this.fetchRangeJobStatus(ingredientId, subscriber);
+            },
+            error => console.log(error)
+          );
+
+        });
+    }
+
+    private fetchRangeJobStatus(ingredientId: number, subscription: Subscriber<Recommendation[]>) {
+      this._ingredientService.recommendationsCompleted(ingredientId).subscribe(recommendationComplete => {
+        if (recommendationComplete) {
+          this.fetchRecommendation(ingredientId, subscription);
+        } else {
+          setTimeout(() => {
+            this.fetchRangeJobStatus(ingredientId, subscription);
+          }, 2500);
+        }
+      }, error => {
+        console.error(error);
+      });
+    }
+
     private fetchJobStatus(uuid: string, ingredientId: number, subscription: Subscriber<Recommendation[]>) {
       this._jobService.get(uuid).subscribe(jobResult => {
         if (jobResult.delayed_job.attempts === 1) {

src/app/app.module.ts

@@ -21,7 +21,7 @@ import '../style/app.less';
 
 @NgModule({
  imports: [
-   Angulartics2Module.forRoot(),
+   Angulartics2Module.forRoot([]),
    BrowserModule,
    AuthModule,
    SidebarModule,

src/app/recommendations/charts/sensitivity-chart.component.ts

@@ -108,8 +108,6 @@ export class RecommendationSensitivityChartComponent implements OnChanges {
 
     }
 
-    console.log(this.chartColors);
-
   }
 
 }

src/app/recommendations/recommendation.component.html

@@ -46,8 +46,8 @@ <h3 class="dashhead-title">Recommendations</h3>
   </div>
 
   <div class="row padded-row">
-    <div class="col-lg-8">
-      <cs-user-workload-slider [ingredient]="application" [disabled]="generatingRecommendation"></cs-user-workload-slider>
+    <div class="col-lg-8 recommendation-range">
+      <nouislider [config]="recommendationRange.config" [min]="recommendationRange.min" [max]="recommendationRange.max" [step]="recommendationRange.step" [(ngModel)]="recommendationRange.range"></nouislider>
     </div>
     <div class="col-lg-4 text-right">
       <button [ngClass]="{'disabled': generatingRecommendation}" class="btn btn-primary" (click)="triggerRecommendation()">
@@ -57,7 +57,7 @@ <h3 class="dashhead-title">Recommendations</h3>
     </div>
   </div>
 
-  <div class="hr-divider">
+  <div class="hr-divider" style="padding-top: 20px">
     <h3 class="hr-divider-content hr-divider-heading">
       Generated Recommendations
     </h3>

src/app/recommendations/recommendation.component.less

@@ -5,6 +5,10 @@
   padding: 25px;
 }
 
+.recommendation-range {
+  height: 85px;
+}
+
 .padded-row {
   padding: 25px 0;
 }

src/app/recommendations/recommendation.component.ts

@@ -33,6 +33,17 @@ export class RecommendationComponent implements OnInit {
       {id: 'SA', name: 'South America'}
     ];
 
+    public recommendationRange: { config: any, min: number, max: number, range: number[], step: number } = { config: {
+      connect: true,
+      tooltips: [true, true],
+      pips: {
+        mode: 'range',
+        density: 5,
+        stepped: true
+      }
+    },
+    min: 0, max: 50000, range: [1000, 10000], step: 1000 };
+
     public selectableProviders: string[] = ['Google', 'Microsoft Azure', 'Digital Ocean', 'Atlantic.net', 'Amazon', 'Rackspace', 'Joyent'];
 
     constructor(
@@ -78,7 +89,7 @@ export class RecommendationComponent implements OnInit {
 
     triggerRecommendation() {
       this.generatingRecommendation = true;
-      this._recommendationService.get(this.application.id).subscribe(
+      this._recommendationService.triggerRange(this.application.id, this.recommendationRange.range[0], this.recommendationRange.range[1], this.recommendationRange.step).subscribe(
         result => {
           this.recommendations = result.sort((a, b) => { return new Date(a.created_at).getTime() - new Date(b.created_at).getTime(); }).reverse();
           this.generatingRecommendation = false;

src/app/recommendations/recommendations.module.ts

@@ -5,6 +5,7 @@ import { HttpModule } from '@angular/http';
 import { SharedModule } from '../shared/shared.module';
 import { ApiModule } from '../api/api.module';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { NouisliderModule } from 'ng2-nouislider';
 
 import { routing } from './recommendations.routes';
 
@@ -31,6 +32,7 @@ import { TimeAgoPipe } from 'angular2-moment';
     ModalModule,
     FormsModule,
     ChartsModule,
+    NouisliderModule,
     ReactiveFormsModule,
     routing
   ],

src/style/nouislider.less

@@ -13,6 +13,7 @@
 }
 
 .noUi-target {
+  background: @gray;
   box-shadow: none;
   border: 1px solid @gray;
 }
@@ -26,5 +27,9 @@
 }
 
 .noUi-connect {
-  background: @brand-primary;
+  background: @gray-dark;
 }
+
+.noUi-pips {
+  color: @gray;
+}