feat: Add OS selection to provisioning

Composer/packages/client/src/pages/publish/styles.ts

@@ -150,5 +150,5 @@ export const pvaPublishSurface = css`
 export const azurePublishSurface = css`
   overflow-x: hidden;
   overflow-y: auto;
-  height: 500px;
+  height: 550px;
 `;

extensions/azurePublish/src/components/ChooseProvisionAction.tsx

@@ -155,7 +155,7 @@ const ImportActionContent = () => {
           <Text>- {formatMessage('Microsoft Application Registration')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>- {formatMessage('Azure Hosting')}</Text>
+          <Text>- {formatMessage('App Services')}</Text>
         </ResourceTitle>
         <ResourceTitle>
           <Text>- {formatMessage('Microsoft Bot Channels Registration')}</Text>

extensions/azurePublish/src/components/azureProvisionDialog.tsx

@@ -41,6 +41,8 @@ import {
   IStackTokens,
   IStackItemStyles,
   Link,
+  ChoiceGroup,
+  IChoiceGroupOption,
 } from 'office-ui-fabric-react';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
 import { JsonEditor } from '@bfc/code-editor';
@@ -71,6 +73,7 @@ type ProvisionFormData = {
   hostname: string;
   region: string;
   luisLocation: string;
+  appServiceOperatingSystem: string;
   enabledResources: ResourcesItem[];
   requiredResources: ResourcesItem[];
 };
@@ -130,6 +133,14 @@ const LearnMoreLink = styled(Link)`
   font-size: 14px;
 `;
 
+const appOSChoiceGroupStyles = {
+  flexContainer: { display: 'flex', flexDirection: 'row' },
+};
+
+const appOSChoiceGroupOptionStyles = {
+  root: { marginLeft: '8px' },
+};
+
 const PageTypes = {
   ChooseAction: 'chooseAction',
   ConfigProvision: 'config',
@@ -289,11 +300,15 @@ const getDefaultFormData = (currentProfile, defaults) => {
     hostname: getHostname(currentProfile) ?? defaults.hostname,
     region: currentProfile?.region ?? defaults.region,
     luisLocation: currentProfile?.settings?.luis?.region ?? defaults.luisLocation,
+    appServiceOperatingSystem:
+      currentProfile?.settings?.appServiceOperatingSystem ?? defaults.appServiceOperatingSystem,
     enabledResources: defaults.enabledResources ?? [],
     requiredResources: defaults.requireResources ?? [],
   };
 };
 
+const defaultAppServiceOperatingSystem = 'windows';
+
 export const AzureProvisionDialog: React.FC = () => {
   const {
     currentProjectId,
@@ -846,6 +861,11 @@ export const AzureProvisionDialog: React.FC = () => {
     );
   };
 
+  const appServiceOSOptions: IChoiceGroupOption[] = [
+    { key: 'windows', text: 'Windows' },
+    { key: 'linux', text: 'Linux', styles: appOSChoiceGroupOptionStyles },
+  ];
+
   const PageFormConfig = (
     <ScrollablePane
       data-is-scrollable="true"
@@ -922,6 +942,28 @@ export const AzureProvisionDialog: React.FC = () => {
               }}
             />
           </Stack>
+          <ConfigureResourcesSectionName>
+            {formatMessage('App Service (Web App or Function)')}
+          </ConfigureResourcesSectionName>
+          <Stack horizontal tokens={configureResourcePropertyStackTokens} verticalAlign="start">
+            <Stack horizontal styles={configureResourcePropertyLabelStackStyles} verticalAlign="center">
+              <ConfigureResourcesPropertyLabel required>
+                {formatMessage('Operating System')}
+              </ConfigureResourcesPropertyLabel>
+              {renderPropertyInfoIcon(
+                formatMessage('Select the operating system that will host your application service.')
+              )}
+            </Stack>
+            <ChoiceGroup
+              required
+              defaultSelectedKey={defaultAppServiceOperatingSystem}
+              options={appServiceOSOptions}
+              styles={appOSChoiceGroupStyles}
+              onChange={(_e, o) => {
+                updateFormData('appServiceOperatingSystem', o.key as string);
+              }}
+            />
+          </Stack>
           <ConfigureResourcesSectionName>{formatMessage('Resource details')}</ConfigureResourcesSectionName>
           <ConfigureResourcesSectionDescription>
             {formatMessage('Enter resource name and select region. This will be applied to the new resources.')}
@@ -1249,6 +1291,7 @@ export const AzureProvisionDialog: React.FC = () => {
                   hostname: formData.hostname,
                   location: formData.region,
                   luisLocation: formData.luisLocation || formData.region,
+                  appServiceOperatingSystem: formData.appServiceOperatingSystem,
                   type: publishType,
                   externalResources: selectedResources,
                 });

extensions/azurePublish/src/node/azureResourceManager/azureResourceManager.ts

@@ -778,12 +778,16 @@ export class AzureResourceMananger {
       });
       const webSiteManagementClient = new WebSiteManagementClient(this.creds, this.subscriptionId);
 
+      const operatingSystem = config.operatingSystem ? config.operatingSystem : 'windows';
+
       // Create new Service Plan
       const servicePlanResult = await webSiteManagementClient.appServicePlans.createOrUpdate(
         config.resourceGroupName,
         config.name,
         {
           location: config.location,
+          kind: operatingSystem,
+          reserved: operatingSystem === 'linux',
           sku: {
             name: 'S1',
             tier: 'Standard',
@@ -807,7 +811,7 @@ export class AzureResourceMananger {
         name: webAppName,
         serverFarmId: servicePlanResult.name,
         location: config.location,
-        kind: 'app',
+        kind: operatingSystem === 'linux' ? 'app,linux' : 'app',
         siteConfig: {
           webSocketsEnabled: true,
           appSettings: [
@@ -853,14 +857,18 @@ export class AzureResourceMananger {
       });
       const webSiteManagementClient = new WebSiteManagementClient(this.creds, this.subscriptionId);
       const azureFunctionsName = config.name;
+
+      const operatingSystem = config.operatingSystem ? config.operatingSystem : 'windows';
+
       const azureFunctionsResult = await webSiteManagementClient.webApps.createOrUpdate(
         config.resourceGroupName,
         config.name,
         {
           name: azureFunctionsName,
           location: config.location,
-          kind: 'functionapp',
+          kind: operatingSystem === 'linux' ? 'functionapp,linux' : 'functionapp',
           httpsOnly: true,
+          reserved: operatingSystem === 'linux',
           siteConfig: {
             webSocketsEnabled: true,
             appSettings: [

extensions/azurePublish/src/node/azureResourceManager/azureResourceManagerConfig.ts

@@ -104,6 +104,7 @@ export interface WebAppConfig {
   sku?: string;
   appId?: string;
   appPwd?: string;
+  operatingSystem?: string;
 }
 
 export interface AzureFunctionsConfig {
@@ -119,6 +120,7 @@ export interface AzureFunctionsConfig {
    * Currently documented values: dotnet, node, java, python, or powershell
    */
   workerRuntime?: string;
+  operatingSystem?: string;
 }
 
 export interface DeploymentsConfig {

extensions/azurePublish/src/node/index.ts

@@ -316,6 +316,8 @@ export default async (composer: IExtensionRegistration): Promise<void> => {
           : currentProfile?.luisResource,
         runtimeIdentifier: currentProfile?.runtimeIdentifier ?? 'win-x64',
         region: provisionConfig.location,
+        appServiceOperatingSystem:
+          provisionConfig.appServiceOperatingSystem ?? currentProfile?.appServiceOperatingSystem,
         settings: {
           applicationInsights: {
             InstrumentationKey:

extensions/azurePublish/src/node/provision.ts

@@ -18,6 +18,7 @@ export interface ProvisionConfig {
   externalResources: ResourceType[];
   location: string;
   luisLocation: string;
+  appServiceOperatingSystem?: string;
   subscription: string;
   resourceGroup?: string;
   logger?: (string) => any;
@@ -301,6 +302,7 @@ export class BotProjectProvision {
               resourceGroupName: resourceGroupName,
               location: config.location ?? provisionResults.resourceGroup.location,
               name: config.hostname,
+              operatingSystem: config.appServiceOperatingSystem,
             });
             provisionResults.webApp = {
               hostname: hostname,
@@ -335,6 +337,7 @@ export class BotProjectProvision {
               workerRuntime: config.workerRuntime,
               appId: provisionResults.appId,
               appPwd: provisionResults.appPassword,
+              operatingSystem: config.appServiceOperatingSystem,
             });
             provisionResults.webApp = {
               hostname: functionsHostName,

extensions/azurePublish/src/node/resourceTypes.ts

@@ -15,7 +15,7 @@ export const AzureResourceTypes = {
   SERVICE_PLAN: 'servicePlan',
 };
 
-const hostingGroupName = 'Azure Hosting';
+const hostingGroupName = 'App Services';
 const cognitiveServicesGroupName = 'Cognitive Services';
 
 export const AzureResourceDefinitions = {

extensions/azurePublish/src/node/schema.ts

@@ -51,6 +51,10 @@ const schema: JSONSchema7 = {
       type: 'string',
       title: 'region of your resource group',
     },
+    appServiceOperatingSystem: {
+      type: 'string',
+      title: "The operating system for the App Service. 'windows' or 'linux'.",
+    },
     settings: {
       type: 'object',
       title: 'Settings for Azure resources',
@@ -150,6 +154,7 @@ const schema: JSONSchema7 = {
     botName: '<name of your bot channel registration>',
     subscriptionId: '<id of your subscription>',
     region: '<region of your resource group>',
+    appServiceOperatingSystem: 'windows',
     settings: {
       applicationInsights: {
         InstrumentationKey: '<Instrumentation Key>',

extensions/azurePublishNew/src/components/provisioningWizards/steps/ImportInstructionsStep.tsx

@@ -58,7 +58,7 @@ export const ImportInstructionsStep = () => {
           <Text>- {formatMessage('Microsoft Application Registration')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>- {formatMessage('Azure Hosting')}</Text>
+          <Text>- {formatMessage('App Services')}</Text>
         </ResourceTitle>
         <ResourceTitle>
           <Text>- {formatMessage('Microsoft Bot Channels Registration')}</Text>