ci: updates and tweaks (#2109)

- Remove deployment statuses, per request via slack - Deploy storybook and e2e_server prior to playwright completion. - Only run vrt update on commit push. Avoids running update on every successive buildkite test this comment. - Fix git mirror issues related to fix Buildkite failing on all EUI upgrades #2034. Wrong branch was being passed to buildkite see 84d0b95. - Add better error handling and messaging, see example below.
elastic · Jul 18, 2023 · 250ca75 · 250ca75
1 parent 2f857f9
commit 250ca75
Show file tree

Hide file tree

Showing 33 changed files with 829 additions and 314 deletions.
diff --git a/.buildkite/assets/404-report.html b/.buildkite/assets/404-report.html
@@ -0,0 +1,212 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>E2E Report - pending</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
+      @import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');
+      body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 100vh;
+      }
+      .error-container {
+        text-align: center;
+        font-size: 106px;
+        font-family: 'Catamaran', sans-serif;
+        font-weight: 800;
+        margin: 70px 15px;
+      }
+      .error-container > span {
+        display: inline-block;
+        position: relative;
+      }
+      .error-container > span.four {
+        width: 136px;
+        height: 43px;
+        border-radius: 999px;
+        background: linear-gradient(
+            140deg,
+            rgba(0, 0, 0, 0.1) 0%,
+            rgba(0, 0, 0, 0.07) 43%,
+            transparent 44%,
+            transparent 100%
+          ),
+          linear-gradient(
+            105deg,
+            transparent 0%,
+            transparent 40%,
+            rgba(0, 0, 0, 0.06) 41%,
+            rgba(0, 0, 0, 0.07) 76%,
+            transparent 77%,
+            transparent 100%
+          ),
+          linear-gradient(to right, #d89ca4, #e27b7e);
+      }
+      .error-container > span.four:before,
+      .error-container > span.four:after {
+        content: '';
+        display: block;
+        position: absolute;
+        border-radius: 999px;
+      }
+      .error-container > span.four:before {
+        width: 43px;
+        height: 156px;
+        left: 60px;
+        bottom: -43px;
+        background: linear-gradient(
+            128deg,
+            rgba(0, 0, 0, 0.1) 0%,
+            rgba(0, 0, 0, 0.07) 40%,
+            transparent 41%,
+            transparent 100%
+          ),
+          linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),
+          linear-gradient(to top, #99749d, #b895ab, #cc9aa6, #d7969e, #e0787f);
+      }
+      .error-container > span.four:after {
+        width: 137px;
+        height: 43px;
+        transform: rotate(-49.5deg);
+        left: -18px;
+        bottom: 36px;
+        background: linear-gradient(to right, #99749d, #b895ab, #cc9aa6, #d7969e, #e0787f);
+      }
+
+      .error-container > span.zero {
+        vertical-align: text-top;
+        width: 156px;
+        height: 156px;
+        border-radius: 999px;
+        background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 51%, transparent 100%),
+          linear-gradient(to top right, #99749d, #99749d, #b895ab, #cc9aa6, #d7969e, #ed8687, #ed8687);
+        overflow: hidden;
+        animation: bgshadow 5s infinite;
+      }
+      .error-container > span.zero:before {
+        content: '';
+        display: block;
+        position: absolute;
+        transform: rotate(45deg);
+        width: 90px;
+        height: 90px;
+        background-color: transparent;
+        left: 0px;
+        bottom: 0px;
+        background: linear-gradient(
+            95deg,
+            transparent 0%,
+            transparent 8%,
+            rgba(0, 0, 0, 0.07) 9%,
+            transparent 50%,
+            transparent 100%
+          ),
+          linear-gradient(
+            85deg,
+            transparent 0%,
+            transparent 19%,
+            rgba(0, 0, 0, 0.05) 20%,
+            rgba(0, 0, 0, 0.07) 91%,
+            transparent 92%,
+            transparent 100%
+          );
+      }
+      .error-container > span.zero:after {
+        content: '';
+        display: block;
+        position: absolute;
+        border-radius: 999px;
+        width: 70px;
+        height: 70px;
+        left: 43px;
+        bottom: 43px;
+        background: #fdfaf5;
+        box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
+      }
+
+      .screen-reader-text {
+        position: absolute;
+        top: -9999em;
+        left: -9999em;
+      }
+
+      @keyframes bgshadow {
+        0% {
+          box-shadow: inset -160px 160px 0px 5px rgba(0, 0, 0, 0.4);
+        }
+        45% {
+          box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
+        }
+        55% {
+          box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
+        }
+        100% {
+          box-shadow: inset 160px -160px 0px 5px rgba(0, 0, 0, 0.4);
+        }
+      }
+
+      /* demo stuff */
+      * {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+      body {
+        background-color: #fdfaf5;
+        margin-bottom: 50px;
+      }
+      html,
+      button,
+      input,
+      select,
+      textarea {
+        font-family: 'Montserrat', Helvetica, sans-serif;
+        color: #bbb;
+      }
+      h1 {
+        text-align: center;
+        margin: 30px 15px;
+      }
+      .zoom-area {
+        max-width: 490px;
+        margin: 30px auto 30px;
+        font-size: 19px;
+        text-align: center;
+      }
+      .link-container {
+        text-align: center;
+      }
+      a.more-link {
+        text-transform: uppercase;
+        font-size: 13px;
+        background-color: #de7e85;
+        padding: 10px 15px;
+        border-radius: 0;
+        color: #fff;
+        display: inline-block;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        line-height: 1.5;
+        text-decoration: none;
+        margin-top: 50px;
+        letter-spacing: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>404 Error | Page not found</h1>
+    <p class="zoom-area"><b>E2E Report</b> still pending...</p>
+    <section class="error-container">
+      <span class="four"><span class="screen-reader-text">4</span></span>
+      <span class="zero"><span class="screen-reader-text">0</span></span>
+      <span class="four"><span class="screen-reader-text">4</span></span>
+    </section>
+    <div class="link-container">
+      <a href="/" class="more-link">Take me to storybook</a>
+    </div>
+  </body>
+</html>
diff --git a/.buildkite/pipelines/pull_request/pipeline.ts b/.buildkite/pipelines/pull_request/pipeline.ts
@@ -22,18 +22,12 @@ import {
   prettierStep,
   storybookStep,
   typeCheckStep,
+  firebasePreDeployStep,
 } from '../../steps';
-import {
-  bkEnv,
-  ChangeContext,
-  createDeployment,
-  uploadPipeline,
-  createDeploymentStatus,
-  Step,
-  CustomCommandStep,
-} from '../../utils';
+import { bkEnv, ChangeContext, uploadPipeline, Step, CustomCommandStep } from '../../utils';
 import { getBuildConfig } from '../../utils/build';
 import { MetaDataKeys } from '../../utils/constants';
+import { createDeployment, createDeploymentStatus, createOrUpdateDeploymentComment } from '../../utils/deployment';
 
 void (async () => {
   try {
@@ -61,6 +55,7 @@ void (async () => {
       typeCheckStep(),
       storybookStep(),
       e2eServerStep(),
+      firebasePreDeployStep(),
       ghpDeployStep(),
       playwrightStep(),
       firebaseDeployStep(),
@@ -93,8 +88,12 @@ void (async () => {
     const skipDeployStep = (steps.find(({ key }) => key === 'deploy_fb') as CustomCommandStep)?.skip ?? false;
     await setMetadata(MetaDataKeys.skipDeployment, skipDeployStep ? 'true' : 'false');
     if (!skipDeployStep) {
-      await createDeployment();
-      await createDeploymentStatus({ state: 'queued' });
+      if (bkEnv.isPullRequest) {
+        await createOrUpdateDeploymentComment({ state: 'pending' });
+      } else {
+        await createDeployment();
+        await createDeploymentStatus({ state: 'queued' });
+      }
     }
 
     pipeline.steps = steps;

diff --git a/.buildkite/scripts/steps/e2e_server.ts b/.buildkite/scripts/steps/e2e_server.ts
@@ -6,12 +6,19 @@
  * Side Public License, v 1.
  */
 
-import { createDeploymentStatus, exec, yarnInstall, compress, startGroup } from '../../utils';
+import { exec, yarnInstall, compress, startGroup, bkEnv } from '../../utils';
+import { createDeploymentStatus, createOrUpdateDeploymentComment } from '../../utils/deployment';
 
 void (async () => {
   await yarnInstall();
 
-  await createDeploymentStatus({ state: 'pending' });
+  if (bkEnv.isPullRequest) {
+    await createOrUpdateDeploymentComment({
+      state: 'pending',
+    });
+  } else {
+    await createDeploymentStatus({ state: 'pending' });
+  }
 
   startGroup('Generating e2e server files');
   await exec('yarn test:e2e:generate');

diff --git a/.buildkite/scripts/steps/firebase_deploy.ts b/.buildkite/scripts/steps/firebase_deploy.ts
@@ -9,10 +9,13 @@
 import fs from 'fs';
 import path from 'path';
 
-import { createDeploymentStatus, firebaseDeploy, downloadArtifacts, startGroup, decompress } from '../../utils';
+import { firebaseDeploy, downloadArtifacts, startGroup, decompress, bkEnv } from '../../utils';
+import { createDeploymentStatus } from '../../utils/deployment';
 
 void (async () => {
-  await createDeploymentStatus({ state: 'in_progress' });
+  if (!bkEnv.isPullRequest) {
+    await createDeploymentStatus({ state: 'in_progress' });
+  }
 
   const outDir = 'e2e_server/public';
 
@@ -38,6 +41,7 @@ void (async () => {
   });
 
   startGroup('Check deployment files');
+
   const hasStorybookIndex = fs.existsSync('./e2e_server/public/index.html');
   const hasE2EIndex = fs.existsSync('./e2e_server/public/e2e/index.html');
   const hasE2EReportIndex = fs.existsSync('./e2e_server/public/e2e-report/index.html');

diff --git a/.buildkite/scripts/steps/firebase_pre_deploy.ts b/.buildkite/scripts/steps/firebase_pre_deploy.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import { firebaseDeploy, downloadArtifacts, startGroup, decompress, bkEnv } from '../../utils';
+import { createDeploymentStatus, createOrUpdateDeploymentComment } from '../../utils/deployment';
+
+void (async () => {
+  if (bkEnv.isPullRequest) {
+    await createOrUpdateDeploymentComment({
+      state: 'pending',
+      preDeploy: true,
+    });
+  } else {
+    await createDeploymentStatus({ state: 'in_progress' });
+  }
+
+  const outDir = 'e2e_server/public';
+
+  const storybookSrc = '.buildkite/artifacts/storybook.gz';
+  await downloadArtifacts(storybookSrc, 'build_storybook');
+  await decompress({
+    src: storybookSrc,
+    dest: outDir,
+  });
+
+  const e2eSrc = '.buildkite/artifacts/e2e_server.gz';
+  await downloadArtifacts(e2eSrc, 'build_e2e');
+  await decompress({
+    src: e2eSrc,
+    dest: path.join(outDir, 'e2e'),
+  });
+
+  startGroup('Check deployment files');
+
+  const hasStorybookIndex = fs.existsSync('./e2e_server/public/index.html');
+  const hasE2EIndex = fs.existsSync('./e2e_server/public/e2e/index.html');
+  const missingFiles = [
+    ['storybook', hasStorybookIndex],
+    ['e2e server', hasE2EIndex],
+  ]
+    .filter(([, exists]) => !exists)
+    .map<string>(([f]) => f as string);
+
+  if (missingFiles.length > 0) {
+    throw new Error(`Error: Missing deployment files: [${missingFiles.join(', ')}]`);
+  }
+
+  // Move 404 file to /e2e-report
+  fs.mkdirSync('./e2e_server/public/e2e-report');
+  fs.renameSync('./.buildkite/assets/404-report.html', './e2e_server/public/e2e-report/index.html');
+
+  await firebaseDeploy({
+    preDeploy: true,
+  });
+})();
diff --git a/.buildkite/scripts/steps/storybook.ts b/.buildkite/scripts/steps/storybook.ts
@@ -6,12 +6,19 @@
  * Side Public License, v 1.
  */
 
-import { bkEnv, compress, createDeploymentStatus, exec, startGroup, yarnInstall } from '../../utils';
+import { bkEnv, compress, exec, startGroup, yarnInstall } from '../../utils';
+import { createDeploymentStatus, createOrUpdateDeploymentComment } from '../../utils/deployment';
 
 void (async () => {
   await yarnInstall();
 
-  await createDeploymentStatus({ state: 'pending' });
+  if (bkEnv.isPullRequest) {
+    await createOrUpdateDeploymentComment({
+      state: 'pending',
+    });
+  } else {
+    await createDeploymentStatus({ state: 'pending' });
+  }
 
   startGroup('Building storybook');
   await exec('yarn build', {