update target environment type page based on latest design (#4311)

extensions/big-data-cluster/src/interfaces.ts

@@ -52,6 +52,8 @@ export interface ContainerRegistryInfo {
 export interface TargetClusterTypeInfo {
 	type: TargetClusterType;
 	name: string;
+	fullName: string;
+	description: string;
 	iconPath: {
 		dark: string,
 		light: string
@@ -61,6 +63,7 @@ export interface TargetClusterTypeInfo {
 export interface ToolInfo {
 	name: string;
 	description: string;
+	version: string;
 	status: ToolInstallationStatus;
 }
 

extensions/big-data-cluster/src/wizards/create-cluster/createClusterModel.ts

@@ -4,11 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import { TargetClusterType, ClusterPorts, ContainerRegistryInfo, TargetClusterTypeInfo, ToolInfo, ToolInstallationStatus } from '../../interfaces';
+import { TargetClusterType, ClusterPorts, ClusterType, ContainerRegistryInfo, TargetClusterTypeInfo, ToolInfo, ToolInstallationStatus } from '../../interfaces';
 import { getContexts, KubectlContext, setContext, inferCurrentClusterType } from '../../kubectl/kubectlUtils';
 import { Kubectl } from '../../kubectl/kubectl';
 import { Scriptable, ScriptingDictionary } from '../../scripting/scripting';
-import { ClusterType} from '../../interfaces';
 import * as nls from 'vscode-nls';
 
 const localize = nls.loadMessageBundle();
@@ -58,6 +57,9 @@ export class CreateClusterModel implements Scriptable {
 			let aksCluster: TargetClusterTypeInfo = {
 				type: TargetClusterType.NewAksCluster,
 				name: localize('bdc-create.AKSClusterCardText', 'New AKS Cluster'),
+				fullName: localize('bdc-create.AKSClusterFullName', 'New Azure Kubernetes Service cluster'),
+				description: localize('bdc-create.AKSClusterDescription', 'This option configures new Azure Kubernetes Service (AKS) for SQL Server big data cluster deployments. '
+					+ 'AKS makes it simple to create, configure and manage a cluster of virutal machines that are preconfigured with a Kubernetes cluster to run containerized applications.'),
 				iconPath: {
 					dark: 'images/cluster_inverse.svg',
 					light: 'images/cluster.svg'
@@ -66,7 +68,9 @@ export class CreateClusterModel implements Scriptable {
 
 			let existingCluster: TargetClusterTypeInfo = {
 				type: TargetClusterType.ExistingKubernetesCluster,
-				name: localize('bdc-create.ExistingCardText', 'Existing Cluster'),
+				name: localize('bdc-create.ExistingClusterCardText', 'Existing Cluster'),
+				fullName: localize('bdc-create.ExistingClusterFullName', 'Existing Kubernetes Cluster'),
+				description: localize('bdc-create.ExistingClusterDescription', 'This option assumes you already have a Kubernetes cluster installed, Once a prerequisite check is done, ensure the correct cluster context is selected.'),
 				iconPath: {
 					dark: 'images/cluster_inverse.svg',
 					light: 'images/cluster.svg'
@@ -81,16 +85,19 @@ export class CreateClusterModel implements Scriptable {
 		let kubeCtl = {
 			name: 'kubectl',
 			description: 'Tool used for managing the Kubernetes cluster',
+			version: '',
 			status: ToolInstallationStatus.Installed
 		};
 		let mssqlCtl = {
 			name: 'mssqlctl',
 			description: 'Command-line tool for installing and managing the SQL Server big data cluster',
+			version: '',
 			status: ToolInstallationStatus.Installed
 		};
 		let azureCli = {
 			name: 'Azure CLI',
 			description: 'Tool used for managing Azure services',
+			version: '',
 			status: this._tmp_tools_installed ? ToolInstallationStatus.Installed : ToolInstallationStatus.NotInstalled
 		};
 		let promise = new Promise<ToolInfo[]>(resolve => {

extensions/big-data-cluster/src/wizards/create-cluster/pages/selectExistingClusterPage.ts

@@ -38,7 +38,7 @@ export class SelectExistingClusterPage extends WizardPageBase<CreateClusterWizar
 				}
 			],
 			{
-				horizontal: true
+				horizontal: false
 			}
 		).withLayout({ width: '100%', height: '100%' });
 

extensions/big-data-cluster/src/wizards/create-cluster/pages/selectTargetClusterTypePage.ts

@@ -23,6 +23,8 @@ export class SelectTargetClusterTypePage extends WizardPageBase<CreateClusterWiz
 	private installToolsButton: azdata.window.Button;
 	private toolsLoadingWrapper: azdata.LoadingComponent;
 	private refreshToolsButton: azdata.window.Button;
+	private targetDescriptionText: azdata.TextComponent;
+	private targetDescriptionGroup: azdata.FormComponent;
 	private isValid: boolean = false;
 	private isLoading: boolean = false;
 	private requiredTools: ToolInfo[];
@@ -74,24 +76,30 @@ export class SelectTargetClusterTypePage extends WizardPageBase<CreateClusterWiz
 			});
 			let cardsContainer = view.modelBuilder.flexContainer().withItems(self.cards, { flex: '0 0 auto' }).withLayout({ flexFlow: 'row', alignItems: 'left' }).component();
 
+			self.targetDescriptionText = view.modelBuilder.text().component();
+
 			let toolColumn: azdata.TableColumn = {
 				value: localize('bdc-create.toolNameColumnHeader', 'Tool'),
 				width: 100
 			};
 			let descriptionColumn: azdata.TableColumn = {
 				value: localize('bdc-create.toolDescriptionColumnHeader', 'Description'),
+				width: 500
+			};
+			let versionColumn: azdata.TableColumn = {
+				value: localize('bdc-create.toolVersionColumnHeader', 'Version'),
 				width: 200
 			};
 			let statusColumn: azdata.TableColumn = {
 				value: localize('bdc-create.toolStatusColumnHeader', 'Status'),
-				width: 100
+				width: 200
 			};
 
 			self.toolsTable = view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
 				height: 150,
 				data: [],
-				columns: [toolColumn, descriptionColumn, statusColumn],
+				columns: [toolColumn, descriptionColumn, versionColumn, statusColumn],
-				width: 850
+				width: 1000
 			}).component();
 
 			self.toolsLoadingWrapper = view.modelBuilder.loadingComponent().withItem(self.toolsTable).component();
@@ -170,12 +178,23 @@ export class SelectTargetClusterTypePage extends WizardPageBase<CreateClusterWiz
 					}
 				});
 
+				self.targetDescriptionText.value = targetClusterTypeInfo.description;
+
 				if (self.form.items.length === 1) {
 					self.formBuilder.addFormItem({
 						title: localize('bdc-create.RequiredToolsText', 'Required tools'),
 						component: self.toolsLoadingWrapper
 					});
+				} else {
+					self.formBuilder.removeFormItem(self.targetDescriptionGroup);
 				}
+
+				self.targetDescriptionGroup = {
+					title: targetClusterTypeInfo.fullName,
+					component: self.targetDescriptionText
+				};
+				self.formBuilder.insertFormItem(self.targetDescriptionGroup, 1);
+
 				self.updateRequiredToolStatus();
 			} else {
 				if (self.cards.filter(c => { return c !== card && c.selected; }).length === 0) {
@@ -223,7 +242,7 @@ export class SelectTargetClusterTypePage extends WizardPageBase<CreateClusterWiz
 	private updateToolStatusTable(): void {
 		if (this.requiredTools) {
 			let tableData = this.requiredTools.map(tool => {
-				return [tool.name, tool.description, this.getStatusText(tool.status)];
+				return [tool.name, tool.description, tool.version, this.getStatusText(tool.status)];
 			});
 			this.toolsTable.data = tableData;
 		}

src/sql/platform/dialog/media/dialogModal.css

@@ -66,7 +66,7 @@
 
 .dialogModal-wizardHeader h1 {
 	margin-top: 10px;
-	margin-bottom: 3px;
+	margin-bottom: 10px;
 	font-size: 1.5em;
 	font-weight: lighter;
 }