Scramble

packages/scramble/index.js

@@ -0,0 +1,35 @@
+/**
+ * Run this command from directly in this folder.
+ * 
+ * This command scans file in the kibana repository with react-scanner, analyzing all component usage, and upload that usage
+ * to an Elastic instance.
+ * 
+ * To run this, you need to have this repository (the eui repository) checked out side by side.
+ * 
+ * The elasticsearch index will be called "eui_components"
+ * 
+ * Usage:
+ *   CLOUD_ID=****** AUTH_APIKEY=****** node index.js
+ * 
+ */
+
+const { scan } = require('./scan');
+
+const { Client } = require('@elastic/elasticsearch');
+const client = new Client({
+  cloud: {
+    id: process.env.CLOUD_ID
+  },
+  auth: {
+    apiKey: process.env.AUTH_APIKEY
+  }
+});
+
+const run = async () => {
+  const result = await scan();
+  const operations = result.flatMap(doc => [{ index: { _index: 'eui_components' } }, doc]);
+  const response = await client.bulk({ refresh: true, operations });
+  console.log(response);
+};
+
+run().catch((e) => console.error(e));

packages/scramble/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "eui-scramble",
+  "version": "0.1.0",
+  "description": "Scripts to collect analytics on EUI usage",
+  "dependencies": {
+    "@elastic/elasticsearch": "^8.14.0",
+    "codeowners": "^5.1.1",
+    "escodegen-wallaby": "^1.6.44",
+    "react-scanner": "^1.1.0"
+  }
+}

packages/scramble/scan.js

@@ -0,0 +1,110 @@
+const scanner = require('react-scanner');
+const escodegen = require("escodegen-wallaby");
+const Codeowners = require('codeowners');
+
+const codeowners = new Codeowners("../../../kibana");
+const path = require('path');
+const cwd = path.resolve(__dirname);
+
+const repos = {
+  kibana: {
+    crawlFrom: [
+      '../../../kibana/src',
+      '../../../kibana/x-pack',
+      '../../../kibana/packages',
+    ],
+  },
+  // TODO
+  //   cloud: {
+  //     crawlFrom: './cloud/cloud-ui/apps/monolith',
+  //   },
+  //   docsmobile: {
+  //     crawlFrom: './docsmobile/docsmobile/template',
+  //   },
+};
+
+const scannerConfig = {
+  rootDir: cwd,
+  exclude: ['node_modules', /^\.\w+/],
+  globs: ['**/!(*.test|*.spec|*.stories).{jsx,tsx}'],
+  includeSubComponents: true,
+  processors: ["raw-report"],
+  crawlFrom: './',
+  getPropValue: ({ node, propName, componentName, defaultGetPropValue }) => {
+    if (propName === "css" || propName === "style") {
+      if (node.type === "JSXExpressionContainer") {
+        try {
+          return escodegen.generate(node.expression);
+        } catch {
+          return defaultGetPropValue(node);
+        }
+
+      } else {
+        try {
+          return escodegen.generate(node);
+        } catch {
+          return defaultGetPropValue(node);
+        }
+      }
+    } else {
+      return defaultGetPropValue(node);
+    }
+  }
+};
+
+
+const scan = async () => {
+  let time = new Date();
+  let output = [];
+
+  await Promise.all(
+    Object.entries(repos).map(async ([repo, { crawlFrom }]) => {
+
+      await Promise.all(
+        crawlFrom.map(async (kibanaCrawlDirs) => {
+          let newOutput = await scanner.run({
+            ...scannerConfig,
+            crawlFrom: kibanaCrawlDirs,
+          });
+
+          newOutput = Object.entries(newOutput).flatMap(([componentName, value]) => {
+            return value.instances?.map((instance) => {
+              let fileName;
+              let sourceLocation;
+              let owners = [];
+
+              let regex = /\/kibana\/(.*)$/;
+              if (instance.location?.file) {
+                const result = regex.exec(instance.location.file);
+                fileName = result[0];
+                sourceLocation = `https://github.com/elastic/kibana/blob/main/${result[1]}#L${instance.location.start.line}`;
+                owners = codeowners.getOwner(result[1]);
+              }
+
+              return {
+                '@timestamp': time,
+                project: 'kibana',
+                scanDate: time,
+                component: componentName,
+                codeOwners: owners,
+                moduleName: instance.importInfo?.moduleName,
+                props: Object.entries(instance.props).map(([k, v]) => ({ propName: k, propValue: v })),
+                props_combined: Object.entries(instance.props).map(([k, v]) => (`${k}::${v}`)),
+                fileName,
+                sourceLocation,
+                lineNumber: instance.location?.start?.line,
+                lineColumn: instance.location?.start?.column,
+                repository: repo
+              };
+            });
+          });
+          output = output.concat(newOutput);
+        })
+      );
+    })
+  );
+
+  return output;
+};
+
+exports.scan = scan;

packages/scramble/test.js

@@ -0,0 +1,11 @@
+const Codeowners = require('codeowners');
+const temp = new Codeowners("../../../kibana");
+
+const { scan } = require('./scan');
+
+const runScan = async () => {
+  const scanResult = await scan();
+  console.log(scanResult);
+};
+
+runScan();