199 Commits (5e5dbedd47a5f875b60e241c5555a9caab595246)

Author	SHA1	Message	Date
John Cowen	32a619ae99	ui: Add tab navigation to the browser history/URLs (#7592) ... * ui: Add tab navigation to the browser history/URLs This commit changes all our tabbed UI interfaces in the catalog to use actual URL changes rather than only updating the content in the page using CSS. Originally we had decided not to add tab clicks into the browser history for a variety of reasons. As the UI has progressed these tabs are a fairly common pattern we are using and as the UI grows and stabilizes around certain UX patterns we've decided to make these tabs 'URL changing'. Pros: - Deeplinking - Potentially smaller Route files with a more concentrated scope of the contents of a tab rather than the entire page. - Tab clicks now go into your history meaning backwards and forwards buttons take you through the tabs not just the pages. - The majority of our partials are now fully fledged templates (Octane 🎉) Cons: - Tab clicks now go into your history meaning backwards and forwards buttons take you through the tabs not just the pages. (Could be good and bad from a UX perspective) - Many more Route and Controller files (yet as mentioned above each of these have a more reduced scope) - Moving around the contents of these tabs, or changing the visual names of them means updates to the URL structure, which then should potentially entail redirects, therefore what things that seem like straightforwards design reorganizations are now a little more impactful. It was getting to the point that the Pros outweight the Cons Apart from moving some files around we made a few more tiny tweaks to get this all working: - Our freetext-filter component now performs the initial search rather than this happening in the Controller (remove of the search method in the Controllers and the new didInsertElement hook in the component) - All of the <TabNav>'s were changed to use its alternative href approach. - <TabPanel>s usage was mostly removed. This is th thing I dislike the most. I think this needs removing, but I'd also like to remove the HTML it creates. You'll see that every new page is wrappe din the HTML for the old <TabPanel>, this is to continue to use the same HTML structure and id's as before to avoid making further changes to any CSS that might use this and being able to target things during testing. We could have also removed these here, but it would have meant a much larger changeset and can just as easily be done at a later date. - We made a new `tabgroup` page-object component, which is almost identical to the previous `radiogroup` one and injected that instead where needed during testing. * Make sure we pick up indexed routes when nspaces are enabled * Move session invalidation to the child (session) route * Revert back to not using didInsertElement for updating the searching This adds a way for the searchable to remember the last search result instead, which changes less and stick to the previous method of searching.	5 years ago
John Cowen	5dad95faf1	ui: Add `<ConsulMetadataList />` and use it in 2 places (#7568) ... We previoulsy had some pretty straightforward duplicated code for rendering our metadata list for both Service Metadata and Node Metadata. This moves this code into a component.	5 years ago
John Cowen	c20cff9bf5	ui: Moves intentions listing and form into components (#7549) ... Whilst we tried to do this with the smallest amount of changes possible, our acceptance tests for trying to submit a blank form started failing due to usage of `destroyRecord`, its seems that the correct way to achieve the same thing is to use `rollbackAttributes` instead. We changed that here and the tests pass once again. Furture work related to this will involve change the rest of the UI where we use `destroyRecord` to achieve the same thing, to use `rollbackAttributes` instead	5 years ago
John Cowen	8986b6ad7b	ui: Move to new ember nested file structure for components (#7403) ... * ui: Move components to the new nested structure * Move data-test attribute to the correct HTML element We don't currently rely on this, but was incorrectly placed on the input rather than the label tag * Fix up left over curly bracket components that were causing issues For some reason the combination of: 1. Old style curly bracket components 2. data-test-* attributes 3. Moving to the new component file structure Meant that our data-test-* selectors where no longer being rendered. Whilst this had no effect on the app, it meant our tests suite could no longer select DOM elements in order to assert various things. Moving the old style curly bracket components to the new style XML/Angle bracket format fixes the issue * Update ui-v2/app/templates/dc/nodes/-services.hbs Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com> * Update ui-v2/app/templates/dc/nodes/-services.hbs Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com> Co-authored-by: Greg Hoin <1416421+gregone@users.noreply.github.com>	5 years ago
John Cowen	2ad0f652e7	ui: Install ref modifier and use it instead of dom selecting (#7383)	5 years ago
John Cowen	2f28232df0	ui: Upgrade to ember 3.16 Octane Edition (#7334) ... * v3.12.0...v3.16.0 * Upgrades * Remove old wormhole fix * Fixup ember power select (camelcasing) * Fixup immedaitely closing dropdown When clicking on the syntax selector, it seemed like an extra click event was firing from the label, which then immediately closed the dropdown. By adding a for="" attribute this event isn't passed to the dropdown menu and therefore doesn't immediately close * Fix up integration tests with new style (plus standardize titles) * Temporarily disable some template linting rules * Add required methods (even though they aren't used anywhere) * Ensure event sources get closed on destruction	5 years ago
Kenia	397757ae62	ui: Create CSS variables for box-shadowing consistency (#7337) ... * Table - Lowest (on-hover of table items) * Buttons - Middle * Form-elements - Removed, no box-shadowing in input forms mocks. * Menu-panel -High * Modal-dialog - Highest * Stats-card -Middle/High(Active) * Tooltip - Middle * Card - Middle * Expanded-single-select - Middle * Tabular-details - High * Discovery chain - High	5 years ago
Kenia	191496e4a5	ui: Create a helper to show the last 8 characters of token Accessor ID (#7327) ... * Create substr helper * Create a test for the new substr helper * Display the last 8 characters of token Accessor ID in the Token lists page	5 years ago
John Cowen	aea3d00a9d	ui: Move to angle brackets for ember components (#7321) ... * Modify templates with codemods angle brackets * ui: Fix up problem with intention filter action attribute Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>	5 years ago
John Cowen	8e5cb78c1c	ui: Add new Help menu with links to docs, learn and GH (#7310)	5 years ago
John Cowen	771973a713	ui: Add consul-service-list presentational component (#7279) ... This commit moves our service list into a new presentational component, and is therefore mainly just moving things around. The main thing moved here is the logic required to resizing columns correctly is now moved to a component instead of the controller	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	6ffe0e6fe4	ui: Use the `each key=""` parameter to force ember to reuse DOM (#7550) ... Ember tries to reuse DOM elements when it can but as ember looks for changes to objects rather than the DOM itself sometimes. This and the fact that an objects identity may change even though its value hasn't, results in ember occasionally re-mutating DOM when it doesn't need to. The `each` helper includes a `key` attribute to hint to ember what it should look for when deciding whether something has changed, rather than the objects identity. https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/each#specifying-keys We use this here to fix an issue where DOM was being redrawn after the user had scrolled the page and was therefore resetting the scroll back to 0 (the top of the page)	5 years ago
John Cowen	5f625666b4	ui: Enable recovery from an unreachable datacenter (500 error) (#7404) ... For URL maintenance reasons we store the last visited DC in localStorage incase you come back to a page (for example settings) that doesn't have a dc in the URL. A problem arises here if the last DC you tried to visit is unreachable. The first fix here clears out the last visited DC from localStorage if the API has errored out. Secondly, our `href-mut` helper which mutates the current current and replaces 'parts' in the URL rather than the whole thing functioned by detecting the current route/URL you are on an 'mutating' that. A problem arose here as even though you might be on the `/ui/dc-1/services` URL the actual route is the 'error' route which does not have a URL that can be changed properly. The second fix here uses route.currentRoute.name over route.currentRouteName. The latter is equal to error when an error occurs whereas the former gives you the name of the route before the error happened, which is actually what we want/the intent here. ie. when `router.currentRouteName === 'error'` then `router.currentRoute.name === Name Of Route Before It Errored` it seems	5 years ago
John Cowen	468e82dcf9	ui: Alter position of logic for showing the Round Trip Time tab to prevent DOM refresh (#7377) ... * ui: Move tomography length check inside of the partial Previously we checked the length of tomography.distances to decide whether to show the RTT tab or not. Previous to our ember upgrade this would not cause a DOM reload of so many elements (i.e. all of the tab content). Since our ember upgrade, any change to tomography (so not necessarily the length of distances) seems to fire a change to the length (even if the length remains the same). The knock on effect of this is that the array of tab panels seems to be recalculated (but remain the same) and all of the tab panels are completely re-rendered, causing the scroll of the page to be reset. This commit moves the check for tomography.distance.length to the lower down with the loop, which means the array of tab panels always remains the same, which consequently means that the entire array of tab panels is never re-rendered entirely, and therefore fixes the issue.	5 years ago
John Cowen	ad3b5327d2	ui: Discovery chain improvements (#7222) ... * ui: remove the default word when describing routes * ui: Avoid mutating the chain and look for the default edges more safely * ui: Use not null check instead of a truthy check for showing disco-chain * ui: Upgrade consul-api-double for better disco-chain mocks/fixtures	5 years ago
Kenia	773b092a64	ui: Add ability to search nodes listing page with IP Address (#7204) ... * Update search field placeholder to display `Search` * Add an acceptance test to search node listings with node name and IP Address * Update and add unit tests for filter/search node listing with IP Address	5 years ago
Kenia	c706089c9f	ui: Hides the Routing tab for a service proxy (#7195) ... * Adds conditional in route to not make discovery-chain request if service kind is equal to `connect-proxy` or `mesh-gateway` * Adds conditional in template to not show Routing tab if `chain` returns as null * Creates a new acceptance test to test the Routing tab not being displayed for a service proxy * Adds `tabs` to the services/show page object	5 years ago
Kenia	b9e023dfe1	ui: Adds an acceptance test for hiding Blocking Queries (#7162) ... * Adds an acceptance test for hiding Blocking Queries * Creates a new scenario - If a user adds CONSUL_UI_DISABLE_REALTIME to localStorage, the Blocking Queries section is hidden. * Updates page assertion to accept functions and booleans as properties * ui: Fix "don't see" step to watch for the different pageObject error ember-cli-page object seems to throw a an error with a different message depending on how you call a function: currentPage()[property]() // message = 'Element not found' const prop = currentPage()[property]; prop() // message = 'Something about destructuring' This changes the step/test/assertion to ensure we check for both types of errors Co-authored-by: John Cowen <johncowen@users.noreply.github.com>	5 years ago
John Cowen	f45880bffe	ui: Fix sticky nspace menu (#7164) ... * ui: Fix typo expanded > ariaExpanded * ui: Add the things we need to test this * ui: Add tests for testing the menu closes when clicked * ui: Ensure the aria-menu closes on route change	5 years ago
John Cowen	3eec5edadf	ui: Discovery-Chain: Cope with some edge case configs (#7174) ... * ui: Discovery-Chain: Cope with redirects that have failovers We found a few stranger configurations for discovery-chain, one of which was redirects that can then failover. We altered the parsing here to include 2 passes, one to organize the nodes into resolvers and children/subsets based on the nodes themselves, which includes adding the failovers to resolvers and subsets. We then do a second pass which can more reliably figure out whether a target is a redirect or a failover (target failovers don't have a corresponding node), this then adds the redirect children to the already exising resolver (from the first pass) and then checks if the redirect also has failovers and adds those if so. * ui: Check to see if we have a user configured default route or not ...if we don't add one so the visualization looks complete	5 years ago
John Cowen	ac60338269	ui: Add live updates/blocking queries to the Intention listing page (#7161) ... * ui: Enable blocking queries/live updates for intentions * ui: Add acceptance tests for intention blocking queries * ui: Add copy to explain that intentions are also now 'real time'	5 years ago
Kenia	ff315c95fd	ui: Implements the ember-page-title addon to the UI (#7118) ... * Installs ember-page-title 5.x * Adds a page title to all template files that need one * Adds an assertion step to test the page titles	5 years ago
John Cowen	1ff8678df7	ui: Remove the Policy/Service Identity selector from nspaces (#7124) ... When editing Nspaces, although you can assign policies to a nspace using PolicyDefaults you cannot assign a Service Identity to a policy like you can when adding a policy to a token. This commit adds an extra attribute to our policy-form/policy-selector component so you can disable this setting. At a later date we may change this to have a conficgurable `<Slot />` instead. Simple acceptance tests is included here	5 years ago
John Cowen	327aac9fe9	ui: Acceptance test improvements to prepare for more NS tests (#6980) ... * ui: Acceptance test improvements to prepare for more NS tests * ui: Namespace acceptance testing (#7005) * Update api-double and consul-api-double for http.body * Adds places where we missed passing the nspace through * Hardcode nspace CRUD to use the default nspace for policies and roles * Alter test helpers to allow us to control nspaces from the outside * Amends to allow tests to account for namespace, move ns from queryParam 1. We decided to move how we pass the namespace value through to the backend when performing write actions (create, update). Previoulsy we were using the queryParam although using the post body is the preferred method to send the Namespace details through to the backend. 2. Other various amends to take into account testing across multiple namespaced scenarios * Enable nspace testing by default * Remove last few occurances of old style http assertions We had informally 'deprecated' our old style of http assertions that relied on the order of http calls (even though that order was not important for the assertion). Following on from our namespace work we removed the majority of the old occrances of these old style assertions. This commit removes the remaining few, and also then cleans up the assertions/http.js file to only include the ones we are using. This reduces our available step count further and prevents any confusion over the usage of the old types and the new types. * ui: Namespace CRUD acceptance tests (#7016) * Upgrade consul-api-double * Add all the things required for testing: 1. edit and index page objects 2. enable CONSUL_NSPACE_COUNT cookie setting 3. enable mutating HTTP response bodies based on URL * Add acceptance test for nspace edit/delete/list and searching	5 years ago
Kenia	b836a772fc	ui: Checks env CONSUL_UI_DISABLE_REALTIME to show/hide blocking queries toggle (#7099) ... Adds a conditional that checks env CONSUL_UI_DISABLE_REALTIME to show/hide the Blocking Queries toggle in the Settings page.	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	ac613993bb	ui: Keyboard navigation improvements (#7090) ... * ui: Improve keyboard access for some custom components * ui: Add some accessibility related metadata	5 years ago
John Cowen	e15d1466aa	ui: Discovery Chain Improvements (#7036) ... * Reorganize resolvers so its clearer what's happening * Use entire route definition for id * Clean up a tiny bit more, use guid for ids instead of JSON * ui: Externalize disco-chain utils and add initial unit testing * Add some click outside-ness for de-highlighting things	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	06d09d11f1	ui: Move slots to use attributes over positional params (#7032) ... * Change all instances of yield/block-slots to use attributes over positional arguments * Remove the ability to use yield/block-slots with positional params	5 years ago
John Cowen	18bafaec35	ui: Cope with the possibility of receiving no namespaces (#6975)	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	e6ecb47765	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)	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	b3b32dc0f6	ui: UI Release Merge (ui-staging merge) (#6527) ... ## HTTPAdapter (#5637) ## Ember upgrade 2.18 > 3.12 (#6448) ### Proxies can no longer get away with not calling _super This means that we can't use create anymore to define dynamic methods. Therefore we dynamically make 2 extended Proxies on demand, and then create from those. Therefore we can call _super in the init method of the extended Proxies. ### We aren't allowed to reset a service anymore We never actually need to now anyway, this is a remnant of the refactor from browser based confirmations. We fix it as simply as possible here but will revisit and remove the old browser confirm functionality at a later date ### Revert classes to use ES5 style to workaround babel transp. probs Using a mixture of ES6 classes (and hence super) and arrow functions means that when babel transpiles the arrow functions down to ES5, a reference to this is moved before the call to super, hence causing a js error. Furthermore, we the testing environment no longer lets use use apply/call on the constructor. These errors only manifests during testing (only in the testing environment), the application itself runs fine with no problems without this change. Using ES5 style class definitions give us freedom to do all of the above without causing any errors, so we reverted these classes back to ES5 class definitions ### Skip test that seems to have changed due to a change in RSVP timing This test tests a usecase/area of the API that will probably never ever be used, it was more testing out the API. We've skipped the test for now as this doesn't affect the application itself, but left a note to come back here later to investigate further ### Remove enumerableContentDidChange Initial testing looks like we don't need to call this function anymore, the function no longer exists ### Rework Changeset.isSaving to take into account new ember APIs Setting/hanging a computedProperty of an instantiated object no longer works. Move to setting it on the prototype/class definition instead ### Change how we detect whether something requires listening New ember API's have changed how you can detect whether something is a computedProperty or not. It's not immediately clear if its even possible now. Therefore we change how we detect whether something should be listened to or not by just looking for presence of `addEventListener` ### Potentially temporary change of ci test scripts to ensure deps exist All our tooling scripts run through a Makefile (for people familiar with only using those), which then call yarn scripts which can be called independently (for people familar with only using yarn). The Makefile targets always check to make sure all the dependencies are installed before running anything that requires them (building, testing etc). The CI scripts/targets didn't follow this same route and called the yarn scripts directly (usually CI builds a cache of the dependencies first). For some reason this cache isn't doing what it usually does, and it looks as though, in CI, ember isn't installed. This commit makes the CI scripts consistently use the same method as all of the other tooling scripts (Makefile target > Install Deps if required > call yarn script). This should install the dependencies if for some reason the CI cache building doesn't complete/isn't successful. Potentially this commit may be reverted if, the root of the problem is elsewhere, although consistency is always good, so it might be a good idea to leave this commit as is even if we need to debug and fix things elsewhere. ### Make test-parallel consistent with the rest of the tooling scripts As we are here making changes for CI purposes (making test-ci consistent), we spotted that test-parallel is also inconsistent and also the README manual instructions won't work without `ember` installed globally. This commit makes everything consistent and changes the manual instructions to use the local ember instance that gets installed via yarn ### Re-wrangle catchable to fit with new ember 3.12 APIs In the upgrade from ember 3.8 > 3.12 the public interfaces for ComputedProperties have changed slightly. `meta` is no longer a public property of ComputedProperty but of a ComputedDecoratorImpl mixin instead. 7e4ba1096e/packages/%40ember/-internals/metal/lib/computed.ts (L725) There seems to be no way, by just using publically available methods, to replicate this behaviour so that we can create our own 'ComputedProperty` factory via injecting the ComputedProperty class as we did previously. 3f333bada1/ui-v2/app/utils/computed/factory.js (L1-L18) Instead we dynamically hang our `Catchable` `catch` method off the instantiated ComputedProperty. In doing it like this `ComputedProperty` has already has its `meta` method mixed in so we don't have to manually mix it in ourselves (which doesn't seem possible) This functionality is only used during our work in trying to ensure our EventSource/BlockingQuery work was as 'ember-like' as possible (i.e. using the traditional Route.model hooks and ember-like Controller properties). Our ongoing/upcoming work on a componentized approach to data a.k.a `<DataSource />` means we will be able to remove the majority of the code involved here now that it seems to be under an amount of flux in ember. ### Build bindata_assetfs.go with new UI changes	5 years ago
John Cowen	20984e2a73	ui: re-remove the `Type` header on the service listing page (#6439) ... The `Type` column used for giving details on what type of a service each item is was removed in https://github.com/hashicorp/consul/pull/6075. As a result of keeping long running branches in sync, this change was partly reverted in an earlier PR (the type header was re-added) https://github.com/hashicorp/consul/pull/5913 following a rebase. This commit re-removes the `Type` table header (the `<th>`)	5 years ago
John Cowen	2369c47033	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.	5 years ago
John Cowen	24847b169e	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	5 years ago
John Cowen	44c2da3518	ui: add some additional env level URLs for easier linking (#6145) ... Right now we only use CONSUL_DOCS_URL, the others are for future usage	5 years ago
John Cowen	e636a72ffd	ui: [Bugfix] - Sticky KV Sessions (#6166) ... Initialize session value to `null` to prevent stickiness from a session the previous KV	5 years ago
John Cowen	a263bff6b9	ui: Change layout styling for healthcheckoutput, add CheckID (#6195)	5 years ago
John Cowen	dd91ce33d6	ui: Show the correct message when a session has been removed from a KV (#6167)	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	62fa803d9f	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	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	266c288fc0	ui: Adds readonly meta data to the serviceInstance and node detail pages (#6196)	5 years ago
John Cowen	dcb9800442	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	5 years ago
Joel Kuzmarski	0598b66a80	Fix text and add feature test for copy button (#5958) ... `Copied IP Address!` > `Copied output!` Adds feature test for copy button	5 years ago
John Cowen	e8722e6a35	ui: Normal proxies link to services, sidecars to instances (#5944) ... * ui: Normal proxies line to services, sidecars to instances Following on from https://github.com/hashicorp/consul/pull/5933 we noticed that 'normal' proxies should link to the service, rather than the service instance. Additionally proxy 'searching' within the repository should take into account the name of the node that the originating service is on (sidecar proxies are generally co-located) Added an additional test here to prove that a sidecar-proxy with the same service id but on a different node does not show the sidecar proxy link.	6 years ago
John Cowen	a41c13ae83	ui: Ensure Service Instance pages account for nodes (#5933) ... Include node name in the URL for service instances Integrate the node name slug into tests for service instance pages	6 years ago
John Cowen	685b89bdec	ui: Adds ability to search by policy, role or service ident names (#5811)	6 years ago
John Cowen	9013e53ebc	ui: Ensures nested policy forms are reset properly (#5838) ... 1. All {{ivy-codemirror}} components need 'refreshing' when they become visible via our own `didAppear` method on the `{{code-editor}}` component (also see:) - https://github.com/hashicorp/consul/pull/4190#discussion_r193270223 - 73db111db8 (r225264296) 2. On initial investigation, it looks like the component we are using for the code editor doesn't distinguish between setting its `value` programatically and a `keyup` event, i.e. an interaction from the user. We currently pretend that whenever its `value` changes, it is a `keyup` event. This means that when we reset the `value` to `""` programmatically for form resetting purposes, a 'pretend keyup' event would also be fired, which would in turn kick off the validation, which would fail and show an error message for empty values in other fields of the form - something that is perfectly valid if you haven't typed anything yet. We solved this by checking for `isPristine` on fields that are allowed to be empty before you have typed anything.	6 years ago
John Cowen	75e221d256	ui: ACL Policies. Catch all server errors (#5836) ... Always show any server errors under Rules, not just invalid HCL	6 years ago
John Cowen	ee393e34fb	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.	6 years ago
John Cowen	793f0747c6	ui: Gives the minimal in-form token list use a maximum row size (#5807) ... This means its more straightforwards to calculate the height of the listing itself. This component is currently only used on the form pages for tokens and roles, should therefore be a restricted size.	6 years ago
John Cowen	7e2c66ad12	ui: fix production build only empty role modal (#5806) ... Adds the ability for multiple components to use the same dom buffer	6 years ago
John Cowen	727fddcae3	ui: Remove old 'default' template keyword, we now use '' for default (#5805)	6 years ago
John Cowen	77ebad1b5e	ui: Make the Rules readonly when creating ServiceIdentities (#5784) ... Skipped test added for nagging for the moment	6 years ago
John Cowen	999426794f	ui: Adds {{Datacenter}} keyword for URL template interpolation (#5768) ... 1. Includes Datacenter variable for intperolation 2. Amends text on the Settings page to reflect new keyword 3. Adds further acceptance testing around the new dashboard buttons	6 years ago
John Cowen	7eda188382	ui: Re-fix old erroneous link	6 years ago
John Cowen	d88b2d4150	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	6 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	cbded4a10a	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	6 years ago
John Cowen	417d3030be	ui: Adds uid to tabular-details for/id's used in toggling for uniqueness (#5584)	6 years ago
John Cowen	4a9d259304	ui: Remove index.html from the docs URL so we just point to `/docs` (#5547)	6 years ago
John Cowen	a14a37a078	UI: Add support for blocking queries on the service instance detail page (#5487) ... This commit includes several pieces of functionality to enable services to be removed and the page to present information that this has happened but also keep the deleted information on the page. Along with the more usual blocking query based listing. To enable this: 1. Implements `meta` on the model (only available on collections in ember) 2. Adds new `catchable` ComputedProperty alongside a `listen` helper for working with specific errors that can be thrown from EventSources in an ember-like way. Briefly, normal computed properties update when a property changes, EventSources can additionally throw errors so we can catch them and show different visuals based on that. Also: Add support for blocking queries on the service instance detail page 1. Previous we could return undefined when a service instance has no proxy, but this means we have nothing to attach `meta` to. We've changed this to return an almost empty object, so with only a meta property. At first glance there doesn't seem to be any way to provide a proxy object to templates and be able to detect whether it is actually null or not so we instead change some conditional logic in the templates to detect the property we are using to generate the anchor. 2. Made a `pauseUntil` test helper function for steps where we wait for things. This helps for DRYness but also means if we can move away from setInterval to something else later, we can do it in one place 3. Whilst running into point 1 here, we managed to make the blocking queries eternally loop. Whilst this is due to an error in the code and shouldn't ever happen whilst in actual use, we've added an extra check so that we only recur/loop the blocking query if the previous response has a `meta.cursor` Adds support for blocking queries on the node detail page (#5489) 1. Moves data re-shaping for the templates variables into a repository so they are easily covered by blocking queries (into coordinatesRepo) 2. The node API returns a 404 as signal for deregistration, we also close the sessions and coordinates blocking queries when this happens	6 years ago
John Cowen	9daf8f53d9	ui: Adds blocking query support to the service detail page (#5479) ... This commit includes several pieces of functionality to enable services to be removed and the page to present information that this has happened but also keep the deleted information on the page. Along with the more usual blocking query based listing. To enable this: 1. Implements `meta` on the model (only available on collections in ember) 2. Adds new `catchable` ComputedProperty alongside a `listen` helper for working with specific errors that can be thrown from EventSources in an ember-like way. Briefly, normal computed properties update when a property changes, EventSources can additionally throw errors so we can catch them and show different visuals based on that.	6 years ago
John Cowen	83cd4684c6	UI: Amends blocking queries text and toggle component in settings (#5467)	6 years ago
John Cowen	10c1f29ffa	ui: Add proxy icons to proxy services and instances where appropriate (#5463)	6 years ago
John Cowen	3d76540297	ui: Fix erroneous HTML that was being fixed by either browser/ember (#5530) ... The resulting DOM from this template was actually correct, we'd assume it was being fixed by the browser	6 years ago
John Cowen	5dd9cd2d2e	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	6 years ago
John Cowen	8f35715e47	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	6 years ago
John Cowen	355f034822	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	6 years ago
John Cowen	cb0c5309c9	UI: Add EventSource ready for implementing blocking queries (#5070) ... - Maintain http headers as JSON-API meta for all API requests (#4946) - Add EventSource ready for implementing blocking queries - EventSource project implementation to enable blocking queries for service and node listings (#5267) - Add setting to enable/disable blocking queries (#5352)	6 years ago
John Cowen	f225da36f1	ui: Correctly rebase own token/no delete change	6 years ago
John Cowen	23a236ae95	ui: Adds warning flash messages (yellow with warning icon) (#5033)	6 years ago
John Cowen	9ec7f3851b	UI: Use buttons instead of anchors where appropriate (#4939) ... Use buttons instead of anchors where appropriate	6 years ago
John Cowen	3780622df0	ui: Move intention source/destination menus use text from the template (#4938)	6 years ago
John Cowen	4368040a4a	UI: Move legacy ACLs, KVs and Intentions to use `form` functionality (#4936) ... Change legacy acls, kvs and intentions to use `form`s	6 years ago
John Cowen	104e6bac71	UI: Move legacy ACLs to use the new searchables/changeable-sets (#4933)	6 years ago
John Cowen	65ef2969c7	ui: Async Search (#4859) ... This does several things to make improving the search experience easier moving forwards: 1. Separate searching off from filtering. 'Searching' can be thought of as specifically 'text searching' whilst filtering is more of a boolean/flag search. 2. Decouple the actual searching functionality to almost pure, isolated / unit testable units and unit test. (I still import embers get which, once I upgrade to 3.5, I shouldn't need) 3. Searching rules are now configurable from the outside, i.e. not wrapped in Controllers or Components. 4. General searching itself now can use an asynchronous approach based on events. This prepares for future possibilities of handing off the searching to a web worker or elsewhere, which should aid in large scale searching and prepares the way for other searching methods. 5. Adds the possibility of have multiple searches in one template/route/page. Additionally, this adds a WithSearching mixin to aid linking the searching to ember in an ember-like way in a single place. Plus a WithListeners mixin to aid with cleaning up of event listeners on Controller/Component destruction. Post-initial work I slightly changed the API of create listeners: Returning the handler from a `remover` means you can re-add it again if you want to, this avoids having to save a reference to the handler elsewhere to do the same. The `remove` method itself now returns an array of handlers, again you might want to use these again or something, and its also more useful then just returning an empty array. The more I look at this the more I doubt that you'll ever use `remove` to remove individual handlers, you may aswell just use the `remover` returned from add. I've added some comments to reflect this, but they'll likely be removed once I'm absolutely sure of this. I also added some comments for WithSearching to explain possible further work re: moving `searchParams` so it can be `hung` off the controller object	6 years ago
John Cowen	a35fe7c5ba	ui: Removes delete button form pages that show your current token (#5241) ... Tokens can no longer delete themselves see: https://github.com/hashicorp/consul/pull/5210 ...so we remove the button to allow you to do that from the UI	6 years ago
John Cowen	c8386ec0cc	UI: [BUGFIX] Decode/encode urls (#5206) ... In 858b05fc31 (diff-46ef88aa04507fb9b039344277531584) we removed encoding values in pathnames as we thought they were eventually being encoded by `ember`. It looks like this isn't the case. Turns out sometimes they are encoded sometimes they aren't. It's complicated. If at all possible refer to the PR https://github.com/hashicorp/consul/pull/5206. It's related to the difference between `dynamic` routes and `wildcard` routes. Partly related to this is a decision on whether we urlencode the slashes within service names or not. Whilst historically we haven't done this, we feel its a good time to change this behaviour, so we'll also be changing services to use dynamic routes instead of wildcard routes. So service links will then look like /ui/dc-1/services/application%2Fservice rather than /ui/dc-1/services/application/service Here, we define our routes in a declarative format (for the moment at least JSON) outside of Router.map, and loop through this within Router.map to set all our routes using the standard this.route method. We essentially configure our Router from the outside. As this configuration is now done declaratively outside of Router.map we can also make this data available to href-to and paramsFor, allowing us to detect wildcard routes and therefore apply urlencoding/decoding. Where I mention 'conditionally' below, this is detection is what is used for the decision. We conditionally add url encoding to the `{{href-to}}` helper/addon. The reasoning here is, if we are asking for a 'href/url' then whatever we receive back should always be urlencoded. We've done this by reusing as much code from the original `ember-href-to` addon as possible, after this change every call to the `{{href-to}}` helper will be urlencoded. As all links using `{{href-to}}` are now properly urlencoded. We also need to decode them in the correct place 'on the other end', so.. We also override the default `Route.paramsFor` method to conditionally decode all params before passing them to the `Route.model` hook. Lastly (the revert), as we almost consistently use url params to construct API calls, we make sure we re-encode any slugs that have been passed in by the user/developer. The original API for the `createURL` function was to allow you to pass values that didn't need encoding, values that **did** need encoding, followed by query params (which again require url encoding) All in all this should make the entire ember app url encode/decode safe.	6 years ago
John Cowen	66c139ceae	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	6 years ago
Jihoon Chung	d5e28bda56	ui: Fix typo in acl-migration guide link (#5135)	6 years ago
John Cowen	9c11109db4	ui: If a service has no external-source, don't show the icon (#4996)	6 years ago
John Cowen	f65f001675	UI: Catch 500 error on token endpoint and revert to legacy tokens (#4874) ... In some circumstances a consul 1.4 client could be running in an un-upgraded 1.3 or lower cluster. Currently this gives a 500 error on the new ACL token endpoint. Here we catch this specific 500 error/message and set the users AccessorID to null. Elsewhere in the frontend we use this fact (AccessorID being null) to decide whether to present the legacy or the new ACL UI to the user. Also: - Re-adds in most of the old style ACL acceptance tests, now that we are keeping the old style UI - Restricts code editors to HCL only mode for all `Rules` editing (legacy/'half legacy'/new style) - Adds a [Stop using] button to the old style ACL rows so its possible to logout. - Updates copy and documentation links for the upgrade notices	6 years ago
John Cowen	d98c1242dc	ui: Adds multi syntax linting to the code editor (#4814)	6 years ago
John Cowen	7d89e519a2	UI: New ACLs (#4789) ... UI to accompany the new ACLs APIs	6 years ago
John Cowen	5f39bfd161	ui: Improve layout of node cards on large and small screens (#4761) ... 1. The grid based unhealthy cards are now clamped to only four wide maximum. This means that on larger screen the cards are much wider meaning you can view more information. Grid gutters are also clamped at a certain ideal width screen, remaining responsive for anything below this. 2. The healthy node columns are finally responsive following the same column rules as unhealthy nodes	6 years ago
John Cowen	99c51c9f86	UI: Reduce in-development deprecations (also use toLocaleString) (#4677) ... Various ember addons produced deprecation messages, some in the browser console and some in terminal. Upgrading and replacing some of these has reduced this. Upgrades: - ember-collection - ember-computed-style Replacements: - ember-pluralize replaced with ember-inflector - ember-cli-format-number replaced with custom helper using standard `toLocaleString` Removing ember-cli-format-number also meant some further changes related to decimal places in the tomography graph, done using `toFixed` The ExternalSources background-images have also now been escaped correctly preventing in-development `console` warnings. The only deprecation warnings are now from ember-block-slots, only in terminal, making for a better development experience overall, especially now we have an empty browser console Also adds a `callIfType` 'helper util' which is a util specifically for helpers (it conforms to a helper argument signature) to be expanded upon later.	6 years ago
John Cowen	96508e556b	ui: Layout fix. Small padding additions to tables (#4701) ... 1. The 'Services' header need to be knocked ot the right slightly to line up properly with the service name when there are no external source icons. 2. Add a single space between ServiceName and ServiceID on the Node > [Services] tab table.	6 years ago
John Cowen	ece09e300d	UI: Tooltips and feedback-dialogs are the same thing - merge (#4678)	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	0757a08684	ui: Adds a `default` view helper for providing a default value (#4650) ... If the first value passed to the helper is an empty string or undefined then return the second value	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
John Cowen	981882d5ff	UI: Bugfix. Remove split view code editor (#4615) ... When adding an auto resizing (heightwise) code editor, the ivy-codemirror plugin seems to do this using more nested divs. This div had a horizontal scroller but couldn't be seen on some platforms (with hidden scrollbars). This commit makes the code editor slightly more usable and more visually correct by removing the scroll bar in this div to stop producing the 'split view look', yet keeping the horizontal scroller at the bottom of the code editor for when you enter code that is wider than the area. A max-width has also been added here to prevent the text area from growing off the side of the page. Another improvement to the code editor here is the addition of a nicer color for hightlighting text selection so its at least visible. Lastly, there was a way you could get the bottom horizontal scrollbar to overlay the code in the editor. This makes sure there is always some space at the bottom of the editor to make sure the code won't be obscured	6 years ago