@elastic/synthetics 1.17.1 → 1.18.0

package/src/push/index.ts

@@ -24,7 +24,7 @@
  */
 import { readFile, writeFile } from 'fs/promises';
 import { prompt } from 'enquirer';
-import { bold, grey } from 'kleur/colors';
+import { bold, underline } from 'kleur/colors';
 import {
   getLocalMonitors,
   buildMonitorSchema,
@@ -57,8 +57,11 @@ import {
   isBulkAPISupported,
   isLightweightMonitorSupported,
   logDiff,
+  logGroups,
+  printBytes,
 } from './utils';
-import { log } from '../core/logger';
+import { runLocal } from './run-local';
+import { inDebugMode } from '../core/globals';
 
 export async function push(monitors: Monitor[], options: PushOptions) {
   if (parseInt(process.env.CHUNK_SIZE) > 250) {
@@ -84,7 +87,7 @@ export async function push(monitors: Monitor[], options: PushOptions) {
   const { monitors: remote } = await bulkGetMonitors(options);
 
   progress(`preparing ${monitors.length} monitors`);
-  const schemas = await buildMonitorSchema(monitors, true);
+  const { schemas, sizes } = await buildMonitorSchema(monitors, true);
   const local = getLocalMonitors(schemas);
 
   const { newIDs, changedIDs, removedIDs, unchangedIDs } = diffMonitorHashIDs(
@@ -92,6 +95,22 @@ export async function push(monitors: Monitor[], options: PushOptions) {
     remote
   );
   logDiff(newIDs, changedIDs, removedIDs, unchangedIDs);
+  if (inDebugMode()) {
+    logGroups(sizes, newIDs, changedIDs, removedIDs, unchangedIDs);
+    // show bundle size for the whole project
+    let totalSize = 0;
+    for (const value of sizes.values()) {
+      totalSize += value;
+    }
+    progress('total size of the monitors payload is ' + printBytes(totalSize));
+  }
+
+  if (options.dryRun) {
+    progress('Running browser monitors in dry run mode');
+    await runLocal(schemas);
+    progress('Dry run completed');
+    return;
+  }
 
   const updatedMonitors = new Set<string>([...changedIDs, ...newIDs]);
   if (updatedMonitors.size > 0) {
@@ -106,7 +125,6 @@ export async function push(monitors: Monitor[], options: PushOptions) {
   }
 
   if (removedIDs.size > 0) {
-    log(`deleting monitor ids: ${Array.from(removedIDs.keys()).join(', ')}`);
     if (updatedMonitors.size === 0 && unchangedIDs.size === 0) {
       await confirmDelete(
         `Pushing without any monitors will delete all monitors associated with the project.\n Do you want to continue?`,
@@ -126,8 +144,7 @@ export async function push(monitors: Monitor[], options: PushOptions) {
       );
     }
   }
-
-  done(`Pushed: ${grey(getMonitorManagementURL(options.url))}`);
+  done(`Pushed: ${underline(getMonitorManagementURL(options.url))} `);
 }
 
 async function confirmDelete(message: string, skip: boolean) {
@@ -223,8 +240,9 @@ export function validateSettings(opts: PushOptions) {
   - CLI '--schedule <mins>'
   - Config file 'monitors.schedule' field`;
   } else if (opts.schedule && !ALLOWED_SCHEDULES.includes(opts.schedule)) {
-    reason = `Set default schedule(${opts.schedule
-      }) to one of the allowed values - ${ALLOWED_SCHEDULES.join(',')}`;
+    reason = `Set default schedule(${
+      opts.schedule
+    }) to one of the allowed values - ${ALLOWED_SCHEDULES.join(',')}`;
   } else if (
     (opts.locations ?? []).length > 0 &&
     (opts?.playwrightOptions?.clientCertificates ?? []).filter(cert => {
@@ -301,7 +319,7 @@ export async function pushLegacy(monitors: Monitor[], options: PushOptions) {
   let schemas: MonitorSchema[] = [];
   if (monitors.length > 0) {
     progress(`preparing ${monitors.length} monitors`);
-    schemas = await buildMonitorSchema(monitors, false);
+    ({ schemas } = await buildMonitorSchema(monitors, false));
     const chunks = getChunks(schemas, 10);
     for (const chunk of chunks) {
       await liveProgress(
@@ -320,7 +338,7 @@ export async function pushLegacy(monitors: Monitor[], options: PushOptions) {
     `deleting all stale monitors`
   );
 
-  done(`Pushed: ${grey(getMonitorManagementURL(options.url))}`);
+  done(`Pushed: ${underline(getMonitorManagementURL(options.url))}`);
 }
 
 // prints warning if any of the monitors has throttling settings enabled during push

package/src/push/monitor.ts

@@ -42,6 +42,8 @@ import { isParamOptionSupported, normalizeMonitorName } from './utils';
 
 // Allowed extensions for lightweight monitor files
 const ALLOWED_LW_EXTENSIONS = ['.yml', '.yaml'];
+// 1500kB Max Gzipped limit for bundled monitor code to be pushed as Kibana project monitors.
+const SIZE_LIMIT_KB = 1500;
 
 export type MonitorSchema = Omit<MonitorConfig, 'locations'> & {
   locations: string[];
@@ -131,6 +133,7 @@ export async function buildMonitorSchema(monitors: Monitor[], isV2: boolean) {
   await mkdir(bundlePath, { recursive: true });
   const bundler = new Bundler();
   const schemas: MonitorSchema[] = [];
+  const sizes: Map<string, number> = new Map();
 
   for (const monitor of monitors) {
     const { source, config, filter, type } = monitor;
@@ -148,6 +151,17 @@ export async function buildMonitorSchema(monitors: Monitor[], isV2: boolean) {
       monitor.setContent(content);
       Object.assign(schema, { content, filter });
     }
+    const size = monitor.size();
+    const sizeKB = Math.round(size / 1000);
+    if (sizeKB > SIZE_LIMIT_KB) {
+      let outer = bold(
+        `Aborted: Bundled code ${sizeKB}kB exceeds the recommended ${SIZE_LIMIT_KB}kB limit. Please check the dependencies imported.\n`
+      );
+      const inner = `* ${config.id} - ${source.file}:${source.line}:${source.column}\n`;
+      outer += indent(inner);
+      throw red(outer);
+    }
+    sizes.set(config.id, size);
     /**
      * Generate hash only after the bundled content is created
      * to capture code changes in imported files
@@ -159,7 +173,7 @@ export async function buildMonitorSchema(monitors: Monitor[], isV2: boolean) {
   }
 
   await rm(bundlePath, { recursive: true });
-  return schemas;
+  return { schemas, sizes };
 }
 
 export async function createLightweightMonitors(
@@ -225,9 +239,7 @@ export async function createLightweightMonitors(
       const monitor = mergedConfig[i];
       // Skip browser monitors from the YML files
       if (monitor['type'] === 'browser') {
-        warn(
-          `Browser monitors from ${file} are skipped.`
-        );
+        warn(`Browser monitors from ${file} are skipped.`);
         continue;
       }
       const { line, col } = lineCounter.linePos(offsets[i]);

package/src/push/run-local.ts

@@ -0,0 +1,155 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2020-present, Elastic NV
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+import { execFileSync, spawn } from 'child_process';
+import { rm, writeFile } from 'fs/promises';
+import { createReadStream } from 'fs';
+import { tmpdir } from 'os';
+import { Extract } from 'unzip-stream';
+import { red } from 'kleur/colors';
+import { join } from 'path';
+import { pathToFileURL } from 'url';
+import { MonitorSchema } from './monitor';
+
+async function unzipFile(zipPath, destination) {
+  return new Promise<void>((resolve, reject) => {
+    createReadStream(zipPath)
+      .pipe(Extract({ path: destination }))
+      .on('close', resolve)
+      .on('error', err =>
+        reject(new Error(`failed to extract zip ${zipPath} : ${err.message}`))
+      );
+  });
+}
+
+async function runNpmInstall(directory) {
+  return new Promise<void>((resolve, reject) => {
+    const flags = [
+      '--no-audit', // Prevent audit checks
+      '--no-update-notifier', // Prevent update checks
+      '--no-fund', // No need for package funding messages here
+      '--package-lock=false', // no need to write package lock here
+      '--progress=false', // no need to display progress
+    ];
+
+    const npmInstall = spawn('npm', ['install', ...flags], {
+      cwd: directory,
+      stdio: 'ignore',
+    });
+    npmInstall.on('close', code => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`npm install failed with exit code ${code}`));
+      }
+    });
+    npmInstall.on('error', err =>
+      reject(new Error(`failed to setup: ${err.message}`))
+    );
+  });
+}
+
+async function runTest(directory, schema: MonitorSchema) {
+  return new Promise<void>((resolve, reject) => {
+    const runTest = spawn(
+      'npx',
+      [
+        '@elastic/synthetics',
+        '.',
+        '--playwright-options',
+        JSON.stringify(schema.playwrightOptions),
+        '--params',
+        JSON.stringify(schema.params),
+      ],
+      {
+        cwd: directory,
+        stdio: 'inherit',
+      }
+    );
+
+    runTest.on('close', resolve);
+    runTest.on('error', err => {
+      reject(
+        new Error(`Failed to execute @elastic/synthetics : ${err.message}`)
+      );
+    });
+  });
+}
+
+async function writePkgJSON(dir: string, synthPath: string) {
+  const packageJsonContent = {
+    name: 'project-journey',
+    private: 'true',
+    dependencies: {
+      '@elastic/synthetics': pathToFileURL(synthPath),
+    },
+  };
+  await writeFile(
+    join(dir, 'package.json'),
+    JSON.stringify(packageJsonContent, null, 2),
+    'utf-8'
+  );
+}
+
+async function extract(
+  schema: MonitorSchema,
+  zipPath: string,
+  unzipPath: string
+) {
+  if (schema.type !== 'browser') {
+    return;
+  }
+  const content = schema.content;
+  await writeFile(zipPath, content, 'base64');
+  await unzipFile(zipPath, unzipPath);
+}
+
+export async function runLocal(schemas: MonitorSchema[]) {
+  // lookup installed bin path of a node module
+  const resolvedPath = execFileSync('which', ['elastic-synthetics'], {
+    encoding: 'utf8',
+  }).trim();
+  const synthPath = resolvedPath.replace(
+    join('bin', 'elastic-synthetics'),
+    join('lib', 'node_modules', '@elastic/synthetics')
+  );
+  const rand = Date.now();
+  const zipPath = join(tmpdir(), `synthetics-zip-${rand}.zip`);
+  const unzipPath = join(tmpdir(), `synthetics-unzip-${rand}`);
+  try {
+    for (const schema of schemas) {
+      await extract(schema, zipPath, unzipPath);
+    }
+    await writePkgJSON(unzipPath, synthPath);
+    await runNpmInstall(unzipPath);
+    // TODO: figure out a way to collect all params and Playwright options
+    await runTest(unzipPath, schemas[0]);
+  } catch (e) {
+    throw red(`Aborted: ${e.message}`);
+  } finally {
+    await rm(zipPath, { recursive: true, force: true });
+    await rm(unzipPath, { recursive: true, force: true });
+  }
+}

package/src/push/utils.ts

@@ -25,7 +25,7 @@
 
 import semver from 'semver';
 import { progress, removeTrailingSlash } from '../helpers';
-import { green, red, grey, yellow } from 'kleur/colors';
+import { green, red, grey, yellow, Colorize, bold } from 'kleur/colors';
 import { PushOptions } from '../common_types';
 import { Monitor } from '../dsl/monitor';
 
@@ -37,13 +37,59 @@ export function logDiff<T extends Set<string>>(
 ) {
   progress(
     'Monitor Diff: ' +
-    green(`Added(${newIDs.size}) `) +
-    yellow(`Updated(${changedIDs.size}) `) +
-    red(`Removed(${removedIDs.size}) `) +
-    grey(`Unchanged(${unchangedIDs.size})`)
+      green(`Added(${newIDs.size}) `) +
+      yellow(`Updated(${changedIDs.size}) `) +
+      red(`Removed(${removedIDs.size}) `) +
+      grey(`Unchanged(${unchangedIDs.size})`)
   );
 }
 
+export function logGroups<T extends Set<string>>(
+  sizes: Map<string, number>,
+  newIDs: T,
+  changedIDs: T,
+  removedIDs: T,
+  unchangedIDs: T
+) {
+  console.groupCollapsed();
+  logGroup(sizes, 'Added', newIDs, green);
+  logGroup(sizes, 'Updated', changedIDs, yellow);
+  logGroup(sizes, 'Removed', removedIDs, red);
+  logGroup(sizes, 'Unchanged', unchangedIDs, grey);
+  console.groupEnd();
+}
+
+function logGroup(
+  sizes: Map<string, number>,
+  name: string,
+  ids: Set<string>,
+  color: Colorize
+) {
+  if (ids.size === 0) return;
+  // under collapsed group, so giving 2 space for padding
+  printLine(process.stdout.columns - 2);
+  console.groupCollapsed(color(bold(name)));
+  [...ids].forEach(id => {
+    console.log(grey(`- ${id} (${printBytes(sizes.get(id))})`));
+  });
+  console.groupEnd();
+}
+
+function printLine(length: number = process.stdout.columns) {
+  console.log(grey('-').repeat(length));
+}
+
+const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
+export function printBytes(bytes: number) {
+  if (bytes <= 0) return '0 B';
+  const exponent = Math.min(
+    Math.floor(Math.log10(bytes) / 3),
+    BYTE_UNITS.length - 1
+  );
+  bytes /= 1000 ** exponent;
+  return `${bytes.toFixed(1)} ${BYTE_UNITS[exponent]}`;
+}
+
 export function getChunks<T>(arr: Array<T>, size: number): Array<T[]> {
   const chunks = [];
   for (let i = 0; i < arr.length; i += size) {

package/src/reporters/base.ts

@@ -29,7 +29,11 @@ import { renderError, serializeError } from './reporter-util';
 import { symbols, indent, now } from '../helpers';
 import { Reporter, ReporterOptions } from '.';
 import { Journey, Step } from '../dsl';
-import { JourneyEndResult, JourneyStartResult, StepResult } from '../common_types';
+import {
+  JourneyEndResult,
+  JourneyStartResult,
+  StepResult,
+} from '../common_types';
 
 export function renderDuration(durationMs) {
   return parseInt(durationMs);
@@ -62,11 +66,11 @@ export default class BaseReporter implements Reporter {
     this.metrics.registered++;
   }
 
-  onJourneyStart(journey: Journey, { }: JourneyStartResult) {
+  onJourneyStart(journey: Journey, {}: JourneyStartResult) {
     this.write(`\nJourney: ${journey.name}`);
   }
 
-  onStepEnd(_: Journey, step: Step, { }: StepResult) {
+  onStepEnd(_: Journey, step: Step, {}: StepResult) {
     const { status, error } = step;
     const message = `${symbols[status]}  Step: '${step.name}' ${status} ${gray(
       '(' + renderDuration(step.duration * 1000) + ' ms)'
@@ -80,7 +84,7 @@ export default class BaseReporter implements Reporter {
   }
 
   /* eslint-disable @typescript-eslint/no-unused-vars */
-  onJourneyEnd(journey: Journey, { }: JourneyEndResult) {
+  onJourneyEnd(journey: Journey, {}: JourneyEndResult) {
     const { failed, succeeded, skipped } = this.metrics;
     const total = failed + succeeded + skipped;
     /**

package/src/reporters/build_kite_cli.ts

@@ -43,7 +43,7 @@ export default class BuildKiteCLIReporter extends BaseReporter {
     super(options);
   }
 
-  override onJourneyStart(journey: Journey, { }: JourneyStartResult) {
+  override onJourneyStart(journey: Journey, {}: JourneyStartResult) {
     this.write(`\n--- Journey: ${journey.name}`);
   }
 
@@ -57,7 +57,9 @@ export default class BuildKiteCLIReporter extends BaseReporter {
 
   override async onJourneyEnd(journey: Journey, result: JourneyEndResult) {
     super.onJourneyEnd(journey, result);
-    const message = `${symbols[journey.status]} Took (${renderDuration(journey.duration)} seconds)`;
+    const message = `${symbols[journey.status]} Took (${renderDuration(
+      journey.duration
+    )} seconds)`;
     this.write(message);
   }
 
@@ -76,10 +78,9 @@ export default class BuildKiteCLIReporter extends BaseReporter {
           const name = red(`Journey: ${journeyName} :slightly_frowning_face:`);
           this.write(`\n+++ ${name}`);
           steps.forEach(step => {
-            const message = `${symbols[step.status]
-              }  Step: '${step.name}' ${step.status} (${renderDuration(
-                step.duration * 1000
-              )} ms)`;
+            const message = `${symbols[step.status]}  Step: '${step.name}' ${
+              step.status
+            } (${renderDuration(step.duration * 1000)} ms)`;
             this.write(indent(message));
             if (step.error) {
               this.write(renderError(serializeError(step.error)));

package/src/reporters/json.ts

@@ -253,14 +253,15 @@ function formatJSONError(error: Error | any) {
   };
 }
 
-function journeyInfo(
-  journey: Partial<Journey>,
-  type: OutputFields['type'],
-) {
+function journeyInfo(journey: Partial<Journey>, type: OutputFields['type']) {
   if (!journey) {
     return;
   }
-  const info: JourneyInfo = { name: journey.name, id: journey.id, tags: journey.tags };
+  const info: JourneyInfo = {
+    name: journey.name,
+    id: journey.id,
+    tags: journey.tags,
+  };
   const isEnd = type === 'journey/end';
   if (isEnd) {
     info.status = journey.status;
@@ -271,7 +272,7 @@ function journeyInfo(
 
 function stepInfo(
   step: Partial<Step>,
-  type: OutputFields['type'],
+  type: OutputFields['type']
 ): Omit<Partial<Step>, 'duration'> & Duration {
   if (!step) {
     return;
@@ -375,8 +376,8 @@ export default class JSONReporter extends BaseReporter {
       },
       payload: event.networkConditions
         ? {
-          network_conditions: event.networkConditions,
-        }
+            network_conditions: event.networkConditions,
+          }
         : undefined,
     });
   }
@@ -400,12 +401,7 @@ export default class JSONReporter extends BaseReporter {
   override onStepEnd(
     journey: Journey,
     step: Step,
-    {
-      pagemetrics,
-      traces,
-      metrics,
-      filmstrips,
-    }: StepEndResult
+    { pagemetrics, traces, metrics, filmstrips }: StepEndResult
   ) {
     this.writeMetrics(journey, step, 'relative_trace', traces);
     this.writeMetrics(journey, step, 'experience', metrics);

package/src/reporters/junit.ts

@@ -25,10 +25,7 @@
 
 import { mkdir, writeFile } from 'fs/promises';
 import { dirname } from 'path';
-import {
-  JourneyEndResult,
-  JourneyStartResult,
-} from '../common_types';
+import { JourneyEndResult, JourneyStartResult } from '../common_types';
 import { Journey, Step } from '../dsl';
 import { indent, now } from '../helpers';
 import BaseReporter from './base';
@@ -59,7 +56,7 @@ export default class JUnitReporter extends BaseReporter {
   private totalSkipped = 0;
   #journeyMap = new Map<string, XMLEntry>();
 
-  override onJourneyStart(journey: Journey, { }: JourneyStartResult) {
+  override onJourneyStart(journey: Journey, {}: JourneyStartResult) {
     if (!this.#journeyMap.has(journey.name)) {
       const entry = {
         name: 'testsuite',
@@ -76,10 +73,7 @@ export default class JUnitReporter extends BaseReporter {
     }
   }
 
-  override onStepEnd(
-    journey: Journey,
-    step: Step,
-  ) {
+  override onStepEnd(journey: Journey, step: Step) {
     if (!this.#journeyMap.has(journey.name)) {
       return;
     }
@@ -117,7 +111,7 @@ export default class JUnitReporter extends BaseReporter {
     entry.children.push(caseEntry);
   }
 
-  override onJourneyEnd(journey: Journey, { }: JourneyEndResult) {
+  override onJourneyEnd(journey: Journey, {}: JourneyEndResult) {
     if (!this.#journeyMap.has(journey.name)) {
       return;
     }