{"_id":"@blrandel/maas-ui","_rev":"1-dd8313d2266a32435e5596be908b38b7","name":"@blrandel/maas-ui","dist-tags":{"latest":"1.1.1"},"versions":{"1.1.1":{"name":"@blrandel/maas-ui","version":"1.1.1","scripts":{"build":"yarn build-shared","build-all":"yarn clean-all && yarn build-shared && yarn build-legacy && yarn build-ui && yarn copy-build","build-shared":"cd shared && yarn install && yarn build","build-legacy":"cd legacy && yarn install && yarn build","build-ui":"cd ui && yarn install && yarn build","cypress-open":"cd proxy && yarn cypress-open","cypress-run":"cd proxy && yarn cypress-run","copy-build":"mkdir -p build/legacy build/ui && cp -R legacy/build/* build/legacy/ && cp -R ui/build/* build/ui/","release":"cd ui && yarn run release","serve":"cd proxy && yarn start","start":"yarn serve","clean":"yarn clean-all","clean-all":"rm -rf build && yarn clean-monorepo && yarn clean-proxy && yarn clean-shared && yarn clean-legacy && yarn clean-ui","clean-monorepo":"rm -rf node_modules","clean-legacy":"cd legacy && yarn run clean","clean-ui":"cd ui && yarn run clean","clean-proxy":"cd proxy && yarn run clean","clean-shared":"cd shared && yarn run clean","link-components":"yarn link \"@canonical/react-components\" && yarn link \"react\" && yarn install","unlink-components":"yarn unlink react && yarn unlink \"@canonical/react-components\"","lint-legacy":"cd legacy && yarn run lint","lint-ui":"cd ui && yarn run lint","lint-shared":"cd shared && yarn run lint","lint":"yarn lint-legacy && yarn lint-ui && yarn lint-shared","test-cypress":"cd proxy && yarn run cypress-ci","test-legacy":"cd legacy && yarn run test","test-ui":"cd ui && yarn run test --watchAll=false","test-shared":"cd shared && yarn run test","test":"yarn build-shared && yarn test-legacy && yarn test-ui && yarn test-shared"},"private":false,"workspaces":{"packages":["legacy","proxy","shared","ui"],"nohoist":["**/babel**","**/eslint**","**/react-scripts**","**/jest","**/webpack**"]},"description":"This is repository contains sourcecode for the [MAAS](http://maas.io) web  frontend.","_id":"@blrandel/maas-ui@1.1.1","dist":{"shasum":"4325bf663db436cc4c94510882d483f7f9c370d3","integrity":"sha512-h2StsXB1sCqL5TjOBGD4LRf395f3yHV7FhE7MBNC8P9DPTHI7m6vQ1aCvkvwTKujbRH997T3aZIR2MrNSBAJxQ==","tarball":"https://registry.npmjs.org/@blrandel/maas-ui/-/maas-ui-1.1.1.tgz","fileCount":1595,"unpackedSize":6322046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqOJTCRA9TVsSAnZWagAAsdIP/0R3AMHsPPzEY50WIA+1\ngcprWtseC/m2wnffDTNgDHp05dDreVFjqUE/XAqd2hooUscBGdFwKgxnkG2V\nQvoFDyc78xRGEjoIdw5iZxuSQR9WJZoj1aseDH+9386BwHgYrowbDMQPXGOZ\nMvOSrmsOnLX/sRF/cp+f4zxgLFai15QiFrr6cURIovTWgsv9zMPALAg+dSt+\nFRrOqNAGUzssmEDKdaCrx7+bOktCAqE7Otwo5q+BxdxTJToe/FmE0uN+vJnh\nNJ8HVnB5TmmauUQI2SBMWw2MjH6OK211YUbqBkkfS0MpBi3M7FJGjrLQhVMm\nyc6YtY3s7ohf7Y2nZ4QWufYHfIRWjEE6oxbpltV3sF5We56diN1+q3mVMg8t\nhzwEeITNU9HHg1ba0nE5z0OnPUxm2O8ZoU2xihHm54+YvTKPSNH7/y+A+3sG\nL1E7dJhXeA52ETuOjCdl1KEoZT5M8YFRWj+K1iJjrGl8CWH51utUNm5UMXOR\nCByEq69aPBL9W+WFv9fiPAle/ymveZwc94UMdwpuYupwijFYLySFmChTHb75\nVrSESvnyX675oSOca8lvEgbu+/ypDnrrAPXQOkJvqgqU03v8VSpBmPvbQ2bO\nsVFgR9PEVnSPSNrY68TR0h90qfkHVnxOnAH+AuFStnW2tnK+6jPAfLeHW8en\ns8DQ\r\n=NsRU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXB2x8N8fpBwjOo9qqZo3mcBWhSFIk6rW2RUq0REpfRAiAfgeAn7SAQmif8CGnkuNUx2JCoXVJKwPYoz6GZXMI/HQ=="}]},"maintainers":[{"name":"blrandel","email":"kit@nocturne.net.nz"}],"_npmUser":{"name":"blrandel","email":"kit@nocturne.net.nz"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/maas-ui_1.1.1_1588126290456_0.2020455592675643"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-29T02:11:30.400Z","1.1.1":"2020-04-29T02:11:30.687Z","modified":"2022-04-04T19:43:28.278Z"},"maintainers":[{"name":"blrandel","email":"kit@nocturne.net.nz"}],"description":"This is repository contains sourcecode for the [MAAS](http://maas.io) web  frontend.","readme":"# maas-ui\n\nThis is repository contains sourcecode for the [MAAS](http://maas.io) web  frontend.\n\n[![CircleCI](https://circleci.com/gh/canonical-web-and-design/maas-ui/tree/master.svg?style=svg)](https://circleci.com/gh/canonical-web-and-design/maas-ui/tree/master)\n\n![CI](https://github.com/canonical-web-and-design/maas-ui/workflows/CI/badge.svg)\n\nIt is comprised of the following [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/):\n\n  - *legacy*: the angularjs maas client.\n  - *ui*: the new react maas client (all new work should be in this workspace).\n  - *shared*: code shared between both legacy and ui.\n  - *proxy*: a proxying express project, used for serving both legacy and ui projects in development.\n\n## Adding a new workspace\n\nTo add a new workspace, edit `package.json` and add the project's directory name to the `workspaces` array.\n\nTo import modules from existing projects in your new project, add the dependant projects to your projects dependencies in `package.json`.\n\n## maas-ui development setup\n\n**Note: You will need access to an instance of MAAS running in order to run maas-ui.**\n\nAlthough we recommend developing against an already deployed MAAS,\nto setup a local MAAS in a container, you can follow the steps in this [guide](https://docs.google.com/document/d/17Rc_wpaOylXADmh6yIDlGjOVzaAgyLWe3SbnK3C5SL0/).\n\n### Generate an SSH key in your container (LXD and multipass)\n\n**Note: If you intend to develop against a local MAAS, the following instructions should be run in the container running MAAS.**\n\nInside your container (LXD or multipass) [generate a new SSH key](https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) and [add it to your Github account](https://help.github.com/en/articles/adding-a-new-ssh-key-to-your-github-account).\n\n### Clone the repository\n\nInside your MAAS container (LXD or multipass), clone the maas-ui repository. If you are going to be developing on maas-ui then do the following:\n\n```\ngit clone -o upstream git@github.com:canonical-web-and-design/maas-ui\ncd maas-ui\ngit remote add origin git@github.com:<github-username>/maas-ui\n```\n\nOtherwise run:\n\n```\ngit clone git@github.com:<github-username>/maas-ui\n```\n\n### Edit local config\n\nBy default maas-ui will connect to `karura.internal` which requires Canonical VPN access. If you wish to develop against a different MAAS then you can create a local env:\n\n```\ncp proxy/.env proxy/.env.local\n```\n\nUpdate the contents of that file to:\n\n```\nMAAS_URL=\"http://<your-maas-ip>:5240/\"\n```\n\n\n### Install Docker inside your container (LXD and multipass)\n\nThe simplest way is to use [dotrun snap](https://snapcraft.io/dotrun). Once installed you can run `dotrun` in the root of this project.\n\n### macOS\n\n#### VPN Configuration\n\nTo connect to a remote MAAS over the VPN, you'll need to configure *nat* on your macOS host:\n\n1. run `ifconfig` and make note of the `utun` interfaces.\n2. For every `utun` interface, add the following line to `/etc/pf.conf` directly after any existing `nat-anchor` or `nat` commands (the order is significant):\n\n```\nnat on utun0 from bridge100:network to any -> (utun0)\n```\n\n3. Run `sudo pfctl -f /etc/pf.conf` to update configuration.\n4. You should be able to `ping karura.internal` from your maas multipass.\n\nBe aware that this may prevent reaching hosts on your internal network. You can of course comment out the `nat` configuration and rerun `sudo pfctl -f /etc/pf.conf` to reset everything.\n\n#### Docker\n\nIf running `dotrun` from your macOS, you'll need to [Use multipass to creeate an Ubuntu VM](https://multipass.run).\n\n### Running\n\nTo run the MAAS UI project through a Docker container, from the root of the MAAS UI project run:\n\n```\ndotrun\n```\n\nIf you get babel errors then you should run `yarn clean-all` and retry.\n\nOtherwise you can run the project on your host machine directly if you have node and yarn installed, using:\n\n```\nyarn serve\n```\n\nFrom here you should be able to view the project at &lt;your-local-maas-ip&gt;:8400/MAAS/\n\n## Building\n\nEnsure both node (current LTS) and yarn are installed.\n\nFrom the root of the MAAS UI project run:\n\n```\nyarn build-all\n```\n\nOptimised production bundles for both `ui` and `legacy` will be built, and output to `./build`.\n\n## Testing with Cypress\n\n[Cypress](https://www.cypress.io/) is an end-to-end Javascript testing framework that executes in the browser, and therefore in the same run loop as the device under test. It includes features such as time travel (through the use of UI snapshots), real-time reloads and automatic/intuitive waiting.\n\n### Running headless tests\n\nTo run headless Cypress tests, enter the following command from the root of the project:\n\n```\nyarn test-cypress\n```\n\nThis will automatically start legacy, ui and proxy servers and run the Cypress tests, in which results are logged to the console. After running the tests, the servers and process will close.\n\n### Interactive testing\n\nBy launching the Cypress Test Runner, you will be able to to see commands as they execute while also viewing the UI while it's being tested. Note that because the Cypress Test Runner is a graphical application, launching it in a container or VM will require some extra steps because you will need to forward the XVFB messages from Cypress out of the container into an X11 server running on the host machine.\n\n#### Interactive testing on host machine\n\nIf developing directly on your host machine, simply run maas-ui in development as normal:\n\n```\nyarn serve\n```\n\nThen open the Cypress Test Runner by running:\n\n```\nyarn cypress-open\n```\n\nYou should then see a list of test specs in maas-ui. You can run all interactive tests by clicking \"Run all specs\" in the top-right of the window.\n\n#### Interactive testing in LXD\n\nYou will need to create or update an LXD profile that allows running GUI applications. If creating a new profile, run:\n\n```\nlxc profile create gui\n```\n\nOpen the profile config:\n\n```\nlxc profile edit gui\n```\n\nAnd replace with the following yaml:\n\n``` yaml\nconfig:\n  environment.DISPLAY: :0\n  raw.idmap: both 1000 1000\n  user.user-data: |\n    #cloud-config\n    runcmd:\n      - 'sed -i \"s/; enable-shm = yes/enable-shm = no/g\" /etc/pulse/client.conf'\n      - 'echo export PULSE_SERVER=unix:/tmp/.pulse-native | tee --append /home/ubuntu/.profile'\n    packages:\n      - x11-apps\n      - mesa-utils\n      - pulseaudio\ndescription: GUI LXD profile\ndevices:\n  PASocket:\n    path: /tmp/.pulse-native\n    source: /run/user/1000/pulse/native\n    type: disk\n  X0:\n    path: /tmp/.X11-unix/X0\n    source: /tmp/.X11-unix/X0\n    type: disk\n  mygpu:\n    type: gpu\nname: gui\nused_by:\n```\n\nNow either launch a new container with this profile, for example using Ubuntu 18.04:\n\n```\nlxc launch --profile default --profile gui ubuntu:18.04 container-name\n```\n\nOr if you have an existing LXD container, you can update the profile by running:\n\n```\nlxc profile assign existing-container default,gui\nlxc restart existing-container\n```\n\nInstall the following dependencies in your container, which are required for Cypress to relay information to the host machine:\n\n```\nsudo apt-get install xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2\n```\n\nYou may need to install Cypress explicitly if you've set up file-sharing with your host/container.\n\n```\nnode_modules/.bin/cypress install\n```\n\nYou should now be able to open the Cypress Test Runner in your container by running:\n\n```\nyarn cypress-open\n```\n\nIf you encounter an error with file watchers e.g. `ENOSPC: System limit for number of file watchers reached`, run:\n\n```\necho \"fs.inotify.max_user_watches=524288\" | sudo tee -a /etc/sysctl.conf\nsudo sysctl -p\n```\n\nFor more information on running GUI applications in LXD, refer to [this blog post](https://blog.simos.info/how-to-easily-run-graphics-accelerated-gui-apps-in-lxd-containers-on-your-ubuntu-desktop/).\n\n#### Interactive testing in multipass\n\nInstall the following dependencies in your multipass, which are required for Cypress to relay information to the host machine:\n\n```\nsudo apt-get install xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2\n```\n\nNext, validate whether ssh on the multipass VM is configured to forward X11 communication. Ensure you have the following values in `/etc/ssh/ssh_config`:\n\n```\nForwardX11 yes\nForwardX11Trusted yes\n```\n\nAnd the following values in `/etc/ssh/sshd_config`:\n\n```\nX11Forwarding yes\nX11DisplayOffset 10\nPrintMotd no\nTCPKeepAlive yes\n```\n\nThe following steps will differ depending on the OS of the host system.\n\n##### Ubuntu setup\n\nSince you are running from an Ubuntu graphical desktop then you already have an X11 server running locally so no further installation is necessary.\n\n##### MacOS setup\n\nFirst install XQuartz, which is the Mac version of X11. You can install XQuartz using homebrew with:\n\n```\nbrew cask install xquartz\n```\n\nOr directly from the website [here](https://www.xquartz.org/). You will now need to restart your machine.\n\nStart XQuartz using:\n\n```\nopen -a XQuartz\n```\n\nIn the XQuartz preferences, go to the “Security” tab and make sure you’ve got “Allow connections from network clients” ticked.\n\n##### Establish connection\n\nEstablish an ssh connection from your graphical desktop to the remote X client using the “-Y” switch for trusted X11 forwarding. Note that you may need to add your host's public SSH key to the multipass' list of allowed hosts.\n\n```\nssh -Y multipass@<multipass-ip>\n```\n\nYou should now be able to run the Cypress Test Runner by running:\n\n```\nyarn cypress-open\n```\n","readmeFilename":"README.md"}