From aa4bb1c07bead87b0c8ceb4145a43f119ccdc273 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Wed, 13 Dec 2017 16:37:23 -0800
Subject: [PATCH 01/10] Csharp and python samples

---
 app/components/account/account.module.ts      |  3 +-
 .../batch-account-keys-dialog.html            | 35 ++++++++---
 .../batch-account-keys-dialog.scss            |  1 +
 .../details/programing-sample/index.ts        |  1 +
 .../programing-sample.component.ts            | 58 +++++++++++++++++++
 .../programing-sample/programing-sample.html  |  2 +
 .../programing-sample/programing-sample.scss  |  3 +
 .../programing-sample/samples/csharp.cs       | 33 +++++++++++
 .../programing-sample/samples/index.ts        | 23 ++++++++
 .../programing-sample/samples/python.py       | 19 ++++++
 10 files changed, 169 insertions(+), 9 deletions(-)
 create mode 100644 app/components/account/details/programing-sample/index.ts
 create mode 100644 app/components/account/details/programing-sample/programing-sample.component.ts
 create mode 100644 app/components/account/details/programing-sample/programing-sample.html
 create mode 100644 app/components/account/details/programing-sample/programing-sample.scss
 create mode 100644 app/components/account/details/programing-sample/samples/csharp.cs
 create mode 100644 app/components/account/details/programing-sample/samples/index.ts
 create mode 100644 app/components/account/details/programing-sample/samples/python.py

diff --git a/app/components/account/account.module.ts b/app/components/account/account.module.ts
index 8f4363cdc1..b08ab331ed 100644
--- a/app/components/account/account.module.ts
+++ b/app/components/account/account.module.ts
@@ -10,6 +10,7 @@ import { AccountBrowseModule } from "./browse";
 import { AccountDefaultComponent, AccountDetailsComponent } from "./details";
 import { AccountQuotasCardComponent } from "./details/account-quotas-card";
 import { BatchAccountKeysDialogComponent } from "./details/keys-dialog";
+import { ProgramingSampleComponent } from "./details/programing-sample";
 import { StorageAccountCardComponent } from "./details/storage-account-card";
 import { AccountHomeComponent } from "./home";
 
@@ -17,7 +18,7 @@ const components = [
     AccountCreateDialogComponent, AccountDefaultComponent, AccountDetailsComponent,
     AccountHomeComponent, DeleteAccountDialogComponent, StorageAccountCardComponent,
     EditStorageAccountFormComponent, StorageAccountPickerComponent, AccountQuotasCardComponent,
-    BatchAccountKeysDialogComponent,
+    BatchAccountKeysDialogComponent, ProgramingSampleComponent,
 ];
 
 const modules = [
diff --git a/app/components/account/details/keys-dialog/batch-account-keys-dialog.html b/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
index fb3135d046..db942a73b5 100644
--- a/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
+++ b/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
@@ -1,8 +1,27 @@
-<bl-property-list>
-    <bl-property-group label="Account credentials {{loading ? '(Loading ...)' : ''}}" class="wide">
-        <bl-text-property label="Name" [value]="account?.name"></bl-text-property>
-        <bl-text-property label="Url" [value]="account?.properties.accountEndpoint"></bl-text-property>
-        <bl-text-property label="Primary key" [value]="keys?.primary"></bl-text-property>
-        <bl-text-property label="Secondary key" [value]="keys?.secondary"></bl-text-property>
-    </bl-property-group>
-</bl-property-list>
+<mat-tab-group [@.disabled]="true">
+    <mat-tab>
+        <ng-template mat-tab-label>
+            Keys
+        </ng-template>
+        <bl-property-list>
+            <bl-property-group label="Account credentials {{loading ? '(Loading ...)' : ''}}" class="wide">
+                <bl-text-property label="Name" [value]="account?.name"></bl-text-property>
+                <bl-text-property label="Url" [value]="account?.properties.accountEndpoint"></bl-text-property>
+                <bl-text-property label="Primary key" [value]="keys?.primary"></bl-text-property>
+                <bl-text-property label="Secondary key" [value]="keys?.secondary"></bl-text-property>
+            </bl-property-group>
+        </bl-property-list>
+    </mat-tab>
+    <mat-tab>
+        <ng-template mat-tab-label>
+            Python
+        </ng-template>
+        <bl-programing-sample language="python" [account]="account" [keys]="keys"></bl-programing-sample>
+    </mat-tab>
+    <mat-tab>
+        <ng-template mat-tab-label>
+            CSharp
+        </ng-template>
+        <bl-programing-sample language="csharp" [account]="account" [keys]="keys"></bl-programing-sample>
+    </mat-tab>
+</mat-tab-group>
diff --git a/app/components/account/details/keys-dialog/batch-account-keys-dialog.scss b/app/components/account/details/keys-dialog/batch-account-keys-dialog.scss
index 34eca64d9e..c67c57a57b 100644
--- a/app/components/account/details/keys-dialog/batch-account-keys-dialog.scss
+++ b/app/components/account/details/keys-dialog/batch-account-keys-dialog.scss
@@ -1,4 +1,5 @@
 bl-batch-account-keys-dialog {
     display: block;
     position: relative;
+    width: 800px;
 }
diff --git a/app/components/account/details/programing-sample/index.ts b/app/components/account/details/programing-sample/index.ts
new file mode 100644
index 0000000000..18bee58dff
--- /dev/null
+++ b/app/components/account/details/programing-sample/index.ts
@@ -0,0 +1 @@
+export * from "./programing-sample.component";
diff --git a/app/components/account/details/programing-sample/programing-sample.component.ts b/app/components/account/details/programing-sample/programing-sample.component.ts
new file mode 100644
index 0000000000..73f2f0be47
--- /dev/null
+++ b/app/components/account/details/programing-sample/programing-sample.component.ts
@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from "@angular/core";
+import { sampleTemplates } from "./samples";
+
+import { EditorConfig } from "app/components/base/editor";
+import { AccountKeys, AccountResource } from "app/models";
+import "./programing-sample.scss";
+export enum SampleLanguage {
+    python = "python",
+    csharp = "csharp",
+}
+
+@Component({
+    selector: "bl-programing-sample",
+    templateUrl: "programing-sample.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgramingSampleComponent implements OnChanges {
+    @Input() public language: SampleLanguage;
+    @Input() public account: AccountResource;
+    @Input() public keys: AccountKeys;
+
+    public content: string;
+    public editorConfig: EditorConfig;
+
+    public ngOnChanges(changes) {
+        if (changes.language || changes.account || changes.keys) {
+            this._updateContent();
+            this._updateConfig();
+        }
+    }
+
+    private get accountName() {
+        return this.account && this.account.name || "";
+    }
+
+    private get accountUrl() {
+        return this.account && this.account.properties.accountEndpoint || "";
+    }
+
+    private get key() {
+        return this.keys && this.keys.primary || "";
+    }
+
+    private _updateContent() {
+        const template: string = sampleTemplates[this.language];
+        if (template) {
+            this.content = template.format(this.accountName, this.accountUrl, this.key);
+        } else {
+            this.content = "";
+        }
+    }
+
+    private _updateConfig() {
+        this.editorConfig = {
+            language: this.language,
+        };
+    }
+}
diff --git a/app/components/account/details/programing-sample/programing-sample.html b/app/components/account/details/programing-sample/programing-sample.html
new file mode 100644
index 0000000000..9ad11a20da
--- /dev/null
+++ b/app/components/account/details/programing-sample/programing-sample.html
@@ -0,0 +1,2 @@
+
+<bl-editor [ngModel]="content" [config]="editorConfig"></bl-editor>
diff --git a/app/components/account/details/programing-sample/programing-sample.scss b/app/components/account/details/programing-sample/programing-sample.scss
new file mode 100644
index 0000000000..7d71074d4f
--- /dev/null
+++ b/app/components/account/details/programing-sample/programing-sample.scss
@@ -0,0 +1,3 @@
+bl-programing-sample {
+
+}
diff --git a/app/components/account/details/programing-sample/samples/csharp.cs b/app/components/account/details/programing-sample/samples/csharp.cs
new file mode 100644
index 0000000000..bf61ec6032
--- /dev/null
+++ b/app/components/account/details/programing-sample/samples/csharp.cs
@@ -0,0 +1,33 @@
+
+namespace Microsoft.Azure.Batch.Samples.HelloWorld
+{
+    using System.Collections.Generic;
+
+    public class AccountSettings {
+        const string accountName = "{0}";
+        const string accountUrl = "{1}";
+        const string key = "{2}";
+    }
+
+    /// <summary>
+    /// The main program of the HelloWorld sample
+    /// </summary>
+    public static class Program
+    {
+        public static void Main(string[] args)
+        {
+            // Set up the Batch Service credentials used to authenticate with the Batch Service.
+            BatchSharedKeyCredentials credentials = new BatchSharedKeyCredentials(
+                AccountSettings.url,
+                AccountSettings.name,
+                AccountSettings.key);
+
+            // Get an instance of the BatchClient for a given Azure Batch account.
+            using (BatchClient batchClient = await BatchClient.OpenAsync(credentials))
+            {
+                // Perform actions using the batchClient
+                var jobs = batchClient.JobOperations.ListJobs()
+            }
+        }
+    }
+}
diff --git a/app/components/account/details/programing-sample/samples/index.ts b/app/components/account/details/programing-sample/samples/index.ts
new file mode 100644
index 0000000000..49c7e49b61
--- /dev/null
+++ b/app/components/account/details/programing-sample/samples/index.ts
@@ -0,0 +1,23 @@
+// tslint:disable:no-var-requires
+
+const python = require("raw-loader!./python.py");
+const csharp = require("raw-loader!./csharp.cs");
+
+export const sampleTemplates = {
+    python,
+    csharp,
+};
+
+export const samplesLink = {
+    python: "https://github.com/Azure/azure-batch-samples/tree/master/Python",
+    csharp: "https://github.com/Azure/azure-batch-samples/tree/master/CSharp",
+};
+
+export const prerequisites = {
+    python: [
+        `pip install azure-batch`,
+    ],
+    csharp: [
+        `dotnet add package Azure.Batch`,
+    ],
+};
diff --git a/app/components/account/details/programing-sample/samples/python.py b/app/components/account/details/programing-sample/samples/python.py
new file mode 100644
index 0000000000..b5aa8a89ab
--- /dev/null
+++ b/app/components/account/details/programing-sample/samples/python.py
@@ -0,0 +1,19 @@
+import azure.batch.batch_service_client as batch
+import azure.batch.batch_auth as batchauth
+import azure.batch.models as batchmodels
+
+# Batch account credentials
+BATCH_ACCOUNT_NAME = "{0}"
+BATCH_ACCOUNT_KEY = "{1}"
+BATCH_ACCOUNT_URL = "{2}"
+
+# Create a Batch service client. We'll now be interacting with the Batch
+# service in addition to Storage.
+credentials = batchauth.SharedKeyCredentials(BATCH_ACCOUNT_NAME,
+                                             BATCH_ACCOUNT_KEY)
+
+batch_client = batch.BatchServiceClient(
+    credentials,
+    base_url=BATCH_ACCOUNT_URL)
+
+# Perform action with the batch_client

From 4be070fc32c58af666f0abdbbb35550a6e2f4da1 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Wed, 13 Dec 2017 16:53:12 -0800
Subject: [PATCH 02/10] Csharp and python samples

---
 .../account/details/programing-sample/samples/python.py       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/account/details/programing-sample/samples/python.py b/app/components/account/details/programing-sample/samples/python.py
index b5aa8a89ab..fc94e3e74b 100644
--- a/app/components/account/details/programing-sample/samples/python.py
+++ b/app/components/account/details/programing-sample/samples/python.py
@@ -4,8 +4,8 @@
 
 # Batch account credentials
 BATCH_ACCOUNT_NAME = "{0}"
-BATCH_ACCOUNT_KEY = "{1}"
-BATCH_ACCOUNT_URL = "{2}"
+BATCH_ACCOUNT_URL = "{1}"
+BATCH_ACCOUNT_KEY = "{2}"
 
 # Create a Batch service client. We'll now be interacting with the Batch
 # service in addition to Storage.

From d7df6b3b6f67e4f0c043d0b8d21813dbc57c7dbd Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Tue, 2 Jan 2018 10:02:23 -0800
Subject: [PATCH 03/10] update csharp sample

---
 .../programing-sample/samples/csharp.cs        | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/components/account/details/programing-sample/samples/csharp.cs b/app/components/account/details/programing-sample/samples/csharp.cs
index bf61ec6032..ed9a161e99 100644
--- a/app/components/account/details/programing-sample/samples/csharp.cs
+++ b/app/components/account/details/programing-sample/samples/csharp.cs
@@ -1,12 +1,13 @@
 
 namespace Microsoft.Azure.Batch.Samples.HelloWorld
 {
-    using System.Collections.Generic;
+    using System;
+    using Auth;
 
     public class AccountSettings {
-        const string accountName = "{0}";
-        const string accountUrl = "{1}";
-        const string key = "{2}";
+        public const string accountName = "{0}";
+        public const string accountUrl = "{1}";
+        public const string key = "{2}";
     }
 
     /// <summary>
@@ -16,6 +17,7 @@ public static class Program
     {
         public static void Main(string[] args)
         {
+
             // Set up the Batch Service credentials used to authenticate with the Batch Service.
             BatchSharedKeyCredentials credentials = new BatchSharedKeyCredentials(
                 AccountSettings.url,
@@ -23,10 +25,14 @@ public static void Main(string[] args)
                 AccountSettings.key);
 
             // Get an instance of the BatchClient for a given Azure Batch account.
-            using (BatchClient batchClient = await BatchClient.OpenAsync(credentials))
+            using (BatchClient batchClient =  BatchClient.Open(credentials))
             {
                 // Perform actions using the batchClient
-                var jobs = batchClient.JobOperations.ListJobs()
+                var jobs = batchClient.JobOperations.ListJobs();
+                foreach(var job in jobs)
+                {
+                    Console.Write(job.Id + "\n");
+                }
             }
         }
     }

From ae0076362ebf8b1dbb76c12c5b454bf66ff5b6b0 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Tue, 2 Jan 2018 10:08:47 -0800
Subject: [PATCH 04/10] Fix include protocol

---
 .../details/programing-sample/programing-sample.component.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/account/details/programing-sample/programing-sample.component.ts b/app/components/account/details/programing-sample/programing-sample.component.ts
index 73f2f0be47..ecb2457f0b 100644
--- a/app/components/account/details/programing-sample/programing-sample.component.ts
+++ b/app/components/account/details/programing-sample/programing-sample.component.ts
@@ -34,7 +34,8 @@ export class ProgramingSampleComponent implements OnChanges {
     }
 
     private get accountUrl() {
-        return this.account && this.account.properties.accountEndpoint || "";
+        const url =  this.account && this.account.properties.accountEndpoint;
+        return url ? `https://${url}` : "";
     }
 
     private get key() {

From d75c9ec31577fe1882105e9f657ec993b0dcedef Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Tue, 2 Jan 2018 11:31:59 -0800
Subject: [PATCH 05/10] Show prerequisite

---
 .../keys-dialog/batch-account-keys-dialog.html     |  2 +-
 .../keys-dialog/batch-account-keys-dialog.scss     |  5 +++++
 .../programing-sample.component.ts                 | 10 ++++++++--
 .../programing-sample/programing-sample.html       | 11 ++++++++++-
 .../programing-sample/programing-sample.scss       | 14 ++++++++++++++
 .../details/programing-sample/samples/csharp.cs    |  4 ++--
 .../base/property-list/table-property.html         |  6 +++---
 7 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/app/components/account/details/keys-dialog/batch-account-keys-dialog.html b/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
index db942a73b5..5a7e492ee9 100644
--- a/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
+++ b/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
@@ -20,7 +20,7 @@
     </mat-tab>
     <mat-tab>
         <ng-template mat-tab-label>
-            CSharp
+            C#
         </ng-template>
         <bl-programing-sample language="csharp" [account]="account" [keys]="keys"></bl-programing-sample>
     </mat-tab>
diff --git a/app/components/account/details/keys-dialog/batch-account-keys-dialog.scss b/app/components/account/details/keys-dialog/batch-account-keys-dialog.scss
index c67c57a57b..b1ef03cb91 100644
--- a/app/components/account/details/keys-dialog/batch-account-keys-dialog.scss
+++ b/app/components/account/details/keys-dialog/batch-account-keys-dialog.scss
@@ -2,4 +2,9 @@ bl-batch-account-keys-dialog {
     display: block;
     position: relative;
     width: 800px;
+    height: 80vh;
+
+    > mat-tab-group {
+        height: 100%;
+    }
 }
diff --git a/app/components/account/details/programing-sample/programing-sample.component.ts b/app/components/account/details/programing-sample/programing-sample.component.ts
index ecb2457f0b..02c254cdd7 100644
--- a/app/components/account/details/programing-sample/programing-sample.component.ts
+++ b/app/components/account/details/programing-sample/programing-sample.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from "@angular/core";
-import { sampleTemplates } from "./samples";
+import { prerequisites, sampleTemplates } from "./samples";
 
 import { EditorConfig } from "app/components/base/editor";
 import { AccountKeys, AccountResource } from "app/models";
@@ -19,12 +19,14 @@ export class ProgramingSampleComponent implements OnChanges {
     @Input() public account: AccountResource;
     @Input() public keys: AccountKeys;
 
+    public prerequisites: string[];
     public content: string;
     public editorConfig: EditorConfig;
 
     public ngOnChanges(changes) {
         if (changes.language || changes.account || changes.keys) {
             this._updateContent();
+            this._updatePrerequisites();
             this._updateConfig();
         }
     }
@@ -34,7 +36,7 @@ export class ProgramingSampleComponent implements OnChanges {
     }
 
     private get accountUrl() {
-        const url =  this.account && this.account.properties.accountEndpoint;
+        const url = this.account && this.account.properties.accountEndpoint;
         return url ? `https://${url}` : "";
     }
 
@@ -51,6 +53,10 @@ export class ProgramingSampleComponent implements OnChanges {
         }
     }
 
+    private _updatePrerequisites() {
+        this.prerequisites = prerequisites[this.language];
+    }
+
     private _updateConfig() {
         this.editorConfig = {
             language: this.language,
diff --git a/app/components/account/details/programing-sample/programing-sample.html b/app/components/account/details/programing-sample/programing-sample.html
index 9ad11a20da..8cf86ed1a4 100644
--- a/app/components/account/details/programing-sample/programing-sample.html
+++ b/app/components/account/details/programing-sample/programing-sample.html
@@ -1,2 +1,11 @@
-
+<div class="description">
+    <div class="dependency"></div>
+    <bl-property-group label="" class="wide">
+        <bl-table-property label="Prerequisites" *ngIf="prerequisites">
+            <bl-table-property-row *ngFor="let prerequisite of prerequisites">
+                <bl-tp-cell [value]="prerequisite"></bl-tp-cell>
+            </bl-table-property-row>
+        </bl-table-property>
+    </bl-property-group>
+</div>
 <bl-editor [ngModel]="content" [config]="editorConfig"></bl-editor>
diff --git a/app/components/account/details/programing-sample/programing-sample.scss b/app/components/account/details/programing-sample/programing-sample.scss
index 7d71074d4f..445a6c3006 100644
--- a/app/components/account/details/programing-sample/programing-sample.scss
+++ b/app/components/account/details/programing-sample/programing-sample.scss
@@ -1,3 +1,17 @@
+@import "app/styles/variables";
+
 bl-programing-sample {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+
+    > .description {
+        padding-top: 10px;
+        border-bottom: 1px solid $border-color;
+    }
 
+    > bl-editor {
+        flex: 1;
+    }
 }
diff --git a/app/components/account/details/programing-sample/samples/csharp.cs b/app/components/account/details/programing-sample/samples/csharp.cs
index ed9a161e99..4ead1a5a7c 100644
--- a/app/components/account/details/programing-sample/samples/csharp.cs
+++ b/app/components/account/details/programing-sample/samples/csharp.cs
@@ -5,8 +5,8 @@ namespace Microsoft.Azure.Batch.Samples.HelloWorld
     using Auth;
 
     public class AccountSettings {
-        public const string accountName = "{0}";
-        public const string accountUrl = "{1}";
+        public const string name = "{0}";
+        public const string url = "{1}";
         public const string key = "{2}";
     }
 
diff --git a/app/components/base/property-list/table-property.html b/app/components/base/property-list/table-property.html
index 615b26b4a0..f43c9e3494 100644
--- a/app/components/base/property-list/table-property.html
+++ b/app/components/base/property-list/table-property.html
@@ -1,12 +1,12 @@
 <section>
     <table>
-        <tr class="head">
+        <tr class="head" *ngIf="header">
             <td class="label">{{label}}</td>
             <ng-template [ngTemplateOutlet]="header.content"></ng-template>
         </tr>
 
-        <tr *ngFor="let row of displayRows;trackBy: trackRow" class="row">
-            <td class="label">{{row.label}}</td>
+        <tr *ngFor="let row of displayRows;trackBy: trackRow; let first = first;" class="row">
+            <td class="label">{{row.label || (!header && first && label) || ""}}</td>
             <ng-template [ngTemplateOutlet]="row.content"></ng-template>
         </tr>
     </table>

From cca2d0768a9e2ff765cf086f8fe143b9fa1af699 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Tue, 2 Jan 2018 12:57:07 -0800
Subject: [PATCH 06/10] Added nodejs

---
 .../batch-account-keys-dialog.html            |  6 ++++++
 .../programing-sample.component.ts            | 12 ++++++++++-
 .../programing-sample/samples/index.ts        |  6 ++++++
 .../details/programing-sample/samples/node.js | 21 +++++++++++++++++++
 .../programing-sample/samples/python.py       |  5 ++++-
 5 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 app/components/account/details/programing-sample/samples/node.js

diff --git a/app/components/account/details/keys-dialog/batch-account-keys-dialog.html b/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
index 5a7e492ee9..a42a7301d5 100644
--- a/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
+++ b/app/components/account/details/keys-dialog/batch-account-keys-dialog.html
@@ -24,4 +24,10 @@
         </ng-template>
         <bl-programing-sample language="csharp" [account]="account" [keys]="keys"></bl-programing-sample>
     </mat-tab>
+    <mat-tab>
+        <ng-template mat-tab-label>
+            Node.js
+        </ng-template>
+        <bl-programing-sample language="nodejs" [account]="account" [keys]="keys"></bl-programing-sample>
+    </mat-tab>
 </mat-tab-group>
diff --git a/app/components/account/details/programing-sample/programing-sample.component.ts b/app/components/account/details/programing-sample/programing-sample.component.ts
index 02c254cdd7..d808636823 100644
--- a/app/components/account/details/programing-sample/programing-sample.component.ts
+++ b/app/components/account/details/programing-sample/programing-sample.component.ts
@@ -4,11 +4,17 @@ import { prerequisites, sampleTemplates } from "./samples";
 import { EditorConfig } from "app/components/base/editor";
 import { AccountKeys, AccountResource } from "app/models";
 import "./programing-sample.scss";
+
 export enum SampleLanguage {
     python = "python",
     csharp = "csharp",
+    nodejs = "nodejs",
 }
 
+const engineLanguages = {
+    nodejs: "javascript",
+};
+
 @Component({
     selector: "bl-programing-sample",
     templateUrl: "programing-sample.html",
@@ -58,8 +64,12 @@ export class ProgramingSampleComponent implements OnChanges {
     }
 
     private _updateConfig() {
+        let language = this.language;
+        if (language in engineLanguages) {
+            language = engineLanguages[language];
+        }
         this.editorConfig = {
-            language: this.language,
+            language,
         };
     }
 }
diff --git a/app/components/account/details/programing-sample/samples/index.ts b/app/components/account/details/programing-sample/samples/index.ts
index 49c7e49b61..46c1f55cd7 100644
--- a/app/components/account/details/programing-sample/samples/index.ts
+++ b/app/components/account/details/programing-sample/samples/index.ts
@@ -2,15 +2,18 @@
 
 const python = require("raw-loader!./python.py");
 const csharp = require("raw-loader!./csharp.cs");
+const nodejs = require("raw-loader!./node.js");
 
 export const sampleTemplates = {
     python,
     csharp,
+    nodejs,
 };
 
 export const samplesLink = {
     python: "https://github.com/Azure/azure-batch-samples/tree/master/Python",
     csharp: "https://github.com/Azure/azure-batch-samples/tree/master/CSharp",
+    nodejs: "https://github.com/Azure/azure-batch-samples/tree/master/Node.js",
 };
 
 export const prerequisites = {
@@ -20,4 +23,7 @@ export const prerequisites = {
     csharp: [
         `dotnet add package Azure.Batch`,
     ],
+    nodejs: [
+        `npm install azure-batch`,
+    ],
 };
diff --git a/app/components/account/details/programing-sample/samples/node.js b/app/components/account/details/programing-sample/samples/node.js
new file mode 100644
index 0000000000..67d66fab44
--- /dev/null
+++ b/app/components/account/details/programing-sample/samples/node.js
@@ -0,0 +1,21 @@
+const { SharedKeyCredentials, BatchServiceClient } = require("azure-batch");
+
+const accountName = "{0}";
+const accountUrl = "{1}";
+const accountKey = "{2}";
+
+const credentials = new SharedKeyCredentials(accountName, accountKey);
+const batchClient = new ServiceClient(credentials, accountUrl);
+
+async function run() {
+    const jobs = await batchClient.job.list();
+
+    for (const job of jobs) {
+        // tslint:disable-next-line:no-console
+        console.log(job.id);
+    }
+}
+
+run().then(() => {
+    process.exit();
+});
diff --git a/app/components/account/details/programing-sample/samples/python.py b/app/components/account/details/programing-sample/samples/python.py
index fc94e3e74b..2542961ea6 100644
--- a/app/components/account/details/programing-sample/samples/python.py
+++ b/app/components/account/details/programing-sample/samples/python.py
@@ -1,6 +1,5 @@
 import azure.batch.batch_service_client as batch
 import azure.batch.batch_auth as batchauth
-import azure.batch.models as batchmodels
 
 # Batch account credentials
 BATCH_ACCOUNT_NAME = "{0}"
@@ -17,3 +16,7 @@
     base_url=BATCH_ACCOUNT_URL)
 
 # Perform action with the batch_client
+jobs = batch_client.job.list()
+
+for job in jobs:
+    print(job.id)

From 1886d3a9abf92ac92ae9428abfe327a701da9284 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Tue, 2 Jan 2018 13:43:12 -0800
Subject: [PATCH 07/10] Disable trackBy

---
 .../details/programing-sample/programing-sample.component.ts     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/account/details/programing-sample/programing-sample.component.ts b/app/components/account/details/programing-sample/programing-sample.component.ts
index d808636823..e73a8b822d 100644
--- a/app/components/account/details/programing-sample/programing-sample.component.ts
+++ b/app/components/account/details/programing-sample/programing-sample.component.ts
@@ -15,6 +15,7 @@ const engineLanguages = {
     nodejs: "javascript",
 };
 
+// tslint:disable:trackBy-function
 @Component({
     selector: "bl-programing-sample",
     templateUrl: "programing-sample.html",

From ac1811207f1561250aeb920faa47b0f4ff9a8cc7 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Wed, 3 Jan 2018 09:06:37 -0800
Subject: [PATCH 08/10] fix trackby

---
 .../details/programing-sample/programing-sample.component.ts | 5 ++++-
 .../account/details/programing-sample/programing-sample.html | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/account/details/programing-sample/programing-sample.component.ts b/app/components/account/details/programing-sample/programing-sample.component.ts
index e73a8b822d..77112fd27d 100644
--- a/app/components/account/details/programing-sample/programing-sample.component.ts
+++ b/app/components/account/details/programing-sample/programing-sample.component.ts
@@ -15,7 +15,6 @@ const engineLanguages = {
     nodejs: "javascript",
 };
 
-// tslint:disable:trackBy-function
 @Component({
     selector: "bl-programing-sample",
     templateUrl: "programing-sample.html",
@@ -38,6 +37,10 @@ export class ProgramingSampleComponent implements OnChanges {
         }
     }
 
+    public trackPrerequisite(index, item) {
+        return item;
+    }
+
     private get accountName() {
         return this.account && this.account.name || "";
     }
diff --git a/app/components/account/details/programing-sample/programing-sample.html b/app/components/account/details/programing-sample/programing-sample.html
index 8cf86ed1a4..fc9748391c 100644
--- a/app/components/account/details/programing-sample/programing-sample.html
+++ b/app/components/account/details/programing-sample/programing-sample.html
@@ -2,7 +2,7 @@
     <div class="dependency"></div>
     <bl-property-group label="" class="wide">
         <bl-table-property label="Prerequisites" *ngIf="prerequisites">
-            <bl-table-property-row *ngFor="let prerequisite of prerequisites">
+            <bl-table-property-row *ngFor="let prerequisite of prerequisites;trackBy: trackPrerequisite">
                 <bl-tp-cell [value]="prerequisite"></bl-tp-cell>
             </bl-table-property-row>
         </bl-table-property>

From dbd745873c552ab3e0a9d2837094f50dc30cec56 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Wed, 3 Jan 2018 10:20:46 -0800
Subject: [PATCH 09/10] Added test

---
 .../programing-sample.component.spec.ts       | 91 +++++++++++++++++++
 .../programing-sample/programing-sample.html  |  5 +-
 .../samples/{csharp.cs => csharp.cs.template} |  0
 .../programing-sample/samples/index.ts        |  6 +-
 .../samples/{node.js => node.js.template}     |  0
 .../samples/{python.py => python.py.template} |  0
 .../mocks/components/editor.component.mock.ts |  1 +
 test/fixture.ts                               |  3 +-
 8 files changed, 99 insertions(+), 7 deletions(-)
 create mode 100644 app/components/account/details/programing-sample/programing-sample.component.spec.ts
 rename app/components/account/details/programing-sample/samples/{csharp.cs => csharp.cs.template} (100%)
 rename app/components/account/details/programing-sample/samples/{node.js => node.js.template} (100%)
 rename app/components/account/details/programing-sample/samples/{python.py => python.py.template} (100%)

diff --git a/app/components/account/details/programing-sample/programing-sample.component.spec.ts b/app/components/account/details/programing-sample/programing-sample.component.spec.ts
new file mode 100644
index 0000000000..26c53e1081
--- /dev/null
+++ b/app/components/account/details/programing-sample/programing-sample.component.spec.ts
@@ -0,0 +1,91 @@
+import { Component, DebugElement, NO_ERRORS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { PropertyListModule } from "app/components/base/property-list";
+import { AccountKeys } from "app/models";
+import * as Fixtures from "test/fixture";
+import { MockEditorComponent } from "test/utils/mocks/components";
+import { ProgramingSampleComponent } from "./programing-sample.component";
+
+const account1 = Fixtures.account.create();
+@Component({
+    template: `<bl-programing-sample [language]="language" [keys]="keys" [account]="account"></bl-programing-sample>`,
+})
+class TestComponent {
+    public language = null;
+    public keys = new AccountKeys({ primary: "primary-key", secondary: "secondary-key" });
+    public account = account1;
+}
+
+describe("ProgramingSampleComponent", () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let testComponent: TestComponent;
+    let component: ProgramingSampleComponent;
+    let de: DebugElement;
+    let codeEl: DebugElement;
+    let code: MockEditorComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [PropertyListModule, FormsModule, ReactiveFormsModule],
+            declarations: [ProgramingSampleComponent, TestComponent, MockEditorComponent],
+            schemas: [NO_ERRORS_SCHEMA],
+        });
+        fixture = TestBed.createComponent(TestComponent);
+        testComponent = fixture.componentInstance;
+        de = fixture.debugElement.query(By.css("bl-programing-sample"));
+        component = de.componentInstance;
+        fixture.detectChanges();
+        codeEl = de.query(By.css("bl-editor"));
+        code = codeEl.componentInstance;
+    });
+
+    describe("when language/engine is the same", () => {
+        beforeEach(() => {
+            testComponent.language = "csharp";
+            fixture.detectChanges();
+        });
+
+        it("should compute the right language for the editor", () => {
+            expect(component.editorConfig.language).toEqual("csharp");
+        });
+
+        it("show the prerequisites", () => {
+            expect(de.query(By.css(".prerequisites")).nativeElement.textContent)
+                .toContain("dotnet add package Azure.Batch");
+        });
+
+        it("show right code in the editor", () => {
+            expect(code.value).toContain("namespace Microsoft.Azure.Batch.Samples.HelloWorld");
+            expect(code.value).toContain(`public const string name = "${account1.name}";`);
+            expect(code.value).toContain(`public const string url = "https://${account1.properties.accountEndpoint}";`);
+            expect(code.value).toContain(`public const string key = "primary-key";`);
+        });
+    });
+
+    describe("when language is engine(nodejs)", () => {
+        beforeEach(() => {
+            testComponent.language = "nodejs";
+            fixture.detectChanges();
+        });
+
+        it("should compute the right language for the editor", () => {
+            expect(component.editorConfig.language).toEqual("javascript");
+        });
+
+        it("show the prerequisites", () => {
+            expect(de.query(By.css(".prerequisites")).nativeElement.textContent)
+                .toContain("npm install azure-batch");
+        });
+
+        it("show right code in the editor", () => {
+            expect(code.value).toContain(
+                `const { SharedKeyCredentials, BatchServiceClient } = require("azure-batch");`);
+            expect(code.value).toContain(`const accountName = "${account1.name}";`);
+            expect(code.value).toContain(`const accountUrl = "https://${account1.properties.accountEndpoint}";`);
+            expect(code.value).toContain(`const accountKey = "primary-key";`);
+        });
+    });
+});
diff --git a/app/components/account/details/programing-sample/programing-sample.html b/app/components/account/details/programing-sample/programing-sample.html
index fc9748391c..450095890b 100644
--- a/app/components/account/details/programing-sample/programing-sample.html
+++ b/app/components/account/details/programing-sample/programing-sample.html
@@ -1,6 +1,5 @@
 <div class="description">
-    <div class="dependency"></div>
-    <bl-property-group label="" class="wide">
+    <bl-property-group label="" class="wide" class="prerequisites">
         <bl-table-property label="Prerequisites" *ngIf="prerequisites">
             <bl-table-property-row *ngFor="let prerequisite of prerequisites;trackBy: trackPrerequisite">
                 <bl-tp-cell [value]="prerequisite"></bl-tp-cell>
@@ -8,4 +7,4 @@
         </bl-table-property>
     </bl-property-group>
 </div>
-<bl-editor [ngModel]="content" [config]="editorConfig"></bl-editor>
+<bl-editor [value]="content" [config]="editorConfig"></bl-editor>
diff --git a/app/components/account/details/programing-sample/samples/csharp.cs b/app/components/account/details/programing-sample/samples/csharp.cs.template
similarity index 100%
rename from app/components/account/details/programing-sample/samples/csharp.cs
rename to app/components/account/details/programing-sample/samples/csharp.cs.template
diff --git a/app/components/account/details/programing-sample/samples/index.ts b/app/components/account/details/programing-sample/samples/index.ts
index 46c1f55cd7..38593f790b 100644
--- a/app/components/account/details/programing-sample/samples/index.ts
+++ b/app/components/account/details/programing-sample/samples/index.ts
@@ -1,8 +1,8 @@
 // tslint:disable:no-var-requires
 
-const python = require("raw-loader!./python.py");
-const csharp = require("raw-loader!./csharp.cs");
-const nodejs = require("raw-loader!./node.js");
+const python = require("raw-loader!./python.py.template");
+const csharp = require("raw-loader!./csharp.cs.template");
+const nodejs = require("raw-loader!./node.js.template");
 
 export const sampleTemplates = {
     python,
diff --git a/app/components/account/details/programing-sample/samples/node.js b/app/components/account/details/programing-sample/samples/node.js.template
similarity index 100%
rename from app/components/account/details/programing-sample/samples/node.js
rename to app/components/account/details/programing-sample/samples/node.js.template
diff --git a/app/components/account/details/programing-sample/samples/python.py b/app/components/account/details/programing-sample/samples/python.py.template
similarity index 100%
rename from app/components/account/details/programing-sample/samples/python.py
rename to app/components/account/details/programing-sample/samples/python.py.template
diff --git a/src/test/utils/mocks/components/editor.component.mock.ts b/src/test/utils/mocks/components/editor.component.mock.ts
index 0de04b53e4..0ae2b84148 100644
--- a/src/test/utils/mocks/components/editor.component.mock.ts
+++ b/src/test/utils/mocks/components/editor.component.mock.ts
@@ -27,6 +27,7 @@ export class MockEditorComponent implements ControlValueAccessor {
     }
 
     public writeValue(value) {
+        console.log("WRite dem value", value);
         this._value = value || "";
     }
 
diff --git a/test/fixture.ts b/test/fixture.ts
index e13354cf39..d709ed3254 100644
--- a/test/fixture.ts
+++ b/test/fixture.ts
@@ -209,11 +209,12 @@ export const subscription = new FixtureFactory<Subscription>(Subscription, {
 });
 
 export const account = new FixtureFactory<AccountResource>(AccountResource, {
-    id: "account-id",
+    id: "account-1",
     name: "account-test",
     location: "westus",
     type: "BatchAccount",
     properties: {
+        accountEndpoint: "account-1.region.batch.azure.com",
         autoStorage: {
             storageAccountId: null,
             lastKeySync: null,

From 763b866c34bb6515a68a4079be2dd848871b02ca Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Wed, 3 Jan 2018 12:11:00 -0800
Subject: [PATCH 10/10] fix

---
 src/test/utils/mocks/components/editor.component.mock.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/test/utils/mocks/components/editor.component.mock.ts b/src/test/utils/mocks/components/editor.component.mock.ts
index 0ae2b84148..0de04b53e4 100644
--- a/src/test/utils/mocks/components/editor.component.mock.ts
+++ b/src/test/utils/mocks/components/editor.component.mock.ts
@@ -27,7 +27,6 @@ export class MockEditorComponent implements ControlValueAccessor {
     }
 
     public writeValue(value) {
-        console.log("WRite dem value", value);
         this._value = value || "";
     }