Fix the way to download xds-agent packages

Signed-off-by: Sebastien Douheret <sebastien.douheret@iot.bzh>

7 files changed, 97 insertions, 31 deletions

diff --git a/webapp/src/app/app.module.ts b/webapp/src/app/app.module.ts
index d02cdf2..4877f6e 100644
--- a/webapp/src/app/app.module.ts
+++ b/webapp/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { AlertModule } from 'ngx-bootstrap/alert';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
+import { PopoverModule } from 'ngx-bootstrap/popover';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 // Import the application components and services.
@@ -16,6 +17,7 @@ import { Routing, AppRoutingProviders } from './app.routing';
 import { AppComponent } from "./app.component";
 import { AlertComponent } from './alert/alert.component';
 import { ConfigComponent } from "./config/config.component";
+import { DlXdsAgentComponent, CapitalizePipe } from "./config/downloadXdsAgent.component";
 import { ProjectCardComponent } from "./projects/projectCard.component";
 import { ProjectReadableTypePipe } from "./projects/projectCard.component";
 import { ProjectsListAccordionComponent } from "./projects/projectsListAccordion.component";
@@ -49,6 +51,7 @@ import { SdkService } from "./services/sdk.service";
         ModalModule.forRoot(),
         AccordionModule.forRoot(),
         CarouselModule.forRoot(),
+        PopoverModule.forRoot(),
         BsDropdownModule.forRoot(),
     ],
     declarations: [
@@ -59,6 +62,8 @@ import { SdkService } from "./services/sdk.service";
         DevelComponent,
         DeployComponent,
         ConfigComponent,
+        DlXdsAgentComponent,
+        CapitalizePipe,
         ProjectCardComponent,
         ProjectReadableTypePipe,
         ProjectsListAccordionComponent,
diff --git a/webapp/src/app/config/config.component.html b/webapp/src/app/config/config.component.html
index a78b1e6..d9229d5 100644
--- a/webapp/src/app/config/config.component.html
+++ b/webapp/src/app/config/config.component.html
@@ -13,12 +13,11 @@
                         <tr [ngClass]="{'info': (agentStatus$ | async)?.connected, 'danger': !(agentStatus$ | async)?.connected}">
                             <th><label>XDS local Agent URL</label></th>
                             <td> <input type="text" [(ngModel)]="xdsAgentUrl"></td>
-                            <td>
-                                <button class="btn btn-link" (click)="xdsAgentRestartConn()"><span class="fa fa-refresh fa-size-x2"></span></button>
-                                <button [disabled]="xdsAgentZipUrl==''" class="btn btn-link">
-                                    <a *ngIf="xdsAgentZipUrl!=''" class="fa fa-download fa-size-x2" [href]="xdsAgentZipUrl" target="_blank"></a>
-                                    <a *ngIf="xdsAgentZipUrl==''" class="fa fa-download fa-size-x2" href="javascript:void(0);" target="_blank"></a>
-                                </button>
+                            <td style="white-space: nowrap">
+                                <div class="btn-group">
+                                    <button class="btn btn-link" (click)="xdsAgentRestartConn()"><span class="fa fa-refresh fa-size-x2"></span></button>
+                                    <dl-xds-agent class="button" [packageUrls]="(config$ | async).xdsAgentPackages"></dl-xds-agent>
+                                </div>
                             </td>
                         </tr>
                         <tr class="info">
diff --git a/webapp/src/app/config/config.component.ts b/webapp/src/app/config/config.component.ts
index c6b2573..7d9931e 100644
--- a/webapp/src/app/config/config.component.ts
+++ b/webapp/src/app/config/config.component.ts
@@ -7,7 +7,7 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/debounceTime';
 
-import { ConfigService, IConfig, IProject, ProjectType } from "../services/config.service";
+import { ConfigService, IConfig, IProject, ProjectType, IxdsAgentPackage } from "../services/config.service";
 import { XDSServerService, IServerStatus, IXDSAgentInfo } from "../services/xdsserver.service";
 import { XDSAgentService, IAgentStatus } from "../services/xdsagent.service";
 import { SyncthingService, ISyncThingStatus } from "../services/syncthing.service";
@@ -32,7 +32,7 @@ export class ConfigComponent implements OnInit {
 
     curProj: number;
     userEditedLabel: boolean = false;
-    xdsAgentZipUrl: string = "";
+    xdsAgentPackages: IxdsAgentPackage[] = [];
 
     // TODO replace by reactive FormControl + add validation
     syncToolUrl: string;
@@ -78,7 +78,7 @@ export class ConfigComponent implements OnInit {
             this.xdsAgentUrl = cfg.xdsAgent.URL;
             this.xdsAgentRetry = String(cfg.xdsAgent.retry);
             this.projectsRootDir = cfg.projectsRootDir;
-            this.xdsAgentZipUrl = cfg.xdsAgentZipUrl;
+            this.xdsAgentPackages = cfg.xdsAgentPackages;
         });
 
         // Auto create label name
diff --git a/webapp/src/app/config/downloadXdsAgent.component.ts b/webapp/src/app/config/downloadXdsAgent.component.ts
new file mode 100644
index 0000000..55aa203
--- /dev/null
+++ b/webapp/src/app/config/downloadXdsAgent.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, Pipe, PipeTransform } from '@angular/core';
+
+import { IxdsAgentPackage } from "../services/config.service";
+
+@Component({
+    selector: 'dl-xds-agent',
+    template: `
+        <template #popTemplate>
+            <h3>Download xds-agent packages:</h3>
+            <ul>
+                <li *ngFor="let p of packageUrls">
+                    for <a href="{{p.url}}">{{p.os | capitalize}}</a>
+                </li>
+            </ul>
+            <button type="button" class="btn btn-sm" (click)="pop.hide()"> Cancel </button>
+        </template>
+        <button type="button" class="btn btn-link fa fa-download fa-size-x2"
+            [popover]="popTemplate"
+            #pop="bs-popover"
+            placement="left">
+        </button>
+    `,
+    styles: [`
+        .fa-size-x2 {
+            font-size: 20px;
+        }
+    `]
+})
+
+export class DlXdsAgentComponent {
+
+    @Input() packageUrls: IxdsAgentPackage[];
+
+}
+
+@Pipe({
+    name: 'capitalize'
+})
+export class CapitalizePipe implements PipeTransform {
+    transform(value: string): string {
+        if (value) {
+            return value.charAt(0).toUpperCase() + value.slice(1);
+        }
+        return value;
+    }
+}
diff --git a/webapp/src/app/services/config.service.ts b/webapp/src/app/services/config.service.ts
index 9b9f5db..6b344e1 100644
--- a/webapp/src/app/services/config.service.ts
+++ b/webapp/src/app/services/config.service.ts
@@ -52,10 +52,15 @@ export interface ILocalSTConfig {
     tilde: string;
 }
 
+export interface IxdsAgentPackage {
+    os: string;
+    url: string;
+}
+
 export interface IConfig {
     xdsServerURL: string;
     xdsAgent: IXDSAgentConfig;
-    xdsAgentZipUrl: string;
+    xdsAgentPackages: IxdsAgentPackage[];
     projectsRootDir: string;
     projects: IProject[];
     localSThg: ILocalSTConfig;
@@ -70,7 +75,6 @@ export class ConfigService {
     private confStore: IConfig;
     private AgentConnectObs = null;
     private stConnectObs = null;
-    private xdsAgentZipUrl = "";
 
     constructor(private _window: Window,
         private cookie: CookieService,
@@ -102,7 +106,7 @@ export class ConfigService {
                     URL: 'http://localhost:8000',
                     retry: 10,
                 },
-                xdsAgentZipUrl: "",
+                xdsAgentPackages: [],
                 projectsRootDir: "",
                 projects: [],
                 localSThg: {
@@ -115,14 +119,12 @@ export class ConfigService {
         }
 
         // Update XDS Agent tarball url
-        this.confStore.xdsAgentZipUrl = "";
         this.xdsServerSvr.getXdsAgentInfo().subscribe(nfo => {
-            let os = this.utils.getOSName(true);
-            let zurl = nfo.tarballs && nfo.tarballs.filter(elem => elem.os === os);
-            if (zurl && zurl.length) {
-                this.confStore.xdsAgentZipUrl = zurl[0].fileUrl;
-                this.confSubject.next(Object.assign({}, this.confStore));
-            }
+            this.confStore.xdsAgentPackages = [];
+            nfo.tarballs && nfo.tarballs.forEach(el =>
+                this.confStore.xdsAgentPackages.push({os: el.os, url: el.fileUrl})
+            );
+            this.confSubject.next(Object.assign({}, this.confStore));
         });
     }
 
@@ -158,9 +160,12 @@ export class ConfigService {
                 if (error.indexOf("XDS local Agent not responding") !== -1) {
                     let msg = "<span><strong>" + error + "<br></strong>";
                     msg += "You may need to download and execute XDS-Agent.<br>";
-                    if (this.confStore.xdsAgentZipUrl !== "") {
-                        msg += "<a class=\"fa fa-download\" href=\"" + this.confStore.xdsAgentZipUrl + "\" target=\"_blank\"></a>";
-                        msg += " Download XDS-Agent tarball.";
+
+                    let os = this.utils.getOSName(true);
+                    let zurl = this.confStore.xdsAgentPackages && this.confStore.xdsAgentPackages.filter(elem => elem.os === os);
+                    if (zurl && zurl.length) {
+                        msg += " Download XDS-Agent tarball for " + zurl[0].os + " host OS ";
+                        msg += "<a class=\"fa fa-download\" href=\"" +  zurl[0].url + "\" target=\"_blank\"></a>";
                     }
                     msg += "</span>";
                     this.alert.error(msg);
diff --git a/webapp/src/app/services/utils.service.ts b/webapp/src/app/services/utils.service.ts
index 291ffd3..84b9ab6 100644
--- a/webapp/src/app/services/utils.service.ts
+++ b/webapp/src/app/services/utils.service.ts
@@ -5,15 +5,25 @@ export class UtilsService {
     constructor() { }
 
     getOSName(lowerCase?: boolean): string {
-        let OSName = "Unknown OS";
-        if (navigator.appVersion.indexOf("Linux") !== -1) {
-            OSName = "Linux";
-        } else if (navigator.appVersion.indexOf("Win") !== -1) {
-            OSName = "Windows";
-        } else if (navigator.appVersion.indexOf("Mac") !== -1) {
-            OSName = "MacOS";
-        } else if (navigator.appVersion.indexOf("X11") !== -1) {
-            OSName = "UNIX";
+        var checkField = function (ff) {
+            if (ff.indexOf("Linux") !== -1) {
+                return "Linux";
+            } else if (ff.indexOf("Win") !== -1) {
+                return "Windows";
+            } else if (ff.indexOf("Mac") !== -1) {
+                return "MacOS";
+            } else if (ff.indexOf("X11") !== -1) {
+                return "UNIX";
+            }
+            return "";
+        };
+
+        let OSName = checkField(navigator.platform);
+        if (OSName === "") {
+            OSName = checkField(navigator.appVersion);
+        }
+        if (OSName === "") {
+            OSName = "Unknown OS";
         }
         if (lowerCase) {
             return OSName.toLowerCase();
diff --git a/webapp/src/systemjs.config.js b/webapp/src/systemjs.config.js
index 68edd18..19fe225 100644
--- a/webapp/src/systemjs.config.js
+++ b/webapp/src/systemjs.config.js
@@ -37,6 +37,7 @@
             'ngx-bootstrap/modal': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
             'ngx-bootstrap/accordion': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
             'ngx-bootstrap/carousel': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
+            'ngx-bootstrap/popover': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
             'ngx-bootstrap/dropdown': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
             // other libraries
             'socket.io-client': 'npm:socket.io-client/dist/socket.io.min.js'