consul/ui/packages/consul-ui/app/router.js

505 lines
14 KiB
JavaScript
Raw Normal View History

/* globals requirejs */
UI V2 (#4086) * Move settings to use the same service/route API as the rest of the app * Put some ideas down for unit testing on adapters * Favour `Model` over `Entity` * Move away from using `reopen` to using Mixins * Amend messages, comment/document some usage * Make sure the returns are consistent in normalizePayload, also Add some todo's in to remind me to think consider this further at a later date. For example, is normalizePayload to be a hook or an overridable method * Start stripping back the HTML to semantics * Use a variable rather than chaining * Remove unused helpers * Start picking through the new designs, start with listing pages * First draft HTML for every page * Making progress on the CSS * Keep plugging away at the catalog css * Looking at scrolling * Wire up filtering * Sort out filter counting, more or less done a few outstanding * Start knocking the forms into shape * Add in codemirror * Keep moving forwards with the form like layouts * Start looking at ACL editing page, add footer in * Pull the filters back in, look at an autoresizer for scroll views * First draft toggles * 2nd draft healthcheck icons * Tweak node healthcheck icons * Looking at healthcheck detail icons * Tweak the filter-bar and add selections to the in content tabs * Add ACL create, pill-like acl type highlight * Tweaking the main nav some more * Working on the filter-bar and freetext-filter * Masonry layout * Stick with `checks` instead of healthy/unhealthy * Fix up the filter numbers/counts * Use the thead for a measure * First draft tomography back in * First draft DC dropdown * Add a temporary create buttong to kv's * Move KV and ACL to use a create page * Move tags * Run through old tests * Injectable server * Start adding test attributes * Add some page objects * More test attributes and pages * Acl filter objects * Add a page.. page object * Clickable items in lists * Add rest/spread babel plugin, remove mirage for now * Add fix for ember-collection * Keep track of acl filters * ember-cli-page-object * ember-test-selectors * ui: update version of ui compile deps * Update static assets * Centralize radiogroup helper * Rejig KV's and begin to clean it up * Work around lack of Tags for the moment.. * Some little css tweaks and start to remove possibles * Working on the dc page and incidentals 1. Sort the datacenter-picker list 2. Add a selected state to the datacenter-picker 3. Make dc an {Name: dc} 4. Add an env helper to get to 'env vars' from within templates * Click outside stuff for the datacenter-picker, is-active on nav * Make sure the dropdown CTA can be active * Bump ember add pluralize helper * Little try at sass based custom queries * Rejig tablular collection so it deals with resizing, actions 1. WIP: start building actions dropdowns 2. Move tabular collection to deal with resizing to rule out differences * First draft actions dropdowns * Add ports, selectable IP's * Flash messages, plus general cleanup/consistency 1. Add ember-cli-flash for flash messages 2. Move everything to get() instead of item.get 3. Spotted a few things that weren't consistent * DOn't go lower than zero * First draft vertical menu * Missed a get, tweak dropmenu tick * Big cleanup 1. this.get(), this.set() > get(), set() 2. assign > {...{}, ...{}} 3. Seperator > separator * WIP: settings * Moved things into a ui-v2 folder * Decide on a way to do the settings page whilst maintaining the url + dc's * Start some error pages * Remove base64 polyfill * Tie in settings, fix atob bug, tweak layout css * Centralize confirmations into a component * Allow switching between the old and new UI with the CONSUL_UI_BETA env var Currently all the assets are packaged into a single AssetFS and a prefix is configured to switch between the two. * Attempt at some updates to integrate the v2 ui build into the main infrastructure * Add redirect to index.html for unknown paths * Allow redictor to /index.html for new ui when using -ui-dir * Take ACLs to the correct place on save * First pass breadcrumbs * Remove datacenter selector on the index page * Tweak overall layout * Make buttons 'resets' * Tweak last DC stuff * Validations plus kv keyname viewing tweaks * Pull sessions back in * Tweak the env vars to be more reusable * Move isAnon to the view * No items and disabled acl css * ACL and KV details 1. Unauthorized page 2. Make sure the ACL is always selected when it needs it 3. Check record deletion with a changeset * Few more acl tweaks/corrections * Add no items view to node > services * Tags for node > services * Make sure we have tags * Fix up the labels on the tomography graph * Add node link (agent) to kv sessions * Duplicate up `create` for KV 'root creation' * Safety check for health checks * Fix up the grids * Truncate td a's, fix kv columns * Watch for spaces in KV id's * Move actions to their own mixins for now at least * Link reset to settings incase I want to type it in * Tweak error page * Cleanup healthcheck icons in service listing * Centralize errors and make getting back easier * Nice numbers * Compact buttons * Some incidental css cleanups * Use 'Key / Value' for root * Tweak tomography layout * Fix single healthcheck unhealthy resource * Get loading screen ready * Fix healthy healthcheck tick * Everything in header starts white * First draft loader * Refactor the entire backend to use proper unique keys, plus.. 1. Make unique keys form dc + slug (uid) 2. Fun with errors... * Tweak header colors * Add noopener noreferrer to external links * Add supers to setupController * Implement cloning, using ember-data... * Move the more expensive down the switch order * First draft empty record cleanup.. * Add the cusomt store test * Temporarily use the htmlSafe prototype to remove the console warning * Encode hashes in urls * Go back to using title for errors for now * Start removing unused bulma * Lint * WIP: Start looking at failing tests * Remove single redirect test * Finish off error message styling * Add full ember-data cache invalidation to avoid stale data... * Add uncolorable warning icons * More info icon * Rearrange single service, plus tag printing * Logo * No quotes * Add a simple startup logo * Tweak healthcheck statuses * Fix border-color for healthchecks * Tweak node tabs * Catch 401 ACL errors and rethrow with the provided error message * Remove old acl unauth and error routes * Missed a super * Make 'All' refer to number of checks, not services * Remove ember-resizer, add autoprefixer * Don't show tomography if its not worth it, viewify it more also * Little model cleanup * Chevrons * Find a way to reliably set the class of html from the view * Consistent html * Make sure session id's are visible as long as possible * Fix single service check count * Add filters and searchs to the query string * Don't remember the selected tab * Change text * Eror tweaking * Use chevrons on all breadcrumbs even in kv's * Clean up a file * Tweak some messaging * Makesure the footer overlays whats in the page * Tweak KV errors * Move json toggle over to the right * feedback-dialog along with copy buttons * Better confirmation dialogs * Add git sha comment * Same title as old UI * Allow defaults * Make sure value is a string * WIP: Scrolling dropdowns/confirmations * Add to kv's * Remove set * First pass trace * Better table rows * Pull over the hashi code editor styles * Editor tweaks * Responsive tabs * Add number formatting to tomography * Review whats left todo * Lint * Add a coordinate ember data triplet * Bump in a v2.0.0 * Update old tests * Get coverage working again * Make sure query keys are also encoded * Don't test console.error * Unit test some more utils * Tweak the size of the tabular collections * Clean up gitignore * Fix copy button rollovers * Get healthcheck 'icon icons' onto the text baseline * Tweak healthcheck padding and alignment * Make sure commas kick in in rtt, probably never get to that * Improve vertical menu * Tweak dropdown active state to not have a bg * Tweak paddings * Search entire string not just 'startsWith' * Button states * Most buttons have 1px border * More button tweaks * You can only view kv folders * CSS cleanup reduction * Form input states and little cleanup * More CSS reduction * Sort checks by importance * Fix click outside on datacenter picker * Make sure table th's also auto calculate properly * Make sure `json` isn't remembered in KV editing * Fix recursive deletion in KV's * Centralize size * Catch updateRecord * Don't double envode * model > item consistency * Action loading and ACL tweaks * Add settings dependencies to acl tests * Better loading * utf-8 base64 encode/decode * Don't hang off a prototype for htmlSafe * Missing base64 files... * Get atob/btoa polyfill right * Shadowy rollovers * Disabled button styling for primaries * autofocuses only onload for now * Fix footer centering * Beginning of 'notices' * Remove the isLocked disabling as we are letting you do what the API does * Don't forget the documentation link for sessions * Updates are more likely * Use exported constant * Dont export redirectFS and a few other PR updates * Remove the old bootstrap config which was used for the old UI skin * Use curlies for multiple properties
2018-05-10 18:52:53 +00:00
import EmberRouter from '@ember/routing/router';
2021-09-22 17:32:51 +00:00
import config from './config/environment';
import { runInDebug } from '@ember/debug';
2021-09-22 17:32:51 +00:00
import merge from 'deepmerge';
import { env } from 'consul-ui/env';
import walk, { dump } from 'consul-ui/utils/routing/walk';
UI V2 (#4086) * Move settings to use the same service/route API as the rest of the app * Put some ideas down for unit testing on adapters * Favour `Model` over `Entity` * Move away from using `reopen` to using Mixins * Amend messages, comment/document some usage * Make sure the returns are consistent in normalizePayload, also Add some todo's in to remind me to think consider this further at a later date. For example, is normalizePayload to be a hook or an overridable method * Start stripping back the HTML to semantics * Use a variable rather than chaining * Remove unused helpers * Start picking through the new designs, start with listing pages * First draft HTML for every page * Making progress on the CSS * Keep plugging away at the catalog css * Looking at scrolling * Wire up filtering * Sort out filter counting, more or less done a few outstanding * Start knocking the forms into shape * Add in codemirror * Keep moving forwards with the form like layouts * Start looking at ACL editing page, add footer in * Pull the filters back in, look at an autoresizer for scroll views * First draft toggles * 2nd draft healthcheck icons * Tweak node healthcheck icons * Looking at healthcheck detail icons * Tweak the filter-bar and add selections to the in content tabs * Add ACL create, pill-like acl type highlight * Tweaking the main nav some more * Working on the filter-bar and freetext-filter * Masonry layout * Stick with `checks` instead of healthy/unhealthy * Fix up the filter numbers/counts * Use the thead for a measure * First draft tomography back in * First draft DC dropdown * Add a temporary create buttong to kv's * Move KV and ACL to use a create page * Move tags * Run through old tests * Injectable server * Start adding test attributes * Add some page objects * More test attributes and pages * Acl filter objects * Add a page.. page object * Clickable items in lists * Add rest/spread babel plugin, remove mirage for now * Add fix for ember-collection * Keep track of acl filters * ember-cli-page-object * ember-test-selectors * ui: update version of ui compile deps * Update static assets * Centralize radiogroup helper * Rejig KV's and begin to clean it up * Work around lack of Tags for the moment.. * Some little css tweaks and start to remove possibles * Working on the dc page and incidentals 1. Sort the datacenter-picker list 2. Add a selected state to the datacenter-picker 3. Make dc an {Name: dc} 4. Add an env helper to get to 'env vars' from within templates * Click outside stuff for the datacenter-picker, is-active on nav * Make sure the dropdown CTA can be active * Bump ember add pluralize helper * Little try at sass based custom queries * Rejig tablular collection so it deals with resizing, actions 1. WIP: start building actions dropdowns 2. Move tabular collection to deal with resizing to rule out differences * First draft actions dropdowns * Add ports, selectable IP's * Flash messages, plus general cleanup/consistency 1. Add ember-cli-flash for flash messages 2. Move everything to get() instead of item.get 3. Spotted a few things that weren't consistent * DOn't go lower than zero * First draft vertical menu * Missed a get, tweak dropmenu tick * Big cleanup 1. this.get(), this.set() > get(), set() 2. assign > {...{}, ...{}} 3. Seperator > separator * WIP: settings * Moved things into a ui-v2 folder * Decide on a way to do the settings page whilst maintaining the url + dc's * Start some error pages * Remove base64 polyfill * Tie in settings, fix atob bug, tweak layout css * Centralize confirmations into a component * Allow switching between the old and new UI with the CONSUL_UI_BETA env var Currently all the assets are packaged into a single AssetFS and a prefix is configured to switch between the two. * Attempt at some updates to integrate the v2 ui build into the main infrastructure * Add redirect to index.html for unknown paths * Allow redictor to /index.html for new ui when using -ui-dir * Take ACLs to the correct place on save * First pass breadcrumbs * Remove datacenter selector on the index page * Tweak overall layout * Make buttons 'resets' * Tweak last DC stuff * Validations plus kv keyname viewing tweaks * Pull sessions back in * Tweak the env vars to be more reusable * Move isAnon to the view * No items and disabled acl css * ACL and KV details 1. Unauthorized page 2. Make sure the ACL is always selected when it needs it 3. Check record deletion with a changeset * Few more acl tweaks/corrections * Add no items view to node > services * Tags for node > services * Make sure we have tags * Fix up the labels on the tomography graph * Add node link (agent) to kv sessions * Duplicate up `create` for KV 'root creation' * Safety check for health checks * Fix up the grids * Truncate td a's, fix kv columns * Watch for spaces in KV id's * Move actions to their own mixins for now at least * Link reset to settings incase I want to type it in * Tweak error page * Cleanup healthcheck icons in service listing * Centralize errors and make getting back easier * Nice numbers * Compact buttons * Some incidental css cleanups * Use 'Key / Value' for root * Tweak tomography layout * Fix single healthcheck unhealthy resource * Get loading screen ready * Fix healthy healthcheck tick * Everything in header starts white * First draft loader * Refactor the entire backend to use proper unique keys, plus.. 1. Make unique keys form dc + slug (uid) 2. Fun with errors... * Tweak header colors * Add noopener noreferrer to external links * Add supers to setupController * Implement cloning, using ember-data... * Move the more expensive down the switch order * First draft empty record cleanup.. * Add the cusomt store test * Temporarily use the htmlSafe prototype to remove the console warning * Encode hashes in urls * Go back to using title for errors for now * Start removing unused bulma * Lint * WIP: Start looking at failing tests * Remove single redirect test * Finish off error message styling * Add full ember-data cache invalidation to avoid stale data... * Add uncolorable warning icons * More info icon * Rearrange single service, plus tag printing * Logo * No quotes * Add a simple startup logo * Tweak healthcheck statuses * Fix border-color for healthchecks * Tweak node tabs * Catch 401 ACL errors and rethrow with the provided error message * Remove old acl unauth and error routes * Missed a super * Make 'All' refer to number of checks, not services * Remove ember-resizer, add autoprefixer * Don't show tomography if its not worth it, viewify it more also * Little model cleanup * Chevrons * Find a way to reliably set the class of html from the view * Consistent html * Make sure session id's are visible as long as possible * Fix single service check count * Add filters and searchs to the query string * Don't remember the selected tab * Change text * Eror tweaking * Use chevrons on all breadcrumbs even in kv's * Clean up a file * Tweak some messaging * Makesure the footer overlays whats in the page * Tweak KV errors * Move json toggle over to the right * feedback-dialog along with copy buttons * Better confirmation dialogs * Add git sha comment * Same title as old UI * Allow defaults * Make sure value is a string * WIP: Scrolling dropdowns/confirmations * Add to kv's * Remove set * First pass trace * Better table rows * Pull over the hashi code editor styles * Editor tweaks * Responsive tabs * Add number formatting to tomography * Review whats left todo * Lint * Add a coordinate ember data triplet * Bump in a v2.0.0 * Update old tests * Get coverage working again * Make sure query keys are also encoded * Don't test console.error * Unit test some more utils * Tweak the size of the tabular collections * Clean up gitignore * Fix copy button rollovers * Get healthcheck 'icon icons' onto the text baseline * Tweak healthcheck padding and alignment * Make sure commas kick in in rtt, probably never get to that * Improve vertical menu * Tweak dropdown active state to not have a bg * Tweak paddings * Search entire string not just 'startsWith' * Button states * Most buttons have 1px border * More button tweaks * You can only view kv folders * CSS cleanup reduction * Form input states and little cleanup * More CSS reduction * Sort checks by importance * Fix click outside on datacenter picker * Make sure table th's also auto calculate properly * Make sure `json` isn't remembered in KV editing * Fix recursive deletion in KV's * Centralize size * Catch updateRecord * Don't double envode * model > item consistency * Action loading and ACL tweaks * Add settings dependencies to acl tests * Better loading * utf-8 base64 encode/decode * Don't hang off a prototype for htmlSafe * Missing base64 files... * Get atob/btoa polyfill right * Shadowy rollovers * Disabled button styling for primaries * autofocuses only onload for now * Fix footer centering * Beginning of 'notices' * Remove the isLocked disabling as we are letting you do what the API does * Don't forget the documentation link for sessions * Updates are more likely * Use exported constant * Dont export redirectFS and a few other PR updates * Remove the old bootstrap config which was used for the old UI skin * Use curlies for multiple properties
2018-05-10 18:52:53 +00:00
2021-09-22 17:32:51 +00:00
const doc = document;
const appName = config.modulePrefix;
const appNameJS = appName
.split('-')
.map((item, i) => (i ? `${item.substr(0, 1).toUpperCase()}${item.substr(1)}` : item))
.join('');
export const routes = merge.all(
[
{
// Our parent datacenter resource sets the namespace
// for the entire application
dc: {
_options: {
path: '/:dc',
},
index: {
_options: {
path: '/',
redirect: '../services',
},
},
2021-09-22 17:32:51 +00:00
// Services represent a consul service
services: {
_options: { path: '/services' },
index: {
_options: {
path: '/',
queryParams: {
sortBy: 'sort',
status: 'status',
source: 'source',
kind: 'kind',
searchproperty: {
as: 'searchproperty',
empty: [['Name', 'Tags']],
},
search: {
as: 'filter',
replace: true,
},
},
},
},
2021-09-22 17:32:51 +00:00
// Show an individual service
show: {
_options: { path: '/:name' },
instances: {
_options: {
path: '/instances',
queryParams: {
sortBy: 'sort',
status: 'status',
source: 'source',
searchproperty: {
as: 'searchproperty',
empty: [
[
'Name',
'Node',
'Tags',
'ID',
'Address',
'Port',
'Service.Meta',
'Node.Meta',
],
],
},
search: {
as: 'filter',
replace: true,
},
},
},
2021-09-22 17:32:51 +00:00
},
intentions: {
_options: { path: '/intentions' },
index: {
_options: {
path: '',
queryParams: {
sortBy: 'sort',
access: 'access',
searchproperty: {
as: 'searchproperty',
empty: [['SourceName', 'DestinationName']],
},
search: {
as: 'filter',
replace: true,
},
},
},
},
2021-09-22 17:32:51 +00:00
edit: {
_options: { path: '/:intention_id' },
},
create: {
_options: {
template: '../edit',
path: '/create',
},
2021-09-22 17:32:51 +00:00
},
},
topology: {
_options: { path: '/topology' },
},
services: {
_options: {
path: '/services',
queryParams: {
sortBy: 'sort',
instance: 'instance',
searchproperty: {
as: 'searchproperty',
empty: [['Name', 'Tags']],
},
search: {
as: 'filter',
replace: true,
},
},
},
2021-09-22 17:32:51 +00:00
},
upstreams: {
_options: {
path: '/upstreams',
queryParams: {
sortBy: 'sort',
instance: 'instance',
searchproperty: {
as: 'searchproperty',
empty: [['Name', 'Tags']],
},
search: {
as: 'filter',
replace: true,
},
},
},
2021-09-22 17:32:51 +00:00
},
routing: {
_options: { path: '/routing' },
},
tags: {
_options: { path: '/tags' },
},
},
instance: {
_options: {
path: '/:name/instances/:node/:id',
redirect: './healthchecks',
},
2021-09-22 17:32:51 +00:00
healthchecks: {
_options: {
path: '/health-checks',
queryParams: {
sortBy: 'sort',
status: 'status',
check: 'check',
searchproperty: {
as: 'searchproperty',
empty: [['Name', 'Node', 'CheckID', 'Notes', 'Output', 'ServiceTags']],
},
search: {
as: 'filter',
replace: true,
},
},
},
2021-09-22 17:32:51 +00:00
},
upstreams: {
_options: {
path: '/upstreams',
queryParams: {
sortBy: 'sort',
search: {
as: 'filter',
replace: true,
},
searchproperty: {
as: 'searchproperty',
empty: [['DestinationName', 'LocalBindAddress', 'LocalBindPort']],
},
},
},
2021-09-22 17:32:51 +00:00
},
exposedpaths: {
_options: { path: '/exposed-paths' },
},
addresses: {
_options: { path: '/addresses' },
},
metadata: {
_options: { path: '/metadata' },
},
},
notfound: {
_options: { path: '/:name/:node/:id' },
},
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 :tada:) 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.
2020-04-08 09:56:36 +00:00
},
2021-09-22 17:32:51 +00:00
// Nodes represent a consul node
nodes: {
_options: { path: '/nodes' },
index: {
_options: {
path: '',
queryParams: {
sortBy: 'sort',
status: 'status',
searchproperty: {
as: 'searchproperty',
empty: [['Node', 'Address', 'Meta']],
},
search: {
as: 'filter',
replace: true,
},
},
},
},
2021-09-22 17:32:51 +00:00
// Show an individual node
show: {
_options: { path: '/:name' },
healthchecks: {
_options: {
path: '/health-checks',
queryParams: {
sortBy: 'sort',
status: 'status',
kind: 'kind',
check: 'check',
searchproperty: {
as: 'searchproperty',
empty: [['Name', 'Service', 'CheckID', 'Notes', 'Output', 'ServiceTags']],
},
search: {
as: 'filter',
replace: true,
},
},
},
2021-09-22 17:32:51 +00:00
},
services: {
_options: {
path: '/service-instances',
queryParams: {
sortBy: 'sort',
status: 'status',
source: 'source',
searchproperty: {
as: 'searchproperty',
empty: [['Name', 'Tags', 'ID', 'Address', 'Port', 'Service.Meta']],
},
search: {
as: 'filter',
replace: true,
},
},
},
2021-09-22 17:32:51 +00:00
},
rtt: {
_options: { path: '/round-trip-time' },
},
sessions: {
_options: { path: '/lock-sessions' },
},
metadata: {
_options: { path: '/metadata' },
},
},
},
// Intentions represent a consul intention
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 :tada:) 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.
2020-04-08 09:56:36 +00:00
intentions: {
_options: { path: '/intentions' },
index: {
_options: {
path: '/',
queryParams: {
sortBy: 'sort',
access: 'access',
searchproperty: {
as: 'searchproperty',
empty: [['SourceName', 'DestinationName']],
},
search: {
as: 'filter',
replace: true,
},
},
},
},
edit: {
2021-09-22 17:32:51 +00:00
_options: {
path: '/:intention_id',
abilities: ['read intentions'],
},
},
create: {
2021-09-22 17:32:51 +00:00
_options: {
template: '../edit',
2021-09-22 17:32:51 +00:00
path: '/create',
abilities: ['create intentions'],
},
},
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 :tada:) 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.
2020-04-08 09:56:36 +00:00
},
2021-09-22 17:32:51 +00:00
// Key/Value
kv: {
_options: { path: '/kv' },
index: {
_options: {
path: '/',
queryParams: {
sortBy: 'sort',
kind: 'kind',
search: {
as: 'filter',
replace: true,
},
},
},
},
2021-09-22 17:32:51 +00:00
folder: {
_options: {
template: '../index',
path: '/*key',
},
},
2021-09-22 17:32:51 +00:00
edit: {
_options: { path: '/*key/edit' },
},
create: {
_options: {
template: '../edit',
2021-09-22 17:32:51 +00:00
path: '/*key/create',
abilities: ['create kvs'],
},
},
'root-create': {
_options: {
template: '../edit',
2021-09-22 17:32:51 +00:00
path: '/create',
abilities: ['create kvs'],
},
},
},
2021-09-22 17:32:51 +00:00
// ACLs
acls: {
_options: {
2021-09-22 17:32:51 +00:00
path: '/acls',
abilities: ['access acls'],
},
2021-09-22 17:32:51 +00:00
policies: {
_options: {
path: '/policies',
abilities: ['read policies'],
},
edit: {
_options: { path: '/:id' },
},
create: {
_options: {
path: '/create',
abilities: ['create policies'],
},
},
},
roles: {
_options: {
path: '/roles',
abilities: ['read roles'],
},
edit: {
_options: { path: '/:id' },
},
create: {
_options: {
path: '/create',
abilities: ['create roles'],
},
},
},
2021-09-22 17:32:51 +00:00
tokens: {
_options: {
path: '/tokens',
abilities: ['access acls'],
},
edit: {
_options: { path: '/:id' },
},
create: {
_options: {
path: '/create',
abilities: ['create tokens'],
},
},
},
2021-09-22 17:32:51 +00:00
'auth-methods': {
_options: {
path: '/auth-methods',
abilities: ['read auth-methods'],
},
show: {
_options: { path: '/:id' },
'auth-method': {
_options: { path: '/auth-method' },
},
'binding-rules': {
_options: { path: '/binding-rules' },
},
'nspace-rules': {
_options: { path: '/nspace-rules' },
},
},
},
},
2021-09-22 17:32:51 +00:00
'routing-config': {
_options: { path: '/routing-config/:name' },
},
},
// Shows a datacenter picker. If you only have one
// it just redirects you through.
index: {
_options: { path: '/' },
},
// The settings page is global.
settings: {
_options: { path: '/setting' },
},
notfound: {
_options: { path: '/*notfound' },
},
UI: [BUGFIX] Decode/encode urls (#5206) In https://github.com/hashicorp/consul/commit/858b05fc3127d3d20d9554e932353d767c7b5fdc#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.
2019-01-23 13:46:59 +00:00
},
2021-09-22 17:32:51 +00:00
].concat(
...[...doc.querySelectorAll(`script[data-${appName}-routes]`)].map($item =>
JSON.parse($item.dataset[`${appNameJS}Routes`])
)
)
);
runInDebug(() => {
// check to see if we are running docfy and if so add its routes to our
// route config
2021-09-22 17:32:51 +00:00
const docfyOutput = requirejs.entries[`${appName}/docfy-output`];
if (typeof docfyOutput !== 'undefined') {
const output = {};
docfyOutput.callback(output);
// see https://github.com/josemarluedke/docfy/blob/904529641279975586402431108895713d156b55/packages/ember/addon/index.ts
(function addPage(route, page) {
if (page.name !== '/') {
route = route[page.name] = {
_options: { path: page.name },
};
}
page.pages.forEach(page => {
const url = page.relativeUrl;
if (typeof url === 'string') {
if (url !== '') {
route[url] = {
_options: { path: url },
};
}
}
});
page.children.forEach(child => {
addPage(route, child);
});
})(routes, output.default.nested);
}
});
// To print the Ember route DSL use `Routes()` in Web Inspectors console
// or `javascript:Routes()` in the location bar of your browser
runInDebug(() => {
window.Routes = (endpoint = env('DEBUG_ROUTES_ENDPOINT')) => {
if (!endpoint) {
endpoint = 'data:,%s';
}
let win;
const str = dump(routes);
if (endpoint.startsWith('data:,')) {
win = window.open('', '_blank');
win.document.write(`<body><pre>${str}</pre></body>`);
} else {
win = window.open(endpoint.replace('%s', encodeURIComponent(str)), '_blank');
}
win.focus();
return;
};
});
2021-09-22 17:32:51 +00:00
export default class Router extends EmberRouter {
location = env('locationType');
rootURL = env('rootURL');
}
Router.map(walk(routes));