Add statements page

.eslintignore

@@ -3,3 +3,4 @@ dist/
 node_modules
 README.md
 *.scss
+src/js

.jest/fileMock.js

@@ -0,0 +1 @@
+module.exports = '';

.storybook/main.js

@@ -1,19 +1,22 @@
+const path = require("path");
 const appConfig = require("../webpack.config");
 
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
   addons: ['@storybook/addon-actions', '@storybook/addon-links'],
   webpackFinal: async config => {
-    config.module.rules.push(appConfig.module.rules[0]);
-    config.module.rules.push(appConfig.module.rules[1]);
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      loader: require.resolve('babel-loader'),
-      options: {
-        presets: [['react-app', { flow: false, typescript: true }]],
+    config.module.rules = [
+      {
+        test: /\.(ts|tsx)$/,
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: [['react-app', { flow: false, typescript: true }]],
+        },
       },
-    });
+      ...appConfig.module.rules,
+    ]
     config.resolve.extensions.push('.ts', '.tsx');
+    config.resolve.alias.src = path.resolve(__dirname, "../src")
     return config;
   },
 };

jest.testing.config.js

@@ -2,8 +2,9 @@ module.exports = {
   displayName: "test",
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   moduleNameMapper: {
-    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
-    "\\.(css|scss)$": "identity-obj-proxy",
+    "\\.(jpg|ico|jpeg|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
+    "\\.(css|scss|less)$": "identity-obj-proxy",
+    "\\.(gif|png)$": "<rootDir>/.jest/fileMock.js",
   },
   "moduleDirectories": [
     ".",

package.json

@@ -18,7 +18,7 @@
     "lint": "eslint './src/**/*.{tsx,ts,js}' --format=codeframe",
     "prepublishOnly": "npm-run-all clean build",
     "test": "jest --watch",
-    "start": "npm run build:watch",
+    "start": "yarn run build:watch",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -27,8 +27,11 @@
   "dependencies": {
     "@cockroachlabs/icons": "^0.2.2",
     "@popperjs/core": "^2.4.0",
+    "d3": "<4.0.0",
     "long": "^4.0.0",
+    "react-helmet": "^5.2.0",
     "react-popper": "^2.2.3",
+    "react-select": "^1.2.1",
     "reselect": "^4.0.0"
   },
   "devDependencies": {
@@ -46,12 +49,16 @@
     "@storybook/react": "^5.3.19",
     "@types/chai": "^4.2.11",
     "@types/classnames": "^2.2.9",
+    "@types/d3": "<4.0.0",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.2",
     "@types/lodash": "^4.14.149",
     "@types/long": "^4.0.1",
     "@types/node": "^13.7.0",
     "@types/react": "^16.9.17",
+    "@types/react-helmet": "^5.0.5",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/react-select": "^1.2.6",
     "@types/reselect": "^2.2.0",
     "@types/sinon": "^9.0.4",
     "@typescript-eslint/eslint-plugin": "^2.19.2",
@@ -75,11 +82,14 @@
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",
     "jest-runner-eslint": "^0.7.6",
+    "less": "^3.12.2",
+    "less-loader": "^6.2.0",
     "node-sass": "^4.13.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-router-dom": "^5.2.0",
     "sass-loader": "^8.0.2",
     "sinon": "^9.0.2",
     "source-map-loader": "^0.2.4",
@@ -93,6 +103,7 @@
   },
   "peerDependencies": {
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2"
   }
 }

src/badge/badge.module.scss

@@ -0,0 +1,76 @@
+@import '../core/index.module.scss';
+
+.badge {
+  display: flex;
+  flex-direction: row;
+  border-radius: 3px;
+  text-transform: uppercase;
+  width: max-content;
+  padding: $spacing-xx-small $spacing-x-small;
+  cursor: default;
+}
+
+.badge--size-small, 
+
+.badge--size-large, 
+
+.badge--size-medium {
+  height: $line-height--medium;
+  font-size: $font-size--small;
+  font-weight: $font-weight--medium;
+  line-height: $line-height--xx-small;
+  letter-spacing: 1.5px;
+}
+
+.badge--status-success {
+  color: $colors--primary-green-3;
+  background-color: $colors--primary-green-1;
+  border-radius: 3px;
+}
+
+.badge--status-danger {
+  color: $colors--functional-red-4;
+  background-color: $colors--functional-red-1;
+  background: $colors--functional-red-1;
+}
+
+.badge--status-default {
+  background-color: $colors--neutral-2;
+  color: $colors--neutral-6;
+}
+
+.badge--status-info {
+  color: $colors--primary-blue-4;
+  background-color: $colors--primary-blue-1;
+}
+
+.badge--status-warning {
+  color: $colors--functional-orange-4;
+  background-color: $colors--functional-orange-1;
+}
+
+.badge__icon {
+  margin: 0 $spacing-base;
+}
+
+.badge__icon--position-left {
+  order: 0;
+  margin-right: $spacing-x-small;
+}
+
+.badge__icon--position-right {
+  order: 2;
+  margin-left: $spacing-x-small;
+}
+
+.badge__text {
+  order: 1;
+  margin: auto;
+  font-family: $font-family--semi-bold;
+}
+
+.badge__text--no-wrap {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/badge/badge.stories.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Badge } from "./index";
+
+storiesOf("Badge", module)
+  .add("with small size", () => <Badge size="small" text="Small size badge" />)
+  .add("with medium (default) size", () => (
+    <Badge size="small" text="Medium (default) size badge" />
+  ))
+  .add("with large size", () => <Badge size="large" text="Large size badge" />);

src/badge/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import classNames from "classnames/bind";
+
+import styles from "./badge.module.scss";
+
+export type BadgeStatus = "success" | "danger" | "default" | "info" | "warning";
+
+export interface BadgeProps {
+  text: React.ReactNode;
+  size?: "small" | "medium" | "large";
+  status?: BadgeStatus;
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right";
+}
+
+const cx = classNames.bind(styles);
+
+export function Badge(props: BadgeProps) {
+  const { size, status, icon, iconPosition, text } = props;
+  const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`);
+  const iconClasses = cx(
+    "badge__icon",
+    `badge__icon--position-${iconPosition || "left"}`,
+  );
+  return (
+    <div className={classes}>
+      {icon && <div className={iconClasses}>{icon}</div>}
+      <div className={cx("badge__text", "badge__text--no-wrap")}>{text}</div>
+    </div>
+  );
+}
+
+Badge.defaultProps = {
+  size: "medium",
+  status: "default",
+};

src/badge/index.ts

@@ -0,0 +1 @@
+export * from "./badge";

src/barCharts/barCharts.module.scss

@@ -0,0 +1,83 @@
+@import '../core/index.module';
+
+.bar-chart {
+  height: 14px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  > span {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  &__multiplebars {
+    width: calc(100% - 75px);
+    border-radius: 3px;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  &__label {
+    position: relative;
+    font-family: $font-family--base;
+    font-size: 12px;
+    line-height: 1.83;
+    color: $colors--neutral-8;
+    width: 75px;
+  }
+
+  &__bar {
+    display: inline-block;
+    height: 13px;
+    border-radius: 3px;
+
+    &--dev {
+      position: absolute;
+      height: 3px;
+    }
+  }
+
+  .count-first-try, .count-total, .count-retry, .count-max-retries {
+    border-radius: 3px;
+    position: absolute;
+    left: 40px;
+  }
+
+  .count-first-try, .count-total {
+    background-color: $colors--neutral-4;
+  }
+  .count-retry, .count-max-retries {
+    background-color: $colors--alert;
+  }
+
+  .rows {
+    background-color: $colors--neutral-4;
+    border-radius: 3px;
+  }
+
+  .rows-dev {
+    background-color: $colors--primary-blue-3;
+  }
+
+  .bar-chart {
+    &__parse, &__plan, &__run, &__overhead, &__overall {
+      background-color: $colors--neutral-4;
+    }
+  }
+
+  &-red {
+    .bar-chart {
+      &__parse, &__plan, &__run, &__overhead, &__overall {
+        background-color: $colors--functional-red-2;
+      }
+    }
+  }
+
+  &__parse-dev, &__plan-dev, &__run-dev, &__overhead-dev, &__overall-dev {
+    background-color: $colors--primary-blue-3;
+  }
+}