added alert support to all panels. Removed cookieservice (angular2-co…

…okie). Storing service_type inside localStorage. Using my branch of angular-cli until angular/angular-cli#3201 is merged.

circle.yml

@@ -10,7 +10,7 @@ general:
 dependencies:
   override:
     - npm install npm@latest -g
-    - npm install -g angular-cli@1.0.0-beta.20-4
+    - npm install -g git+ssh://[email protected]/AnalogJ/angular-cli.git#AnalogJ-patch-1
     - npm install
 
 test:

package.json

@@ -20,7 +20,6 @@
     "@angular/platform-browser": "~2.1.0",
     "@angular/platform-browser-dynamic": "~2.1.0",
     "@angular/router": "~3.1.0",
-    "angular2-cookie": "^1.2.5",
     "angular2-infinite-scroll": "^0.2.6",
     "angular2-jwt": "^0.1.25",
     "angular2-moment": "^1.0.0-beta.rc.1",
@@ -33,7 +32,7 @@
   "devDependencies": {
     "@types/jasmine": "^2.2.30",
     "@types/node": "^6.0.42",
-    "angular-cli": "1.0.0-beta.20-4",
+    "angular-cli": "AnalogJ/angular-cli#AnalogJ-patch-1",
     "codelyzer": "1.0.0-beta.1",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",

src/app/app.module.ts

@@ -18,7 +18,6 @@ import { ApiService } from './services/api.service'
 import { CacheService } from './services/cache.service'
 import { AuthGuard } from './services/auth-guard.service'
 import { provideAuth } from 'angular2-jwt';
-import { CookieService } from 'angular2-cookie/services/cookies.service';
 import {MomentModule} from 'angular2-moment';
 import { InfiniteScrollModule } from 'angular2-infinite-scroll';
 
@@ -61,7 +60,6 @@ import { InfiniteScrollModule } from 'angular2-infinite-scroll';
   providers: [
     ApiService,
     CacheService,
-    CookieService,
     AuthGuard,
     provideAuth({
       globalHeaders: [{'Content-Type':'application/json'}]

src/app/auth-callback/auth-callback.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { ApiService } from '../services/api.service';
 import { ActivatedRoute } from '@angular/router';
 import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';
-import { CookieService } from 'angular2-cookie/core';
 import {Router} from '@angular/router'
 
 @Component({
@@ -15,7 +14,7 @@ export class AuthCallbackComponent implements AfterViewInit {
 
   successfulCallback = true
 
-  constructor(private apiService: ApiService, private router: Router, private cookieService:CookieService, private activatedRoute: ActivatedRoute) { }
+  constructor(private apiService: ApiService, private router: Router, private activatedRoute: ActivatedRoute) { }
 
   ngAfterViewInit() {
     this.childModal.show()
@@ -30,7 +29,8 @@ export class AuthCallbackComponent implements AfterViewInit {
             data => {
               console.log(data)
               localStorage.setItem('id_token', data.token) //set the JWT token
-              this.cookieService.put('CAPSULECD_SERVICE_TYPE',data.service_type)
+              localStorage.setItem('service_type', data.service_type)
+
               this.router.navigate(['/dashboard'])
             },
             error => console.log(error)

src/app/dashboard/dashboard.component.html

@@ -8,6 +8,16 @@ <h2 class="title">Dashboard</h2>
           <div class="description">Tonsequat in erat ut, congue bibendum nulla. Suspendisse id pharetra lacus, et hendrerit mi. Praesent at vestibulum tortor. Praesent condimentum efficitur massa pharetra dolor sed.</div>
         </div>
       </div>
+
+      <div class="row">
+        <div class="col-lg-10 col-lg-offset-1">
+          <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
+            <div class="title">{{ alert?.title}}</div>
+            {{ alert?.msg }}
+          </alert>
+        </div>
+      </div>
+
       <div class="row">
         <div class="col-md-3" style="margin-bottom: 50px;">
 

src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Project } from '../models/project'
 import { ApiService } from '../services/api.service';
+import {Alert} from '../models/alert'
 
 @Component({
   selector: 'app-dashboard',
@@ -15,7 +16,7 @@ export class DashboardComponent implements OnInit {
   projects: Project[] = [];
   selectedProject: Project = new Project();
   projectPullRequests = []
-
+  alerts: Alert[] = [];
 
   constructor(private apiService: ApiService) { }
 
@@ -27,7 +28,7 @@ export class DashboardComponent implements OnInit {
           this.selectedProject = this.projects[0]
           this.getProjectPullRequests()
         },
-        error => console.log(error),
+        error => this.alerts.push(new Alert('Error retrieving projects', error.message)),
         () => this.loading.projects = false
     )
   }
@@ -39,10 +40,13 @@ export class DashboardComponent implements OnInit {
             console.log(data);
             this.projectPullRequests = data;
         },
-        error => console.log(error),
+        error => this.alerts.push(new Alert('Error retrieving pull requests', error.message)),
         () => this.loading.pullrequests[this.selectedProject.RepoId] = false
     )
   }
+  closeAlert(i:number):void {
+    this.alerts.splice(i, 1);
+  }
 
   showProject(project:Project){
       this.selectedProject = project;

src/app/models/alert.ts

@@ -0,0 +1,16 @@
+const enum AlertType {
+    failure,
+    success
+}
+export class Alert {
+    type: AlertType =  AlertType.failure
+    title: string = ''
+    msg: string = ''
+    closable: boolean = true
+
+    constructor(title: string, msg: string, type?:AlertType) {
+        this.title = title;
+        this.msg = msg;
+        if(type){this.type = type}
+    }
+}

src/app/project-create/project-create.component.html

@@ -8,6 +8,16 @@ <h2 class="title">Create Project</h2>
           <div class="description">Praesent at vestibulum tortor. Praesent condimentum efficitur massa, nec congue sem dapibus sed. Sed eget justo at erat suscipit tristique sit.</div>
         </div>
       </div>
+
+      <div class="row">
+        <div class="col-lg-10 col-lg-offset-1">
+          <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
+            <div class="title">{{ alert?.title}}</div>
+            {{ alert?.msg }}
+          </alert>
+        </div>
+      </div>
+
       <div class="row">
         <div class="col-lg-offset-2 col-lg-8">
           <div class="blog-post style-3">

src/app/project-create/project-create.component.ts

@@ -5,6 +5,7 @@ import { AppSettings } from '../app-settings'
 import {Organization} from "../models/organization";
 import {Repository} from "../models/repository";
 import {Router} from '@angular/router'
+import {Alert} from '../models/alert'
 
 @Component({
   selector: 'app-project-create',
@@ -22,8 +23,10 @@ export class ProjectCreateComponent implements OnInit {
     fetchOrgRepos: false,
     createProject: false
   }
+  alerts: Alert[] = [];
 
-  constructor(private apiService: ApiService, private router: Router) { }
+
+    constructor(private apiService: ApiService, private router: Router) { }
 
   ngOnInit() {
     this.apiService.fetchOrgs()
@@ -34,11 +37,14 @@ export class ProjectCreateComponent implements OnInit {
               this.selectedOrgIndex = 0
               this.fetchSelectedOrgRepos()
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error retrieving organizations', error.message)),
             () => this.loading.fetchOrgs = false
         );
 
   }
+  closeAlert(i:number):void {
+    this.alerts.splice(i, 1);
+  }
 
   resetPagination(){
     this.orgReposPage = 1; //this is the starting page when retriving repos from the api
@@ -56,7 +62,7 @@ export class ProjectCreateComponent implements OnInit {
               console.log(data)
               this.orgRepos = data;
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error retrieving organization repositories', error.message)),
             () => this.loading.fetchOrgRepos = false
         );
   }
@@ -78,7 +84,7 @@ export class ProjectCreateComponent implements OnInit {
                 this.orgRepos = this.orgRepos.concat(data);
               }
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error retrieving organization repositories', error.message)),
             () => this.loading.fetchOrgRepos = false
         );
 
@@ -109,7 +115,7 @@ export class ProjectCreateComponent implements OnInit {
                     this.router.navigate([`/project/${this.apiService.serviceType()}/${orgId}/${repoId}/edit`])
 
                 },
-                error => console.log(error),
+                error => this.alerts.push(new Alert('Error creating new project', error.message)),
                 () => this.loading.createProject = false
             );
     }

src/app/project-deploy/project-deploy.component.html

@@ -8,6 +8,16 @@ <h2 class="title">Create Release</h2>
           <div class="description">Praesent at vestibulum tortor. Praesent condimentum efficitur massa, nec congue sem dapibus sed. Sed eget justo at erat suscipit tristique sit.</div>
         </div>
       </div>
+
+      <div class="row">
+        <div class="col-lg-10 col-lg-offset-1">
+          <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
+            <div class="title">{{ alert?.title}}</div>
+            {{ alert?.msg }}
+          </alert>
+        </div>
+      </div>
+
       <div class="row">
 
         <div class="col-md-8 col-md-offset-2 wow fadeInRight" data-wow-delay="0.3s">

src/app/project-deploy/project-deploy.component.ts

@@ -1,6 +1,7 @@
 import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { ApiService } from '../services/api.service';
+import {Alert} from '../models/alert'
 
 
 @Component({
@@ -15,6 +16,7 @@ export class ProjectDeployComponent implements OnInit {
   projectData: any = {};
   projectSecrets: any = {};
   pullRequest: any = {};
+  alerts: Alert[] = [];
 
   loading = {
     project: true,
@@ -39,7 +41,7 @@ export class ProjectDeployComponent implements OnInit {
               this.versionIncr = this.projectData.versionIncr || this.versionIncr
 
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error retrieving project', error.message)),
             () => this.loading.project = false
         );
 
@@ -49,11 +51,13 @@ export class ProjectDeployComponent implements OnInit {
               console.log(data)
               this.pullRequest = data
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error retrieving pull request', error.message)),
             () => this.loading.pullRequest = false
         );
   }
-
+  closeAlert(i:number):void {
+    this.alerts.splice(i, 1);
+  }
   createRelease(){
     //TODO: this function should also send version increment & custom changelog.
     this.loading.createRelease = true;
@@ -63,7 +67,7 @@ export class ProjectDeployComponent implements OnInit {
               console.log(data)
               //todo change path.
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error creating new release', error.message)),
             () => this.loading.createRelease = false
         );
   }

src/app/project-edit/project-edit.component.html

@@ -8,11 +8,19 @@ <h2 class="title">Edit {{orgId + '/' + repoId}}</h2>
           <div class="description">Praesent at vestibulum tortor. Praesent condimentum efficitur massa, nec congue sem dapibus sed. Sed eget justo at erat suscipit tristique sit.</div>
         </div>
       </div>
-      <div class="row">
 
-        <div class="col-md-8 col-md-offset-2 wow fadeInRight" data-wow-delay="0.3s">
+      <div class="row">
+        <div class="col-lg-10 col-lg-offset-1">
+          <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
+            <div class="title">{{ alert?.title}}</div>
+            {{ alert?.msg }}
+          </alert>
+        </div>
+      </div>
 
 
+      <div class="row">
+        <div class="col-md-8 col-md-offset-2 wow fadeInRight" data-wow-delay="0.3s">
           <div class="typography-article">
             <h4>Project Settings
               <span *ngIf="loading.project" class="glyphicon glyphicon-repeat ml-10 fast-right-spinner"></span>

src/app/project-edit/project-edit.component.ts

@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { ApiService } from '../services/api.service';
 import { AppSettings } from '../app-settings'
 import { Observable }     from 'rxjs/Observable';
+import {Alert} from '../models/alert'
 
 @Component({
   selector: 'app-project-edit',
@@ -22,6 +23,7 @@ export class ProjectEditComponent implements OnInit {
   secretName: string = '';
   secretValue: string = '';
 
+  alerts: Alert[] = [];
   loading = {
     project: true,
     saveSettings: false,
@@ -44,7 +46,7 @@ export class ProjectEditComponent implements OnInit {
               this.projectSecrets = data.Secrets || this.projectSecrets;
               this.projectSecretsKeys = Object.keys(this.projectSecrets)
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error retrieving project', error.message)),
             () => this.loading.project = false
         );
 
@@ -57,6 +59,9 @@ export class ProjectEditComponent implements OnInit {
   //TODO: add method to autocomplete docker image lookup
   //TODO: add help text with common secrets for each image/package type
   //TODO: add delete method for secrets.
+  closeAlert(i:number):void {
+    this.alerts.splice(i, 1);
+  }
 
   packageTypeChanged = function(){
     this.projectData.dockerImage = this.defaultSettings[this.projectData.packageType].image
@@ -79,7 +84,7 @@ export class ProjectEditComponent implements OnInit {
             data => {
               console.log(data)
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error updating project', error.message)),
             () =>  this.loading.saveSettings = false
         );
   }
@@ -98,7 +103,7 @@ export class ProjectEditComponent implements OnInit {
               this.secretName = '';
               this.secretValue = '';
             },
-            error => console.log(error),
+            error => this.alerts.push(new Alert('Error updating project secrets', error.message)),
             () =>  this.loading.addSecret = false
         );
   }