Change Azure PR deploy storage

.devops/templates/variables.yml

@@ -1,11 +1,13 @@
 parameters:
+  # For customizing the deployment path in non-PR builds
   - name: deployBasePath
     type: string
     default: ''
 
   - name: azureSubscription
     type: string
-    default: 'UI Fabric (bac044cf-49e1-4843-8dda-1ce9662606c8)'
+    # This service principal ("subscription" is a misleading name) only has access to the fluentuipr storage account
+    default: Azure PR deploy
 
   # Skip the component governance detection step (injected by a pipeline decorator from an
   # internal extension) by default because we run it separately. Since all our pipelines
@@ -16,11 +18,23 @@ parameters:
     default: true
 
 variables:
-  deployBasePath: ${{ coalesce(parameters.deployBasePath, 'pr-deploy-site/$(Build.SourceBranch)') }}
+  # Set final deployBasePath (also accessed as process.env.DEPLOYBASEPATH)
+  ${{ if eq(variables['System.PullRequest.PullRequestId'], '') }}:
+    # CI builds will have PullRequestId unset, and Build.SourceBranch as "refs/heads/branchname".
+    # Deploy under "heads/branchname" unless otherwise requested.
+    deployBasePath: $[coalesce(parameters.deployBasePath, replace(variables['Build.SourceBranch'], 'refs/', ''))]
+  ${{ if ne(variables['System.PullRequest.PullRequestId'], '') }}:
+    # Deploy PRs under "pull/####"
+    deployBasePath: 'pull/$(System.PullRequest.PullRequestId)'
 
-  deployHost: 'fabricweb.z5.web.core.windows.net'
+  # Also accessed as process.env.DEPLOYHOST
+  deployHost: 'fluentuipr.z22.web.core.windows.net'
+
+  # Also accessed as process.env.DEPLOYURL
+  deployUrl: 'https://$(deployHost)/$(deployBasePath)'
 
   azureSubscription: ${{ parameters.azureSubscription }}
+  azureStorage: fluentuipr
 
   ${{ if ne(variables['Build.SourceBranch'], 'refs/heads/master') }}:
     isPR: true

apps/perf-test/tasks/fluentPerfRegressions.ts

@@ -27,8 +27,8 @@ export function getFluentPerfRegressions() {
 }
 
 function linkToFlamegraph(value: string, filename: string) {
-  const urlForDeployPath = process.env.BUILD_SOURCEBRANCH
-    ? `http://fabricweb.z5.web.core.windows.net/pr-deploy-site/${process.env.BUILD_SOURCEBRANCH}/perf-test-northstar`
+  const urlForDeployPath = process.env.DEPLOYURL
+    ? `${process.env.DEPLOYURL}/perf-test-northstar`
     : 'file://' + config.paths.packageDist('perf-test');
 
   return `[${value}](${urlForDeployPath}/${path.basename(filename)})`;

apps/perf-test/tasks/perf-test.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import flamegrill, { CookResults, Scenarios, ScenarioConfig } from 'flamegrill';
+import flamegrill, { CookResults, Scenarios, ScenarioConfig, CookResult } from 'flamegrill';
 import scenarioIterations from '../src/scenarioIterations';
 import { scenarioRenderTypes, DefaultRenderTypes } from '../src/scenarioRenderTypes';
 import { argv } from '@fluentui/scripts';
@@ -102,8 +102,8 @@ const iterationsDefault = 5000;
 //        await page.goto(testUrl);
 //        await page.tracing.stop();
 
-const urlForDeployPath = process.env.BUILD_SOURCEBRANCH
-  ? `http://fabricweb.z5.web.core.windows.net/pr-deploy-site/${process.env.BUILD_SOURCEBRANCH}/perf-test`
+const urlForDeployPath = process.env.DEPLOYURL
+  ? `${process.env.DEPLOYURL}/perf-test`
   : 'file://' + path.resolve(__dirname, '../dist/');
 
 // Temporarily comment out deploy site usage to speed up CI build time and support parallelization.
@@ -112,9 +112,8 @@ const urlForDeployPath = process.env.BUILD_SOURCEBRANCH
 // const urlForDeploy = urlForDeployPath + '/index.html';
 const urlForDeploy = 'file://' + path.resolve(__dirname, '../dist/') + '/index.html';
 
-const urlForMaster = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH
-  ? `http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/${process.env.SYSTEM_PULLREQUEST_TARGETBRANCH}/perf-test/index.html`
-  : 'http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/perf-test/index.html';
+const targetPath = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH?.replace('refs/', '') || 'heads/master';
+const urlForMaster = `https://${process.env.DEPLOYHOST}/${targetPath}/perf-test/index.html`;
 
 const outDir = path.join(__dirname, '../dist');
 const tempDir = path.join(__dirname, '../logfiles');
@@ -129,7 +128,7 @@ export async function getPerfRegressions() {
     .map(name => path.basename(name, '.tsx'));
 
   const scenariosArgv: string = argv().scenarios;
-  const scenariosArg = (scenariosArgv && scenariosArgv.split && scenariosArgv.split(',')) || [];
+  const scenariosArg = scenariosArgv?.split?.(',') || [];
   scenariosArg.forEach(scenario => {
     if (!scenariosAvailable.includes(scenario)) {
       throw new Error(`Invalid scenario: ${scenario}.`);
@@ -195,9 +194,7 @@ export async function getPerfRegressions() {
 
   const scenarioResults: CookResults = await flamegrill.cook(scenarios, scenarioConfig);
 
-  let comment = createReport(scenarioSettings, scenarioResults);
-
-  comment = comment.concat(getFluentPerfRegressions());
+  const comment = createReport(scenarioSettings, scenarioResults) + getFluentPerfRegressions();
 
   // TODO: determine status according to perf numbers
   const status = 'success';
@@ -214,11 +211,8 @@ export async function getPerfRegressions() {
 
 /**
  * Create test summary based on test results.
- *
- * @param {CookResults} testResults
- * @returns {string}
  */
-function createReport(scenarioSettings, testResults) {
+function createReport(scenarioSettings, testResults: CookResults) {
   const report = '## [Perf Analysis](https://github.com/microsoft/fluentui/wiki/Perf-Testing)\n'
 
     // Show only significant changes by default.
@@ -234,12 +228,9 @@ function createReport(scenarioSettings, testResults) {
 
 /**
  * Create a table of scenario results.
- *
- * @param {CookResults} testResults
- * @param {boolean} showAll Show only significant results by default.
- * @returns {string}
+ * @param showAll Show only significant results by default.
  */
-function createScenarioTable(scenarioSettings, testResults, showAll) {
+function createScenarioTable(scenarioSettings, testResults: CookResults, showAll: boolean) {
   const resultsToDisplay = Object.keys(testResults).filter(
     key =>
       showAll ||
@@ -291,12 +282,8 @@ function createScenarioTable(scenarioSettings, testResults, showAll) {
 
 /**
  * Helper that renders an output cell based on a test result.
- *
- * @param {CookResult} testResult
- * @param {boolean} getBaseline
- * @returns {string}
  */
-function getCell(testResult, getBaseline) {
+function getCell(testResult: CookResult, getBaseline: boolean) {
   let flamegraphFile = testResult.processed.output && testResult.processed.output.flamegraphFile;
   let errorFile = testResult.processed.error && testResult.processed.error.errorFile;
   let numTicks = testResult.analysis && testResult.analysis.numTicks;
@@ -319,11 +306,8 @@ function getCell(testResult, getBaseline) {
 
 /**
  * Helper that renders an output cell based on a test result.
- *
- * @param {CookResult} testResult
- * @returns {string}
  */
-function getRegression(testResult) {
+function getRegression(testResult: CookResult) {
   const cell =
     testResult.analysis && testResult.analysis.regression && testResult.analysis.regression.isRegression
       ? testResult.analysis.regression.regressionFile

apps/pr-deploy-site/README.md

@@ -1,8 +1,8 @@
 # PR deployed demo site
 
-This is the site that gets deployed for each PR at `https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/#####/merge/` or `https://fluentuipr.z22.web.core.windows.net/pr-deploy-site/refs/pull/#####/merge/` (where `#####` is the real PR number).
+This is the site that gets deployed for each PR at `https://fluentuipr.z22.web.core.windows.net/pull/#####/` (where `#####` is the real PR number).
 
-It's also deployed during CI builds for [`master`](https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/), [`7.0`](https://fluentuipr.z22.web.core.windows.net/pr-deploy-site/refs/heads/7.0/), and [`6.0`](https://fluentuipr.z22.web.core.windows.net/pr-deploy-site/refs/heads/7.0/).
+It's also deployed during CI builds for [`master`](https://fluentuipr.z22.web.core.windows.net/heads/master/), [`7.0`](https://fluentuipr.z22.web.core.windows.net/heads/7.0/), and [`6.0`](https://fluentuipr.z22.web.core.windows.net/heads/6.0/).
 
 ## How to add a new package to the site
 

apps/pr-deploy-site/index.html

@@ -46,6 +46,7 @@ <h1>Deployed sites for <a href="#" id="prLink"></a></h1>
     </script>
 
     <script>
+      // Function is defined in pr-deploy-site.js and replacement is done in just.config.ts
       renderSiteLinks(/* insert packages here */);
     </script>
   </body>

apps/pr-deploy-site/pr-deploy-site.js

@@ -1,6 +1,7 @@
 // If you are adding a new tile into this site, place make sure it is also being copied from `just.config.ts`
 
-const siteInfo = [
+// Syntax here MUST BE IE11-COMPATIBLE
+var siteInfo = [
   {
     package: '@fluentui/public-docsite-resources',
     link: './public-docsite-resources/demo/index.html',
@@ -64,9 +65,16 @@ window.renderSiteLinks = function(packages) {
     if (packages.indexOf(info.package) > -1) {
       var li = document.createElement('LI');
       li.className = 'Tile';
-      li.innerHTML = `<a href="${info.link}" class="Tile-link">
-        <i class="ms-Icon ms-Icon--${info.icon}"></i>${info.title}
-      </a>`;
+      // Syntax here MUST BE IE11-COMPATIBLE (no backticks)
+      li.innerHTML =
+        '<a href="' +
+        info.link +
+        '" class="Tile-link">' +
+        '<i class="ms-Icon ms-Icon--' +
+        info.icon +
+        '"></i>' +
+        info.title +
+        '</a>';
 
       siteLink.appendChild(li);
     }

azure-pipelines.perf-test.yml

@@ -52,18 +52,18 @@ steps:
     inputs:
       SourcePath: 'packages/fluentui/perf-test/dist'
       azureSubscription: $(azureSubscription)
-      storage: fabricweb
+      storage: $(azureStorage)
       ContainerName: '$web'
-      BlobPrefix: 'pr-deploy-site/$(Build.SourceBranch)/perf-test-northstar'
+      BlobPrefix: '$(deployBasePath)/perf-test-northstar'
 
   - task: AzureUpload@2
     displayName: Upload Perf Test Result to PR deploy site
     inputs:
       SourcePath: 'apps/perf-test/dist'
       azureSubscription: $(azureSubscription)
-      storage: fabricweb
+      storage: $(azureStorage)
       ContainerName: '$web'
-      BlobPrefix: 'pr-deploy-site/$(Build.SourceBranch)/perf-test'
+      BlobPrefix: '$(deployBasePath)/perf-test'
 
   - task: GithubPRComment@0
     displayName: 'Post Perf Results to Github Pull Request'

azure-pipelines.release.yml

@@ -73,6 +73,13 @@ steps:
       yarn run:published bundle --production
     displayName: yarn bundle
 
+  - script: |
+      npm run publish:beachball -- -b origin/master -n $(npmToken) --access public -y &&
+      git reset --hard origin/master
+    env:
+      GITHUB_PAT: $(githubPAT)
+    displayName: Publish changes and bump versions
+
   - script: |
       echo Making $(Build.ArtifactStagingDirectory)/api &&
       mkdir -p $(Build.ArtifactStagingDirectory)/api &&
@@ -84,86 +91,85 @@ steps:
       pathtoPublish: $(Build.ArtifactStagingDirectory)/api
       artifactName: 'api-json'
       publishLocation: 'Container'
-    displayName: 'Publish Artifact: api.json'
+    displayName: 'Publish artifact: api-json'
 
   - task: PublishBuildArtifacts@1
     inputs:
       pathtoPublish: apps/public-docsite/dist
       artifactName: 'fabric-website'
       publishLocation: 'Container'
-    displayName: 'Publish Artifact: Fabric Website'
+    displayName: 'Publish artifact: fabric-website (public-docsite)'
 
   - task: PublishBuildArtifacts@1
     inputs:
       pathtoPublish: apps/public-docsite/index.html
       artifactName: 'fabric-website-index'
       publishLocation: 'Container'
-    displayName: 'Publish Artifact: Fabric Website index.html'
+    displayName: 'Publish artifact: fabric-website-index (public-docsite index.html)'
 
   - task: PublishBuildArtifacts@1
     inputs:
       pathtoPublish: packages/react/dist
       artifactName: 'fabric'
       publishLocation: 'Container'
-    displayName: 'Publish Artifact: Fabric'
-
-  - script: |
-      npm run publish:beachball -- -b origin/master -n $(npmToken) --access public -y &&
-      git reset --hard origin/master
-    env:
-      GITHUB_PAT: $(githubPAT)
-    displayName: 'Publish Change Requests and Bump Versions'
-
-  - script: |
-      node -r ./scripts/ts-node-register ./scripts/updateReleaseNotes/index.ts --token=$(githubPAT) --apply --debug
-    displayName: 'Update github release notes'
+    displayName: 'Publish artifact: fabric (packages/react/dist)'
 
   - script: |
       oufrVersion=$(node -p -e "require('./packages/react/package.json').version") &&
       echo "OUFR Version: $oufrVersion" &&
       echo $oufrVersion > oufr-version.txt &&
       echo "##vso[task.setvariable variable=oufrVersion;]$oufrVersion"
-    displayName: 'Set OUFR Version Task Variable'
+    displayName: 'Set oufrVersion variable'
 
   - task: PublishBuildArtifacts@1
     inputs:
       pathtoPublish: ./oufr-version.txt
       artifactName: 'oufr-version'
       publishLocation: 'Container'
-    displayName: 'Publish Artifact: oufr-version.txt'
+    displayName: 'Publish artifact: oufr-version'
 
   - script: |
       npm run create-public-flight-config -- --baseCDNUrl https://fabricweb.azureedge.net/fabric-website/$(Build.BuildNumber)/
     workingDirectory: apps/public-docsite
-    displayName: 'Generate Fabric Website Flight Manifest Files'
+    displayName: 'Generate website manifests'
 
   - task: PublishBuildArtifacts@1
     inputs:
       pathtoPublish: apps/public-docsite/flights
       artifactName: 'fabric-website-manifests'
       publishLocation: 'Container'
-    displayName: 'Publish Artifact: Website manifests'
+    displayName: 'Publish artifact: fabric-website-manifests'
 
   - task: PublishBuildArtifacts@1
     inputs:
       pathtoPublish: apps/public-docsite-resources/dist/demo
       artifactName: 'fabric-website-resources'
       publishLocation: 'Container'
-    displayName: 'Publish Artifact: Fabric Website Resources'
+    displayName: 'Publish artifact: fabric-website-resources (public-docsite-resources)'
 
   - script: |
       node ./scripts/generate-package-manifest
-    displayName: 'Generates a package manifest'
+    displayName: 'Generate package manifest'
 
-  - task: AzureUpload@2
-    displayName: Upload Package Manifest
+  - task: PublishBuildArtifacts@1
     inputs:
-      SourcePath: 'package-manifest'
-      azureSubscription: $(azureSubscription)
-      storage: fabricweb
-      ContainerName: 'fabric'
-      BlobPrefix: 'package-manifest'
-      Gzip: false
+      pathtoPublish: package-manifest
+      artifactName: 'package-manifest'
+      publishLocation: 'Container'
+    displayName: 'Publish artifact: package-manifest'
+
+  - task: PublishBuildArtifacts@1
+    inputs:
+      pathtoPublish: packages/fluentui/docs/src/public
+      artifactName: 'demo-images'
+      publishLocation: 'Container'
+    displayName: 'Publish artifact: demo-images'
+
+  # Run this near the end because it's more likely to fail than the artifact upload tasks, and its
+  # failure doesn't need to block anything else
+  - script: |
+      node -r ./scripts/ts-node-register ./scripts/updateReleaseNotes/index.ts --token=$(githubPAT) --apply --debug
+    displayName: 'Update github release notes'
 
   # This would usually be run automatically (via a pipeline decorator from an extension), but the
   # thorough cleanup step prevents it from working. So run it manually here.

azure-pipelines.yml

@@ -91,7 +91,7 @@ jobs:
           BlobPrefix: $(deployBasePath)
           ContainerName: '$web'
           SourcePath: 'apps/pr-deploy-site/dist'
-          storage: fabricweb
+          storage: $(azureStorage)
 
       - task: GithubPRStatus@0
         displayName: 'Update PR deploy site github status'
@@ -100,7 +100,7 @@ jobs:
           githubRepo: fluentui
           githubContext: 'Pull request demo site'
           githubDescription: 'Click "Details" to go to the deployed demo site for this pull request'
-          githubTargetLink: 'http://fabricweb.z5.web.core.windows.net/pr-deploy-site/$(Build.SourceBranch)/'
+          githubTargetLink: $(deployUrl)
 
       - template: .devops/templates/cleanup.yml
 
@@ -115,18 +115,19 @@ jobs:
           filePath: yarn-ci.sh
         displayName: yarn
 
-      - script: yarn workspace @fluentui/docs vr:build
+      - script: |
+          yarn workspace @fluentui/docs vr:build
         displayName: build FUI N* VR Test
 
       - task: AzureUpload@2
         displayName: Upload N* doc site
         inputs:
           azureSubscription: $(azureSubscription)
-          BlobPrefix: '$(deployBasePath)/react-northstar'
+          BlobPrefix: $(deployBasePath)/react-northstar
           CacheControl: 'public, max-age=600000'
           ContainerName: '$web'
           SourcePath: 'packages/fluentui/docs/dist'
-          storage: fabricweb
+          storage: $(azureStorage)
 
       - script: yarn workspace @fluentui/docs vr:test
         displayName: start FUI N* VR Test