Commit graph

254 commits

Author SHA1 Message Date
Michael Lange 649873745f Treat legend term pairs as single wrapping elements 2020-10-15 10:30:34 -07:00
Michael Lange d9ac6a63c6 Add icons to denote draining or ineligibility of clients 2020-10-15 02:54:15 -07:00
Michael Lange 7477f32012 Label empty clients in the topo viz chart 2020-10-15 02:54:15 -07:00
Michael Lange f3aed88a10 Improved curves for allocation associations 2020-10-15 02:54:15 -07:00
Michael Lange 066502d408 Make the topo viz denser when there are >50 nodes
By hiding node details and making nodes interactive instead, we can pack
more allocations on a screen.
2020-10-15 02:54:15 -07:00
Michael Lange 6e55d8a6eb Conditionally use the FlexMasonry layout for datacenters within TopoViz 2020-10-15 02:54:15 -07:00
Michael Lange f27895c4c8 New FlexMasonry component implements a masonry layout using flexbox 2020-10-15 02:54:15 -07:00
Michael Lange d9083fdde6 Second attempt at a masonry layout 2020-10-15 02:54:15 -07:00
Michael Lange 4c155b5da4 CSS Grid based masonry layout
TBH, it's buggy and I don't like it.
2020-10-15 02:54:14 -07:00
Michael Lange fb1deb5c40 Updated alloc and cluster details on topo page 2020-10-15 02:54:14 -07:00
Michael Lange 5bc4d1f1d5 Associate sibling allocations by drawing lines 2020-10-15 02:54:14 -07:00
Michael Lange e4907dc647 Super rough allocation details, needs some style love 2020-10-15 02:54:14 -07:00
Michael Lange cab4e618fc Add cluster details to the topology page 2020-10-15 02:54:13 -07:00
Michael Lange 87a902db0c Touch up topo viz interactions 2020-10-15 02:54:13 -07:00
Michael Lange 831d27efd6 Fleshing out the first prototype of the topology visualization 2020-10-15 02:54:13 -07:00
Michael Lange b347141e0c Prototype of the topo viz
- Plot all datacenters
- For each datacenter, plot all nodes
- For each node, plot all allocations by memory and cpu
- For empty nodes, highlight the emptiness
- When hovering over allocations, give them visual focus
2020-10-15 02:54:13 -07:00
Michael Lange fc31f80880 Temporarily remove poststop from the UI
Since poststart and poststop are shipping separately, we can't ship them
both in the UI at the same time.
2020-08-31 19:32:38 -07:00
Buck Doyle de3504a738 Add poststart and poststop lifecycle phases 2020-08-26 09:55:42 -05:00
Michael Lange ecaee67ff1 Use the correct gray for the info details 2020-08-05 12:02:22 -07:00
Michael Lange 09f6bca470 New ScaleEventsChart component
Displays all scale events in the form of an annotated line chart. When
annotations are clicked, the timestamp, message, and meta propeties for
the event are displayed below the chart.
2020-08-05 12:02:22 -07:00
Michael Lange 21f3b7dfcc Add activeAnnotation property to line-chart 2020-08-05 12:02:22 -07:00
Michael Lange 2903d1f504 Stagger line chart annotations when they are too close 2020-08-05 12:02:22 -07:00
Michael Lange 8445e22faf Add annotations to the line chart component 2020-08-05 12:02:22 -07:00
Michael Lange 203f7e06b8 Present scaling events on the job task group page 2020-07-29 19:07:24 -07:00
Michael Lange 35054459c2 New fluid height modifier for the json viewer 2020-07-29 19:07:24 -07:00
Michael Lange 970ccedd1f
Merge pull request #8314 from hashicorp/f-ui/scaling-ux
UI: Scaling UI UX Improvements
2020-07-01 09:21:08 -07:00
Buck Doyle f7e8ab4302
Fix layering so logo is clickable (#8320)
The CSS I added in #8249 to make the search be properly
centred also made the logo unclickable as it was hidden
behind the centred element! This makes the logo stay
above the search container.
2020-06-30 15:22:31 -05:00
Michael Lange 7ad214f34a StepperInput UX improvements
- Click label to focus input
- Focusing input selects value
- Entering an invalid value reverts selection
- Entering a fractional number floors the value
2020-06-30 11:54:11 -07:00
Michael Lange 5d491167de Reset font weight for tooltips 2020-06-30 11:54:11 -07:00
Michael Lange a61bc49595
Merge pull request #8283 from hashicorp/b-ui/text-alignment-view-raw-file
UI: Fix text alignment for the "view raw file" button/link on the fs file viewer
2020-06-25 09:28:30 -07:00
Michael Lange 6c7d3f49d5
Merge pull request #8280 from hashicorp/f-ui/wide-monitor-logs
UI: Make monitor log output full-width
2020-06-25 09:22:54 -07:00
Buck Doyle bf7ed82def
Improve global search UX (#8249)
This updates the look of the search control, adds a hint about the slash
shortcut, adds highlighting of fuzzy search results, and addresses a few
edge case UX failures. It moves to using a fork of Ember Power Select
to handle an edge case where pressing escape would put the control
in an undesirable active-but-not-open state.
2020-06-25 08:51:52 -05:00
Michael Lange 18bf810936 Remove line-height override that breaks text alignment for anchors that look like buttons 2020-06-24 21:31:30 -07:00
Michael Lange 22f9faeb84 Make monitor log output full-width 2020-06-24 20:37:12 -07:00
Buck Doyle ee7141a59a
Add phase 1 of global search (#8175)
This introduces a DataCaches service so recently-updated collections don’t need
to be requeried within a minute, or based on the current route. It only searches
jobs and nodes. There are known bugs that will be addressed in upcoming PRs.
2020-06-19 13:05:28 -05:00
Michael Lange 6259e3ae5d Integrate the stepper input with the task group page 2020-06-18 22:32:56 -07:00
Michael Lange ff3653ddf6 Style the StepperInput component 2020-06-18 22:08:28 -07:00
Michael Lange 64cfa62c71 Make sure buttons in a button bar have a very visible focus state 2020-06-18 22:08:27 -07:00
Michael Lange 76c6a9d89f Prevent inline definition key/value pairs from breaking the key and value onto separate lines 2020-06-18 22:08:27 -07:00
Michael Lange 2739da75d6 Additional button-bar treatments for use in a table row 2020-06-18 22:08:27 -07:00
Michael Lange dfcfdf0293 Extend button-bar support to buttons 2020-06-18 22:08:27 -07:00
Michael Lange b4b00282dd When an icon is intended as text, it shouldn't have pointer events
This prevents the svg from being a target in click events.
2020-06-18 22:08:27 -07:00
Michael Lange f9819105c3 New xsmall button size 2020-06-18 22:08:27 -07:00
Michael Lange 6cb83c6297 Inline-block the buttons to remove weird text-flow spacing 2020-06-16 10:23:36 -07:00
Michael Lange e0fbd88d26 Monitor component and query param interaction 2020-06-16 10:23:35 -07:00
Michael Lange 19916dc028 Handle node-only views 2020-05-18 15:30:00 -07:00
Michael Lange 070f1003e2 Adjust gauge chart stories 2020-05-13 08:36:05 -07:00
Michael Lange fd27e83ba5 Bottom aligned columns variant 2020-05-13 08:36:05 -07:00
Michael Lange ef4e7ad401 Add gauge chart stories 2020-05-13 08:36:05 -07:00
Michael Lange 42e107851c Style the gauge chart component 2020-05-13 08:36:05 -07:00
Michael Lange 61a693c656 Refactor metrics styles to allow for standalone metrics 2020-05-13 08:36:04 -07:00
Michael Lange 105e7203cf Set color in addition to fill for the icon class
Structure icons have fill set to currentColor hardcored in their markup.
This mean setting fill to a color in CSS does nothing, but setting color
now does.
2020-05-06 17:21:47 -07:00
Buck Doyle 0b2fc7532d
UI: Remove Ember Freestyle (#7839)
This completes the migration to Storybook by replacing the colour palette and typeface components that I left out.
2020-05-06 15:11:15 -05:00
Jasmine Dahilig a9004faa11
UI: Add representations for task lifecycles (#7659)
This adds details about task lifecycles to allocations, task groups,
and tasks. It includes a live-updating timeline-like chart on allocations.
2020-04-30 08:15:19 -05:00
Buck Doyle 438aec636a
UI: update exec styles to match conventions (#7811) 2020-04-28 08:33:07 -05:00
Michael Lange 35d4b48644
Merge pull request #7577 from hashicorp/f-ui/csi-beta-label
UI: Change CSI to Storage and mark it as beta
2020-04-06 13:21:11 -07:00
Buck Doyle f10906e006
UI: add exec handling for dead jobs/task states (#7637)
This closes #7456. It hides the terminal when the job is dead and
displays an error when trying to open an exec session for a task
that isn’t running. There’s a skipped test for the latter behaviour
that I’ll have to come back for.
2020-04-06 14:08:22 -05:00
Buck Doyle fc7de8b153
UI: add live-updating to exec sidebar (#7499)
This closes #7454. It makes use of the existing watchable tools to
allow the exec popup sidebar to be live-updating. It also adds
alphabetic sorting of task groups and tasks.
2020-04-06 13:52:42 -05:00
Michael Lange 49019bd967 Make table foot fields consistent at all breakpoints
This effectively overrides Bulma's default field layout tweaks
at different breakpoints. This includes going from flex to block
and different font-sizes.
2020-04-02 13:41:41 -07:00
Michael Lange b1d5a77e76 Remove extranneous order property
The "default" order values as set by Bulma are different for different
breakpoints. Since this wasn't considering breakpoints, it resulted
in the unexpected reordering of pagination elements as different page
widths. Turns out removing this property gives us what we want.
2020-04-02 13:27:29 -07:00
Michael Lange 546751a9b4 Style the page size selector 2020-04-02 12:50:31 -07:00
Michael Lange 37a1a32209 Move beta to a tag 2020-04-01 10:49:47 -07:00
Michael Lange 28ba7e8075 Change CSI to Storage and mark it as beta 2020-03-31 18:21:55 -07:00
Buck Doyle d70c3fbb3e
UI: Add exec loading template (#7566)
This closes #7460. Before this, there was an incongruous flash
of the non-exec UI during loading.
2020-03-31 13:59:43 -05:00
Michael Lange 1bd6a69067
UI: Support for CSI (#7446)
Closes #7197 #7199

Note: Test coverage is limited to adapter and serializer unit tests. All
acceptance tests have been stubbed and all features have been manually
tested end-to-end.

This represents Phase 1 of #6993 which is the core workflow of CSI in
the UI. It includes a couple new pages for viewing all external volumes
as well as the allocations associated with each. It also updates
existing volume related views on job and allocation pages to handle both
Host Volumes and CSI Volumes.
2020-03-25 07:51:26 -05:00
Buck Doyle 674da96a59
UI: add exec terminal (#6697)
This connects Xterm.js to a Nomad exec websocket so people
can interact on clients via live sessions. There are buttons on
job, allocation, task group, and task detail pages that open a
popup that lets them edit their shell command and start a
session.

More is to come, as recorded in issues.
2020-03-24 18:22:16 -05:00
Michael Lange ccefc46912
Merge pull request #7099 from hashicorp/b-ui/mobile-styles-not-full-width
UI: Override the max-width on mobile to avoid losing space due to non-existent gutter menu
2020-02-07 14:27:50 -08:00
Michael Lange 1431343d18 Override the max-width on mobile to avoid losing space due to non-existent gutter menu 2020-02-07 14:22:00 -08:00
Michael Lange c7543ee020 Explicit transparent bg on popover actions 2020-02-07 14:17:13 -08:00
Michael Lange 38d23b5ba8 Add an animation for the initializing state 2020-01-31 12:56:11 -08:00
Michael Lange f00a50a55b Redo the node-status-light CSS to be icon-based 2020-01-31 12:56:08 -08:00
Michael Lange 0f8ea7d37a Allow for an icon within the node status light 2020-01-31 12:55:55 -08:00
Michael Lange 1599b8b5fc Disabled button styles 2020-01-30 21:29:28 -08:00
Michael Lange 75987840bb Tweak vertical spacing of headings 2020-01-23 16:34:37 -08:00
Michael Lange 7c6bf3b09c Increase the size and spacing of the toggle component 2020-01-23 16:34:35 -08:00
Michael Lange c7b7789bd4 Stack the popover menu under the subnav 2020-01-23 16:34:34 -08:00
Michael Lange 54d33f9ad7 Toggle bugs: focus and multiline alignment 2020-01-23 16:34:28 -08:00
Michael Lange 95e6068d5d New toggle component 2020-01-23 16:34:27 -08:00
Michael Lange 82a62089b3 Make outline buttons have a solid white background 2020-01-23 16:34:25 -08:00
Michael Lange 80642b8868 Modifiers to the two-step-button 2020-01-23 16:34:25 -08:00
Michael Lange 7097591281 Drain stop and update and notifications 2020-01-23 16:34:24 -08:00
Michael Lange 35671a3bd4 Fill in the drain strategy ribbon values 2020-01-23 16:34:22 -08:00
Michael Lange fd16612be3 Factor out the drain popover and implement its behaviors 2020-01-23 16:34:18 -08:00
Michael Lange ada745a59f Let dropdowns assume their full width 2020-01-23 16:34:17 -08:00
Michael Lange d1cf0e1054 More form styles as needed for the drain form 2020-01-23 16:34:16 -08:00
Michael Lange 01d0efb317 Multiline modifier for tooltips 2020-01-23 16:34:15 -08:00
Michael Lange 75c9e80251 Update the dropdown styles to be more similar to button styles 2020-01-23 16:34:14 -08:00
Michael Lange 20f83da76a PopoverMenu component 2020-01-23 16:34:14 -08:00
Michael Lange a8af3d67be Add tooltip to the eligibility control 2020-01-23 16:34:11 -08:00
Michael Lange 47daa980a5 Reformat the client detail page to use the two-row header design 2020-01-23 16:34:11 -08:00
Buck Doyle 576bcf554f
UI: Migrate to Storybook (#6507)
I originally planned to add component documentation, but as this dragged on and I found that JSDoc-to-Markdown sometimes needed hand-tuning, I decided to skip it and focus on replicating what was already present in Freestyle. Adding documentation is a finite task that can be revisited in the future.

My goal was to migrate everything from Freestyle with as few changes as possible. Some adaptations that I found necessary:
• the DelayedArray and DelayedTruth utilities that delay component rendering until slightly after initial render because without them:
  ◦ charts were rendering with zero width
  ◦ the JSON viewer was rendering with empty content
• Storybook in Ember renders components in a routerless/controllerless context by default, so some component stories needed changes:
  ◦ table pagination/sorting stories access to query params, which necessitates some reaching into Ember internals to start routing and dynamically generate a Storybook route/controller to render components into
  ◦ some stories have a faux controller as part of their Storybook context that hosts setInterval-linked dynamic computed properties
• some jiggery-pokery with anchor tags
  ◦ inert href='#' had to become href='javascript:;
  ◦ links that are actually meant to navigate need target='_parent' so they don’t navigate inside the Storybook iframe

Maybe some of these could be addressed by fixes in ember-cli-storybook but I’m wary of digging around in there any more than I already have, as I’ve lost a lot of time to Storybook confusion and frustrations already 😞

The STORYBOOK=true environment variable tweaks some environment settings to get things working as expected in the Storybook context.

I chose to:
• use angle bracket invocation within stories rather than have to migrate them soon after having moved to Storybook
• keep Freestyle around for now for its palette and typeface components
2020-01-21 15:46:32 -06:00
Buck Doyle 66ab14144a
ui: Change Run Job availability based on ACLs (#5944)
This builds on API changes in #6017 and #6021 to conditionally turn off the
“Run Job” button based on the current token’s capabilities, or the capabilities
of the anonymous policy if no token is present.

If you try to visit the job-run route directly, it redirects to the job list.
2020-01-20 14:57:01 -06:00
Buck Doyle 09067b4eb7
UI: Fix client sorting (#6817)
There are two changes here, and some caveats/commentary:

1. The “State“ table column was actually sorting only by status. The state was not an actual property, just something calculated in each client row, as a product of status, isEligible, and isDraining. This PR adds isDraining as a component of compositeState so it can be used for sorting.

2. The Sortable mixin declares dependent keys that cause the sort to be live-updating, but only if the members of the array change, such as if a new client is added, but not if any of the sortable properties change. This PR adds a SortableFactory function that generates a mixin whose listSorted computed property includes dependent keys for the sortable properties, so the table will live-update if any of the sortable properties change, not just the array members. There’s a warning if you use SortableFactory without dependent keys and via the original Sortable interface, so we can eventually migrate away from it.
2019-12-12 13:06:54 -06:00
Michael Lange d6bbd0f9e5 Use max-width to ensure the width rule is observed in Firefox 2019-10-10 10:34:33 -07:00
Michael Lange fd6d5b274f
Merge pull request #6048 from hashicorp/f-ui/alloc-fs-files
UI: Alloc FS: File Viewer
2019-08-19 10:36:28 -07:00
Michael Lange 38fce53936 Prevent a change in height when switching from a dir to a file 2019-08-08 15:41:47 -07:00
Michael Lange 2ed18864df Limit the width of the right page layout column
This was causing elements to flow off the page, since the element was
assuming 100% but also had a 250px margin for the left column.

This had previously been "fixed" by setting overflow-x: auto, but that
resulted in tooltips from being clipped.

This is a better solution to the same problem.
2019-08-08 10:00:48 -07:00
Michael Lange 2ff4027496 Minor fixes from code review 2019-08-07 15:11:32 -07:00
Buck Doyle 2bfbc2b41b
Remove transition animation from sort arrows (#6067)
It may be an Ember bug: in some circumstances, the
ember-transitioning-in class was persisting in table
sort links even after the transition completed. This
changes the transition animations to be targeted only
for breadcrumbs and directory links.
2019-08-06 09:55:35 -05:00
Michael Lange ddd35edb19 Add hollow variation to empty-message 2019-07-30 17:25:44 -07:00