Skip to content

Commit

Permalink
Import new UI into Balrog repo (#947)
Browse files Browse the repository at this point in the history
  • Loading branch information
bhearsum committed Jul 15, 2019
1 parent 50e383f commit 3daa34c
Show file tree
Hide file tree
Showing 85 changed files with 16,105 additions and 8 deletions.
83 changes: 77 additions & 6 deletions .taskcluster.yml
Original file line number Diff line number Diff line change
Expand Up @@ -166,9 +166,6 @@ tasks:
env: true
events:
- release
routes:
- index.project.balrog.releases.latest.agent
- index.project.balrog.releases.{{ event.version }}.agent
metadata:
name: Balrog Agent Docker Image Creation (release event)
description: Balrog Agent Docker Image Creation (release event)
Expand Down Expand Up @@ -221,11 +218,85 @@ tasks:
env: true
events:
- release
routes:
- index.project.balrog.releases.latest.app
- index.project.balrog.releases.{{ event.version }}.app
metadata:
name: Balrog Docker Image Creation (release event)
description: Balrog Docker Image Creation (release event)
owner: "{{ event.head.user.email }}"
source: "{{ event.head.repo.url }}"

- provisionerId: "{{ taskcluster.docker.provisionerId }}"
workerType: "{{ taskcluster.docker.workerType }}"
payload:
maxRunTime: 1200
image: "node:current"
command:
- "/bin/bash"
- "-c"
- "git clone $GITHUB_HEAD_REPO_URL balrog && cd balrog && git checkout $GITHUB_HEAD_BRANCH && cd react-ui && yarn install && yarn lint && yarn test"
extra:
github:
env: true
events:
- pull_request.opened
- pull_request.synchronize
- pull_request.reopened
- push
branches:
- master
metadata:
name: Balrog React UI tests
description: Balrog React UI tests
owner: "{{ event.head.user.email }}"
source: "{{ event.head.repo.url }}"

- provisionerId: "{{ taskcluster.docker.provisionerId }}"
workerType: "{{ taskcluster.docker.workerType }}"
payload:
maxRunTime: 1200
image: "node:current"
command:
- "/bin/bash"
- "-c"
- "git clone $GITHUB_HEAD_REPO_URL balrog && cd balrog && git checkout $GITHUB_HEAD_BRANCH && cd react-ui && yarn install && yarn build"
extra:
github:
env: true
events:
- pull_request.opened
- pull_request.synchronize
- pull_request.reopened
- push
branches:
- master
metadata:
name: Balrog React UI build
description: Balrog React UI build
owner: "{{ event.head.user.email }}"
source: "{{ event.head.repo.url }}"

- provisionerId: "{{ taskcluster.docker.provisionerId }}"
workerType: "{{ taskcluster.docker.workerType }}"
scopes:
- secrets:get:repo:github.com/mozilla/balrog:s3-stage-aws-creds
- secrets:get:repo:github.com/mozilla/balrog:s3-stage-app-config
payload:
env:
AWS_CREDENTIALS_SECRET: http://taskcluster/secrets/v1/secret/repo:github.com/mozilla/balrog:s3-stage-aws-creds
APP_CONFIG_SECRET: http://taskcluster/secrets/v1/secret/repo:github.com/mozilla/balrog:s3-stage-app-config
WEBSITE_BUCKET: balrog-stage-balrog-static-admin-stage-static-website
maxRunTime: 1200
image: "node:current"
command:
- "/bin/bash"
- "-c"
- "apt-get -q --yes update && apt-get -q --yes install awscli && git clone $GITHUB_HEAD_REPO_URL balrog && cd balrog && git checkout $GITHUB_HEAD_BRANCH && cd react-ui && yarn install && ./scripts/deploy"
extra:
github:
env: true
events:
- release
metadata:
name: Balrog React UI build & publish
description: Balrog React UI build & publish
owner: "{{ event.head.user.email }}"
source: "{{ event.head.repo.url }}"
3 changes: 2 additions & 1 deletion README.rst
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ Now, run the following command to create and run the necessary images:

Once it completes, you should be able to access

- The admin interface at https://localhost:8010
- The current admin interface at https://localhost:8010
- The WIP new admin interface at http://localhost:9000
- The public interface at http://localhost:9010

You'll need to use the "Sign in..." button to do anything useful with the admin interface, which will ask you to sign in with a third party provider (eg: gmail, github). Once you've done that, run the following to create a local admin user to gain write access:
Expand Down
24 changes: 24 additions & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,27 @@ services:
- AUTH0_M2M_CLIENT_SECRET=updk4Gi1f6ncXDCDBH5ZclbsbIUaZmqvEXYCQLCFI56RnWlnTQXCQe6-h9n86QTv


balrogreactui:
build: ./react-ui
depends_on:
balrogadmin:
condition: service_healthy
ports:
- "9000:9000"
environment:
- BALROG_ROOT_URL=https://localhost:8010
- HOST=0.0.0.0
- PORT=9000
volumes:
- ./react-ui:/app
- node_modules:/app/node_modules
entrypoint:
- /bin/bash
- --login
- -c
- yarn install && yarn start


# This container exists solely to have something automatically rebuilding the UI
# in the background during local development. Although it runs a web server, we
# don't use it. Instead, the nginx one below is used as our entry point to more
Expand Down Expand Up @@ -174,3 +195,6 @@ services:
interval: 30s
timeout: 30s
retries: 10

volumes:
node_modules:
3 changes: 3 additions & 0 deletions react-ui/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const neutrino = require('neutrino');

module.exports = neutrino().eslintrc();
11 changes: 11 additions & 0 deletions react-ui/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
build
node_modules
*.swp
.idea/
*.log
.Rhistory
.env
.coverage
.DS_Store
.eslintcache
.netlify/
45 changes: 45 additions & 0 deletions react-ui/.neutrinorc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
const DEFAULT_HOST = 'localhost';
const DEFAULT_PORT = 9000;
const port = process.env.PORT || DEFAULT_PORT;

module.exports = {
options: {
root: __dirname,
},
use: [
'@mozilla-frontend-infra/react-lint',
[
'@neutrinojs/react',
{
devServer: {
host: process.env.HOST || DEFAULT_HOST,
port,
historyApiFallback: {
disableDotRule: true,
},
},
html: {
title: 'Balrog Admin',
favicon: `${__dirname}/src/images/favicon.png`,
template: 'src/index.html',
},
env: {
HOST: DEFAULT_HOST,
PORT: DEFAULT_PORT,
BALROG_ROOT_URL: 'https://localhost:8010',
AUTH0_CLIENT_ID: 'GlZhJQfx52b7MLQ19AjuTJHieiB4oh1j',
AUTH0_DOMAIN: 'balrog-localdev.auth0.com',
AUTH0_AUDIENCE: 'balrog-localdev',
AUTH0_RESPONSE_TYPE: 'token id_token',
AUTH0_SCOPE: 'full-user-credentials openid profile email',
AUTH0_REDIRECT_URI: `http://localhost:${port}/login`,
},
}
],
(neutrino) => {
neutrino.config.resolve.alias
.set('react-dom', '@hot-loader/react-dom');
},
'@neutrinojs/jest'
]
};
6 changes: 6 additions & 0 deletions react-ui/Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
FROM node:current

COPY .neutrinorc.js package.json webpack.config.js yarn.lock /app/
COPY src/ /app/src/

WORKDIR /app
5 changes: 5 additions & 0 deletions react-ui/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const neutrino = require('neutrino');

process.env.NODE_ENV = process.env.NODE_ENV || 'test';

module.exports = neutrino().jest();
55 changes: 55 additions & 0 deletions react-ui/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{
"name": "balrog-ui",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "dotenv webpack -- --mode production",
"start": "dotenv webpack-dev-server -- --mode development",
"test": "jest",
"lint": "eslint --cache --format codeframe --ext mjs,jsx,js src test"
},
"dependencies": {
"@date-io/date-fns": "^1.3.7",
"@hot-loader/react-dom": "^16.8.6",
"@material-ui/core": "^4.1.3",
"@material-ui/icons": "^4.2.1",
"@material-ui/lab": "^4.0.0-alpha.11",
"@material-ui/pickers": "^3.1.2",
"@material-ui/styles": "^4.1.2",
"@mozilla-frontend-infra/components": "^2.4.1",
"axios": "^0.18.1",
"change-case": "^3.1.0",
"classnames": "^2.2.6",
"clipboard-copy": "^3.0.0",
"date-fns": "2.0.0-alpha.37",
"downshift": "^3.2.10",
"is-absolute-url": "^2.1.0",
"mdi-react": "^5.3.0",
"prop-types": "^15",
"qs": "^6.7.0",
"ramda": "^0.26.1",
"react": "^16.8.6",
"react-auth0-components": "^1.0.0",
"react-diff-view": "^2.1.3",
"react-dom": "^16.8.6",
"react-hot-loader": "^4",
"react-number-format": "^4.0.8",
"react-router-dom": "^5.0.0",
"react-virtualized": "^9.21.1",
"unidiff": "^1.0.2"
},
"devDependencies": {
"@mozilla-frontend-infra/react-lint": "^1.2.2",
"@neutrinojs/jest": "9.0.0-rc.0",
"@neutrinojs/react": "9.0.0-rc.0",
"dotenv": "^8.0.0",
"dotenv-cli": "^2.0.0",
"eslint": "^5",
"jest": "^23",
"neutrino": "9.0.0-rc.0",
"webpack": "^4",
"webpack-cli": "^3",
"webpack-dev-server": "^3"
}
}
60 changes: 60 additions & 0 deletions react-ui/scripts/404.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Not Found</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
line-height: 1.2;
margin: 0;
}

html {
color: #888;
display: table;
font-family: sans-serif;
height: 100%;
text-align: center;
width: 100%;
}

body {
display: table-cell;
vertical-align: middle;
margin: 2em auto;
}

h1 {
color: #555;
font-size: 2em;
font-weight: 400;
}

p {
margin: 0 auto;
width: 280px;
}

@media only screen and (max-width: 280px) {

body, p {
width: 95%;
}

h1 {
font-size: 1.5em;
margin: 0 0 0.3em;
}

}

</style>
</head>
<body>
<h1>Page Not Found</h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
</body>
</html>
<!-- IE needs 512+ bytes: https://blogs.msdn.microsoft.com/ieinternals/2010/08/18/friendly-http-error-pages/ -->
26 changes: 26 additions & 0 deletions react-ui/scripts/deploy
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
#!/usr/bin/env bash

set -o errexit -o pipefail

export AWS_ACCESS_KEY_ID=$(curl ${AWS_CREDENTIALS_SECRET} | python3 -c 'import json, sys; a = json.load(sys.stdin); print(a["aws_access_key"])')
export AWS_SECRET_ACCESS_KEY=$(curl ${AWS_CREDENTIALS_SECRET} | python3 -c 'import json, sys; a = json.load(sys.stdin); print(a["aws_secret_key"])')

# Grab app config and convert it to shell format
curl "${APP_CONFIG_SECRET}" | python3 -c 'import json, sys; a = json.load(sys.stdin); [print(f"{k}={v}") for k,v in a.items()]' > .env

yarn build

cp scripts/404.html public/404.html

aws s3 sync \
--metadata "{
\"Strict-Transport-Security\": \"max-age=31536000\",
\"Access-Control-Allow-Origin\": \"*\",
\"x-content-type-options\": \"nosniff\",
\"x-frame-options\": \"SAMEORIGIN\",
\"x-xss-protection\": \"1; mode=block\"
}" \
--metadata-directive "REPLACE" \
--cache-control "max-age=300" \
--delete \
./build/ "s3://${WEBSITE_BUCKET}/"

0 comments on commit 3daa34c

Please sign in to comment.