7dbebe9a93
* [ui] Service job status panel (#16134) * it begins * Hacky demo enabled * Still very hacky but seems deece * Floor of at least 3 must be shown * Width from on-high * Other statuses considered * More sensible allocTypes listing * Beginnings of a legend * Total number of allocs running now maps over job.groups * Lintfix * base the number of slots to hold open on actual tallies, which should never exceed totalAllocs * Versions get yer versions here * Versions lookin like versions * Mirage fixup * Adds Remaining as an alloc chart status and adds historical status option * Get tests passing again by making job status static for a sec * Historical status panel click actions moved into their own component class * job detail tests plz chill * Testing if percy is fickle * Hyper-specfic on summary distribution bar identifier * Perhaps the 2nd allocSummary item no longer exists with the more accurate afterCreate data * UI Test eschewing the page pattern * Bones of a new acceptance test * Track width changes explicitly with window-resize * testlintfix * Alloc counting tests * Alloc grouping test * Alloc grouping with complex resizing * Refined the list of showable statuses * PR feedback addressed * renamed allocation-row to allocation-status-row * [ui, job status] Make panel status mode a queryParam (#16345) * queryParam changing * Test for QP in panel * Adding @tracked to legacy controller * Move the job of switching to Historical out to larger context * integration test mock passed func * [ui] Service job deployment status panel (#16383) * A very fast and loose deployment panel * Removing Unknown status from the panel * Set up oldAllocs list in constructor, rather than as a getter/tracked var * Small amount of template cleanup * Refactored latest-deployment new logic back into panel.js * Revert now-unused latest-deployment component * margin bottom when ungrouped also * Basic integration tests for job deployment status panel * Updates complete alloc colour to green for new visualizations only (#16618) * Updates complete alloc colour to green for new visualizations only * Pale green instead of dark green for viz in general * [ui] Job Deployment Status: History and Update Props (#16518) * Deployment history wooooooo * Styled deployment history * Update Params * lintfix * Types and groups for updateParams * Live-updating history * Harden with types, error states, and pending states * Refactor updateParams to use trigger component * [ui] Deployment History search (#16608) * Functioning searchbox * Some nice animations for history items * History search test * Fixing up some old mirage conventions * some a11y rule override to account for scss keyframes * Split panel into deploying and steady components * HandleError passed from job index * gridified panel elements * TotalAllocs added to deploying.js * Width perc to px * [ui] Splitting deployment allocs by status, health, and canary status (#16766) * Initial attempt with lots of scratchpad work * Style mods per UI discussion * Fix canary overflow bug * Dont show canary or health for steady/prev-alloc blocks * Steady state * Thanks Julie * Fixes steady-state versions * Legen, wait for it... * Test fixes now that we have a minimum block size * PR prep * Shimmer effect on pending and unplaced allocs (#16801) * Shimmer effect on pending and unplaced * Dont show animation in the legend * [ui, deployments] Linking allocblocks and legends to allocation / allocations index routes (#16821) * Conditional link-to component and basic linking to allocations and allocation routes * Job versions filter added to allocations index page * Steady state legends link * Legend links * Badge count links for versions * Fix: faded class on steady-state legend items * version link now wont show completed ones * Fix a11y violations with link labels * Combining some template conditional logic * [ui, deployments] Conversions on long nanosecond update params (#16882) * Conversions on long nanosecond nums * Early return in updateParamGroups comp prop * [ui, deployments] Mirage Actively Deploying Job and Deployment Integration Tests (#16888) * Start of deployment alloc test scaffolding * Bit of test cleanup and canary for ungrouped allocs * Flakey but more robust integrations for deployment panel * De-flake acceptance tests and add an actively deploying job to mirage * Jitter-less alloc status distribution removes my bad math * bugfix caused by summary.desiredTotal non-null * More interesting mirage active deployment alloc breakdown * Further tests for previous-allocs row * Previous alloc legend tests * Percy snapshots added to integration test * changelog |
||
|---|---|---|
| .. | ||
| .storybook | ||
| .vercel | ||
| app | ||
| blueprints/story | ||
| config | ||
| lib/bulma | ||
| mirage | ||
| public | ||
| server | ||
| stories | ||
| tests | ||
| vendor | ||
| .editorconfig | ||
| .ember-cli | ||
| .env | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .nvmrc | ||
| .percy.yml | ||
| .prettierignore | ||
| .prettierrc | ||
| .prettierrc.js | ||
| .template-lintrc.js | ||
| .watchmanconfig | ||
| DEVELOPMENT_MODE.md | ||
| README.md | ||
| ember-cli-build.js | ||
| jsconfig.json | ||
| package.json | ||
| testem.js | ||
| vercel.json | ||
| yarn.lock | ||
README.md
Nomad UI
The official Nomad UI.
Prerequisites
This is an ember.js project, and you will need the following tools installed on your computer.
Installation
The Nomad UI gets cloned along with the rest of Nomad. To install dependencies, do the following from the root of the Nomad project:
$ cd ui
$ yarn
Running / Development
UI in development mode defaults to using fake generated data, but you can configure it to proxy a live running nomad process by setting USE_MIRAGE environment variable to false. First, make sure nomad is running. The UI, in development mode, runs independently from Nomad, so this could be an official release or a dev branch. Likewise, Nomad can be running in server mode or dev mode. As long as the API is accessible, the UI will work as expected.
USE_MIRAGE=false ember serve- Visit your app at http://localhost:4200.
You may need to reference the direct path to ember, typically in ./node_modules/.bin/ember.
The fake data in development is generated from a stable seed of 1. To generate different data, you can include a query parameter of ?faker-seed=2 or any other number in the URL. To turn off the seed and get different data with every load, use ?faker=seed=0.
When running with Mirage, the default scenario is set in config/environment.js but can be overridden with a query parameter to any of the scenarios named in mirage/scenarios/default.js with something like ?mirage-scenario=emptyCluster.
Running / Development with Vagrant
All necessary tools for UI development are installed as part of the Vagrantfile. This is primarily to make it easy to build the UI from source while working on Nomad. Due to the filesystem requirements of Broccoli (which powers Ember CLI), it is strongly discouraged to use Vagrant for developing changes to the UI.
That said, development with Vagrant is still possible, but the ember serve command requires two modifications:
--watch polling: This allows the vm to notice file changes made in the host environment.--port 4201: The default port 4200 is not forwarded, since local development is recommended.
This makes the full command for running the UI in development mode in Vagrant:
$ ember serve --watch polling --port 4201
Running Tests
Nomad UI tests can be run independently of Nomad golang tests.
ember test(single run, headless browser)ember test --server(watches for changes, runs in a full browser)
You can use --filter <test name> to run a targetted set of tests, e.g. ember test --filter 'allocation detail'.
In the test environment, the fake data is generated with a random seed. If you want stable data, you can set a seed while running the test server by appending &faker-seed=1 (or any other non-zero number) to the URL.
Linting
yarn lintyarn lint:fix
Building
Typically make release or make dev-ui will be the desired build workflow, but in the event that build artifacts need to be inspected, ember build will output compiled files in ui/dist.
ember build(development)ember build --environment production(production)
Releasing
Nomad UI releases are in lockstep with Nomad releases and are integrated into the make release toolchain.
Conventions
- UI branches should be prefix with
f-ui-for feature work andb-ui-for bug fixes. This instructs CI to skip running nomad backend tests.
Storybook UI Library
The Storybook project provides a browser to see what components and patterns are present in the application and how to use them. You can run it locally with yarn storybook after you have ember serve running. The latest version from the main branch is at nomad-storybook-and-ui.vercel.app/storybook/.
To generate a new story for a component, run ember generate story component-name. You can use the existing stories as a guide.
Troubleshooting
The UI is running, but none of the API requests are working
By default (according to the .ember-cli file), a proxy address of http://localhost:4646 is used. If you are running Nomad at a different address, you will need to override this setting when running ember serve: ember serve --proxy http://newlocation:1111.
Also, ensure that USE_MIRAGE environment variable is set to false, so the UI proxy requests to Nomad process instead of using autogenerated test data.
Nomad is running in Vagrant, but I can't access the API from my host machine
Nomad binds to 127.0.0.1:4646 by default, which is the loopback address. Try running nomad bound to 0.0.0.0: bin/nomad -bind 0.0.0.0.
Ports also need to be forwarded in the Vagrantfile. 4646 is already forwarded, but if a port other than the default is being used, that port needs to be added to the Vagrantfile and vagrant reload needs to be run.