Build tool detector (#561)

* fix(gitprovider): add build tool detector * fix(gitprovider): fix and add test * fix(gitprovider): make getDetectedBuildRuntime function optional
fabric8-launcher · Jan 11, 2019 · 3266607 · 3266607
1 parent 36c134f
commit 3266607
Show file tree

Hide file tree

Showing 12 changed files with 155 additions and 51 deletions.
diff --git a/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.html b/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.html
@@ -7,45 +7,45 @@ <h1>{{title}}</h1>
   </div>
   <div>
     <div class="container-fluid">
-      <div class="col-xs-12 f8launcher-provider-card">
-        <div class="col-xs-4 f8launcher-provider-card-icon">
-          <h3>GitHub</h3>
-          <div class="f8launcher-provider-card-info">
-            <p>
-              OpenShift uses GitHub access to perform the following actions on your behalf:
-            </p>
-            <ul>
-              <li>
-                Create new repositories in your GitHub namespace
-              </li>
-              <li>
-                Build and deploy your code on each push to a repository’s master branch
-              </li>
-            </ul>
+      <div class="f8launcher-provider-card row">
+        <form #form="ngForm">
+          <div class="col-xs-4 f8launcher-provider-card-icon">
+            <h3>GitHub</h3>
+            <div class="f8launcher-provider-card-info">
+              <p>
+                OpenShift uses GitHub access to perform the following actions on your behalf:
+              </p>
+              <ul>
+                <li>
+                  Create new repositories in your GitHub namespace
+                </li>
+                <li>
+                  Build and deploy your code on each push to a repository’s master branch
+                </li>
+              </ul>
+            </div>
           </div>
-        </div>
-        <div class="col-xs-8 f8launcher-provider-card-information">
-          <!-- Enable Access-Conrtol-Expose-Headers for CORS to test -->
-          <h3>Authorized Account Information</h3>
-          <div class="form-horizontal">
-            <div class="form-group">
-              <label for="ghAccount" class="col-sm-2 control-label">Username</label>
-              <div class="col-sm-10 f8launcher-provider-card-information-authorize">
-                  <img height="30px" width="30px" [src]="gitHubDetails?.avatar"
-                       *ngIf="gitHubDetails?.avatar !== undefined">
-                  <span class="f8launcher-username-login" *ngIf="gitHubDetails?.login !== undefined">
-                    {{gitHubDetails?.login}}
-                  </span>
-                  <i class="fa fa-ban fa-2x" *ngIf="gitHubDetails?.avatar === undefined"></i>
-                  <span class="f8launcher-username"
-                        *ngIf="gitHubDetails?.login === undefined"> None
-                  </span>
-                  <button class="btn btn-primary btn-lg f8launcher-authorize-account"
-                          [disabled]="gitHubDetails.login"
-                          (click)="connectAccount()">Log In &amp; Authorize Account</button>
+          <div class="col-xs-8 f8launcher-provider-card-information">
+            <!-- Enable Access-Conrtol-Expose-Headers for CORS to test -->
+            <h3>Authorized Account Information</h3>
+            <div class="form-horizontal">
+              <div class="form-group">
+                <label for="ghAccount" class="col-sm-2 control-label">Username</label>
+                <div class="col-sm-10 f8launcher-provider-card-information-authorize">
+                    <img height="30px" width="30px" [src]="gitHubDetails?.avatar"
+                          *ngIf="gitHubDetails?.avatar !== undefined">
+                    <span class="f8launcher-username-login" *ngIf="gitHubDetails?.login !== undefined">
+                      {{gitHubDetails?.login}}
+                    </span>
+                    <i class="fa fa-ban fa-2x" *ngIf="gitHubDetails?.avatar === undefined"></i>
+                    <span class="f8launcher-username"
+                          *ngIf="gitHubDetails?.login === undefined"> None
+                    </span>
+                    <button class="btn btn-primary btn-lg f8launcher-authorize-account"
+                            [disabled]="gitHubDetails.login"
+                            (click)="connectAccount()">Log In &amp; Authorize Account</button>
+                </div>
               </div>
-            </div>
-            <form #form="ngForm">
               <div class="form-group">
                 <label for="ghOrg" class="col-sm-2 control-label">Location</label>
                 <div class="col-sm-10">
@@ -72,7 +72,8 @@ <h3>Authorized Account Information</h3>
                         [typeahead]="import ? gitHubDetails.repositoryList : []"
                         [typeaheadMinLength]="0"
                         [typeaheadOptionsLimit]="gitHubDetails.repositoryList.length"
-                        [validateRepository]="import">
+                        [validateRepository]="import"
+                        (typeaheadOnSelect)="onRepositorySelect($event)">
                   <span class="help-block"
                     *ngIf="ghRepo.invalid">
                     <span *ngIf="ghRepo.errors.notExist">
@@ -88,9 +89,32 @@ <h3>Authorized Account Information</h3>
                   </span>
                 </div>
               </div>
-            </form>
+            </div>
+          </div>
+          <div class="col-xs-12" *ngIf="import">
+            <div class="f8launcher-provider-card-detected-runtime" *ngIf="runtimeDetectionSecVisible">
+              <h3>
+                Detected Runtime
+              </h3>
+              <div *ngIf="!isRuntimeDetected">
+                <i class="pficon pficon-in-progress fa-spin"></i>
+              </div>
+              <div *ngIf="detectedTool && isRuntimeDetected">
+                <div class="alert alert-warning" *ngIf="detectedTool['build-tool-type'] === 'unknown'">
+                  <span class="pficon pficon-warning-triangle-o"></span>
+                  <strong>Sorry, we could not detect what runtime you have. Please select from below options.</strong>
+                </div>
+                <select name="buildTool" (ngModelChange)="onChangeBuildTool($event)"
+                  [(ngModel)]="detectedTool['build-tool-type'] === 'unknown' ? '' : detectedTool['build-tool-type']" required>
+                  <option [ngValue]="''" [selected]="detectedTool['build-tool-type'] === 'unknown'">None</option>
+                  <option [ngValue]="'golang'" [selected]="detectedTool['build-tool-type'] === 'golang'">GoLang</option>
+                  <option [ngValue]="'maven'" [selected]="detectedTool['build-tool-type'] === 'maven'">Maven</option>
+                  <option [ngValue]="'nodejs'" [selected]="detectedTool['build-tool-type'] === 'nodejs'">NodeJs</option>
+                </select>
+              </div>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
     </div>
   </div>

diff --git a/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.less b/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.less
@@ -4,14 +4,15 @@
   &-provider-card {
     background-color: @color-pf-white;
     min-height: 300px;
-    padding-left: 0;
-    padding-right: 0;
+    padding: 20px;
     box-shadow: .5px 1px 0 rgba(0, 0, 0, .3), 0 -.5px 1px 0 rgba(0, 0, 0, .3);
     &-icon {
-      min-height: 300px;
+      min-height: 220px;
       border-right: 1px solid;
       margin: 10px 0;
       border-right-color: @color-pf-black-400;
+      padding-right: 15px;
+      padding-left: 0;
       h2 {
         font-weight: 300;
         text-align: left;
@@ -26,10 +27,17 @@
     &-info {
       text-align: left;
     }
+    &-detected-runtime {
+      border-top: 1px solid @color-pf-black-400;
+      padding: 0;
+      h3 {
+        font-weight: 600;
+      }
+    }
     &-information {
       padding-left: 15px;
-      padding-right: 15px;
-      min-height: 300px;
+      padding-right: 0;
+      min-height: 220px;
       margin: 10px 0;
       h3 {
         font-weight: 600;

diff --git a/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.spec.ts b/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.spec.ts
@@ -5,14 +5,15 @@ import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Observable, of } from 'rxjs';
 
+import { Broadcaster } from 'ngx-base';
 import { PopoverModule, TypeaheadModule } from 'ngx-bootstrap';
-
 import { GitProviderService } from '../../service/git-provider.service';
 import { GitproviderStepComponent } from './gitprovider-step.component';
 
 import { GitHubDetails } from '../../model/github-details.model';
 import { Projectile } from '../../model/projectile.model';
 import { ButtonNextStepComponent } from '../../shared/button-next-step.component';
+import { BroadcasterTestProvider } from '../targetenvironment-step/target-environment-step.component.spec';
 import { GitProviderRepositoryValidatorDirective } from './gitprovider-repository.validator';
 
 const mockGitProviderService = {
@@ -62,7 +63,8 @@ describe('GitProviderStepComponent', () => {
         Projectile,
         {
           provide: GitProviderService, useValue: mockGitProviderService
-        }
+        },
+        { provide: Broadcaster, useValue: BroadcasterTestProvider.broadcaster }
       ]
     }).compileComponents();
   }));

diff --git a/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.ts b/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.ts
@@ -14,7 +14,9 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { NgForm } from '@angular/forms';
+import { Broadcaster } from 'ngx-base';
 import { Subscription } from 'rxjs';
+import { BuildTool } from './../../model/build-tool.model';
 
 import { LauncherStep } from '../../launcher-step';
 import { LauncherComponent } from '../../launcher.component';
@@ -38,11 +40,15 @@ export class GitproviderStepComponent extends LauncherStep implements AfterViewI
   private _organizationsKeys;
   gitHubDetails: GitHubDetails = {};
   gitHubReposSubscription: Subscription;
+  detectedTool: BuildTool;
+  runtimeDetectionSecVisible: boolean = false;
+  isRuntimeDetected: boolean = false;
 
   constructor(@Host() @Optional() public launcherComponent: LauncherComponent,
               private projectile: Projectile<GitHubDetails>,
               differs: KeyValueDiffers,
-              private gitProviderService: GitProviderService) {
+              private gitProviderService: GitProviderService,
+              private broadcaster: Broadcaster) {
     super(projectile);
     this.projectNameDiff = differs.find(this.projectile.sharedState.state).create();
   }
@@ -136,4 +142,30 @@ export class GitproviderStepComponent extends LauncherStep implements AfterViewI
         .subscribe(list => this.gitHubDetails.repositoryList = list);
     }
   }
+
+  onRepositorySelect(repo) {
+    let repoUrl = 'https://github.com/' + this.gitHubDetails.organization + '/' + repo.value;
+    if (this.gitHubDetails.organization === undefined) {
+      repoUrl = 'https://github.com/' + this.gitHubDetails.login + '/' + repo.value;
+    }
+    this.runtimeDetectionSecVisible = true;
+    this.isRuntimeDetected = false;
+    this.gitProviderService.getDetectedBuildRuntime(encodeURIComponent(repoUrl))
+      .subscribe((detectedTool: BuildTool) => {
+        this.detectedTool = detectedTool;
+        let dTool = detectedTool['build-tool-type'];
+        if (detectedTool['build-tool-type'] === 'nodejs') {
+          dTool = 'node';
+        }
+        this.broadcaster.broadcast('buildTool-detected', dTool);
+        this.isRuntimeDetected = true;
+    });
+  }
+
+  onChangeBuildTool(buildTool: string) {
+    if (buildTool === 'nodejs') {
+      buildTool = 'node';
+    }
+    this.broadcaster.broadcast('buildTool-detected', buildTool);
+  }
 }
diff --git a/...launcher/src/lib/components/release-strategy-step/release-strategy-step.component.spec.ts b/...launcher/src/lib/components/release-strategy-step/release-strategy-step.component.spec.ts
@@ -53,7 +53,7 @@ describe('ReleaseStrategyStepComponent', () => {
     it('should change pipeline selection to node when runtime event change', () => {
       // given
       let pipelines = releaseStrategyComponent.pipelines;
-      expect(pipelines.length).toBe(3);
+      expect(pipelines.length).toBe(0);
       BroadcasterTestProvider.broadcaster.broadcast('runtime-changed', {pipelinePlatform: 'node'} as ViewRuntime);
 
       // when
@@ -85,7 +85,15 @@ describe('ReleaseStrategyStepComponent', () => {
     });
 
     it('should not show pipelines when runtime not selected', () => {
-      expect(releaseStrategyComponent.pipelines.length).toBe(3);
+      expect(releaseStrategyComponent.pipelines.length).toBe(0);
+    });
+
+    it('should show pipeline after buildTool detection', () => {
+      expect(releaseStrategyComponent.pipelines.length).toBe(0);
+
+      BroadcasterTestProvider.broadcaster.broadcast('buildTool-detected', 'maven');
+      let pipelines = releaseStrategyComponent.pipelines;
+      expect(pipelines.length).toBe(3);
     });
 
   });

diff --git a/.../ngx-launcher/src/lib/components/release-strategy-step/release-strategy-step.component.ts b/.../ngx-launcher/src/lib/components/release-strategy-step/release-strategy-step.component.ts
@@ -55,6 +55,12 @@ export class ReleaseStrategyStepComponent extends LauncherStep implements OnInit
         this.updatePipelineSelection(new Pipeline());
       }
     }));
+    this.subscriptions.push(this.broadcaster.on<string>('buildTool-detected').subscribe(buildTool => {
+      this.filterPipelines(buildTool);
+      if (this.pipeline.platform !== buildTool) {
+        this.updatePipelineSelection(new Pipeline());
+      }
+    }));
   }
 
   ngOnDestroy() {
@@ -93,6 +99,6 @@ export class ReleaseStrategyStepComponent extends LauncherStep implements OnInit
 
   private filterPipelines(selectedPlatform: string) {
     this._pipelines = this._allPipelines
-      .filter(({ platform }) => selectedPlatform ? platform === selectedPlatform : platform === 'maven');
+      .filter(({ platform }) => platform === selectedPlatform);
   }
 }
diff --git a/projects/ngx-launcher/src/lib/model/build-tool.model.ts b/projects/ngx-launcher/src/lib/model/build-tool.model.ts
@@ -0,0 +1,3 @@
+export class BuildTool {
+  'build-tool-type': string;
+}
diff --git a/projects/ngx-launcher/src/lib/service/git-provider.service.ts b/projects/ngx-launcher/src/lib/service/git-provider.service.ts
@@ -1,5 +1,6 @@
 import { Observable } from 'rxjs';
 
+import { BuildTool } from '../model/build-tool.model';
 import { GitHubDetails } from '../model/github-details.model';
 
 /**
@@ -36,4 +37,11 @@ export abstract class GitProviderService {
    * @returns {Observable<any>} List of GitHub repos
    */
   abstract getGitHubRepoList(org: string): Observable<any>;
+
+  /**
+   * Returns detected build tools
+   * @param {string} repoUrl url of github repository
+   * @return {Observable<BuildTool>}
+  */
+ getDetectedBuildRuntime?(repoUrl: string): Observable<BuildTool>;
 }
diff --git a/projects/ngx-launcher/src/public_api.ts b/projects/ngx-launcher/src/public_api.ts
@@ -15,6 +15,7 @@ export { Booster, BoosterVersion, BoosterMission, BoosterRuntime } from './lib/m
 export { TargetEnvironment } from './lib/model/target-environment.model';
 export { Enums, Enum, Runtime } from './lib/model/runtime.model';
 export { Capability, Property } from './lib/model/capabilities.model';
+export { BuildTool } from './lib/model/build-tool.model';
 export { LauncherComponent } from './lib/launcher.component';
 
 // Launcher services

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -24,6 +24,7 @@ import { DemoTargetEnvironmentService } from './service/demo-target-environment.
 import { DemoTokenService } from './service/demo-token.service';
 
 import { Config } from '../../projects/ngx-launcher/src/lib/service/config.component';
+import { FABRIC8_BUILD_TOOL_DETECTOR_API_URL } from './shared/build-tool-detector-api-url';
 import { FABRIC8_FORGE_API_URL } from './shared/forge-api-url';
 import { ForgeConfig } from './shared/forge-config';
 import { FABRIC8_ORIGIN } from './shared/forge-origin';
@@ -81,6 +82,8 @@ import { DemoAppCreatorService } from './service/demo-app-creator.service';
     { provide: TargetEnvironmentService, useClass: DemoTargetEnvironmentService},
     { provide: Config, useClass: ForgeConfig },
     { provide: FABRIC8_FORGE_API_URL, useValue: 'https://forge.api.prod-preview.openshift.io' },
+    {provide: FABRIC8_BUILD_TOOL_DETECTOR_API_URL,
+      useValue: 'https://detector.api.prod-preview.openshift.io/api/detect/build/'},
     { provide: FABRIC8_ORIGIN, useValue: 'osio' },
     { provide: TokenProvider, useClass: MockAuthenticationService },
     { provide: TokenService, useClass: DemoTokenService}

diff --git a/src/app/service/demo-git-provider.service.ts b/src/app/service/demo-git-provider.service.ts
@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { EMPTY, Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
 import { GitHubDetails } from '../../../projects/ngx-launcher/src/lib/model/github-details.model';
 import { GitProviderService } from '../../../projects/ngx-launcher/src/lib/service/git-provider.service';
+import { BuildTool } from './../../../projects/ngx-launcher/src/lib/model/build-tool.model';
 
 const GitHubMock = require('../mock/demo-git-provider.json');
 
@@ -62,6 +64,10 @@ export class DemoGitProviderService implements GitProviderService {
     return of(Object.keys(this.existingRepo));
   }
 
+  getDetectedBuildRuntime(): Observable<BuildTool> {
+    return of({'build-tool-type': 'maven'}).pipe(delay(1000));
+  }
+
   // Private
 
   private isPageRedirect(): boolean {

diff --git a/src/app/shared/build-tool-detector-api-url.ts b/src/app/shared/build-tool-detector-api-url.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export let FABRIC8_BUILD_TOOL_DETECTOR_API_URL = new InjectionToken('fabric8.build.tool.detector.api.url');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { InjectionToken } from '@angular/core';

		export let FABRIC8_BUILD_TOOL_DETECTOR_API_URL = new InjectionToken('fabric8.build.tool.detector.api.url');