feat: New Frontend Dashboard

package.json

@@ -28,6 +28,7 @@
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
     "@types/express": "^4.17.0",
+    "@types/globby": "^9.1.0",
     "@types/jest": "^24.0.13",
     "@types/json2md": "^1.5.0",
     "@types/micromatch": "^3.1.0",
@@ -51,8 +52,8 @@
     "lerna": "^3.14.1",
     "prettier": "^1.17.1",
     "rimraf": "^2.6.3",
-    "typescript": "^3.5.1",
-    "ts-jest": "^24.0.2"
+    "ts-jest": "^24.0.2",
+    "typescript": "^3.5.1"
   },
   "config": {
     "commitizen": {

packages/@best/api-db/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": "../../../.eslintrc",
+    "rules": {
+        "@typescript-eslint/camelcase": "off"
+    }
+}

packages/@best/api-db/README.md

@@ -0,0 +1,13 @@
+# API DB
+
+This is the database adapter that the frontend uses to display results. The results are stored whenever a benchmark is run.
+
+There is an associated Postgres db which is the only type of database currently supported. In the future we could add more supported databases.
+
+## Migrations
+
+In order to run the migrations required for the database you can run the following command:
+
+```
+yarn migrate up
+```

packages/@best/api-db/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@best/api-db",
+    "version": "0.7.1",
+    "author": "Jason Silberman",
+    "dependencies": {
+        "node-pg-migrate": "^3.21.1",
+        "pg": "^7.11.0"
+    },
+    "devDependencies": {
+        "@types/pg": "^7.4.14"
+    },
+    "main": "build/index.js",
+    "scripts": {
+        "migrate": "node-pg-migrate -m src/migrations"
+    }
+}

packages/@best/api-db/src/db.ts

@@ -0,0 +1,21 @@
+import { Pool, QueryResult } from 'pg'
+
+const pool = new Pool()
+
+export default {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    query: (text: string, params: any[]): Promise<QueryResult> => {
+        console.warn('[DB] Directly using db.query is discouraged.')
+        return pool.query(text, params)
+    },
+    fetchProjects: (): Promise<QueryResult> => {
+        return pool.query('SELECT * FROM projects')
+    },
+    fetchSnapshots: (projectId: number, since: string): Promise<QueryResult> => {
+        if (since) {
+            return pool.query('SELECT * FROM snapshots WHERE "project_id" = $1 and "commit_date" > $2 ORDER BY commit_date, name', [projectId, since])
+        }
+
+        return pool.query('SELECT * FROM snapshots WHERE "project_id" = $1 ORDER BY commit_date, name', [projectId])
+    }
+}

packages/@best/api-db/src/index.ts

@@ -0,0 +1,4 @@
+import PostgresDB from './postgres';
+import saveBenchmarkSummaryInDB from './store';
+
+export { PostgresDB, saveBenchmarkSummaryInDB }

packages/@best/api-db/src/migrations/1559599488979_setup-projects.js

@@ -0,0 +1,17 @@
+exports.shorthands = undefined;
+
+exports.up = pgm => {
+    pgm.createTable('projects', {
+        id: 'id',
+        name: { type: 'varchar(100)', notNull: true },
+        created_at: {
+            type: 'timestamp',
+            notNull: true,
+            default: pgm.func('current_timestamp'),
+        },
+    });
+};
+
+exports.down = pgm => {
+    pgm.dropTable('projects');
+};

packages/@best/api-db/src/migrations/1559600258932_benchmark-snapshot.js

@@ -0,0 +1,34 @@
+exports.shorthands = undefined;
+
+exports.up = pgm => {
+    pgm.createTable('snapshots', {
+        id: 'id',
+        project_id: {
+            type: 'integer',
+            notNull: true,
+            references: '"projects"',
+            onDelete: 'cascade',
+        },
+        name: { type: 'varchar(200)', notNull: true },
+        metrics: { type: 'varchar(2000)', notNull: true },
+        environment_hash: { type: 'varchar(100)', notNull: true },
+        similarity_hash: { type: 'varchar(100)', notNull: true },
+        commit: { type: 'varchar(100)', notNull: true },
+        commit_date: {
+            type: 'timestamp',
+            notNull: true,
+        },
+        created_at: {
+            type: 'timestamp',
+            notNull: true,
+            default: pgm.func('current_timestamp'),
+        },
+        temporary: 'boolean',
+    });
+
+    pgm.createIndex('snapshots', 'project_id');
+};
+
+exports.down = pgm => {
+    pgm.dropTable('snapshots');
+};

packages/@best/api-db/src/migrations/1559603549891_add-updated-at.js

@@ -0,0 +1,11 @@
+exports.shorthands = undefined;
+
+exports.up = pgm => {
+    pgm.addColumns('snapshots', {
+        updated_at: {
+            type: 'timestamp',
+            notNull: true,
+            default: pgm.func('current_timestamp'),
+        },
+    });
+};

packages/@best/api-db/src/migrations/1559770417215_project-last-release.js

@@ -0,0 +1,9 @@
+exports.shorthands = undefined;
+
+exports.up = pgm => {
+    pgm.addColumns('projects', {
+        last_release_date: {
+            type: 'timestamp',
+        },
+    });
+};

packages/@best/api-db/src/postgres.ts

@@ -0,0 +1,23 @@
+import { ApiDB, Project, TemporarySnapshot, Snapshot } from './types';
+import db from './db';
+import transformer from './transformer';
+
+export default class PostgresDB extends ApiDB {
+    async fetchProjects(): Promise<Project[]> {
+        const results = await db.fetchProjects()
+
+        return transformer.projects(results)
+    }
+
+    async fetchSnapshots(projectId: number, since: string): Promise<Snapshot[]> {
+        const results = await db.fetchSnapshots(projectId, since)
+
+        return transformer.snapshots(results)
+    }
+
+    async saveSnapshots(snapshots: TemporarySnapshot[], projectName: string): Promise<Snapshot[]> {
+        // TODO: implement saving into database
+        // TODO: figure out if we want some type of unique-ness or want to add indexes
+        return [];
+    }
+}

packages/@best/api-db/src/store.ts

@@ -0,0 +1,63 @@
+import crypto from 'crypto';
+import PostgresDB from './postgres';
+import { TemporarySnapshot } from './types';
+
+function md5(data: string) {
+    return crypto
+        .createHash('md5')
+        .update(data)
+        .digest('hex');
+}
+
+export default (benchmarkResults: any, globalConfig: any) => {
+    const db = new PostgresDB();
+    return Promise.all(
+        benchmarkResults.map(async (benchmarkResult: any) => {
+            const { benchmarkSignature, projectConfig, environment, stats } = benchmarkResult;
+            const { projectName } = projectConfig;
+            const { gitCommit, gitLocalChanges } = globalConfig;
+
+            const snapshotEnvironment = {
+                hardware: environment.hardware,
+                browser: environment.browser
+            }
+
+            const environmentHash = md5(JSON.stringify(snapshotEnvironment));
+
+            const runSettings = {
+                similarityHash: benchmarkSignature,
+                commit: gitCommit,
+                // TODO: get commit date from github API
+                commitDate: (new Date()).toISOString(),
+                environmentHash,
+                // TODO: not sure if this is exactly what we want to determine here 
+                temporary: !gitLocalChanges
+            }
+
+            const snapshotsToSave: TemporarySnapshot[] = [];
+
+            stats.benchmarks.forEach((element: any) => {
+                element.benchmarks.forEach((bench: any) => {
+                    const metricKeys = Object.keys(bench).filter(key => key !== 'name')
+                    const metrics = metricKeys.map(name => ({
+                        name,
+                        duration: bench[name].median,
+                        stdDeviation: bench[name].medianAbsoluteDeviation,
+                    }))
+
+                    const snapshot = {
+                        ...runSettings,
+                        name: `${element.name}/${bench.name}`,
+                        metrics: metrics
+                    }
+                    snapshotsToSave.push(snapshot);
+
+                });
+            });
+
+            const snapshots = await db.saveSnapshots(snapshotsToSave, projectName);
+            console.log(snapshots);
+
+        }),
+    );
+}

packages/@best/api-db/src/transformer.ts

@@ -0,0 +1,36 @@
+import { QueryResult } from 'pg';
+import { Project, Snapshot, Metric } from './types';
+
+const normalizeMetrics = (metrics: any): Metric[] => {
+    return Object.keys(metrics).map((key): Metric => ({
+        name: key,
+        duration: metrics[key][0],
+        stdDeviation: metrics[key][1]
+    }));
+};
+
+export default {
+    projects: (query: QueryResult): Project[] => {
+        return query.rows.map((row): Project => ({
+            id: row.id,
+            name: row.name,
+            createdAt: row.created_at,
+            lastReleaseDate: row.last_release_date
+        }));
+    },
+    snapshots: (query: QueryResult): Snapshot[] => {
+        return query.rows.map((row): Snapshot => ({
+            id: row.id,
+            projectId: row.project_id,
+            name: row.name,
+            metrics: normalizeMetrics(JSON.parse(row.metrics)),
+            environmentHash: row.environment_hash,
+            similarityHash: row.similarity_hash,
+            commit: row.commit,
+            commitDate: row.commit_date,
+            temporary: row.temporary,
+            createdAt: row.created_at,
+            updatedAt: row.updated_at
+        }));
+    }
+};

packages/@best/api-db/src/types.ts

@@ -0,0 +1,35 @@
+export interface Project {
+    id: number;
+    name: string;
+    createdAt: string;
+    lastReleaseDate: string;
+}
+
+export interface Metric {
+    name: string;
+    duration: number;
+    stdDeviation: number;
+}
+
+export interface TemporarySnapshot {
+    name: string;
+    metrics: Metric[];
+    environmentHash: string;
+    similarityHash: string;
+    commit: string;
+    commitDate: string;
+    temporary: boolean;
+}
+
+export interface Snapshot extends TemporarySnapshot {
+    id: number;
+    projectId: number;
+    createdAt: string;
+    updatedAt: string;
+}
+
+export abstract class ApiDB {
+    abstract fetchProjects(): Promise<Project[]>;
+    abstract fetchSnapshots(projectId: number, since: string): Promise<Snapshot[]>;
+    abstract saveSnapshots(snapshots: TemporarySnapshot[], projectName: string): Promise<Snapshot[]>;
+}

packages/@best/api-db/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../../tsconfig.settings.json",
+    "compilerOptions": {
+      "rootDir": "src",
+      "outDir": "build",
+    }
+  }
+

packages/@best/cli/package.json

@@ -9,6 +9,7 @@
   "main": "build/index.js",
   "dependencies": {
     "@best/analyzer": "0.7.1",
+    "@best/api-db": "0.7.1",
     "@best/build": "0.7.1",
     "@best/compare": "0.7.1",
     "@best/config": "0.7.1",

packages/@best/cli/src/run_best.ts

@@ -3,6 +3,7 @@ import { buildBenchmarks } from '@best/builder';
 import { runBenchmarks } from '@best/runner';
 import { BuildStateMessager, RunnerMessager } from '@best/messager';
 import { storeBenchmarkResults } from '@best/store';
+import { saveBenchmarkSummaryInDB } from '@best/api-db';
 import { analyzeBenchmarks } from '@best/analyzer';
 import path from 'path';
 import micromatch from 'micromatch';
@@ -108,6 +109,7 @@ export async function runBest(globalConfig: any, configs: any, outputStream: any
 
     await analyzeBenchmarks(benchmarkBundleResults);
     await storeBenchmarkResults(benchmarkBundleResults, globalConfig);
+    await saveBenchmarkSummaryInDB(benchmarkBundleResults, globalConfig);
 
     return benchmarkBundleResults;
 }

packages/@best/cli/tsconfig.json

@@ -6,6 +6,7 @@
   },
   "references": [
     { "path": "../analyzer" },
+    { "path": "../api-db" },
     { "path": "../builder" },
     { "path": "../compare" },
     { "path": "../config" },

packages/@best/frontend/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "extends": ["@salesforce/eslint-config-lwc/recommended", "plugin:@typescript-eslint/recommended", "plugin:eslint-comments/recommended"],
+    "rules": {
+        "@lwc/lwc/no-async-operation": "warn",
+        "@lwc/lwc/no-inner-html": "warn",
+        "@lwc/lwc/no-document-query": "warn",
+        "@typescript-eslint/camelcase": "off"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018
+    }
+}