29 Commits (9455805ceb11bb9b36aa28866cc960b14a48b80f)

Author	SHA1	Message	Date
Kenia	207491eaa7	ui: Update to service index page (#8775) ... * Add 'in service mesh ...' to the composite rows in Service List page * Add associated services count to terminating and ingress gateways in Service List page * Update mesh icon in icon-defintion files	4 years ago
John Cowen	5054d87a09	ui: Read-only CRD/Centralized Config Intentions (#8659)	4 years ago
John Cowen	31ad6e39ca	ui: Improved filtering and sorting (#8591)	4 years ago
Kenia	95094b8ddd	ui: Redesign Node list page (#8567) ... * Create ConsulNodeList component * Implement ConsulNodeList and the new Search/Sort to Node List page * Minor styling fix to align the first icons in composite row * Fix-up and add tests for the redesigned Node List page * Add Leader to composite row for Node List page * Add test for node leader	4 years ago
Kenia	0807a5ba14	ui: Redesign Node Lock Sessions Tab (#8535) ... * Add delay svg icon * Create ConsulLockSessionList component * Implement ConsulLockSession component in Lock Sessions tab * Create format-time helper * Add Invalidate button and fix up styling * Fixup and add additional tests	4 years ago
John Cowen	12b1bc28b4	ui: SSO Icon cleanup (#7959) ... 1. Removes all icons not supported by the backend 2. Adds other icons supported by the backend 3. If there is no icon available don't add CSS positioning for one	5 years ago
John Cowen	200945714a	UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) ... * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>	5 years ago
John Cowen	f21b17a1f2	UI: Improved Login/Logout flow inc SSO support (#7790) ... * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree	5 years ago
Kenia	b2ecc65d21	ui: Create PopoverSelect, CatalogToolbar, and update tests (#7489) ... * Create PopoverSelect component and styling * Create CatalogToolbar component and Styling * ui: Adds `selectable-key-values` helper (#7472) Preferably we want all copy/text to live in the template. Whilst you can achieve what we've done here with a combination of different helpers, as we will be using this approach in various places it's probably best to make a helper. We also hit an ember bug related to using the `let` helper and trying to access `thingThatWasLet.firstObject` (which can also be worked around using `object-at`). Moving everything to a helper 'sorted' everything. Probably worthwhile noting that if the sort option themselves become dynamic, I'm not sure if the helper here would actually react as you would expect (I'm aware that ember helpers on react on the root arguments, not necesarily sub properties of those arguments). If we get to that point this helper could take the same approach as what I believe ember-composable-helpers does to get around this, or move them to the view controller. If we do ever moved this to the view controller, we can still use the exported function from the new helper here to keep using the same functionality and tests we have here. * Create tests for sorting services with CatalogToolbar * Add rule to print 'ember/no-global-jquery' as a warning Co-authored-by: John Cowen <johncowen@users.noreply.github.com>	5 years ago
Kenia	12e2c93e6b	ui: Redesign - Service List page with Gateways (#7781) ... * Return all services except Proxies * Add Gateway icon to the codebase * Create and implement ConsulExternalSource component * Fix tests to work with new mock data and add a Gateway test * Update consul-api-double to 2.14.3	5 years ago
John Cowen	dd6506e994	ui: Add background-color: currentColor to all our icon masks (#7729) ... We currently define our 'decorational' iconography in our CSS via background images and or psuedo content. For coloring these we use `mask-image` and a background color. This commit adds a background-color: currentColor to our %with-mask placeholder that makes the color of these icons default to the `color` of the current element, meaning the icons now inherit from things like `:hover`. This can easily be overwritten as before by just setting the background-color on the icon manually as before.	5 years ago
Kenia	288316432b	ui: Redesign - Create ConsulExternalSource (#7632) ... * Create ConsulExternalSource with test and styling * Implement ConsulExternalSource to Service list page * Update icons for redesign * Refactor ListCollection and CompositeRow styling	5 years ago
Kenia	f39671d568	ui: Redesign Service List page (#7605) ... * Create GridCollection for nodes page with styling * Update ListCollection styling * Update TagList styling * Create CompositeRow styling component * Update ConsulServiceList component with styling * Create service health-checks helper * Add InstanceCount to the service model * Add tag-svg to codebase * Create and update tests for service-list page * Upgrade @hashicorp/consul-api-double to 2.14.0	5 years ago
John Cowen	1a7a1fb4f1	Upgrade to use structure-icons 1.8 (plus additional mask placeholders) (#7287)	5 years ago
John Cowen	b6915793d0	ui: Remove custom css-vars 'polyfill' and use native CSS props (#7249) ... * ui: Remove custom css-vars 'polyfill' and use native CSS props Previously we used a sort of polyfill for certain places where we needed CSS property-like behavior. This meant duplicating code between JS and CSS, specifically some of our SVG icons. We moved to CSS props only in the places where they are beneficial and populated the variables with our already existing SASS variables. This means we no longer have to duplicate CSS and we can remove our custom css-var helper/polyfill.	5 years ago
John Cowen	afafe677a3	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.	5 years ago
John Cowen	13eb536e24	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	5 years ago
John Cowen	aa680d5f0c	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	5 years ago
John Cowen	7044aa52c8	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	5 years ago
John Cowen	5a2fc5bffb	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.	5 years ago
John Cowen	ceebd53b81	ui: fix/replace magnifier icon (#6308)	5 years ago
John Cowen	d01ef7225a	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)	5 years ago
John Cowen	06b6aff8d0	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`	5 years ago
John Cowen	482426b13e	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)	6 years ago
John Cowen	eeb7a858e2	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	6 years ago
John Cowen	d46b059673	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.	6 years ago
John Cowen	7d89e519a2	UI: New ACLs (#4789) ... UI to accompany the new ACLs APIs	6 years ago
John Cowen	d0405ba8b9	UI: CSS Additions (mainly %frames) (#4623) ... * Move almost everything to use %frames * Fix pill styles of ACL types * Remove horizontal scrollbars from dom recycling scroller component * Make text areas look ok in Firefox * Remove ember-bulma-css * New form elements, break out %toggle * %button design tweaks * %form-element design tweaks * Better hashicorp logo * Small screen CSS improvements (#4624) 1. Reduce header size when there are no breadcrumbs 2. Make the filters toggleable, closed by default 3. Reduce the size of the footer on small screens 4. Hide all non-primary columns for forms 5. Slightly change the layout of various items, mainly buttons within forms 6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small screens	6 years ago
John Cowen	5ea748005c	UI: External Source markers (#4640) ... 1. Addition of external source icons for services marked as such. 2. New %with-tooltip css component (wip) 3. New 'no healthcheck' icon as external sources might not have healthchecks, also minus icon on node cards in the service detail view 4. If a service doesn't have healthchecks, we use the [Services] tabs as the default instead of the [Health Checks] tab in the Service detail page. 5. `css-var` helper. The idea here is that it will eventually be replaced with pure css custom properties instead of having to use JS. It would be nice to be able to build the css variables into the JS at build time (you'd probably still want to specify in config which variables you wanted available in JS), but that's possible future work. Lastly there is probably a tiny bit more testing edits here than usual, I noticed that there was an area where the dynamic mocking wasn't happening, it was just using the mocks from consul-api-double, the mocks I was 'dynamically' setting happened to be the same as the ones in consul-api-double. I've fixed this here also but it wasn't effecting anything until actually made certain values dynamic.	6 years ago