Commit Graph

84 Commits

Author SHA1 Message Date
John Cowen 5df92916db
ui: Be more specific with the display toggling checkboxes (#7309) 2020-02-18 17:05:45 +00:00
John Cowen 5a52c361e5
ui: Fix for differences between uncompiled and compiled CSS (#7233)
We noticed that this relative positioning is not even applied when the CSS is
compiled/compressed. When looking via Web Inspector this style/selector
doesn't even appear even though it is in the CSS source.

This !important reduces the amount of selectors for this style rule,
which fixes the error, so potentially this isn't a specificity thing.
2020-02-06 20:13:13 +00:00
John Cowen 1f2b5a0091
ui: Fix wrapping service ids in the Node Detail > Services tab (#7149) 2020-01-28 14:43:32 +00:00
John Cowen 03f8bbb8a5
ui: Fix positioning of active icon in the selected menu item (#7148) 2020-01-28 14:42:20 +00:00
John Cowen 72ff1f0607
ui: New Confirmation Dialogs (#7007)
* ui: Change action-group to use new popup-menu component in intentions

* ui: Slight amends to aria-menu to prevent scrolling

* ui: Begin to use aria-menu/popover-menu for other elements

* Use a simpler, hackier method to fix up zIndexing

* ui: Implement new confirmation dialogs in other list views (#7080)

This includes another amend to the popover-menu in order to allow
mutiple confirmations/subpanels in the same popover menu.

The functionality added here to allow this is likely to change in the
future.
2020-01-22 12:08:29 +00:00
John Cowen efdae83a87
ui: Use structure-icons as much as possible (#6851)
* ui: Delete a bunch of CSS that we recently moved elsewhere

* ui: Add some masking placeholders

* Switch out hashicorp logo for one from structure-icons

* Change copy-button to use new copy-action icon

* Change secret-button to use new visibility-hide/show icons

* New folder icon for KVs

* Cleanup some of the icons we no longer use

* Switch from %with-exit to standard-like %with-exit-icon

* Move all chevrons to use structure-icons properly

* Use star-fill as much as possible

* Remove the remaining icons from icons/index plus the file itself
2020-01-16 09:10:32 +00:00
John Cowen 6e8a8a2bc0
ui: Various amends for 1.7beta (#6965)
* Remove empty init

* Actually make the disco chain endpoint send the nspace, note:

The backend doesn't support this as yet.

* Tweak the font size of flash-messages ever so slightly

* Make sure the nspace menu is kept up to date when creating a new one

* Move comment to the correct place

* Only refresh the namespace menu if you specifically created a nspace

* Change FIXMEs to TODOs as we are happy for these to wait until later
2019-12-18 18:27:54 +00:00
John Cowen e545c82e1e ui: Discovery Chain (#6746)
* Add data layer for discovery chain (model/adapter/serializer/repo)

* Add routing plus template for routing tab

* Add extra deps - consul-api-double upgrade plus ngraph for graphing

* Add discovery-chain and related components and helpers:

1. discovery-chain to orchestrate/view controller
2. route-card, splitter-card, resolver card to represent the 3 different
node types.
3. route-match helper for easy formatting of route rules
4. dom-position to figure out where things are in order to draw lines
5. svg-curve, simple wrapper around svg's <path d=""> attribute format.
6. data-structs service. This isn't super required but we are using
other data-structures provided by other third party npm modules in other
yet to be merged PRs. All of these types of things will live here for
easy access/injection/changability
7. Some additions to our css-var 'polyfill' for a couple of extra needed
rules

* Related CSS for discovery chain

1. We add a %card base component here, eventually this will go into our
base folder and %stats-card will also use it for a base component.
2. New icon for failovers

* ui: Discovery Chain Continued (#6939)

1. Add in the things we use for the animations
2 Use IntersectionObserver so we know when the tab is visible,
otherwise the dom-position helper won't work as the dom elements don't
have any display.
3. Add some base work for animations and use them a little
4. Try to detect if a resolver is a redirect. Right now this works for
datacenters and namespaces, but it can't work for services and subsets -
we are awaiting backend support for doing this properly.
5. Add a fake 'this service has no routes' route that says 'Default'
6. redirect icon
7. Add CSS.escape polyfill for Edge
2019-12-18 12:26:47 +00:00
John Cowen 31f36ce096 ui: Namespace Support (#6639)
Adds namespace support to the UI:

1. Namespace CRUD/management
2. Show Namespace in relevant areas (intentions, upstreams)
3. Main navigation bar improvements
4. Logic/integration to interact with a new `internal/acl/authorize` endpoint
2019-12-18 12:26:47 +00:00
John Cowen 3dfb41486e ui: %form-element-textarea > %form-area-textinput typo (#6952) 2019-12-18 12:26:46 +00:00
John Cowen e190615f97 ui: Fixes styling of 'duplicate intention' error message (#6936) 2019-12-18 12:26:46 +00:00
John Cowen 1b5658d5ac ui: Use base fonts throughout the app (#6881)
We've had a set of %placeholders in our base styles for quite a while
but not butten the bullet to use them. This begins to use them.

We had to make a small amount of tweaks to base whilst doing this, but
its as we'd prefer there to be as few font placeholders as possible. We
might/should be able to reduce these further at somepoint, or
potentially rename them. We currently have six header fonts (or 4 header
fonts/2 strong body fonts) and 3 body fonts.

We also noticed an empty CSS file and deleted that while we were here.
We also noticed that the bottom border of structure tabs was a pixel
larger than ours so we tweaked that here also.
2019-12-18 12:26:45 +00:00
John Cowen 421bbd9987 ui: Ensure %app-content > %app-view-content rename is complete (#6843)
In https://github.com/hashicorp/consul/pull/6575 we changed the name of
%app-content to %app-view-content, but missed a few places that needed
renaming, this corrects that.
2019-12-18 12:26:44 +00:00
John Cowen f52e1f607d ui: Expose checks (#6575)
Adds visibility for `Expose.Checks` config setting for proxies.

1. Adds an 'Exposed Path' tab to the proxy detail page to show the user information on exposed paths.
2. If the users has exposed their healthchecks we also add this information to the Service detail page for this proxy (only for http2 and gRPC checks)
2019-12-18 12:26:43 +00:00
John Cowen eb7b69cc24 ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495)
This includes an update of our CSS npm module. The majority of this is
just moving files from one folder to another.

1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs
2. %checkbox-group: Moved
3. %radio-group: Moved
4. %sliding-toggle: Moved (used to be called just %toggle)
5. %form-elements: Moved and added a new %inline-alert for form field
messaging (see Structure design system)
6. %action-group is now a composition of %menu-panel, %toggle-button,
plus edits to existing style to bring the %action-groups inline with the
dropdowns from Structure). %action-group also includes a composed
%confirmation-alert that is yet to be include. This will be compiled out
until we integrate it.

We've also removed some of our old icon placeholders as the above
work seased to use some of them.

Now we done this I'd say all in all over half of our CSS components now
use the CSS npm module.

The CSS specific to Consul UI also uses much of this CSS module by way
of helper placeholders such as our %frames.
2019-12-18 12:26:43 +00:00
John Cowen fc951c9c0b ui: Remove `$radius-small` in favour of the `$decor-*` ones in `base` (#6605) 2019-12-18 12:26:40 +00:00
Dmitry Shemin 979570c7a3 ui: [bugfix] Tag wrapping on detail pages (#6478)
Makes sure that tags wrap on the detail pages for service and nodes whilst making sure they don't wrap on the listing pages.
2019-09-17 17:29:04 +01:00
John Cowen a1bebaba4a ui: Adds a `sort-control` component for asc/desc sorting of columns etc (#6034)
This adds the component but doesn't yet use it anywhere. No tests
are added here as there isn't an awful lot to test.
2019-09-04 08:35:16 +00:00
John Cowen 5cf063fc8a ui: Leader icon for node listing view (#6265)
- yarn upgrade consul-api-double which includes `status/leader`
- add all the ember-data things required to call a new endpoint
- Pass the new leader variable through to the template
- use the new leader variable in the template to set a leader
- add acceptance testing to verify leaders are highlighted
- Change testing navigation/api requests to status/leader (on the node listing page, status/leader is now the last get request to
be called).
- Template whitespace commit (less indenting)
- adds a test to to assert no errors happen with an unelected leader
2019-09-04 08:35:16 +00:00
John Cowen 7db707c8b3 ui: fix/replace magnifier icon (#6308) 2019-09-04 08:35:15 +00:00
John Cowen e6aaabaddb ui: Change layout styling for healthcheckoutput, add CheckID (#6195) 2019-09-04 08:35:12 +00:00
John Cowen 5d2e1ce19b ui: Add `stats-card` component, integrate more `@hashicorp/structure-icons` (#6021)
1. Rebuild the heathchecked-resource component now we can copy and paste
2. As the above rebuild came with new icons, we also swapped out 'most'
of the other areas where we were using these new icons, plus any icons
that were effected by the new icon placeholders
3. Begin to remove more and more of the project specific icons (now
replaced by the shared ones)
2019-09-04 08:35:11 +00:00
John Cowen cf83e9e8ad ui: Be more exact with intent for table truncation (#6023)
Truncation should only happen currently on table content if the tag
within the td is the only child
2019-09-04 08:35:09 +00:00
John Cowen 2c5c84f9d2 ui: {{phrase-editor}} amends (#5991)
1. Re-focus the input element on phrase removal
2. Move all actions to `actions:`
3. Move to a form looking `value` rather than `items`
4. Move placeholder functionalit yinto the component
5. Force DDAU instead of two way binding with `slice` and `onchange`
6. Begin to deprecate the `searchable` interface
2019-09-04 08:35:07 +00:00
John Cowen 81637e2138 ui: CSS Components Migration (#5913)
Migrate roughly half of the base components into base
Adds a target for easily formatting CSS

Further CSS amends/migration (#5921)

1. tooltips within tables where a slightly bit troublesome due to a mix
of `inline-flex`, `overflow` and the need for truncation. This refineds
tooltips a slight bit more to work 'everywhere'.
2. We also move tooltip to use the correct color and min-width from
structure, but we overwrite the min-width here until we get confirmation
on widths/alignment of text within a tooltip.
3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings
4. Now we inline-flex our table cells, it means it is impossible to
truncate text without wrapping it in another element. This wraps all
Description like text in `<p>` tags. Generally the first column of text
is already wrapped in an `<a>` tag. Other items such as consul tags and
policy names etc get 'cutoff' rather than truncated.
5. We are now using all the icons from `@hashicorp/structure-icons`
2019-09-04 08:35:01 +00:00
John Cowen d3930d55aa
ui: Adds readonly meta data to the serviceInstance and node detail pages (#6196) 2019-08-02 13:53:52 +02:00
John Cowen b143a3bb66
ui: Gateway Addresses (#6075)
- Removes 'type' icons (basically the proxy icon, not the text itself)

- Add support for Mesh Gateways plus their addresses
This adds a 'Mesh Gateway' type label to service and service instance
pages, plus a new 'Addresses' tab if the service is a Mesh Gateway
showing a table of addresses for the service - plus tests
2019-07-05 09:07:25 +01:00
John Cowen e455648f96
ui: Adds tick whilst editing the link template in the Settings area (#5820)
1. Amends our `base` animation placeholder to always reset
transition-duration. This has no effect on other components that are
already using this animation.
2. Adds a confirming class whenever a key is pressed, to show the green
tick. Uses CSS via `transition-delay` for debouncing.
2019-05-17 12:33:12 +01:00
John Cowen 2507730feb
ui: Ensure room for non-hidden scrollbars (#5802) 2019-05-08 09:59:57 +01:00
John Cowen 9e9150d85a
ui: Make the proxy icon full size in service listings (#5799) 2019-05-08 09:59:26 +01:00
John Cowen 45bb711535
ui: Uses the default cursor instead of a pointer for upstream rows (#5785) 2019-05-07 14:09:57 +01:00
John Cowen a43f523428 ui: Fix CSS related to icons and h2 changes done in different PRs
The way icons are positioned was changed to enable icons for policy
names, and in a separate PR h2's where altered to provide a nicer
looking settings page. Once these PR's where merged together they
slighly effected each other. This commit tweaks the CSS to refine, but
will be revisted at a later date
2019-05-01 19:01:32 +00:00
John Cowen 7021433185 ui: dashboard links (#5704)
This PR adds a new {{template-anchor}} component. This component lets you specify a 'href template' in a handlebars like format instead of a normal string href. This template will be interpolated with the contents of a vars="" attribute.

Also contains code to add an extra UI Setting to be able to store a template to be used for this anchor in localStorage
2019-05-01 18:22:38 +00:00
John Cowen 81f209d71e UI: ACL Roles (#5635)
Adds support for ACL Roles and Service Identities CRUD, along with necessary changes to Tokens, and the CSS improvements required.

Also includes refinements/improvements for easier testing of deeply nested components.

1. ember-data adapter/serializer/model triplet for Roles
2. repository, form/validations and searching filter for Roles
3. Moves potentially, repeated, or soon to to repeated functionality
into a mixin (mainly for 'many policy' relationships)
4. A few styling tweaks for little edge cases around roles
5. Router additions, Route, Controller and templates for Roles

Also see: 

* UI: ACL Roles cont. plus Service Identities (#5661 and #5720)
2019-05-01 18:22:37 +00:00
John Cowen 08c5b376e7 ui: Search improvements (#5540)
* ui: Replaces Service listing filterbar with a phrase-editor search (#5507)

1. New phrase-editor restricting search to whole phrases (acts on
enter key). Allows removal of previously entered phrases
2. Searching now allows arrays of terms, multiple terms work via AND
2019-05-01 18:22:36 +00:00
John Cowen 27a3fc3276 ui: Alter resizing for tabular-collection for sizing based on rows (#5586) 2019-05-01 18:22:31 +00:00
John Cowen d2b1698c0d ui: Improvements to modal-dialog (#5585)
1. If the modal gets bigger than 80% of the viewport height a scrollbar
will be shown. Currently there isn't anywhere it can get this big, but
future work involves possible larger modals
2. Usually its difficult to figure out which was the 'unchecked' radio
button using an onchange event. Luckily ember/handlebars changes its
properties after the onchange event, so knowing that and using an extra
data-checked attribute set via ember, we can figure out which radio
button has been 'unchecked'. This means the logic for opening an
closing modals becomes slightly easier
2019-05-01 18:22:30 +00:00
John Cowen f1c8db1447 UI: Amends blocking queries text and toggle component in settings (#5467) 2019-05-01 18:22:20 +00:00
John Cowen e615d9f7eb ui: Add proxy icons to proxy services and instances where appropriate (#5463) 2019-05-01 18:22:19 +00:00
John Cowen 75d8abd562 UI: Add forking based on service instance id existence (#5392)
* ui: Add forking based on service instance id existence

Proxies come in 2 flavours, 'normal' and sidecar. We know when a proxy
is a sidecar proxy based on whether a DestinationServiceID is set.

LocalServiceAddress and LocalServicePort are only relevant for sidecar
proxies.

This adds template logic to show different text depending on this
information.

Additionally adds test around connect proxies (#5418)

1. Adds page object for the instance detail page
2. Adds further scenario steps used in the tests
3. Adds acceptance testing around the instance detail page. Services
with proxies and the sidecar proxies and proxies themselves
4. Adds datacenter column for upstreams
5. Fixes bug routing bug for decision as to whether to request proxy
information or not
2019-05-01 18:22:15 +00:00
John Cowen d2de256fa4 ui: Amend breakpoints for new numberless filter buttons (#5381) 2019-05-01 18:22:13 +00:00
John Cowen b1d5409d1c UI: Service Numbers (#5348)
Add totals to some listing views, remove healthcheck totals

1. Adds markup to render totals for Services, Nodes, Intentions and v1
ACLs
2. Removes counts from healthcheck filters, and therefore simplify text,
moving the copy to the templates
3. Alter test to reflect the fact that the text of the buttons are no
static in the component template rather than a dynamic attribute
2019-05-01 18:22:11 +00:00
John Cowen e0326c3b0a UI: Service Instances (#5326)
This gives more prominence to 'Service Instances' as opposed to 'Services'. It also begins to surface Connect related 'nouns' such as 'Proxies' and 'Upstreams' and begins to interconnect them giving more visibility to operators.

Various smaller changes:

1. Move healthcheck-status component to healthcheck-output
2. Create a new healthcheck-status component for showing the number of
checks plus its icon
3. Create a new healthcheck-info component to group multiple statuses
plus a different view if there are no checks
4. Componentize tag-list
2019-05-01 18:22:10 +00:00
John Cowen d49cf9d3c4 ui: Adds warning flash messages (yellow with warning icon) (#5033) 2019-05-01 18:21:52 +00:00
John Cowen 93ebf086e0 UI: Use buttons instead of anchors where appropriate (#4939)
Use buttons instead of anchors where appropriate
2019-05-01 18:21:45 +00:00
John Cowen 99070f2983 UI: CSS Refactor (#4919)
- Adds full set of svg icons as CSS/Sass variables to the source
- Starts picking out some frame-grays, whilst commenting in possibles
- Remove color prefixing

The prefixes `ui-` and `brand-` for colors hav been removed. This makes
colors slightly easier to type.
In order to differentiate between brand colors and 'normal' colors, normal
colors are named as 'true colors' i.e. blue, red, green etc etc
whereas the brand colors used a more premium sounding name such as
'steel' for vault gray, 'magenta' for consul, 'cobalt' for vagrant etc etc.
2019-05-01 18:21:38 +00:00
John Cowen 5eb5065f70
UI: Text change and clarity Node Health > Health Checks (#5115)
Text change Node Health > Health Checks
Also adds an info icon and tooltip to Health Checks column header
2019-01-17 09:20:00 +00:00
John Cowen 741ae50c9b
ui: Correctly escape an inline svg icon (#5032) 2018-12-04 17:02:59 +00:00
John Cowen 42919e91bb
ui: Adds multi syntax linting to the code editor (#4814) 2018-10-19 17:36:38 +01:00
John Cowen 52a62f2b8d UI: New ACLs (#4789)
UI to accompany the new ACLs APIs
2018-10-19 08:45:05 -07:00