feat: Frontend Enhancement (#165)

salesforce · Jul 2, 2019 · 788844d · 788844d
1 parent 0bd8075
commit 788844d
Show file tree

Hide file tree

Showing 53 changed files with 1,293 additions and 415 deletions.
diff --git a/packages/@best/api-db/src/sql/db.ts b/packages/@best/api-db/src/sql/db.ts
@@ -19,7 +19,7 @@ export abstract class SQLDatabase {
     abstract query(text: string, params: any[]): Promise<SQLQueryResult>
 
     fetchProjects(): Promise<SQLQueryResult> {
-        return this.query('SELECT * FROM projects', [])
+        return this.query('SELECT * FROM projects ORDER BY created_at', [])
     }
 
     fetchSnapshots(projectId: number, since: Date | undefined): Promise<SQLQueryResult> {

diff --git a/packages/@best/frontend/package.json b/packages/@best/frontend/package.json
@@ -8,9 +8,9 @@
         "@best/github-integration": "4.0.0",
         "@best/types": "4.0.0",
         "@lwc/rollup-plugin": "^1.0.0",
+        "apicache": "^1.4.0",
         "compression": "^1.7.4",
         "express": "^4.17.1",
-        "helmet": "^3.18.0",
         "lwc-services": "^1",
         "query-string": "^6.6.0",
         "redux": "^4.0.1",
@@ -22,11 +22,14 @@
         "rollup-plugin-terser": "^5.0.0"
     },
     "devDependencies": {
+        "@types/apicache": "^1.2.0",
         "@types/compression": "^0.0.36",
         "@types/express": "^4.16.1",
         "@types/helmet": "^0.0.43",
         "concurrently": "^4.1.0",
+        "fetch-mock": "^7.3.3",
         "nodemon": "^1.19.1",
+        "redux-mock-store": "^1.5.3",
         "ts-node": "^8.2.0"
     },
     "engines": {

diff --git a/packages/@best/frontend/server/api.ts b/packages/@best/frontend/server/api.ts
@@ -1,4 +1,5 @@
-import { Router } from 'express'
+import { Router, RequestHandler } from 'express'
+import apicache from 'apicache'
 import { loadDbFromConfig } from '@best/api-db'
 import { GithubApplicationFactory } from '@best/github-integration'
 import { FrontendConfig } from '@best/types';
@@ -7,7 +8,11 @@ export default (config: FrontendConfig): Router => {
     const db = loadDbFromConfig(config);
     const router = Router()
 
-    router.get('/info/:commit', async (req, res): Promise<void> => {
+    let cache = apicache.middleware;
+    const onlyStatus200: RequestHandler = (req, res): boolean => res.statusCode === 200;
+    const cacheSuccesses = cache('2 minutes', onlyStatus200);
+
+    router.get('/info/:commit', cacheSuccesses, async (req, res): Promise<void> => {
         const { commit } = req.params;
 
         if (config.githubConfig) {
@@ -47,7 +52,7 @@ export default (config: FrontendConfig): Router => {
         }
     })
 
-    router.get('/projects', async (req, res): Promise<void> => {
+    router.get('/projects', cacheSuccesses, async (req, res): Promise<void> => {
         try {
             await db.migrate()
 
@@ -61,7 +66,7 @@ export default (config: FrontendConfig): Router => {
         }
     })
 
-    router.get('/:project/snapshots', async (req, res): Promise<void> => {
+    router.get('/:project/snapshots', cacheSuccesses, async (req, res): Promise<void> => {
         const { project } = req.params
         const { since } = req.query
 

diff --git a/packages/@best/frontend/server/index.ts b/packages/@best/frontend/server/index.ts
@@ -1,5 +1,4 @@
 import express from 'express'
-import helmet from 'helmet'
 import compression from 'compression'
 import * as path from 'path'
 import { FrontendConfig } from '@best/types';
@@ -17,7 +16,6 @@ export const Frontend = (config: FrontendConfig): express.Application => {
 
     const app: express.Application = express()
 
-    app.use(helmet())
     app.use(compression())
 
     // API

diff --git a/packages/@best/frontend/src/index.html b/packages/@best/frontend/src/index.html
@@ -5,18 +5,17 @@
         <title>Best Performance</title>
         <style>
             body {
-                font-family: Arial, Helvetica, sans-serif;
+                font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
                 margin: 0;
             }
             html, body {
                 min-height: 100vh;
             }
         </style>
         <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <link rel="shortcut icon" href="/resources/favicon.ico" />
         <script src="https://cdn.plot.ly/plotly-1.48.1.min.js"></script>
     </head>
     <body>
-        <my-app></my-app>
+        <view-app></view-app>
     </body>
 </html>
diff --git a/packages/@best/frontend/src/index.js b/packages/@best/frontend/src/index.js
@@ -1,8 +1,8 @@
 import { buildCustomElementConstructor, register } from 'lwc';
 import { registerWireService } from '@lwc/wire-service';
 
-import MyApp from 'my/app';
+import App from 'view/app';
 
 registerWireService(register);
 
-customElements.define('my-app', buildCustomElementConstructor(MyApp));
+customElements.define('view-app', buildCustomElementConstructor(App));
diff --git a/...end/src/modules/component/graph/graph.css → ...modules/component/benchmark/benchmark.css b/...end/src/modules/component/graph/graph.css → ...modules/component/benchmark/benchmark.css
@@ -1,29 +1,46 @@
+.header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-/*
- * We need to have this css here from the Plotly library because otherwise the shadow dom
- * restricts this css from applying to our graphs.
-*/
+    position: relative;
+    margin: 0 50px;
+    margin-bottom: 5px;
 
-.js-plotly-plot .plotly, .js-plotly-plot .plotly div {
-    font-family:'Open Sans', verdana, arial, sans-serif;
-    margin:0;
-    padding:0;
+    z-index: 1;
 }
 
-.js-plotly-plot .plotly input, .js-plotly-plot .plotly button {
-    font-family:'Open Sans', verdana, arial, sans-serif;
+.title {
+    margin: 0;
+    text-align: center;
+    font-weight: normal;
 }
 
-.js-plotly-plot .plotly input:focus,.js-plotly-plot .plotly button:focus {
-    outline:none;
+.compare-actions {
+    position: absolute;
+    right: 0;
 }
 
-.js-plotly-plot .plotly a {
-    text-decoration:none;
+.compare-actions > * {
+    margin: 0 10px;
 }
 
-.js-plotly-plot .plotly a:hover {
-    text-decoration:none;
+.container[data-first="true"] .graph-wrapper {
+    height: 460px;
+}
+
+.container[data-first="false"] .graph-wrapper {
+    height: 400px;
+}
+
+/*
+ * We need to have this css here from the Plotly library because otherwise the shadow dom
+ * restricts this css from applying to our graphs.
+*/
+
+.js-plotly-plot .plotly, .js-plotly-plot .plotly div {
+    margin:0;
+    padding:0;
 }
 
 .js-plotly-plot .plotly .crisp {
@@ -125,71 +142,6 @@
     cursor:ne-resize;
 }
 
-.js-plotly-plot .plotly .modebar {
-    position:absolute;
-    top:2px;
-    right:2px;
-    z-index:1001;
-    background:rgba(255,255,255,0.7);
-}
-
-.js-plotly-plot .plotly .modebar--hover {
-    opacity:0;
-    -webkit-transition:opacity 0.3s ease 0s;
-    -moz-transition:opacity 0.3s ease 0s;
-    -ms-transition:opacity 0.3s ease 0s;
-    -o-transition:opacity 0.3s ease 0s;
-    transition:opacity 0.3s ease 0s;
-}
-
-.js-plotly-plot .plotly:hover .modebar--hover {
-    opacity:1;
-}
-
-.js-plotly-plot .plotly .modebar-group {
-    float:left;
-    display:inline-block;
-    box-sizing:border-box;
-    margin-left:8px;
-    position:relative;
-    vertical-align:middle;
-    white-space:nowrap;
-}
-
-.js-plotly-plot .plotly .modebar-group:first-child {
-    margin-left:0px;
-}
-
-.js-plotly-plot .plotly .modebar-btn {
-    position:relative;
-    font-size:16px;
-    padding:3px 4px;
-    cursor:pointer;
-    line-height:normal;
-    box-sizing:border-box;
-}
-
-.js-plotly-plot .plotly .modebar-btn svg {
-    position:relative;
-    top:2px;
-}
-
-.js-plotly-plot .plotly .modebar-btn path {
-    fill:rgba(0,31,95,0.3);
-}
-
-.js-plotly-plot .plotly .modebar-btn.active path,.js-plotly-plot .plotly .modebar-btn:hover path {
-    fill:rgba(0,22,72,0.5);
-}
-
-.js-plotly-plot .plotly .modebar-btn.modebar-btn--logo {
-    padding:3px 1px;
-}
-
-.js-plotly-plot .plotly .modebar-btn.modebar-btn--logo path {
-    fill:#447adb !important;
-}
-
 .js-plotly-plot .plotly [data-title]:before,.js-plotly-plot .plotly [data-title]:after {
     position:absolute;
     -webkit-transform:translate3d(0, 0, 0);
@@ -246,48 +198,4 @@
 .js-plotly-plot .plotly .select-outline-2 {
     stroke:black;
     stroke-dasharray:2px 2px;
-}
-
-.plotly-notifier {
-    font-family:'Open Sans';
-    position:fixed;
-    top:50px;
-    right:20px;
-    z-index:10000;
-    font-size:10pt;
-    max-width:180px;
-}
-
-.plotly-notifier p {
-    margin:0;
-}
-
-.plotly-notifier .notifier-note {
-    min-width:180px;
-    max-width:250px;
-    border:1px solid #fff;
-    z-index:3000;
-    margin:0;
-    background-color:#8c97af;
-    background-color:rgba(140,151,175,0.9);
-    color:#fff;
-    padding:10px;
-}
-
-.plotly-notifier .notifier-close {
-    color:#fff;
-    opacity:0.8;
-    float:right;
-    padding:0 5px;
-    background:none;
-    border:none;
-    font-size:20px;
-    font-weight:bold;
-    line-height:20px;
-}
-
-.plotly-notifier .notifier-close:hover {
-    color:#444;
-    text-decoration:none;
-    cursor:pointer;
 }
diff --git a/packages/@best/frontend/src/modules/component/benchmark/benchmark.html b/packages/@best/frontend/src/modules/component/benchmark/benchmark.html
@@ -0,0 +1,26 @@
+<template>
+    <div class={containerClassNames} data-metric={metric} data-first={first}>
+        <div class="header">
+            <h1 class="title">{benchmark.name}</h1>
+            <template if:true={comparing}>
+                <div class="compare-actions">
+                    <component-button flavor="close" onclick={cancelComparison}>Cancel</component-button>
+                    <component-button onclick={runComparison}>Compare</component-button>
+                </div>
+            </template>
+        </div>
+        <template for:each={selectedPoints} for:item="point">
+            <component-commit-info key={point.commit} hidden={point.hidden} pendingcompare={point.pendingCompare} commit={point.commit} left={point.left} top={point.top} oncompare={onCompareClick} onclose={closeCommitInfo}></component-commit-info>
+        </template>
+        <div class="graph-wrapper">
+            <div class="graph" lwc:dom="manual"></div>
+        </div>
+        <template if:true={showingComparison}>
+            <component-modal onclose={closeModal} title={comparisonModalTitle}>
+                <template if:true={hasComparisonResults}>
+                    <div class="comparison-graph" lwc:dom="manual"></div>
+                </template>
+            </component-modal>
+        </template>
+    </div>
+</template>