Merge pull request #168 from edlerd/ui-infra

Add infrastrucutre for UI and first pages for client management

Makefile

@@ -42,8 +42,7 @@ build: cmd/ui/dist
 cmd/ui/dist:
 	@echo "copy dist npm files into cmd/ui folder"
 	mkdir -p cmd/ui/dist
-# TODO: Uncomment when ui is added
-# cp -r $(UI_FOLDER)ui/dist cmd/ui/
+	cp -r $(UI_FOLDER)ui/dist cmd/ui/
 
 npm-build:
 	$(MAKE) -C ui/ build

ui/.env

@@ -0,0 +1 @@
+PORT=8411

ui/.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react"],
+  globals: {},
+  env: {
+    node: true,
+    browser: true,
+    es6: true,
+    es2020: true,
+    jest: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/strict",
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  parserOptions: {
+    project: "./tsconfig.json",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  root: true,
+  rules: {
+    "linebreak-style": ["error", "unix"],
+    semi: ["error", "always"],
+    "object-curly-spacing": ["error", "always"],
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+  },
+};

ui/.gitignore

@@ -0,0 +1,83 @@
+# [generated] Bracketed sections updated by Yeoman generator
+# generator-canonical-webteam@3.4.1
+
+# [os] OS & editor files
+Desktop.ini
+Thumbs.db
+._*
+*.DS_Store
+*~
+\#*\#
+.AppleDouble
+.LSOverride
+.spelling
+.vscode
+.idea
+
+# [cache] Cache and backup
+*.bak
+*-cache/
+
+# [data] Local data
+*.sqlite*
+*.log
+logs/
+pids
+*.pid
+*.seed
+.*-metadata
+
+# [deps] Local dependencies
+.bundle/
+node_modules/
+vendor/
+bower_components/
+vendor/
+# Normally lockfiles would be committed, but we use yarn instead of NPM for locking dependencies
+package-lock.json
+
+# [build] Built files
+/build/
+/parts/
+/prime/
+/stage/
+*.egg-info
+.snapcraft/
+*.snap
+_site/
+*.*.map
+
+# [env] Local environment settings
+.docker-project
+.*.hash
+.envrc
+.env.local
+env/
+env[23]/
+virtual/
+venv/
+.venv/
+.dotrun.json
+
+# [sass] Files generated by Sass
+*.css
+
+node_modules/
+bower_components/
+*.log
+
+build/
+dist/
+
+*.crt
+*.key
+*.pem
+*.csr
+*.pfx
+
+# tests
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+haproxy-local.cfg

ui/.prettierignore

@@ -0,0 +1 @@
+node_modules

ui/.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-prettier/recommended"],
+  "plugins": ["stylelint-order", "stylelint-scss"],
+  "rules": {
+    "order/properties-alphabetical-order": true,
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "selector-class-pattern": null,
+    "no-invalid-position-at-import-rule": null
+  }
+}

ui/Makefile

@@ -1,14 +1,15 @@
-NPM?=npm
+YARN?=yarn
 
 
 build: install
-	$(NPM) run build --frozen=lockfile
+	$(YARN) install --frozen=lockfile
+	$(YARN) build
 .PHONY=build
 
 install:
-	$(NPM) install
+	$(YARN) install
 .PHONY=install
 
 test:
-	$(NPM) ci 
+	$(YARN) ci
 .PHONY=test

ui/README.md

@@ -2,25 +2,42 @@
 
 This is the Admin UI for the Canonical identity platform.
 
-### `npm dev`
+### Development server
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+Haproxy needs to be installed
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+    apt install haproxy
 
-### `npm test`
+and configured
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+    vim /etc/haproxy/haproxy.cfg
 
-### `npm run build`
+use this content for the file
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+    global
+      daemon
+
+    defaults
+      mode  http
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+    frontend iam_frontend
+      bind 172.17.0.1:8000
+      default_backend iam_admin_be
+
+    backend iam_admin_be
+      server admin_be 127.0.0.1:8000
+
+and restart it
+
+    service haproxy restart
+
+Start the build server as described in the main README.md in the root of this repo
+
+    make dev
+
+Install dotrun as described in https://github.com/canonical/dotrun#installation Launch it from the `ui/` directory of this repo
+
+    dotrun
+
+browse to https://localhost:8411/ to reach iam-admin-ui.

ui/babel.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          esmodules: true,
+        },
+      },
+    ],
+    "@babel/react",
+  ],
+  env: {
+    test: {
+      presets: [
+        [
+          "@babel/env",
+          {
+            targets: {
+              node: "current",
+            },
+          },
+        ],
+        "jest",
+      ],
+      plugins: ["transform-es2015-modules-commonjs"],
+    },
+  },
+};

ui/entrypoint

@@ -0,0 +1,6 @@
+#! /usr/bin/env bash
+set -e
+
+echo "Listening on http://localhost:8411"
+
+haproxy -f haproxy.cfg -db

ui/haproxy.cfg

@@ -0,0 +1,20 @@
+global
+  daemon
+
+defaults
+  mode  http
+  timeout connect 50000
+  timeout client  500000
+  timeout server  500000
+
+frontend iam_frontend
+  bind 0.0.0.0:8411
+  acl is_api path_beg /api/
+  use_backend api if is_api
+  default_backend iam_admin_ui
+
+backend iam_admin_ui
+  server yarn_serve 127.0.0.1:3000
+
+backend api
+  server kube_api_url 172.17.0.1:8000

ui/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Identity Platform Admin</title>
+    <link rel="shortcut icon" href="https://assets.ubuntu.com/v1/49a1a858-favicon-32x32.png" type="image/x-icon" />
+
+    <script>const global = globalThis;</script>
+  </head>
+  <body>
+
+    <div id="app"></div>
+    <script type="module" src="./src/index.tsx"></script>
+
+  </body>
+</html>