ui: Move to Workspaced Structure (#8994)

* ui: Add the most basic workspace root in /ui

* We already have a LICENSE file in the repository root

* Change directory path in build scripts ui-v2 -> ui

* Make yarn install flags configurable from elsewhere

* Minimal workspace root makefile

* Call the new docker specific target

* Update yarn in the docker build image

* Reconfigure the netlify target and move to the higher makefile

* Move ui-v2 -> ui/packages/consul-ui

* Change repo root to refleect new folder structure

* Temporarily don't hoist consul-api-double

* Fixup CI configuration

* Fixup lint errors

* Fixup Netlify target

.circleci/config.yml

@@ -11,7 +11,7 @@ references:
     test-results: &TEST_RESULTS_DIR /tmp/test-results
 
   cache:
-    yarn: &YARN_CACHE_KEY consul-ui-v2-{{ checksum "ui-v2/yarn.lock" }}
+    yarn: &YARN_CACHE_KEY consul-ui-v3-{{ checksum "ui/packages/consul-ui/yarn.lock" }}
     rubygem: &RUBYGEM_CACHE_KEY static-site-gems-v1-{{ checksum "Gemfile.lock" }}
 
   environment: &ENVIRONMENT
@@ -559,12 +559,13 @@ jobs:
 
       - run:
           name: install yarn packages
-          command: cd ui-v2 && yarn install
+          command: cd ui/packages/consul-ui && yarn install --focus
 
       - save_cache:
           key: *YARN_CACHE_KEY
           paths:
-            - ui-v2/node_modules
+            - ui/node_modules
+            - ui/packages/consul-ui/node_modules
       - run: *notify-slack-failure
 
   # build ember so frontend tests run faster
@@ -578,13 +579,13 @@ jobs:
       - checkout
       - restore_cache:
           key: *YARN_CACHE_KEY
-      - run: cd ui-v2 && make build-ci
+      - run: cd ui/packages/consul-ui && make build-ci
 
       # saves the build to a workspace to be passed to a downstream job
       - persist_to_workspace:
-          root: ui-v2
+          root: ui
           paths:
-            - dist
+            - packages/consul-ui/dist
       - run: *notify-slack-failure
 
   # build ember so frontend tests run faster
@@ -604,13 +605,13 @@ jobs:
       - checkout
       - restore_cache:
           key: *YARN_CACHE_KEY
-      - run: cd ui-v2 && make
+      - run: cd ui && make
 
       # saves the build to a workspace to be passed to a downstream job
       - persist_to_workspace:
-          root: ui-v2
+          root: ui
           paths:
-            - dist
+            - packages/consul-ui/dist
       - run: *notify-slack-failure
 
   # build static-assets file
@@ -644,10 +645,10 @@ jobs:
       - run:
           name: commit agent/uiserver/bindata_assetfs.go if there are UI changes
           command: |
-            # check if there are any changes in ui-v2/
+            # check if there are any changes in ui/
             # if there are, we commit the ui static asset file
             # HEAD^! is shorthand for HEAD^..HEAD (parent of HEAD and HEAD)
-            if ! git diff --quiet --exit-code HEAD^! ui-v2/; then
+            if ! git diff --quiet --exit-code HEAD^! ui/; then
               git config --local user.email "hashicorp-ci@users.noreply.github.com"
               git config --local user.name "hashicorp-ci"
 
@@ -669,9 +670,9 @@ jobs:
       - restore_cache:
           key: *YARN_CACHE_KEY
       - attach_workspace:
-          at: ui-v2
+          at: ui
       - run:
-          working_directory: ui-v2
+          working_directory: ui/packages/consul-ui
           command: make test-node
       - run: *notify-slack-failure
 
@@ -689,12 +690,12 @@ jobs:
       - restore_cache:
           key: *YARN_CACHE_KEY
       - attach_workspace:
-          at: ui-v2
+          at: ui
       - run:
-          working_directory: ui-v2
+          working_directory: ui/packages/consul-ui
           command: node_modules/.bin/ember exam --split=$CIRCLE_NODE_TOTAL --partition=`expr $CIRCLE_NODE_INDEX + 1` --path dist --silent -r xunit
       - store_test_results:
-          path: ui-v2/test-results
+          path: ui/packages/consul-ui/test-results
       - run: *notify-slack-failure
 
   # run ember frontend tests
@@ -711,12 +712,12 @@ jobs:
       - restore_cache:
           key: *YARN_CACHE_KEY
       - attach_workspace:
-          at: ui-v2
+          at: ui
       - run:
-          working_directory: ui-v2
+          working_directory: ui/packages/consul-ui
           command: node_modules/.bin/ember exam --split=$CIRCLE_NODE_TOTAL --partition=`expr $CIRCLE_NODE_INDEX + 1` --path dist --silent -r xunit
       - store_test_results:
-          path: ui-v2/test-results
+          path: ui/packages/consul-ui/test-results
       - run: *notify-slack-failure
 
   # run ember frontend unit tests to produce coverage report
@@ -728,13 +729,13 @@ jobs:
       - restore_cache:
           key: *YARN_CACHE_KEY
       - attach_workspace:
-          at: ui-v2
+          at: ui
       - run:
-          working_directory: ui-v2
+          working_directory: ui/packages/consul-ui
           command: make test-coverage-ci
       - run:
           name: codecov ui upload
-          working_directory: ui-v2
+          working_directory: ui/packages/consul-ui
           command: bash <(curl -s https://codecov.io/bash) -v -c -C $CIRCLE_SHA1 -F ui
       - run: *notify-slack-failure
 

build-support/docker/Build-UI.dockerfile

@@ -3,7 +3,7 @@ FROM alpine:${ALPINE_VERSION}
 
 ARG NODEJS_VERSION=12.15.0-r1
 ARG MAKE_VERSION=4.2.1-r2
-ARG YARN_VERSION=1.19.1
+ARG YARN_VERSION=1.22.5
 
 RUN apk update && \
     apk add nodejs=${NODEJS_VERSION} nodejs-npm=${NODEJS_VERSION} make=${MAKE_VERSION} && \
@@ -12,4 +12,4 @@ RUN apk update && \
     mkdir /consul-src
 
 WORKDIR /consul-src
-CMD make
+CMD make dist-docker

build-support/functions/20-build.sh

@@ -49,7 +49,7 @@ function build_ui {
    fi
 
    local sdir="$1"
-   local ui_dir="${1}/ui-v2"
+   local ui_dir="${1}/ui"
 
    # parse the version
    version=$(parse_version "${sdir}")
@@ -89,8 +89,8 @@ function build_ui {
       (
          tar -c $(ls -A | grep -v "^(node_modules\|dist\|tmp)") | docker cp - ${container_id}:/consul-src &&
          status "Running build in container" && docker start -i ${container_id} &&
-         rm -rf ${1}/ui-v2/dist &&
-         status "Copying back artifacts" && docker cp ${container_id}:/consul-src/dist ${1}/ui-v2/dist
+         rm -rf ${1}/ui/dist &&
+         status "Copying back artifacts" && docker cp ${container_id}:/consul-src/packages/consul-ui/dist ${1}/ui/dist
       )
       ret=$?
       docker rm ${container_id} > /dev/null
@@ -99,7 +99,7 @@ function build_ui {
    # Check the version is baked in correctly
    if test ${ret} -eq 0
    then
-      local ui_vers=$(ui_version "${1}/ui-v2/dist/index.html")
+      local ui_vers=$(ui_version "${1}/ui/dist/index.html")
       if test "${version}" != "${ui_vers}"
       then
          err "ERROR: UI version mismatch. Expecting: '${version}' found '${ui_vers}'"
@@ -110,7 +110,7 @@ function build_ui {
    # Check the logo is baked in correctly
    if test ${ret} -eq 0
    then
-     local ui_logo_type=$(ui_logo_type "${1}/ui-v2/dist/index.html")
+     local ui_logo_type=$(ui_logo_type "${1}/ui/dist/index.html")
      if test "${logo_type}" != "${ui_logo_type}"
      then
        err "ERROR: UI logo type mismatch. Expecting: '${logo_type}' found '${ui_logo_type}'"
@@ -123,7 +123,7 @@ function build_ui {
    then
       rm -rf ${1}/pkg/web_ui
       mkdir -p ${1}/pkg
-      cp -r ${1}/ui-v2/dist ${1}/pkg/web_ui
+      cp -r ${1}/ui/dist ${1}/pkg/web_ui
    fi
 
    popd > /dev/null
@@ -316,7 +316,7 @@ function build_consul {
    then
       status "Copying the source from '${sdir}' to /consul"
       (
-         tar -c $(ls | grep -v "^(ui\|ui-v2\|website\|bin\|pkg\|.git)") | docker cp - ${container_id}:/consul &&
+         tar -c $(ls | grep -v "^(ui\|website\|bin\|pkg\|.git)") | docker cp - ${container_id}:/consul &&
          status "Running build in container" &&
          docker start -i ${container_id} &&
          status "Copying back artifacts" &&

ui/.gitignore

@@ -0,0 +1,25 @@
+!bin
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/node_modules/
+
+# misc
+/.env*
+/.pnp*
+/.sass-cache
+/connect.lock
+/coverage/
+/libpeerconnection.log
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

ui/GNUmakefile

@@ -0,0 +1,29 @@
+.PHONY: clean dist dist-docker dist-netlify
+# Called from the build ui docker image
+dist-docker: dist
+
+clean:
+	rm -rf ./dist
+
+# Build a distribution of the UI using the minimal amount of dependencies
+dist: clean
+	cd packages/consul-ui && \
+		CONSUL_UI_INSTALL_FLAGS=--focus \
+		$(MAKE)
+
+# Build a distribution of the UI for Netlify previews.
+# The distribution must be copied into the ui/ subfolder
+# in order to mirror the go binary
+#
+# Netlify Settings:
+# ---
+# base-directory: ui
+# build command: make dist-netlify
+# publish directory: ui/dist
+dist-netlify: clean
+	mkdir -p dist/ui && \
+	cd packages/consul-ui && \
+		CONSUL_UI_INSTALL_FLAGS=--focus \
+		$(MAKE) build-staging && \
+		mv dist/* ../../dist/ui && \
+		cp _redirects ../../dist/_redirects

ui/README.md

@@ -0,0 +1,60 @@
+# Consul UI Monorepo
+
+This monorepo contains multiple projects, the UI for Consul and addons and
+packages used by the UI.
+
+This top-level repository provides limited common tasks, such as installation
+and commit assistance.  However, most tasks must be executed from within a
+subproject, e.g. running or testing.
+
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Prerequisites](#prerequisites)
+- [Installation](#installation)
+- [Yarn Commands](#yarn-commands)
+- [Contributing](#contributing)
+  - [Building ToC](#building-toc)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Prerequisites
+
+You will need the following things properly installed on your computer.
+
+* [Git][git]
+* [Node.js][node]
+* [Yarn][yarn] installed globally
+* [Google Chrome][chrome]
+* [Firefox][firefox]
+
+[git]: https://git-scm.com/
+[node]: https://nodejs.org/
+[yarn]: https://classic.yarnpkg.com/lang/en/
+[chrome]: https://google.com/chrome/
+[firefox]: https://firefox.com/
+[yarn-workspaces]: https://classic.yarnpkg.com/en/docs/workspaces/
+
+## Installation
+
+* `git clone https://github.com/hashicorp/consul.git` this repository
+* `cd ui`
+* `yarn`
+
+## Yarn Commands
+
+List of available project commands.  `yarn run <command-name>`
+
+| Command             | Description |
+|---------------------|---|
+| doc:toc               | Re-builds the ToC for this README. |
+
+## Contributing
+
+### Building ToC
+
+To autogenerate a ToC (table of contents) for this README,
+run `yarn doc:toc`.  Please update the ToC whenever editing the structure
+of README.

ui/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "description": "Monorepo for Consul UI, packages and addons.",
+  "license": "MPL-2.0",
+  "author": "HashiCorp",
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/@hashicorp/consul-api-double",
+      "**/@hashicorp/consul-api-double/**"
+    ]
+  },
+  "scripts": {
+    "doc:toc": "doctoc README.md"
+  },
+  "devDependencies": {
+    "doctoc": "^1.4.0"
+  }
+}

ui/packages/consul-ui/GNUmakefile

@@ -1,4 +1,5 @@
 ROOT:=$(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
+CONSUL_UI_INSTALL_FLAGS?=
 
 all: build
 
@@ -7,16 +8,6 @@ deps: node_modules clean
 clean:
 	rm -rf ./tmp
 
-# target for netlify ui previews
-# Netlify Settings
-# base-directory: ui-v2
-# build command: make netlify
-# publish directory: ui-v2/ui-dist
-netlify: build-staging
-	mkdir -p ui-dist/ui \
-		&& mv dist/* ui-dist/ui/ \
-		&& cp _redirects ui-dist/_redirects
-
 build-staging: deps
 	yarn run build:staging
 
@@ -77,7 +68,6 @@ test-coverage-ci: deps
 test-parallel: deps
 	yarn run test:parallel
 
-
 lint: deps
 	yarn run lint:hbs && yarn run lint:js
 
@@ -88,6 +78,6 @@ steps:
 	yarn run steps:list
 
 node_modules: yarn.lock package.json
-	yarn install
+	yarn install $(CONSUL_UI_INSTALL_FLAGS)
 
 .PHONY: all deps build start test test-view lint format clean