Feature: show code samples to get started

app/components/account/account.module.ts

@@ -9,14 +9,15 @@ 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";
 
 const components = [
     AccountDefaultComponent, AccountDetailsComponent,
     AccountHomeComponent, DeleteAccountDialogComponent, StorageAccountCardComponent,
     EditStorageAccountFormComponent, StorageAccountPickerComponent, AccountQuotasCardComponent,
-    BatchAccountKeysDialogComponent,
+    BatchAccountKeysDialogComponent, ProgramingSampleComponent,
 ];
 
 const modules = [

app/components/account/details/keys-dialog/batch-account-keys-dialog.html

@@ -1,8 +1,33 @@
-<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>
+            C#
+        </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>

app/components/account/details/keys-dialog/batch-account-keys-dialog.scss

@@ -1,4 +1,10 @@
 bl-batch-account-keys-dialog {
     display: block;
     position: relative;
+    width: 800px;
+    height: 80vh;
+
+    > mat-tab-group {
+        height: 100%;
+    }
 }

app/components/account/details/programing-sample/index.ts

@@ -0,0 +1 @@
+export * from "./programing-sample.component";

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";`);
+        });
+    });
+});

app/components/account/details/programing-sample/programing-sample.component.ts

@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from "@angular/core";
+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",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgramingSampleComponent implements OnChanges {
+    @Input() public language: SampleLanguage;
+    @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();
+        }
+    }
+
+    public trackPrerequisite(index, item) {
+        return item;
+    }
+
+    private get accountName() {
+        return this.account && this.account.name || "";
+    }
+
+    private get accountUrl() {
+        const url = this.account && this.account.properties.accountEndpoint;
+        return url ? `https://${url}` : "";
+    }
+
+    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 _updatePrerequisites() {
+        this.prerequisites = prerequisites[this.language];
+    }
+
+    private _updateConfig() {
+        let language = this.language;
+        if (language in engineLanguages) {
+            language = engineLanguages[language];
+        }
+        this.editorConfig = {
+            language,
+        };
+    }
+}

app/components/account/details/programing-sample/programing-sample.html

@@ -0,0 +1,10 @@
+<div class="description">
+    <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>
+            </bl-table-property-row>
+        </bl-table-property>
+    </bl-property-group>
+</div>
+<bl-editor [value]="content" [config]="editorConfig"></bl-editor>

app/components/account/details/programing-sample/programing-sample.scss

@@ -0,0 +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;
+    }
+}

app/components/account/details/programing-sample/samples/csharp.cs.template

@@ -0,0 +1,39 @@
+
+namespace Microsoft.Azure.Batch.Samples.HelloWorld
+{
+    using System;
+    using Auth;
+
+    public class AccountSettings {
+        public const string name = "{0}";
+        public const string url = "{1}";
+        public 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 =  BatchClient.Open(credentials))
+            {
+                // Perform actions using the batchClient
+                var jobs = batchClient.JobOperations.ListJobs();
+                foreach(var job in jobs)
+                {
+                    Console.Write(job.Id + "\n");
+                }
+            }
+        }
+    }
+}

app/components/account/details/programing-sample/samples/index.ts

@@ -0,0 +1,29 @@
+// tslint:disable:no-var-requires
+
+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,
+    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 = {
+    python: [
+        `pip install azure-batch`,
+    ],
+    csharp: [
+        `dotnet add package Azure.Batch`,
+    ],
+    nodejs: [
+        `npm install azure-batch`,
+    ],
+};

app/components/account/details/programing-sample/samples/node.js.template

@@ -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();
+});

app/components/account/details/programing-sample/samples/python.py.template

@@ -0,0 +1,22 @@
+import azure.batch.batch_service_client as batch
+import azure.batch.batch_auth as batchauth
+
+# Batch account credentials
+BATCH_ACCOUNT_NAME = "{0}"
+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.
+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
+jobs = batch_client.job.list()
+
+for job in jobs:
+    print(job.id)