diff --git a/ui/packages/consul-nspaces/app/components/consul/nspace/form/index.hbs b/ui/packages/consul-nspaces/app/components/consul/nspace/form/index.hbs index ec2a3d6b4e..cacb0758e3 100644 --- a/ui/packages/consul-nspaces/app/components/consul/nspace/form/index.hbs +++ b/ui/packages/consul-nspaces/app/components/consul/nspace/form/index.hbs @@ -1,169 +1,159 @@ -
- - - - +
+ + + + -{{#let - - (not (can "write nspaces")) - - @item - - (hash - help='Must be a valid DNS hostname. Must contain 1-64 characters (numbers, letters, and hyphens), and must begin with a letter. Once created, this cannot be changed.' - Name=(array - (hash - test='^[a-zA-Z0-9]([a-zA-Z0-9-]{0,62}[a-zA-Z0-9])?$' - error='Name must be a valid DNS hostname.' - ) - ) - ) - - (hash - Description=(array) - ) - -as |readOnly item Name Description|}} -
- - - -
-{{#if (is "new nspace" item=item)}} - -{{/if}} - -
-{{#if (can 'use acls')}} -
-

Roles

-

-{{#if (can "write nspace" item=item)}} - By adding roles to this namespaces, you will apply them to all tokens created within this namespace. -{{else}} - The following roles are applied to all tokens created within this namespace. -{{/if}} -

- -
-
-

Policies

-

-{{#if (not readOnly)}} - By adding policies to this namespace, you will apply them to all tokens created within this namespace. -{{else}} - The following policies are applied to all tokens created within this namespace. -{{/if}} -

- -
-{{/if}} -
-{{#if (and (is "new nspace" item=item) (can "create nspaces"))}} - - Save - -{{else if (can "write nspace" item=item)}} - Save -{{/if}} + - - Cancel - - -{{#if (and (not (is "new nspace" item=item)) (can "delete nspace" item=item))}} - - - - Delete - - - - - - -{{/if}} -
-
-
-{{/let}} -
-
-
+
+ {{#if (is "new nspace" item=item)}} + + {{/if}} + +
+ {{#if (can "use acls")}} +
+

Roles

+

+ {{#if (can "write nspace" item=item)}} + By adding roles to this namespaces, you will apply them to + all tokens created within this namespace. + {{else}} + The following roles are applied to all tokens created within + this namespace. + {{/if}} +

+ +
+
+

Policies

+

+ {{#if (not readOnly)}} + By adding policies to this namespace, you will apply them to + all tokens created within this namespace. + {{else}} + The following policies are applied to all tokens created + within this namespace. + {{/if}} +

+ +
+ {{/if}} +
+ {{#if (and (is "new nspace" item=item) (can "create nspaces"))}} + + Save + + {{else if (can "write nspace" item=item)}} + Save + {{/if}} + + Cancel + + + {{#if + (and + (not (is "new nspace" item=item)) + (can "delete nspace" item=item) + ) + }} + + + + Delete + + + + + + + {{/if}} + +
+ + + {{/let}} + +
+
\ No newline at end of file diff --git a/ui/packages/consul-nspaces/app/components/consul/nspace/form/index.js b/ui/packages/consul-nspaces/app/components/consul/nspace/form/index.js new file mode 100644 index 0000000000..4c2882cde5 --- /dev/null +++ b/ui/packages/consul-nspaces/app/components/consul/nspace/form/index.js @@ -0,0 +1,33 @@ +import Component from "@glimmer/component"; +import { action } from "@ember/object"; + +export default class NspaceForm extends Component { + @action onSubmit(item) { + const onSubmit = this.args.onsubmit; + if (onSubmit) return onSubmit(item); + } + + @action onDelete(item) { + const { onsubmit, ondelete } = this.args; + + if (ondelete) { + return ondelete(item); + } else { + if (onsubmit) { + return onsubmit(item); + } + } + } + + @action onCancel(item) { + const { oncancel, onsubmit } = this.args; + + if (oncancel) { + return oncancel(item); + } else { + if (onsubmit) { + return onsubmit(item); + } + } + } +} diff --git a/ui/packages/consul-ui/.docfy-config.js b/ui/packages/consul-ui/.docfy-config.js index 0e1f6838ad..bd85d31ff3 100644 --- a/ui/packages/consul-ui/.docfy-config.js +++ b/ui/packages/consul-ui/.docfy-config.js @@ -13,16 +13,16 @@ const exists = fs.existsSync; const chalk = require('chalk'); // comes with ember // allow extra docfy config -let user = {sources: [], labels: {}}; +let user = { sources: [], labels: {} }; const $CONSUL_DOCFY_CONFIG = process.env.CONSUL_DOCFY_CONFIG || ''; -if($CONSUL_DOCFY_CONFIG.length > 0) { +if ($CONSUL_DOCFY_CONFIG.length > 0) { try { - if(exists($CONSUL_DOCFY_CONFIG)) { - user = JSON.parse(read($CONSUL_DOCFY_CONFIG)); - } else { - throw new Error(`Unable to locate ${$CONSUL_DOCFY_CONFIG}`); - } - } catch(e) { + if (exists($CONSUL_DOCFY_CONFIG)) { + user = JSON.parse(read($CONSUL_DOCFY_CONFIG)); + } else { + throw new Error(`Unable to locate ${$CONSUL_DOCFY_CONFIG}`); + } + } catch (e) { console.error(chalk.yellow(`Docfy: ${e.message}`)); } } @@ -33,24 +33,20 @@ refractor.register(handlebars); refractor.alias({ handlebars: ['hbs'], - shell: ['sh'] + shell: ['sh'], }); - - module.exports = { remarkHbsOptions: { - escapeCurliesCode: false + escapeCurliesCode: false, }, remarkPlugins: [ autolinkHeadings, { - behavior: 'wrap' - } - ], - rehypePlugins: [ - prism + behavior: 'wrap', + }, ], + rehypePlugins: [prism], sources: [ { root: path.resolve(__dirname, 'docs'), @@ -129,10 +125,10 @@ module.exports = { pattern: '**/README.mdx', urlSchema: 'auto', urlPrefix: 'docs/consul-nspaces', - } + }, ].concat(user.sources), labels: { - "consul": "Consul Components", - ...user.labels - } + consul: 'Consul Components', + ...user.labels, + }, }; diff --git a/ui/packages/consul-ui/.eslintignore b/ui/packages/consul-ui/.eslintignore index 349abf1745..ae9599337a 100644 --- a/ui/packages/consul-ui/.eslintignore +++ b/ui/packages/consul-ui/.eslintignore @@ -15,6 +15,7 @@ app/utils/dom/event-target/event-target-shim/event.js # misc /coverage/ !.* +.eslintcache # ember-try /.node_modules.ember-try/ diff --git a/ui/packages/consul-ui/.eslintrc.js b/ui/packages/consul-ui/.eslintrc.js index 994b78a241..a8103eb0dd 100644 --- a/ui/packages/consul-ui/.eslintrc.js +++ b/ui/packages/consul-ui/.eslintrc.js @@ -9,24 +9,44 @@ module.exports = { }, }, plugins: ['ember'], - extends: ['eslint:recommended', 'plugin:ember/recommended'], + extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'], env: { browser: true, }, rules: { - 'no-console': ['error', {allow: ['error', 'info']}], + 'no-console': ['error', { allow: ['error', 'info'] }], 'no-unused-vars': ['error', { args: 'none' }], 'ember/no-new-mixins': ['warn'], 'ember/no-jquery': 'warn', 'ember/no-global-jquery': 'warn', + + // for 3.24 update + 'ember/classic-decorator-no-classic-methods': ['warn'], + 'ember/classic-decorator-hooks': ['warn'], + 'ember/no-classic-classes': ['warn'], + 'ember/no-mixins': ['warn'], + 'ember/no-computed-properties-in-native-classes': ['warn'], + 'ember/no-private-routing-service': ['warn'], + 'ember/no-test-import-export': ['warn'], + 'ember/no-actions-hash': ['warn'], + 'ember/no-classic-components': ['warn'], + 'ember/no-component-lifecycle-hooks': ['warn'], + 'ember/require-tagless-components': ['warn'], + 'ember/no-legacy-test-waiters': ['warn'], + 'ember/no-empty-glimmer-component-classes': ['warn'], + 'ember/no-get': ['off'], // be careful with autofix, might change behavior + 'ember/require-computed-property-dependencies': ['off'], // be careful with autofix + 'ember/use-ember-data-rfc-395-imports': ['off'], // be carful with autofix + 'ember/require-super-in-lifecycle-hooks': ['off'], // be careful with autofix + 'ember/require-computed-macros': ['off'], // be careful with autofix }, overrides: [ // node files { files: [ '.eslintrc.js', - '.dev.eslintrc.js', '.docfy-config.js', + '.prettierrc.js', '.template-lintrc.js', 'ember-cli-build.js', 'testem.js', diff --git a/ui/packages/consul-ui/.gitignore b/ui/packages/consul-ui/.gitignore new file mode 100644 index 0000000000..7e0f7ddce8 --- /dev/null +++ b/ui/packages/consul-ui/.gitignore @@ -0,0 +1,26 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist/ +/tmp/ + +# dependencies +/bower_components/ +/node_modules/ + +# misc +/.env* +/.pnp* +/.sass-cache +/.eslintcache +/connect.lock +/coverage/ +/libpeerconnection.log +/npm-debug.log* +/testem.log +/yarn-error.log + +# ember-try +/.node_modules.ember-try/ +/bower.json.ember-try +/package.json.ember-try diff --git a/ui/packages/consul-ui/.prettierignore b/ui/packages/consul-ui/.prettierignore new file mode 100644 index 0000000000..9221655522 --- /dev/null +++ b/ui/packages/consul-ui/.prettierignore @@ -0,0 +1,21 @@ +# unconventional js +/blueprints/*/files/ +/vendor/ + +# compiled output +/dist/ +/tmp/ + +# dependencies +/bower_components/ +/node_modules/ + +# misc +/coverage/ +!.* +.eslintcache + +# ember-try +/.node_modules.ember-try/ +/bower.json.ember-try +/package.json.ember-try diff --git a/ui/packages/consul-ui/.prettierrc.js b/ui/packages/consul-ui/.prettierrc.js new file mode 100644 index 0000000000..534e6d35aa --- /dev/null +++ b/ui/packages/consul-ui/.prettierrc.js @@ -0,0 +1,5 @@ +'use strict'; + +module.exports = { + singleQuote: true, +}; diff --git a/ui/packages/consul-ui/app/abilities/base.js b/ui/packages/consul-ui/app/abilities/base.js index 8294273a2d..323d4cf5cc 100644 --- a/ui/packages/consul-ui/app/abilities/base.js +++ b/ui/packages/consul-ui/app/abilities/base.js @@ -54,7 +54,7 @@ export default class BaseAbility extends Ability { get canRead() { if (typeof this.item !== 'undefined') { - const perm = (get(this, 'item.Resources') || []).find(item => item.Access === ACCESS_READ); + const perm = (get(this, 'item.Resources') || []).find((item) => item.Access === ACCESS_READ); if (perm) { return perm.Allow; } @@ -64,7 +64,7 @@ export default class BaseAbility extends Ability { get canList() { if (typeof this.item !== 'undefined') { - const perm = (get(this, 'item.Resources') || []).find(item => item.Access === ACCESS_LIST); + const perm = (get(this, 'item.Resources') || []).find((item) => item.Access === ACCESS_LIST); if (perm) { return perm.Allow; } @@ -74,7 +74,7 @@ export default class BaseAbility extends Ability { get canWrite() { if (typeof this.item !== 'undefined') { - const perm = (get(this, 'item.Resources') || []).find(item => item.Access === ACCESS_WRITE); + const perm = (get(this, 'item.Resources') || []).find((item) => item.Access === ACCESS_WRITE); if (perm) { return perm.Allow; } diff --git a/ui/packages/consul-ui/app/abilities/intention.js b/ui/packages/consul-ui/app/abilities/intention.js index a9435f9750..06f6b4004c 100644 --- a/ui/packages/consul-ui/app/abilities/intention.js +++ b/ui/packages/consul-ui/app/abilities/intention.js @@ -5,13 +5,12 @@ export default class IntentionAbility extends BaseAbility { get canWrite() { // Peered intentions aren't writable - if(typeof this.item !== 'undefined' && typeof this.item.SourcePeer !== 'undefined') { + if (typeof this.item !== 'undefined' && typeof this.item.SourcePeer !== 'undefined') { return false; } - return super.canWrite && - (typeof this.item === 'undefined' || !this.canViewCRD); + return super.canWrite && (typeof this.item === 'undefined' || !this.canViewCRD); } get canViewCRD() { - return (typeof this.item !== 'undefined' && this.item.IsManagedByCRD); + return typeof this.item !== 'undefined' && this.item.IsManagedByCRD; } } diff --git a/ui/packages/consul-ui/app/abilities/peer.js b/ui/packages/consul-ui/app/abilities/peer.js index 28b913a3e0..440f08416c 100644 --- a/ui/packages/consul-ui/app/abilities/peer.js +++ b/ui/packages/consul-ui/app/abilities/peer.js @@ -11,10 +11,7 @@ export default class PeerAbility extends BaseAbility { return this.canDelete; } get canDelete() { - return ![ - 'DELETING', - 'TERMINATED' - ].includes(this.item.State) && super.canDelete; + return !['DELETING', 'TERMINATED'].includes(this.item.State) && super.canDelete; } get canUse() { diff --git a/ui/packages/consul-ui/app/abilities/service-instance.js b/ui/packages/consul-ui/app/abilities/service-instance.js index 07a11a41a3..bdce3192e9 100644 --- a/ui/packages/consul-ui/app/abilities/service-instance.js +++ b/ui/packages/consul-ui/app/abilities/service-instance.js @@ -6,9 +6,11 @@ export default class ServiceInstanceAbility extends BaseAbility { // When we ask for service-instances its almost like a request for a single service // When we do that we also want to know if we can read/write intentions for services // so here we add intentions read/write for the specific segment/service prefix - return super.generateForSegment(...arguments).concat([ - this.permissions.generate('intention', ACCESS_READ, segment), - this.permissions.generate('intention', ACCESS_WRITE, segment), - ]); + return super + .generateForSegment(...arguments) + .concat([ + this.permissions.generate('intention', ACCESS_READ, segment), + this.permissions.generate('intention', ACCESS_WRITE, segment), + ]); } } diff --git a/ui/packages/consul-ui/app/abilities/zervice.js b/ui/packages/consul-ui/app/abilities/zervice.js index 60a7a16f1e..c2d01b7f45 100644 --- a/ui/packages/consul-ui/app/abilities/zervice.js +++ b/ui/packages/consul-ui/app/abilities/zervice.js @@ -12,7 +12,7 @@ export default class ZerviceAbility extends BaseAbility { return false; } const found = this.item.Resources.find( - item => item.Resource === 'intention' && item.Access === 'read' && item.Allow === true + (item) => item.Resource === 'intention' && item.Access === 'read' && item.Allow === true ); return typeof found !== 'undefined'; } @@ -22,7 +22,7 @@ export default class ZerviceAbility extends BaseAbility { return false; } const found = this.item.Resources.find( - item => item.Resource === 'intention' && item.Access === 'write' && item.Allow === true + (item) => item.Resource === 'intention' && item.Access === 'write' && item.Allow === true ); return typeof found !== 'undefined'; } diff --git a/ui/packages/consul-ui/app/adapters/http.js b/ui/packages/consul-ui/app/adapters/http.js index 3794e27a54..0416f4acad 100644 --- a/ui/packages/consul-ui/app/adapters/http.js +++ b/ui/packages/consul-ui/app/adapters/http.js @@ -15,24 +15,24 @@ import AdapterError, { // `serialized, unserialized` and the other just `query` // they could actually be one function now, but would be nice to think about // the naming of things (serialized vs query etc) -const read = function(adapter, modelName, type, query = {}) { +const read = function (adapter, modelName, type, query = {}) { return adapter.rpc( - function(adapter, ...rest) { + function (adapter, ...rest) { return adapter[`requestFor${type}`](...rest); }, - function(serializer, ...rest) { + function (serializer, ...rest) { return serializer[`respondFor${type}`](...rest); }, query, modelName ); }; -const write = function(adapter, modelName, type, snapshot) { +const write = function (adapter, modelName, type, snapshot) { return adapter.rpc( - function(adapter, ...rest) { + function (adapter, ...rest) { return adapter[`requestFor${type}`](...rest); }, - function(serializer, ...rest) { + function (serializer, ...rest) { return serializer[`respondFor${type}`](...rest); }, snapshot, @@ -66,13 +66,13 @@ export default class HttpAdapter extends Adapter { } return client - .request(function(request) { + .request(function (request) { return req(adapter, request, serialized, unserialized, modelClass); }) - .catch(function(e) { + .catch(function (e) { return adapter.error(e); }) - .then(function(respond) { + .then(function (respond) { // TODO: When HTTPAdapter:responder changes, this will also need to change return resp(serializer, respond, serialized, unserialized, modelClass); }); diff --git a/ui/packages/consul-ui/app/adapters/node.js b/ui/packages/consul-ui/app/adapters/node.js index de3f3c2956..6a65b6df30 100644 --- a/ui/packages/consul-ui/app/adapters/node.js +++ b/ui/packages/consul-ui/app/adapters/node.js @@ -58,10 +58,10 @@ export default class NodeAdapter extends Adapter { queryLeader(store, type, id, snapshot) { return this.rpc( - function(adapter, request, serialized, unserialized) { + function (adapter, request, serialized, unserialized) { return adapter.requestForQueryLeader(request, serialized, unserialized); }, - function(serializer, respond, serialized, unserialized) { + function (serializer, respond, serialized, unserialized) { return serializer.respondForQueryLeader(respond, serialized, unserialized); }, snapshot, diff --git a/ui/packages/consul-ui/app/adapters/nspace.js b/ui/packages/consul-ui/app/adapters/nspace.js index cb340c5080..490cb54ede 100644 --- a/ui/packages/consul-ui/app/adapters/nspace.js +++ b/ui/packages/consul-ui/app/adapters/nspace.js @@ -40,8 +40,8 @@ export default class NspaceAdapter extends Adapter { Name: serialized.Name, Description: serialized.Description, ACLs: { - PolicyDefaults: serialized.ACLs.PolicyDefaults.map(item => ({ ID: item.ID })), - RoleDefaults: serialized.ACLs.RoleDefaults.map(item => ({ ID: item.ID })), + PolicyDefaults: serialized.ACLs.PolicyDefaults.map((item) => ({ ID: item.ID })), + RoleDefaults: serialized.ACLs.RoleDefaults.map((item) => ({ ID: item.ID })), }, }} `; @@ -57,8 +57,8 @@ export default class NspaceAdapter extends Adapter { ${{ Description: serialized.Description, ACLs: { - PolicyDefaults: serialized.ACLs.PolicyDefaults.map(item => ({ ID: item.ID })), - RoleDefaults: serialized.ACLs.RoleDefaults.map(item => ({ ID: item.ID })), + PolicyDefaults: serialized.ACLs.PolicyDefaults.map((item) => ({ ID: item.ID })), + RoleDefaults: serialized.ACLs.RoleDefaults.map((item) => ({ ID: item.ID })), }, }} `; diff --git a/ui/packages/consul-ui/app/adapters/oidc-provider.js b/ui/packages/consul-ui/app/adapters/oidc-provider.js index 155331f5ab..0bd094cad9 100644 --- a/ui/packages/consul-ui/app/adapters/oidc-provider.js +++ b/ui/packages/consul-ui/app/adapters/oidc-provider.js @@ -67,10 +67,10 @@ export default class OidcProviderAdapter extends Adapter { authorize(store, type, id, snapshot) { return this.rpc( - function(adapter, request, serialized, unserialized) { + function (adapter, request, serialized, unserialized) { return adapter.requestForAuthorize(request, serialized, unserialized); }, - function(serializer, respond, serialized, unserialized) { + function (serializer, respond, serialized, unserialized) { return serializer.respondForAuthorize(respond, serialized, unserialized); }, snapshot, @@ -80,10 +80,10 @@ export default class OidcProviderAdapter extends Adapter { logout(store, type, id, snapshot) { return this.rpc( - function(adapter, request, serialized, unserialized) { + function (adapter, request, serialized, unserialized) { return adapter.requestForLogout(request, serialized, unserialized); }, - function(serializer, respond, serialized, unserialized) { + function (serializer, respond, serialized, unserialized) { // its ok to return nothing here for the moment at least return {}; }, diff --git a/ui/packages/consul-ui/app/adapters/permission.js b/ui/packages/consul-ui/app/adapters/permission.js index 33493b375a..1dd086c9ae 100644 --- a/ui/packages/consul-ui/app/adapters/permission.js +++ b/ui/packages/consul-ui/app/adapters/permission.js @@ -16,10 +16,10 @@ export default class PermissionAdapter extends Adapter { // ^ same goes for Partitions if (this.env.var('CONSUL_NSPACES_ENABLED')) { - resources = resources.map(item => ({ ...item, Namespace: ns })); + resources = resources.map((item) => ({ ...item, Namespace: ns })); } if (this.env.var('CONSUL_PARTITIONS_ENABLED')) { - resources = resources.map(item => ({ ...item, Partition: partition })); + resources = resources.map((item) => ({ ...item, Partition: partition })); } return request` POST /v1/internal/acl/authorize?${{ dc }} @@ -40,24 +40,24 @@ export default class PermissionAdapter extends Adapter { // Same goes ^ for partitions const nspacesEnabled = this.env.var('CONSUL_NSPACES_ENABLED'); const partitionsEnabled = this.env.var('CONSUL_PARTITIONS_ENABLED'); - if(nspacesEnabled || partitionsEnabled) { + if (nspacesEnabled || partitionsEnabled) { const token = await this.settings.findBySlug('token'); - if(nspacesEnabled) { - if(typeof serialized.ns === 'undefined' || serialized.ns.length === 0) { + if (nspacesEnabled) { + if (typeof serialized.ns === 'undefined' || serialized.ns.length === 0) { serialized.ns = token.Namespace; } } - if(partitionsEnabled) { - if(typeof serialized.partition === 'undefined' || serialized.partition.length === 0) { + if (partitionsEnabled) { + if (typeof serialized.partition === 'undefined' || serialized.partition.length === 0) { serialized.partition = token.Partition; } } } return adapter.requestForAuthorize(request, serialized); }, - function(serializer, respond, serialized, unserialized) { + function (serializer, respond, serialized, unserialized) { // Completely skip the serializer here - return respond(function(headers, body) { + return respond(function (headers, body) { return body; }); }, diff --git a/ui/packages/consul-ui/app/adapters/token.js b/ui/packages/consul-ui/app/adapters/token.js index 2865688773..5502dbd899 100644 --- a/ui/packages/consul-ui/app/adapters/token.js +++ b/ui/packages/consul-ui/app/adapters/token.js @@ -134,10 +134,10 @@ export default class TokenAdapter extends Adapter { // services/store.js self(store, type, id, unserialized) { return this.rpc( - function(adapter, request, serialized, data) { + function (adapter, request, serialized, data) { return adapter.requestForSelf(request, serialized, data); }, - function(serializer, respond, serialized, data) { + function (serializer, respond, serialized, data) { return serializer.respondForSelf(respond, serialized, data); }, unserialized, @@ -147,7 +147,7 @@ export default class TokenAdapter extends Adapter { clone(store, type, id, snapshot) { return this.rpc( - function(adapter, request, serialized, data) { + function (adapter, request, serialized, data) { return adapter.requestForCloneRecord(request, serialized, data); }, (serializer, respond, serialized, data) => { diff --git a/ui/packages/consul-ui/app/components/aria-menu/index.js b/ui/packages/consul-ui/app/components/aria-menu/index.js index 4162a1995d..de15932639 100644 --- a/ui/packages/consul-ui/app/components/aria-menu/index.js +++ b/ui/packages/consul-ui/app/components/aria-menu/index.js @@ -14,20 +14,20 @@ const ARROW_DOWN = 40; const keys = { vertical: { - [ARROW_DOWN]: function($items, i = -1) { + [ARROW_DOWN]: function ($items, i = -1) { return (i + 1) % $items.length; }, - [ARROW_UP]: function($items, i = 0) { + [ARROW_UP]: function ($items, i = 0) { if (i === 0) { return $items.length - 1; } else { return i - 1; } }, - [HOME]: function($items, i) { + [HOME]: function ($items, i) { return 0; }, - [END]: function($items, i) { + [END]: function ($items, i) { return $items.length - 1; }, }, @@ -43,29 +43,29 @@ export default Component.extend({ expanded: false, orientation: 'vertical', keyboardAccess: true, - init: function() { + init: function () { this._super(...arguments); set(this, 'guid', this.dom.guid(this)); this._listeners = this.dom.listeners(); this._routelisteners = this.dom.listeners(); }, - didInsertElement: function() { + didInsertElement: function () { // TODO: How do you detect whether the children have changed? // For now we know that these elements exist and never change this.$menu = this.dom.element(`#${COMPONENT_ID}menu-${this.guid}`); const labelledBy = this.$menu.getAttribute('aria-labelledby'); this.$trigger = this.dom.element(`#${labelledBy}`); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); this._listeners.remove(); this._routelisteners.remove(); }, actions: { - keypressClick: function(e) { + keypressClick: function (e) { e.target.dispatchEvent(new MouseEvent('click')); }, - keypress: function(e) { + keypress: function (e) { // If the event is from the trigger and its not an opening/closing // key then don't do anything if (![ENTER, SPACE, ARROW_UP, ARROW_DOWN].includes(e.keyCode)) { @@ -99,7 +99,7 @@ export default Component.extend({ const $focused = this.dom.element(`${MENU_ITEMS}:focus`, this.$menu); let i; if ($focused) { - i = $items.findIndex(function($item) { + i = $items.findIndex(function ($item) { return $item === $focused; }); } @@ -108,7 +108,7 @@ export default Component.extend({ }, // TODO: The argument here needs to change to an event // see toggle-button.change - change: function(e) { + change: function (e) { const open = e.target.checked; if (open) { this.actions.open.apply(this, [e]); @@ -116,7 +116,7 @@ export default Component.extend({ this.actions.close.apply(this, [e]); } }, - close: function(e) { + close: function (e) { this._listeners.remove(); set(this, 'expanded', false); // TODO: Find a better way to do this without using next @@ -127,7 +127,7 @@ export default Component.extend({ this.$trigger.removeAttribute('tabindex'); }); }, - open: function(e) { + open: function (e) { set(this, 'expanded', true); const $items = [...this.dom.elements(MENU_ITEMS, this.$menu)]; if ($items.length === 0) { @@ -138,7 +138,7 @@ export default Component.extend({ // Take the trigger out of the tabbing whilst the menu is open this.$trigger.setAttribute('tabindex', '-1'); this._listeners.add(this.dom.document(), { - keydown: e => { + keydown: (e) => { // Keep focus on the trigger when you close via ESC if (e.keyCode === ESC) { this.$trigger.focus(); diff --git a/ui/packages/consul-ui/app/components/auth-form/pageobject.js b/ui/packages/consul-ui/app/components/auth-form/pageobject.js index 040474961f..b21bfb6ee7 100644 --- a/ui/packages/consul-ui/app/components/auth-form/pageobject.js +++ b/ui/packages/consul-ui/app/components/auth-form/pageobject.js @@ -1,6 +1,7 @@ -export default (submitable, clickable, attribute) => (scope = '.auth-form') => { - return { - scope: scope, - ...submitable(), +export default (submitable, clickable, attribute) => + (scope = '.auth-form') => { + return { + scope: scope, + ...submitable(), + }; }; -}; diff --git a/ui/packages/consul-ui/app/components/child-selector/index.js b/ui/packages/consul-ui/app/components/child-selector/index.js index 291364fc34..7f8d895c84 100644 --- a/ui/packages/consul-ui/app/components/child-selector/index.js +++ b/ui/packages/consul-ui/app/components/child-selector/index.js @@ -8,10 +8,10 @@ import { task } from 'ember-concurrency'; import Slotted from 'block-slots'; export default Component.extend(Slotted, { - onchange: function() {}, + onchange: function () {}, tagName: '', - error: function() {}, + error: function () {}, type: '', dom: service('dom'), @@ -21,17 +21,17 @@ export default Component.extend(Slotted, { selectedOptions: alias('items'), - init: function() { + init: function () { this._super(...arguments); this._listeners = this.dom.listeners(); - this.form = this.formContainer.form(this.type); + set(this, 'form', this.formContainer.form(this.type)); this.form.clear({ Datacenter: this.dc, Namespace: this.nspace }); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); this._listeners.remove(); }, - options: computed('selectedOptions.[]', 'allOptions.[]', function() { + options: computed('selectedOptions.[]', 'allOptions.[]', function () { // It's not massively important here that we are defaulting `items` and // losing reference as its just to figure out the diff let options = this.allOptions || []; @@ -40,11 +40,11 @@ export default Component.extend(Slotted, { // filter out any items from the available options that have already been // selected/added // TODO: find a proper ember-data diff - options = options.filter(item => !items.findBy('ID', get(item, 'ID'))); + options = options.filter((item) => !items.findBy('ID', get(item, 'ID'))); } return options; }), - save: task(function*(item, items, success = function() {}) { + save: task(function* (item, items, success = function () {}) { const repo = this.repo; try { item = yield repo.persist(item); @@ -64,14 +64,14 @@ export default Component.extend(Slotted, { } }), actions: { - reset: function() { + reset: function () { this.form.clear({ Datacenter: this.dc, Namespace: this.nspace, Partition: this.partition }); }, - remove: function(item, items) { + remove: function (item, items) { const prop = this.repo.getSlugKey(); const value = get(item, prop); - const pos = items.findIndex(function(item) { + const pos = items.findIndex(function (item) { return get(item, prop) === value; }); if (pos !== -1) { @@ -79,7 +79,7 @@ export default Component.extend(Slotted, { } this.onchange({ target: this }); }, - change: function(e, value, item) { + change: function (e, value, item) { const event = this.dom.normalizeEvent(...arguments); const items = value; switch (event.target.name) { diff --git a/ui/packages/consul-ui/app/components/code-editor/index.js b/ui/packages/consul-ui/app/components/code-editor/index.js index 2d54bbb61a..b741f70ebc 100644 --- a/ui/packages/consul-ui/app/components/code-editor/index.js +++ b/ui/packages/consul-ui/app/components/code-editor/index.js @@ -17,20 +17,20 @@ export default Component.extend({ readonly: false, syntax: '', // TODO: Change this to oninput to be consistent? We'll have to do it throughout the templates - onkeyup: function() {}, - oninput: function() {}, - init: function() { + onkeyup: function () {}, + oninput: function () {}, + init: function () { this._super(...arguments); set(this, 'modes', this.helper.modes()); }, - didReceiveAttrs: function() { + didReceiveAttrs: function () { this._super(...arguments); const editor = this.editor; if (editor) { editor.setOption('readOnly', this.readonly); } }, - setMode: function(mode) { + setMode: function (mode) { let options = { ...DEFAULTS, mode: mode.mime, @@ -48,13 +48,13 @@ export default Component.extend({ this.helper.lint(editor, mode.mode); set(this, 'mode', mode); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); if (this.observer) { this.observer.disconnect(); } }, - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); const $code = this.dom.element('textarea ~ pre code', this.element); if ($code.firstChild) { @@ -70,11 +70,11 @@ export default Component.extend({ set(this, 'value', $code.firstChild.wholeText); } set(this, 'editor', this.helper.getEditor(this.element)); - this.settings.findBySlug('code-editor').then(mode => { + this.settings.findBySlug('code-editor').then((mode) => { const modes = this.modes; const syntax = this.syntax; if (syntax) { - mode = modes.find(function(item) { + mode = modes.find(function (item) { return item.name.toLowerCase() == syntax.toLowerCase(); }); } @@ -82,11 +82,11 @@ export default Component.extend({ this.setMode(mode); }); }, - didAppear: function() { + didAppear: function () { this.editor.refresh(); }, actions: { - change: function(value) { + change: function (value) { this.settings.persist({ 'code-editor': value, }); diff --git a/ui/packages/consul-ui/app/components/confirmation-dialog/index.js b/ui/packages/consul-ui/app/components/confirmation-dialog/index.js index d44c7471d9..951e2e9f52 100644 --- a/ui/packages/consul-ui/app/components/confirmation-dialog/index.js +++ b/ui/packages/consul-ui/app/components/confirmation-dialog/index.js @@ -10,14 +10,14 @@ export default Component.extend(Slotted, { confirming: false, permanent: false, actions: { - cancel: function() { + cancel: function () { set(this, 'confirming', false); }, - execute: function() { + execute: function () { set(this, 'confirming', false); this.sendAction(...['actionName', ...this['arguments']]); }, - confirm: function() { + confirm: function () { const [action, ...args] = arguments; set(this, 'actionName', action); set(this, 'arguments', args); diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js index 8b16e5b5c1..6d8ffa7f6b 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js @@ -11,13 +11,13 @@ export default Component.extend({ classNames: ['discovery-chain'], classNameBindings: ['active'], selectedId: '', - init: function() { + init: function () { this._super(...arguments); this._listeners = this.dom.listeners(); }, - didInsertElement: function() { + didInsertElement: function () { this._listeners.add(this.dom.document(), { - click: e => { + click: (e) => { // all route/splitter/resolver components currently // have classes that end in '-card' if (!this.dom.closest('[class$="-card"]', e.target)) { @@ -27,21 +27,21 @@ export default Component.extend({ }, }); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); this._listeners.remove(); this.ticker.destroy(this); }, - splitters: computed('chain.Nodes', function() { + splitters: computed('chain.Nodes', function () { return getSplitters(get(this, 'chain.Nodes')); }), - routes: computed('chain.Nodes', function() { + routes: computed('chain.Nodes', function () { const routes = getRoutes(get(this, 'chain.Nodes'), this.dom.guid); // if we have no routes with a PathPrefix of '/' or one with no definition at all // then add our own 'default catch all' if ( - !routes.find(item => get(item, 'Definition.Match.HTTP.PathPrefix') === '/') && - !routes.find(item => typeof item.Definition === 'undefined') + !routes.find((item) => get(item, 'Definition.Match.HTTP.PathPrefix') === '/') && + !routes.find((item) => typeof item.Definition === 'undefined') ) { let nextNode; const resolverID = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Partition}.${this.chain.Datacenter}`; @@ -72,7 +72,7 @@ export default Component.extend({ } return routes; }), - nodes: computed('routes', 'splitters', 'resolvers', function() { + nodes: computed('routes', 'splitters', 'resolvers', function () { let nodes = this.resolvers.reduce((prev, item) => { prev[`resolver:${item.ID}`] = item; item.Children.reduce((prev, item) => { @@ -94,7 +94,7 @@ export default Component.extend({ value.NextItem = nodes[value.NextNode]; } if (typeof value.Splits !== 'undefined') { - value.Splits.forEach(item => { + value.Splits.forEach((item) => { if (typeof item.NextNode !== 'undefined') { item.NextItem = nodes[item.NextNode]; } @@ -103,7 +103,7 @@ export default Component.extend({ }); return ''; }), - resolvers: computed('chain.{Nodes,Targets}', function() { + resolvers: computed('chain.{Nodes,Targets}', function () { return getResolvers( this.chain.Datacenter, this.chain.Partition, @@ -112,10 +112,10 @@ export default Component.extend({ get(this, 'chain.Nodes') ); }), - graph: computed('splitters', 'routes.[]', function() { + graph: computed('splitters', 'routes.[]', function () { const graph = this.dataStructs.graph(); - this.splitters.forEach(item => { - item.Splits.forEach(splitter => { + this.splitters.forEach((item) => { + item.Splits.forEach((splitter) => { graph.addLink(item.ID, splitter.NextNode); }); }); @@ -124,7 +124,7 @@ export default Component.extend({ }); return graph; }), - selected: computed('selectedId', 'graph', function() { + selected: computed('selectedId', 'graph', function () { if (this.selectedId === '' || !this.dom.element(`#${this.selectedId}`)) { return {}; } @@ -144,12 +144,12 @@ export default Component.extend({ }); }); return { - nodes: nodes.map(item => `#${CSS.escape(item)}`), - edges: edges.map(item => `#${CSS.escape(item)}`), + nodes: nodes.map((item) => `#${CSS.escape(item)}`), + edges: edges.map((item) => `#${CSS.escape(item)}`), }; }), actions: { - click: function(e) { + click: function (e) { const id = e.currentTarget.getAttribute('id'); if (id === this.selectedId) { set(this, 'active', false); diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.js b/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.js index c9fb037d88..6d47438ef4 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.js +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.js @@ -4,7 +4,7 @@ import { get } from '@ember/object'; export default class RouteCard extends Component { get path() { return Object.entries(get(this.args.item, 'Definition.Match.HTTP') || {}).reduce( - function(prev, [key, value]) { + function (prev, [key, value]) { if (key.toLowerCase().startsWith('path')) { return { type: key.replace('Path', ''), diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/utils.js b/ui/packages/consul-ui/app/components/consul/discovery-chain/utils.js index e9d8d7c4bd..df20a6086b 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/utils.js +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/utils.js @@ -1,7 +1,7 @@ -const getNodesByType = function(nodes = {}, type) { - return Object.values(nodes).filter(item => item.Type === type); +const getNodesByType = function (nodes = {}, type) { + return Object.values(nodes).filter((item) => item.Type === type); }; -const findResolver = function(resolvers, service, nspace = 'default', partition = 'default', dc) { +const findResolver = function (resolvers, service, nspace = 'default', partition = 'default', dc) { if (typeof resolvers[service] === 'undefined') { resolvers[service] = { ID: `${service}.${nspace}.${partition}.${dc}`, @@ -11,16 +11,16 @@ const findResolver = function(resolvers, service, nspace = 'default', partition } return resolvers[service]; }; -export const getAlternateServices = function(targets, a) { +export const getAlternateServices = function (targets, a) { let type; - const Targets = targets.map(function(b) { + const Targets = targets.map(function (b) { // TODO: this isn't going to work past namespace for services // with dots in the name, but by the time that becomes an issue // we might have more data from the endpoint so we don't have to guess // right now the backend also doesn't support dots in service names - const [aRev, bRev] = [a, b].map(item => item.split('.').reverse()); + const [aRev, bRev] = [a, b].map((item) => item.split('.').reverse()); const types = ['Datacenter', 'Partition', 'Namespace', 'Service', 'Subset']; - return bRev.find(function(item, i) { + return bRev.find(function (item, i) { const res = item !== aRev[i]; if (res) { type = types[i]; @@ -34,8 +34,8 @@ export const getAlternateServices = function(targets, a) { }; }; -export const getSplitters = function(nodes) { - return getNodesByType(nodes, 'splitter').map(function(item) { +export const getSplitters = function (nodes) { + return getNodesByType(nodes, 'splitter').map(function (item) { // Splitters need IDs adding so we can find them in the DOM later // splitters have a service.nspace as a name // do the reverse dance to ensure we don't mess up any @@ -52,17 +52,17 @@ export const getSplitters = function(nodes) { }; }); }; -export const getRoutes = function(nodes, uid) { - return getNodesByType(nodes, 'router').reduce(function(prev, item) { +export const getRoutes = function (nodes, uid) { + return getNodesByType(nodes, 'router').reduce(function (prev, item) { return prev.concat( - item.Routes.map(function(route, i) { + item.Routes.map(function (route, i) { // Routes also have IDs added via createRoute return createRoute(route, item.Name, uid); }) ); }, []); }; -export const getResolvers = function( +export const getResolvers = function ( dc, partition = 'default', nspace = 'default', @@ -72,8 +72,8 @@ export const getResolvers = function( const resolvers = {}; // make all our resolver nodes Object.values(nodes) - .filter(item => item.Type === 'resolver') - .forEach(function(item) { + .filter((item) => item.Type === 'resolver') + .forEach(function (item) { const parts = item.Name.split('.'); let subset; // this will leave behind the service.name.nspace.partition.dc even if the service name contains a dot @@ -113,7 +113,7 @@ export const getResolvers = function( } } }); - Object.values(targets).forEach(target => { + Object.values(targets).forEach((target) => { // Failovers don't have a specific node if (typeof nodes[`resolver:${target.ID}`] !== 'undefined') { // We use this to figure out whether this target is a redirect target @@ -144,7 +144,7 @@ export const getResolvers = function( }); return Object.values(resolvers); }; -export const createRoute = function(route, router, uid) { +export const createRoute = function (route, router, uid) { return { ...route, Default: route.Default || typeof route.Definition.Match === 'undefined', diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/pageobject.js b/ui/packages/consul-ui/app/components/consul/health-check/list/pageobject.js index e57e47aea2..286933d4c5 100644 --- a/ui/packages/consul-ui/app/components/consul/health-check/list/pageobject.js +++ b/ui/packages/consul-ui/app/components/consul/health-check/list/pageobject.js @@ -1,10 +1,11 @@ -export default (collection, text) => (scope = '.consul-health-check-list') => { - return { - scope, - item: collection('li', { - name: text('header h3'), - type: text('[data-health-check-type]'), - exposed: text('[data-test-exposed]'), - }), +export default (collection, text) => + (scope = '.consul-health-check-list') => { + return { + scope, + item: collection('li', { + name: text('header h3'), + type: text('[data-health-check-type]'), + exposed: text('[data-test-exposed]'), + }), + }; }; -}; diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs index e601bb5571..9f9972a392 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs @@ -192,7 +192,7 @@ @@ -201,7 +201,7 @@ {{else}} diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.js b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.js index b2d001be57..9437bb8e7a 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.js +++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.js @@ -5,20 +5,24 @@ export default Component.extend({ shouldShowPermissionForm: false, + openModal() { + this.modal?.open(); + }, + actions: { - createNewLabel: function(template, term) { + createNewLabel: function (template, term) { return template.replace(/{{term}}/g, term); }, - isUnique: function(items, term) { + isUnique: function (items, term) { return !items.findBy('Name', term); }, - add: function(name, changeset, value) { + add: function (name, changeset, value) { if (!(changeset.get(name) || []).includes(value) && value.isNew) { changeset.pushObject(name, value); changeset.validate(); } }, - delete: function(name, changeset, value) { + delete: function (name, changeset, value) { if ((changeset.get(name) || []).includes(value)) { changeset.removeObject(name, value); changeset.validate(); diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.js b/ui/packages/consul-ui/app/components/consul/intention/form/index.js index c37ce52494..04615f7c20 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/index.js +++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.js @@ -79,7 +79,9 @@ export default class ConsulIntentionForm extends Component { let items = e.data .uniqBy('Name') .toArray() - .filter(item => !['connect-proxy', 'mesh-gateway', 'terminating-gateway'].includes(item.Kind)) + .filter( + (item) => !['connect-proxy', 'mesh-gateway', 'terminating-gateway'].includes(item.Kind) + ) .sort((a, b) => a.Name.localeCompare(b.Name)); items = [{ Name: '*' }].concat(items); let source = items.findBy('Name', item.SourceName); diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/pageobject.js b/ui/packages/consul-ui/app/components/consul/intention/list/pageobject.js index c8c60d6f43..ee53cc17ff 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/pageobject.js +++ b/ui/packages/consul-ui/app/components/consul/intention/list/pageobject.js @@ -1,17 +1,19 @@ -export default (collection, clickable, attribute, isPresent, deletable) => ( - scope = '.consul-intention-list' -) => { - const row = { - source: attribute('data-test-intention-source', '[data-test-intention-source]'), - destination: attribute('data-test-intention-destination', '[data-test-intention-destination]'), - action: attribute('data-test-intention-action', '[data-test-intention-action]'), - intention: clickable('a'), - actions: clickable('label'), - ...deletable(), +export default (collection, clickable, attribute, isPresent, deletable) => + (scope = '.consul-intention-list') => { + const row = { + source: attribute('data-test-intention-source', '[data-test-intention-source]'), + destination: attribute( + 'data-test-intention-destination', + '[data-test-intention-destination]' + ), + action: attribute('data-test-intention-action', '[data-test-intention-action]'), + intention: clickable('a'), + actions: clickable('label'), + ...deletable(), + }; + return { + scope: scope, + customResourceNotice: isPresent('.consul-intention-notice-custom-resource'), + intentions: collection('[data-test-tabular-row]', row), + }; }; - return { - scope: scope, - customResourceNotice: isPresent('.consul-intention-notice-custom-resource'), - intentions: collection('[data-test-tabular-row]', row), - }; -}; diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/index.js b/ui/packages/consul-ui/app/components/consul/intention/permission/form/index.js index d52c0f885d..eb61373616 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/index.js +++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/index.js @@ -12,18 +12,18 @@ export default Component.extend({ change: service('change'), repo: service(`repository/${name}`), - onsubmit: function() {}, - onreset: function() {}, + onsubmit: function () {}, + onreset: function () {}, intents: alias(`schema.${name}.Action.allowedValues`), methods: alias(`schema.${name}-http.Methods.allowedValues`), pathProps: alias(`schema.${name}-http.PathType.allowedValues`), - pathTypes: computed('pathProps', function() { + pathTypes: computed('pathProps', function () { return ['NoPath'].concat(this.pathProps); }), - pathLabels: computed(function() { + pathLabels: computed(function () { return { NoPath: 'No Path', PathExact: 'Exact', @@ -32,7 +32,7 @@ export default Component.extend({ }; }), - pathInputLabels: computed(function() { + pathInputLabels: computed(function () { return { PathExact: 'Exact Path', PathPrefix: 'Path Prefix', @@ -40,7 +40,7 @@ export default Component.extend({ }; }), - changeset: computed('item', function() { + changeset: computed('item', function () { const changeset = this.change.changesetFor(name, this.item || this.repo.create()); if (changeset.isNew) { changeset.validate(); @@ -48,7 +48,7 @@ export default Component.extend({ return changeset; }), - pathType: computed('changeset._changes.HTTP.PathType', 'pathTypes.firstObject', function() { + pathType: computed('changeset._changes.HTTP.PathType', 'pathTypes.firstObject', function () { return this.changeset.HTTP.PathType || this.pathTypes.firstObject; }), noPathType: equal('pathType', 'NoPath'), @@ -57,14 +57,14 @@ export default Component.extend({ allMethods: false, shouldShowMethods: not('allMethods'), - didReceiveAttrs: function() { + didReceiveAttrs: function () { if (!get(this, 'item.HTTP.Methods.length')) { set(this, 'allMethods', true); } }, actions: { - change: function(name, changeset, e) { + change: function (name, changeset, e) { const value = typeof get(e, 'target.value') !== 'undefined' ? e.target.value : e; switch (name) { case 'allMethods': @@ -82,21 +82,21 @@ export default Component.extend({ } changeset.validate(); }, - add: function(prop, changeset, value) { + add: function (prop, changeset, value) { changeset.pushObject(prop, value); changeset.validate(); }, - delete: function(prop, changeset, value) { + delete: function (prop, changeset, value) { changeset.removeObject(prop, value); changeset.validate(); }, - submit: function(changeset, e) { + submit: function (changeset, e) { const pathChanged = typeof changeset.changes.find( ({ key, value }) => key === 'HTTP.PathType' || key === 'HTTP.Path' ) !== 'undefined'; if (pathChanged) { - this.pathProps.forEach(prop => { + this.pathProps.forEach((prop) => { changeset.set(`HTTP.${prop}`, undefined); }); if (changeset.HTTP.PathType !== 'NoPath') { @@ -115,7 +115,7 @@ export default Component.extend({ this.repo.persist(changeset); this.onsubmit(changeset.data); }, - reset: function(changeset, e) { + reset: function (changeset, e) { changeset.rollback(); this.onreset(changeset.data); }, diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/header/form/index.js b/ui/packages/consul-ui/app/components/consul/intention/permission/header/form/index.js index 80c79a0f4c..ce63d2ad32 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/permission/header/form/index.js +++ b/ui/packages/consul-ui/app/components/consul/intention/permission/header/form/index.js @@ -12,10 +12,10 @@ export default Component.extend({ change: service('change'), repo: service(`repository/${name}`), - onsubmit: function() {}, - onreset: function() {}, + onsubmit: function () {}, + onreset: function () {}, - changeset: computed('item', function() { + changeset: computed('item', function () { return this.change.changesetFor( name, this.item || @@ -27,7 +27,7 @@ export default Component.extend({ headerTypes: alias(`schema.${name}.HeaderType.allowedValues`), - headerLabels: computed(function() { + headerLabels: computed(function () { return { Exact: 'Exactly Matching', Prefix: 'Prefixed by', @@ -37,7 +37,7 @@ export default Component.extend({ }; }), - headerType: computed('changeset.HeaderType', 'headerTypes.firstObject', function() { + headerType: computed('changeset.HeaderType', 'headerTypes.firstObject', function () { return this.changeset.HeaderType || this.headerTypes.firstObject; }), @@ -45,7 +45,7 @@ export default Component.extend({ shouldShowValueField: not('headerTypeEqualsPresent'), actions: { - change: function(name, changeset, e) { + change: function (name, changeset, e) { const value = typeof get(e, 'target.value') !== 'undefined' ? e.target.value : e; switch (name) { default: @@ -53,8 +53,8 @@ export default Component.extend({ } changeset.validate(); }, - submit: function(changeset) { - this.headerTypes.forEach(prop => { + submit: function (changeset) { + this.headerTypes.forEach((prop) => { changeset.set(prop, undefined); }); // Present is a boolean, whereas all other header types have a value @@ -78,7 +78,7 @@ export default Component.extend({ }) ); }, - reset: function(changeset, e) { + reset: function (changeset, e) { changeset.rollback(); }, }, diff --git a/ui/packages/consul-ui/app/components/consul/kv/form/index.js b/ui/packages/consul-ui/app/components/consul/kv/form/index.js index 5ab27d6947..baf628a6fa 100644 --- a/ui/packages/consul-ui/app/components/consul/kv/form/index.js +++ b/ui/packages/consul-ui/app/components/consul/kv/form/index.js @@ -6,15 +6,15 @@ export default Component.extend({ tagName: '', encoder: service('btoa'), json: true, - ondelete: function() { + ondelete: function () { this.onsubmit(...arguments); }, - oncancel: function() { + oncancel: function () { this.onsubmit(...arguments); }, - onsubmit: function() {}, + onsubmit: function () {}, actions: { - change: function(e, form) { + change: function (e, form) { const item = form.getData(); try { form.handleEvent(e); diff --git a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.js b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.js index 01a7249f38..852a42ecc3 100644 --- a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.js +++ b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.js @@ -3,10 +3,10 @@ import { tracked } from '@glimmer/tracking'; const size = 336; const insetSize = size / 2 - 8; -const inset = function(num) { +const inset = function (num) { return insetSize * num; }; -const milliseconds = function(num, max) { +const milliseconds = function (num, max) { return max > 0 ? parseInt(max * num) / 100 : 0; }; export default class TomographyGraph extends Component { @@ -19,7 +19,7 @@ export default class TomographyGraph extends Component { get milliseconds() { const distances = this.args.distances || []; const max = distances.reduce((prev, d) => Math.max(prev, d.distance), this.max); - return [25, 50, 75, 100].map(item => milliseconds(item, max)); + return [25, 50, 75, 100].map((item) => milliseconds(item, max)); } get distances() { @@ -30,7 +30,7 @@ export default class TomographyGraph extends Component { // We have more nodes than we want to show, take a random sampling to keep // the number around 360. const sampling = 360 / len; - distances = distances.filter(function(_, i) { + distances = distances.filter(function (_, i) { return i == 0 || i == len - 1 || Math.random() < sampling; }); } diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/pageobject.js b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/pageobject.js index 552200a395..b233a60c28 100644 --- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/pageobject.js +++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/pageobject.js @@ -1,11 +1,12 @@ -export default (collection, text) => (scope = '.consul-upstream-instance-list') => { - return { - scope, - item: collection('li', { - name: text('.header p'), - nspace: text('.nspace dd'), - datacenter: text('.datacenter dd'), - localAddress: text('.local-address dd'), - }), +export default (collection, text) => + (scope = '.consul-upstream-instance-list') => { + return { + scope, + item: collection('li', { + name: text('.header p'), + nspace: text('.nspace dd'), + datacenter: text('.datacenter dd'), + localAddress: text('.local-address dd'), + }), + }; }; -}; diff --git a/ui/packages/consul-ui/app/components/custom-element/index.js b/ui/packages/consul-ui/app/components/custom-element/index.js index 6d52fdfccf..7e1605a68a 100644 --- a/ui/packages/consul-ui/app/components/custom-element/index.js +++ b/ui/packages/consul-ui/app/components/custom-element/index.js @@ -11,17 +11,23 @@ const typeCast = (attributeInfo, value) => { let type = attributeInfo.type; const d = attributeInfo.default; value = value == null ? attributeInfo.default : value; - if(type.indexOf('|') !== -1) { - assert(`"${value} is not of type '${type}'"`, type.split('|').map(item => item.replaceAll('"', '').trim()).includes(value)); + if (type.indexOf('|') !== -1) { + assert( + `"${value} is not of type '${type}'"`, + type + .split('|') + .map((item) => item.replaceAll('"', '').trim()) + .includes(value) + ); type = 'string'; } - switch(type) { + switch (type) { case '': case '': case '': case 'number': { const num = parseFloat(value); - if(isNaN(num)) { + if (isNaN(num)) { return typeof d === 'undefined' ? 0 : d; } else { return num; @@ -33,7 +39,7 @@ const typeCast = (attributeInfo, value) => { case 'string': return (value || '').toString(); } -} +}; const attributeChangingElement = (name, Cls = HTMLElement, attributes = {}, cssprops = {}) => { const attrs = Object.keys(attributes); @@ -48,65 +54,58 @@ const attributeChangingElement = (name, Cls = HTMLElement, attributes = {}, cssp const value = typeCast(attributes[name], newValue); const cssProp = cssprops[`--${name}`]; - if(typeof cssProp !== 'undefined' && cssProp.track === `[${name}]`) { - this.style.setProperty( - `--${name}`, - value - ); + if (typeof cssProp !== 'undefined' && cssProp.track === `[${name}]`) { + this.style.setProperty(`--${name}`, value); } - if(typeof super.attributeChangedCallback === 'function') { + if (typeof super.attributeChangedCallback === 'function') { super.attributeChangedCallback(name, prev, value); } this.dispatchEvent( - new CustomEvent( - ATTRIBUTE_CHANGE, - { - detail: { - name: name, - previousValue: prev, - value: value - } - } - ) + new CustomEvent(ATTRIBUTE_CHANGE, { + detail: { + name: name, + previousValue: prev, + value: value, + }, + }) ); - } - } + }; customElements.define(name, customClass); return () => {}; -} +}; const infoFromArray = (arr, keys) => { return (arr || []).reduce((prev, info) => { let key; const obj = {}; keys.forEach((item, i) => { - if(item === '_') { + if (item === '_') { key = i; return; } - obj[item] = info[i] + obj[item] = info[i]; }); prev[info[key]] = obj; return prev; }, {}); -} +}; const debounceRAF = (cb, prev) => { - if(typeof prev !== 'undefined') { + if (typeof prev !== 'undefined') { cancelAnimationFrame(prev); } return requestAnimationFrame(cb); -} +}; const createElementProxy = ($element, component) => { return new Proxy($element, { get: (target, prop, receiver) => { - switch(prop) { + switch (prop) { case 'attrs': return component.attributes; default: - if(typeof target[prop] === 'function') { + if (typeof target[prop] === 'function') { // need to ensure we use a MultiWeakMap here // if(this.methods.has(prop)) { // return this.methods.get(prop); @@ -115,30 +114,27 @@ const createElementProxy = ($element, component) => { // this.methods.set(prop, method); return method; } - } - } + }, }); -} +}; export default class CustomElementComponent extends Component { - @tracked $element; @tracked _attributes = {}; __attributes; _attchange; - constructor(owner, args) { super(...arguments); - if(!elements.has(args.element)) { + if (!elements.has(args.element)) { const cb = attributeChangingElement( args.element, args.class, infoFromArray(args.attrs, ['_', 'type', 'default', 'description']), infoFromArray(args.cssprops, ['_', 'type', 'track', 'description']) - ) + ); elements.set(args.element, cb); } } @@ -148,8 +144,8 @@ export default class CustomElementComponent extends Component { } get element() { - if(this.$element) { - if(proxies.has(this.$element)) { + if (this.$element) { + if (proxies.has(this.$element)) { return proxies.get(this.$element); } const proxy = createElementProxy(this.$element, this); @@ -165,9 +161,9 @@ export default class CustomElementComponent extends Component { this.$element = $element; this.$element.addEventListener(ATTRIBUTE_CHANGE, this.attributeChange); - (this.args.attrs || []).forEach(entry => { + (this.args.attrs || []).forEach((entry) => { const value = $element.getAttribute(entry[0]); - $element.attributeChangedCallback(entry[0], value, value) + $element.attributeChangedCallback(entry[0], value, value); }); } @@ -183,7 +179,7 @@ export default class CustomElementComponent extends Component { // they all change this.__attributes = { ...this.__attributes, - [e.detail.name]: e.detail.value + [e.detail.name]: e.detail.value, }; this._attchange = debounceRAF(() => { // tell glimmer we changed the attrs diff --git a/ui/packages/consul-ui/app/components/data-form/index.js b/ui/packages/consul-ui/app/components/data-form/index.js index b7db7af669..1f6dae1fdf 100644 --- a/ui/packages/consul-ui/app/components/data-form/index.js +++ b/ui/packages/consul-ui/app/components/data-form/index.js @@ -9,17 +9,17 @@ export default Component.extend(Slotted, { dom: service('dom'), builder: service('form'), create: false, - ondelete: function() { + ondelete: function () { return this.onsubmit(...arguments); }, - oncancel: function() { + oncancel: function () { return this.onsubmit(...arguments); }, - onsubmit: function() {}, - onchange: function(e, form) { + onsubmit: function () {}, + onchange: function (e, form) { return form.handleEvent(e); }, - didReceiveAttrs: function() { + didReceiveAttrs: function () { this._super(...arguments); try { this.form = this.builder.form(this.type); @@ -28,18 +28,18 @@ export default Component.extend(Slotted, { // this lets us load view only data that doesn't have a form } }, - willRender: function() { + willRender: function () { this._super(...arguments); set(this, 'hasError', this._isRegistered('error')); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); if (get(this, 'data.isNew')) { this.data.rollbackAttributes(); } }, actions: { - setData: function(data) { + setData: function (data) { let changeset = data; // convert to a real changeset if (!isChangeset(data) && typeof this.form !== 'undefined') { @@ -49,7 +49,7 @@ export default Component.extend(Slotted, { // and autofill the new record if required if (get(data, 'isNew')) { set(this, 'create', true); - changeset = Object.entries(this.autofill || {}).reduce(function(prev, [key, value]) { + changeset = Object.entries(this.autofill || {}).reduce(function (prev, [key, value]) { set(prev, key, value); return prev; }, changeset); @@ -57,7 +57,7 @@ export default Component.extend(Slotted, { set(this, 'data', changeset); return this.data; }, - change: function(e, value, item) { + change: function (e, value, item) { this.onchange(this.dom.normalizeEvent(e, value), this.form, this.form.getData()); }, }, diff --git a/ui/packages/consul-ui/app/components/data-loader/index.js b/ui/packages/consul-ui/app/components/data-loader/index.js index 19967a12ac..16fc091db1 100644 --- a/ui/packages/consul-ui/app/components/data-loader/index.js +++ b/ui/packages/consul-ui/app/components/data-loader/index.js @@ -5,26 +5,26 @@ import Slotted from 'block-slots'; import chart from './chart.xstate'; export default Component.extend(Slotted, { tagName: '', - onchange: data => data, - init: function() { + onchange: (data) => data, + init: function () { this._super(...arguments); this.chart = chart; }, - didReceiveAttrs: function() { + didReceiveAttrs: function () { this._super(...arguments); if (typeof this.items !== 'undefined') { this.actions.change.apply(this, [this.items]); } }, - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); this.dispatch('LOAD'); }, actions: { - isLoaded: function() { + isLoaded: function () { return typeof this.items !== 'undefined' || typeof this.src === 'undefined'; }, - change: function(data) { + change: function (data) { set(this, 'data', this.onchange(data)); }, }, diff --git a/ui/packages/consul-ui/app/components/data-sink/index.js b/ui/packages/consul-ui/app/components/data-sink/index.js index c3e463d69b..4472cf26d9 100644 --- a/ui/packages/consul-ui/app/components/data-sink/index.js +++ b/ui/packages/consul-ui/app/components/data-sink/index.js @@ -11,10 +11,10 @@ export default Component.extend({ dom: service('dom'), logger: service('logger'), - onchange: function(e) {}, - onerror: function(e) {}, + onchange: function (e) {}, + onerror: function (e) {}, - state: computed('instance', 'instance.{dirtyType,isSaving}', function() { + state: computed('instance', 'instance.{dirtyType,isSaving}', function () { let id; const isSaving = get(this, 'instance.isSaving'); const dirtyType = get(this, 'instance.dirtyType'); @@ -36,21 +36,21 @@ export default Component.extend({ id = `active.${id}`; } return { - matches: name => id.indexOf(name) !== -1, + matches: (name) => id.indexOf(name) !== -1, }; }), - init: function() { + init: function () { this._super(...arguments); this._listeners = this.dom.listeners(); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); this._listeners.remove(); }, - source: function(cb) { + source: function (cb) { const source = once(cb); - const error = err => { + const error = (err) => { set(this, 'instance', undefined); try { this.onerror(err); @@ -60,7 +60,7 @@ export default Component.extend({ } }; this._listeners.add(source, { - message: e => { + message: (e) => { try { set(this, 'instance', undefined); this.onchange(e); @@ -68,17 +68,17 @@ export default Component.extend({ error(err); } }, - error: e => error(e), + error: (e) => error(e), }); return source; }, - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); if (typeof this.data !== 'undefined' || typeof this.item !== 'undefined') { this.actions.open.apply(this, [this.data, this.item]); } }, - persist: function(data, instance) { + persist: function (data, instance) { if (typeof data !== 'undefined') { set(this, 'instance', this.service.prepare(this.sink, data, instance)); } else { @@ -86,12 +86,12 @@ export default Component.extend({ } this.source(() => this.service.persist(this.sink, this.instance)); }, - remove: function(instance) { + remove: function (instance) { set(this, 'instance', instance); this.source(() => this.service.remove(this.sink, instance)); }, actions: { - open: function(data, item) { + open: function (data, item) { if (item instanceof Event) { item = undefined; } diff --git a/ui/packages/consul-ui/app/components/data-source/index.js b/ui/packages/consul-ui/app/components/data-source/index.js index 3d5d66ebdf..ac0b565061 100644 --- a/ui/packages/consul-ui/app/components/data-source/index.js +++ b/ui/packages/consul-ui/app/components/data-source/index.js @@ -15,7 +15,7 @@ import { runInDebug } from '@ember/debug'; * @param value - value to use for replacement * @param destroy {(prev: any, value: any) => any} - teardown function */ -const replace = function( +const replace = function ( obj, prop, value, @@ -29,7 +29,7 @@ const replace = function( }; const noop = () => {}; -const optional = op => (typeof op === 'function' ? op : noop); +const optional = (op) => (typeof op === 'function' ? op : noop); // possible values for @loading="" const LOADING = ['eager', 'lazy']; @@ -74,7 +74,7 @@ export default class DataSource extends Component { // otherwise its an array from the did-insert-helper if (!Array.isArray($el)) { this._lazyListeners.add( - this.dom.isInViewport($el, inViewport => { + this.dom.isInViewport($el, (inViewport) => { this.isIntersecting = inViewport; if (!this.isIntersecting) { this.close(); @@ -130,7 +130,7 @@ export default class DataSource extends Component { this.dataSource.close(prev, this); } ); - const error = err => { + const error = (err) => { try { const error = get(err, 'error.errors.firstObject') || {}; if (get(error, 'status') !== '429') { @@ -143,14 +143,14 @@ export default class DataSource extends Component { }; // set up the listeners (which auto cleanup on component destruction) const remove = this._listeners.add(this.source, { - message: e => { + message: (e) => { try { this.onchange(e); } catch (err) { error(err); } }, - error: e => { + error: (e) => { error(e); }, }); @@ -187,7 +187,7 @@ export default class DataSource extends Component { this.disconnect(); schedule('afterRender', () => { // TODO: Support lazy data-sources by keeping a reference to $el - runInDebug(_ => + runInDebug((_) => console.debug( `Invalidation is only supported for non-lazy data sources. If you want to use this you should fixup support for lazy data sources` ) diff --git a/ui/packages/consul-ui/app/components/data-writer/index.js b/ui/packages/consul-ui/app/components/data-writer/index.js index 3dd1f8ab94..af6e7207fd 100644 --- a/ui/packages/consul-ui/app/components/data-writer/index.js +++ b/ui/packages/consul-ui/app/components/data-writer/index.js @@ -5,31 +5,30 @@ import chart from './chart.xstate'; export default Component.extend(Slotted, { tagName: '', - ondelete: function() { + ondelete: function () { return this.onchange(...arguments); }, - onchange: function() {}, - init: function() { + onchange: function () {}, + init: function () { this._super(...arguments); this.chart = chart; }, actions: { - persist: function(data, e) { + persist: function (data, e) { if (e && typeof e.preventDefault === 'function') { e.preventDefault(); } set(this, 'data', data); this.dispatch('PERSIST'); }, - error: function(data, e) { + error: function (data, e) { if (e && typeof e.preventDefault === 'function') { e.preventDefault(); } set( this, 'error', - typeof data.error.errors !== 'undefined' ? - data.error.errors.firstObject : data.error + typeof data.error.errors !== 'undefined' ? data.error.errors.firstObject : data.error ); this.dispatch('ERROR'); }, diff --git a/ui/packages/consul-ui/app/components/delete-confirmation/index.js b/ui/packages/consul-ui/app/components/delete-confirmation/index.js index fe5ae1b257..6d5168aa75 100644 --- a/ui/packages/consul-ui/app/components/delete-confirmation/index.js +++ b/ui/packages/consul-ui/app/components/delete-confirmation/index.js @@ -2,6 +2,6 @@ import Component from '@ember/component'; export default Component.extend({ tagName: '', - execute: function() {}, - cancel: function() {}, + execute: function () {}, + cancel: function () {}, }); diff --git a/ui/packages/consul-ui/app/components/disclosure/index.js b/ui/packages/consul-ui/app/components/disclosure/index.js index 0774ae3100..5750827398 100644 --- a/ui/packages/consul-ui/app/components/disclosure/index.js +++ b/ui/packages/consul-ui/app/components/disclosure/index.js @@ -17,7 +17,7 @@ export default class DisclosureComponent extends Component { remove(id) { this.ids = this.ids .split(' ') - .filter(item => item !== id) + .filter((item) => item !== id) .join(' '); } } diff --git a/ui/packages/consul-ui/app/components/distribution-meter/index.css.js b/ui/packages/consul-ui/app/components/distribution-meter/index.css.js index eeda65a0bc..336511f681 100644 --- a/ui/packages/consul-ui/app/components/distribution-meter/index.css.js +++ b/ui/packages/consul-ui/app/components/distribution-meter/index.css.js @@ -22,11 +22,11 @@ export default (css) => { border-radius: var(--decor-radius-999); transition-property: transform; transition-timing-function: ease-out; - transition-duration: .1s; + transition-duration: 0.1s; } :host([type='linear']) dl:hover { transform: scaleY(3); box-shadow: var(--decor-elevation-200); } `; -} +}; diff --git a/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js b/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js index 69e9ace4b7..5c058fdf0c 100644 --- a/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js +++ b/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js @@ -1,19 +1,22 @@ const parseFloatWithDefault = (val, d = 0) => { const num = parseFloat(val); return isNaN(num) ? d : num; -} +}; export default (Component) => { return class extends Component { attributeChangedCallback(name, prev, value) { const target = this; - switch(name) { + switch (name) { case 'percentage': { let prevSibling = target; - while(prevSibling) { + while (prevSibling) { const nextSibling = prevSibling.nextElementSibling; - const aggregatedPercentage = nextSibling ? parseFloatWithDefault(nextSibling.style.getPropertyValue('--aggregated-percentage')) : 0; - const perc = parseFloatWithDefault(prevSibling.getAttribute('percentage')) + aggregatedPercentage; + const aggregatedPercentage = nextSibling + ? parseFloatWithDefault(nextSibling.style.getPropertyValue('--aggregated-percentage')) + : 0; + const perc = + parseFloatWithDefault(prevSibling.getAttribute('percentage')) + aggregatedPercentage; prevSibling.style.setProperty('--aggregated-percentage', perc); prevSibling.setAttribute('aggregated-percentage', perc); prevSibling = prevSibling.previousElementSibling; @@ -22,5 +25,5 @@ export default (Component) => { } } } - } -} + }; +}; diff --git a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js b/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js index f2d75c4b42..7f105a8d9b 100644 --- a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js +++ b/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js @@ -18,9 +18,10 @@ export default (css) => { height: 100%; transition-timing-function: ease-out; - transition-duration: .5s; + transition-duration: 0.5s; } - dt, dd meter { + dt, + dd meter { animation-name: visually-hidden; animation-fill-mode: forwards; animation-play-state: paused; @@ -49,7 +50,7 @@ export default (css) => { :host(.type-radial) circle, :host(.type-circular) circle { transition-timing-function: ease-out; - transition-duration: .5s; + transition-duration: 0.5s; pointer-events: stroke; transition-property: stroke-dashoffset, stroke-width; transform: rotate(-90deg); @@ -76,4 +77,4 @@ export default (css) => { stroke-width: 14; } `; -} +}; diff --git a/ui/packages/consul-ui/app/components/empty-state/index.js b/ui/packages/consul-ui/app/components/empty-state/index.js index 2a0182c368..c4682abadc 100644 --- a/ui/packages/consul-ui/app/components/empty-state/index.js +++ b/ui/packages/consul-ui/app/components/empty-state/index.js @@ -4,7 +4,7 @@ import Slotted from 'block-slots'; export default Component.extend(Slotted, { tagName: '', - willRender: function() { + willRender: function () { this._super(...arguments); set(this, 'hasHeader', this._isRegistered('header') || this._isRegistered('subheader')); }, diff --git a/ui/packages/consul-ui/app/components/empty-state/pageobject.js b/ui/packages/consul-ui/app/components/empty-state/pageobject.js index b6dbb951f6..e995697f96 100644 --- a/ui/packages/consul-ui/app/components/empty-state/pageobject.js +++ b/ui/packages/consul-ui/app/components/empty-state/pageobject.js @@ -1,6 +1,7 @@ -export default present => (scope = '.empty-state') => { - return { - scope: scope, - login: present('[data-test-empty-state-login]'), +export default (present) => + (scope = '.empty-state') => { + return { + scope: scope, + login: present('[data-test-empty-state-login]'), + }; }; -}; diff --git a/ui/packages/consul-ui/app/components/event-source/index.js b/ui/packages/consul-ui/app/components/event-source/index.js index 833829a111..f8eb439fb4 100644 --- a/ui/packages/consul-ui/app/components/event-source/index.js +++ b/ui/packages/consul-ui/app/components/event-source/index.js @@ -2,7 +2,7 @@ import Component from '@ember/component'; import { inject as service } from '@ember/service'; import { get, set } from '@ember/object'; -const replace = function( +const replace = function ( obj, prop, value, @@ -20,21 +20,21 @@ export default Component.extend({ logger: service('logger'), data: service('data-source/service'), closeOnDestroy: true, - onerror: function(e) { + onerror: function (e) { this.logger.execute(e.error); }, - init: function() { + init: function () { this._super(...arguments); this._listeners = this.dom.listeners(); }, - willDestroyElement: function() { + willDestroyElement: function () { if (this.closeOnDestroy) { this.actions.close.apply(this, []); } this._listeners.remove(); this._super(...arguments); }, - didReceiveAttrs: function() { + didReceiveAttrs: function () { this._super(...arguments); // only close and reopen if the uri changes // otherwise this will fire whenever the proxies data changes @@ -43,7 +43,7 @@ export default Component.extend({ } }, actions: { - open: function() { + open: function () { replace(this, 'source', this.data.open(this.src, this), (prev, source) => { // Makes sure any previous source (if different) is ALWAYS closed if (typeof prev !== 'undefined') { @@ -56,7 +56,7 @@ export default Component.extend({ prev.destroy(); } }); - const error = err => { + const error = (err) => { try { const error = get(err, 'error.errors.firstObject'); if (get(error || {}, 'status') !== '429') { @@ -71,13 +71,13 @@ export default Component.extend({ // we only need errors here as this only uses proxies which // automatically update their data const remove = this._listeners.add(this.source, { - error: e => { + error: (e) => { error(e); }, }); replace(this, '_remove', remove); }, - close: function() { + close: function () { if (typeof this.source !== 'undefined') { this.data.close(this.source, this); replace(this, '_remove', undefined); diff --git a/ui/packages/consul-ui/app/components/form-component/index.js b/ui/packages/consul-ui/app/components/form-component/index.js index d1b23fee37..3976d603aa 100644 --- a/ui/packages/consul-ui/app/components/form-component/index.js +++ b/ui/packages/consul-ui/app/components/form-component/index.js @@ -6,10 +6,10 @@ import { alias } from '@ember/object/computed'; const propRe = /([^[\]])+/g; export default Component.extend(Slotted, { tagName: '', - onreset: function() {}, - onchange: function() {}, - onerror: function() {}, - onsuccess: function() {}, + onreset: function () {}, + onchange: function () {}, + onerror: function () {}, + onsuccess: function () {}, data: alias('form.data'), item: alias('form.data'), @@ -20,7 +20,7 @@ export default Component.extend(Slotted, { container: service('form'), actions: { - change: function(e, value, item) { + change: function (e, value, item) { let event = this.dom.normalizeEvent(e, value); // currently form-components don't deal with deeply nested forms, only top level // we therefore grab the end of the nest off here, diff --git a/ui/packages/consul-ui/app/components/form-group/element/index.js b/ui/packages/consul-ui/app/components/form-group/element/index.js index c76c2d7ad8..41306ff734 100644 --- a/ui/packages/consul-ui/app/components/form-group/element/index.js +++ b/ui/packages/consul-ui/app/components/form-group/element/index.js @@ -21,15 +21,12 @@ export default class Element extends Component { } } get prop() { - return `${this.args.name - .toLowerCase() - .split('.') - .join('-')}`; + return `${this.args.name.toLowerCase().split('.').join('-')}`; } get state() { const error = this.touched && this.args.error; return { - matches: name => name === 'error' && error, + matches: (name) => name === 'error' && error, }; } diff --git a/ui/packages/consul-ui/app/components/freetext-filter/pageobject.js b/ui/packages/consul-ui/app/components/freetext-filter/pageobject.js index 2dae766692..ea1afa92a8 100644 --- a/ui/packages/consul-ui/app/components/freetext-filter/pageobject.js +++ b/ui/packages/consul-ui/app/components/freetext-filter/pageobject.js @@ -1,4 +1,4 @@ -export default triggerable => () => { +export default (triggerable) => () => { return { ...{ search: triggerable('keypress', '[name="s"]'), diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js b/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js index 3bdada40e3..95d8af2b06 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js @@ -1,4 +1,4 @@ -export default (collection, clickable, attribute, is, authForm, emptyState) => scope => { +export default (collection, clickable, attribute, is, authForm, emptyState) => (scope) => { const page = { navigation: [ 'services', @@ -12,7 +12,7 @@ export default (collection, clickable, attribute, is, authForm, emptyState) => s 'settings', 'auth', ].reduce( - function(prev, item, i, arr) { + function (prev, item, i, arr) { const key = item; return Object.assign({}, prev, { [key]: clickable(`[data-test-main-nav-${item}] > *`), @@ -23,7 +23,7 @@ export default (collection, clickable, attribute, is, authForm, emptyState) => s } ), footer: ['copyright', 'docs'].reduce( - function(prev, item, i, arr) { + function (prev, item, i, arr) { const key = item; return Object.assign({}, prev, { [key]: clickable(`[data-test-main-nav-${item}`), diff --git a/ui/packages/consul-ui/app/components/jwt-source/index.js b/ui/packages/consul-ui/app/components/jwt-source/index.js index 664e5fcf7d..346db02991 100644 --- a/ui/packages/consul-ui/app/components/jwt-source/index.js +++ b/ui/packages/consul-ui/app/components/jwt-source/index.js @@ -18,19 +18,19 @@ export default class JWTSource extends Component { // TODO: Could this use once? Double check but I don't think it can this.source = fromPromise(this.repo.findCodeByURL(this.args.src)); this._listeners.add(this.source, { - message: e => this.onchange(e), - error: e => this.onerror(e), + message: (e) => this.onchange(e), + error: (e) => this.onerror(e), }); } onchange(e) { - if(typeof this.args.onchange === 'function') { + if (typeof this.args.onchange === 'function') { this.args.onchange(...arguments); } } onerror(e) { - if(typeof this.args.onerror === 'function') { + if (typeof this.args.onerror === 'function') { this.args.onerror(...arguments); } } diff --git a/ui/packages/consul-ui/app/components/list-collection/index.js b/ui/packages/consul-ui/app/components/list-collection/index.js index 9724e9a73a..bfafb198d6 100644 --- a/ui/packages/consul-ui/app/components/list-collection/index.js +++ b/ui/packages/consul-ui/app/components/list-collection/index.js @@ -13,19 +13,19 @@ export default Component.extend(Slotted, { cellHeight: 70, checked: null, scroll: 'virtual', - init: function() { + init: function () { this._super(...arguments); this.columns = [100]; this.guid = this.dom.guid(this); }, - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); this.$element = this.dom.element(`#${this.guid}`); if (this.scroll === 'virtual') { this.actions.resize.apply(this, [{ target: this.dom.viewport() }]); } }, - didReceiveAttrs: function() { + didReceiveAttrs: function () { this._super(...arguments); this._cellLayout = this['cell-layout'] = new PercentageColumns( get(this, 'items.length'), @@ -33,7 +33,7 @@ export default Component.extend(Slotted, { get(this, 'cellHeight') ); const o = this; - this['cell-layout'].formatItemStyle = function(itemIndex) { + this['cell-layout'].formatItemStyle = function (itemIndex) { let style = formatItemStyle.apply(this, arguments); if (o.checked === itemIndex) { style = `${style};z-index: 1`; @@ -41,7 +41,7 @@ export default Component.extend(Slotted, { return style; }; }, - style: computed('height', function() { + style: computed('height', function () { if (this.scroll !== 'virtual') { return {}; } @@ -50,7 +50,7 @@ export default Component.extend(Slotted, { }; }), actions: { - resize: function(e) { + resize: function (e) { // TODO: This top part is very similar to resize in tabular-collection // see if it make sense to DRY out const dom = get(this, 'dom'); @@ -65,10 +65,10 @@ export default Component.extend(Slotted, { this.updateScrollPosition(); } }, - click: function(e) { + click: function (e) { return this.dom.clickFirstAnchor(e, '.list-collection > ul > li'); }, - change: function(index, e = {}) { + change: function (index, e = {}) { if (e.target.checked && index !== get(this, 'checked')) { set(this, 'checked', parseInt(index)); this.$row = this.dom.closest('li', e.target); diff --git a/ui/packages/consul-ui/app/components/menu-panel/index.js b/ui/packages/consul-ui/app/components/menu-panel/index.js index 1e645ea5ba..fca3fcb99f 100644 --- a/ui/packages/consul-ui/app/components/menu-panel/index.js +++ b/ui/packages/consul-ui/app/components/menu-panel/index.js @@ -10,9 +10,9 @@ export default Component.extend(Slotted, { dom: service('dom'), isConfirmation: false, actions: { - connect: function($el) { + connect: function ($el) { next(() => { - if(!this.isDestroyed) { + if (!this.isDestroyed) { // if theres only a single choice in the menu and it doesn't have an // immediate button/link/label to click then it will be a // confirmation/informed action @@ -24,7 +24,7 @@ export default Component.extend(Slotted, { } }); }, - change: function(e) { + change: function (e) { const id = e.target.getAttribute('id'); const $trigger = this.dom.element(`[for='${id}']`); const $panel = this.dom.element('[role=menu]', $trigger.parentElement); diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.js b/ui/packages/consul-ui/app/components/modal-dialog/index.js index c9025fc7d2..79b68b6677 100644 --- a/ui/packages/consul-ui/app/components/modal-dialog/index.js +++ b/ui/packages/consul-ui/app/components/modal-dialog/index.js @@ -6,31 +6,31 @@ import { schedule } from '@ember/runloop'; export default Component.extend(Slotted, { tagName: '', - onclose: function() {}, - onopen: function() {}, + onclose: function () {}, + onopen: function () {}, isOpen: false, actions: { - connect: function($el) { + connect: function ($el) { this.dialog = new A11yDialog($el); this.dialog.on('hide', () => { - schedule('afterRender', _ => set(this, 'isOpen', false)); - this.onclose({ target: $el }) + schedule('afterRender', (_) => set(this, 'isOpen', false)); + this.onclose({ target: $el }); }); this.dialog.on('show', () => { - set(this, 'isOpen', true) - this.onopen({ target: $el }) + set(this, 'isOpen', true); + this.onopen({ target: $el }); }); if (this.open) { this.actions.open.apply(this, []); } }, - disconnect: function($el) { + disconnect: function ($el) { this.dialog.destroy(); }, - open: function() { + open: function () { this.dialog.show(); }, - close: function() { + close: function () { this.dialog.hide(); }, }, diff --git a/ui/packages/consul-ui/app/components/outlet/index.js b/ui/packages/consul-ui/app/components/outlet/index.js index 4910f1d1bf..e63ec68e21 100644 --- a/ui/packages/consul-ui/app/components/outlet/index.js +++ b/ui/packages/consul-ui/app/components/outlet/index.js @@ -59,7 +59,7 @@ export default class Outlet extends Component { } break; case 'model': - if(typeof this.route !== 'undefined') { + if (typeof this.route !== 'undefined') { this.route._model = value; } break; diff --git a/ui/packages/consul-ui/app/components/paged-collection/index.js b/ui/packages/consul-ui/app/components/paged-collection/index.js index 840ee17f75..8013aaf0b1 100644 --- a/ui/packages/consul-ui/app/components/paged-collection/index.js +++ b/ui/packages/consul-ui/app/components/paged-collection/index.js @@ -1,9 +1,9 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; +import { scheduleOnce } from '@ember/runloop'; export default class PagedCollectionComponent extends Component { - @tracked $pane; @tracked $viewport; @@ -25,7 +25,7 @@ export default class PagedCollectionComponent extends Component { get perPage() { switch (this.type) { case 'virtual-scroll': - return this.visibleItems + (this.overflow * 2); + return this.visibleItems + this.overflow * 2; case 'index': return parseInt(this.args.perPage); } @@ -45,7 +45,7 @@ export default class PagedCollectionComponent extends Component { } get itemsBefore() { - if(typeof this.$viewport === 'undefined') { + if (typeof this.$viewport === 'undefined') { return 0; } return Math.max(0, Math.round(this.top / this.rowHeight) - this.overflow); @@ -84,7 +84,7 @@ export default class PagedCollectionComponent extends Component { @action resize() { - if(this.$viewport.clientHeight > 0 && this.rowHeight > 0) { + if (this.$viewport.clientHeight > 0 && this.rowHeight > 0) { this.visibleItems = Math.ceil(this.$viewport.clientHeight / this.rowHeight); } else { this.visibleItems = 0; @@ -93,9 +93,10 @@ export default class PagedCollectionComponent extends Component { @action setViewport($viewport) { - this.$viewport = $viewport === 'html' ? [...document.getElementsByTagName('html')][0] : $viewport; + this.$viewport = + $viewport === 'html' ? [...document.getElementsByTagName('html')][0] : $viewport; this.$viewport.addEventListener('scroll', this.scroll); - if($viewport === 'html') { + if ($viewport === 'html') { this.$viewport.addEventListener('resize', this.resize); } this.scroll(); @@ -111,8 +112,13 @@ export default class PagedCollectionComponent extends Component { } @action setMaxHeight(str) { + scheduleOnce('actions', this, '_setMaxHeight'); + } + + @action _setMaxHeight(str) { const maxHeight = parseFloat(str); - if(!isNaN(maxHeight)) { + + if (!isNaN(maxHeight)) { this._type = 'virtual-scroll'; } } diff --git a/ui/packages/consul-ui/app/components/peerings/badge/index.js b/ui/packages/consul-ui/app/components/peerings/badge/index.js index d3b7653a4c..c9aa9468d4 100644 --- a/ui/packages/consul-ui/app/components/peerings/badge/index.js +++ b/ui/packages/consul-ui/app/components/peerings/badge/index.js @@ -21,7 +21,7 @@ const BADGE_LOOKUP = { tooltip: 'Someone in the other peer may have deleted this peering connection.', }, UNDEFINED: { - tooltip: '' + tooltip: '', }, }; export default class PeeringsBadge extends Component { diff --git a/ui/packages/consul-ui/app/components/policy-form/index.js b/ui/packages/consul-ui/app/components/policy-form/index.js index 561918b797..7843184f8f 100644 --- a/ui/packages/consul-ui/app/components/policy-form/index.js +++ b/ui/packages/consul-ui/app/components/policy-form/index.js @@ -8,7 +8,7 @@ export default FormComponent.extend({ classNames: ['policy-form'], isScoped: false, - init: function() { + init: function () { this._super(...arguments); set(this, 'isScoped', get(this, 'item.Datacenters.length') > 0); this.templates = [ @@ -27,7 +27,7 @@ export default FormComponent.extend({ ]; }, actions: { - change: function(e) { + change: function (e) { try { this._super(...arguments); } catch (err) { diff --git a/ui/packages/consul-ui/app/components/policy-form/pageobject.js b/ui/packages/consul-ui/app/components/policy-form/pageobject.js index 7937dc1a70..12f7977e41 100644 --- a/ui/packages/consul-ui/app/components/policy-form/pageobject.js +++ b/ui/packages/consul-ui/app/components/policy-form/pageobject.js @@ -1,16 +1,15 @@ -export default (submitable, cancelable, radiogroup, text) => ( - scope = '[data-test-policy-form]' -) => { - return { - // this should probably be settable - resetScope: true, - scope: scope, - prefix: 'policy', - ...submitable(), - ...cancelable(), - ...radiogroup('template', ['', 'service-identity', 'node-identity'], 'policy'), - rules: { - error: text('[data-test-rules] strong'), - }, +export default (submitable, cancelable, radiogroup, text) => + (scope = '[data-test-policy-form]') => { + return { + // this should probably be settable + resetScope: true, + scope: scope, + prefix: 'policy', + ...submitable(), + ...cancelable(), + ...radiogroup('template', ['', 'service-identity', 'node-identity'], 'policy'), + rules: { + error: text('[data-test-rules] strong'), + }, + }; }; -}; diff --git a/ui/packages/consul-ui/app/components/policy-selector/index.hbs b/ui/packages/consul-ui/app/components/policy-selector/index.hbs index 0a1bb618b8..5ca0d27a6a 100644 --- a/ui/packages/consul-ui/app/components/policy-selector/index.hbs +++ b/ui/packages/consul-ui/app/components/policy-selector/index.hbs @@ -20,7 +20,7 @@ diff --git a/ui/packages/consul-ui/app/components/policy-selector/index.js b/ui/packages/consul-ui/app/components/policy-selector/index.js index 2c20eb1d98..e7aaad491b 100644 --- a/ui/packages/consul-ui/app/components/policy-selector/index.js +++ b/ui/packages/consul-ui/app/components/policy-selector/index.js @@ -12,26 +12,26 @@ export default ChildSelectorComponent.extend({ type: 'policy', allowIdentity: true, classNames: ['policy-selector'], - init: function() { + init: function () { this._super(...arguments); const source = this.source; if (source) { this._listeners.add(source, { - save: e => { + save: (e) => { this.save.perform(...e.data); }, }); } }, - reset: function(e) { + reset: function (e) { this._super(...arguments); set(this, 'isScoped', false); }, - refreshCodeEditor: function(e, target) { + refreshCodeEditor: function (e, target) { const selector = '.code-editor'; this.dom.component(selector, target).didAppear(); }, - error: function(e) { + error: function (e) { const item = this.item; const err = e.error; if (typeof err.errors !== 'undefined') { @@ -57,8 +57,15 @@ export default ChildSelectorComponent.extend({ throw err; } }, + openModal: function () { + const { modal } = this; + + if (modal) { + modal.open(); + } + }, actions: { - open: function(e) { + open: function (e) { this.refreshCodeEditor(e, e.target.parentElement); }, }, diff --git a/ui/packages/consul-ui/app/components/policy-selector/pageobject.js b/ui/packages/consul-ui/app/components/policy-selector/pageobject.js index 17c34fccfd..55f4a19d8f 100644 --- a/ui/packages/consul-ui/app/components/policy-selector/pageobject.js +++ b/ui/packages/consul-ui/app/components/policy-selector/pageobject.js @@ -1,20 +1,18 @@ -export default (clickable, deletable, collection, alias, policyForm) => ( - scope = '#policies', - createSelector = '[data-test-policy-create]' -) => { - return { - scope: scope, - create: clickable(createSelector), - form: policyForm('#new-policy'), - policies: alias('selectedOptions'), - selectedOptions: collection( - '[data-test-policies] [data-test-tabular-row]', - deletable( - { - expand: clickable('label'), - }, - '+ tr' - ) - ), +export default (clickable, deletable, collection, alias, policyForm) => + (scope = '#policies', createSelector = '[data-test-policy-create]') => { + return { + scope: scope, + create: clickable(createSelector), + form: policyForm('#new-policy'), + policies: alias('selectedOptions'), + selectedOptions: collection( + '[data-test-policies] [data-test-tabular-row]', + deletable( + { + expand: clickable('label'), + }, + '+ tr' + ) + ), + }; }; -}; diff --git a/ui/packages/consul-ui/app/components/popover-menu/index.js b/ui/packages/consul-ui/app/components/popover-menu/index.js index 2229e9f4ee..f38eac4f1c 100644 --- a/ui/packages/consul-ui/app/components/popover-menu/index.js +++ b/ui/packages/consul-ui/app/components/popover-menu/index.js @@ -9,32 +9,32 @@ export default Component.extend(Slotted, { dom: service('dom'), expanded: false, keyboardAccess: true, - onchange: function() {}, + onchange: function () {}, // TODO: this needs to be made dynamic/auto detect // for now use this to set left/right explicitly position: '', - init: function() { + init: function () { this._super(...arguments); this.guid = this.dom.guid(this); this.submenus = []; }, - willRender: function() { + willRender: function () { set(this, 'hasHeader', this._isRegistered('header')); }, actions: { - addSubmenu: function(name) { + addSubmenu: function (name) { set(this, 'submenus', this.submenus.concat(name)); }, - removeSubmenu: function(name) { + removeSubmenu: function (name) { const pos = this.submenus.indexOf(name); if (pos !== -1) { this.submenus.splice(pos, 1); set(this, 'submenus', this.submenus); } }, - change: function(e) { + change: function (e) { if (!e.target.checked) { - [...this.dom.elements(`[id^=popover-menu-${this.guid}]`)].forEach(function($item) { + [...this.dom.elements(`[id^=popover-menu-${this.guid}]`)].forEach(function ($item) { $item.checked = false; }); } @@ -43,7 +43,7 @@ export default Component.extend(Slotted, { // Temporary send here so we can send route actions // easily. It kind of makes sense that you'll want to perform // route actions from a popup menu for the moment - send: function() { + send: function () { this.sendAction(...arguments); }, }, diff --git a/ui/packages/consul-ui/app/components/popover-menu/menu-item/index.js b/ui/packages/consul-ui/app/components/popover-menu/menu-item/index.js index e98665c1a0..69f46191ac 100644 --- a/ui/packages/consul-ui/app/components/popover-menu/menu-item/index.js +++ b/ui/packages/consul-ui/app/components/popover-menu/menu-item/index.js @@ -7,19 +7,19 @@ import Slotted from 'block-slots'; export default Component.extend(Slotted, { tagName: '', dom: service('dom'), - init: function() { + init: function () { this._super(...arguments); this.guid = this.dom.guid(this); }, - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); this.menu.addSubmenu(this.guid); }, - didDestroyElement: function() { + didDestroyElement: function () { this._super(...arguments); this.menu.removeSubmenu(this.guid); }, - willRender: function() { + willRender: function () { this._super(...arguments); set(this, 'hasConfirmation', this._isRegistered('confirmation')); }, diff --git a/ui/packages/consul-ui/app/components/popover-select/index.js b/ui/packages/consul-ui/app/components/popover-select/index.js index cd8bc330e1..4a18ea824b 100644 --- a/ui/packages/consul-ui/app/components/popover-select/index.js +++ b/ui/packages/consul-ui/app/components/popover-select/index.js @@ -7,31 +7,31 @@ export default Component.extend(Slotted, { dom: service('dom'), multiple: false, required: false, - onchange: function() {}, - addOption: function(option) { + onchange: function () {}, + addOption: function (option) { if (typeof this._options === 'undefined') { this._options = new Set(); } this._options.add(option); }, - removeOption: function(option) { + removeOption: function (option) { this._options.delete(option); }, actions: { - click: function(option, e) { + click: function (option, e) { // required={{true}} ? if (!this.multiple) { if (option.selected && this.required) { return e; } [...this._options] - .filter(item => item !== option) - .forEach(item => { + .filter((item) => item !== option) + .forEach((item) => { item.selected = false; }); } else { if (option.selected && this.required) { - const other = [...this._options].find(item => item !== option && item.selected); + const other = [...this._options].find((item) => item !== option && item.selected); if (!other) { return e; } @@ -40,11 +40,11 @@ export default Component.extend(Slotted, { option.selected = !option.selected; this.onchange( this.dom.setEventTargetProperties(e, { - selected: target => option.args.value, - selectedItems: target => { + selected: (target) => option.args.value, + selectedItems: (target) => { return [...this._options] - .filter(item => item.selected) - .map(item => item.args.value) + .filter((item) => item.selected) + .map((item) => item.args.value) .join(','); }, }) diff --git a/ui/packages/consul-ui/app/components/popover-select/pageobject.js b/ui/packages/consul-ui/app/components/popover-select/pageobject.js index 8a2161c18f..8caced1589 100644 --- a/ui/packages/consul-ui/app/components/popover-select/pageobject.js +++ b/ui/packages/consul-ui/app/components/popover-select/pageobject.js @@ -1,9 +1,10 @@ -export default (clickable, collection) => (scope = '.popover-select') => { - return { - scope: scope, - selected: clickable('button'), - options: collection('li[role="none"]', { - button: clickable('button'), - }), +export default (clickable, collection) => + (scope = '.popover-select') => { + return { + scope: scope, + selected: clickable('button'), + options: collection('li[role="none"]', { + button: clickable('button'), + }), + }; }; -}; diff --git a/ui/packages/consul-ui/app/components/power-select/pageobject.js b/ui/packages/consul-ui/app/components/power-select/pageobject.js index 5ca14cb5b5..5af0fecb4c 100644 --- a/ui/packages/consul-ui/app/components/power-select/pageobject.js +++ b/ui/packages/consul-ui/app/components/power-select/pageobject.js @@ -1,6 +1,6 @@ import { clickable, isPresent } from 'ember-cli-page-object'; -export default options => { +export default (options) => { return { present: isPresent('.ember-power-select-trigger'), click: clickable('.ember-power-select-trigger'), diff --git a/ui/packages/consul-ui/app/components/radio-group/index.js b/ui/packages/consul-ui/app/components/radio-group/index.js index 805bc683c9..cb246eed0a 100644 --- a/ui/packages/consul-ui/app/components/radio-group/index.js +++ b/ui/packages/consul-ui/app/components/radio-group/index.js @@ -6,19 +6,19 @@ export default Component.extend({ tagName: '', keyboardAccess: false, dom: service('dom'), - init: function() { + init: function () { this._super(...arguments); this.name = this.dom.guid(this); }, actions: { - keydown: function(e) { + keydown: function (e) { if (e.keyCode === ENTER) { e.target.dispatchEvent(new MouseEvent('click')); } }, - change: function(e) { + change: function (e) { this.onchange( - this.dom.setEventTargetProperty(e, 'value', value => (value === '' ? undefined : value)) + this.dom.setEventTargetProperty(e, 'value', (value) => (value === '' ? undefined : value)) ); }, }, diff --git a/ui/packages/consul-ui/app/components/radio-group/pageobject.js b/ui/packages/consul-ui/app/components/radio-group/pageobject.js index 016c22e8c3..34ac48bfb3 100644 --- a/ui/packages/consul-ui/app/components/radio-group/pageobject.js +++ b/ui/packages/consul-ui/app/components/radio-group/pageobject.js @@ -2,14 +2,14 @@ import { is, clickable } from 'ember-cli-page-object'; import ucfirst from 'consul-ui/utils/ucfirst'; // TODO: We no longer need to use name here // remove the arg in all objects -export default function(name, items, blankKey = 'all') { - return items.reduce(function(prev, item, i, arr) { +export default function (name, items, blankKey = 'all') { + return items.reduce(function (prev, item, i, arr) { // if item is empty then it means 'all' // otherwise camelCase based on something-here = somethingHere for the key const key = item === '' ? blankKey - : item.split('-').reduce(function(prev, item, i, arr) { + : item.split('-').reduce(function (prev, item, i, arr) { if (i === 0) { return item; } diff --git a/ui/packages/consul-ui/app/components/ref/index.js b/ui/packages/consul-ui/app/components/ref/index.js index e96f699b69..b68a024f62 100644 --- a/ui/packages/consul-ui/app/components/ref/index.js +++ b/ui/packages/consul-ui/app/components/ref/index.js @@ -3,7 +3,7 @@ import { set } from '@ember/object'; export default Component.extend({ tagName: '', - didReceiveAttrs: function() { + didReceiveAttrs: function () { set(this.target, this.name, this.value); }, }); diff --git a/ui/packages/consul-ui/app/components/role-selector/index.js b/ui/packages/consul-ui/app/components/role-selector/index.js index 07cc6d7b75..2034acf5fa 100644 --- a/ui/packages/consul-ui/app/components/role-selector/index.js +++ b/ui/packages/consul-ui/app/components/role-selector/index.js @@ -15,20 +15,20 @@ export default ChildSelectorComponent.extend({ // You have to alias data. // If you just set it, it loses its reference? policy: alias('policyForm.data'), - init: function() { + init: function () { this._super(...arguments); - this.policyForm = this.formContainer.form('policy'); + set(this, 'policyForm', this.formContainer.form('policy')); this.source = new EventSource(); }, actions: { - reset: function(e) { + reset: function (e) { this._super(...arguments); this.policyForm.clear({ Datacenter: this.dc }); }, - dispatch: function(type, data) { + dispatch: function (type, data) { this.source.dispatchEvent({ type: type, data: data }); }, - change: function() { + change: function () { const event = this.dom.normalizeEvent(...arguments); const target = event.target; switch (target.name) { diff --git a/ui/packages/consul-ui/app/components/role-selector/pageobject.js b/ui/packages/consul-ui/app/components/role-selector/pageobject.js index c8d79bf423..9fa3cd3ef0 100644 --- a/ui/packages/consul-ui/app/components/role-selector/pageobject.js +++ b/ui/packages/consul-ui/app/components/role-selector/pageobject.js @@ -1,16 +1,14 @@ -export default (clickable, deletable, collection, alias, roleForm) => (scope = '#roles') => { - return { - scope: scope, - create: clickable('[data-test-role-create]'), - form: roleForm(), - roles: alias('selectedOptions'), - selectedOptions: collection( - '[data-test-roles] [data-test-tabular-row]', - { +export default (clickable, deletable, collection, alias, roleForm) => + (scope = '#roles') => { + return { + scope: scope, + create: clickable('[data-test-role-create]'), + form: roleForm(), + roles: alias('selectedOptions'), + selectedOptions: collection('[data-test-roles] [data-test-tabular-row]', { actions: clickable('label > button'), delete: clickable('[data-test-delete]'), confirmDelete: clickable('.informed-action button'), - } - ), + }), + }; }; -}; diff --git a/ui/packages/consul-ui/app/components/route/index.js b/ui/packages/consul-ui/app/components/route/index.js index 32065ca473..8951764f85 100644 --- a/ui/packages/consul-ui/app/components/route/index.js +++ b/ui/packages/consul-ui/app/components/route/index.js @@ -14,7 +14,7 @@ export default class RouteComponent extends Component { constructor() { super(...arguments); - this.intlKey = this.encoder.createRegExpEncoder(templateRe, _ => _); + this.intlKey = this.encoder.createRegExpEncoder(templateRe, (_) => _); } get params() { @@ -27,7 +27,10 @@ export default class RouteComponent extends Component { } if (this.args.name) { const outlet = this.routlet.outletFor(this.args.name); - return this.routlet.modelFor(outlet.name); + + if (outlet) { + return this.routlet.modelFor(outlet.name); + } } return undefined; } diff --git a/ui/packages/consul-ui/app/components/search-bar/utils.js b/ui/packages/consul-ui/app/components/search-bar/utils.js index d56a6580c6..75a14a3181 100644 --- a/ui/packages/consul-ui/app/components/search-bar/utils.js +++ b/ui/packages/consul-ui/app/components/search-bar/utils.js @@ -1,5 +1,5 @@ export const diff = (a, b) => { - return a.filter(item => !b.includes(item)); + return a.filter((item) => !b.includes(item)); }; /** * filters accepts the args.filter @attribute which is shaped like @@ -11,7 +11,7 @@ export const diff = (a, b) => { * There is more explanation in the unit tests for this function so thats worthwhile * checking if you are in amongst this */ -export const filters = filters => { +export const filters = (filters) => { return Object.entries(filters) .filter(([key, value]) => { if (key === 'searchproperty') { @@ -21,7 +21,7 @@ export const filters = filters => { }) .reduce((prev, [key, value]) => { return prev.concat( - value.value.map(item => { + value.value.map((item) => { const obj = { key: key, value: item, diff --git a/ui/packages/consul-ui/app/components/shadow-host/index.js b/ui/packages/consul-ui/app/components/shadow-host/index.js index c5eb1046ee..d13e34c199 100644 --- a/ui/packages/consul-ui/app/components/shadow-host/index.js +++ b/ui/packages/consul-ui/app/components/shadow-host/index.js @@ -3,12 +3,10 @@ import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; export default class ShadowHostComponent extends Component { - @tracked shadowRoot; @action attachShadow($element) { this.shadowRoot = $element.attachShadow({ mode: 'open' }); } - } diff --git a/ui/packages/consul-ui/app/components/state-chart/action/index.js b/ui/packages/consul-ui/app/components/state-chart/action/index.js index 2e22f6f048..c416586bc4 100644 --- a/ui/packages/consul-ui/app/components/state-chart/action/index.js +++ b/ui/packages/consul-ui/app/components/state-chart/action/index.js @@ -2,11 +2,11 @@ import Component from '@ember/component'; export default Component.extend({ tagName: '', - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); this.chart.addAction(this.name, (context, event) => this.exec(context, event)); }, - willDestroy: function() { + willDestroy: function () { this._super(...arguments); this.chart.removeAction(this.type); }, diff --git a/ui/packages/consul-ui/app/components/state-chart/guard/index.js b/ui/packages/consul-ui/app/components/state-chart/guard/index.js index e5f6500297..b4c27b845c 100644 --- a/ui/packages/consul-ui/app/components/state-chart/guard/index.js +++ b/ui/packages/consul-ui/app/components/state-chart/guard/index.js @@ -2,10 +2,10 @@ import Component from '@ember/component'; export default Component.extend({ tagName: '', - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); const component = this; - this.chart.addGuard(this.name, function() { + this.chart.addGuard(this.name, function () { if (typeof component.cond === 'function') { return component.cond(...arguments); } else { @@ -13,7 +13,7 @@ export default Component.extend({ } }); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); this.chart.removeGuard(this.name); }, diff --git a/ui/packages/consul-ui/app/components/state-chart/index.js b/ui/packages/consul-ui/app/components/state-chart/index.js index ea6cf8a7bf..f14cdb67bf 100644 --- a/ui/packages/consul-ui/app/components/state-chart/index.js +++ b/ui/packages/consul-ui/app/components/state-chart/index.js @@ -5,13 +5,13 @@ import { set } from '@ember/object'; export default Component.extend({ chart: service('state'), tagName: '', - ontransition: function(e) {}, - init: function() { + ontransition: function (e) {}, + init: function () { this._super(...arguments); this._actions = {}; this._guards = {}; }, - didReceiveAttrs: function() { + didReceiveAttrs: function () { if (typeof this.machine !== 'undefined') { this.machine.stop(); } @@ -19,11 +19,11 @@ export default Component.extend({ this.src.initial = this.initial; } this.machine = this.chart.interpret(this.src, { - onTransition: state => { + onTransition: (state) => { const e = new CustomEvent('transition', { detail: state }); this.ontransition(e); if (!e.defaultPrevented) { - state.actions.forEach(item => { + state.actions.forEach((item) => { const action = this._actions[item.type]; if (typeof action === 'function') { this._actions[item.type](item.type, state.context, state.event); @@ -37,35 +37,35 @@ export default Component.extend({ }, }); }, - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); // xstate has initialState xstate/fsm has state set(this, 'state', this.machine.initialState || this.machine.state); // set(this, 'state', this.machine.initialState); this.machine.start(); }, - willDestroy: function() { + willDestroy: function () { this._super(...arguments); this.machine.stop(); }, - addAction: function(name, value) { + addAction: function (name, value) { this._actions[name] = value; }, - removeAction: function(name) { + removeAction: function (name) { delete this._actions[name]; }, - addGuard: function(name, value) { + addGuard: function (name, value) { this._guards[name] = value; }, - removeGuard: function(name) { + removeGuard: function (name) { delete this._guards[name]; }, - dispatch: function(eventName, payload) { + dispatch: function (eventName, payload) { this.machine.state.context = payload; this.machine.send({ type: eventName }); }, actions: { - dispatch: function(eventName, e) { + dispatch: function (eventName, e) { if (e && e.preventDefault) { if (typeof e.target.nodeName === 'undefined' || e.target.nodeName.toLowerCase() !== 'a') { e.preventDefault(); diff --git a/ui/packages/consul-ui/app/components/state-machine/index.js b/ui/packages/consul-ui/app/components/state-machine/index.js index 97507fb0ed..721b54286a 100644 --- a/ui/packages/consul-ui/app/components/state-machine/index.js +++ b/ui/packages/consul-ui/app/components/state-machine/index.js @@ -1,4 +1,3 @@ import Component from '../state-chart/index'; export default Component.extend({}); - diff --git a/ui/packages/consul-ui/app/components/state/index.js b/ui/packages/consul-ui/app/components/state/index.js index 3742bbe74c..c21d3eec68 100644 --- a/ui/packages/consul-ui/app/components/state/index.js +++ b/ui/packages/consul-ui/app/components/state/index.js @@ -13,8 +13,9 @@ export default class State extends Component { if (typeof state === 'undefined') { return; } - this.render = typeof matches !== 'undefined' ? - this.state.matches(state, matches) : - !this.state.matches(state, notMatches); + this.render = + typeof matches !== 'undefined' + ? this.state.matches(state, matches) + : !this.state.matches(state, notMatches); } } diff --git a/ui/packages/consul-ui/app/components/tab-nav/index.hbs b/ui/packages/consul-ui/app/components/tab-nav/index.hbs index fc6da077b9..6b8acd7651 100644 --- a/ui/packages/consul-ui/app/components/tab-nav/index.hbs +++ b/ui/packages/consul-ui/app/components/tab-nav/index.hbs @@ -31,16 +31,10 @@ as |select name|}} > diff --git a/ui/packages/consul-ui/app/components/tab-nav/index.js b/ui/packages/consul-ui/app/components/tab-nav/index.js index 5a1379423b..c2afccbdf2 100644 --- a/ui/packages/consul-ui/app/components/tab-nav/index.js +++ b/ui/packages/consul-ui/app/components/tab-nav/index.js @@ -1,3 +1,12 @@ import Component from '@glimmer/component'; -export default class TabNav extends Component {} +function noop() {} +export default class TabNav extends Component { + get onClick() { + return this.args.onclick || noop; + } + + get onTabClicked() { + return this.args.onTabClicked || noop; + } +} diff --git a/ui/packages/consul-ui/app/components/tab-nav/pageobject.js b/ui/packages/consul-ui/app/components/tab-nav/pageobject.js index 2ec50e6a87..03b40c8826 100644 --- a/ui/packages/consul-ui/app/components/tab-nav/pageobject.js +++ b/ui/packages/consul-ui/app/components/tab-nav/pageobject.js @@ -1,13 +1,13 @@ import { is, clickable, attribute, isVisible } from 'ember-cli-page-object'; import ucfirst from 'consul-ui/utils/ucfirst'; -export default function(name, items, blankKey = 'all') { - return items.reduce(function(prev, item, i, arr) { +export default function (name, items, blankKey = 'all') { + return items.reduce(function (prev, item, i, arr) { // if item is empty then it means 'all' // otherwise camelCase based on something-here = somethingHere for the key const key = item === '' ? blankKey - : item.split('-').reduce(function(prev, item, i, arr) { + : item.split('-').reduce(function (prev, item, i, arr) { if (i === 0) { return item; } diff --git a/ui/packages/consul-ui/app/components/tabular-collection/index.js b/ui/packages/consul-ui/app/components/tabular-collection/index.js index a9d71e030b..5bb3ff7f29 100644 --- a/ui/packages/consul-ui/app/components/tabular-collection/index.js +++ b/ui/packages/consul-ui/app/components/tabular-collection/index.js @@ -15,13 +15,13 @@ export default CollectionComponent.extend(Slotted, { maxHeight: 500, checked: null, hasCaption: false, - init: function() { + init: function () { this._super(...arguments); this.guid = this.dom.guid(this); // TODO: The row height should auto calculate properly from the CSS const o = this; this['cell-layout'] = new Grid(get(this, 'width'), get(this, 'rowHeight')); - this['cell-layout'].formatItemStyle = function(itemIndex) { + this['cell-layout'].formatItemStyle = function (itemIndex) { let style = formatItemStyle.apply(this, arguments); if (o.checked === itemIndex) { style = `${style};z-index: 1`; @@ -29,12 +29,12 @@ export default CollectionComponent.extend(Slotted, { return style; }; }, - didInsertElement: function() { + didInsertElement: function () { this._super(...arguments); this.$element = this.dom.element(`#${this.guid}`); this.actions.resize.apply(this, [{ target: this.dom.viewport() }]); }, - style: computed('rowHeight', '_items', 'maxRows', 'maxHeight', function() { + style: computed('rowHeight', '_items', 'maxRows', 'maxHeight', function () { const maxRows = get(this, 'rows'); let height = get(this, 'maxHeight'); if (maxRows) { @@ -46,14 +46,14 @@ export default CollectionComponent.extend(Slotted, { height: height, }; }), - willRender: function() { + willRender: function () { this._super(...arguments); set(this, 'hasCaption', this._isRegistered('caption')); set(this, 'hasActions', this._isRegistered('actions')); }, // `ember-collection` bug workaround // https://github.com/emberjs/ember-collection/issues/138 - _needsRevalidate: function() { + _needsRevalidate: function () { if (this.isDestroyed || this.isDestroying) { return; } @@ -64,7 +64,7 @@ export default CollectionComponent.extend(Slotted, { } }, actions: { - resize: function(e) { + resize: function (e) { const $tbody = this.$element; const $appContent = this.dom.element('.app-view'); if ($appContent) { @@ -77,7 +77,7 @@ export default CollectionComponent.extend(Slotted, { // TODO: The row height should auto calculate properly from the CSS this['cell-layout'] = new Grid($appContent.clientWidth, get(this, 'rowHeight')); const o = this; - this['cell-layout'].formatItemStyle = function(itemIndex) { + this['cell-layout'].formatItemStyle = function (itemIndex) { let style = formatItemStyle.apply(this, arguments); if (o.checked === itemIndex) { style = `${style};z-index: 1`; @@ -88,10 +88,10 @@ export default CollectionComponent.extend(Slotted, { this.updateScrollPosition(); } }, - click: function(e) { + click: function (e) { return this.dom.clickFirstAnchor(e); }, - change: function(index, e = {}) { + change: function (index, e = {}) { if (this.$tr) { this.$tr.style.zIndex = null; } diff --git a/ui/packages/consul-ui/app/components/tabular-details/index.js b/ui/packages/consul-ui/app/components/tabular-details/index.js index 91f758d0db..1b2a5aeb9d 100644 --- a/ui/packages/consul-ui/app/components/tabular-details/index.js +++ b/ui/packages/consul-ui/app/components/tabular-details/index.js @@ -4,16 +4,16 @@ import Slotted from 'block-slots'; export default Component.extend(Slotted, { dom: service('dom'), - onchange: function() {}, - init: function() { + onchange: function () {}, + init: function () { this._super(...arguments); this.guid = this.dom.guid(this); }, actions: { - click: function(e) { + click: function (e) { this.dom.clickFirstAnchor(e); }, - change: function(item, items, e) { + change: function (item, items, e) { this.onchange(e, item, items); }, }, diff --git a/ui/packages/consul-ui/app/components/toggle-button/index.js b/ui/packages/consul-ui/app/components/toggle-button/index.js index 11f0a7efc7..73de491a03 100644 --- a/ui/packages/consul-ui/app/components/toggle-button/index.js +++ b/ui/packages/consul-ui/app/components/toggle-button/index.js @@ -5,19 +5,19 @@ export default Component.extend({ dom: service('dom'), tagName: '', checked: false, - onchange: function() {}, + onchange: function () {}, // TODO: reserved for the moment but we don't need it yet - onblur: function() {}, - init: function() { + onblur: function () {}, + init: function () { this._super(...arguments); this.guid = this.dom.guid(this); this._listeners = this.dom.listeners(); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); this._listeners.remove(); }, - didReceiveAttrs: function() { + didReceiveAttrs: function () { this._super(...arguments); if (this.checked) { this.addClickOutsideListener(); @@ -25,10 +25,10 @@ export default Component.extend({ this._listeners.remove(); } }, - addClickOutsideListener: function() { + addClickOutsideListener: function () { // default onblur event this._listeners.remove(); - this._listeners.add(this.dom.document(), 'click', e => { + this._listeners.add(this.dom.document(), 'click', (e) => { if (this.dom.isOutside(this.label, e.target)) { if (this.dom.isOutside(this.label.nextElementSibling, e.target)) { if (this.input.checked) { @@ -42,7 +42,7 @@ export default Component.extend({ }); }, actions: { - click: function(e) { + click: function (e) { // only preventDefault if the target isn't an external link // TODO: this should be changed for an explicit close if ((e.target.rel || '').indexOf('noopener') === -1) { @@ -56,7 +56,7 @@ export default Component.extend({ } this.actions.change.apply(this, [e]); }, - change: function(e) { + change: function (e) { if (this.input.checked) { this.addClickOutsideListener(); } diff --git a/ui/packages/consul-ui/app/components/token-source/index.js b/ui/packages/consul-ui/app/components/token-source/index.js index 1eb317369d..6b88952b06 100644 --- a/ui/packages/consul-ui/app/components/token-source/index.js +++ b/ui/packages/consul-ui/app/components/token-source/index.js @@ -20,7 +20,7 @@ export default class TokenSource extends Component { @action change(e) { - e.data.toJSON = function() { + e.data.toJSON = function () { return { AccessorID: this.AccessorID, // TODO: In the past we've always ignored the SecretID returned @@ -39,9 +39,8 @@ export default class TokenSource extends Component { }; }; // TODO: We should probably put the component into idle state - if(typeof this.args.onchange === 'function') { + if (typeof this.args.onchange === 'function') { this.args.onchange(e); } } - } diff --git a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js index 4c7741b72b..d0fe1088d6 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js @@ -16,7 +16,7 @@ export default class TopoloyMetricsDownLines extends Component { const view = this.args.view; const lines = [...document.querySelectorAll('#downstream-lines path')]; - this.iconPositions = lines.map(item => { + this.iconPositions = lines.map((item) => { const pathLen = parseFloat(item.getTotalLength()); const thirdLen = item.getPointAtLength(Math.ceil(pathLen / 3)); diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.js b/ui/packages/consul-ui/app/components/topology-metrics/index.js index 627c2394b7..a5696c1ce8 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/index.js @@ -24,7 +24,7 @@ export default class TopologyMetrics extends Component { }; return items - .map(item => { + .map((item) => { const dimensions = item.getBoundingClientRect(); const src = { x: dimensions.x + dimensions.width, @@ -51,7 +51,7 @@ export default class TopologyMetrics extends Component { }; return items - .map(item => { + .map((item) => { const dimensions = item.getBoundingClientRect(); const dest = { x: dimensions.x - dimensions.width - 25, @@ -104,7 +104,7 @@ export default class TopologyMetrics extends Component { get upstreams() { const upstreams = get(this.args.topology, 'Upstreams') || []; - upstreams.forEach(u => { + upstreams.forEach((u) => { u.PeerOrDatacenter = u.PeerName || u.Datacenter; }); const items = [...upstreams]; diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/index.js b/ui/packages/consul-ui/app/components/topology-metrics/series/index.js index 16be89a698..18141adde2 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/series/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/series/index.js @@ -24,17 +24,17 @@ export default Component.extend({ data: null, empty: false, actions: { - redraw: function(evt) { + redraw: function (evt) { this.drawGraphs(); }, - change: function(evt) { + change: function (evt) { this.set('data', evt.data.series); this.drawGraphs(); this.rerender(); }, }, - drawGraphs: function() { + drawGraphs: function () { if (!this.data) { set(this, 'empty', true); return; @@ -56,7 +56,7 @@ export default Component.extend({ let series = maybeData.data || []; let labels = maybeData.labels || {}; let unitSuffix = maybeData.unitSuffix || ''; - let keys = Object.keys(labels).filter(l => l != 'Total'); + let keys = Object.keys(labels).filter((l) => l != 'Total'); if (series.length == 0 || keys.length == 0) { // Put the graph in an error state that might get fixed if metrics show up @@ -67,9 +67,7 @@ export default Component.extend({ set(this, 'empty', false); } - let st = stack() - .keys(keys) - .order(stackOrderReverse); + let st = stack().keys(keys).order(stackOrderReverse); let stackData = st(series); @@ -77,16 +75,16 @@ export default Component.extend({ // stackData contains this but I didn't find reliable documentation on // whether we can rely on the highest stacked area to always be first/last // in array etc. so this is simpler. - let summed = series.map(d => { + let summed = series.map((d) => { let sum = 0; - keys.forEach(l => { + keys.forEach((l) => { sum = sum + d[l]; }); return sum; }); let x = scaleTime() - .domain(extent(series, d => d.time)) + .domain(extent(series, (d) => d.time)) .range([0, w]); let y = scaleLinear() @@ -94,9 +92,9 @@ export default Component.extend({ .range([h, 0]); let a = area() - .x(d => x(d.data.time)) - .y1(d => y(d[0])) - .y0(d => y(d[1])); + .x((d) => x(d.data.time)) + .y1((d) => y(d[0])) + .y0((d) => y(d[1])); // Use the grey/red we prefer by default but have more colors available in // case user adds extra series with a custom provider. @@ -136,11 +134,7 @@ export default Component.extend({ .attr('class', 'sparkline-tt-legend-color') .style('background-color', color(k)); - legend - .append('span') - .text(k) - .append('span') - .attr('class', 'sparkline-tt-legend-value'); + legend.append('span').text(k).append('span').attr('class', 'sparkline-tt-legend-value'); } let tipVals = tooltip.selectAll('.sparkline-tt-legend-value'); @@ -158,7 +152,7 @@ export default Component.extend({ let self = this; svg - .on('mouseover', function(e) { + .on('mouseover', function (e) { tooltip.style('visibility', 'visible'); cursor.style('visibility', 'visible'); // We update here since we might redraw the graph with user's cursor @@ -166,26 +160,26 @@ export default Component.extend({ // mousemove but the tooltip and cursor are wrong (based on old data). self.updateTooltip(e, series, stackData, summed, unitSuffix, x, tooltip, tipVals, cursor); }) - .on('mousemove', function(e) { + .on('mousemove', function (e) { self.updateTooltip(e, series, stackData, summed, unitSuffix, x, tooltip, tipVals, cursor); }) - .on('mouseout', function(e) { + .on('mouseout', function (e) { tooltip.style('visibility', 'hidden'); cursor.style('visibility', 'hidden'); }); }, - willDestroyElement: function() { + willDestroyElement: function () { this._super(...arguments); if (typeof this.svg !== 'undefined') { this.svg.on('mouseover mousemove mouseout', null); } }, - updateTooltip: function(e, series, stackData, summed, unitSuffix, x, tooltip, tipVals, cursor) { + updateTooltip: function (e, series, stackData, summed, unitSuffix, x, tooltip, tipVals, cursor) { let [mouseX] = pointer(e); cursor.attr('x', mouseX); let mouseTime = x.invert(mouseX); - var bisectTime = bisector(function(d) { + var bisectTime = bisector(function (d) { return d.time; }).left; let tipIdx = bisectTime(series, mouseTime); diff --git a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js index 51bd4aab09..62073c3fbb 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js @@ -17,7 +17,7 @@ export default class TopologyMetricsUpLines extends Component { const view = this.args.view; const lines = [...document.querySelectorAll('#upstream-lines path')]; - this.iconPositions = lines.map(item => { + this.iconPositions = lines.map((item) => { const pathLen = parseFloat(item.getTotalLength()); const partLen = item.getPointAtLength(Math.ceil(pathLen * 0.666)); return { diff --git a/ui/packages/consul-ui/app/controllers/_peered-resource.js b/ui/packages/consul-ui/app/controllers/_peered-resource.js index 1490727b67..edcf50605f 100644 --- a/ui/packages/consul-ui/app/controllers/_peered-resource.js +++ b/ui/packages/consul-ui/app/controllers/_peered-resource.js @@ -8,7 +8,7 @@ export default class PeeredResourceController extends Controller { const { searchProperties } = this; if (!this.abilities.can('use peers')) { - return searchProperties.filter(propertyName => propertyName !== 'PeerName'); + return searchProperties.filter((propertyName) => propertyName !== 'PeerName'); } else { return searchProperties; } diff --git a/ui/packages/consul-ui/app/controllers/application.js b/ui/packages/consul-ui/app/controllers/application.js index 14bfc4018a..4247d6cc8e 100644 --- a/ui/packages/consul-ui/app/controllers/application.js +++ b/ui/packages/consul-ui/app/controllers/application.js @@ -46,13 +46,13 @@ export default class ApplicationController extends Controller { return container .lookup('route:application') .refresh() - .promise.catch(function(e) { + .promise.catch(function (e) { // passthrough // if you are on an error page a refresh of the application route will reject // thats ok as we then transition to the actual route you were trying // to get to originally anyway }) - .then(res => { + .then((res) => { // Use transitionable if we need to change a section of the URL // or routeName and currentRouteName aren't equal (i.e. error page) if ( @@ -68,7 +68,7 @@ export default class ApplicationController extends Controller { }); }, e.type, - function(type, e) { + function (type, e) { return type; }, {} diff --git a/ui/packages/consul-ui/app/controllers/dc/acls/tokens/edit.js b/ui/packages/consul-ui/app/controllers/dc/acls/tokens/edit.js index 4355a27906..32f929cb94 100644 --- a/ui/packages/consul-ui/app/controllers/dc/acls/tokens/edit.js +++ b/ui/packages/consul-ui/app/controllers/dc/acls/tokens/edit.js @@ -4,11 +4,11 @@ export default Controller.extend({ dom: service('dom'), builder: service('form'), isScoped: false, - init: function() { + init: function () { this._super(...arguments); this.form = this.builder.form('token'); }, - setProperties: function(model) { + setProperties: function (model) { // essentially this replaces the data with changesets this._super( Object.keys(model).reduce((prev, key, i) => { @@ -22,7 +22,7 @@ export default Controller.extend({ ); }, actions: { - change: function(e, value, item) { + change: function (e, value, item) { const event = this.dom.normalizeEvent(e, value); const form = this.form; try { diff --git a/ui/packages/consul-ui/app/decorators/data-source.js b/ui/packages/consul-ui/app/decorators/data-source.js index a0b3bf632a..6289373108 100644 --- a/ui/packages/consul-ui/app/decorators/data-source.js +++ b/ui/packages/consul-ui/app/decorators/data-source.js @@ -3,18 +3,18 @@ import wayfarer from 'wayfarer'; const router = wayfarer(); const routes = {}; -export default path => (target, propertyKey, desc) => { +export default (path) => (target, propertyKey, desc) => { runInDebug(() => { routes[path] = { cls: target, method: propertyKey }; }); - router.on(path, function(params, owner, request) { + router.on(path, function (params, owner, request) { const container = owner.lookup('service:container'); const instance = container.get(target); - return configuration => desc.value.apply(instance, [params, configuration, request]); + return (configuration) => desc.value.apply(instance, [params, configuration, request]); }); return desc; }; -export const match = path => { +export const match = (path) => { return router.match(path); }; @@ -29,13 +29,10 @@ runInDebug(() => {
 ${Object.entries(routes)
   .map(([key, value]) => {
-    let cls = container
-      .keyForClass(value.cls)
-      .split('/')
-      .pop();
+    let cls = container.keyForClass(value.cls).split('/').pop();
     cls = cls
       .split('-')
-      .map(item => `${item[0].toUpperCase()}${item.substr(1)}`)
+      .map((item) => `${item[0].toUpperCase()}${item.substr(1)}`)
       .join('');
     return `${key}
       ${cls}Repository.${value.method}(params)
diff --git a/ui/packages/consul-ui/app/decorators/replace.js b/ui/packages/consul-ui/app/decorators/replace.js
index 671d1dffef..72703b18c4 100644
--- a/ui/packages/consul-ui/app/decorators/replace.js
+++ b/ui/packages/consul-ui/app/decorators/replace.js
@@ -4,19 +4,19 @@
  */
 export const replace = (find, replace) => (target, propertyKey, desc) => {
   return {
-    get: function() {
+    get: function () {
       const value = desc.get.apply(this, arguments);
       if (value === find) {
         return replace;
       }
       return value;
     },
-    set: function() {
+    set: function () {
       return desc.set.apply(this, arguments);
     },
   };
 };
-export const nullValue = function(val) {
+export const nullValue = function (val) {
   return replace(null, val);
 };
 export default replace;
diff --git a/ui/packages/consul-ui/app/forms/intention.js b/ui/packages/consul-ui/app/forms/intention.js
index 3d4139fd0f..dbcba34747 100644
--- a/ui/packages/consul-ui/app/forms/intention.js
+++ b/ui/packages/consul-ui/app/forms/intention.js
@@ -1,6 +1,6 @@
 import validations from 'consul-ui/validations/intention';
 import builderFactory from 'consul-ui/utils/form/builder';
 const builder = builderFactory();
-export default function(container, name = '', v = validations, form = builder) {
+export default function (container, name = '', v = validations, form = builder) {
   return form(name, {}).setValidators(v);
 }
diff --git a/ui/packages/consul-ui/app/forms/kv.js b/ui/packages/consul-ui/app/forms/kv.js
index a68d5f1b8f..729dfd4b7b 100644
--- a/ui/packages/consul-ui/app/forms/kv.js
+++ b/ui/packages/consul-ui/app/forms/kv.js
@@ -1,6 +1,6 @@
 import validations from 'consul-ui/validations/kv';
 import builderFactory from 'consul-ui/utils/form/builder';
 const builder = builderFactory();
-export default function(container, name = '', v = validations, form = builder) {
+export default function (container, name = '', v = validations, form = builder) {
   return form(name, {}).setValidators(v);
 }
diff --git a/ui/packages/consul-ui/app/forms/policy.js b/ui/packages/consul-ui/app/forms/policy.js
index f920c5b56f..5023b7d595 100644
--- a/ui/packages/consul-ui/app/forms/policy.js
+++ b/ui/packages/consul-ui/app/forms/policy.js
@@ -1,7 +1,7 @@
 import validations from 'consul-ui/validations/policy';
 import builderFactory from 'consul-ui/utils/form/builder';
 const builder = builderFactory();
-export default function(container, name = 'policy', v = validations, form = builder) {
+export default function (container, name = 'policy', v = validations, form = builder) {
   return form(name, {
     Datacenters: {
       type: 'array',
diff --git a/ui/packages/consul-ui/app/forms/role.js b/ui/packages/consul-ui/app/forms/role.js
index 54f6f80eff..0550c04c7a 100644
--- a/ui/packages/consul-ui/app/forms/role.js
+++ b/ui/packages/consul-ui/app/forms/role.js
@@ -1,8 +1,6 @@
 import validations from 'consul-ui/validations/role';
 import builderFactory from 'consul-ui/utils/form/builder';
 const builder = builderFactory();
-export default function(container, name = 'role', v = validations, form = builder) {
-  return form(name, {})
-    .setValidators(v)
-    .add(container.form('policy'));
+export default function (container, name = 'role', v = validations, form = builder) {
+  return form(name, {}).setValidators(v).add(container.form('policy'));
 }
diff --git a/ui/packages/consul-ui/app/forms/token.js b/ui/packages/consul-ui/app/forms/token.js
index 03f3f1d431..2994a397c9 100644
--- a/ui/packages/consul-ui/app/forms/token.js
+++ b/ui/packages/consul-ui/app/forms/token.js
@@ -1,9 +1,6 @@
 import validations from 'consul-ui/validations/token';
 import builderFactory from 'consul-ui/utils/form/builder';
 const builder = builderFactory();
-export default function(container, name = '', v = validations, form = builder) {
-  return form(name, {})
-    .setValidators(v)
-    .add(container.form('policy'))
-    .add(container.form('role'));
+export default function (container, name = '', v = validations, form = builder) {
+  return form(name, {}).setValidators(v).add(container.form('policy')).add(container.form('role'));
 }
diff --git a/ui/packages/consul-ui/app/helpers/adopt-styles.js b/ui/packages/consul-ui/app/helpers/adopt-styles.js
index b683633a30..959558dca1 100644
--- a/ui/packages/consul-ui/app/helpers/adopt-styles.js
+++ b/ui/packages/consul-ui/app/helpers/adopt-styles.js
@@ -13,7 +13,7 @@ export default class AdoptStylesHelper extends Helper {
       'adopt-styles can only be used to apply styles to ShadowDOM elements',
       $shadow instanceof ShadowRoot
     );
-    if(!Array.isArray(styles)) {
+    if (!Array.isArray(styles)) {
       styles = [styles];
     }
     adoptStyles($shadow, styles);
diff --git a/ui/packages/consul-ui/app/helpers/atob.js b/ui/packages/consul-ui/app/helpers/atob.js
index 3ca50f2dd4..76b49122f3 100644
--- a/ui/packages/consul-ui/app/helpers/atob.js
+++ b/ui/packages/consul-ui/app/helpers/atob.js
@@ -1,5 +1,5 @@
 import { helper } from '@ember/component/helper';
 import atob from 'consul-ui/utils/atob';
-export default helper(function([str = '']) {
+export default helper(function ([str = '']) {
   return atob(str);
 });
diff --git a/ui/packages/consul-ui/app/helpers/can.js b/ui/packages/consul-ui/app/helpers/can.js
deleted file mode 100644
index 97dc63880f..0000000000
--- a/ui/packages/consul-ui/app/helpers/can.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Helper from 'ember-can/helpers/can';
-
-export default class extends Helper {
-  _addAbilityObserver(ability, propertyName) {
-    if(!this.isDestroyed && !this.isDestroying) {
-      super._addAbilityObserver(...arguments);
-    }
-  }
-}
diff --git a/ui/packages/consul-ui/app/helpers/class-map.js b/ui/packages/consul-ui/app/helpers/class-map.js
index 41f2664feb..a3034a06eb 100644
--- a/ui/packages/consul-ui/app/helpers/class-map.js
+++ b/ui/packages/consul-ui/app/helpers/class-map.js
@@ -7,11 +7,11 @@ import { helper } from '@ember/component/helper';
  * @typedef {([string, boolean] | [string])} classInfo
  * @param {(classInfo | string)[]} entries - An array of 'entry-like' arrays of `classInfo`s to map
  */
-const classMap = entries => {
+const classMap = (entries) => {
   const str = entries
     .filter(Boolean)
-    .filter(entry => (typeof entry === 'string' ? true : entry[entry.length - 1]))
-    .map(entry => (typeof entry === 'string' ? entry : entry[0]))
+    .filter((entry) => (typeof entry === 'string' ? true : entry[entry.length - 1]))
+    .map((entry) => (typeof entry === 'string' ? entry : entry[0]))
     .join(' ');
   return str.length > 0 ? str : undefined;
 };
diff --git a/ui/packages/consul-ui/app/helpers/css-map.js b/ui/packages/consul-ui/app/helpers/css-map.js
index 9f5bb04095..da4f89ef7d 100644
--- a/ui/packages/consul-ui/app/helpers/css-map.js
+++ b/ui/packages/consul-ui/app/helpers/css-map.js
@@ -8,9 +8,9 @@ import { CSSResult } from '@lit/reactive-element';
  * @typedef {([CSSResult, boolean] | [CSSResult])} cssInfo
  * @param {(cssInfo | string)[]} entries - An array of 'entry-like' arrays of `cssInfo`s to map
  */
-const cssMap = entries => {
+const cssMap = (entries) => {
   return entries
-    .filter(entry => (entry instanceof CSSResult ? true : entry[entry.length - 1]))
-    .map(entry => (entry instanceof CSSResult ? entry : entry[0]))
+    .filter((entry) => (entry instanceof CSSResult ? true : entry[entry.length - 1]))
+    .map((entry) => (entry instanceof CSSResult ? entry : entry[0]));
 };
 export default helper(cssMap);
diff --git a/ui/packages/consul-ui/app/helpers/document-attrs.js b/ui/packages/consul-ui/app/helpers/document-attrs.js
index 4f91fe14d7..a1ccfc1ace 100644
--- a/ui/packages/consul-ui/app/helpers/document-attrs.js
+++ b/ui/packages/consul-ui/app/helpers/document-attrs.js
@@ -30,7 +30,7 @@ export default class DocumentAttrsHelper extends Helper {
         let map = attrs.get(key);
 
         if (typeof map !== 'undefined') {
-          [...new Set(value.split(' '))].map(val => map.remove(val, this));
+          [...new Set(value.split(' '))].map((val) => map.remove(val, this));
         }
       });
     }
@@ -43,7 +43,7 @@ export default class DocumentAttrsHelper extends Helper {
           values = new MultiMap(Set);
           attrs.set(key, values);
         }
-        [...new Set(value.split(' '))].map(val => {
+        [...new Set(value.split(' '))].map((val) => {
           if (values.count(val) === 0) {
             values.set(val, null);
           }
@@ -60,7 +60,7 @@ export default class DocumentAttrsHelper extends Helper {
       }
       // go through our list of properties and synchronize the DOM
       // properties with our properties
-      [...values.keys()].forEach(value => {
+      [...values.keys()].forEach((value) => {
         if (values.count(value) === 1) {
           switch (type) {
             case 'class':
diff --git a/ui/packages/consul-ui/app/helpers/dom-position.js b/ui/packages/consul-ui/app/helpers/dom-position.js
index d28c957005..39caafc3e2 100644
--- a/ui/packages/consul-ui/app/helpers/dom-position.js
+++ b/ui/packages/consul-ui/app/helpers/dom-position.js
@@ -2,7 +2,7 @@ import Helper from '@ember/component/helper';
 
 export default class DomPosition extends Helper {
   compute([target], { from, offset = false }) {
-    return e => {
+    return (e) => {
       if (typeof target === 'function') {
         let rect;
         let $el;
@@ -29,11 +29,9 @@ export default class DomPosition extends Helper {
         // provide and easy way to map coords to CSS props
         const $el = e.target;
         const rect = $el.getBoundingClientRect();
-        target.forEach(
-          ([prop, value]) => {
-            $el.style[value] = `${rect[prop]}px`;
-          }
-        );
+        target.forEach(([prop, value]) => {
+          $el.style[value] = `${rect[prop]}px`;
+        });
       }
     };
   }
diff --git a/ui/packages/consul-ui/app/helpers/flatten-property.js b/ui/packages/consul-ui/app/helpers/flatten-property.js
index 761785b553..9790dc9120 100644
--- a/ui/packages/consul-ui/app/helpers/flatten-property.js
+++ b/ui/packages/consul-ui/app/helpers/flatten-property.js
@@ -3,6 +3,6 @@ import { helper } from '@ember/component/helper';
 export default helper(function flattenProperty([obj, prop], hash) {
   const pages = hash.pages || [];
   pages.push(...obj.pages);
-  obj.children.forEach(child => flattenProperty([child], { pages: pages }));
+  obj.children.forEach((child) => flattenProperty([child], { pages: pages }));
   return pages;
 });
diff --git a/ui/packages/consul-ui/app/helpers/href-to.js b/ui/packages/consul-ui/app/helpers/href-to.js
index 16ca416016..9c428b8277 100644
--- a/ui/packages/consul-ui/app/helpers/href-to.js
+++ b/ui/packages/consul-ui/app/helpers/href-to.js
@@ -12,7 +12,7 @@ import { routes } from 'consul-ui/router';
 
 const isWildcard = wildcard(routes);
 
-export const hrefTo = function(container, params, hash = {}) {
+export const hrefTo = function (container, params, hash = {}) {
   // TODO: consider getting this from @service('router')._router which is
   // private but we don't need getOwner, and it ensures setupRouter is called
   // How private is 'router:main'? If its less private maybe stick with it?
@@ -34,10 +34,7 @@ export const hrefTo = function(container, params, hash = {}) {
     // if the routeName is a wildcard (*) route url encode all of the params
     if (isWildcard(routeName)) {
       _params = _params.map((item, i) => {
-        return item
-          .split('/')
-          .map(encodeURIComponent)
-          .join('/');
+        return item.split('/').map(encodeURIComponent).join('/');
       });
     }
     return location.hrefTo(routeName, _params, _hash);
diff --git a/ui/packages/consul-ui/app/helpers/icons-debug.js b/ui/packages/consul-ui/app/helpers/icons-debug.js
index a64039cab8..30b12c9e28 100644
--- a/ui/packages/consul-ui/app/helpers/icons-debug.js
+++ b/ui/packages/consul-ui/app/helpers/icons-debug.js
@@ -1,1057 +1,1058 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function([lib], hash) {
+export default helper(function ([lib], hash) {
   return [
     'activity-16.svg',
-'activity-24.svg',
-'alert-circle-16.svg',
-'alert-circle-24.svg',
-'alert-circle-fill-16.svg',
-'alert-circle-fill-24.svg',
-'alert-circle-fill.svg',
-'alert-circle-outline.svg',
-'alert-octagon-16.svg',
-'alert-octagon-24.svg',
-'alert-octagon-fill-16.svg',
-'alert-octagon-fill-24.svg',
-'alert-triangle-16.svg',
-'alert-triangle-24.svg',
-'alert-triangle-fill-16.svg',
-'alert-triangle-fill-24.svg',
-'alert-triangle.svg',
-'alibaba-16.svg',
-'alibaba-24.svg',
-'alibaba-color-16.svg',
-'alibaba-color-24.svg',
-'align-center-16.svg',
-'align-center-24.svg',
-'align-justify-16.svg',
-'align-justify-24.svg',
-'align-left-16.svg',
-'align-left-24.svg',
-'align-right-16.svg',
-'align-right-24.svg',
-'apple-16.svg',
-'apple-24.svg',
-'apple-color-16.svg',
-'apple-color-24.svg',
-'archive-16.svg',
-'archive-24.svg',
-'arrow-down-16.svg',
-'arrow-down-24.svg',
-'arrow-down-circle-16.svg',
-'arrow-down-circle-24.svg',
-'arrow-down-left-16.svg',
-'arrow-down-left-24.svg',
-'arrow-down-right-16.svg',
-'arrow-down-right-24.svg',
-'arrow-down.svg',
-'arrow-left-16.svg',
-'arrow-left-24.svg',
-'arrow-left-circle-16.svg',
-'arrow-left-circle-24.svg',
-'arrow-left.svg',
-'arrow-right-16.svg',
-'arrow-right-24.svg',
-'arrow-right-circle-16.svg',
-'arrow-right-circle-24.svg',
-'arrow-right.svg',
-'arrow-up-16.svg',
-'arrow-up-24.svg',
-'arrow-up-circle-16.svg',
-'arrow-up-circle-24.svg',
-'arrow-up-left-16.svg',
-'arrow-up-left-24.svg',
-'arrow-up-right-16.svg',
-'arrow-up-right-24.svg',
-'arrow-up.svg',
-'at-sign-16.svg',
-'at-sign-24.svg',
-'auth0-16.svg',
-'auth0-24.svg',
-'auth0-color-16.svg',
-'auth0-color-24.svg',
-'auto-apply-16.svg',
-'auto-apply-24.svg',
-'award-16.svg',
-'award-24.svg',
-'aws-16.svg',
-'aws-24.svg',
-'aws-color-16.svg',
-'aws-color-24.svg',
-'azure-16.svg',
-'azure-24.svg',
-'azure-color-16.svg',
-'azure-color-24.svg',
-'azure-devops-16.svg',
-'azure-devops-24.svg',
-'azure-devops-color-16.svg',
-'azure-devops-color-24.svg',
-'bar-chart-16.svg',
-'bar-chart-24.svg',
-'bar-chart-alt-16.svg',
-'bar-chart-alt-24.svg',
-'battery-16.svg',
-'battery-24.svg',
-'battery-charging-16.svg',
-'battery-charging-24.svg',
-'beaker-16.svg',
-'beaker-24.svg',
-'bell-16.svg',
-'bell-24.svg',
-'bell-active-16.svg',
-'bell-active-24.svg',
-'bell-active-fill-16.svg',
-'bell-active-fill-24.svg',
-'bell-off-16.svg',
-'bell-off-24.svg',
-'bitbucket-16.svg',
-'bitbucket-24.svg',
-'bitbucket-color-16.svg',
-'bitbucket-color-24.svg',
-'bolt.svg',
-'bookmark-16.svg',
-'bookmark-24.svg',
-'bookmark-add-16.svg',
-'bookmark-add-24.svg',
-'bookmark-add-fill-16.svg',
-'bookmark-add-fill-24.svg',
-'bookmark-fill-16.svg',
-'bookmark-fill-24.svg',
-'bookmark-remove-16.svg',
-'bookmark-remove-24.svg',
-'bookmark-remove-fill-16.svg',
-'bookmark-remove-fill-24.svg',
-'bottom-16.svg',
-'bottom-24.svg',
-'box-16.svg',
-'box-24.svg',
-'box-check-fill.svg',
-'box-outline.svg',
-'briefcase-16.svg',
-'briefcase-24.svg',
-'broadcast.svg',
-'bug-16.svg',
-'bug-24.svg',
-'bug.svg',
-'build-16.svg',
-'build-24.svg',
-'calendar-16.svg',
-'calendar-24.svg',
-'calendar.svg',
-'camera-16.svg',
-'camera-24.svg',
-'camera-off-16.svg',
-'camera-off-24.svg',
-'cancel-circle-fill.svg',
-'cancel-circle-outline.svg',
-'cancel-plain.svg',
-'cancel-square-fill.svg',
-'cancel-square-outline.svg',
-'caret-16.svg',
-'caret-24.svg',
-'caret-down.svg',
-'caret-up.svg',
-'cast-16.svg',
-'cast-24.svg',
-'certificate-16.svg',
-'certificate-24.svg',
-'change-16.svg',
-'change-24.svg',
-'change-circle-16.svg',
-'change-circle-24.svg',
-'change-square-16.svg',
-'change-square-24.svg',
-'check-16.svg',
-'check-24.svg',
-'check-circle-16.svg',
-'check-circle-24.svg',
-'check-circle-fill-16.svg',
-'check-circle-fill-24.svg',
-'check-circle-fill.svg',
-'check-circle-outline.svg',
-'check-diamond-16.svg',
-'check-diamond-24.svg',
-'check-diamond-fill-16.svg',
-'check-diamond-fill-24.svg',
-'check-hexagon-16.svg',
-'check-hexagon-24.svg',
-'check-hexagon-fill-16.svg',
-'check-hexagon-fill-24.svg',
-'check-plain.svg',
-'check-square-16.svg',
-'check-square-24.svg',
-'check-square-fill-16.svg',
-'check-square-fill-24.svg',
-'chevron-down-16.svg',
-'chevron-down-24.svg',
-'chevron-down.svg',
-'chevron-left-16.svg',
-'chevron-left-24.svg',
-'chevron-left.svg',
-'chevron-right-16.svg',
-'chevron-right-24.svg',
-'chevron-right.svg',
-'chevron-up-16.svg',
-'chevron-up-24.svg',
-'chevron-up.svg',
-'chevrons-down-16.svg',
-'chevrons-down-24.svg',
-'chevrons-left-16.svg',
-'chevrons-left-24.svg',
-'chevrons-right-16.svg',
-'chevrons-right-24.svg',
-'chevrons-up-16.svg',
-'chevrons-up-24.svg',
-'circle-16.svg',
-'circle-24.svg',
-'circle-dot-16.svg',
-'circle-dot-24.svg',
-'circle-fill-16.svg',
-'circle-fill-24.svg',
-'circle-half-16.svg',
-'circle-half-24.svg',
-'clipboard-16.svg',
-'clipboard-24.svg',
-'clipboard-checked-16.svg',
-'clipboard-checked-24.svg',
-'clipboard-copy-16.svg',
-'clipboard-copy-24.svg',
-'clock-16.svg',
-'clock-24.svg',
-'clock-fill.svg',
-'clock-outline.svg',
-'cloud-16.svg',
-'cloud-24.svg',
-'cloud-check-16.svg',
-'cloud-check-24.svg',
-'cloud-cross.svg',
-'cloud-download-16.svg',
-'cloud-download-24.svg',
-'cloud-lightning-16.svg',
-'cloud-lightning-24.svg',
-'cloud-lock-16.svg',
-'cloud-lock-24.svg',
-'cloud-off-16.svg',
-'cloud-off-24.svg',
-'cloud-upload-16.svg',
-'cloud-upload-24.svg',
-'cloud-x-16.svg',
-'cloud-x-24.svg',
-'code-16.svg',
-'code-24.svg',
-'code.svg',
-'collections-16.svg',
-'collections-24.svg',
-'command-16.svg',
-'command-24.svg',
-'compass-16.svg',
-'compass-24.svg',
-'connection-16.svg',
-'connection-24.svg',
-'connection-gateway-16.svg',
-'connection-gateway-24.svg',
-'console.svg',
-'copy-action.svg',
-'copy-success.svg',
-'corner-down-left-16.svg',
-'corner-down-left-24.svg',
-'corner-down-right-16.svg',
-'corner-down-right-24.svg',
-'corner-left-down-16.svg',
-'corner-left-down-24.svg',
-'corner-left-up-16.svg',
-'corner-left-up-24.svg',
-'corner-right-down-16.svg',
-'corner-right-down-24.svg',
-'corner-right-up-16.svg',
-'corner-right-up-24.svg',
-'corner-up-left-16.svg',
-'corner-up-left-24.svg',
-'corner-up-right-16.svg',
-'corner-up-right-24.svg',
-'cpu-16.svg',
-'cpu-24.svg',
-'credit-card-16.svg',
-'credit-card-24.svg',
-'crop-16.svg',
-'crop-24.svg',
-'crosshair-16.svg',
-'crosshair-24.svg',
-'dashboard-16.svg',
-'dashboard-24.svg',
-'database-16.svg',
-'database-24.svg',
-'database.svg',
-'delay-16.svg',
-'delay-24.svg',
-'delay.svg',
-'delete-16.svg',
-'delete-24.svg',
-'deny-alt.svg',
-'deny-color.svg',
-'deny-default.svg',
-'diamond-16.svg',
-'diamond-24.svg',
-'diamond-fill-16.svg',
-'diamond-fill-24.svg',
-'disabled.svg',
-'disc-16.svg',
-'disc-24.svg',
-'discussion-circle-16.svg',
-'discussion-circle-24.svg',
-'discussion-square-16.svg',
-'discussion-square-24.svg',
-'docker-16.svg',
-'docker-24.svg',
-'docker-color-16.svg',
-'docker-color-24.svg',
-'docs-16.svg',
-'docs-24.svg',
-'docs-download-16.svg',
-'docs-download-24.svg',
-'docs-link-16.svg',
-'docs-link-24.svg',
-'docs.svg',
-'dollar-sign-16.svg',
-'dollar-sign-24.svg',
-'dot-16.svg',
-'dot-24.svg',
-'dot-half-16.svg',
-'dot-half-24.svg',
-'download-16.svg',
-'download-24.svg',
-'download.svg',
-'droplet-16.svg',
-'droplet-24.svg',
-'duplicate-16.svg',
-'duplicate-24.svg',
-'edit-16.svg',
-'edit-24.svg',
-'edit.svg',
-'entry-point-16.svg',
-'entry-point-24.svg',
-'envelope-sealed-fill.svg',
-'envelope-sealed-outline.svg',
-'envelope-unsealed--outline.svg',
-'envelope-unsealed-fill.svg',
-'event-16.svg',
-'event-24.svg',
-'exit-point-16.svg',
-'exit-point-24.svg',
-'exit.svg',
-'expand-less.svg',
-'expand-more.svg',
-'external-link-16.svg',
-'external-link-24.svg',
-'eye-16.svg',
-'eye-24.svg',
-'eye-off-16.svg',
-'eye-off-24.svg',
-'f5-16.svg',
-'f5-24.svg',
-'f5-color-16.svg',
-'f5-color-24.svg',
-'fast-forward-16.svg',
-'fast-forward-24.svg',
-'file-16.svg',
-'file-24.svg',
-'file-change-16.svg',
-'file-change-24.svg',
-'file-check-16.svg',
-'file-check-24.svg',
-'file-diff-16.svg',
-'file-diff-24.svg',
-'file-fill.svg',
-'file-minus-16.svg',
-'file-minus-24.svg',
-'file-outline.svg',
-'file-plus-16.svg',
-'file-plus-24.svg',
-'file-source-16.svg',
-'file-source-24.svg',
-'file-text-16.svg',
-'file-text-24.svg',
-'file-x-16.svg',
-'file-x-24.svg',
-'files-16.svg',
-'files-24.svg',
-'film-16.svg',
-'film-24.svg',
-'filter-16.svg',
-'filter-24.svg',
-'filter-circle-16.svg',
-'filter-circle-24.svg',
-'filter-fill-16.svg',
-'filter-fill-24.svg',
-'filter.svg',
-'fingerprint-16.svg',
-'fingerprint-24.svg',
-'flag-16.svg',
-'flag-24.svg',
-'flag.svg',
-'folder-16.svg',
-'folder-24.svg',
-'folder-fill-16.svg',
-'folder-fill-24.svg',
-'folder-fill.svg',
-'folder-minus-16.svg',
-'folder-minus-24.svg',
-'folder-minus-fill-16.svg',
-'folder-minus-fill-24.svg',
-'folder-outline.svg',
-'folder-plus-16.svg',
-'folder-plus-24.svg',
-'folder-plus-fill-16.svg',
-'folder-plus-fill-24.svg',
-'folder-star-16.svg',
-'folder-star-24.svg',
-'folder-users-16.svg',
-'folder-users-24.svg',
-'frown-16.svg',
-'frown-24.svg',
-'gateway-16.svg',
-'gateway-24.svg',
-'gateway.svg',
-'gcp-16.svg',
-'gcp-24.svg',
-'gcp-color-16.svg',
-'gcp-color-24.svg',
-'gift-16.svg',
-'gift-24.svg',
-'gift-fill.svg',
-'gift-outline.svg',
-'git-branch-16.svg',
-'git-branch-24.svg',
-'git-branch.svg',
-'git-commit-16.svg',
-'git-commit-24.svg',
-'git-commit.svg',
-'git-merge-16.svg',
-'git-merge-24.svg',
-'git-pull-request-16.svg',
-'git-pull-request-24.svg',
-'git-pull-request.svg',
-'git-repo-16.svg',
-'git-repo-24.svg',
-'git-repository.svg',
-'github-16.svg',
-'github-24.svg',
-'github-color-16.svg',
-'github-color-24.svg',
-'gitlab-16.svg',
-'gitlab-24.svg',
-'gitlab-color-16.svg',
-'gitlab-color-24.svg',
-'globe-16.svg',
-'globe-24.svg',
-'globe-private-16.svg',
-'globe-private-24.svg',
-'google-16.svg',
-'google-24.svg',
-'google-color-16.svg',
-'google-color-24.svg',
-'grid-16.svg',
-'grid-24.svg',
-'grid-alt-16.svg',
-'grid-alt-24.svg',
-'guide-16.svg',
-'guide-24.svg',
-'guide-link-16.svg',
-'guide-link-24.svg',
-'guide.svg',
-'hammer-16.svg',
-'hammer-24.svg',
-'hard-drive-16.svg',
-'hard-drive-24.svg',
-'hash-16.svg',
-'hash-24.svg',
-'headphones-16.svg',
-'headphones-24.svg',
-'health.svg',
-'heart-16.svg',
-'heart-24.svg',
-'heart-fill-16.svg',
-'heart-fill-24.svg',
-'heart-off-16.svg',
-'heart-off-24.svg',
-'help-16.svg',
-'help-24.svg',
-'help-circle-fill.svg',
-'help-circle-outline.svg',
-'hexagon-16.svg',
-'hexagon-24.svg',
-'hexagon-fill-16.svg',
-'hexagon-fill-24.svg',
-'history-16.svg',
-'history-24.svg',
-'history.svg',
-'home-16.svg',
-'home-24.svg',
-'hourglass-16.svg',
-'hourglass-24.svg',
-'identity-service-16.svg',
-'identity-service-24.svg',
-'identity-user-16.svg',
-'identity-user-24.svg',
-'image-16.svg',
-'image-24.svg',
-'inbox-16.svg',
-'inbox-24.svg',
-'info-16.svg',
-'info-24.svg',
-'info-circle-fill.svg',
-'info-circle-outline.svg',
-'jump-link-16.svg',
-'jump-link-24.svg',
-'key-16.svg',
-'key-24.svg',
-'key-values-16.svg',
-'key-values-24.svg',
-'key.svg',
-'kubernetes-16.svg',
-'kubernetes-24.svg',
-'kubernetes-color-16.svg',
-'kubernetes-color-24.svg',
-'labyrinth-16.svg',
-'labyrinth-24.svg',
-'layers-16.svg',
-'layers-24.svg',
-'layers.svg',
-'layout-16.svg',
-'layout-24.svg',
-'learn-16.svg',
-'learn-24.svg',
-'learn-link-16.svg',
-'learn-link-24.svg',
-'learn.svg',
-'line-chart-16.svg',
-'line-chart-24.svg',
-'line-chart-up-16.svg',
-'line-chart-up-24.svg',
-'link-16.svg',
-'link-24.svg',
-'link.svg',
-'list-16.svg',
-'list-24.svg',
-'loading.svg',
-'lock-16.svg',
-'lock-24.svg',
-'lock-closed-fill.svg',
-'lock-closed-outline.svg',
-'lock-closed.svg',
-'lock-disabled.svg',
-'lock-fill-16.svg',
-'lock-fill-24.svg',
-'lock-off-16.svg',
-'lock-off-24.svg',
-'lock-open.svg',
-'logo-alicloud-color.svg',
-'logo-alicloud-monochrome.svg',
-'logo-auth0-color.svg',
-'logo-aws-color.svg',
-'logo-aws-monochrome.svg',
-'logo-azure-color.svg',
-'logo-azure-dev-ops-color.svg',
-'logo-azure-dev-ops-monochrome.svg',
-'logo-azure-monochrome.svg',
-'logo-bitbucket-color.svg',
-'logo-bitbucket-monochrome.svg',
-'logo-consul-color.svg',
-'logo-ember-circle-color.svg',
-'logo-gcp-color.svg',
-'logo-gcp-monochrome.svg',
-'logo-github-color.svg',
-'logo-github-monochrome.svg',
-'logo-gitlab-color.svg',
-'logo-gitlab-monochrome.svg',
-'logo-glimmer-color.svg',
-'logo-google-color.svg',
-'logo-google-monochrome.svg',
-'logo-hashicorp-color.svg',
-'logo-jwt-color.svg',
-'logo-kubernetes-color.svg',
-'logo-kubernetes-monochrome.svg',
-'logo-microsoft-color.svg',
-'logo-nomad-color.svg',
-'logo-oidc-color.svg',
-'logo-okta-color.svg',
-'logo-oracle-color.svg',
-'logo-oracle-monochrome.svg',
-'logo-slack-color.svg',
-'logo-slack-monochrome.svg',
-'logo-terraform-color.svg',
-'logo-vault-color.svg',
-'logo-vmware-color.svg',
-'logo-vmware-monochrome.svg',
-'mail-16.svg',
-'mail-24.svg',
-'mail-open-16.svg',
-'mail-open-24.svg',
-'map-16.svg',
-'map-24.svg',
-'map-pin-16.svg',
-'map-pin-24.svg',
-'maximize-16.svg',
-'maximize-24.svg',
-'maximize-alt-16.svg',
-'maximize-alt-24.svg',
-'meh-16.svg',
-'meh-24.svg',
-'menu-16.svg',
-'menu-24.svg',
-'menu.svg',
-'mesh-16.svg',
-'mesh-24.svg',
-'mesh.svg',
-'message-circle-16.svg',
-'message-circle-24.svg',
-'message-circle-fill-16.svg',
-'message-circle-fill-24.svg',
-'message-square-16.svg',
-'message-square-24.svg',
-'message-square-fill-16.svg',
-'message-square-fill-24.svg',
-'message.svg',
-'mic-16.svg',
-'mic-24.svg',
-'mic-off-16.svg',
-'mic-off-24.svg',
-'microsoft-16.svg',
-'microsoft-24.svg',
-'microsoft-color-16.svg',
-'microsoft-color-24.svg',
-'migrate-16.svg',
-'migrate-24.svg',
-'minimize-16.svg',
-'minimize-24.svg',
-'minimize-alt-16.svg',
-'minimize-alt-24.svg',
-'minus-16.svg',
-'minus-24.svg',
-'minus-circle-16.svg',
-'minus-circle-24.svg',
-'minus-circle-fill.svg',
-'minus-circle-outline.svg',
-'minus-plain.svg',
-'minus-plus-16.svg',
-'minus-plus-24.svg',
-'minus-plus-circle-16.svg',
-'minus-plus-circle-24.svg',
-'minus-plus-square-16.svg',
-'minus-plus-square-24.svg',
-'minus-square-16.svg',
-'minus-square-24.svg',
-'minus-square-fill.svg',
-'module-16.svg',
-'module-24.svg',
-'module.svg',
-'monitor-16.svg',
-'monitor-24.svg',
-'moon-16.svg',
-'moon-24.svg',
-'more-horizontal-16.svg',
-'more-horizontal-24.svg',
-'more-horizontal.svg',
-'more-vertical-16.svg',
-'more-vertical-24.svg',
-'more-vertical.svg',
-'mouse-pointer-16.svg',
-'mouse-pointer-24.svg',
-'move-16.svg',
-'move-24.svg',
-'music-16.svg',
-'music-24.svg',
-'navigation-16.svg',
-'navigation-24.svg',
-'navigation-alt-16.svg',
-'navigation-alt-24.svg',
-'network-16.svg',
-'network-24.svg',
-'network-alt-16.svg',
-'network-alt-24.svg',
-'newspaper-16.svg',
-'newspaper-24.svg',
-'node-16.svg',
-'node-24.svg',
-'notification-disabled.svg',
-'notification-fill.svg',
-'notification-outline.svg',
-'octagon-16.svg',
-'octagon-24.svg',
-'okta-16.svg',
-'okta-24.svg',
-'okta-color-16.svg',
-'okta-color-24.svg',
-'oracle-16.svg',
-'oracle-24.svg',
-'oracle-color-16.svg',
-'oracle-color-24.svg',
-'org-16.svg',
-'org-24.svg',
-'outline-16.svg',
-'outline-24.svg',
-'outline.svg',
-'package-16.svg',
-'package-24.svg',
-'page-outline.svg',
-'paperclip-16.svg',
-'paperclip-24.svg',
-'partner.svg',
-'path-16.svg',
-'path-24.svg',
-'path.svg',
-'pause-16.svg',
-'pause-24.svg',
-'pause-circle-16.svg',
-'pause-circle-24.svg',
-'pen-tool-16.svg',
-'pen-tool-24.svg',
-'pencil-tool-16.svg',
-'pencil-tool-24.svg',
-'phone-16.svg',
-'phone-24.svg',
-'phone-call-16.svg',
-'phone-call-24.svg',
-'phone-off-16.svg',
-'phone-off-24.svg',
-'pie-chart-16.svg',
-'pie-chart-24.svg',
-'pin-16.svg',
-'pin-24.svg',
-'play-16.svg',
-'play-24.svg',
-'play-circle-16.svg',
-'play-circle-24.svg',
-'play-fill.svg',
-'play-outline.svg',
-'play-plain.svg',
-'plus-16.svg',
-'plus-24.svg',
-'plus-circle-16.svg',
-'plus-circle-24.svg',
-'plus-circle-fill.svg',
-'plus-circle-outline.svg',
-'plus-plain.svg',
-'plus-square-16.svg',
-'plus-square-24.svg',
-'plus-square-fill.svg',
-'port.svg',
-'power-16.svg',
-'power-24.svg',
-'printer-16.svg',
-'printer-24.svg',
-'protocol.svg',
-'provider-16.svg',
-'provider-24.svg',
-'provider.svg',
-'public-default.svg',
-'public-locked.svg',
-'queue-16.svg',
-'queue-24.svg',
-'queue.svg',
-'radio-16.svg',
-'radio-24.svg',
-'radio-button-checked.svg',
-'radio-button-unchecked.svg',
-'random-16.svg',
-'random-24.svg',
-'random.svg',
-'redirect-16.svg',
-'redirect-24.svg',
-'redirect.svg',
-'refresh-alert.svg',
-'refresh-default.svg',
-'reload-16.svg',
-'reload-24.svg',
-'remix.svg',
-'repeat-16.svg',
-'repeat-24.svg',
-'replication-direct-16.svg',
-'replication-direct-24.svg',
-'replication-perf-16.svg',
-'replication-perf-24.svg',
-'rewind-16.svg',
-'rewind-24.svg',
-'ribbon.svg',
-'rocket-16.svg',
-'rocket-24.svg',
-'rotate-ccw-16.svg',
-'rotate-ccw-24.svg',
-'rotate-cw-16.svg',
-'rotate-cw-24.svg',
-'rss-16.svg',
-'rss-24.svg',
-'run.svg',
-'save-16.svg',
-'save-24.svg',
-'scissors-16.svg',
-'scissors-24.svg',
-'search-16.svg',
-'search-24.svg',
-'search-color.svg',
-'search.svg',
-'send-16.svg',
-'send-24.svg',
-'server-16.svg',
-'server-24.svg',
-'server-cluster-16.svg',
-'server-cluster-24.svg',
-'serverless-16.svg',
-'serverless-24.svg',
-'settings-16.svg',
-'settings-24.svg',
-'settings.svg',
-'share-16.svg',
-'share-24.svg',
-'shield-16.svg',
-'shield-24.svg',
-'shield-alert-16.svg',
-'shield-alert-24.svg',
-'shield-check-16.svg',
-'shield-check-24.svg',
-'shield-off-16.svg',
-'shield-off-24.svg',
-'shield-x-16.svg',
-'shield-x-24.svg',
-'shopping-bag-16.svg',
-'shopping-bag-24.svg',
-'shopping-cart-16.svg',
-'shopping-cart-24.svg',
-'shuffle-16.svg',
-'shuffle-24.svg',
-'sidebar-16.svg',
-'sidebar-24.svg',
-'sidebar-hide-16.svg',
-'sidebar-hide-24.svg',
-'sidebar-show-16.svg',
-'sidebar-show-24.svg',
-'sign-in-16.svg',
-'sign-in-24.svg',
-'sign-out-16.svg',
-'sign-out-24.svg',
-'skip-16.svg',
-'skip-24.svg',
-'skip-back-16.svg',
-'skip-back-24.svg',
-'skip-forward-16.svg',
-'skip-forward-24.svg',
-'slack-16.svg',
-'slack-24.svg',
-'slack-color-16.svg',
-'slack-color-24.svg',
-'slash-16.svg',
-'slash-24.svg',
-'slash-square-16.svg',
-'slash-square-24.svg',
-'sliders-16.svg',
-'sliders-24.svg',
-'smartphone-16.svg',
-'smartphone-24.svg',
-'smile-16.svg',
-'smile-24.svg',
-'socket-16.svg',
-'socket-24.svg',
-'socket.svg',
-'sort-asc-16.svg',
-'sort-asc-24.svg',
-'sort-desc-16.svg',
-'sort-desc-24.svg',
-'sort.svg',
-'source-file.svg',
-'speaker-16.svg',
-'speaker-24.svg',
-'square-16.svg',
-'square-24.svg',
-'square-fill-16.svg',
-'square-fill-24.svg',
-'star-16.svg',
-'star-24.svg',
-'star-circle-16.svg',
-'star-circle-24.svg',
-'star-fill-16.svg',
-'star-fill-24.svg',
-'star-fill.svg',
-'star-off-16.svg',
-'star-off-24.svg',
-'star-outline.svg',
-'stop-circle-16.svg',
-'stop-circle-24.svg',
-'sub-left.svg',
-'sub-right.svg',
-'sun-16.svg',
-'sun-24.svg',
-'support-16.svg',
-'support-24.svg',
-'support.svg',
-'swap-horizontal-16.svg',
-'swap-horizontal-24.svg',
-'swap-horizontal.svg',
-'swap-vertical-16.svg',
-'swap-vertical-24.svg',
-'swap-vertical.svg',
-'switcher-16.svg',
-'switcher-24.svg',
-'sync-16.svg',
-'sync-24.svg',
-'sync-alert-16.svg',
-'sync-alert-24.svg',
-'sync-reverse-16.svg',
-'sync-reverse-24.svg',
-'tablet-16.svg',
-'tablet-24.svg',
-'tag-16.svg',
-'tag-24.svg',
-'tag.svg',
-'target-16.svg',
-'target-24.svg',
-'terminal-16.svg',
-'terminal-24.svg',
-'terminal-screen-16.svg',
-'terminal-screen-24.svg',
-'thumbs-down-16.svg',
-'thumbs-down-24.svg',
-'thumbs-up-16.svg',
-'thumbs-up-24.svg',
-'toggle-left-16.svg',
-'toggle-left-24.svg',
-'toggle-right-16.svg',
-'toggle-right-24.svg',
-'token-16.svg',
-'token-24.svg',
-'tools-16.svg',
-'tools-24.svg',
-'top-16.svg',
-'top-24.svg',
-'trash-16.svg',
-'trash-24.svg',
-'trash.svg',
-'trend-down-16.svg',
-'trend-down-24.svg',
-'trend-up-16.svg',
-'trend-up-24.svg',
-'triangle-16.svg',
-'triangle-24.svg',
-'triangle-fill-16.svg',
-'triangle-fill-24.svg',
-'truck-16.svg',
-'truck-24.svg',
-'tune.svg',
-'tv-16.svg',
-'tv-24.svg',
-'type-16.svg',
-'type-24.svg',
-'unfold-close-16.svg',
-'unfold-close-24.svg',
-'unfold-less.svg',
-'unfold-more.svg',
-'unfold-open-16.svg',
-'unfold-open-24.svg',
-'unlock-16.svg',
-'unlock-24.svg',
-'upload-16.svg',
-'upload-24.svg',
-'upload.svg',
-'user-16.svg',
-'user-24.svg',
-'user-add.svg',
-'user-check-16.svg',
-'user-check-24.svg',
-'user-circle-16.svg',
-'user-circle-24.svg',
-'user-circle-fill-16.svg',
-'user-circle-fill-24.svg',
-'user-minus-16.svg',
-'user-minus-24.svg',
-'user-organization.svg',
-'user-plain.svg',
-'user-plus-16.svg',
-'user-plus-24.svg',
-'user-square-fill.svg',
-'user-square-outline.svg',
-'user-team.svg',
-'user-x-16.svg',
-'user-x-24.svg',
-'users-16.svg',
-'users-24.svg',
-'vault-16.svg',
-'vault-24.svg',
-'verified-16.svg',
-'verified-24.svg',
-'video-16.svg',
-'video-24.svg',
-'video-off-16.svg',
-'video-off-24.svg',
-'visibility-hide.svg',
-'visibility-show.svg',
-'vmware-16.svg',
-'vmware-24.svg',
-'vmware-color-16.svg',
-'vmware-color-24.svg',
-'volume-16.svg',
-'volume-2-16.svg',
-'volume-2-24.svg',
-'volume-24.svg',
-'volume-down-16.svg',
-'volume-down-24.svg',
-'volume-x-16.svg',
-'volume-x-24.svg',
-'wall-16.svg',
-'wall-24.svg',
-'watch-16.svg',
-'watch-24.svg',
-'webhook-16.svg',
-'webhook-24.svg',
-'webhook.svg',
-'wifi-16.svg',
-'wifi-24.svg',
-'wifi-off-16.svg',
-'wifi-off-24.svg',
-'wrench-16.svg',
-'wrench-24.svg',
-'x-16.svg',
-'x-24.svg',
-'x-circle-16.svg',
-'x-circle-24.svg',
-'x-circle-fill-16.svg',
-'x-circle-fill-24.svg',
-'x-diamond-16.svg',
-'x-diamond-24.svg',
-'x-diamond-fill-16.svg',
-'x-diamond-fill-24.svg',
-'x-hexagon-16.svg',
-'x-hexagon-24.svg',
-'x-hexagon-fill-16.svg',
-'x-hexagon-fill-24.svg',
-'x-square-16.svg',
-'x-square-24.svg',
-'x-square-fill-16.svg',
-'x-square-fill-24.svg',
-'zap-16.svg',
-'zap-24.svg',
-'zap-off-16.svg',
-'zap-off-24.svg',
-'zoom-in-16.svg',
-'zoom-in-24.svg',
-'zoom-out-16.svg',
-'zoom-out-24.svg'
-
-  ].filter(item => {
-    const sized = item.endsWith('-16.svg') || item.endsWith('-24.svg');
-    return lib === 'structure' ? !sized : sized;
-  }).map(item => {
-    const temp = item.split('.');
-    temp.pop();
-    const name = temp.join('.');
-    let placeholder = `with-${name}`;
-      if(name.indexOf('-color') !== -1) {
+    'activity-24.svg',
+    'alert-circle-16.svg',
+    'alert-circle-24.svg',
+    'alert-circle-fill-16.svg',
+    'alert-circle-fill-24.svg',
+    'alert-circle-fill.svg',
+    'alert-circle-outline.svg',
+    'alert-octagon-16.svg',
+    'alert-octagon-24.svg',
+    'alert-octagon-fill-16.svg',
+    'alert-octagon-fill-24.svg',
+    'alert-triangle-16.svg',
+    'alert-triangle-24.svg',
+    'alert-triangle-fill-16.svg',
+    'alert-triangle-fill-24.svg',
+    'alert-triangle.svg',
+    'alibaba-16.svg',
+    'alibaba-24.svg',
+    'alibaba-color-16.svg',
+    'alibaba-color-24.svg',
+    'align-center-16.svg',
+    'align-center-24.svg',
+    'align-justify-16.svg',
+    'align-justify-24.svg',
+    'align-left-16.svg',
+    'align-left-24.svg',
+    'align-right-16.svg',
+    'align-right-24.svg',
+    'apple-16.svg',
+    'apple-24.svg',
+    'apple-color-16.svg',
+    'apple-color-24.svg',
+    'archive-16.svg',
+    'archive-24.svg',
+    'arrow-down-16.svg',
+    'arrow-down-24.svg',
+    'arrow-down-circle-16.svg',
+    'arrow-down-circle-24.svg',
+    'arrow-down-left-16.svg',
+    'arrow-down-left-24.svg',
+    'arrow-down-right-16.svg',
+    'arrow-down-right-24.svg',
+    'arrow-down.svg',
+    'arrow-left-16.svg',
+    'arrow-left-24.svg',
+    'arrow-left-circle-16.svg',
+    'arrow-left-circle-24.svg',
+    'arrow-left.svg',
+    'arrow-right-16.svg',
+    'arrow-right-24.svg',
+    'arrow-right-circle-16.svg',
+    'arrow-right-circle-24.svg',
+    'arrow-right.svg',
+    'arrow-up-16.svg',
+    'arrow-up-24.svg',
+    'arrow-up-circle-16.svg',
+    'arrow-up-circle-24.svg',
+    'arrow-up-left-16.svg',
+    'arrow-up-left-24.svg',
+    'arrow-up-right-16.svg',
+    'arrow-up-right-24.svg',
+    'arrow-up.svg',
+    'at-sign-16.svg',
+    'at-sign-24.svg',
+    'auth0-16.svg',
+    'auth0-24.svg',
+    'auth0-color-16.svg',
+    'auth0-color-24.svg',
+    'auto-apply-16.svg',
+    'auto-apply-24.svg',
+    'award-16.svg',
+    'award-24.svg',
+    'aws-16.svg',
+    'aws-24.svg',
+    'aws-color-16.svg',
+    'aws-color-24.svg',
+    'azure-16.svg',
+    'azure-24.svg',
+    'azure-color-16.svg',
+    'azure-color-24.svg',
+    'azure-devops-16.svg',
+    'azure-devops-24.svg',
+    'azure-devops-color-16.svg',
+    'azure-devops-color-24.svg',
+    'bar-chart-16.svg',
+    'bar-chart-24.svg',
+    'bar-chart-alt-16.svg',
+    'bar-chart-alt-24.svg',
+    'battery-16.svg',
+    'battery-24.svg',
+    'battery-charging-16.svg',
+    'battery-charging-24.svg',
+    'beaker-16.svg',
+    'beaker-24.svg',
+    'bell-16.svg',
+    'bell-24.svg',
+    'bell-active-16.svg',
+    'bell-active-24.svg',
+    'bell-active-fill-16.svg',
+    'bell-active-fill-24.svg',
+    'bell-off-16.svg',
+    'bell-off-24.svg',
+    'bitbucket-16.svg',
+    'bitbucket-24.svg',
+    'bitbucket-color-16.svg',
+    'bitbucket-color-24.svg',
+    'bolt.svg',
+    'bookmark-16.svg',
+    'bookmark-24.svg',
+    'bookmark-add-16.svg',
+    'bookmark-add-24.svg',
+    'bookmark-add-fill-16.svg',
+    'bookmark-add-fill-24.svg',
+    'bookmark-fill-16.svg',
+    'bookmark-fill-24.svg',
+    'bookmark-remove-16.svg',
+    'bookmark-remove-24.svg',
+    'bookmark-remove-fill-16.svg',
+    'bookmark-remove-fill-24.svg',
+    'bottom-16.svg',
+    'bottom-24.svg',
+    'box-16.svg',
+    'box-24.svg',
+    'box-check-fill.svg',
+    'box-outline.svg',
+    'briefcase-16.svg',
+    'briefcase-24.svg',
+    'broadcast.svg',
+    'bug-16.svg',
+    'bug-24.svg',
+    'bug.svg',
+    'build-16.svg',
+    'build-24.svg',
+    'calendar-16.svg',
+    'calendar-24.svg',
+    'calendar.svg',
+    'camera-16.svg',
+    'camera-24.svg',
+    'camera-off-16.svg',
+    'camera-off-24.svg',
+    'cancel-circle-fill.svg',
+    'cancel-circle-outline.svg',
+    'cancel-plain.svg',
+    'cancel-square-fill.svg',
+    'cancel-square-outline.svg',
+    'caret-16.svg',
+    'caret-24.svg',
+    'caret-down.svg',
+    'caret-up.svg',
+    'cast-16.svg',
+    'cast-24.svg',
+    'certificate-16.svg',
+    'certificate-24.svg',
+    'change-16.svg',
+    'change-24.svg',
+    'change-circle-16.svg',
+    'change-circle-24.svg',
+    'change-square-16.svg',
+    'change-square-24.svg',
+    'check-16.svg',
+    'check-24.svg',
+    'check-circle-16.svg',
+    'check-circle-24.svg',
+    'check-circle-fill-16.svg',
+    'check-circle-fill-24.svg',
+    'check-circle-fill.svg',
+    'check-circle-outline.svg',
+    'check-diamond-16.svg',
+    'check-diamond-24.svg',
+    'check-diamond-fill-16.svg',
+    'check-diamond-fill-24.svg',
+    'check-hexagon-16.svg',
+    'check-hexagon-24.svg',
+    'check-hexagon-fill-16.svg',
+    'check-hexagon-fill-24.svg',
+    'check-plain.svg',
+    'check-square-16.svg',
+    'check-square-24.svg',
+    'check-square-fill-16.svg',
+    'check-square-fill-24.svg',
+    'chevron-down-16.svg',
+    'chevron-down-24.svg',
+    'chevron-down.svg',
+    'chevron-left-16.svg',
+    'chevron-left-24.svg',
+    'chevron-left.svg',
+    'chevron-right-16.svg',
+    'chevron-right-24.svg',
+    'chevron-right.svg',
+    'chevron-up-16.svg',
+    'chevron-up-24.svg',
+    'chevron-up.svg',
+    'chevrons-down-16.svg',
+    'chevrons-down-24.svg',
+    'chevrons-left-16.svg',
+    'chevrons-left-24.svg',
+    'chevrons-right-16.svg',
+    'chevrons-right-24.svg',
+    'chevrons-up-16.svg',
+    'chevrons-up-24.svg',
+    'circle-16.svg',
+    'circle-24.svg',
+    'circle-dot-16.svg',
+    'circle-dot-24.svg',
+    'circle-fill-16.svg',
+    'circle-fill-24.svg',
+    'circle-half-16.svg',
+    'circle-half-24.svg',
+    'clipboard-16.svg',
+    'clipboard-24.svg',
+    'clipboard-checked-16.svg',
+    'clipboard-checked-24.svg',
+    'clipboard-copy-16.svg',
+    'clipboard-copy-24.svg',
+    'clock-16.svg',
+    'clock-24.svg',
+    'clock-fill.svg',
+    'clock-outline.svg',
+    'cloud-16.svg',
+    'cloud-24.svg',
+    'cloud-check-16.svg',
+    'cloud-check-24.svg',
+    'cloud-cross.svg',
+    'cloud-download-16.svg',
+    'cloud-download-24.svg',
+    'cloud-lightning-16.svg',
+    'cloud-lightning-24.svg',
+    'cloud-lock-16.svg',
+    'cloud-lock-24.svg',
+    'cloud-off-16.svg',
+    'cloud-off-24.svg',
+    'cloud-upload-16.svg',
+    'cloud-upload-24.svg',
+    'cloud-x-16.svg',
+    'cloud-x-24.svg',
+    'code-16.svg',
+    'code-24.svg',
+    'code.svg',
+    'collections-16.svg',
+    'collections-24.svg',
+    'command-16.svg',
+    'command-24.svg',
+    'compass-16.svg',
+    'compass-24.svg',
+    'connection-16.svg',
+    'connection-24.svg',
+    'connection-gateway-16.svg',
+    'connection-gateway-24.svg',
+    'console.svg',
+    'copy-action.svg',
+    'copy-success.svg',
+    'corner-down-left-16.svg',
+    'corner-down-left-24.svg',
+    'corner-down-right-16.svg',
+    'corner-down-right-24.svg',
+    'corner-left-down-16.svg',
+    'corner-left-down-24.svg',
+    'corner-left-up-16.svg',
+    'corner-left-up-24.svg',
+    'corner-right-down-16.svg',
+    'corner-right-down-24.svg',
+    'corner-right-up-16.svg',
+    'corner-right-up-24.svg',
+    'corner-up-left-16.svg',
+    'corner-up-left-24.svg',
+    'corner-up-right-16.svg',
+    'corner-up-right-24.svg',
+    'cpu-16.svg',
+    'cpu-24.svg',
+    'credit-card-16.svg',
+    'credit-card-24.svg',
+    'crop-16.svg',
+    'crop-24.svg',
+    'crosshair-16.svg',
+    'crosshair-24.svg',
+    'dashboard-16.svg',
+    'dashboard-24.svg',
+    'database-16.svg',
+    'database-24.svg',
+    'database.svg',
+    'delay-16.svg',
+    'delay-24.svg',
+    'delay.svg',
+    'delete-16.svg',
+    'delete-24.svg',
+    'deny-alt.svg',
+    'deny-color.svg',
+    'deny-default.svg',
+    'diamond-16.svg',
+    'diamond-24.svg',
+    'diamond-fill-16.svg',
+    'diamond-fill-24.svg',
+    'disabled.svg',
+    'disc-16.svg',
+    'disc-24.svg',
+    'discussion-circle-16.svg',
+    'discussion-circle-24.svg',
+    'discussion-square-16.svg',
+    'discussion-square-24.svg',
+    'docker-16.svg',
+    'docker-24.svg',
+    'docker-color-16.svg',
+    'docker-color-24.svg',
+    'docs-16.svg',
+    'docs-24.svg',
+    'docs-download-16.svg',
+    'docs-download-24.svg',
+    'docs-link-16.svg',
+    'docs-link-24.svg',
+    'docs.svg',
+    'dollar-sign-16.svg',
+    'dollar-sign-24.svg',
+    'dot-16.svg',
+    'dot-24.svg',
+    'dot-half-16.svg',
+    'dot-half-24.svg',
+    'download-16.svg',
+    'download-24.svg',
+    'download.svg',
+    'droplet-16.svg',
+    'droplet-24.svg',
+    'duplicate-16.svg',
+    'duplicate-24.svg',
+    'edit-16.svg',
+    'edit-24.svg',
+    'edit.svg',
+    'entry-point-16.svg',
+    'entry-point-24.svg',
+    'envelope-sealed-fill.svg',
+    'envelope-sealed-outline.svg',
+    'envelope-unsealed--outline.svg',
+    'envelope-unsealed-fill.svg',
+    'event-16.svg',
+    'event-24.svg',
+    'exit-point-16.svg',
+    'exit-point-24.svg',
+    'exit.svg',
+    'expand-less.svg',
+    'expand-more.svg',
+    'external-link-16.svg',
+    'external-link-24.svg',
+    'eye-16.svg',
+    'eye-24.svg',
+    'eye-off-16.svg',
+    'eye-off-24.svg',
+    'f5-16.svg',
+    'f5-24.svg',
+    'f5-color-16.svg',
+    'f5-color-24.svg',
+    'fast-forward-16.svg',
+    'fast-forward-24.svg',
+    'file-16.svg',
+    'file-24.svg',
+    'file-change-16.svg',
+    'file-change-24.svg',
+    'file-check-16.svg',
+    'file-check-24.svg',
+    'file-diff-16.svg',
+    'file-diff-24.svg',
+    'file-fill.svg',
+    'file-minus-16.svg',
+    'file-minus-24.svg',
+    'file-outline.svg',
+    'file-plus-16.svg',
+    'file-plus-24.svg',
+    'file-source-16.svg',
+    'file-source-24.svg',
+    'file-text-16.svg',
+    'file-text-24.svg',
+    'file-x-16.svg',
+    'file-x-24.svg',
+    'files-16.svg',
+    'files-24.svg',
+    'film-16.svg',
+    'film-24.svg',
+    'filter-16.svg',
+    'filter-24.svg',
+    'filter-circle-16.svg',
+    'filter-circle-24.svg',
+    'filter-fill-16.svg',
+    'filter-fill-24.svg',
+    'filter.svg',
+    'fingerprint-16.svg',
+    'fingerprint-24.svg',
+    'flag-16.svg',
+    'flag-24.svg',
+    'flag.svg',
+    'folder-16.svg',
+    'folder-24.svg',
+    'folder-fill-16.svg',
+    'folder-fill-24.svg',
+    'folder-fill.svg',
+    'folder-minus-16.svg',
+    'folder-minus-24.svg',
+    'folder-minus-fill-16.svg',
+    'folder-minus-fill-24.svg',
+    'folder-outline.svg',
+    'folder-plus-16.svg',
+    'folder-plus-24.svg',
+    'folder-plus-fill-16.svg',
+    'folder-plus-fill-24.svg',
+    'folder-star-16.svg',
+    'folder-star-24.svg',
+    'folder-users-16.svg',
+    'folder-users-24.svg',
+    'frown-16.svg',
+    'frown-24.svg',
+    'gateway-16.svg',
+    'gateway-24.svg',
+    'gateway.svg',
+    'gcp-16.svg',
+    'gcp-24.svg',
+    'gcp-color-16.svg',
+    'gcp-color-24.svg',
+    'gift-16.svg',
+    'gift-24.svg',
+    'gift-fill.svg',
+    'gift-outline.svg',
+    'git-branch-16.svg',
+    'git-branch-24.svg',
+    'git-branch.svg',
+    'git-commit-16.svg',
+    'git-commit-24.svg',
+    'git-commit.svg',
+    'git-merge-16.svg',
+    'git-merge-24.svg',
+    'git-pull-request-16.svg',
+    'git-pull-request-24.svg',
+    'git-pull-request.svg',
+    'git-repo-16.svg',
+    'git-repo-24.svg',
+    'git-repository.svg',
+    'github-16.svg',
+    'github-24.svg',
+    'github-color-16.svg',
+    'github-color-24.svg',
+    'gitlab-16.svg',
+    'gitlab-24.svg',
+    'gitlab-color-16.svg',
+    'gitlab-color-24.svg',
+    'globe-16.svg',
+    'globe-24.svg',
+    'globe-private-16.svg',
+    'globe-private-24.svg',
+    'google-16.svg',
+    'google-24.svg',
+    'google-color-16.svg',
+    'google-color-24.svg',
+    'grid-16.svg',
+    'grid-24.svg',
+    'grid-alt-16.svg',
+    'grid-alt-24.svg',
+    'guide-16.svg',
+    'guide-24.svg',
+    'guide-link-16.svg',
+    'guide-link-24.svg',
+    'guide.svg',
+    'hammer-16.svg',
+    'hammer-24.svg',
+    'hard-drive-16.svg',
+    'hard-drive-24.svg',
+    'hash-16.svg',
+    'hash-24.svg',
+    'headphones-16.svg',
+    'headphones-24.svg',
+    'health.svg',
+    'heart-16.svg',
+    'heart-24.svg',
+    'heart-fill-16.svg',
+    'heart-fill-24.svg',
+    'heart-off-16.svg',
+    'heart-off-24.svg',
+    'help-16.svg',
+    'help-24.svg',
+    'help-circle-fill.svg',
+    'help-circle-outline.svg',
+    'hexagon-16.svg',
+    'hexagon-24.svg',
+    'hexagon-fill-16.svg',
+    'hexagon-fill-24.svg',
+    'history-16.svg',
+    'history-24.svg',
+    'history.svg',
+    'home-16.svg',
+    'home-24.svg',
+    'hourglass-16.svg',
+    'hourglass-24.svg',
+    'identity-service-16.svg',
+    'identity-service-24.svg',
+    'identity-user-16.svg',
+    'identity-user-24.svg',
+    'image-16.svg',
+    'image-24.svg',
+    'inbox-16.svg',
+    'inbox-24.svg',
+    'info-16.svg',
+    'info-24.svg',
+    'info-circle-fill.svg',
+    'info-circle-outline.svg',
+    'jump-link-16.svg',
+    'jump-link-24.svg',
+    'key-16.svg',
+    'key-24.svg',
+    'key-values-16.svg',
+    'key-values-24.svg',
+    'key.svg',
+    'kubernetes-16.svg',
+    'kubernetes-24.svg',
+    'kubernetes-color-16.svg',
+    'kubernetes-color-24.svg',
+    'labyrinth-16.svg',
+    'labyrinth-24.svg',
+    'layers-16.svg',
+    'layers-24.svg',
+    'layers.svg',
+    'layout-16.svg',
+    'layout-24.svg',
+    'learn-16.svg',
+    'learn-24.svg',
+    'learn-link-16.svg',
+    'learn-link-24.svg',
+    'learn.svg',
+    'line-chart-16.svg',
+    'line-chart-24.svg',
+    'line-chart-up-16.svg',
+    'line-chart-up-24.svg',
+    'link-16.svg',
+    'link-24.svg',
+    'link.svg',
+    'list-16.svg',
+    'list-24.svg',
+    'loading.svg',
+    'lock-16.svg',
+    'lock-24.svg',
+    'lock-closed-fill.svg',
+    'lock-closed-outline.svg',
+    'lock-closed.svg',
+    'lock-disabled.svg',
+    'lock-fill-16.svg',
+    'lock-fill-24.svg',
+    'lock-off-16.svg',
+    'lock-off-24.svg',
+    'lock-open.svg',
+    'logo-alicloud-color.svg',
+    'logo-alicloud-monochrome.svg',
+    'logo-auth0-color.svg',
+    'logo-aws-color.svg',
+    'logo-aws-monochrome.svg',
+    'logo-azure-color.svg',
+    'logo-azure-dev-ops-color.svg',
+    'logo-azure-dev-ops-monochrome.svg',
+    'logo-azure-monochrome.svg',
+    'logo-bitbucket-color.svg',
+    'logo-bitbucket-monochrome.svg',
+    'logo-consul-color.svg',
+    'logo-ember-circle-color.svg',
+    'logo-gcp-color.svg',
+    'logo-gcp-monochrome.svg',
+    'logo-github-color.svg',
+    'logo-github-monochrome.svg',
+    'logo-gitlab-color.svg',
+    'logo-gitlab-monochrome.svg',
+    'logo-glimmer-color.svg',
+    'logo-google-color.svg',
+    'logo-google-monochrome.svg',
+    'logo-hashicorp-color.svg',
+    'logo-jwt-color.svg',
+    'logo-kubernetes-color.svg',
+    'logo-kubernetes-monochrome.svg',
+    'logo-microsoft-color.svg',
+    'logo-nomad-color.svg',
+    'logo-oidc-color.svg',
+    'logo-okta-color.svg',
+    'logo-oracle-color.svg',
+    'logo-oracle-monochrome.svg',
+    'logo-slack-color.svg',
+    'logo-slack-monochrome.svg',
+    'logo-terraform-color.svg',
+    'logo-vault-color.svg',
+    'logo-vmware-color.svg',
+    'logo-vmware-monochrome.svg',
+    'mail-16.svg',
+    'mail-24.svg',
+    'mail-open-16.svg',
+    'mail-open-24.svg',
+    'map-16.svg',
+    'map-24.svg',
+    'map-pin-16.svg',
+    'map-pin-24.svg',
+    'maximize-16.svg',
+    'maximize-24.svg',
+    'maximize-alt-16.svg',
+    'maximize-alt-24.svg',
+    'meh-16.svg',
+    'meh-24.svg',
+    'menu-16.svg',
+    'menu-24.svg',
+    'menu.svg',
+    'mesh-16.svg',
+    'mesh-24.svg',
+    'mesh.svg',
+    'message-circle-16.svg',
+    'message-circle-24.svg',
+    'message-circle-fill-16.svg',
+    'message-circle-fill-24.svg',
+    'message-square-16.svg',
+    'message-square-24.svg',
+    'message-square-fill-16.svg',
+    'message-square-fill-24.svg',
+    'message.svg',
+    'mic-16.svg',
+    'mic-24.svg',
+    'mic-off-16.svg',
+    'mic-off-24.svg',
+    'microsoft-16.svg',
+    'microsoft-24.svg',
+    'microsoft-color-16.svg',
+    'microsoft-color-24.svg',
+    'migrate-16.svg',
+    'migrate-24.svg',
+    'minimize-16.svg',
+    'minimize-24.svg',
+    'minimize-alt-16.svg',
+    'minimize-alt-24.svg',
+    'minus-16.svg',
+    'minus-24.svg',
+    'minus-circle-16.svg',
+    'minus-circle-24.svg',
+    'minus-circle-fill.svg',
+    'minus-circle-outline.svg',
+    'minus-plain.svg',
+    'minus-plus-16.svg',
+    'minus-plus-24.svg',
+    'minus-plus-circle-16.svg',
+    'minus-plus-circle-24.svg',
+    'minus-plus-square-16.svg',
+    'minus-plus-square-24.svg',
+    'minus-square-16.svg',
+    'minus-square-24.svg',
+    'minus-square-fill.svg',
+    'module-16.svg',
+    'module-24.svg',
+    'module.svg',
+    'monitor-16.svg',
+    'monitor-24.svg',
+    'moon-16.svg',
+    'moon-24.svg',
+    'more-horizontal-16.svg',
+    'more-horizontal-24.svg',
+    'more-horizontal.svg',
+    'more-vertical-16.svg',
+    'more-vertical-24.svg',
+    'more-vertical.svg',
+    'mouse-pointer-16.svg',
+    'mouse-pointer-24.svg',
+    'move-16.svg',
+    'move-24.svg',
+    'music-16.svg',
+    'music-24.svg',
+    'navigation-16.svg',
+    'navigation-24.svg',
+    'navigation-alt-16.svg',
+    'navigation-alt-24.svg',
+    'network-16.svg',
+    'network-24.svg',
+    'network-alt-16.svg',
+    'network-alt-24.svg',
+    'newspaper-16.svg',
+    'newspaper-24.svg',
+    'node-16.svg',
+    'node-24.svg',
+    'notification-disabled.svg',
+    'notification-fill.svg',
+    'notification-outline.svg',
+    'octagon-16.svg',
+    'octagon-24.svg',
+    'okta-16.svg',
+    'okta-24.svg',
+    'okta-color-16.svg',
+    'okta-color-24.svg',
+    'oracle-16.svg',
+    'oracle-24.svg',
+    'oracle-color-16.svg',
+    'oracle-color-24.svg',
+    'org-16.svg',
+    'org-24.svg',
+    'outline-16.svg',
+    'outline-24.svg',
+    'outline.svg',
+    'package-16.svg',
+    'package-24.svg',
+    'page-outline.svg',
+    'paperclip-16.svg',
+    'paperclip-24.svg',
+    'partner.svg',
+    'path-16.svg',
+    'path-24.svg',
+    'path.svg',
+    'pause-16.svg',
+    'pause-24.svg',
+    'pause-circle-16.svg',
+    'pause-circle-24.svg',
+    'pen-tool-16.svg',
+    'pen-tool-24.svg',
+    'pencil-tool-16.svg',
+    'pencil-tool-24.svg',
+    'phone-16.svg',
+    'phone-24.svg',
+    'phone-call-16.svg',
+    'phone-call-24.svg',
+    'phone-off-16.svg',
+    'phone-off-24.svg',
+    'pie-chart-16.svg',
+    'pie-chart-24.svg',
+    'pin-16.svg',
+    'pin-24.svg',
+    'play-16.svg',
+    'play-24.svg',
+    'play-circle-16.svg',
+    'play-circle-24.svg',
+    'play-fill.svg',
+    'play-outline.svg',
+    'play-plain.svg',
+    'plus-16.svg',
+    'plus-24.svg',
+    'plus-circle-16.svg',
+    'plus-circle-24.svg',
+    'plus-circle-fill.svg',
+    'plus-circle-outline.svg',
+    'plus-plain.svg',
+    'plus-square-16.svg',
+    'plus-square-24.svg',
+    'plus-square-fill.svg',
+    'port.svg',
+    'power-16.svg',
+    'power-24.svg',
+    'printer-16.svg',
+    'printer-24.svg',
+    'protocol.svg',
+    'provider-16.svg',
+    'provider-24.svg',
+    'provider.svg',
+    'public-default.svg',
+    'public-locked.svg',
+    'queue-16.svg',
+    'queue-24.svg',
+    'queue.svg',
+    'radio-16.svg',
+    'radio-24.svg',
+    'radio-button-checked.svg',
+    'radio-button-unchecked.svg',
+    'random-16.svg',
+    'random-24.svg',
+    'random.svg',
+    'redirect-16.svg',
+    'redirect-24.svg',
+    'redirect.svg',
+    'refresh-alert.svg',
+    'refresh-default.svg',
+    'reload-16.svg',
+    'reload-24.svg',
+    'remix.svg',
+    'repeat-16.svg',
+    'repeat-24.svg',
+    'replication-direct-16.svg',
+    'replication-direct-24.svg',
+    'replication-perf-16.svg',
+    'replication-perf-24.svg',
+    'rewind-16.svg',
+    'rewind-24.svg',
+    'ribbon.svg',
+    'rocket-16.svg',
+    'rocket-24.svg',
+    'rotate-ccw-16.svg',
+    'rotate-ccw-24.svg',
+    'rotate-cw-16.svg',
+    'rotate-cw-24.svg',
+    'rss-16.svg',
+    'rss-24.svg',
+    'run.svg',
+    'save-16.svg',
+    'save-24.svg',
+    'scissors-16.svg',
+    'scissors-24.svg',
+    'search-16.svg',
+    'search-24.svg',
+    'search-color.svg',
+    'search.svg',
+    'send-16.svg',
+    'send-24.svg',
+    'server-16.svg',
+    'server-24.svg',
+    'server-cluster-16.svg',
+    'server-cluster-24.svg',
+    'serverless-16.svg',
+    'serverless-24.svg',
+    'settings-16.svg',
+    'settings-24.svg',
+    'settings.svg',
+    'share-16.svg',
+    'share-24.svg',
+    'shield-16.svg',
+    'shield-24.svg',
+    'shield-alert-16.svg',
+    'shield-alert-24.svg',
+    'shield-check-16.svg',
+    'shield-check-24.svg',
+    'shield-off-16.svg',
+    'shield-off-24.svg',
+    'shield-x-16.svg',
+    'shield-x-24.svg',
+    'shopping-bag-16.svg',
+    'shopping-bag-24.svg',
+    'shopping-cart-16.svg',
+    'shopping-cart-24.svg',
+    'shuffle-16.svg',
+    'shuffle-24.svg',
+    'sidebar-16.svg',
+    'sidebar-24.svg',
+    'sidebar-hide-16.svg',
+    'sidebar-hide-24.svg',
+    'sidebar-show-16.svg',
+    'sidebar-show-24.svg',
+    'sign-in-16.svg',
+    'sign-in-24.svg',
+    'sign-out-16.svg',
+    'sign-out-24.svg',
+    'skip-16.svg',
+    'skip-24.svg',
+    'skip-back-16.svg',
+    'skip-back-24.svg',
+    'skip-forward-16.svg',
+    'skip-forward-24.svg',
+    'slack-16.svg',
+    'slack-24.svg',
+    'slack-color-16.svg',
+    'slack-color-24.svg',
+    'slash-16.svg',
+    'slash-24.svg',
+    'slash-square-16.svg',
+    'slash-square-24.svg',
+    'sliders-16.svg',
+    'sliders-24.svg',
+    'smartphone-16.svg',
+    'smartphone-24.svg',
+    'smile-16.svg',
+    'smile-24.svg',
+    'socket-16.svg',
+    'socket-24.svg',
+    'socket.svg',
+    'sort-asc-16.svg',
+    'sort-asc-24.svg',
+    'sort-desc-16.svg',
+    'sort-desc-24.svg',
+    'sort.svg',
+    'source-file.svg',
+    'speaker-16.svg',
+    'speaker-24.svg',
+    'square-16.svg',
+    'square-24.svg',
+    'square-fill-16.svg',
+    'square-fill-24.svg',
+    'star-16.svg',
+    'star-24.svg',
+    'star-circle-16.svg',
+    'star-circle-24.svg',
+    'star-fill-16.svg',
+    'star-fill-24.svg',
+    'star-fill.svg',
+    'star-off-16.svg',
+    'star-off-24.svg',
+    'star-outline.svg',
+    'stop-circle-16.svg',
+    'stop-circle-24.svg',
+    'sub-left.svg',
+    'sub-right.svg',
+    'sun-16.svg',
+    'sun-24.svg',
+    'support-16.svg',
+    'support-24.svg',
+    'support.svg',
+    'swap-horizontal-16.svg',
+    'swap-horizontal-24.svg',
+    'swap-horizontal.svg',
+    'swap-vertical-16.svg',
+    'swap-vertical-24.svg',
+    'swap-vertical.svg',
+    'switcher-16.svg',
+    'switcher-24.svg',
+    'sync-16.svg',
+    'sync-24.svg',
+    'sync-alert-16.svg',
+    'sync-alert-24.svg',
+    'sync-reverse-16.svg',
+    'sync-reverse-24.svg',
+    'tablet-16.svg',
+    'tablet-24.svg',
+    'tag-16.svg',
+    'tag-24.svg',
+    'tag.svg',
+    'target-16.svg',
+    'target-24.svg',
+    'terminal-16.svg',
+    'terminal-24.svg',
+    'terminal-screen-16.svg',
+    'terminal-screen-24.svg',
+    'thumbs-down-16.svg',
+    'thumbs-down-24.svg',
+    'thumbs-up-16.svg',
+    'thumbs-up-24.svg',
+    'toggle-left-16.svg',
+    'toggle-left-24.svg',
+    'toggle-right-16.svg',
+    'toggle-right-24.svg',
+    'token-16.svg',
+    'token-24.svg',
+    'tools-16.svg',
+    'tools-24.svg',
+    'top-16.svg',
+    'top-24.svg',
+    'trash-16.svg',
+    'trash-24.svg',
+    'trash.svg',
+    'trend-down-16.svg',
+    'trend-down-24.svg',
+    'trend-up-16.svg',
+    'trend-up-24.svg',
+    'triangle-16.svg',
+    'triangle-24.svg',
+    'triangle-fill-16.svg',
+    'triangle-fill-24.svg',
+    'truck-16.svg',
+    'truck-24.svg',
+    'tune.svg',
+    'tv-16.svg',
+    'tv-24.svg',
+    'type-16.svg',
+    'type-24.svg',
+    'unfold-close-16.svg',
+    'unfold-close-24.svg',
+    'unfold-less.svg',
+    'unfold-more.svg',
+    'unfold-open-16.svg',
+    'unfold-open-24.svg',
+    'unlock-16.svg',
+    'unlock-24.svg',
+    'upload-16.svg',
+    'upload-24.svg',
+    'upload.svg',
+    'user-16.svg',
+    'user-24.svg',
+    'user-add.svg',
+    'user-check-16.svg',
+    'user-check-24.svg',
+    'user-circle-16.svg',
+    'user-circle-24.svg',
+    'user-circle-fill-16.svg',
+    'user-circle-fill-24.svg',
+    'user-minus-16.svg',
+    'user-minus-24.svg',
+    'user-organization.svg',
+    'user-plain.svg',
+    'user-plus-16.svg',
+    'user-plus-24.svg',
+    'user-square-fill.svg',
+    'user-square-outline.svg',
+    'user-team.svg',
+    'user-x-16.svg',
+    'user-x-24.svg',
+    'users-16.svg',
+    'users-24.svg',
+    'vault-16.svg',
+    'vault-24.svg',
+    'verified-16.svg',
+    'verified-24.svg',
+    'video-16.svg',
+    'video-24.svg',
+    'video-off-16.svg',
+    'video-off-24.svg',
+    'visibility-hide.svg',
+    'visibility-show.svg',
+    'vmware-16.svg',
+    'vmware-24.svg',
+    'vmware-color-16.svg',
+    'vmware-color-24.svg',
+    'volume-16.svg',
+    'volume-2-16.svg',
+    'volume-2-24.svg',
+    'volume-24.svg',
+    'volume-down-16.svg',
+    'volume-down-24.svg',
+    'volume-x-16.svg',
+    'volume-x-24.svg',
+    'wall-16.svg',
+    'wall-24.svg',
+    'watch-16.svg',
+    'watch-24.svg',
+    'webhook-16.svg',
+    'webhook-24.svg',
+    'webhook.svg',
+    'wifi-16.svg',
+    'wifi-24.svg',
+    'wifi-off-16.svg',
+    'wifi-off-24.svg',
+    'wrench-16.svg',
+    'wrench-24.svg',
+    'x-16.svg',
+    'x-24.svg',
+    'x-circle-16.svg',
+    'x-circle-24.svg',
+    'x-circle-fill-16.svg',
+    'x-circle-fill-24.svg',
+    'x-diamond-16.svg',
+    'x-diamond-24.svg',
+    'x-diamond-fill-16.svg',
+    'x-diamond-fill-24.svg',
+    'x-hexagon-16.svg',
+    'x-hexagon-24.svg',
+    'x-hexagon-fill-16.svg',
+    'x-hexagon-fill-24.svg',
+    'x-square-16.svg',
+    'x-square-24.svg',
+    'x-square-fill-16.svg',
+    'x-square-fill-24.svg',
+    'zap-16.svg',
+    'zap-24.svg',
+    'zap-off-16.svg',
+    'zap-off-24.svg',
+    'zoom-in-16.svg',
+    'zoom-in-24.svg',
+    'zoom-out-16.svg',
+    'zoom-out-24.svg',
+  ]
+    .filter((item) => {
+      const sized = item.endsWith('-16.svg') || item.endsWith('-24.svg');
+      return lib === 'structure' ? !sized : sized;
+    })
+    .map((item) => {
+      const temp = item.split('.');
+      temp.pop();
+      const name = temp.join('.');
+      let placeholder = `with-${name}`;
+      if (name.indexOf('-color') !== -1) {
         placeholder = `${placeholder}-icon`;
       } else {
         placeholder = `${placeholder}-mask`;
       }
-    return {
-      placeholder: placeholder,
-      name: name
-    };
-  })
+      return {
+        placeholder: placeholder,
+        name: name,
+      };
+    });
 });
diff --git a/ui/packages/consul-ui/app/helpers/is.js b/ui/packages/consul-ui/app/helpers/is.js
index 0e2d9fcf35..2b7fee2194 100644
--- a/ui/packages/consul-ui/app/helpers/is.js
+++ b/ui/packages/consul-ui/app/helpers/is.js
@@ -6,17 +6,14 @@ export const is = (helper, [abilityString, model], properties) => {
   let { abilityName, propertyName } = helper.abilities.parse(abilityString);
   let ability = helper.abilities.abilityFor(abilityName, model, properties);
 
-  if(typeof ability.getCharacteristicProperty === 'function') {
+  if (typeof ability.getCharacteristicProperty === 'function') {
     propertyName = ability.getCharacteristicProperty(propertyName);
   } else {
     propertyName = camelize(`is-${propertyName}`);
   }
 
-  helper._removeAbilityObserver();
-  helper._addAbilityObserver(ability, propertyName);
-
   return get(ability, propertyName);
-}
+};
 export default class extends Helper {
   compute([abilityString, model], properties) {
     return is(this, [abilityString, model], properties);
diff --git a/ui/packages/consul-ui/app/helpers/json-stringify.js b/ui/packages/consul-ui/app/helpers/json-stringify.js
index 2eaedcfe8b..f60c61ddb2 100644
--- a/ui/packages/consul-ui/app/helpers/json-stringify.js
+++ b/ui/packages/consul-ui/app/helpers/json-stringify.js
@@ -1,9 +1,9 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function(args, hash) {
+export default helper(function (args, hash) {
   try {
     return JSON.stringify(...args);
-  } catch(e) {
-    return args[0].map(item => JSON.stringify(item, args[1], args[2]));
+  } catch (e) {
+    return args[0].map((item) => JSON.stringify(item, args[1], args[2]));
   }
 });
diff --git a/ui/packages/consul-ui/app/helpers/left-trim.js b/ui/packages/consul-ui/app/helpers/left-trim.js
index bb49e028f8..893e7e2b4a 100644
--- a/ui/packages/consul-ui/app/helpers/left-trim.js
+++ b/ui/packages/consul-ui/app/helpers/left-trim.js
@@ -1,6 +1,6 @@
 import { helper } from '@ember/component/helper';
 import leftTrim from 'consul-ui/utils/left-trim';
 
-export default helper(function([str = '', search = ''], hash) {
+export default helper(function ([str = '', search = ''], hash) {
   return leftTrim(str, search);
 });
diff --git a/ui/packages/consul-ui/app/helpers/merge-checks.js b/ui/packages/consul-ui/app/helpers/merge-checks.js
index ffa7646402..6944dc9108 100644
--- a/ui/packages/consul-ui/app/helpers/merge-checks.js
+++ b/ui/packages/consul-ui/app/helpers/merge-checks.js
@@ -1,9 +1,6 @@
 import { helper } from '@ember/component/helper';
 import mergeChecks from 'consul-ui/utils/merge-checks';
 
-export default helper(function([checks, exposed], hash) {
-  return mergeChecks(
-    checks,
-    exposed
-  );
+export default helper(function ([checks, exposed], hash) {
+  return mergeChecks(checks, exposed);
 });
diff --git a/ui/packages/consul-ui/app/helpers/percentage-of.js b/ui/packages/consul-ui/app/helpers/percentage-of.js
index 0979455b0e..5c5b2182ac 100644
--- a/ui/packages/consul-ui/app/helpers/percentage-of.js
+++ b/ui/packages/consul-ui/app/helpers/percentage-of.js
@@ -1,8 +1,8 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function([of, num], hash) {
-  const perc = (of / num * 100);
-  if(isNaN(perc)) {
+export default helper(function ([of, num], hash) {
+  const perc = (of / num) * 100;
+  if (isNaN(perc)) {
     return 0;
   }
   return perc.toFixed(2);
diff --git a/ui/packages/consul-ui/app/helpers/policy/group.js b/ui/packages/consul-ui/app/helpers/policy/group.js
index 1a2c829d0a..5802f31bc3 100644
--- a/ui/packages/consul-ui/app/helpers/policy/group.js
+++ b/ui/packages/consul-ui/app/helpers/policy/group.js
@@ -4,7 +4,7 @@ import { MANAGEMENT_ID } from 'consul-ui/models/policy';
 
 export default helper(function policyGroup([items] /*, hash*/) {
   return items.reduce(
-    function(prev, item) {
+    function (prev, item) {
       let group;
       switch (true) {
         case get(item, 'ID') === MANAGEMENT_ID:
diff --git a/ui/packages/consul-ui/app/helpers/require.js b/ui/packages/consul-ui/app/helpers/require.js
index c3b39e869f..d62481eac9 100644
--- a/ui/packages/consul-ui/app/helpers/require.js
+++ b/ui/packages/consul-ui/app/helpers/require.js
@@ -4,7 +4,6 @@ import require from 'require';
 import { css } from '@lit/reactive-element';
 import resolve from 'consul-ui/utils/path/resolve';
 
-
 const appName = 'consul-ui';
 
 const container = new Map();
@@ -14,24 +13,24 @@ const container = new Map();
 // need to
 export default helper(([path = ''], options) => {
   let fullPath = resolve(`${appName}${options.from}`, path);
-  if(path.charAt(0) === '/') {
+  if (path.charAt(0) === '/') {
     fullPath = `${appName}${fullPath}`;
   }
 
   let module;
-  if(require.has(fullPath)) {
+  if (require.has(fullPath)) {
     module = require(fullPath)[options.export || 'default'];
   } else {
-    throw new Error(`Unable to resolve '${fullPath}' does the file exist?`)
+    throw new Error(`Unable to resolve '${fullPath}' does the file exist?`);
   }
 
-  switch(true) {
+  switch (true) {
     case fullPath.endsWith('.css'):
       return module(css);
     case fullPath.endsWith('.xstate'):
       return module;
     case fullPath.endsWith('.element'): {
-      if(container.has(fullPath)) {
+      if (container.has(fullPath)) {
         return container.get(fullPath);
       }
       const component = module(HTMLElement);
diff --git a/ui/packages/consul-ui/app/helpers/right-trim.js b/ui/packages/consul-ui/app/helpers/right-trim.js
index 27c2721374..823e6ad132 100644
--- a/ui/packages/consul-ui/app/helpers/right-trim.js
+++ b/ui/packages/consul-ui/app/helpers/right-trim.js
@@ -2,6 +2,6 @@ import { helper } from '@ember/component/helper';
 
 import rightTrim from 'consul-ui/utils/right-trim';
 
-export default helper(function([str = '', search = ''], hash) {
+export default helper(function ([str = '', search = ''], hash) {
   return rightTrim(str, search);
 });
diff --git a/ui/packages/consul-ui/app/helpers/route-match.js b/ui/packages/consul-ui/app/helpers/route-match.js
index 3705462454..665db1e959 100644
--- a/ui/packages/consul-ui/app/helpers/route-match.js
+++ b/ui/packages/consul-ui/app/helpers/route-match.js
@@ -2,7 +2,7 @@ import { helper } from '@ember/component/helper';
 
 export default helper(function routeMatch([item], hash) {
   const prop = ['Present', 'Exact', 'Prefix', 'Suffix', 'Regex'].find(
-    prop => typeof item[prop] !== 'undefined'
+    (prop) => typeof item[prop] !== 'undefined'
   );
 
   switch (prop) {
diff --git a/ui/packages/consul-ui/app/helpers/svg-curve.js b/ui/packages/consul-ui/app/helpers/svg-curve.js
index 4bdaa68acf..a9a9a2c87f 100644
--- a/ui/packages/consul-ui/app/helpers/svg-curve.js
+++ b/ui/packages/consul-ui/app/helpers/svg-curve.js
@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 // arguments should be a list of {x: numLike, y: numLike} points
 // numLike meaning they should be numbers (or numberlike strings i.e. "1" vs 1)
-const curve = function() {
+const curve = function () {
   const args = [...arguments];
   // our arguments are destination first control points last
   // SVGs are control points first destination last
@@ -12,16 +12,16 @@ const curve = function() {
   // `Q|C x y, x y, x y` etc
   return `${arguments.length > 2 ? `C` : `Q`} ${args
     .concat(args.shift())
-    .map(p => Object.values(p).join(' '))
+    .map((p) => Object.values(p).join(' '))
     .join(',')}`;
 };
-const move = function(d) {
+const move = function (d) {
   return `
     M ${d.x} ${d.y}
   `;
 };
 
-export default helper(function([dest], hash) {
+export default helper(function ([dest], hash) {
   const src = hash.src || { x: 0, y: 0 };
   const type = hash.type || 'cubic';
   let args = [
diff --git a/ui/packages/consul-ui/app/helpers/test.js b/ui/packages/consul-ui/app/helpers/test.js
index e9dc9a00a1..a57f137a83 100644
--- a/ui/packages/consul-ui/app/helpers/test.js
+++ b/ui/packages/consul-ui/app/helpers/test.js
@@ -3,7 +3,7 @@ import { is } from './is';
 
 export default class extends Helper {
   compute([abilityString, model], properties) {
-    switch(true) {
+    switch (true) {
       case abilityString.startsWith('can '):
         return super.compute([abilityString.substr(4), model], properties);
       case abilityString.startsWith('is '):
diff --git a/ui/packages/consul-ui/app/helpers/token/is-legacy.js b/ui/packages/consul-ui/app/helpers/token/is-legacy.js
index 427ad11dfc..c66bbd7a15 100644
--- a/ui/packages/consul-ui/app/helpers/token/is-legacy.js
+++ b/ui/packages/consul-ui/app/helpers/token/is-legacy.js
@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import { get } from '@ember/object';
 
-const _isLegacy = function(token) {
+const _isLegacy = function (token) {
   // Empty Rules take priority over a Legacy: true
   // in order to make this decision
   const rules = get(token, 'Rules');
@@ -18,7 +18,7 @@ export function isLegacy(params, hash) {
   const token = params[0];
   // is array like (RecordManager isn't an array)
   if (typeof token.length !== 'undefined') {
-    return token.find(function(item) {
+    return token.find(function (item) {
       return _isLegacy(item);
     });
   }
diff --git a/ui/packages/consul-ui/app/instance-initializers/container.js b/ui/packages/consul-ui/app/instance-initializers/container.js
index ee286c376c..c35af601e7 100644
--- a/ui/packages/consul-ui/app/instance-initializers/container.js
+++ b/ui/packages/consul-ui/app/instance-initializers/container.js
@@ -5,12 +5,12 @@ import merge from 'deepmerge';
 const doc = document;
 
 export const services = merge.all(
-  [...doc.querySelectorAll(`script[data-services]`)].map($item =>
+  [...doc.querySelectorAll(`script[data-services]`)].map(($item) =>
     JSON.parse($item.dataset[`services`])
   )
 );
 
-const inject = function(container, obj) {
+const inject = function (container, obj) {
   // inject all the things
   Object.entries(obj).forEach(([key, value]) => {
     switch (true) {
@@ -42,10 +42,10 @@ export default {
     let repositories = container
       .get('container-debug-adapter:main')
       .catalogEntriesByType('service')
-      .filter(item => item.startsWith('repository/') || item === 'ui-config');
+      .filter((item) => item.startsWith('repository/') || item === 'ui-config');
 
     // during testing we get -test files in here, filter those out but only in debug envs
-    runInDebug(() => (repositories = repositories.filter(item => !item.endsWith('-test'))));
+    runInDebug(() => (repositories = repositories.filter((item) => !item.endsWith('-test'))));
 
     // 'service' service is not returned by catalogEntriesByType, possibly
     // related to pods and the service being called 'service':
@@ -53,7 +53,7 @@ export default {
     // so push it on the end
     repositories.push('repository/service');
     //
-    repositories.forEach(item => {
+    repositories.forEach((item) => {
       const key = `service:${item}`;
       container.set(key, container.resolveRegistration(key));
     });
diff --git a/ui/packages/consul-ui/app/instance-initializers/href-to.js b/ui/packages/consul-ui/app/instance-initializers/href-to.js
index 85f890e760..dbccbe1638 100644
--- a/ui/packages/consul-ui/app/instance-initializers/href-to.js
+++ b/ui/packages/consul-ui/app/instance-initializers/href-to.js
@@ -128,7 +128,7 @@ export default {
       const dom = container.lookup('service:dom');
       const doc = dom.document();
 
-      const listener = e => {
+      const listener = (e) => {
         const link = e.target.tagName === 'A' ? e.target : closestLink(e.target);
         if (link) {
           const hrefTo = new HrefTo(container, link);
diff --git a/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js b/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
index 5b23f39871..719a23c64e 100644
--- a/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
+++ b/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
@@ -8,7 +8,7 @@ export function initialize(application) {
   );
   // configure syntax highlighting for CodeMirror
   CodeMirror.modeURL = {
-    replace: function(n, mode) {
+    replace: function (n, mode) {
       switch (mode.trim()) {
         case 'javascript':
           return fs.get(['codemirror', 'mode', 'javascript', 'javascript.js'].join('/'));
diff --git a/ui/packages/consul-ui/app/instance-initializers/selection.js b/ui/packages/consul-ui/app/instance-initializers/selection.js
index faa9e75334..2cf6413443 100644
--- a/ui/packages/consul-ui/app/instance-initializers/selection.js
+++ b/ui/packages/consul-ui/app/instance-initializers/selection.js
@@ -1,7 +1,7 @@
 import { env } from 'consul-ui/env';
 
 const SECONDARY_BUTTON = 2;
-const isSelecting = function(win = window) {
+const isSelecting = function (win = window) {
   const selection = win.getSelection();
   let selecting = false;
   try {
@@ -21,10 +21,10 @@ export default {
     const dom = container.lookup('service:dom');
     const doc = dom.document();
     const $html = doc.getElementsByTagName('html')[0];
-    const findAnchor = function(el) {
+    const findAnchor = function (el) {
       return el.tagName === 'A' ? el : dom.closest('a', el);
     };
-    const mousedown = function(e) {
+    const mousedown = function (e) {
       if ($html.classList.contains('is-debug')) {
         return;
       }
@@ -44,7 +44,7 @@ export default {
         }
       }
     };
-    const mouseup = function(e) {
+    const mouseup = function (e) {
       if ($html.classList.contains('is-debug')) {
         return;
       }
@@ -61,7 +61,7 @@ export default {
     doc.body.addEventListener('mouseup', mouseup);
 
     container.reopen({
-      willDestroy: function() {
+      willDestroy: function () {
         doc.body.removeEventListener('mousedown', mousedown);
         doc.body.removeEventListener('mouseup', mouseup);
         return this._super(...arguments);
diff --git a/ui/packages/consul-ui/app/locations/fsm-with-optional-test.js b/ui/packages/consul-ui/app/locations/fsm-with-optional-test.js
index 6c7e698ecf..b2c3e6157b 100644
--- a/ui/packages/consul-ui/app/locations/fsm-with-optional-test.js
+++ b/ui/packages/consul-ui/app/locations/fsm-with-optional-test.js
@@ -33,11 +33,11 @@ export default class FSMWithOptionalTestLocation extends FSMWithOptionalLocation
 
     // taken from emberjs/application/instance:visit but cleaned up a little
     // https://github.com/emberjs/ember.js/blob/21bd70c773dcc4bfe4883d7943e8a68d203b5bad/packages/%40ember/application/instance.js#L236-L277
-    const handleTransitionResolve = async _ => {
+    const handleTransitionResolve = async (_) => {
       await settled();
-      return new Promise(resolve => setTimeout(resolve(app), 0));
+      return new Promise((resolve) => setTimeout(resolve(app), 0));
     };
-    const handleTransitionReject = error => {
+    const handleTransitionReject = (error) => {
       if (error.error) {
         throw error.error;
       } else if (error.name === 'TransitionAborted' && router._routerMicrolib.activeTransition) {
diff --git a/ui/packages/consul-ui/app/locations/fsm-with-optional.js b/ui/packages/consul-ui/app/locations/fsm-with-optional.js
index de2975fe44..12657737b9 100644
--- a/ui/packages/consul-ui/app/locations/fsm-with-optional.js
+++ b/ui/packages/consul-ui/app/locations/fsm-with-optional.js
@@ -15,8 +15,8 @@ const trailingSlashRe = /\/$/;
 // see below re: ember double slashes
 // const moreThan1SlashRe = /\/{2,}/g;
 
-const _uuid = function() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+const _uuid = function () {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0;
     return (c === 'x' ? r : (r & 3) | 8).toString(16);
   });
@@ -27,7 +27,7 @@ const _uuid = function() {
  * Register a callback to be invoked whenever the browser history changes,
  * including using forward and back buttons.
  */
-const route = function(e) {
+const route = function (e) {
   const path = e.state.path;
   const url = this.getURLForTransition(path);
   // Ignore initial page load popstate event in Chrome
@@ -303,9 +303,11 @@ export default class FSMWithOptionalLocation {
       const temp = url.split('/');
       optional = {
         ...this.optional,
-        ...(optional || {})
+        ...(optional || {}),
       };
-      optional = Object.values(optional).filter(item => Boolean(item)).map(item => item.value || item, []);
+      optional = Object.values(optional)
+        .filter((item) => Boolean(item))
+        .map((item) => item.value || item, []);
       temp.splice(...[1, 0].concat(optional));
       url = temp.join('/');
     }
diff --git a/ui/packages/consul-ui/app/mixins/policy/as-many.js b/ui/packages/consul-ui/app/mixins/policy/as-many.js
index 95da1c848c..b5620298db 100644
--- a/ui/packages/consul-ui/app/mixins/policy/as-many.js
+++ b/ui/packages/consul-ui/app/mixins/policy/as-many.js
@@ -3,8 +3,8 @@ import { get } from '@ember/object';
 
 import minimizeModel from 'consul-ui/utils/minimizeModel';
 
-const normalizeIdentities = function(items, template, name, dc) {
-  return (items || []).map(function(item) {
+const normalizeIdentities = function (items, template, name, dc) {
+  return (items || []).map(function (item) {
     const policy = {
       template: template,
       Name: item[name],
@@ -17,20 +17,20 @@ const normalizeIdentities = function(items, template, name, dc) {
 };
 // Sometimes we get `Policies: null`, make null equal an empty array
 // and add an empty template
-const normalizePolicies = function(items) {
-  return (items || []).map(function(item) {
+const normalizePolicies = function (items) {
+  return (items || []).map(function (item) {
     return {
       template: '',
       ...item,
     };
   });
 };
-const serializeIdentities = function(items, template, name, dc) {
+const serializeIdentities = function (items, template, name, dc) {
   return items
-    .filter(function(item) {
+    .filter(function (item) {
       return get(item, 'template') === template;
     })
-    .map(function(item) {
+    .map(function (item) {
       const identity = {
         [name]: get(item, 'Name'),
       };
@@ -40,16 +40,16 @@ const serializeIdentities = function(items, template, name, dc) {
       return identity;
     });
 };
-const serializePolicies = function(items) {
-  return items.filter(function(item) {
+const serializePolicies = function (items) {
+  return items.filter(function (item) {
     return get(item, 'template') === '';
   });
 };
 
 export default Mixin.create({
   //TODO: what about update and create?
-  respondForQueryRecord: function(respond, query) {
-    return this._super(function(cb) {
+  respondForQueryRecord: function (respond, query) {
+    return this._super(function (cb) {
       return respond((headers, body) => {
         body.Policies = normalizePolicies(body.Policies)
           .concat(
@@ -67,12 +67,12 @@ export default Mixin.create({
       });
     }, query);
   },
-  respondForQuery: function(respond, query) {
-    return this._super(function(cb) {
-      return respond(function(headers, body) {
+  respondForQuery: function (respond, query) {
+    return this._super(function (cb) {
+      return respond(function (headers, body) {
         return cb(
           headers,
-          body.map(function(item) {
+          body.map(function (item) {
             item.Policies = normalizePolicies(item.Policies)
               .concat(
                 normalizeIdentities(
@@ -91,7 +91,7 @@ export default Mixin.create({
       });
     }, query);
   },
-  serialize: function(snapshot, options) {
+  serialize: function (snapshot, options) {
     const data = this._super(...arguments);
     data.ServiceIdentities = serializeIdentities(
       data.Policies,
diff --git a/ui/packages/consul-ui/app/mixins/role/as-many.js b/ui/packages/consul-ui/app/mixins/role/as-many.js
index b2e77f143a..97b7159429 100644
--- a/ui/packages/consul-ui/app/mixins/role/as-many.js
+++ b/ui/packages/consul-ui/app/mixins/role/as-many.js
@@ -4,20 +4,20 @@ import minimizeModel from 'consul-ui/utils/minimizeModel';
 
 export default Mixin.create({
   // TODO: what about update and create?
-  respondForQueryRecord: function(respond, query) {
-    return this._super(function(cb) {
+  respondForQueryRecord: function (respond, query) {
+    return this._super(function (cb) {
       return respond((headers, body) => {
         body.Roles = typeof body.Roles === 'undefined' || body.Roles === null ? [] : body.Roles;
         return cb(headers, body);
       });
     }, query);
   },
-  respondForQuery: function(respond, query) {
-    return this._super(function(cb) {
-      return respond(function(headers, body) {
+  respondForQuery: function (respond, query) {
+    return this._super(function (cb) {
+      return respond(function (headers, body) {
         return cb(
           headers,
-          body.map(function(item) {
+          body.map(function (item) {
             item.Roles = typeof item.Roles === 'undefined' || item.Roles === null ? [] : item.Roles;
             return item;
           })
@@ -25,7 +25,7 @@ export default Mixin.create({
       });
     }, query);
   },
-  serialize: function(snapshot, options) {
+  serialize: function (snapshot, options) {
     const data = this._super(...arguments);
     data.Roles = minimizeModel(data.Roles);
     return data;
diff --git a/ui/packages/consul-ui/app/mixins/with-blocking-actions.js b/ui/packages/consul-ui/app/mixins/with-blocking-actions.js
index 101d4a0d3a..9f48a3a8ab 100644
--- a/ui/packages/consul-ui/app/mixins/with-blocking-actions.js
+++ b/ui/packages/consul-ui/app/mixins/with-blocking-actions.js
@@ -21,12 +21,12 @@ import { singularize } from 'ember-inflector';
 export default Mixin.create({
   _feedback: service('feedback'),
   settings: service('settings'),
-  init: function() {
+  init: function () {
     this._super(...arguments);
     const feedback = this._feedback;
     const route = this;
     set(this, 'feedback', {
-      execute: function(cb, type, error) {
+      execute: function (cb, type, error) {
         const temp = route.routeName.split('.');
         temp.pop();
         const routeName = singularize(temp.pop());
@@ -35,11 +35,11 @@ export default Mixin.create({
       },
     });
   },
-  afterCreate: function(item) {
+  afterCreate: function (item) {
     // do the same as update
     return this.afterUpdate(...arguments);
   },
-  afterUpdate: function(item) {
+  afterUpdate: function (item) {
     // e.g. dc.intentions.index
     const parts = this.routeName.split('.');
     // e.g. index or edit
@@ -47,7 +47,7 @@ export default Mixin.create({
     // e.g. dc.intentions, essentially go to the listings page
     return this.transitionTo(parts.join('.'));
   },
-  afterDelete: function(item) {
+  afterDelete: function (item) {
     // e.g. dc.intentions.index
     const parts = this.routeName.split('.');
     // e.g. index or edit
@@ -61,24 +61,24 @@ export default Mixin.create({
         return this.transitionTo(parts.join('.'));
     }
   },
-  errorCreate: function(type, e) {
+  errorCreate: function (type, e) {
     return type;
   },
-  errorUpdate: function(type, e) {
+  errorUpdate: function (type, e) {
     return type;
   },
-  errorDelete: function(type, e) {
+  errorDelete: function (type, e) {
     return type;
   },
   actions: {
-    cancel: function() {
+    cancel: function () {
       // do the same as an update, or override
       return this.afterUpdate(...arguments);
     },
-    create: function(item) {
+    create: function (item) {
       return this.feedback.execute(
         () => {
-          return this.repo.persist(item).then(item => {
+          return this.repo.persist(item).then((item) => {
             return this.afterCreate(...arguments);
           });
         },
@@ -88,7 +88,7 @@ export default Mixin.create({
         }
       );
     },
-    update: function(item) {
+    update: function (item) {
       return this.feedback.execute(
         () => {
           return this.repo.persist(item).then(() => {
@@ -101,7 +101,7 @@ export default Mixin.create({
         }
       );
     },
-    delete: function(item) {
+    delete: function (item) {
       return this.feedback.execute(
         () => {
           return this.repo.remove(item).then(() => {
@@ -114,7 +114,7 @@ export default Mixin.create({
         }
       );
     },
-    use: function(item) {
+    use: function (item) {
       return this.repo
         .findBySlug({
           dc: get(item, 'Datacenter'),
@@ -122,7 +122,7 @@ export default Mixin.create({
           partition: get(item, 'Partition'),
           id: get(item, 'AccessorID'),
         })
-        .then(item => {
+        .then((item) => {
           return this.settings.persist({
             token: {
               AccessorID: get(item, 'AccessorID'),
@@ -133,15 +133,15 @@ export default Mixin.create({
           });
         });
     },
-    logout: function(item) {
+    logout: function (item) {
       return this.settings.delete('token');
     },
-    clone: function(item) {
+    clone: function (item) {
       let cloned;
       return this.feedback.execute(() => {
         return this.repo
           .clone(item)
-          .then(item => {
+          .then((item) => {
             cloned = item;
             // cloning is similar to delete in that
             // if you clone from the listing page, stay on the listing page
@@ -149,7 +149,7 @@ export default Mixin.create({
             // so I can see it
             return this.afterDelete(...arguments);
           })
-          .then(function() {
+          .then(function () {
             return cloned;
           });
       }, 'clone');
diff --git a/ui/packages/consul-ui/app/models/intention-permission-http-header.js b/ui/packages/consul-ui/app/models/intention-permission-http-header.js
index 8921df9355..f98a1b4e39 100644
--- a/ui/packages/consul-ui/app/models/intention-permission-http-header.js
+++ b/ui/packages/consul-ui/app/models/intention-permission-http-header.js
@@ -26,6 +26,6 @@ export default class IntentionPermission extends Fragment {
 
   @computed(...schema.HeaderType.allowedValues)
   get HeaderType() {
-    return schema.HeaderType.allowedValues.find(prop => typeof this[prop] !== 'undefined');
+    return schema.HeaderType.allowedValues.find((prop) => typeof this[prop] !== 'undefined');
   }
 }
diff --git a/ui/packages/consul-ui/app/models/intention-permission-http.js b/ui/packages/consul-ui/app/models/intention-permission-http.js
index 93860c2e92..21728878b9 100644
--- a/ui/packages/consul-ui/app/models/intention-permission-http.js
+++ b/ui/packages/consul-ui/app/models/intention-permission-http.js
@@ -25,6 +25,6 @@ export default class IntentionPermissionHttp extends Fragment {
 
   @computed(...schema.PathType.allowedValues)
   get PathType() {
-    return schema.PathType.allowedValues.find(prop => typeof this[prop] === 'string');
+    return schema.PathType.allowedValues.find((prop) => typeof this[prop] === 'string');
   }
 }
diff --git a/ui/packages/consul-ui/app/models/node.js b/ui/packages/consul-ui/app/models/node.js
index 27563fbd19..157a2833b0 100644
--- a/ui/packages/consul-ui/app/models/node.js
+++ b/ui/packages/consul-ui/app/models/node.js
@@ -28,11 +28,11 @@ export default class Node extends Model {
   @fragmentArray('health-check') Checks;
   // MeshServiceInstances are all instances that aren't connect-proxies this
   // currently includes gateways as these need to show up in listings
-  @filter('Services', item => item.Service.Kind !== 'connect-proxy') MeshServiceInstances;
+  @filter('Services', (item) => item.Service.Kind !== 'connect-proxy') MeshServiceInstances;
   // ProxyServiceInstances are all instances that are connect-proxies
-  @filter('Services', item => item.Service.Kind === 'connect-proxy') ProxyServiceInstances;
+  @filter('Services', (item) => item.Service.Kind === 'connect-proxy') ProxyServiceInstances;
 
-  @filter('Checks', item => item.ServiceID === '') NodeChecks;
+  @filter('Checks', (item) => item.ServiceID === '') NodeChecks;
 
   @computed('ChecksCritical', 'ChecksPassing', 'ChecksWarning')
   get Status() {
@@ -50,16 +50,16 @@ export default class Node extends Model {
 
   @computed('NodeChecks.[]')
   get ChecksCritical() {
-    return this.NodeChecks.filter(item => item.Status === 'critical').length;
+    return this.NodeChecks.filter((item) => item.Status === 'critical').length;
   }
 
   @computed('NodeChecks.[]')
   get ChecksPassing() {
-    return this.NodeChecks.filter(item => item.Status === 'passing').length;
+    return this.NodeChecks.filter((item) => item.Status === 'passing').length;
   }
 
   @computed('NodeChecks.[]')
   get ChecksWarning() {
-    return this.NodeChecks.filter(item => item.Status === 'warning').length;
+    return this.NodeChecks.filter((item) => item.Status === 'warning').length;
   }
 }
diff --git a/ui/packages/consul-ui/app/models/peer.js b/ui/packages/consul-ui/app/models/peer.js
index cd050524bc..934c1bd462 100644
--- a/ui/packages/consul-ui/app/models/peer.js
+++ b/ui/packages/consul-ui/app/models/peer.js
@@ -3,14 +3,7 @@ import Model, { attr } from '@ember-data/model';
 export const schema = {
   State: {
     defaultValue: 'PENDING',
-    allowedValues: [
-      'PENDING',
-      'ESTABLISHING',
-      'ACTIVE',
-      'FAILING',
-      'TERMINATED',
-      'DELETING'
-    ],
+    allowedValues: ['PENDING', 'ESTABLISHING', 'ACTIVE', 'FAILING', 'TERMINATED', 'DELETING'],
   },
 };
 export default class Peer extends Model {
diff --git a/ui/packages/consul-ui/app/models/service-instance.js b/ui/packages/consul-ui/app/models/service-instance.js
index c69d302002..1863dd6bba 100644
--- a/ui/packages/consul-ui/app/models/service-instance.js
+++ b/ui/packages/consul-ui/app/models/service-instance.js
@@ -15,7 +15,7 @@ export const Collection = class Collection {
   }
 
   get ExternalSources() {
-    const sources = this.items.reduce(function(prev, item) {
+    const sources = this.items.reduce(function (prev, item) {
       return prev.concat(item.ExternalSources || []);
     }, []);
     // unique, non-empty values, alpha sort
@@ -99,17 +99,17 @@ export default class ServiceInstance extends Model {
 
   @computed('Checks.[]')
   get ChecksPassing() {
-    return this.Checks.filter(item => item.Status === 'passing');
+    return this.Checks.filter((item) => item.Status === 'passing');
   }
 
   @computed('Checks.[]')
   get ChecksWarning() {
-    return this.Checks.filter(item => item.Status === 'warning');
+    return this.Checks.filter((item) => item.Status === 'warning');
   }
 
   @computed('Checks.[]')
   get ChecksCritical() {
-    return this.Checks.filter(item => item.Status === 'critical');
+    return this.Checks.filter((item) => item.Status === 'critical');
   }
 
   @computed('Checks.[]', 'ChecksPassing')
diff --git a/ui/packages/consul-ui/app/models/service.js b/ui/packages/consul-ui/app/models/service.js
index 406b96b106..70a753f44f 100644
--- a/ui/packages/consul-ui/app/models/service.js
+++ b/ui/packages/consul-ui/app/models/service.js
@@ -15,7 +15,7 @@ export const Collection = class Collection {
   }
 
   get ExternalSources() {
-    const items = this.items.reduce(function(prev, item) {
+    const items = this.items.reduce(function (prev, item) {
       return prev.concat(item.ExternalSources || []);
     }, []);
     // unique, non-empty values, alpha sort
@@ -25,7 +25,7 @@ export const Collection = class Collection {
   // when and when not somewhere in the docs
   get Partitions() {
     // unique, non-empty values, alpha sort
-    return [...new Set(this.items.map(item => item.Partition))].sort();
+    return [...new Set(this.items.map((item) => item.Partition))].sort();
   }
 };
 export default class Service extends Model {
diff --git a/ui/packages/consul-ui/app/models/token.js b/ui/packages/consul-ui/app/models/token.js
index 60a2465561..c2b31a339c 100644
--- a/ui/packages/consul-ui/app/models/token.js
+++ b/ui/packages/consul-ui/app/models/token.js
@@ -37,7 +37,7 @@ export default class Token extends Model {
 
   @computed('Policies.[]')
   get isGlobalManagement() {
-    return (this.Policies || []).find(item => item.ID === MANAGEMENT_ID);
+    return (this.Policies || []).find((item) => item.ID === MANAGEMENT_ID);
   }
 
   @computed('SecretID')
diff --git a/ui/packages/consul-ui/app/models/topology.js b/ui/packages/consul-ui/app/models/topology.js
index 596b74cc64..7a4e165cce 100644
--- a/ui/packages/consul-ui/app/models/topology.js
+++ b/ui/packages/consul-ui/app/models/topology.js
@@ -25,8 +25,11 @@ export default class Topology extends Model {
 
     undefinedDownstream =
       this.Downstreams.filter(
-        item =>
-          item.Source === 'specific-intention' && !item.TransparentProxy && !item.ConnectNative && item.Intention.Allowed
+        (item) =>
+          item.Source === 'specific-intention' &&
+          !item.TransparentProxy &&
+          !item.ConnectNative &&
+          item.Intention.Allowed
       ).length !== 0;
 
     return undefinedDownstream;
@@ -38,11 +41,11 @@ export default class Topology extends Model {
   // a wildcard intention
   get wildcardIntention() {
     const downstreamWildcard =
-      this.Downstreams.filter(item => !item.Intention.HasExact && item.Intention.Allowed).length !==
-      0;
+      this.Downstreams.filter((item) => !item.Intention.HasExact && item.Intention.Allowed)
+        .length !== 0;
 
     const upstreamWildcard =
-      this.Upstreams.filter(item => !item.Intention.HasExact && item.Intention.Allowed).length !==
+      this.Upstreams.filter((item) => !item.Intention.HasExact && item.Intention.Allowed).length !==
       0;
 
     return downstreamWildcard || upstreamWildcard;
diff --git a/ui/packages/consul-ui/app/modifiers/aria-menu.js b/ui/packages/consul-ui/app/modifiers/aria-menu.js
index f153cd8c23..61c1c1751b 100644
--- a/ui/packages/consul-ui/app/modifiers/aria-menu.js
+++ b/ui/packages/consul-ui/app/modifiers/aria-menu.js
@@ -45,7 +45,7 @@ export default class AriaMenuModifier extends Modifier {
       return;
     }
     const $items = [...this.element.querySelectorAll(MENU_ITEMS)];
-    const pos = $items.findIndex($item => $item === this.doc.activeElement);
+    const pos = $items.findIndex(($item) => $item === this.doc.activeElement);
     if (e.keyCode === TAB) {
       if (e.shiftKey) {
         if (pos === 0) {
@@ -54,7 +54,7 @@ export default class AriaMenuModifier extends Modifier {
         }
       } else {
         if (pos === $items.length - 1) {
-          await new Promise(resolve => setTimeout(resolve, 0));
+          await new Promise((resolve) => setTimeout(resolve, 0));
           this.options.onclose(e);
         }
       }
diff --git a/ui/packages/consul-ui/app/modifiers/css-props.js b/ui/packages/consul-ui/app/modifiers/css-props.js
index adca9383ae..a1826a7bbf 100644
--- a/ui/packages/consul-ui/app/modifiers/css-props.js
+++ b/ui/packages/consul-ui/app/modifiers/css-props.js
@@ -1,16 +1,16 @@
 import { modifier } from 'ember-modifier';
 const STYLE_RULE = 1;
-const getCustomProperties = function() {
+const getCustomProperties = function () {
   return Object.fromEntries(
     [...document.styleSheets].reduce(
       (prev, item) =>
         prev.concat(
           [...item.cssRules]
-            .filter(item => item.type === STYLE_RULE)
+            .filter((item) => item.type === STYLE_RULE)
             .reduce((prev, rule) => {
               const props = [...rule.style]
-                .filter(prop => prop.startsWith('--'))
-                .map(prop => [prop.trim(), rule.style.getPropertyValue(prop).trim()]);
+                .filter((prop) => prop.startsWith('--'))
+                .map((prop) => [prop.trim(), rule.style.getPropertyValue(prop).trim()]);
               return [...prev, ...props];
             }, [])
         ),
@@ -19,25 +19,25 @@ const getCustomProperties = function() {
   );
 };
 const props = getCustomProperties();
-export default modifier(function($element, [returns], hash) {
-    const re = new RegExp(`^--${hash.prefix || '.'}${hash.group || ''}+`);
-    const obj = {};
-    Object.entries(props).forEach(([key, value]) => {
-      const res = key.match(re);
-      if(res) {
-        let prop = res[0];
-        if (prop.charAt(prop.length - 1) === '-') {
-          prop = prop.substr(0, prop.length - 1);
-        }
-        if(hash.group) {
-          if (typeof obj[prop] === 'undefined') {
-            obj[prop] = {};
-          }
-          obj[prop][key] = value;
-        } else {
-          obj[key] = value;
-        }
+export default modifier(function ($element, [returns], hash) {
+  const re = new RegExp(`^--${hash.prefix || '.'}${hash.group || ''}+`);
+  const obj = {};
+  Object.entries(props).forEach(([key, value]) => {
+    const res = key.match(re);
+    if (res) {
+      let prop = res[0];
+      if (prop.charAt(prop.length - 1) === '-') {
+        prop = prop.substr(0, prop.length - 1);
       }
-    });
-    returns(obj);
+      if (hash.group) {
+        if (typeof obj[prop] === 'undefined') {
+          obj[prop] = {};
+        }
+        obj[prop][key] = value;
+      } else {
+        obj[key] = value;
+      }
+    }
+  });
+  returns(obj);
 });
diff --git a/ui/packages/consul-ui/app/modifiers/did-upsert.js b/ui/packages/consul-ui/app/modifiers/did-upsert.js
index 0cfd0d5fb2..7dcbf640ff 100644
--- a/ui/packages/consul-ui/app/modifiers/did-upsert.js
+++ b/ui/packages/consul-ui/app/modifiers/did-upsert.js
@@ -1,7 +1,7 @@
 import { setModifierManager, capabilities } from '@ember/modifier';
 import { gte } from 'ember-compatibility-helpers';
 
-const createEventLike = state => {
+const createEventLike = (state) => {
   return {
     target: state.element,
     currentTarget: state.element,
diff --git a/ui/packages/consul-ui/app/modifiers/disabled.js b/ui/packages/consul-ui/app/modifiers/disabled.js
index e3171496e8..18d12449cc 100644
--- a/ui/packages/consul-ui/app/modifiers/disabled.js
+++ b/ui/packages/consul-ui/app/modifiers/disabled.js
@@ -13,7 +13,7 @@ export default modifier(function enabled($element, [bool = true], hash) {
     return;
   }
   for (const $el of $element.querySelectorAll('input,textarea,button')) {
-    if(bool && $el.dataset.disabled !== 'false') {
+    if (bool && $el.dataset.disabled !== 'false') {
       $element.setAttribute('disabled', bool);
       $element.setAttribute('aria-disabled', bool);
     } else {
diff --git a/ui/packages/consul-ui/app/modifiers/notification.js b/ui/packages/consul-ui/app/modifiers/notification.js
index 64ed412778..9645246bca 100644
--- a/ui/packages/consul-ui/app/modifiers/notification.js
+++ b/ui/packages/consul-ui/app/modifiers/notification.js
@@ -16,13 +16,14 @@ export default class NotificationModifier extends Modifier {
     this.element.remove();
     this.notify.clearMessages();
     if (typeof options.after === 'function') {
-      Promise.resolve().then(_ => options.after())
-        .catch(e => {
+      Promise.resolve()
+        .then((_) => options.after())
+        .catch((e) => {
           if (e.name !== 'TransitionAborted') {
             throw e;
           }
         })
-        .then(res => {
+        .then((res) => {
           this.notify.add(options);
         });
     } else {
@@ -30,7 +31,7 @@ export default class NotificationModifier extends Modifier {
     }
   }
   willDestroy() {
-    if(this.args.named.sticky) {
+    if (this.args.named.sticky) {
       this.notify.clearMessages();
     }
   }
diff --git a/ui/packages/consul-ui/app/modifiers/on-outside.js b/ui/packages/consul-ui/app/modifiers/on-outside.js
index fe32dee5ac..614eb93bfb 100644
--- a/ui/packages/consul-ui/app/modifiers/on-outside.js
+++ b/ui/packages/consul-ui/app/modifiers/on-outside.js
@@ -10,7 +10,7 @@ export default class OnOutsideModifier extends Modifier {
     this.doc = this.dom.document();
   }
   async connect(params, options) {
-    await new Promise(resolve => setTimeout(resolve, 0));
+    await new Promise((resolve) => setTimeout(resolve, 0));
     try {
       this.doc.addEventListener(params[0], this.listen);
     } catch (e) {
@@ -21,7 +21,7 @@ export default class OnOutsideModifier extends Modifier {
   @action
   listen(e) {
     if (this.dom.isOutside(this.element, e.target)) {
-      const dispatch = typeof this.params[1] === 'function' ? this.params[1] : _ => {};
+      const dispatch = typeof this.params[1] === 'function' ? this.params[1] : (_) => {};
       dispatch.apply(this.element, [e]);
     }
   }
diff --git a/ui/packages/consul-ui/app/modifiers/style.js b/ui/packages/consul-ui/app/modifiers/style.js
index 69a4b971f7..8089743b26 100644
--- a/ui/packages/consul-ui/app/modifiers/style.js
+++ b/ui/packages/consul-ui/app/modifiers/style.js
@@ -4,8 +4,8 @@ import { assert } from '@ember/debug';
 export default class StyleModifier extends Modifier {
   setStyles(newStyles = []) {
     const rulesToRemove = this._oldStyles || new Set();
-    if(!Array.isArray(newStyles)) {
-      newStyles = Object.entries(newStyles)
+    if (!Array.isArray(newStyles)) {
+      newStyles = Object.entries(newStyles);
     }
     newStyles.forEach(([property, value]) => {
       assert(
@@ -36,15 +36,12 @@ export default class StyleModifier extends Modifier {
   }
 
   didReceiveArguments() {
-    if(typeof this.args.named.delay !== 'undefined') {
-      setTimeout(
-        _ => {
-          if(typeof this !== this.args.positional[0]) {
-            this.setStyles(this.args.positional[0]);
-          }
-        },
-        this.args.named.delay
-      )
+    if (typeof this.args.named.delay !== 'undefined') {
+      setTimeout((_) => {
+        if (typeof this !== this.args.positional[0]) {
+          this.setStyles(this.args.positional[0]);
+        }
+      }, this.args.named.delay);
     } else {
       this.setStyles(this.args.positional[0]);
     }
diff --git a/ui/packages/consul-ui/app/modifiers/tooltip.js b/ui/packages/consul-ui/app/modifiers/tooltip.js
index aa95deeb52..c2127da543 100644
--- a/ui/packages/consul-ui/app/modifiers/tooltip.js
+++ b/ui/packages/consul-ui/app/modifiers/tooltip.js
@@ -8,7 +8,7 @@ import tippy, { followCursor } from 'tippy.js';
  * {{tooltip 'Text' options=(hash )}}
  */
 export default modifier(($element, [content], hash = {}) => {
-  if(typeof content === 'string' && content.trim() === '') {
+  if (typeof content === 'string' && content.trim() === '') {
     return;
   }
   const options = hash.options || {};
@@ -40,7 +40,7 @@ export default modifier(($element, [content], hash = {}) => {
     // amount of time specified by the delay
     const delay = options.delay || [];
     if (typeof delay[1] !== 'undefined') {
-      hash.options.onShown = tooltip => {
+      hash.options.onShown = (tooltip) => {
         clearInterval(interval);
         interval = setTimeout(() => {
           tooltip.hide();
@@ -57,12 +57,12 @@ export default modifier(($element, [content], hash = {}) => {
   const tooltip = tippy($anchor, {
     theme: 'tooltip',
     triggerTarget: $trigger,
-    content: $anchor => content,
+    content: ($anchor) => content,
     // showOnCreate: true,
     // hideOnClick: false,
-    plugins: [
-      typeof options.followCursor !== 'undefined' ? followCursor : undefined,
-    ].filter(item => Boolean(item)),
+    plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(
+      (item) => Boolean(item)
+    ),
     ...hash.options,
   });
 
diff --git a/ui/packages/consul-ui/app/modifiers/validate.js b/ui/packages/consul-ui/app/modifiers/validate.js
index 72c0b8bb93..9bf996cb0b 100644
--- a/ui/packages/consul-ui/app/modifiers/validate.js
+++ b/ui/packages/consul-ui/app/modifiers/validate.js
@@ -4,12 +4,11 @@ import { action } from '@ember/object';
 class ValidationError extends Error {}
 
 export default class ValidateModifier extends Modifier {
-
   item = null;
   hash = null;
 
   validate(value, validations = {}) {
-    if(Object.keys(validations).length === 0) {
+    if (Object.keys(validations).length === 0) {
       return;
     }
     const errors = {};
@@ -18,66 +17,60 @@ export default class ValidateModifier extends Modifier {
       .filter(([key, value]) => typeof value !== 'string')
       .forEach(([key, item]) => {
         // optionally set things for you
-        if(this.item) {
+        if (this.item) {
           this.item[key] = value;
         }
         (item || []).forEach((validation) => {
           const re = new RegExp(validation.test);
-          if(!re.test(value)) {
+          if (!re.test(value)) {
             errors[key] = new ValidationError(validation.error);
           }
         });
-    });
-    const state = this.hash.chart.state;
-    if(state.context == null) {
+      });
+    const state = this.hash.chart.state || {};
+    if (state.context == null) {
       state.context = {};
     }
-    if(Object.keys(errors).length > 0) {
+    if (Object.keys(errors).length > 0) {
       state.context.errors = errors;
-      this.hash.chart.dispatch("ERROR", state.context);
+      this.hash.chart.dispatch('ERROR', state.context);
     } else {
       state.context.errors = null;
-      this.hash.chart.dispatch("RESET", state.context);
+      this.hash.chart.dispatch('RESET', state.context);
     }
   }
 
   @action
   reset(e) {
-    if(e.target.value.length === 0) {
+    if (e.target.value.length === 0) {
       const state = this.hash.chart.state;
-      if(!state.context) {
+      if (!state.context) {
         state.context = {};
       }
-      if(!state.context.errors) {
+      if (!state.context.errors) {
         state.context.errors = {};
       }
       Object.entries(this.hash.validations)
         // filter out strings, for now these are helps, but ain't great if someone has a item.help
         .filter(([key, value]) => typeof value !== 'string')
         .forEach(([key, item]) => {
-          if(typeof state.context.errors[key] !== 'undefined') {
+          if (typeof state.context.errors[key] !== 'undefined') {
             delete state.context.errors[key];
           }
-      });
-      if(Object.keys(state.context.errors).length === 0) {
+        });
+      if (Object.keys(state.context.errors).length === 0) {
         state.context.errors = null;
-        this.hash.chart.dispatch("RESET", state.context);
+        this.hash.chart.dispatch('RESET', state.context);
       }
     }
   }
 
   async connect([value], _hash) {
-    this.element.addEventListener(
-      'input',
-      this.listen
-    );
-    this.element.addEventListener(
-      'blur',
-      this.reset
-    );
-    if(this.element.value.length > 0) {
+    this.element.addEventListener('input', this.listen);
+    this.element.addEventListener('blur', this.reset);
+    if (this.element.value.length > 0) {
       await Promise.resolve();
-      if(this && this.element) {
+      if (this && this.element) {
         this.validate(this.element.value, this.hash.validations);
       }
     }
@@ -91,17 +84,10 @@ export default class ValidateModifier extends Modifier {
   disconnect() {
     this.item = null;
     this.hash = null;
-    this.element.removeEventListener(
-      'input',
-      this.listen
-    )
-    this.element.removeEventListener(
-      'blur',
-      this.reset
-    )
+    this.element.removeEventListener('input', this.listen);
+    this.element.removeEventListener('blur', this.reset);
   }
 
-
   didReceiveArguments() {
     const [value] = this.args.positional;
     const _hash = this.args.named;
@@ -109,13 +95,13 @@ export default class ValidateModifier extends Modifier {
     this.item = value;
     this.hash = _hash;
 
-    if(typeof _hash.chart === 'undefined') {
+    if (typeof _hash.chart === 'undefined') {
       this.hash.chart = {
         state: {
-          context: {}
+          context: {},
         },
         dispatch: (state) => {
-          switch(state) {
+          switch (state) {
             case 'ERROR':
               _hash.onchange(this.hash.chart.state.context.errors);
               break;
@@ -123,9 +109,8 @@ export default class ValidateModifier extends Modifier {
               _hash.onchange();
               break;
           }
-        }
+        },
       };
-
     }
   }
 
diff --git a/ui/packages/consul-ui/app/modifiers/with-copyable.js b/ui/packages/consul-ui/app/modifiers/with-copyable.js
index 562f058755..fc41a60e31 100644
--- a/ui/packages/consul-ui/app/modifiers/with-copyable.js
+++ b/ui/packages/consul-ui/app/modifiers/with-copyable.js
@@ -14,18 +14,18 @@ export default class WithCopyableModifier extends Modifier {
   connect([value], _hash) {
     value = typeAssertion('string', value, this.element.innerText);
     const hash = {
-      success: e => {
-        runInDebug(_ => console.info(`with-copyable: Copied \`${value}\``));
+      success: (e) => {
+        runInDebug((_) => console.info(`with-copyable: Copied \`${value}\``));
         return typeAssertion('function', _hash.success, () => {})(e);
       },
-      error: e => {
-        runInDebug(_ => console.info(`with-copyable: Error copying \`${value}\``));
+      error: (e) => {
+        runInDebug((_) => console.info(`with-copyable: Error copying \`${value}\``));
         return typeAssertion('function', _hash.error, () => {})(e);
       },
     };
     this.source = this.clipboard
       .execute(this.element, {
-        text: _ => value,
+        text: (_) => value,
         ...hash.options,
       })
       .on('success', hash.success)
diff --git a/ui/packages/consul-ui/app/modifiers/with-overlay.js b/ui/packages/consul-ui/app/modifiers/with-overlay.js
index 74ba4a608e..1248ef0c70 100644
--- a/ui/packages/consul-ui/app/modifiers/with-overlay.js
+++ b/ui/packages/consul-ui/app/modifiers/with-overlay.js
@@ -40,7 +40,7 @@ export default modifier(($element, [content], hash = {}) => {
     // amount of time specified by the delay
     const delay = options.delay || [];
     if (typeof delay[1] !== 'undefined') {
-      options.onShown = popover => {
+      options.onShown = (popover) => {
         clearInterval(interval);
         interval = setTimeout(() => {
           popover.hide();
@@ -51,12 +51,12 @@ export default modifier(($element, [content], hash = {}) => {
   let $trigger = $anchor;
   const popover = tippy($anchor, {
     triggerTarget: $trigger,
-    content: $anchor => content,
+    content: ($anchor) => content,
     // showOnCreate: true,
     // hideOnClick: false,
     interactive: true,
-    plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(item =>
-      Boolean(item)
+    plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(
+      (item) => Boolean(item)
     ),
     ...options,
   });
diff --git a/ui/packages/consul-ui/app/router.js b/ui/packages/consul-ui/app/router.js
index f89519e6fb..f4b1f49c89 100644
--- a/ui/packages/consul-ui/app/router.js
+++ b/ui/packages/consul-ui/app/router.js
@@ -10,7 +10,9 @@ const doc = document;
 const appName = config.modulePrefix;
 
 export const routes = merge.all(
-  [...doc.querySelectorAll(`script[data-routes]`)].map($item => JSON.parse($item.dataset[`routes`]))
+  [...doc.querySelectorAll(`script[data-routes]`)].map(($item) =>
+    JSON.parse($item.dataset[`routes`])
+  )
 );
 
 runInDebug(() => {
@@ -27,7 +29,7 @@ runInDebug(() => {
           _options: { path: page.name },
         };
       }
-      page.pages.forEach(page => {
+      page.pages.forEach((page) => {
         const url = page.relativeUrl;
         if (typeof url === 'string') {
           if (url !== '') {
@@ -37,7 +39,7 @@ runInDebug(() => {
           }
         }
       });
-      page.children.forEach(child => {
+      page.children.forEach((child) => {
         addPage(route, child);
       });
     })(routes, output.default.nested);
diff --git a/ui/packages/consul-ui/app/routes/application.js b/ui/packages/consul-ui/app/routes/application.js
index 53c2312c63..dd81c34984 100644
--- a/ui/packages/consul-ui/app/routes/application.js
+++ b/ui/packages/consul-ui/app/routes/application.js
@@ -14,14 +14,14 @@ export default class ApplicationRoute extends Route.extend(WithBlockingActions)
   data;
 
   async model() {
-    if(this.env.var('CONSUL_ACLS_ENABLED')) {
+    if (this.env.var('CONSUL_ACLS_ENABLED')) {
       const secret = this.env.var('CONSUL_HTTP_TOKEN');
       const existing = await this.settings.findBySlug('token');
-      if(!existing.AccessorID && secret) {
+      if (!existing.AccessorID && secret) {
         try {
           const token = await this.tokenRepo.self({
             secret: secret,
-            dc: this.env.var('CONSUL_DATACENTER_LOCAL')
+            dc: this.env.var('CONSUL_DATACENTER_LOCAL'),
           });
           await this.settings.persist({
             token: {
@@ -29,10 +29,10 @@ export default class ApplicationRoute extends Route.extend(WithBlockingActions)
               SecretID: token.SecretID,
               Namespace: token.Namespace,
               Partition: token.Partition,
-            }
+            },
           });
-        } catch(e) {
-          runInDebug(_ => console.error(e));
+        } catch (e) {
+          runInDebug((_) => console.error(e));
         }
       }
     }
@@ -42,16 +42,16 @@ export default class ApplicationRoute extends Route.extend(WithBlockingActions)
   @action
   onClientChanged(e) {
     let data = e.data;
-    if(data === '') {
+    if (data === '') {
       data = { blocking: true };
     }
     // this.data is always undefined first time round and its the 'first read'
     // of the value so we don't need to abort anything
-    if(typeof this.data === 'undefined') {
+    if (typeof this.data === 'undefined') {
       this.data = Object.assign({}, data);
       return;
     }
-    if(this.data.blocking === true && data.blocking === false) {
+    if (this.data.blocking === true && data.blocking === false) {
       this.client.abort();
     }
     this.data = Object.assign({}, data);
diff --git a/ui/packages/consul-ui/app/routes/dc/services/show/topology.js b/ui/packages/consul-ui/app/routes/dc/services/show/topology.js
index e468ebd90c..a90477a633 100644
--- a/ui/packages/consul-ui/app/routes/dc/services/show/topology.js
+++ b/ui/packages/consul-ui/app/routes/dc/services/show/topology.js
@@ -15,7 +15,7 @@ export default class TopologyRoute extends Route {
     try {
       // intentions will be a proxy object
       let intentions = await this.intentions;
-      let intention = intentions.find(item => {
+      let intention = intentions.find((item) => {
         return (
           item.Datacenter === source.Datacenter &&
           item.SourceName === source.Name &&
@@ -56,7 +56,7 @@ export default class TopologyRoute extends Route {
       ...this.paramsFor('dc.services.show'),
     };
     this.intentions = this.data.source(
-      uri =>
+      (uri) =>
         uri`/${params.partition}/${params.nspace}/${params.dc}/intentions/for-service/${params.name}`
     );
   }
diff --git a/ui/packages/consul-ui/app/routing/application-debug.js b/ui/packages/consul-ui/app/routing/application-debug.js
index 013dffa07d..fb4d86de7c 100644
--- a/ui/packages/consul-ui/app/routing/application-debug.js
+++ b/ui/packages/consul-ui/app/routing/application-debug.js
@@ -1,7 +1,7 @@
 import ApplicationRoute from '../routes/application';
 
 let isDebugRoute = false;
-const routeChange = function(transition) {
+const routeChange = function (transition) {
   isDebugRoute = transition.to.name.startsWith('docs');
 };
 
diff --git a/ui/packages/consul-ui/app/routing/route.js b/ui/packages/consul-ui/app/routing/route.js
index c50b975a85..25d3dcdd43 100644
--- a/ui/packages/consul-ui/app/routing/route.js
+++ b/ui/packages/consul-ui/app/routing/route.js
@@ -34,9 +34,7 @@ export default class BaseRoute extends Route {
       // which is why I didn't do it originally so be sure to look properly if
       // you feel like adding a return
       this.replaceWith(
-        resolve(this.routeName.split('.').join('/'), to)
-          .split('/')
-          .join('.'),
+        resolve(this.routeName.split('.').join('/'), to).split('/').join('.'),
         model
       );
     }
@@ -65,7 +63,7 @@ export default class BaseRoute extends Route {
         if (Array.isArray(actual)) {
           actual = actual.split(',');
         }
-        const diff = possible.filter(item => !actual.includes(item));
+        const diff = possible.filter((item) => !actual.includes(item));
         if (diff.length === 0) {
           value = undefined;
         }
diff --git a/ui/packages/consul-ui/app/routing/single.js b/ui/packages/consul-ui/app/routing/single.js
index 2fe4c3955b..ce38ddeb4b 100644
--- a/ui/packages/consul-ui/app/routing/single.js
+++ b/ui/packages/consul-ui/app/routing/single.js
@@ -3,10 +3,10 @@ import { assert } from '@ember/debug';
 import { Promise, hash } from 'rsvp';
 export default Route.extend({
   // repo: service('repositoryName'),
-  isCreate: function(params, transition) {
+  isCreate: function (params, transition) {
     return transition.targetName.split('.').pop() === 'create';
   },
-  model: function(params, transition) {
+  model: function (params, transition) {
     const repo = this.repo;
     assert(
       "`repo` is undefined, please define RepositoryService using `repo: service('repositoryName')`",
diff --git a/ui/packages/consul-ui/app/search/predicates/acl.js b/ui/packages/consul-ui/app/search/predicates/acl.js
index 6e3992e014..97450a10ba 100644
--- a/ui/packages/consul-ui/app/search/predicates/acl.js
+++ b/ui/packages/consul-ui/app/search/predicates/acl.js
@@ -1,4 +1,4 @@
 export default {
-  ID: item => item.ID,
-  Name: item => item.Name,
+  ID: (item) => item.ID,
+  Name: (item) => item.Name,
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/auth-method.js b/ui/packages/consul-ui/app/search/predicates/auth-method.js
index 15a6cf3514..514a421e73 100644
--- a/ui/packages/consul-ui/app/search/predicates/auth-method.js
+++ b/ui/packages/consul-ui/app/search/predicates/auth-method.js
@@ -1,4 +1,4 @@
 export default {
-  Name: item => item.Name,
-  DisplayName: item => item.DisplayName,
+  Name: (item) => item.Name,
+  DisplayName: (item) => item.DisplayName,
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/health-check.js b/ui/packages/consul-ui/app/search/predicates/health-check.js
index dfe69d3136..f1146c3772 100644
--- a/ui/packages/consul-ui/app/search/predicates/health-check.js
+++ b/ui/packages/consul-ui/app/search/predicates/health-check.js
@@ -1,13 +1,13 @@
-const asArray = function(arr) {
+const asArray = function (arr) {
   return Array.isArray(arr) ? arr : arr.toArray();
 };
 export default {
-  Name: item => item.Name,
-  Node: item => item.Node,
-  Service: item => item.ServiceName,
-  CheckID: item => item.CheckID || '',
-  ID: item => item.Service.ID || '',
-  Notes: item => item.Notes,
-  Output: item => item.Output,
-  ServiceTags: item => asArray(item.ServiceTags),
+  Name: (item) => item.Name,
+  Node: (item) => item.Node,
+  Service: (item) => item.ServiceName,
+  CheckID: (item) => item.CheckID || '',
+  ID: (item) => item.Service.ID || '',
+  Notes: (item) => item.Notes,
+  Output: (item) => item.Output,
+  ServiceTags: (item) => asArray(item.ServiceTags),
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/intention.js b/ui/packages/consul-ui/app/search/predicates/intention.js
index b4f2f3e516..dffd51438c 100644
--- a/ui/packages/consul-ui/app/search/predicates/intention.js
+++ b/ui/packages/consul-ui/app/search/predicates/intention.js
@@ -1,7 +1,7 @@
 const allLabel = 'All Services (*)';
 export default {
-  SourceName: item =>
+  SourceName: (item) =>
     [item.SourceName, item.SourceName === '*' ? allLabel : undefined].filter(Boolean),
-  DestinationName: item =>
+  DestinationName: (item) =>
     [item.DestinationName, item.DestinationName === '*' ? allLabel : undefined].filter(Boolean),
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/kv.js b/ui/packages/consul-ui/app/search/predicates/kv.js
index 76d5fe5a38..ffdc035e1d 100644
--- a/ui/packages/consul-ui/app/search/predicates/kv.js
+++ b/ui/packages/consul-ui/app/search/predicates/kv.js
@@ -1,8 +1,8 @@
 import rightTrim from 'consul-ui/utils/right-trim';
 export default {
-  Key: item =>
+  Key: (item) =>
     rightTrim(item.Key.toLowerCase())
       .split('/')
-      .filter(item => Boolean(item))
+      .filter((item) => Boolean(item))
       .pop(),
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/node.js b/ui/packages/consul-ui/app/search/predicates/node.js
index b780a6b1e2..8db2ff828f 100644
--- a/ui/packages/consul-ui/app/search/predicates/node.js
+++ b/ui/packages/consul-ui/app/search/predicates/node.js
@@ -1,6 +1,6 @@
 export default {
-  Node: item => item.Node,
-  Address: item => item.Address,
-  PeerName: item => item.PeerName,
-  Meta: item => Object.entries(item.Meta || {}).reduce((prev, entry) => prev.concat(entry), []),
+  Node: (item) => item.Node,
+  Address: (item) => item.Address,
+  PeerName: (item) => item.PeerName,
+  Meta: (item) => Object.entries(item.Meta || {}).reduce((prev, entry) => prev.concat(entry), []),
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/nspace.js b/ui/packages/consul-ui/app/search/predicates/nspace.js
index ada8ea8aa1..cccbe018b4 100644
--- a/ui/packages/consul-ui/app/search/predicates/nspace.js
+++ b/ui/packages/consul-ui/app/search/predicates/nspace.js
@@ -1,12 +1,12 @@
 export default {
-  Name: item => item.Name,
-  Description: item => item.Description,
-  Role: item => {
+  Name: (item) => item.Name,
+  Description: (item) => item.Description,
+  Role: (item) => {
     const acls = item.ACLs || {};
-    return (acls.RoleDefaults || []).map(item => item.Name);
+    return (acls.RoleDefaults || []).map((item) => item.Name);
   },
-  Policy: item => {
+  Policy: (item) => {
     const acls = item.ACLs || {};
-    return (acls.PolicyDefaults || []).map(item => item.Name);
+    return (acls.PolicyDefaults || []).map((item) => item.Name);
   },
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/peer.js b/ui/packages/consul-ui/app/search/predicates/peer.js
index 5f1606a8ed..745efbaeb6 100644
--- a/ui/packages/consul-ui/app/search/predicates/peer.js
+++ b/ui/packages/consul-ui/app/search/predicates/peer.js
@@ -1,4 +1,4 @@
 export default {
-  Name: item => item.Name,
-  ID: item => item.ID,
+  Name: (item) => item.Name,
+  ID: (item) => item.ID,
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/policy.js b/ui/packages/consul-ui/app/search/predicates/policy.js
index a9efe85829..f4f9cd6414 100644
--- a/ui/packages/consul-ui/app/search/predicates/policy.js
+++ b/ui/packages/consul-ui/app/search/predicates/policy.js
@@ -1,4 +1,4 @@
 export default {
-  Name: item => item.Name,
-  Description: item => item.Description,
+  Name: (item) => item.Name,
+  Description: (item) => item.Description,
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/role.js b/ui/packages/consul-ui/app/search/predicates/role.js
index 397f2f61e0..21fd3ec3d7 100644
--- a/ui/packages/consul-ui/app/search/predicates/role.js
+++ b/ui/packages/consul-ui/app/search/predicates/role.js
@@ -1,10 +1,10 @@
 export default {
-  Name: item => item.Name,
-  Description: item => item.Description,
-  Policy: item => {
+  Name: (item) => item.Name,
+  Description: (item) => item.Description,
+  Policy: (item) => {
     return (item.Policies || [])
-      .map(item => item.Name)
-      .concat((item.ServiceIdentities || []).map(item => item.ServiceName))
-      .concat((item.NodeIdentities || []).map(item => item.NodeName));
+      .map((item) => item.Name)
+      .concat((item.ServiceIdentities || []).map((item) => item.ServiceName))
+      .concat((item.NodeIdentities || []).map((item) => item.NodeName));
   },
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/service-instance.js b/ui/packages/consul-ui/app/search/predicates/service-instance.js
index 0f059e580d..7dbc5bad8c 100644
--- a/ui/packages/consul-ui/app/search/predicates/service-instance.js
+++ b/ui/packages/consul-ui/app/search/predicates/service-instance.js
@@ -1,12 +1,12 @@
 export default {
-  Name: item => item.Name,
-  Node: item => item.Node.Node,
-  Tags: item => item.Service.Tags || [],
-  ID: item => item.Service.ID || '',
-  Address: item => item.Address || '',
-  Port: item => (item.Service.Port || '').toString(),
-  ['Service.Meta']: item =>
+  Name: (item) => item.Name,
+  Node: (item) => item.Node.Node,
+  Tags: (item) => item.Service.Tags || [],
+  ID: (item) => item.Service.ID || '',
+  Address: (item) => item.Address || '',
+  Port: (item) => (item.Service.Port || '').toString(),
+  ['Service.Meta']: (item) =>
     Object.entries(item.Service.Meta || {}).reduce((prev, entry) => prev.concat(entry), []),
-  ['Node.Meta']: item =>
+  ['Node.Meta']: (item) =>
     Object.entries(item.Node.Meta || {}).reduce((prev, entry) => prev.concat(entry), []),
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/service.js b/ui/packages/consul-ui/app/search/predicates/service.js
index 63d2d17901..d67e8a8d9a 100644
--- a/ui/packages/consul-ui/app/search/predicates/service.js
+++ b/ui/packages/consul-ui/app/search/predicates/service.js
@@ -1,6 +1,6 @@
 export default {
-  Name: item => item.Name,
-  Tags: item => item.Tags || [],
-  PeerName: item => item.PeerName,
-  Partition: item => item.Partition,
+  Name: (item) => item.Name,
+  Tags: (item) => item.Tags || [],
+  PeerName: (item) => item.PeerName,
+  Partition: (item) => item.Partition,
 };
diff --git a/ui/packages/consul-ui/app/search/predicates/token.js b/ui/packages/consul-ui/app/search/predicates/token.js
index 87dc7a75ec..027722906f 100644
--- a/ui/packages/consul-ui/app/search/predicates/token.js
+++ b/ui/packages/consul-ui/app/search/predicates/token.js
@@ -1,12 +1,12 @@
 export default {
-  Name: item => item.Name,
-  Description: item => item.Description,
-  AccessorID: item => item.AccessorID,
-  Role: item => (item.Roles || []).map(item => item.Name),
-  Policy: item => {
+  Name: (item) => item.Name,
+  Description: (item) => item.Description,
+  AccessorID: (item) => item.AccessorID,
+  Role: (item) => (item.Roles || []).map((item) => item.Name),
+  Policy: (item) => {
     return (item.Policies || [])
-      .map(item => item.Name)
-      .concat((item.ServiceIdentities || []).map(item => item.ServiceName))
-      .concat((item.NodeIdentities || []).map(item => item.NodeName));
+      .map((item) => item.Name)
+      .concat((item.ServiceIdentities || []).map((item) => item.ServiceName))
+      .concat((item.NodeIdentities || []).map((item) => item.NodeName));
   },
 };
diff --git a/ui/packages/consul-ui/app/serializers/application.js b/ui/packages/consul-ui/app/serializers/application.js
index dc5b313838..9bc5ef5062 100644
--- a/ui/packages/consul-ui/app/serializers/application.js
+++ b/ui/packages/consul-ui/app/serializers/application.js
@@ -14,17 +14,17 @@ import { NSPACE_KEY } from 'consul-ui/models/nspace';
 import { PARTITION_KEY } from 'consul-ui/models/partition';
 import createFingerprinter from 'consul-ui/utils/create-fingerprinter';
 
-const map = function(obj, cb) {
+const map = function (obj, cb) {
   if (!Array.isArray(obj)) {
     return [obj].map(cb)[0];
   }
   return obj.map(cb);
 };
 
-const attachHeaders = function(headers, body, query = {}) {
+const attachHeaders = function (headers, body, query = {}) {
   // lowercase everything incase we get browser inconsistencies
   const lower = {};
-  Object.keys(headers).forEach(function(key) {
+  Object.keys(headers).forEach(function (key) {
     lower[key.toLowerCase()] = headers[key];
   });
   //
@@ -200,7 +200,7 @@ export default class ApplicationSerializer extends Serializer {
     }
     if (requestType === 'query') {
       meta.date = this.timestamp();
-      payload.forEach(function(item) {
+      payload.forEach(function (item) {
         set(item, 'SyncTime', meta.date);
       });
     }
diff --git a/ui/packages/consul-ui/app/serializers/discovery-chain.js b/ui/packages/consul-ui/app/serializers/discovery-chain.js
index e8faa8b00f..f3a9783ec3 100644
--- a/ui/packages/consul-ui/app/serializers/discovery-chain.js
+++ b/ui/packages/consul-ui/app/serializers/discovery-chain.js
@@ -6,8 +6,8 @@ export default class DiscoveryChainSerializer extends Serializer {
   slugKey = SLUG_KEY;
 
   respondForQueryRecord(respond, query) {
-    return super.respondForQueryRecord(function(cb) {
-      return respond(function(headers, body) {
+    return super.respondForQueryRecord(function (cb) {
+      return respond(function (headers, body) {
         return cb(headers, {
           ...body,
           [SLUG_KEY]: body.Chain[SLUG_KEY],
diff --git a/ui/packages/consul-ui/app/serializers/intention.js b/ui/packages/consul-ui/app/serializers/intention.js
index 6fbd35ad91..5102ec341e 100644
--- a/ui/packages/consul-ui/app/serializers/intention.js
+++ b/ui/packages/consul-ui/app/serializers/intention.js
@@ -35,11 +35,11 @@ export default class IntentionSerializer extends Serializer {
 
   respondForQuery(respond, query) {
     return super.respondForQuery(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           return cb(
             headers,
-            body.map(item => this.ensureID(item))
+            body.map((item) => this.ensureID(item))
           );
         }),
       query
@@ -48,7 +48,7 @@ export default class IntentionSerializer extends Serializer {
 
   respondForQueryRecord(respond, query) {
     return super.respondForQueryRecord(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           body = this.ensureID(body);
           return cb(headers, body);
diff --git a/ui/packages/consul-ui/app/serializers/kv.js b/ui/packages/consul-ui/app/serializers/kv.js
index b7dd2eaf91..b3c711b8d3 100644
--- a/ui/packages/consul-ui/app/serializers/kv.js
+++ b/ui/packages/consul-ui/app/serializers/kv.js
@@ -16,7 +16,7 @@ export default class KvSerializer extends Serializer {
 
   respondForQueryRecord(respond, query) {
     return super.respondForQueryRecord(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           // If item.Session is not set make sure we overwrite any existing one.
           // Using @replace, defaultValue or similar model apporaches does not work
@@ -34,11 +34,11 @@ export default class KvSerializer extends Serializer {
 
   respondForQuery(respond, query) {
     return super.respondForQuery(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           return cb(
             headers,
-            body.map(item => {
+            body.map((item) => {
               return {
                 [this.slugKey]: item,
               };
diff --git a/ui/packages/consul-ui/app/serializers/node.js b/ui/packages/consul-ui/app/serializers/node.js
index 5b74d4601d..1394458848 100644
--- a/ui/packages/consul-ui/app/serializers/node.js
+++ b/ui/packages/consul-ui/app/serializers/node.js
@@ -5,7 +5,7 @@ import { classify } from '@ember/string';
 
 // TODO: Looks like ID just isn't used at all consider just using .Node for
 // the SLUG_KEY
-const fillSlug = function(item) {
+const fillSlug = function (item) {
   if (item[SLUG_KEY] === '') {
     item[SLUG_KEY] = item['Node'];
   }
@@ -28,10 +28,10 @@ export default class NodeSerializer extends Serializer.extend(EmbeddedRecordsMix
     switch (relationship.key) {
       case 'Services':
         (item.Checks || [])
-          .filter(item => {
+          .filter((item) => {
             return item.ServiceID !== '';
           })
-          .forEach(item => {
+          .forEach((item) => {
             if (typeof checks[item.ServiceID] === 'undefined') {
               checks[item.ServiceID] = [];
             }
@@ -41,7 +41,7 @@ export default class NodeSerializer extends Serializer.extend(EmbeddedRecordsMix
           item.PeerName = undefined;
         }
         serializer = this.store.serializerFor(relationship.type);
-        item.Services = item.Services.map(service =>
+        item.Services = item.Services.map((service) =>
           serializer.transformHasManyResponseFromNode(item, service, checks)
         );
         return item;
@@ -51,11 +51,11 @@ export default class NodeSerializer extends Serializer.extend(EmbeddedRecordsMix
 
   respondForQuery(respond, query, data, modelClass) {
     const body = super.respondForQuery(
-      cb => respond((headers, body) => cb(headers, body.map(fillSlug))),
+      (cb) => respond((headers, body) => cb(headers, body.map(fillSlug))),
       query
     );
     modelClass.eachRelationship((key, relationship) => {
-      body.forEach(item =>
+      body.forEach((item) =>
         this[`transform${classify(relationship.kind)}Response`](
           this.store,
           relationship,
@@ -69,7 +69,7 @@ export default class NodeSerializer extends Serializer.extend(EmbeddedRecordsMix
 
   respondForQueryRecord(respond, query, data, modelClass) {
     const body = super.respondForQueryRecord(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           return cb(headers, fillSlug(body));
         }),
diff --git a/ui/packages/consul-ui/app/serializers/nspace.js b/ui/packages/consul-ui/app/serializers/nspace.js
index f3be665519..f30fd469d3 100644
--- a/ui/packages/consul-ui/app/serializers/nspace.js
+++ b/ui/packages/consul-ui/app/serializers/nspace.js
@@ -2,9 +2,9 @@ import Serializer from './application';
 import { get } from '@ember/object';
 import { PRIMARY_KEY, SLUG_KEY } from 'consul-ui/models/nspace';
 
-const normalizeACLs = item => {
+const normalizeACLs = (item) => {
   if (get(item, 'ACLs.PolicyDefaults')) {
-    item.ACLs.PolicyDefaults = item.ACLs.PolicyDefaults.map(function(item) {
+    item.ACLs.PolicyDefaults = item.ACLs.PolicyDefaults.map(function (item) {
       if (typeof item.template === 'undefined') {
         item.template = '';
       }
@@ -14,7 +14,7 @@ const normalizeACLs = item => {
   // Both of these might come though unset so we make sure we at least
   // have an empty array here so we can add children to them if we
   // need to whilst saving nspaces
-  ['PolicyDefaults', 'RoleDefaults'].forEach(function(prop) {
+  ['PolicyDefaults', 'RoleDefaults'].forEach(function (prop) {
     if (typeof item.ACLs === 'undefined') {
       item.ACLs = [];
     }
@@ -31,11 +31,11 @@ export default class NspaceSerializer extends Serializer {
 
   respondForQuery(respond, query, data, modelClass) {
     return super.respondForQuery(
-      cb =>
+      (cb) =>
         respond((headers, body) =>
           cb(
             headers,
-            body.map(function(item) {
+            body.map(function (item) {
               item.Namespace = '*';
               item.Datacenter = query.dc;
               return normalizeACLs(item);
@@ -48,7 +48,7 @@ export default class NspaceSerializer extends Serializer {
 
   respondForQueryRecord(respond, serialized, data) {
     return super.respondForQuery(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           body.Datacenter = serialized.dc;
           body.Namespace = '*';
@@ -61,7 +61,7 @@ export default class NspaceSerializer extends Serializer {
 
   respondForCreateRecord(respond, serialized, data) {
     return super.respondForCreateRecord(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           body.Datacenter = serialized.dc;
           body.Namespace = '*';
diff --git a/ui/packages/consul-ui/app/serializers/oidc-provider.js b/ui/packages/consul-ui/app/serializers/oidc-provider.js
index 996b8c7ea6..406c9ae4d6 100644
--- a/ui/packages/consul-ui/app/serializers/oidc-provider.js
+++ b/ui/packages/consul-ui/app/serializers/oidc-provider.js
@@ -17,7 +17,7 @@ export default class OidcSerializer extends Serializer {
     // add the name and nspace here so we can merge this
     // TODO: Look to see if we always want the merging functionality
     return super.respondForQueryRecord(
-      cb =>
+      (cb) =>
         respond((headers, body) =>
           cb(headers, {
             Name: query.id,
diff --git a/ui/packages/consul-ui/app/serializers/partition.js b/ui/packages/consul-ui/app/serializers/partition.js
index 067d98a1b5..32671a6718 100644
--- a/ui/packages/consul-ui/app/serializers/partition.js
+++ b/ui/packages/consul-ui/app/serializers/partition.js
@@ -7,11 +7,11 @@ export default class PartitionSerializer extends Serializer {
 
   respondForQuery(respond, query, data, modelClass) {
     return super.respondForQuery(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           return cb(
             headers,
-            body.map(item => {
+            body.map((item) => {
               item.Partition = '*';
               item.Namespace = '*';
               return item;
diff --git a/ui/packages/consul-ui/app/serializers/service-instance.js b/ui/packages/consul-ui/app/serializers/service-instance.js
index 422012171f..f0835064ad 100644
--- a/ui/packages/consul-ui/app/serializers/service-instance.js
+++ b/ui/packages/consul-ui/app/serializers/service-instance.js
@@ -61,7 +61,7 @@ export default class ServiceInstanceSerializer extends Serializer {
   }
 
   respondForQuery(respond, query) {
-    const body = super.respondForQuery(cb => {
+    const body = super.respondForQuery((cb) => {
       return respond((headers, body) => {
         if (body.length === 0) {
           const e = new Error();
@@ -73,7 +73,7 @@ export default class ServiceInstanceSerializer extends Serializer {
           ];
           throw e;
         }
-        body.forEach(item => {
+        body.forEach((item) => {
           item.Datacenter = query.dc;
           item.Namespace = query.ns || 'default';
           item.Partition = query.partition || 'default';
@@ -86,15 +86,15 @@ export default class ServiceInstanceSerializer extends Serializer {
   }
 
   respondForQueryRecord(respond, query) {
-    return super.respondForQueryRecord(cb => {
+    return super.respondForQueryRecord((cb) => {
       return respond((headers, body) => {
-        body.forEach(item => {
+        body.forEach((item) => {
           item.Datacenter = query.dc;
           item.Namespace = query.ns || 'default';
           item.Partition = query.partition || 'default';
           item.uid = this.extractUid(item);
         });
-        body = body.find(function(item) {
+        body = body.find(function (item) {
           return item.Node.Node === query.node && item.Service.ID === query.serviceId;
         });
         if (typeof body === 'undefined') {
diff --git a/ui/packages/consul-ui/app/serializers/service.js b/ui/packages/consul-ui/app/serializers/service.js
index 3d1c929012..9caa9b2cdd 100644
--- a/ui/packages/consul-ui/app/serializers/service.js
+++ b/ui/packages/consul-ui/app/serializers/service.js
@@ -8,28 +8,28 @@ export default class ServiceSerializer extends Serializer {
 
   respondForQuery(respond, query) {
     return super.respondForQuery(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           // Services and proxies all come together in the same list. Here we
           // map the proxies to their related services on a Service.Proxy
           // property for easy access later on
           const services = {};
           body
-            .filter(function(item) {
+            .filter(function (item) {
               return item.Kind !== 'connect-proxy';
             })
-            .forEach(item => {
+            .forEach((item) => {
               services[item.Name] = item;
             });
           body
-            .filter(function(item) {
+            .filter(function (item) {
               return item.Kind === 'connect-proxy';
             })
-            .forEach(item => {
+            .forEach((item) => {
               // Iterating to cover the usecase of a proxy being used by more
               // than one service
               if (item.ProxyFor) {
-                item.ProxyFor.forEach(service => {
+                item.ProxyFor.forEach((service) => {
                   if (typeof services[service] !== 'undefined') {
                     services[service].Proxy = item;
                   }
@@ -47,7 +47,7 @@ export default class ServiceSerializer extends Serializer {
     // Name is added here from the query, which is used to make the uid
     // Datacenter gets added in the ApplicationSerializer
     return super.respondForQueryRecord(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           return cb(headers, {
             Name: query.id,
diff --git a/ui/packages/consul-ui/app/serializers/session.js b/ui/packages/consul-ui/app/serializers/session.js
index b37fe6ff2b..65a8d1995c 100644
--- a/ui/packages/consul-ui/app/serializers/session.js
+++ b/ui/packages/consul-ui/app/serializers/session.js
@@ -7,7 +7,7 @@ export default class SessionSerializer extends Serializer {
 
   respondForQueryRecord(respond, query) {
     return super.respondForQueryRecord(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           if (body.length === 0) {
             const e = new Error();
diff --git a/ui/packages/consul-ui/app/serializers/token.js b/ui/packages/consul-ui/app/serializers/token.js
index 2264b52b87..ee57cf00bb 100644
--- a/ui/packages/consul-ui/app/serializers/token.js
+++ b/ui/packages/consul-ui/app/serializers/token.js
@@ -38,7 +38,7 @@ export default class TokenSerializer extends Serializer.extend(WithPolicies, Wit
 
   respondForUpdateRecord(respond, serialized, data) {
     return super.respondForUpdateRecord(
-      cb =>
+      (cb) =>
         respond((headers, body) => {
           // Sometimes we get `Policies: null`, make null equal an empty array
           if (typeof body.Policies === 'undefined' || body.Policies === null) {
diff --git a/ui/packages/consul-ui/app/serializers/topology.js b/ui/packages/consul-ui/app/serializers/topology.js
index 05ff6a2891..cb7274fa7f 100644
--- a/ui/packages/consul-ui/app/serializers/topology.js
+++ b/ui/packages/consul-ui/app/serializers/topology.js
@@ -10,16 +10,16 @@ export default class TopologySerializer extends Serializer {
 
   respondForQueryRecord(respond, query) {
     const intentionSerializer = this.store.serializerFor('intention');
-    return super.respondForQueryRecord(function(cb) {
-      return respond(function(headers, body) {
-        body.Downstreams.forEach(item => {
+    return super.respondForQueryRecord(function (cb) {
+      return respond(function (headers, body) {
+        body.Downstreams.forEach((item) => {
           item.Intention.SourceName = item.Name;
           item.Intention.SourceNS = item.Namespace;
           item.Intention.DestinationName = query.id;
           item.Intention.DestinationNS = query.ns || 'default';
           intentionSerializer.ensureID(item.Intention);
         });
-        body.Upstreams.forEach(item => {
+        body.Upstreams.forEach((item) => {
           item.Intention.SourceName = query.id;
           item.Intention.SourceNS = query.ns || 'default';
           item.Intention.DestinationName = item.Name;
diff --git a/ui/packages/consul-ui/app/services/auth-providers/oauth2-code-with-url-provider.js b/ui/packages/consul-ui/app/services/auth-providers/oauth2-code-with-url-provider.js
index 69aa83f74b..fca77fe4b2 100644
--- a/ui/packages/consul-ui/app/services/auth-providers/oauth2-code-with-url-provider.js
+++ b/ui/packages/consul-ui/app/services/auth-providers/oauth2-code-with-url-provider.js
@@ -15,14 +15,14 @@ export default class OAuth2CodeWithURLProvider extends OAuth2CodeProvider {
       responseType = 'code';
     return this.get('popup')
       .open(url, responseParams, options)
-      .then(function(authData) {
+      .then(function (authData) {
         // the same as the parent class but with an authorizationState added
         const creds = {
           authorizationState: authData.state,
           authorizationCode: decodeURIComponent(authData[responseType]),
           provider: name,
         };
-        runInDebug(_ =>
+        runInDebug((_) =>
           console.info('Retrieved the following creds from the OAuth Provider', creds)
         );
         return creds;
diff --git a/ui/packages/consul-ui/app/services/client/connections.js b/ui/packages/consul-ui/app/services/client/connections.js
index 45e7cb7256..2b4b3e546b 100644
--- a/ui/packages/consul-ui/app/services/client/connections.js
+++ b/ui/packages/consul-ui/app/services/client/connections.js
@@ -26,7 +26,7 @@ export default class ConnectionsService extends Service {
   addVisibilityChange() {
     // when the user hides the tab, abort all connections
     this._listeners.add(this.dom.document(), {
-      visibilitychange: e => {
+      visibilitychange: (e) => {
         if (e.target.hidden) {
           this.purge(-1);
         }
@@ -39,9 +39,9 @@ export default class ConnectionsService extends Service {
     // any aborted errors should restart
     const doc = this.dom.document();
     if (doc.hidden) {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         const remove = this._listeners.add(doc, {
-          visibilitychange: function(event) {
+          visibilitychange: function (event) {
             remove();
             // we resolve with the event that comes from
             // whenAvailable not visibilitychange
@@ -54,7 +54,7 @@ export default class ConnectionsService extends Service {
   }
 
   purge(statusCode = 0) {
-    [...this.connections].forEach(function(connection) {
+    [...this.connections].forEach(function (connection) {
       // Cancelled
       connection.abort(statusCode);
     });
@@ -64,7 +64,7 @@ export default class ConnectionsService extends Service {
   acquire(request) {
     if (this.connections.size >= this.env.var('CONSUL_HTTP_MAX_CONNECTIONS')) {
       const closed = this.data.closed();
-      let connection = [...this.connections].find(item => {
+      let connection = [...this.connections].find((item) => {
         const id = item.headers()['x-request-id'];
         if (id) {
           return closed.includes(item.headers()['x-request-id']);
diff --git a/ui/packages/consul-ui/app/services/client/http.js b/ui/packages/consul-ui/app/services/client/http.js
index 708b64d2a5..d36c70260e 100644
--- a/ui/packages/consul-ui/app/services/client/http.js
+++ b/ui/packages/consul-ui/app/services/client/http.js
@@ -15,8 +15,8 @@ import createHeaders from 'consul-ui/utils/http/create-headers';
 import createQueryParams from 'consul-ui/utils/http/create-query-params';
 
 // reopen EventSources if a user changes tab
-export const restartWhenAvailable = function(client) {
-  return function(e) {
+export const restartWhenAvailable = function (client) {
+  return function (e) {
     // setup the aborted connection restarting
     // this should happen here to avoid cache deletion
     const status = get(e, 'errors.firstObject.status');
@@ -36,13 +36,13 @@ const QueryParams = {
 };
 const parseHeaders = createHeaders();
 
-const parseBody = function(strs, ...values) {
+const parseBody = function (strs, ...values) {
   let body = {};
-  const doubleBreak = strs.reduce(function(prev, item, i) {
+  const doubleBreak = strs.reduce(function (prev, item, i) {
     // Ensure each line has no whitespace either end, including empty lines
     item = item
       .split('\n')
-      .map(item => item.trim())
+      .map((item) => item.trim())
       .join('\n');
     if (item.indexOf('\n\n') !== -1) {
       return i;
@@ -56,7 +56,7 @@ const parseBody = function(strs, ...values) {
     // matters slightly as we assumed post bodies would be an object.
     // This actually works as it just uses the value of the first object, if its an array
     // it concats
-    body = values.splice(doubleBreak).reduce(function(prev, item, i) {
+    body = values.splice(doubleBreak).reduce(function (prev, item, i) {
       switch (true) {
         case Array.isArray(item):
           if (i === 0) {
@@ -89,7 +89,9 @@ export default class HttpService extends Service {
   init() {
     super.init(...arguments);
     this._listeners = this.dom.listeners();
-    this.parseURL = createURL(encodeURIComponent, obj => QueryParams.stringify(this.sanitize(obj)));
+    this.parseURL = createURL(encodeURIComponent, (obj) =>
+      QueryParams.stringify(this.sanitize(obj))
+    );
     const uriTag = this.encoder.uriTag();
     this.cache = (data, id) => {
       // interpolate the URI
@@ -97,17 +99,15 @@ export default class HttpService extends Service {
       // save the time we received it for cache management purposes
       data.SyncTime = new Date().getTime();
       // save the data to the cache
-      return this.store.push(
-        {
-          data: {
-            id: data.uri,
-            // the model is encoded as the protocol in the URI
-            type: new URL(data.uri).protocol.slice(0, -1),
-            attributes: data
-          }
-        }
-      );
-    }
+      return this.store.push({
+        data: {
+          id: data.uri,
+          // the model is encoded as the protocol in the URI
+          type: new URL(data.uri).protocol.slice(0, -1),
+          attributes: data,
+        },
+      });
+    };
   }
 
   sanitize(obj) {
@@ -162,7 +162,7 @@ export default class HttpService extends Service {
       data: body,
     };
     // Remove and save things that shouldn't be sent in the request
-    params.clientHeaders = CLIENT_HEADERS.reduce(function(prev, item) {
+    params.clientHeaders = CLIENT_HEADERS.reduce(function (prev, item) {
       if (typeof params.headers[item] !== 'undefined') {
         prev[item.toLowerCase()] = params.headers[item];
         delete params.headers[item];
@@ -208,7 +208,7 @@ export default class HttpService extends Service {
   }
 
   fetchWithToken(path, params) {
-    return this.settings.findBySlug('token').then(token => {
+    return this.settings.findBySlug('token').then((token) => {
       return fetch(`${this.env.var('CONSUL_API_PREFIX')}${path}`, {
         ...params,
         credentials: 'include',
@@ -222,9 +222,9 @@ export default class HttpService extends Service {
   request(cb) {
     const client = this;
     const cache = this.cache;
-    return cb(function(strs, ...values) {
+    return cb(function (strs, ...values) {
       const params = client.requestParams(...arguments);
-      return client.settings.findBySlug('token').then(token => {
+      return client.settings.findBySlug('token').then((token) => {
         const options = {
           ...params,
           headers: {
@@ -235,12 +235,12 @@ export default class HttpService extends Service {
         const request = client.transport.request(options);
         return new Promise((resolve, reject) => {
           const remove = client._listeners.add(request, {
-            open: e => {
+            open: (e) => {
               client.acquire(e.target);
             },
-            message: e => {
+            message: (e) => {
               const headers = {
-                ...Object.entries(e.data.headers).reduce(function(prev, [key, value], i) {
+                ...Object.entries(e.data.headers).reduce(function (prev, [key, value], i) {
                   if (!CLIENT_HEADERS.includes(key)) {
                     prev[key] = value;
                   }
@@ -257,23 +257,20 @@ export default class HttpService extends Service {
                 [CONSUL_NAMESPACE]: params.data.ns || token.Namespace || 'default',
                 [CONSUL_PARTITION]: params.data.partition || token.Partition || 'default',
               };
-              const respond = function(cb) {
+              const respond = function (cb) {
                 let res = cb(headers, e.data.response, cache);
                 const meta = res.meta || {};
-                if(meta.version === 2) {
-                  if(Array.isArray(res.body)) {
-                    res = new Proxy(
-                      res.body,
-                      {
-                        get: (target, prop) => {
-                          switch(prop) {
-                            case 'meta':
-                              return meta;
-                          }
-                          return target[prop];
+                if (meta.version === 2) {
+                  if (Array.isArray(res.body)) {
+                    res = new Proxy(res.body, {
+                      get: (target, prop) => {
+                        switch (prop) {
+                          case 'meta':
+                            return meta;
                         }
-                      }
-                    );
+                        return target[prop];
+                      },
+                    });
                   } else {
                     res = res.body;
                     res.meta = meta;
@@ -283,10 +280,10 @@ export default class HttpService extends Service {
               };
               next(() => resolve(respond));
             },
-            error: e => {
+            error: (e) => {
               next(() => reject(e.error));
             },
-            close: e => {
+            close: (e) => {
               client.release(e.target);
               remove();
             },
diff --git a/ui/packages/consul-ui/app/services/client/transports/xhr.js b/ui/packages/consul-ui/app/services/client/transports/xhr.js
index 5040e64788..3c09e955f9 100644
--- a/ui/packages/consul-ui/app/services/client/transports/xhr.js
+++ b/ui/packages/consul-ui/app/services/client/transports/xhr.js
@@ -19,11 +19,11 @@ export default class XhrService extends Service {
     });
     const options = {
       ...params,
-      beforeSend: function(xhr) {
+      beforeSend: function (xhr) {
         request.open(xhr);
       },
       converters: {
-        'text json': function(response) {
+        'text json': function (response) {
           try {
             return JSON.parse(response);
           } catch (e) {
@@ -31,7 +31,7 @@ export default class XhrService extends Service {
           }
         },
       },
-      success: function(headers, response, status, statusText) {
+      success: function (headers, response, status, statusText) {
         // Response-ish
         request.respond({
           headers: headers,
@@ -40,7 +40,7 @@ export default class XhrService extends Service {
           statusText: statusText,
         });
       },
-      error: function(headers, response, status, statusText, err) {
+      error: function (headers, response, status, statusText, err) {
         let error;
         if (err instanceof Error) {
           error = err;
@@ -49,7 +49,7 @@ export default class XhrService extends Service {
         }
         request.error(error);
       },
-      complete: function(status) {
+      complete: function (status) {
         request.close();
       },
     };
diff --git a/ui/packages/consul-ui/app/services/clipboard/local-storage.js b/ui/packages/consul-ui/app/services/clipboard/local-storage.js
index a35774b5a7..7e431c19bd 100644
--- a/ui/packages/consul-ui/app/services/clipboard/local-storage.js
+++ b/ui/packages/consul-ui/app/services/clipboard/local-storage.js
@@ -20,7 +20,7 @@ export default class LocalStorageService extends Service {
   key = 'clipboard';
 
   execute(trigger, options) {
-    return new ClipboardCallback(trigger, options, val => {
+    return new ClipboardCallback(trigger, options, (val) => {
       this.doc.defaultView.localStorage.setItem(this.key, val);
     });
   }
diff --git a/ui/packages/consul-ui/app/services/data-sink/protocols/http.js b/ui/packages/consul-ui/app/services/data-sink/protocols/http.js
index 9a99eb796f..ed32a17626 100644
--- a/ui/packages/consul-ui/app/services/data-sink/protocols/http.js
+++ b/ui/packages/consul-ui/app/services/data-sink/protocols/http.js
@@ -27,16 +27,12 @@ export default class HttpService extends Service {
   persist(sink, instance) {
     const [, , , , model] = sink.split('/');
     const repo = this[model];
-    return this.client.request(
-      request => repo.persist(instance, request)
-    );
+    return this.client.request((request) => repo.persist(instance, request));
   }
 
   remove(sink, instance) {
     const [, , , , model] = sink.split('/');
     const repo = this[model];
-    return this.client.request(
-      request => repo.remove(instance, request)
-    );
+    return this.client.request((request) => repo.remove(instance, request));
   }
 }
diff --git a/ui/packages/consul-ui/app/services/data-sink/service.js b/ui/packages/consul-ui/app/services/data-sink/service.js
index 6e64c558c9..007a55a104 100644
--- a/ui/packages/consul-ui/app/services/data-sink/service.js
+++ b/ui/packages/consul-ui/app/services/data-sink/service.js
@@ -1,6 +1,6 @@
 import Service, { inject as service } from '@ember/service';
 
-const parts = function(uri) {
+const parts = function (uri) {
   uri = uri.toString();
   if (uri.indexOf('://') === -1) {
     uri = `consul://${uri}`;
diff --git a/ui/packages/consul-ui/app/services/data-source/protocols/http.js b/ui/packages/consul-ui/app/services/data-source/protocols/http.js
index 2e47db97a3..9d01ce2975 100644
--- a/ui/packages/consul-ui/app/services/data-source/protocols/http.js
+++ b/ui/packages/consul-ui/app/services/data-source/protocols/http.js
@@ -9,11 +9,9 @@ export default class HttpService extends Service {
   source(src, configuration) {
     const route = match(src);
     let find;
-    this.client.request(
-      request => {
-        find = route.cb(route.params, getOwner(this), request);
-      }
-    );
+    this.client.request((request) => {
+      find = route.cb(route.params, getOwner(this), request);
+    });
     return this.type.source(find, configuration);
   }
 }
diff --git a/ui/packages/consul-ui/app/services/data-source/protocols/http/blocking.js b/ui/packages/consul-ui/app/services/data-source/protocols/http/blocking.js
index b315d77e0a..f329d770db 100644
--- a/ui/packages/consul-ui/app/services/data-source/protocols/http/blocking.js
+++ b/ui/packages/consul-ui/app/services/data-source/protocols/http/blocking.js
@@ -21,7 +21,7 @@ export default class BlockingService extends Service {
       return maybeCall(deleteCursor, ifNotBlocking(this.settings))().then(() => {
         return find(configuration)
           .then(maybeCall(close, ifNotBlocking(this.settings)))
-          .then(function(res = {}) {
+          .then(function (res = {}) {
             const meta = get(res, 'meta') || {};
             if (typeof meta.cursor === 'undefined' && typeof meta.interval === 'undefined') {
               close();
diff --git a/ui/packages/consul-ui/app/services/data-source/protocols/local-storage.js b/ui/packages/consul-ui/app/services/data-source/protocols/local-storage.js
index e7046c82fb..0c2b0a62f4 100644
--- a/ui/packages/consul-ui/app/services/data-source/protocols/local-storage.js
+++ b/ui/packages/consul-ui/app/services/data-source/protocols/local-storage.js
@@ -8,7 +8,7 @@ export default class LocalStorageService extends Service {
   source(src, configuration) {
     const slug = src.split(':').pop();
     return new StorageEventSource(
-      configuration => {
+      (configuration) => {
         return this.repo.findBySlug(slug);
       },
       {
diff --git a/ui/packages/consul-ui/app/services/data-source/service.js b/ui/packages/consul-ui/app/services/data-source/service.js
index 0d4612557c..c07ae97495 100644
--- a/ui/packages/consul-ui/app/services/data-source/service.js
+++ b/ui/packages/consul-ui/app/services/data-source/service.js
@@ -44,7 +44,7 @@ export default class DataSourceService extends Service {
     // called on them, schedule any destroying to fire after the final render
     schedule('afterRender', () => {
       this._listeners.remove();
-      sources.forEach(function(item) {
+      sources.forEach(function (item) {
         item.close();
       });
       cache = null;
@@ -61,14 +61,14 @@ export default class DataSourceService extends Service {
       const source = this.open(src, ref, true);
       source.configuration.ref = ref;
       const remove = this._listeners.add(source, {
-        message: e => {
+        message: (e) => {
           remove();
           // the source only gets wrapped in the proxy
           // after the first message
           // but the proxy itself is resolve to the route
           resolve(proxy(e.target, e.data));
         },
-        error: e => {
+        error: (e) => {
           remove();
           this.close(source, ref);
           reject(e.error);
@@ -96,7 +96,7 @@ export default class DataSourceService extends Service {
     if (!(uri instanceof URI) && typeof uri !== 'string') {
       return this.unwrap(uri, ref);
     }
-    runInDebug(_ => {
+    runInDebug((_) => {
       if (!(uri instanceof URI)) {
         console.error(
           new Error(
@@ -122,7 +122,7 @@ export default class DataSourceService extends Service {
       configuration.uri = uri;
       source = provider.source(pathname, configuration);
       const remove = this._listeners.add(source, {
-        close: e => {
+        close: (e) => {
           // a close could be fired either by:
           // 1. A non-blocking query leaving the page
           // 2. A non-blocking query responding
@@ -135,7 +135,8 @@ export default class DataSourceService extends Service {
           if (
             typeof event !== 'undefined' &&
             typeof cursor !== 'undefined' &&
-            e.errors && e.errors[0].status !== '401'
+            e.errors &&
+            e.errors[0].status !== '401'
           ) {
             cache.set(uri, {
               currentEvent: event,
@@ -197,6 +198,6 @@ export default class DataSourceService extends Service {
       .filter(([key, item]) => {
         return item.readyState > 1;
       })
-      .map(item => item[0]);
+      .map((item) => item[0]);
   }
 }
diff --git a/ui/packages/consul-ui/app/services/dom.js b/ui/packages/consul-ui/app/services/dom.js
index b0618e5653..26d5a66137 100644
--- a/ui/packages/consul-ui/app/services/dom.js
+++ b/ui/packages/consul-ui/app/services/dom.js
@@ -76,10 +76,10 @@ export default class DomService extends Service {
   setEventTargetProperty(e, property, cb) {
     const target = e.target;
     return new Proxy(e, {
-      get: function(obj, prop, receiver) {
+      get: function (obj, prop, receiver) {
         if (prop === 'target') {
           return new Proxy(target, {
-            get: function(obj, prop, receiver) {
+            get: function (obj, prop, receiver) {
               if (prop === property) {
                 return cb(e.target[property]);
               }
@@ -95,10 +95,10 @@ export default class DomService extends Service {
   setEventTargetProperties(e, propObj) {
     const target = e.target;
     return new Proxy(e, {
-      get: function(obj, prop, receiver) {
+      get: function (obj, prop, receiver) {
         if (prop === 'target') {
           return new Proxy(target, {
-            get: function(obj, prop, receiver) {
+            get: function (obj, prop, receiver) {
               if (typeof propObj[prop] !== 'undefined') {
                 return propObj[prop](e.target);
               }
@@ -156,10 +156,10 @@ export default class DomService extends Service {
 
   components(selector, context) {
     return [...this.elements(selector, context)]
-      .map(function(item) {
+      .map(function (item) {
         return $_(item);
       })
-      .filter(function(item) {
+      .filter(function (item) {
         return item != null;
       });
   }
@@ -168,7 +168,7 @@ export default class DomService extends Service {
     inViewportCallbacks.set($el, cb);
     let observer = new IntersectionObserver(
       (entries, observer) => {
-        entries.map(item => {
+        entries.map((item) => {
           const cb = inViewportCallbacks.get(item.target);
           if (typeof cb === 'function') {
             cb(item.isIntersecting);
diff --git a/ui/packages/consul-ui/app/services/encoder.js b/ui/packages/consul-ui/app/services/encoder.js
index 12b2f71d97..95ec590423 100644
--- a/ui/packages/consul-ui/app/services/encoder.js
+++ b/ui/packages/consul-ui/app/services/encoder.js
@@ -4,7 +4,7 @@ import { runInDebug } from '@ember/debug';
 import atob from 'consul-ui/utils/atob';
 import btoa from 'consul-ui/utils/btoa';
 
-const createRegExpEncoder = function(re, encoder = str => str, strict = true) {
+const createRegExpEncoder = function (re, encoder = (str) => str, strict = true) {
   return (template = '', vars = {}) => {
     if (template !== '') {
       return template.replace(re, (match, group) => {
@@ -43,11 +43,13 @@ export default class EncoderService extends Service {
     return this.tag(this.uriJoin.bind(this));
   }
 
-  joiner = (encoder, joiner = '', defaultValue = '') => (values, strs) =>
-    (strs || Array(values.length).fill(joiner)).reduce(
-      (prev, item, i) => `${prev}${item}${encoder(values[i] || defaultValue)}`,
-      ''
-    );
+  joiner =
+    (encoder, joiner = '', defaultValue = '') =>
+    (values, strs) =>
+      (strs || Array(values.length).fill(joiner)).reduce(
+        (prev, item, i) => `${prev}${item}${encoder(values[i] || defaultValue)}`,
+        ''
+      );
 
   tag(join) {
     return (strs, ...values) => join(values, strs);
diff --git a/ui/packages/consul-ui/app/services/feedback.js b/ui/packages/consul-ui/app/services/feedback.js
index 62adc01f40..06e9cdcf9e 100644
--- a/ui/packages/consul-ui/app/services/feedback.js
+++ b/ui/packages/consul-ui/app/services/feedback.js
@@ -3,10 +3,10 @@ import callableType from 'consul-ui/utils/callable-type';
 
 const TYPE_SUCCESS = 'success';
 const TYPE_ERROR = 'error';
-const defaultStatus = function(type, obj) {
+const defaultStatus = function (type, obj) {
   return type;
 };
-const notificationDefaults = function() {
+const notificationDefaults = function () {
   return {
     timeout: 6000,
     extendedTimeout: 300,
@@ -19,8 +19,8 @@ export default class FeedbackService extends Service {
 
   notification(action, modelName) {
     return {
-      success: item => this.success(item, action, undefined, modelName),
-      error: e => this.error(e, action, undefined, modelName),
+      success: (item) => this.success(item, action, undefined, modelName),
+      error: (e) => this.error(e, action, undefined, modelName),
     };
   }
 
diff --git a/ui/packages/consul-ui/app/services/form.js b/ui/packages/consul-ui/app/services/form.js
index d580ec911b..86de153c98 100644
--- a/ui/packages/consul-ui/app/services/form.js
+++ b/ui/packages/consul-ui/app/services/form.js
@@ -39,10 +39,10 @@ export default class FormService extends Service {
       // only do special things for our new things for the moment
       if (name === 'role' || name === 'policy') {
         const repo = this[name];
-        form.clear(function(obj) {
+        form.clear(function (obj) {
           return repo.create(obj);
         });
-        form.submit(function(obj) {
+        form.submit(function (obj) {
           return repo.persist(obj);
         });
       }
diff --git a/ui/packages/consul-ui/app/services/i18n-debug.js b/ui/packages/consul-ui/app/services/i18n-debug.js
index 06c19c9594..8b9dbe921a 100644
--- a/ui/packages/consul-ui/app/services/i18n-debug.js
+++ b/ui/packages/consul-ui/app/services/i18n-debug.js
@@ -5,7 +5,7 @@ import faker from 'faker';
 
 // we currently use HTML in translations, so anything 'word-like' with these
 // chars won't get translated
-const translator = cb => item => (!['<', '>', '='].includes(item) ? cb(item) : item);
+const translator = (cb) => (item) => !['<', '>', '='].includes(item) ? cb(item) : item;
 
 export default class DebugI18nService extends I18nService {
   formatMessage(value, formatOptions) {
@@ -17,10 +17,10 @@ export default class DebugI18nService extends I18nService {
           return text
             .split(' ')
             .map(
-              translator(item =>
+              translator((item) =>
                 item
                   .split('')
-                  .map(item => '-')
+                  .map((item) => '-')
                   .join('')
               )
             )
@@ -33,7 +33,7 @@ export default class DebugI18nService extends I18nService {
           return text
             .split(' ')
             .map(
-              translator(item => {
+              translator((item) => {
                 const word = faker.lorem.word();
                 return item.charAt(0) === item.charAt(0).toUpperCase() ? ucfirst(word) : word;
               })
@@ -56,4 +56,3 @@ export default class DebugI18nService extends I18nService {
     return formatOptions;
   }
 }
-
diff --git a/ui/packages/consul-ui/app/services/repository.js b/ui/packages/consul-ui/app/services/repository.js
index 0b0df8e085..44d33ed5c2 100644
--- a/ui/packages/consul-ui/app/services/repository.js
+++ b/ui/packages/consul-ui/app/services/repository.js
@@ -70,7 +70,7 @@ export default class RepositoryService extends Service {
     // inspect the permissions for this segment/slug remotely, if we have zero
     // permissions fire a fake 403 so we don't even request the model/resource
     if (params.resources.length > 0) {
-      const resource = params.resources.find(item => item.Access === access);
+      const resource = params.resources.find((item) => item.Access === access);
       if (resource && resource.Allow === false) {
         // TODO: Here we temporarily make a hybrid HTTPError/ember-data HTTP error
         // we should eventually use HTTPError's everywhere
@@ -114,7 +114,7 @@ export default class RepositoryService extends Service {
   reconcile(meta = {}, params = {}, configuration = {}) {
     // unload anything older than our current sync date/time
     if (typeof meta.date !== 'undefined') {
-      this.store.peekAll(this.getModelName()).forEach(item => {
+      this.store.peekAll(this.getModelName()).forEach((item) => {
         const date = get(item, 'SyncTime');
         if (
           !item.isDeleted &&
@@ -138,7 +138,7 @@ export default class RepositoryService extends Service {
 
   cached(params) {
     const entries = Object.entries(params);
-    return this.store.peekAll(this.getModelName()).filter(item => {
+    return this.store.peekAll(this.getModelName()).filter((item) => {
       return entries.every(([key, value]) => item[key] === value);
     });
   }
@@ -230,7 +230,7 @@ export default class RepositoryService extends Service {
     if (typeOf(item) === 'object') {
       item = this.store.peekRecord(this.getModelName(), item[this.getPrimaryKey()]);
     }
-    return item.destroyRecord().then(item => {
+    return item.destroyRecord().then((item) => {
       return this.store.unloadRecord(item);
     });
   }
diff --git a/ui/packages/consul-ui/app/services/repository/dc.js b/ui/packages/consul-ui/app/services/repository/dc.js
index 59887967e4..fa896c6279 100644
--- a/ui/packages/consul-ui/app/services/repository/dc.js
+++ b/ui/packages/consul-ui/app/services/repository/dc.js
@@ -2,10 +2,7 @@ import Error from '@ember/error';
 import { inject as service } from '@ember/service';
 import RepositoryService from 'consul-ui/services/repository';
 import dataSource from 'consul-ui/decorators/data-source';
-import {
-  HEADERS_DEFAULT_ACL_POLICY as DEFAULT_ACL_POLICY,
-} from 'consul-ui/utils/http/consul';
-
+import { HEADERS_DEFAULT_ACL_POLICY as DEFAULT_ACL_POLICY } from 'consul-ui/utils/http/consul';
 
 const SECONDS = 1000;
 const MODEL_NAME = 'dc';
@@ -14,25 +11,22 @@ const zero = {
   Total: 0,
   Passing: 0,
   Warning: 0,
-  Critical: 0
+  Critical: 0,
 };
 const aggregate = (prev, body, type) => {
-
   return body[type].reduce((prev, item) => {
-
     // for each Partitions, Namespaces
-    ['Partition', 'Namespace'].forEach(bucket => {
-
+    ['Partition', 'Namespace'].forEach((bucket) => {
       // lazily initialize
       let obj = prev[bucket][item[bucket]];
-      if(typeof obj === 'undefined') {
+      if (typeof obj === 'undefined') {
         obj = prev[bucket][item[bucket]] = {
           Name: item[bucket],
         };
       }
-      if(typeof obj[type] === 'undefined') {
+      if (typeof obj[type] === 'undefined') {
         obj[type] = {
-          ...zero
+          ...zero,
         };
       }
       //
@@ -42,7 +36,6 @@ const aggregate = (prev, body, type) => {
       obj[type].Passing += item.Passing;
       obj[type].Warning += item.Warning;
       obj[type].Critical += item.Critical;
-
     });
 
     // also aggregate the Datacenter, without doubling up
@@ -53,8 +46,7 @@ const aggregate = (prev, body, type) => {
     prev.Datacenter[type].Critical += item.Critical;
     return prev;
   }, prev);
-}
-
+};
 
 export default class DcService extends RepositoryService {
   @service('env') env;
@@ -64,141 +56,141 @@ export default class DcService extends RepositoryService {
   }
 
   @dataSource('/:partition/:ns/:dc/datacenters')
-  async fetchAll({partition, ns, dc}, { uri }, request) {
+  async fetchAll({ partition, ns, dc }, { uri }, request) {
     const Local = this.env.var('CONSUL_DATACENTER_LOCAL');
     const Primary = this.env.var('CONSUL_DATACENTER_PRIMARY');
-    return (await request`
+    return (
+      await request`
       GET /v1/catalog/datacenters
       X-Request-ID: ${uri}
-    `)(
-      (headers, body, cache) => {
-        // TODO: Not sure nowadays whether we need to keep lowercasing everything
-        // I vaguely remember when I last looked it was not needed for browsers anymore
-        // but I also vaguely remember something about Pretender lowercasing things still
-        // so if we can work around Pretender I think we can remove all the header lowercasing
-        // For the moment we lowercase here so as to not effect the ember-data-flavoured-v1 fork
-        const entry = Object.entries(headers)
-          .find(([key, value]) => key.toLowerCase() === DEFAULT_ACL_POLICY.toLowerCase());
-        //
-        const DefaultACLPolicy = entry[1] || 'allow';
-        return {
-          meta: {
-            version: 2,
-            uri: uri,
-          },
-          body: body.map(dc => {
-            return cache(
-              {
-                Name: dc,
-                Datacenter: '',
-                Local: dc === Local,
-                Primary: dc === Primary,
-                DefaultACLPolicy: DefaultACLPolicy,
-              },
-              uri => uri`${MODEL_NAME}:///${''}/${''}/${dc}/datacenter`
-            );
-          })
-        };
-      });
+    `
+    )((headers, body, cache) => {
+      // TODO: Not sure nowadays whether we need to keep lowercasing everything
+      // I vaguely remember when I last looked it was not needed for browsers anymore
+      // but I also vaguely remember something about Pretender lowercasing things still
+      // so if we can work around Pretender I think we can remove all the header lowercasing
+      // For the moment we lowercase here so as to not effect the ember-data-flavoured-v1 fork
+      const entry = Object.entries(headers).find(
+        ([key, value]) => key.toLowerCase() === DEFAULT_ACL_POLICY.toLowerCase()
+      );
+      //
+      const DefaultACLPolicy = entry[1] || 'allow';
+      return {
+        meta: {
+          version: 2,
+          uri: uri,
+        },
+        body: body.map((dc) => {
+          return cache(
+            {
+              Name: dc,
+              Datacenter: '',
+              Local: dc === Local,
+              Primary: dc === Primary,
+              DefaultACLPolicy: DefaultACLPolicy,
+            },
+            (uri) => uri`${MODEL_NAME}:///${''}/${''}/${dc}/datacenter`
+          );
+        }),
+      };
+    });
   }
 
   @dataSource('/:partition/:ns/:dc/datacenter')
-  async fetch({partition, ns, dc}, { uri }, request) {
-    return (await request`
+  async fetch({ partition, ns, dc }, { uri }, request) {
+    return (
+      await request`
       GET /v1/operator/autopilot/state?${{ dc }}
       X-Request-ID: ${uri}
-    `)(
-      (headers, body, cache) => {
-        // turn servers into an array instead of a map/object
-        const servers = Object.values(body.Servers);
-        const grouped = [];
-        return {
-          meta: {
-            version: 2,
-            uri: uri,
-          },
-          body: cache(
-            {
-              ...body,
-              // all servers
-              Servers: servers,
-              RedundancyZones: Object.entries(body.RedundancyZones || {}).map(([key, value]) => {
-                const zone = {
-                  ...value,
-                  Name: key,
-                  Healthy: true,
-                  // convert the string[] to Server[]
-                  Servers: value.Servers.reduce((prev, item) => {
-                    const server = body.Servers[item];
-                    // keep a record of things
-                    grouped.push(server.ID);
-                    prev.push(server);
-                    return prev;
-                  }, []),
-                }
-                return zone;
-              }),
-              ReadReplicas: (body.ReadReplicas || []).map(item => {
-                // keep a record of things
-                grouped.push(item);
-                return body.Servers[item];
-              }),
-              Default: {
-                Servers: servers.filter(item => !grouped.includes(item.ID))
-              }
+    `
+    )((headers, body, cache) => {
+      // turn servers into an array instead of a map/object
+      const servers = Object.values(body.Servers);
+      const grouped = [];
+      return {
+        meta: {
+          version: 2,
+          uri: uri,
+        },
+        body: cache(
+          {
+            ...body,
+            // all servers
+            Servers: servers,
+            RedundancyZones: Object.entries(body.RedundancyZones || {}).map(([key, value]) => {
+              const zone = {
+                ...value,
+                Name: key,
+                Healthy: true,
+                // convert the string[] to Server[]
+                Servers: value.Servers.reduce((prev, item) => {
+                  const server = body.Servers[item];
+                  // keep a record of things
+                  grouped.push(server.ID);
+                  prev.push(server);
+                  return prev;
+                }, []),
+              };
+              return zone;
+            }),
+            ReadReplicas: (body.ReadReplicas || []).map((item) => {
+              // keep a record of things
+              grouped.push(item);
+              return body.Servers[item];
+            }),
+            Default: {
+              Servers: servers.filter((item) => !grouped.includes(item.ID)),
             },
-            uri => uri`${MODEL_NAME}:///${''}/${''}/${dc}/datacenter`
-          )
-        }
-      }
-    );
+          },
+          (uri) => uri`${MODEL_NAME}:///${''}/${''}/${dc}/datacenter`
+        ),
+      };
+    });
   }
 
   @dataSource('/:partition/:ns/:dc/catalog/health')
-  async fetchCatalogHealth({partition, ns, dc}, { uri }, request) {
-    return (await request`
+  async fetchCatalogHealth({ partition, ns, dc }, { uri }, request) {
+    return (
+      await request`
       GET /v1/internal/ui/catalog-overview?${{ dc, stale: null }}
       X-Request-ID: ${uri}
-    `)(
-      (headers, body, cache) => {
-
-
-        // for each Services/Nodes/Checks aggregate
-        const agg = ['Nodes', 'Services', 'Checks']
-          .reduce((prev, item) => aggregate(prev, body, item), {
-            Datacenter: {
-              Name: dc,
-              Nodes: {
-                ...zero
-              },
-              Services: {
-                ...zero
-              },
-              Checks: {
-                ...zero
-              }
+    `
+    )((headers, body, cache) => {
+      // for each Services/Nodes/Checks aggregate
+      const agg = ['Nodes', 'Services', 'Checks'].reduce(
+        (prev, item) => aggregate(prev, body, item),
+        {
+          Datacenter: {
+            Name: dc,
+            Nodes: {
+              ...zero,
+            },
+            Services: {
+              ...zero,
+            },
+            Checks: {
+              ...zero,
             },
-            Partition: {},
-            Namespace: {}
-          });
-
-
-        return {
-          meta: {
-            version: 2,
-            uri: uri,
-            interval: 30 * SECONDS
           },
-          body: {
-            Datacenter: agg.Datacenter,
-            Partitions: Object.values(agg.Partition),
-            Namespaces: Object.values(agg.Namespace),
-            ...body
-          }
-        };
-      }
+          Partition: {},
+          Namespace: {},
+        }
+      );
 
-    );
+      return {
+        meta: {
+          version: 2,
+          uri: uri,
+          interval: 30 * SECONDS,
+        },
+        body: {
+          Datacenter: agg.Datacenter,
+          Partitions: Object.values(agg.Partition),
+          Namespaces: Object.values(agg.Namespace),
+          ...body,
+        },
+      };
+    });
   }
 
   @dataSource('/:partition/:ns/:dc/datacenter-cache/:name')
@@ -214,5 +206,4 @@ export default class DcService extends RepositoryService {
     }
     return item;
   }
-
 }
diff --git a/ui/packages/consul-ui/app/services/repository/discovery-chain.js b/ui/packages/consul-ui/app/services/repository/discovery-chain.js
index 3d2e2207b2..dd8e6267b9 100644
--- a/ui/packages/consul-ui/app/services/repository/discovery-chain.js
+++ b/ui/packages/consul-ui/app/services/repository/discovery-chain.js
@@ -21,7 +21,7 @@ export default class DiscoveryChainService extends RepositoryService {
     if (typeof datacenter !== 'undefined' && !get(datacenter, 'MeshEnabled')) {
       return Promise.resolve();
     }
-    return super.findBySlug(...arguments).catch(e => {
+    return super.findBySlug(...arguments).catch((e) => {
       const code = get(e, 'errors.firstObject.status');
       const body = (get(e, 'errors.firstObject.detail') || '').trim();
       switch (code) {
diff --git a/ui/packages/consul-ui/app/services/repository/intention.js b/ui/packages/consul-ui/app/services/repository/intention.js
index 89b211e164..012c4c448c 100644
--- a/ui/packages/consul-ui/app/services/repository/intention.js
+++ b/ui/packages/consul-ui/app/services/repository/intention.js
@@ -30,7 +30,7 @@ export default class IntentionRepository extends RepositoryService {
       this.managedByCRDs = this.store
         .peekAll(this.getModelName())
         .toArray()
-        .some(item => item.IsManagedByCRD);
+        .some((item) => item.IsManagedByCRD);
     }
     return this.managedByCRDs;
   }
diff --git a/ui/packages/consul-ui/app/services/repository/kv.js b/ui/packages/consul-ui/app/services/repository/kv.js
index 9f771c0613..68bb6ec52a 100644
--- a/ui/packages/consul-ui/app/services/repository/kv.js
+++ b/ui/packages/consul-ui/app/services/repository/kv.js
@@ -79,7 +79,7 @@ export default class KvService extends RepositoryService {
     //   async () => {
     let items = await this.findAll(...arguments);
     const meta = items.meta;
-    items = items.filter(item => params.id !== get(item, 'Key'));
+    items = items.filter((item) => params.id !== get(item, 'Key'));
     items.meta = meta;
     return items;
     // },
diff --git a/ui/packages/consul-ui/app/services/repository/license.js b/ui/packages/consul-ui/app/services/repository/license.js
index c9cbe52c81..d53f008884 100644
--- a/ui/packages/consul-ui/app/services/repository/license.js
+++ b/ui/packages/consul-ui/app/services/repository/license.js
@@ -3,35 +3,35 @@ import dataSource from 'consul-ui/decorators/data-source';
 
 const MODEL_NAME = 'license';
 
-const bucket = function(item, { dc, ns = 'default', partition = 'default' }) {
+const bucket = function (item, { dc, ns = 'default', partition = 'default' }) {
   return {
     ...item,
     Datacenter: dc,
     Namespace: typeof item.Namespace === 'undefined' ? ns : item.Namespace,
     Partition: typeof item.Partition === 'undefined' ? partition : item.Partition,
   };
-}
+};
 
 const SECONDS = 1000;
 
 export default class LicenseService extends RepositoryService {
   @dataSource('/:partition/:ns/:dc/license')
-  async find({partition, ns, dc}, { uri }, request) {
-    return (await request`
+  async find({ partition, ns, dc }, { uri }, request) {
+    return (
+      await request`
       GET /v1/operator/license?${{ dc }}
       X-Request-ID: ${uri}
-    `)(
-      (headers, body, cache) => ({
-        meta: {
-          version: 2,
-          uri: uri,
-          interval: 30 * SECONDS
-        },
-        body: cache(
-          bucket(body, { dc }),
-          uri => uri`${MODEL_NAME}:///${partition}/${ns}/${dc}/license/${body.License.license_id}`
-        )
-      })
-    );
+    `
+    )((headers, body, cache) => ({
+      meta: {
+        version: 2,
+        uri: uri,
+        interval: 30 * SECONDS,
+      },
+      body: cache(
+        bucket(body, { dc }),
+        (uri) => uri`${MODEL_NAME}:///${partition}/${ns}/${dc}/license/${body.License.license_id}`
+      ),
+    }));
   }
 }
diff --git a/ui/packages/consul-ui/app/services/repository/metrics.js b/ui/packages/consul-ui/app/services/repository/metrics.js
index bb3171e353..1252098211 100644
--- a/ui/packages/consul-ui/app/services/repository/metrics.js
+++ b/ui/packages/consul-ui/app/services/repository/metrics.js
@@ -60,7 +60,7 @@ export default class MetricsService extends RepositoryService {
         {}
       ),
     ];
-    return Promise.all(promises).then(results => {
+    return Promise.all(promises).then((results) => {
       return {
         meta: {
           interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
@@ -78,7 +78,7 @@ export default class MetricsService extends RepositoryService {
     }
     return this.provider
       .upstreamRecentSummaryStats(params.slug, params.dc, params.ns, {})
-      .then(result => {
+      .then((result) => {
         result.meta = {
           interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
         };
@@ -93,7 +93,7 @@ export default class MetricsService extends RepositoryService {
     }
     return this.provider
       .downstreamRecentSummaryStats(params.slug, params.dc, params.ns, {})
-      .then(result => {
+      .then((result) => {
         result.meta = {
           interval: this.env.var('CONSUL_METRICS_POLL_INTERVAL') || 10000,
         };
diff --git a/ui/packages/consul-ui/app/services/repository/nspace.js b/ui/packages/consul-ui/app/services/repository/nspace.js
index 51fac2f926..4bb266ba3d 100644
--- a/ui/packages/consul-ui/app/services/repository/nspace.js
+++ b/ui/packages/consul-ui/app/services/repository/nspace.js
@@ -6,16 +6,16 @@ import dataSource from 'consul-ui/decorators/data-source';
 
 import { defaultChangeset as changeset } from 'consul-ui/utils/form/builder';
 
-const findActiveNspace = function(nspaces, nspace) {
-  let found = nspaces.find(function(item) {
+const findActiveNspace = function (nspaces, nspace) {
+  let found = nspaces.find(function (item) {
     return item.Name === nspace.Name;
   });
   if (typeof found === 'undefined') {
-    runInDebug(_ =>
-      console.info(`${nspace.Name} not found in [${nspaces.map(item => item.Name).join(', ')}]`)
+    runInDebug((_) =>
+      console.info(`${nspace.Name} not found in [${nspaces.map((item) => item.Name).join(', ')}]`)
     );
     // if we can't find the nspace that was specified try default
-    found = nspaces.find(function(item) {
+    found = nspaces.find(function (item) {
       return item.Name === 'default';
     });
     // if there is no default just choose the first
@@ -87,7 +87,7 @@ export default class NspaceService extends RepositoryService {
         },
       ]);
     }
-    return this.store.authorize(this.getModelName(), { dc: dc, ns: nspace }).catch(function(e) {
+    return this.store.authorize(this.getModelName(), { dc: dc, ns: nspace }).catch(function (e) {
       return [];
     });
   }
diff --git a/ui/packages/consul-ui/app/services/repository/oidc-provider.js b/ui/packages/consul-ui/app/services/repository/oidc-provider.js
index 2fbd1be319..c44960564e 100644
--- a/ui/packages/consul-ui/app/services/repository/oidc-provider.js
+++ b/ui/packages/consul-ui/app/services/repository/oidc-provider.js
@@ -82,7 +82,7 @@ export default class OidcProviderService extends RepositoryService {
   findCodeByURL(src) {
     // TODO: Maybe move this to the provider itself
     set(this.provider, 'baseUrl', src);
-    return this.manager.open(OAUTH_PROVIDER_NAME, {}).catch(e => {
+    return this.manager.open(OAUTH_PROVIDER_NAME, {}).catch((e) => {
       let err;
       switch (true) {
         case e.message.startsWith('remote was closed'):
diff --git a/ui/packages/consul-ui/app/services/repository/partition.js b/ui/packages/consul-ui/app/services/repository/partition.js
index 118e7e2bed..53fb6d6650 100644
--- a/ui/packages/consul-ui/app/services/repository/partition.js
+++ b/ui/packages/consul-ui/app/services/repository/partition.js
@@ -6,16 +6,16 @@ import dataSource from 'consul-ui/decorators/data-source';
 
 import { defaultChangeset as changeset } from 'consul-ui/utils/form/builder';
 
-const findActive = function(items, item) {
-  let found = items.find(function(i) {
+const findActive = function (items, item) {
+  let found = items.find(function (i) {
     return i.Name === item.Name;
   });
   if (typeof found === 'undefined') {
-    runInDebug(_ =>
-      console.info(`${item.Name} not found in [${items.map(item => item.Name).join(', ')}]`)
+    runInDebug((_) =>
+      console.info(`${item.Name} not found in [${items.map((item) => item.Name).join(', ')}]`)
     );
     // if we can't find the nspace that was specified try default
-    found = items.find(function(item) {
+    found = items.find(function (item) {
       return item.Name === 'default';
     });
     // if there is no default just choose the first
diff --git a/ui/packages/consul-ui/app/services/repository/peer.js b/ui/packages/consul-ui/app/services/repository/peer.js
index 5f66708e2a..961fcd79bb 100644
--- a/ui/packages/consul-ui/app/services/repository/peer.js
+++ b/ui/packages/consul-ui/app/services/repository/peer.js
@@ -37,14 +37,14 @@ export default class PeerService extends RepositoryService {
           interval: 10000,
           uri: uri,
         },
-        body: body.map(item => {
+        body: body.map((item) => {
           return cache(
             {
               ...item,
               Datacenter: dc,
               Partition: partition,
             },
-            uri => uri`peer:///${partition}/${ns}/${dc}/peer/${item.Name}`
+            (uri) => uri`peer:///${partition}/${ns}/${dc}/peer/${item.Name}`
           );
         }),
       };
@@ -61,7 +61,7 @@ export default class PeerService extends RepositoryService {
         Namespace: '',
         Partition: partition,
       });
-      item.meta = {cacheControl: 'no-store'};
+      item.meta = { cacheControl: 'no-store' };
       return item;
     }
     return (
@@ -85,7 +85,7 @@ export default class PeerService extends RepositoryService {
             Datacenter: dc,
             Partition: partition,
           },
-          uri => uri`peer:///${partition}/${ns}/${dc}/peer/${body.Name}`
+          (uri) => uri`peer:///${partition}/${ns}/${dc}/peer/${body.Name}`
         ),
       };
     });
@@ -117,7 +117,7 @@ export default class PeerService extends RepositoryService {
             ...item,
             State: 'ESTABLISHING',
           },
-          uri => uri`peer:///${partition}/${ns}/${dc}/peer/${item.Name}`
+          (uri) => uri`peer:///${partition}/${ns}/${dc}/peer/${item.Name}`
         ),
       };
     });
@@ -145,7 +145,7 @@ export default class PeerService extends RepositoryService {
             ...item,
             State: 'DELETING',
           },
-          uri => uri`peer:///${partition}/${ns}/${dc}/peer/${item.Name}`
+          (uri) => uri`peer:///${partition}/${ns}/${dc}/peer/${item.Name}`
         ),
       };
     });
diff --git a/ui/packages/consul-ui/app/services/repository/permission.js b/ui/packages/consul-ui/app/services/repository/permission.js
index 8b15ddd1bf..8a99ad0c34 100644
--- a/ui/packages/consul-ui/app/services/repository/permission.js
+++ b/ui/packages/consul-ui/app/services/repository/permission.js
@@ -83,8 +83,8 @@ export default class PermissionService extends RepositoryService {
 
   has(permission) {
     const keys = Object.keys(permission);
-    return this.permissions.some(item => {
-      return keys.every(key => item[key] === permission[key]) && item.Allow === true;
+    return this.permissions.some((item) => {
+      return keys.every((key) => item[key] === permission[key]) && item.Allow === true;
     });
   }
 
@@ -114,7 +114,7 @@ export default class PermissionService extends RepositoryService {
    */
   async authorize(params) {
     if (!this.env.var('CONSUL_ACLS_ENABLED')) {
-      return params.resources.map(item => {
+      return params.resources.map((item) => {
         return {
           ...item,
           Allow: true,
@@ -164,7 +164,7 @@ export default class PermissionService extends RepositoryService {
     // still enforced on the backend.
     // This temporary measure should be removed again once https://github.com/hashicorp/consul/issues/11098
     // has been resolved
-    this.permissions.forEach(item => {
+    this.permissions.forEach((item) => {
       if (['key', 'node', 'service', 'intention', 'session'].includes(item.Resource)) {
         item.Allow = true;
       }
diff --git a/ui/packages/consul-ui/app/services/repository/policy.js b/ui/packages/consul-ui/app/services/repository/policy.js
index 4fdbfd811f..a14b8a71f0 100644
--- a/ui/packages/consul-ui/app/services/repository/policy.js
+++ b/ui/packages/consul-ui/app/services/repository/policy.js
@@ -37,10 +37,7 @@ export default class PolicyService extends RepositoryService {
     } else {
       item = await super.findBySlug(...arguments);
     }
-    return this.form
-      .form(this.getModelName())
-      .setData(item)
-      .getData();
+    return this.form.form(this.getModelName()).setData(item).getData();
   }
 
   persist(item) {
diff --git a/ui/packages/consul-ui/app/services/repository/proxy.js b/ui/packages/consul-ui/app/services/repository/proxy.js
index 4032945aab..3c91e1a375 100644
--- a/ui/packages/consul-ui/app/services/repository/proxy.js
+++ b/ui/packages/consul-ui/app/services/repository/proxy.js
@@ -19,8 +19,8 @@ export default class ProxyService extends RepositoryService {
       params.index = configuration.cursor;
       params.uri = configuration.uri;
     }
-    return this.store.query(this.getModelName(), params).then(items => {
-      items.forEach(item => {
+    return this.store.query(this.getModelName(), params).then((items) => {
+      items.forEach((item) => {
         // swap out the id for the services id
         // so we can then assign the proxy to it if it exists
         const id = JSON.parse(item.uid);
diff --git a/ui/packages/consul-ui/app/services/repository/role.js b/ui/packages/consul-ui/app/services/repository/role.js
index 9fe0f7ea3f..792ca80dbe 100644
--- a/ui/packages/consul-ui/app/services/repository/role.js
+++ b/ui/packages/consul-ui/app/services/repository/role.js
@@ -36,9 +36,6 @@ export default class RoleService extends RepositoryService {
     } else {
       item = await super.findBySlug(...arguments);
     }
-    return this.form
-      .form(this.getModelName())
-      .setData(item)
-      .getData();
+    return this.form.form(this.getModelName()).setData(item).getData();
   }
 }
diff --git a/ui/packages/consul-ui/app/services/repository/service-instance.js b/ui/packages/consul-ui/app/services/repository/service-instance.js
index 93fd3f64dc..8680e62a75 100644
--- a/ui/packages/consul-ui/app/services/repository/service-instance.js
+++ b/ui/packages/consul-ui/app/services/repository/service-instance.js
@@ -20,7 +20,7 @@ export default class ServiceInstanceService extends RepositoryService {
       params.uri = configuration.uri;
     }
     return this.authorizeBySlug(
-      async resources => {
+      async (resources) => {
         const instances = await this.query(params);
         set(instances, 'firstObject.Service.Resources', resources);
         return instances;
diff --git a/ui/packages/consul-ui/app/services/repository/token.js b/ui/packages/consul-ui/app/services/repository/token.js
index 1497140e4e..eb6d670f45 100644
--- a/ui/packages/consul-ui/app/services/repository/token.js
+++ b/ui/packages/consul-ui/app/services/repository/token.js
@@ -37,10 +37,7 @@ export default class TokenService extends RepositoryService {
     } else {
       item = await super.findBySlug(...arguments);
     }
-    return this.form
-      .form(this.getModelName())
-      .setData(item)
-      .getData();
+    return this.form.form(this.getModelName()).setData(item).getData();
   }
 
   @dataSource('/:partition/:ns/:dc/token/self/:secret')
@@ -52,7 +49,7 @@ export default class TokenService extends RepositoryService {
         secret: params.secret,
         dc: params.dc,
       })
-      .catch(e => {
+      .catch((e) => {
         return Promise.reject(e);
       });
   }
diff --git a/ui/packages/consul-ui/app/services/repository/topology.js b/ui/packages/consul-ui/app/services/repository/topology.js
index 3f9b304308..17dfd704f2 100644
--- a/ui/packages/consul-ui/app/services/repository/topology.js
+++ b/ui/packages/consul-ui/app/services/repository/topology.js
@@ -24,7 +24,7 @@ export default class TopologyService extends RepositoryService {
       params.index = configuration.cursor;
       params.uri = configuration.uri;
     }
-    return this.store.queryRecord(this.getModelName(), params).catch(e => {
+    return this.store.queryRecord(this.getModelName(), params).catch((e) => {
       const code = get(e, 'errors.firstObject.status');
       const body = (get(e, 'errors.firstObject.detail') || '').trim();
       switch (code) {
diff --git a/ui/packages/consul-ui/app/services/routlet.js b/ui/packages/consul-ui/app/services/routlet.js
index 2fb805b543..adec9bed83 100644
--- a/ui/packages/consul-ui/app/services/routlet.js
+++ b/ui/packages/consul-ui/app/services/routlet.js
@@ -65,7 +65,7 @@ export default class RoutletService extends Service {
   }
 
   exists(routeName) {
-    if(get(routes, routeName)) {
+    if (get(routes, routeName)) {
       return this.allowed(routeName);
     }
     return false;
@@ -74,7 +74,7 @@ export default class RoutletService extends Service {
   allowed(routeName) {
     const abilities = get(routes, `${routeName}._options.abilities`) || [];
     if (abilities.length > 0) {
-      if (!abilities.every(ability => this.permissions.can(ability))) {
+      if (!abilities.every((ability) => this.permissions.can(ability))) {
         return false;
       }
     }
@@ -83,7 +83,7 @@ export default class RoutletService extends Service {
 
   transition() {
     let endTransition;
-    this._transition = new Promise(resolve => {
+    this._transition = new Promise((resolve) => {
       endTransition = resolve;
     });
     return endTransition;
@@ -91,7 +91,7 @@ export default class RoutletService extends Service {
 
   findOutlet(name) {
     const keys = [...outlets.keys()];
-    const key = keys.find(item => name.indexOf(item) !== -1);
+    const key = keys.find((item) => name.indexOf(item) !== -1);
     return key;
   }
 
@@ -107,7 +107,7 @@ export default class RoutletService extends Service {
    */
   normalizeParamsFor(name, params = {}) {
     if (isWildcard(name)) {
-      return Object.keys(params).reduce(function(prev, item) {
+      return Object.keys(params).reduce(function (prev, item) {
         if (typeof params[item] !== 'undefined') {
           prev[item] = decodeURIComponent(params[item]);
         } else {
@@ -159,7 +159,6 @@ export default class RoutletService extends Service {
     };
   }
 
-
   // modelFor gets the model for Outlet specified by `name`, not the Route
   modelFor(name) {
     const outlet = outlets.get(name);
diff --git a/ui/packages/consul-ui/app/services/settings.js b/ui/packages/consul-ui/app/services/settings.js
index ced7243f27..c4b7c0b193 100644
--- a/ui/packages/consul-ui/app/services/settings.js
+++ b/ui/packages/consul-ui/app/services/settings.js
@@ -3,8 +3,8 @@ import getStorage from 'consul-ui/utils/storage/local-storage';
 const SCHEME = 'consul';
 const storage = getStorage(SCHEME);
 // promise aware assertion
-export const ifNotBlocking = function(repo) {
-  return repo.findBySlug('client').then(function(settings) {
+export const ifNotBlocking = function (repo) {
+  return repo.findBySlug('client').then(function (settings) {
     return typeof settings.blocking !== 'undefined' && !settings.blocking;
   });
 };
@@ -33,7 +33,7 @@ export default class SettingsService extends Service {
       obj = [obj];
     }
     const storage = this.storage;
-    const item = obj.reduce(function(prev, item, i, arr) {
+    const item = obj.reduce(function (prev, item, i, arr) {
       storage.removeValue(item);
       return prev;
     }, {});
diff --git a/ui/packages/consul-ui/app/services/sort.js b/ui/packages/consul-ui/app/services/sort.js
index 3784932c20..96c6884b33 100644
--- a/ui/packages/consul-ui/app/services/sort.js
+++ b/ui/packages/consul-ui/app/services/sort.js
@@ -14,16 +14,18 @@ import peer from 'consul-ui/sort/comparators/peer';
 import node from 'consul-ui/sort/comparators/node';
 
 // returns an array of Property:asc, Property:desc etc etc
-const directionify = arr => {
+const directionify = (arr) => {
   return arr.reduce((prev, item) => prev.concat([`${item}:asc`, `${item}:desc`]), []);
 };
 // Specify a list of sortable properties, when called with a property
 // returns an array ready to be passed to ember @sort
 // properties(['Potential', 'Sortable', 'Properties'])('Sortable:asc') => ['Sortable:asc']
-export const properties = (props = []) => key => {
-  const comparables = directionify(props);
-  return [comparables.find(item => item === key) || comparables[0]];
-};
+export const properties =
+  (props = []) =>
+  (key) => {
+    const comparables = directionify(props);
+    return [comparables.find((item) => item === key) || comparables[0]];
+  };
 const options = {
   properties,
   directionify,
diff --git a/ui/packages/consul-ui/app/services/state.js b/ui/packages/consul-ui/app/services/state.js
index 76a98bef48..98b9f69dd5 100644
--- a/ui/packages/consul-ui/app/services/state.js
+++ b/ui/packages/consul-ui/app/services/state.js
@@ -4,7 +4,6 @@ import flat from 'flat';
 import { createMachine, interpret } from '@xstate/fsm';
 
 export default class StateService extends Service {
-
   stateCharts = {};
 
   @service('logger') logger;
@@ -19,9 +18,9 @@ export default class StateService extends Service {
   }
 
   addGuards(chart, options) {
-    this.guards(chart).forEach(function([path, name]) {
+    this.guards(chart).forEach(function ([path, name]) {
       // xstate/fsm has no guard lookup
-      set(chart, path, function() {
+      set(chart, path, function () {
         return !!options.onGuard(...[name, ...arguments]);
       });
     });
@@ -40,11 +39,11 @@ export default class StateService extends Service {
     // xstate/fsm doesn't seem to interpret toplevel/global events
     // artificially add them here instead
     if (typeof chart.on !== 'undefined') {
-      Object.values(chart.states).forEach(function(state) {
+      Object.values(chart.states).forEach(function (state) {
         if (typeof state.on === 'undefined') {
           state.on = chart.on;
         } else {
-          Object.keys(chart.on).forEach(function(key) {
+          Object.keys(chart.on).forEach(function (key) {
             if (typeof state.on[key] === 'undefined') {
               state.on[key] = chart.on[key];
             }
@@ -61,7 +60,7 @@ export default class StateService extends Service {
       return false;
     }
     const values = Array.isArray(matches) ? matches : [matches];
-    return values.some(item => {
+    return values.some((item) => {
       return state.matches(item);
     });
   }
@@ -76,7 +75,7 @@ export default class StateService extends Service {
     chart = this.prepareChart(chart);
     const service = interpret(this.machine(chart, options));
     // returns subscription
-    service.subscribe(state => {
+    service.subscribe((state) => {
       if (state.changed) {
         this.log(chart, state);
         options.onTransition(state);
diff --git a/ui/packages/consul-ui/app/services/store.js b/ui/packages/consul-ui/app/services/store.js
index fe31a1f690..2bf971f6eb 100644
--- a/ui/packages/consul-ui/app/services/store.js
+++ b/ui/packages/consul-ui/app/services/store.js
@@ -49,7 +49,7 @@ export default class StoreService extends Store {
     // TODO: Carry this over to the other methods ^
     return adapter
       .self(this, modelClass, token.secret, token)
-      .then(payload => serializer.normalizeResponse(this, modelClass, payload, token, 'self'));
+      .then((payload) => serializer.normalizeResponse(this, modelClass, payload, token, 'self'));
   }
 
   //
@@ -59,7 +59,7 @@ export default class StoreService extends Store {
     const adapter = this.adapterFor(modelName);
     const serializer = this.serializerFor(modelName);
     const modelClass = { modelName: modelName };
-    return adapter.queryLeader(this, modelClass, null, query).then(payload => {
+    return adapter.queryLeader(this, modelClass, null, query).then((payload) => {
       payload.meta = serializer.normalizeMeta(this, modelClass, payload, null, 'leader');
       return payload;
     });
@@ -73,7 +73,7 @@ export default class StoreService extends Store {
     const modelClass = { modelName: modelName };
     return adapter
       .authorize(this, modelClass, null, query)
-      .then(payload =>
+      .then((payload) =>
         serializer.normalizeResponse(this, modelClass, payload, undefined, 'authorize')
       );
   }
diff --git a/ui/packages/consul-ui/app/services/temporal.js b/ui/packages/consul-ui/app/services/temporal.js
index 82778ddaf6..23ee5b1038 100644
--- a/ui/packages/consul-ui/app/services/temporal.js
+++ b/ui/packages/consul-ui/app/services/temporal.js
@@ -8,10 +8,9 @@ import Service from '@ember/service';
 dayjs.extend(relativeTime);
 
 export default class TemporalService extends Service {
-
   format(value, options) {
     const djs = dayjs(value);
-    if(dayjs().isBefore(djs)) {
+    if (dayjs().isBefore(djs)) {
       return dayjs().to(djs, true);
     } else {
       return dayjs().from(djs, true);
@@ -41,7 +40,6 @@ export default class TemporalService extends Service {
       default:
         assert(`${value} is not a valid type`, false);
         return value;
-
     }
   }
 }
diff --git a/ui/packages/consul-ui/app/services/timeout.js b/ui/packages/consul-ui/app/services/timeout.js
index baa498756d..f54ff91895 100644
--- a/ui/packages/consul-ui/app/services/timeout.js
+++ b/ui/packages/consul-ui/app/services/timeout.js
@@ -12,7 +12,7 @@ export default class TimeoutService extends Service {
   }
 
   tick() {
-    return new Promise(function(resolve, reject) {
+    return new Promise(function (resolve, reject) {
       next(resolve);
     });
   }
diff --git a/ui/packages/consul-ui/app/sort/comparators/auth-method.js b/ui/packages/consul-ui/app/sort/comparators/auth-method.js
index 56bbc1c2b2..957a876796 100644
--- a/ui/packages/consul-ui/app/sort/comparators/auth-method.js
+++ b/ui/packages/consul-ui/app/sort/comparators/auth-method.js
@@ -1,3 +1,4 @@
-export default ({ properties }) => (key = 'MethodName:asc') => {
-  return properties(['MethodName', 'TokenTTL'])(key);
-};
+export default ({ properties }) =>
+  (key = 'MethodName:asc') => {
+    return properties(['MethodName', 'TokenTTL'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/health-check.js b/ui/packages/consul-ui/app/sort/comparators/health-check.js
index be70e9fcf3..5f5345c3b1 100644
--- a/ui/packages/consul-ui/app/sort/comparators/health-check.js
+++ b/ui/packages/consul-ui/app/sort/comparators/health-check.js
@@ -1,42 +1,43 @@
-export default ({ properties }) => (key = 'Status:asc') => {
-  if (key.startsWith('Status:')) {
-    return function(itemA, itemB) {
-      const [, dir] = key.split(':');
-      let a, b;
-      if (dir === 'asc') {
-        a = itemA;
-        b = itemB;
-      } else {
-        b = itemA;
-        a = itemB;
-      }
-      const statusA = a.Status;
-      const statusB = b.Status;
-      switch (statusA) {
-        case 'passing':
-          // a = passing
-          // unless b is also passing then a is less important
-          return statusB === 'passing' ? 0 : 1;
-        case 'critical':
-          // a = critical
-          // unless b is also critical then a is more important
-          return statusB === 'critical' ? 0 : -1;
-        case 'warning':
-          // a = warning
-          switch (statusB) {
-            // b is passing so a is more important
-            case 'passing':
-              return -1;
-            // b is critical so a is less important
-            case 'critical':
-              return 1;
-            // a and b are both warning, therefore equal
-            default:
-              return 0;
-          }
-      }
-      return 0;
-    };
-  }
-  return properties(['Name', 'Kind'])(key);
-};
+export default ({ properties }) =>
+  (key = 'Status:asc') => {
+    if (key.startsWith('Status:')) {
+      return function (itemA, itemB) {
+        const [, dir] = key.split(':');
+        let a, b;
+        if (dir === 'asc') {
+          a = itemA;
+          b = itemB;
+        } else {
+          b = itemA;
+          a = itemB;
+        }
+        const statusA = a.Status;
+        const statusB = b.Status;
+        switch (statusA) {
+          case 'passing':
+            // a = passing
+            // unless b is also passing then a is less important
+            return statusB === 'passing' ? 0 : 1;
+          case 'critical':
+            // a = critical
+            // unless b is also critical then a is more important
+            return statusB === 'critical' ? 0 : -1;
+          case 'warning':
+            // a = warning
+            switch (statusB) {
+              // b is passing so a is more important
+              case 'passing':
+                return -1;
+              // b is critical so a is less important
+              case 'critical':
+                return 1;
+              // a and b are both warning, therefore equal
+              default:
+                return 0;
+            }
+        }
+        return 0;
+      };
+    }
+    return properties(['Name', 'Kind'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/intention.js b/ui/packages/consul-ui/app/sort/comparators/intention.js
index 8d491a9494..54329e9404 100644
--- a/ui/packages/consul-ui/app/sort/comparators/intention.js
+++ b/ui/packages/consul-ui/app/sort/comparators/intention.js
@@ -1,3 +1,3 @@
-export default () => key => {
+export default () => (key) => {
   return [key];
 };
diff --git a/ui/packages/consul-ui/app/sort/comparators/kv.js b/ui/packages/consul-ui/app/sort/comparators/kv.js
index fe4612d157..f7df782552 100644
--- a/ui/packages/consul-ui/app/sort/comparators/kv.js
+++ b/ui/packages/consul-ui/app/sort/comparators/kv.js
@@ -1,3 +1,4 @@
-export default ({ properties }) => key => {
-  return properties(['Key', 'Kind'])(key);
-};
+export default ({ properties }) =>
+  (key) => {
+    return properties(['Key', 'Kind'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/node.js b/ui/packages/consul-ui/app/sort/comparators/node.js
index 2d338a6b4e..1bac46e1c9 100644
--- a/ui/packages/consul-ui/app/sort/comparators/node.js
+++ b/ui/packages/consul-ui/app/sort/comparators/node.js
@@ -1,37 +1,38 @@
-export default ({ properties }) => (key = 'Name:asc') => {
-  if (key.startsWith('Status:')) {
-    return function(serviceA, serviceB) {
-      const [, dir] = key.split(':');
-      let a, b;
-      if (dir === 'asc') {
-        b = serviceA;
-        a = serviceB;
-      } else {
-        a = serviceA;
-        b = serviceB;
-      }
-      switch (true) {
-        case a.ChecksCritical > b.ChecksCritical:
-          return 1;
-        case a.ChecksCritical < b.ChecksCritical:
-          return -1;
-        default:
-          switch (true) {
-            case a.ChecksWarning > b.ChecksWarning:
-              return 1;
-            case a.ChecksWarning < b.ChecksWarning:
-              return -1;
-            default:
-              switch (true) {
-                case a.ChecksPassing < b.ChecksPassing:
-                  return 1;
-                case a.ChecksPassing > b.ChecksPassing:
-                  return -1;
-              }
-          }
-          return 0;
-      }
-    };
-  }
-  return properties(['Node'])(key);
-};
+export default ({ properties }) =>
+  (key = 'Name:asc') => {
+    if (key.startsWith('Status:')) {
+      return function (serviceA, serviceB) {
+        const [, dir] = key.split(':');
+        let a, b;
+        if (dir === 'asc') {
+          b = serviceA;
+          a = serviceB;
+        } else {
+          a = serviceA;
+          b = serviceB;
+        }
+        switch (true) {
+          case a.ChecksCritical > b.ChecksCritical:
+            return 1;
+          case a.ChecksCritical < b.ChecksCritical:
+            return -1;
+          default:
+            switch (true) {
+              case a.ChecksWarning > b.ChecksWarning:
+                return 1;
+              case a.ChecksWarning < b.ChecksWarning:
+                return -1;
+              default:
+                switch (true) {
+                  case a.ChecksPassing < b.ChecksPassing:
+                    return 1;
+                  case a.ChecksPassing > b.ChecksPassing:
+                    return -1;
+                }
+            }
+            return 0;
+        }
+      };
+    }
+    return properties(['Node'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/nspace.js b/ui/packages/consul-ui/app/sort/comparators/nspace.js
index 1ec2b1a99c..fbbdbb1eb6 100644
--- a/ui/packages/consul-ui/app/sort/comparators/nspace.js
+++ b/ui/packages/consul-ui/app/sort/comparators/nspace.js
@@ -1,3 +1,4 @@
-export default ({ properties }) => key => {
-  return properties(['Name'])(key);
-};
+export default ({ properties }) =>
+  (key) => {
+    return properties(['Name'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/partition.js b/ui/packages/consul-ui/app/sort/comparators/partition.js
index 1ec2b1a99c..fbbdbb1eb6 100644
--- a/ui/packages/consul-ui/app/sort/comparators/partition.js
+++ b/ui/packages/consul-ui/app/sort/comparators/partition.js
@@ -1,3 +1,4 @@
-export default ({ properties }) => key => {
-  return properties(['Name'])(key);
-};
+export default ({ properties }) =>
+  (key) => {
+    return properties(['Name'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/peer.js b/ui/packages/consul-ui/app/sort/comparators/peer.js
index 912d231403..b91da9d0b6 100644
--- a/ui/packages/consul-ui/app/sort/comparators/peer.js
+++ b/ui/packages/consul-ui/app/sort/comparators/peer.js
@@ -1,26 +1,30 @@
 import { schema } from 'consul-ui/models/peer';
 
-export default ({ properties }) => (key = 'State:asc') => {
-  if (key.startsWith('State:')) {
-    return function(itemA, itemB) {
-      const [, dir] = key.split(':');
-      let a, b;
-      if (dir === 'asc') {
-        b = itemA;
-        a = itemB;
-      } else {
-        a = itemA;
-        b = itemB;
-      }
-      switch (true) {
-        case schema.State.allowedValues.indexOf(a.State) < schema.State.allowedValues.indexOf(b.State):
-          return 1;
-        case schema.State.allowedValues.indexOf(a.State) > schema.State.allowedValues.indexOf(b.State):
-          return -1;
-        case schema.State.allowedValues.indexOf(a.State) === schema.State.allowedValues.indexOf(b.State):
-          return 0;
-      }
-    };
-  }
-  return properties(['Name'])(key);
-};
+export default ({ properties }) =>
+  (key = 'State:asc') => {
+    if (key.startsWith('State:')) {
+      return function (itemA, itemB) {
+        const [, dir] = key.split(':');
+        let a, b;
+        if (dir === 'asc') {
+          b = itemA;
+          a = itemB;
+        } else {
+          a = itemA;
+          b = itemB;
+        }
+        switch (true) {
+          case schema.State.allowedValues.indexOf(a.State) <
+            schema.State.allowedValues.indexOf(b.State):
+            return 1;
+          case schema.State.allowedValues.indexOf(a.State) >
+            schema.State.allowedValues.indexOf(b.State):
+            return -1;
+          case schema.State.allowedValues.indexOf(a.State) ===
+            schema.State.allowedValues.indexOf(b.State):
+            return 0;
+        }
+      };
+    }
+    return properties(['Name'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/policy.js b/ui/packages/consul-ui/app/sort/comparators/policy.js
index 93a22f098a..d4dc641164 100644
--- a/ui/packages/consul-ui/app/sort/comparators/policy.js
+++ b/ui/packages/consul-ui/app/sort/comparators/policy.js
@@ -1,3 +1,4 @@
-export default ({ properties }) => (key = 'Name:asc') => {
-  return properties(['Name'])(key);
-};
+export default ({ properties }) =>
+  (key = 'Name:asc') => {
+    return properties(['Name'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/role.js b/ui/packages/consul-ui/app/sort/comparators/role.js
index fc036177f8..89307fb5ce 100644
--- a/ui/packages/consul-ui/app/sort/comparators/role.js
+++ b/ui/packages/consul-ui/app/sort/comparators/role.js
@@ -1,3 +1,4 @@
-export default ({ properties }) => (key = 'Name:asc') => {
-  return properties(['Name', 'CreateIndex'])(key);
-};
+export default ({ properties }) =>
+  (key = 'Name:asc') => {
+    return properties(['Name', 'CreateIndex'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/service-instance.js b/ui/packages/consul-ui/app/sort/comparators/service-instance.js
index ff1fe39f0b..23ffec0cad 100644
--- a/ui/packages/consul-ui/app/sort/comparators/service-instance.js
+++ b/ui/packages/consul-ui/app/sort/comparators/service-instance.js
@@ -1,23 +1,24 @@
-export default ({ properties }) => key => {
-  if (key.startsWith('Status:')) {
-    const [, dir] = key.split(':');
-    const props = [
-      'PercentageChecksPassing',
-      'PercentageChecksWarning',
-      'PercentageChecksCritical',
-    ];
-    if (dir === 'asc') {
-      props.reverse();
-    }
-    return function(a, b) {
-      for (let i in props) {
-        let prop = props[i];
-        if (a[prop] === b[prop]) {
-          continue;
-        }
-        return a[prop] > b[prop] ? -1 : 1;
+export default ({ properties }) =>
+  (key) => {
+    if (key.startsWith('Status:')) {
+      const [, dir] = key.split(':');
+      const props = [
+        'PercentageChecksPassing',
+        'PercentageChecksWarning',
+        'PercentageChecksCritical',
+      ];
+      if (dir === 'asc') {
+        props.reverse();
       }
-    };
-  }
-  return properties(['Name'])(key);
-};
+      return function (a, b) {
+        for (let i in props) {
+          let prop = props[i];
+          if (a[prop] === b[prop]) {
+            continue;
+          }
+          return a[prop] > b[prop] ? -1 : 1;
+        }
+      };
+    }
+    return properties(['Name'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/service.js b/ui/packages/consul-ui/app/sort/comparators/service.js
index 1b06fea925..90d7d36eaf 100644
--- a/ui/packages/consul-ui/app/sort/comparators/service.js
+++ b/ui/packages/consul-ui/app/sort/comparators/service.js
@@ -1,37 +1,38 @@
-export default ({ properties }) => (key = 'Status:asc') => {
-  if (key.startsWith('Status:')) {
-    return function(serviceA, serviceB) {
-      const [, dir] = key.split(':');
-      let a, b;
-      if (dir === 'asc') {
-        b = serviceA;
-        a = serviceB;
-      } else {
-        a = serviceA;
-        b = serviceB;
-      }
-      switch (true) {
-        case a.MeshChecksCritical > b.MeshChecksCritical:
-          return 1;
-        case a.MeshChecksCritical < b.MeshChecksCritical:
-          return -1;
-        default:
-          switch (true) {
-            case a.MeshChecksWarning > b.MeshChecksWarning:
-              return 1;
-            case a.MeshChecksWarning < b.MeshChecksWarning:
-              return -1;
-            default:
-              switch (true) {
-                case a.MeshChecksPassing < b.MeshChecksPassing:
-                  return 1;
-                case a.MeshChecksPassing > b.MeshChecksPassing:
-                  return -1;
-              }
-          }
-          return 0;
-      }
-    };
-  }
-  return properties(['Name'])(key);
-};
+export default ({ properties }) =>
+  (key = 'Status:asc') => {
+    if (key.startsWith('Status:')) {
+      return function (serviceA, serviceB) {
+        const [, dir] = key.split(':');
+        let a, b;
+        if (dir === 'asc') {
+          b = serviceA;
+          a = serviceB;
+        } else {
+          a = serviceA;
+          b = serviceB;
+        }
+        switch (true) {
+          case a.MeshChecksCritical > b.MeshChecksCritical:
+            return 1;
+          case a.MeshChecksCritical < b.MeshChecksCritical:
+            return -1;
+          default:
+            switch (true) {
+              case a.MeshChecksWarning > b.MeshChecksWarning:
+                return 1;
+              case a.MeshChecksWarning < b.MeshChecksWarning:
+                return -1;
+              default:
+                switch (true) {
+                  case a.MeshChecksPassing < b.MeshChecksPassing:
+                    return 1;
+                  case a.MeshChecksPassing > b.MeshChecksPassing:
+                    return -1;
+                }
+            }
+            return 0;
+        }
+      };
+    }
+    return properties(['Name'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/token.js b/ui/packages/consul-ui/app/sort/comparators/token.js
index 32aac9edc9..04fc174f8d 100644
--- a/ui/packages/consul-ui/app/sort/comparators/token.js
+++ b/ui/packages/consul-ui/app/sort/comparators/token.js
@@ -1,3 +1,4 @@
-export default ({ properties }) => key => {
-  return properties(['CreateTime'])(key);
-};
+export default ({ properties }) =>
+  (key) => {
+    return properties(['CreateTime'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/sort/comparators/upstream-instance.js b/ui/packages/consul-ui/app/sort/comparators/upstream-instance.js
index 8e3bd0cd75..3037de848e 100644
--- a/ui/packages/consul-ui/app/sort/comparators/upstream-instance.js
+++ b/ui/packages/consul-ui/app/sort/comparators/upstream-instance.js
@@ -1,3 +1,4 @@
-export default ({ properties }) => (key = 'DestinationName:asc') => {
-  return properties(['DestinationName'])(key);
-};
+export default ({ properties }) =>
+  (key = 'DestinationName:asc') => {
+    return properties(['DestinationName'])(key);
+  };
diff --git a/ui/packages/consul-ui/app/styles/base/decoration/visually-hidden.css.js b/ui/packages/consul-ui/app/styles/base/decoration/visually-hidden.css.js
index 13122599ae..7c0a511c39 100644
--- a/ui/packages/consul-ui/app/styles/base/decoration/visually-hidden.css.js
+++ b/ui/packages/consul-ui/app/styles/base/decoration/visually-hidden.css.js
@@ -1,5 +1,5 @@
 export default (css) => {
-/*%visually-hidden {*/
+  /*%visually-hidden {*/
   return css`
     @keyframes visually-hidden {
       100% {
@@ -14,5 +14,5 @@ export default (css) => {
       }
     }
   `;
-/*}*/
-}
+  /*}*/
+};
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.css.js b/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.css.js
index 0a142062ed..20f61c4ca5 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.css.js
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.css.js
@@ -1,91 +1,92 @@
-export default css => css`
-*::before, *::after {
-  display: inline-block;
-  animation-play-state: paused;
-  animation-fill-mode: forwards;
-  animation-iteration-count: var(--icon-resolution, 1);
-  vertical-align: text-top;
-}
-*::before {
-  animation-name: var(--icon-name-start, var(--icon-name)),
-                  var(--icon-size-start, var(--icon-size, icon-000));
-  background-color: var(--icon-color-start, var(--icon-color));
-}
-*::after {
-  animation-name: var(--icon-name-end, var(--icon-name)),
-                  var(--icon-size-end, var(--icon-size, icon-000));
-  background-color: var(--icon-color-end, var(--icon-color));
-}
+export default (css) => css`
+  *::before,
+  *::after {
+    display: inline-block;
+    animation-play-state: paused;
+    animation-fill-mode: forwards;
+    animation-iteration-count: var(--icon-resolution, 1);
+    vertical-align: text-top;
+  }
+  *::before {
+    animation-name: var(--icon-name-start, var(--icon-name)),
+      var(--icon-size-start, var(--icon-size, icon-000));
+    background-color: var(--icon-color-start, var(--icon-color));
+  }
+  *::after {
+    animation-name: var(--icon-name-end, var(--icon-name)),
+      var(--icon-size-end, var(--icon-size, icon-000));
+    background-color: var(--icon-color-end, var(--icon-color));
+  }
 
-[style*='--icon-color-start']::before {
-  color: var(--icon-color-start);
-}
-[style*='--icon-color-end']::after {
-  color: var(--icon-color-end);
-}
-[style*='--icon-name-start']::before,
-[style*='--icon-name-end']::after {
-  content: '';
-}
+  [style*='--icon-color-start']::before {
+    color: var(--icon-color-start);
+  }
+  [style*='--icon-color-end']::after {
+    color: var(--icon-color-end);
+  }
+  [style*='--icon-name-start']::before,
+  [style*='--icon-name-end']::after {
+    content: '';
+  }
 
-@keyframes icon-000 {
-  100% {
-    width: 1.2em;
-    height: 1.2em;
+  @keyframes icon-000 {
+    100% {
+      width: 1.2em;
+      height: 1.2em;
+    }
   }
-}
-@keyframes icon-100 {
-  100% {
-    width: 0.625rem; /* 10px */
-    height: 0.625rem; /* 10px */
+  @keyframes icon-100 {
+    100% {
+      width: 0.625rem; /* 10px */
+      height: 0.625rem; /* 10px */
+    }
   }
-}
-@keyframes icon-200 {
-  100% {
-    width: 0.75rem; /* 12px */
-    height: 0.75rem; /* 12px */
+  @keyframes icon-200 {
+    100% {
+      width: 0.75rem; /* 12px */
+      height: 0.75rem; /* 12px */
+    }
   }
-}
-@keyframes icon-300 {
-  100% {
-    width: 1rem; /* 16px */
-    height: 1rem; /* 16px */
+  @keyframes icon-300 {
+    100% {
+      width: 1rem; /* 16px */
+      height: 1rem; /* 16px */
+    }
   }
-}
-@keyframes icon-400 {
-  100% {
-    width: 1.125rem; /* 18px */
-    height: 1.125rem; /* 18px */
+  @keyframes icon-400 {
+    100% {
+      width: 1.125rem; /* 18px */
+      height: 1.125rem; /* 18px */
+    }
   }
-}
-@keyframes icon-500 {
-  100% {
-    width: 1.250rem; /* 20px */
-    height: 1.250rem; /* 20px */
+  @keyframes icon-500 {
+    100% {
+      width: 1.25rem; /* 20px */
+      height: 1.25rem; /* 20px */
+    }
   }
-}
-@keyframes icon-600 {
-  100% {
-    width: 1.375rem; /* 22px */
-    height: 1.375rem; /* 22px */
+  @keyframes icon-600 {
+    100% {
+      width: 1.375rem; /* 22px */
+      height: 1.375rem; /* 22px */
+    }
   }
-}
-@keyframes icon-700 {
-  100% {
-    width: 1.500rem; /* 24px */
-    height: 1.500rem; /* 24px */
+  @keyframes icon-700 {
+    100% {
+      width: 1.5rem; /* 24px */
+      height: 1.5rem; /* 24px */
+    }
   }
-}
-@keyframes icon-800 {
-  100% {
-    width: 1.625rem; /* 26px */
-    height: 1.625rem; /* 26px */
+  @keyframes icon-800 {
+    100% {
+      width: 1.625rem; /* 26px */
+      height: 1.625rem; /* 26px */
+    }
   }
-}
-@keyframes icon-900 {
-  100% {
-    width: 1.750rem; /* 28px */
-    height: 1.750rem; /* 28px */
+  @keyframes icon-900 {
+    100% {
+      width: 1.75rem; /* 28px */
+      height: 1.75rem; /* 28px */
+    }
   }
-}
 `;
diff --git a/ui/packages/consul-ui/app/templates/application.hbs b/ui/packages/consul-ui/app/templates/application.hbs
index feace296fd..5db69c1d2d 100644
--- a/ui/packages/consul-ui/app/templates/application.hbs
+++ b/ui/packages/consul-ui/app/templates/application.hbs
@@ -1,191 +1,133 @@
-
+
 
-{{! Add the a11y route announcer }}
-
-{{! Tell CSS what we have enabled }}
-{{#if (can "use acls")}}
+  {{! Add the a11y route announcer }}
+  
+  {{! Tell CSS what we have enabled }}
+  {{#if (can "use acls")}}
   {{document-attrs class="has-acls"}}
-{{/if}}
-{{#if (can "use nspaces")}}
-  {{document-attrs class="has-nspaces"}}
-{{/if}}
-{{#if (can "use partitions")}}
-  {{document-attrs class="has-partitions"}}
-{{/if}}
-
-{{! Listen out for blocking query/client setting changes }}
-
-
-{{! Tell CSS about our theme }}
-
-{{#each-in source.data as |key value|}}
-  {{#if (and value (includes key (array "color-scheme" "contrast")))}}
-    {{document-attrs class=(concat 'prefers-' key '-' value)}}
   {{/if}}
-{{/each-in}}
-
+  {{#if (can "use nspaces")}}
+  {{document-attrs class="has-nspaces"}}
+  {{/if}}
+  {{#if (can "use partitions")}}
+  {{document-attrs class="has-partitions"}}
+  {{/if}}
 
-{{! If ACLs are enabled try get a token }}
-{{#if (can "use acls")}}
-
-{{/if}}
+  {{! Listen out for blocking query/client setting changes }}
+  
+
+  {{! Tell CSS about our theme }}
+  
+    {{#each-in source.data as |key value|}}
+    {{#if (and value (includes key (array "color-scheme" "contrast")))}}
+    {{document-attrs class=(concat 'prefers-' key '-' value)}}
+    {{/if}}
+    {{/each-in}}
+  
+
+  {{! If ACLs are enabled try get a token }}
+  {{#if (can "use acls")}}
+  
+  {{/if}}
 
 
-{{#if (not-eq route.currentName 'oauth-provider-debug')}}
+  {{#if (not-eq route.currentName 'oauth-provider-debug')}}
 
-{{! redirect if we aren't on a URL with dc information }}
-{{#if (eq route.currentName 'index')}}
-{{! until we get to the dc route we don't know any permissions }}
-{{! as we don't know the dc, any inital permission based }}
-{{! redirects are in the dc.show route}}
+  {{! redirect if we aren't on a URL with dc information }}
+  {{#if (eq route.currentName 'index')}}
+  {{! until we get to the dc route we don't know any permissions }}
+  {{! as we don't know the dc, any inital permission based }}
+  {{! redirects are in the dc.show route}}
 
-{{! 2022-04-15: Temporarily reverting the services page to the default }}
+  {{! 2022-04-15: Temporarily reverting the services page to the default }}
   {{did-insert (route-action 'replaceWith' 'dc.services.index'
-    (hash
-      dc=(env 'CONSUL_DATACENTER_LOCAL')
-    )
+  (hash
+  dc=(env 'CONSUL_DATACENTER_LOCAL')
+  )
   )}}
-{{else}}
-{{! If we are notfound, guess the params we need }}
-{{#if (eq route.currentName 'notfound')}}
-  
-{{/if}}
+  {{else}}
+  {{! If we are notfound, guess the params we need }}
+  {{#if (eq route.currentName 'notfound')}}
+  
+  {{/if}}
 
-{{! Make sure we guess and default to the right params when not found }}
-{{#let
+  {{! Make sure we guess and default to the right params when not found }}
+  {{#let
   (if (can "use partitions") (or route.params.partition notfound.partition token.Partition '') '')
   (if (can "use nspaces") (or route.params.nspace notfound.nspace token.Namespace '') '')
-as |partition nspace|}}
+  as |partition nspace|}}
 
-{{! Make sure we have enough to show the app chrome}}
-{{! Don't show anything until we have a list of DCs }}
-
-{{! Once we have a list of DCs make sure the DC we are asking for exists }}
-{{! If not use the DC that the UI is running in }}
-{{#let
+  {{! Make sure we have enough to show the app chrome}}
+  {{! Don't show anything until we have a list of DCs }}
+  
+    {{! Once we have a list of DCs make sure the DC we are asking for exists }}
+    {{! If not use the DC that the UI is running in }}
+    {{#let
 
-  (or
+    (or
 
     (if nofound.dc
-        (object-at 0 (cached-model
-          'dc'
-          (hash
-            Name=notfound.dc
-          )
-        )
-      )
+    (object-at 0 (cached-model
+    'dc'
+    (hash
+    Name=notfound.dc
+    )
+    )
+    )
     )
 
     (object-at 0 (cached-model
-        'dc'
-        (hash
-          Name=route.params.dc
-        )
-      )
+    'dc'
+    (hash
+    Name=route.params.dc
+    )
+    )
     )
 
     (hash
-      Name=(env "CONSUL_DATACENTER_LOCAL")
+    Name=(env "CONSUL_DATACENTER_LOCAL")
     )
 
-  )
+    )
 
-  dcs.data
+    dcs.data
 
-as |dc dcs|}}
-  {{#if (and (gt dc.Name.length 0) dcs)}}
+    as |dc dcs|}}
+    {{#if (and (gt dc.Name.length 0) dcs)}}
 
     {{! figure out our current DC and convert it to a model }}
-    
-    {{#if dc.data}}
-      
+    
+      {{#if dc.data}}
+      
 
-{{#if error}}
+        {{#if error}}
         {{! If we got an error from anything, show an error page }}
-        
-{{else}}
+        
+        {{else}}
         {{! Otherwise show the rest of the app}}
-        
+        
           {{outlet}}
         
 
         {{! loading component for when we need it}}
-        
-{{/if}}
+        
+        {{/if}}
 
       
-{{/if}}
+      {{/if}}
     
+    {{/if}}
+    {{/let}}
+  
+  {{/let}}
   {{/if}}
-{{/let}}
-
-{{/let}}
-{{/if}}
-{{else}}
+  {{else}}
   {{! Routes with no main navigation }}
-  
+  
     {{outlet}}
   
-{{/if}}
+  {{/if}}
 
diff --git a/ui/packages/consul-ui/app/utils/ascend.js b/ui/packages/consul-ui/app/utils/ascend.js
index 761c37594c..1a4a34909f 100644
--- a/ui/packages/consul-ui/app/utils/ascend.js
+++ b/ui/packages/consul-ui/app/utils/ascend.js
@@ -1,9 +1,4 @@
-export default function(path, num) {
+export default function (path, num) {
   const parts = path.split('/');
-  return parts.length > num
-    ? parts
-        .slice(0, -num)
-        .concat('')
-        .join('/')
-    : '';
+  return parts.length > num ? parts.slice(0, -num).concat('').join('/') : '';
 }
diff --git a/ui/packages/consul-ui/app/utils/atob.js b/ui/packages/consul-ui/app/utils/atob.js
index d930c5e319..3315790c3c 100644
--- a/ui/packages/consul-ui/app/utils/atob.js
+++ b/ui/packages/consul-ui/app/utils/atob.js
@@ -1,5 +1,5 @@
 import base64js from 'base64-js';
-export default function(str, encoding = 'utf-8') {
+export default function (str, encoding = 'utf-8') {
   // decode
   const bytes = base64js.toByteArray(str);
   return new TextDecoder(encoding).decode(bytes);
diff --git a/ui/packages/consul-ui/app/utils/btoa.js b/ui/packages/consul-ui/app/utils/btoa.js
index 5da689afd2..0ac200d012 100644
--- a/ui/packages/consul-ui/app/utils/btoa.js
+++ b/ui/packages/consul-ui/app/utils/btoa.js
@@ -1,5 +1,5 @@
 import base64js from 'base64-js';
-export default function(str) {
+export default function (str) {
   // encode
   const bytes = new TextEncoder().encode(str);
   return base64js.fromByteArray(bytes);
diff --git a/ui/packages/consul-ui/app/utils/callable-type.js b/ui/packages/consul-ui/app/utils/callable-type.js
index 20ef164205..6023bc92c3 100644
--- a/ui/packages/consul-ui/app/utils/callable-type.js
+++ b/ui/packages/consul-ui/app/utils/callable-type.js
@@ -1,6 +1,6 @@
-export default function(obj) {
+export default function (obj) {
   if (typeof obj !== 'function') {
-    return function() {
+    return function () {
       return obj;
     };
   } else {
diff --git a/ui/packages/consul-ui/app/utils/create-fingerprinter.js b/ui/packages/consul-ui/app/utils/create-fingerprinter.js
index d0f103dcfb..bc64816479 100644
--- a/ui/packages/consul-ui/app/utils/create-fingerprinter.js
+++ b/ui/packages/consul-ui/app/utils/create-fingerprinter.js
@@ -1,8 +1,8 @@
 import { get } from '@ember/object';
 
-export default function(foreignKey, nspaceKey, partitionKey, hash = JSON.stringify) {
-  return function(primaryKey, slugKey, foreignKeyValue, nspaceValue, partitionValue) {
-    return function(item) {
+export default function (foreignKey, nspaceKey, partitionKey, hash = JSON.stringify) {
+  return function (primaryKey, slugKey, foreignKeyValue, nspaceValue, partitionValue) {
+    return function (item) {
       foreignKeyValue = foreignKeyValue == null ? item[foreignKey] : foreignKeyValue;
       if (foreignKeyValue == null) {
         throw new Error(
@@ -10,7 +10,7 @@ export default function(foreignKey, nspaceKey, partitionKey, hash = JSON.stringi
         );
       }
       const slugKeys = slugKey.split(',');
-      const slugValues = slugKeys.map(function(slugKey) {
+      const slugValues = slugKeys.map(function (slugKey) {
         const slug = get(item, slugKey);
         if (slug == null || slug.length < 1) {
           throw new Error(
diff --git a/ui/packages/consul-ui/app/utils/distance.js b/ui/packages/consul-ui/app/utils/distance.js
index 67c914e649..1d1e33ac7b 100644
--- a/ui/packages/consul-ui/app/utils/distance.js
+++ b/ui/packages/consul-ui/app/utils/distance.js
@@ -1,7 +1,7 @@
 // TODO: Istanbul is ignored for the moment as it's not mine,
 // once I come here properly and 100% follow unignore
 /* istanbul ignore file */
-export default function(a, b) {
+export default function (a, b) {
   a = a.Coord;
   b = b.Coord;
   let sum = 0;
diff --git a/ui/packages/consul-ui/app/utils/dom/click-first-anchor.js b/ui/packages/consul-ui/app/utils/dom/click-first-anchor.js
index 04cde2e9e9..8d60125012 100644
--- a/ui/packages/consul-ui/app/utils/dom/click-first-anchor.js
+++ b/ui/packages/consul-ui/app/utils/dom/click-first-anchor.js
@@ -1,24 +1,24 @@
-const clickEvent = function($el) {
+const clickEvent = function ($el) {
   ['mousedown', 'mouseup', 'click']
-    .map(function(type) {
+    .map(function (type) {
       return new MouseEvent(type, {
         bubbles: true,
         cancelable: true,
         view: window,
       });
     })
-    .forEach(function(event) {
+    .forEach(function (event) {
       $el.dispatchEvent(event);
     });
 };
-export default function(closest, click = clickEvent) {
+export default function (closest, click = clickEvent) {
   // TODO: Decide whether we should use `e` for ease
   // or `target`/`el`
   // TODO: currently, using a string stopElement to tell the func
   // where to stop looking and currenlty default is 'tr' because
   // it's backwards compatible.
   // Long-term this func shouldn't default to 'tr'
-  return function(e, stopElement = 'tr') {
+  return function (e, stopElement = 'tr') {
     // click on row functionality
     // so if you click the actual row but not a link
     // find the first link and fire that instead
diff --git a/ui/packages/consul-ui/app/utils/dom/closest.js b/ui/packages/consul-ui/app/utils/dom/closest.js
index d66380a046..db984b0c7f 100644
--- a/ui/packages/consul-ui/app/utils/dom/closest.js
+++ b/ui/packages/consul-ui/app/utils/dom/closest.js
@@ -1,4 +1,4 @@
-export default function(sel, el) {
+export default function (sel, el) {
   // basic DOM closest utility to cope with no support
   // TODO: instead of degrading gracefully
   // add a while polyfill for closest
diff --git a/ui/packages/consul-ui/app/utils/dom/create-listeners.js b/ui/packages/consul-ui/app/utils/dom/create-listeners.js
index c8ffe26c41..c603dfe199 100644
--- a/ui/packages/consul-ui/app/utils/dom/create-listeners.js
+++ b/ui/packages/consul-ui/app/utils/dom/create-listeners.js
@@ -21,10 +21,10 @@ class Listeners {
           [event]: handler,
         };
       }
-      const removers = Object.keys(obj).map(function(key) {
-        return (function(event, handler) {
+      const removers = Object.keys(obj).map(function (key) {
+        return (function (event, handler) {
           target[addEventListener](event, handler);
-          return function() {
+          return function () {
             target[removeEventListener](event, handler);
             return handler;
           };
@@ -33,22 +33,22 @@ class Listeners {
       // TODO: if event was a string only return the first
       // although the problem remains that it could sometimes return
       // a function, sometimes an array, so this needs some more thought
-      remove = () => removers.map(item => item());
+      remove = () => removers.map((item) => item());
     }
     this.listeners.push(remove);
     return () => {
-      const pos = this.listeners.findIndex(function(item) {
+      const pos = this.listeners.findIndex(function (item) {
         return item === remove;
       });
       return this.listeners.splice(pos, 1)[0]();
     };
   }
   remove() {
-    const handlers = this.listeners.map(item => item());
+    const handlers = this.listeners.map((item) => item());
     this.listeners.splice(0, this.listeners.length);
     return handlers;
   }
 }
-export default function(listeners = []) {
+export default function (listeners = []) {
   return new Listeners(listeners);
 }
diff --git a/ui/packages/consul-ui/app/utils/dom/event-source/blocking.js b/ui/packages/consul-ui/app/utils/dom/event-source/blocking.js
index 8ff1ad539e..ae2a25bb80 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-source/blocking.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-source/blocking.js
@@ -4,9 +4,9 @@ const pause = 2000;
 // native EventSource retry is ~3s wait
 // any specified errors here will mean that the blocking query will attempt
 // a reconnection every 3s until it reconnects to Consul
-export const createErrorBackoff = function(ms = 3000, P = Promise, wait = setTimeout) {
+export const createErrorBackoff = function (ms = 3000, P = Promise, wait = setTimeout) {
   // This expects an ember-data like error
-  return function(err) {
+  return function (err) {
     // expect and ember-data error or a http-like error (e.statusCode)
     let status = get(err, 'errors.firstObject.status') || get(err, 'statusCode');
     if (typeof status !== 'undefined') {
@@ -20,8 +20,8 @@ export const createErrorBackoff = function(ms = 3000, P = Promise, wait = setTim
           // TODO: Move this to the view layer so we can show a connection error
           // and reconnection success to the user
           // Any 0 aborted connections should back off and try again
-          return new P(function(resolve) {
-            wait(function() {
+          return new P(function (resolve) {
+            wait(function () {
               resolve(err);
             }, ms);
           });
@@ -31,7 +31,7 @@ export const createErrorBackoff = function(ms = 3000, P = Promise, wait = setTim
     throw err;
   };
 };
-export const validateCursor = function(current, prev = null) {
+export const validateCursor = function (current, prev = null) {
   let cursor = parseInt(current);
   if (!isNaN(cursor)) {
     // if cursor is less than the current cursor, reset to zero
@@ -42,16 +42,16 @@ export const validateCursor = function(current, prev = null) {
     return Math.max(cursor, 1);
   }
 };
-const throttle = function(configuration, prev, current) {
-  return function(obj) {
-    return new Promise(function(resolve, reject) {
-      setTimeout(function() {
+const throttle = function (configuration, prev, current) {
+  return function (obj) {
+    return new Promise(function (resolve, reject) {
+      setTimeout(function () {
         resolve(obj);
       }, configuration.interval || pause);
     });
   };
 };
-const defaultCreateEvent = function(result, configuration) {
+const defaultCreateEvent = function (result, configuration) {
   return {
     type: 'message',
     data: result,
@@ -63,7 +63,7 @@ const defaultCreateEvent = function(result, configuration) {
  * @param {Class} [CallableEventSource] - CallableEventSource Class
  * @param {Function} [backoff] - Default backoff function for all instances, defaults to createErrorBackoff
  */
-export default function(EventSource, backoff = createErrorBackoff()) {
+export default function (EventSource, backoff = createErrorBackoff()) {
   /**
    * An EventSource implementation to add native EventSource-like functionality with just callbacks (`cursor` and 5xx backoff)
    *
@@ -77,15 +77,15 @@ export default function(EventSource, backoff = createErrorBackoff()) {
    *   `cursor` - Cursor position of the EventSource
    *   `createEvent` - A data filter, giving you the opportunity to filter or replace the event data, such as removing/replacing records
    */
-  const BlockingEventSource = function(source, configuration = {}) {
+  const BlockingEventSource = function (source, configuration = {}) {
     const { currentEvent, ...config } = configuration;
     EventSource.apply(this, [
-      configuration => {
+      (configuration) => {
         const { createEvent, ...superConfiguration } = configuration;
         return source
           .apply(this, [superConfiguration, this])
           .catch(backoff)
-          .then(result => {
+          .then((result) => {
             if (result instanceof Error) {
               return result;
             }
@@ -126,7 +126,7 @@ export default function(EventSource, backoff = createErrorBackoff()) {
     // only on initialization
     // if we already have an currentEvent set via configuration
     // dispatch the event so things are populated immediately
-    this.addEventListener('open', e => {
+    this.addEventListener('open', (e) => {
       const currentEvent = e.target.getCurrentEvent();
       if (typeof currentEvent !== 'undefined') {
         this.dispatchEvent(currentEvent);
@@ -143,10 +143,10 @@ export default function(EventSource, backoff = createErrorBackoff()) {
     }),
     {
       // if we are having these props, at least make getters
-      getCurrentEvent: function() {
+      getCurrentEvent: function () {
         return this.currentEvent;
       },
-      getPreviousEvent: function() {
+      getPreviousEvent: function () {
         return this.previousEvent;
       },
     }
diff --git a/ui/packages/consul-ui/app/utils/dom/event-source/cache.js b/ui/packages/consul-ui/app/utils/dom/event-source/cache.js
index 4e7d9dee58..34e2cb7eda 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-source/cache.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-source/cache.js
@@ -1,6 +1,6 @@
-export default function(source, DefaultEventSource, P = Promise) {
-  return function(sources) {
-    return function(cb, configuration) {
+export default function (source, DefaultEventSource, P = Promise) {
+  return function (sources) {
+    return function (cb, configuration) {
       const key = configuration.key;
       if (typeof sources[key] !== 'undefined' && configuration.settings.enabled) {
         if (typeof sources[key].configuration === 'undefined') {
@@ -12,12 +12,12 @@ export default function(source, DefaultEventSource, P = Promise) {
         const EventSource = configuration.type || DefaultEventSource;
         const eventSource = (sources[key] = new EventSource(cb, configuration));
         return source(eventSource)
-          .catch(function(e) {
+          .catch(function (e) {
             // any errors, delete from the cache for next time
             delete sources[key];
             return P.reject(e);
           })
-          .then(function(eventSource) {
+          .then(function (eventSource) {
             // make sure we cancel everything out if there is no cursor
             if (typeof eventSource.configuration.cursor === 'undefined') {
               eventSource.close();
diff --git a/ui/packages/consul-ui/app/utils/dom/event-source/callable.js b/ui/packages/consul-ui/app/utils/dom/event-source/callable.js
index 86e8af079b..4d3ccd091f 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-source/callable.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-source/callable.js
@@ -1,4 +1,4 @@
-export const defaultRunner = function(target, configuration, isClosed) {
+export const defaultRunner = function (target, configuration, isClosed) {
   if (isClosed(target)) {
     target.dispatchEvent({ type: 'close' });
     return;
@@ -6,17 +6,17 @@ export const defaultRunner = function(target, configuration, isClosed) {
   // TODO Consider wrapping this is a promise for none thenable returns
   return target.source
     .bind(target)(configuration, target)
-    .then(function(res) {
+    .then(function (res) {
       return defaultRunner(target, configuration, isClosed);
     });
 };
-const errorEvent = function(e) {
+const errorEvent = function (e) {
   return new ErrorEvent('error', {
     error: e,
     message: e.message,
   });
 };
-const isClosed = function(target) {
+const isClosed = function (target) {
   switch (target.readyState) {
     case 2: // CLOSED
     case 3: // CLOSING
@@ -24,18 +24,18 @@ const isClosed = function(target) {
   }
   return false;
 };
-export default function(
+export default function (
   EventTarget,
   P = Promise,
   run = defaultRunner,
   createErrorEvent = errorEvent
 ) {
-  const CallableEventSource = function(source, configuration = {}) {
+  const CallableEventSource = function (source, configuration = {}) {
     EventTarget.call(this);
     this.readyState = 2;
     this.source =
       typeof source !== 'function'
-        ? function(configuration, target) {
+        ? function (configuration, target) {
             this.close();
             return P.resolve();
           }
@@ -52,7 +52,7 @@ export default function(
         this.dispatchEvent({ type: 'open' });
         return run(this, configuration, isClosed);
       })
-      .catch(e => {
+      .catch((e) => {
         this.dispatchEvent(createErrorEvent(e));
         // close after the dispatch so we can tell if it was an error whilst closed or not
         // but make sure its before the promise tick
@@ -74,7 +74,7 @@ export default function(
       },
     }),
     {
-      close: function() {
+      close: function () {
         // additional readyState 3 = CLOSING
         switch (this.readyState) {
           case 0: // CONNECTING
diff --git a/ui/packages/consul-ui/app/utils/dom/event-source/index.js b/ui/packages/consul-ui/app/utils/dom/event-source/index.js
index 06d6e31822..80919d6e0b 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-source/index.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-source/index.js
@@ -22,7 +22,7 @@ import { env } from 'consul-ui/env';
 let runner;
 switch (env('CONSUL_UI_REALTIME_RUNNER')) {
   case 'ec':
-    runner = function(target, configuration, isClosed) {
+    runner = function (target, configuration, isClosed) {
       return EmberObject.extend({
         task: task(function* run() {
           while (!isClosed(target)) {
@@ -36,8 +36,8 @@ switch (env('CONSUL_UI_REALTIME_RUNNER')) {
     };
     break;
   case 'generator':
-    runner = async function(target, configuration, isClosed) {
-      const run = function*() {
+    runner = async function (target, configuration, isClosed) {
+      const run = function* () {
         while (!isClosed(target)) {
           yield target.source.bind(target)(configuration);
         }
@@ -52,8 +52,8 @@ switch (env('CONSUL_UI_REALTIME_RUNNER')) {
     };
     break;
   case 'async':
-    runner = async function(target, configuration, isClosed) {
-      const run = function() {
+    runner = async function (target, configuration, isClosed) {
+      const run = function () {
         return target.source.bind(target)(configuration);
       };
       let res;
@@ -77,49 +77,49 @@ export const StorageEventSource = StorageEventSourceFactory(EventTarget, Promise
 export const proxy = proxyFactory(ObjectProxy, ArrayProxy, createListeners);
 export const resolve = firstResolverFactory(Promise);
 
-export const source = function(source) {
+export const source = function (source) {
   // create API needed for conventional promise blocked, loading, Routes
   // i.e. resolve/reject on first response
-  return resolve(source, createListeners()).then(function(data) {
+  return resolve(source, createListeners()).then(function (data) {
     // create API needed for conventional DD/computed and Controllers
     return proxy(source, data);
   });
 };
 export const cache = cacheFactory(source, BlockingEventSource, Promise);
 
-const errorEvent = function(e) {
+const errorEvent = function (e) {
   return new ErrorEvent('error', {
     error: e,
     message: e.message,
   });
 };
-export const fromPromise = function(promise) {
-  return new CallableEventSource(function(configuration) {
+export const fromPromise = function (promise) {
+  return new CallableEventSource(function (configuration) {
     const dispatch = this.dispatchEvent.bind(this);
     const close = () => {
       this.close();
     };
     return promise
-      .then(function(result) {
+      .then(function (result) {
         close();
         dispatch({ type: 'message', data: result });
       })
-      .catch(function(e) {
+      .catch(function (e) {
         close();
         dispatch(errorEvent(e));
       });
   });
 };
-export const toPromise = function(target, cb, eventName = 'message', errorName = 'error') {
-  return new Promise(function(resolve, reject) {
+export const toPromise = function (target, cb, eventName = 'message', errorName = 'error') {
+  return new Promise(function (resolve, reject) {
     // TODO: e.target.data
-    const message = function(e) {
+    const message = function (e) {
       resolve(e.data);
     };
-    const error = function(e) {
+    const error = function (e) {
       reject(e.error);
     };
-    const remove = function() {
+    const remove = function () {
       if (typeof target.close === 'function') {
         target.close();
       }
@@ -131,14 +131,14 @@ export const toPromise = function(target, cb, eventName = 'message', errorName =
     cb(remove);
   });
 };
-export const once = function(cb, configuration, Source = OpenableEventSource) {
-  return new Source(function(configuration, source) {
+export const once = function (cb, configuration, Source = OpenableEventSource) {
+  return new Source(function (configuration, source) {
     return cb(configuration, source)
-      .then(function(data) {
+      .then(function (data) {
         source.dispatchEvent({ type: 'message', data: data });
         source.close();
       })
-      .catch(function(e) {
+      .catch(function (e) {
         source.dispatchEvent({ type: 'error', error: e });
         source.close();
       });
diff --git a/ui/packages/consul-ui/app/utils/dom/event-source/openable.js b/ui/packages/consul-ui/app/utils/dom/event-source/openable.js
index a745022057..516f74ea13 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-source/openable.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-source/openable.js
@@ -3,8 +3,8 @@
  *
  * @param {Class} eventSource - EventSource class to extend from
  */
-export default function(eventSource = EventSource) {
-  const OpenableEventSource = function(source, configuration = {}) {
+export default function (eventSource = EventSource) {
+  const OpenableEventSource = function (source, configuration = {}) {
     eventSource.apply(this, arguments);
     this.configuration = configuration;
   };
@@ -17,7 +17,7 @@ export default function(eventSource = EventSource) {
       },
     }),
     {
-      open: function() {
+      open: function () {
         switch (this.readyState) {
           case 3: // CLOSING
             this.readyState = 1;
diff --git a/ui/packages/consul-ui/app/utils/dom/event-source/proxy.js b/ui/packages/consul-ui/app/utils/dom/event-source/proxy.js
index eca66e1847..333e1322b0 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-source/proxy.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-source/proxy.js
@@ -1,44 +1,44 @@
 import { get, set } from '@ember/object';
 
 const proxies = {};
-export default function(ObjProxy, ArrProxy, createListeners) {
-  return function(source, data = []) {
+export default function (ObjProxy, ArrProxy, createListeners) {
+  return function (source, data = []) {
     let Proxy = ObjProxy;
     // TODO: When is data ever a string?
     let type = 'object';
     if (typeof data !== 'string' && typeof get(data, 'length') !== 'undefined') {
       Proxy = ArrProxy;
       type = 'array';
-      data = data.filter(function(item) {
+      data = data.filter(function (item) {
         return !get(item, 'isDestroyed') && !get(item, 'isDeleted') && get(item, 'isLoaded');
       });
     }
     if (typeof proxies[type] === 'undefined') {
       proxies[type] = Proxy.extend({
-        init: function() {
+        init: function () {
           this.listeners = createListeners();
-          this.listeners.add(this._source, 'message', e => set(this, 'content', e.data));
+          this.listeners.add(this._source, 'message', (e) => set(this, 'content', e.data));
           this._super(...arguments);
         },
-        addEventListener: function(type, handler) {
+        addEventListener: function (type, handler) {
           this.listeners.add(this._source, type, handler);
         },
-        getCurrentEvent: function() {
+        getCurrentEvent: function () {
           return this._source.getCurrentEvent(...arguments);
         },
-        removeEventListener: function() {
+        removeEventListener: function () {
           return this._source.removeEventListener(...arguments);
         },
-        dispatchEvent: function() {
+        dispatchEvent: function () {
           return this._source.dispatchEvent(...arguments);
         },
-        close: function() {
+        close: function () {
           return this._source.close(...arguments);
         },
-        open: function() {
+        open: function () {
           return this._source.open(...arguments);
         },
-        willDestroy: function() {
+        willDestroy: function () {
           this._super(...arguments);
           this.close();
           this.listeners.remove();
diff --git a/ui/packages/consul-ui/app/utils/dom/event-source/resolver.js b/ui/packages/consul-ui/app/utils/dom/event-source/resolver.js
index fcab163506..3046f2da3a 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-source/resolver.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-source/resolver.js
@@ -1,26 +1,26 @@
-export default function(P = Promise) {
-  return function(source, listeners) {
+export default function (P = Promise) {
+  return function (source, listeners) {
     let current;
     if (typeof source.getCurrentEvent === 'function') {
       current = source.getCurrentEvent();
     }
     if (current != null) {
       // immediately resolve if we have previous cached data
-      return P.resolve(current.data).then(function(cached) {
+      return P.resolve(current.data).then(function (cached) {
         source.open();
         return cached;
       });
     }
     // if we have no previously cached data, listen for the first response
-    return new P(function(resolve, reject) {
+    return new P(function (resolve, reject) {
       // close, cleanup and reject if we get an error
-      listeners.add(source, 'error', function(e) {
+      listeners.add(source, 'error', function (e) {
         listeners.remove();
         e.target.close();
         reject(e.error);
       });
       // ...or cleanup and respond with the first lot of data
-      listeners.add(source, 'message', function(e) {
+      listeners.add(source, 'message', function (e) {
         listeners.remove();
         resolve(e.data);
       });
diff --git a/ui/packages/consul-ui/app/utils/dom/event-source/storage.js b/ui/packages/consul-ui/app/utils/dom/event-source/storage.js
index 602c6af3d5..183b4434c5 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-source/storage.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-source/storage.js
@@ -1,10 +1,10 @@
-export default function(EventTarget, P = Promise) {
-  const handler = function(e) {
+export default function (EventTarget, P = Promise) {
+  const handler = function (e) {
     // e is undefined on the opening call
     if (typeof e === 'undefined' || e.key === this.configuration.key) {
       if (this.readyState === 1) {
         const res = this.source(this.configuration);
-        P.resolve(res).then(data => {
+        P.resolve(res).then((data) => {
           this.configuration.cursor++;
           this._currentEvent = { type: 'message', data: data };
           this.dispatchEvent({ type: 'message', data: data });
diff --git a/ui/packages/consul-ui/app/utils/dom/event-target/rsvp.js b/ui/packages/consul-ui/app/utils/dom/event-target/rsvp.js
index d1a108663e..ee54c86724 100644
--- a/ui/packages/consul-ui/app/utils/dom/event-target/rsvp.js
+++ b/ui/packages/consul-ui/app/utils/dom/event-target/rsvp.js
@@ -4,7 +4,7 @@ import RSVP from 'rsvp';
 // The MIT License (MIT) - Copyright (c) 2015 Toru Nagashima
 import { setCurrentTarget, wrapEvent } from './event-target-shim/event';
 
-const EventTarget = function() {};
+const EventTarget = function () {};
 function callbacksFor(object) {
   let callbacks = object._promiseCallbacks;
 
@@ -23,7 +23,7 @@ EventTarget.prototype = Object.assign(
     },
   }),
   {
-    dispatchEvent: function(obj) {
+    dispatchEvent: function (obj) {
       // borrow just what I need from event-target-shim
       // to make true events even ErrorEvents with targets
       const wrappedEvent = wrapEvent(this, obj);
@@ -47,10 +47,10 @@ EventTarget.prototype = Object.assign(
         }
       }
     },
-    addEventListener: function(event, cb) {
+    addEventListener: function (event, cb) {
       this.on(event, cb);
     },
-    removeEventListener: function(event, cb) {
+    removeEventListener: function (event, cb) {
       try {
         this.off(event, cb);
       } catch (e) {
diff --git a/ui/packages/consul-ui/app/utils/dom/get-component-factory.js b/ui/packages/consul-ui/app/utils/dom/get-component-factory.js
index 5ebc174ca7..9bd69c3449 100644
--- a/ui/packages/consul-ui/app/utils/dom/get-component-factory.js
+++ b/ui/packages/consul-ui/app/utils/dom/get-component-factory.js
@@ -1,6 +1,6 @@
-export default function(owner, key = '-view-registry:main') {
+export default function (owner, key = '-view-registry:main') {
   const components = owner.lookup(key);
-  return function(el) {
+  return function (el) {
     const id = el.getAttribute('id');
     if (id) {
       return components[id];
diff --git a/ui/packages/consul-ui/app/utils/dom/is-outside.js b/ui/packages/consul-ui/app/utils/dom/is-outside.js
index d069a361d9..378140a38b 100644
--- a/ui/packages/consul-ui/app/utils/dom/is-outside.js
+++ b/ui/packages/consul-ui/app/utils/dom/is-outside.js
@@ -1,4 +1,4 @@
-export default function(el, target, doc = document) {
+export default function (el, target, doc = document) {
   if (el) {
     // TODO: Potentially type check el and target
     // look to see what .contains does when it gets an unexpected type
diff --git a/ui/packages/consul-ui/app/utils/dom/normalize-event.js b/ui/packages/consul-ui/app/utils/dom/normalize-event.js
index b61f11b79c..4b0f41ffe1 100644
--- a/ui/packages/consul-ui/app/utils/dom/normalize-event.js
+++ b/ui/packages/consul-ui/app/utils/dom/normalize-event.js
@@ -1,4 +1,4 @@
-export default function(e, value, target = {}) {
+export default function (e, value, target = {}) {
   if (typeof e.target !== 'undefined') {
     return e;
   }
diff --git a/ui/packages/consul-ui/app/utils/dom/qsa-factory.js b/ui/packages/consul-ui/app/utils/dom/qsa-factory.js
index ff5770a349..592db4749e 100644
--- a/ui/packages/consul-ui/app/utils/dom/qsa-factory.js
+++ b/ui/packages/consul-ui/app/utils/dom/qsa-factory.js
@@ -1,5 +1,5 @@
-export default function(doc = document) {
-  return function(sel, context = doc) {
+export default function (doc = document) {
+  return function (sel, context = doc) {
     return context.querySelectorAll(sel);
   };
 }
diff --git a/ui/packages/consul-ui/app/utils/dom/sibling.js b/ui/packages/consul-ui/app/utils/dom/sibling.js
index 9c6cee85bd..cd2708990c 100644
--- a/ui/packages/consul-ui/app/utils/dom/sibling.js
+++ b/ui/packages/consul-ui/app/utils/dom/sibling.js
@@ -1,4 +1,4 @@
-export default function(el, name) {
+export default function (el, name) {
   let sibling = el;
   while ((sibling = sibling.nextSibling)) {
     if (sibling.nodeType === 1) {
diff --git a/ui/packages/consul-ui/app/utils/editor/lint.js b/ui/packages/consul-ui/app/utils/editor/lint.js
index b77b65d216..ed38c4cfe8 100644
--- a/ui/packages/consul-ui/app/utils/editor/lint.js
+++ b/ui/packages/consul-ui/app/utils/editor/lint.js
@@ -5,16 +5,16 @@
 // follow more or less what CodeMirror does but doesn't expose
 // see codemirror/addon/mode/loadmode.js
 
-export const createLoader = function(
+export const createLoader = function (
   $$ = document.getElementsByTagName.bind(document),
   CM = CodeMirror
 ) {
-  CM.registerHelper('lint', 'ruby', function(text) {
+  CM.registerHelper('lint', 'ruby', function (text) {
     return [];
   });
-  return function(editor, mode, cb) {
+  return function (editor, mode, cb) {
     let scripts = [...$$('script')];
-    const loaded = scripts.find(function(item) {
+    const loaded = scripts.find(function (item) {
       return item.src.indexOf(`/codemirror/mode/${mode}/${mode}.js`) !== -1;
     });
     CM.autoLoadMode(editor, mode);
@@ -22,15 +22,15 @@ export const createLoader = function(
       cb();
     } else {
       scripts = [...$$('script')];
-      CM.on(scripts[0], 'load', function() {
+      CM.on(scripts[0], 'load', function () {
         cb();
       });
     }
   };
 };
 const load = createLoader();
-export default function(editor, mode) {
-  load(editor, mode, function() {
+export default function (editor, mode) {
+  load(editor, mode, function () {
     if (editor.getValue().trim().length) {
       editor.performLint();
     }
diff --git a/ui/packages/consul-ui/app/utils/filter/index.js b/ui/packages/consul-ui/app/utils/filter/index.js
index 4b4d16cb29..1791634ab6 100644
--- a/ui/packages/consul-ui/app/utils/filter/index.js
+++ b/ui/packages/consul-ui/app/utils/filter/index.js
@@ -1,6 +1,6 @@
 import setHelpers from 'mnemonist/set';
 
-const createPossibles = function(predicates) {
+const createPossibles = function (predicates) {
   // create arrays of allowed values
   return Object.entries(predicates).reduce((prev, [key, value]) => {
     if (typeof value !== 'function') {
@@ -11,7 +11,7 @@ const createPossibles = function(predicates) {
     return prev;
   }, {});
 };
-const sanitize = function(values, possibles) {
+const sanitize = function (values, possibles) {
   return Object.keys(possibles).reduce((prev, key) => {
     // only set the value if the value has a length of > 0
     const value = typeof values[key] === 'undefined' ? [] : values[key];
@@ -27,7 +27,7 @@ const sanitize = function(values, possibles) {
     return prev;
   }, {});
 };
-const execute = function(item, values, predicates) {
+const execute = function (item, values, predicates) {
   // every/and the top level values
   return Object.entries(values).every(([key, values]) => {
     let predicate = predicates[key];
@@ -35,21 +35,21 @@ const execute = function(item, values, predicates) {
       return predicate(item, values);
     } else {
       // if the top level values can have multiple values some/or them
-      return values.some(val => predicate[val](item, val));
+      return values.some((val) => predicate[val](item, val));
     }
   });
 };
 // exports a function that requires a hash of predicates passed in
-export const andOr = predicates => {
+export const andOr = (predicates) => {
   // figure out all possible values from the hash of predicates
   const possibles = createPossibles(predicates);
-  return values => {
+  return (values) => {
     // this is what is called post injection
     // the actual user values are passed in here so 'sanitize' them which is
     // basically checking against the possibles
     values = sanitize(values, possibles);
     // this is your actual filter predicate
-    return item => {
+    return (item) => {
       return execute(item, values, predicates);
     };
   };
diff --git a/ui/packages/consul-ui/app/utils/form/builder.js b/ui/packages/consul-ui/app/utils/form/builder.js
index 8d32768910..e0b140aa4c 100644
--- a/ui/packages/consul-ui/app/utils/form/builder.js
+++ b/ui/packages/consul-ui/app/utils/form/builder.js
@@ -6,7 +6,7 @@ import lookupValidator from 'ember-changeset-validations';
 // Keep these here for now so forms are easy to make
 // TODO: Probably move this to utils/form/parse-element-name
 import parseElementName from 'consul-ui/utils/get-form-name-property';
-export const defaultChangeset = function(data, validators) {
+export const defaultChangeset = function (data, validators) {
   return createChangeset(data, lookupValidator(validators), validators, { changeset: Changeset });
 };
 /**
@@ -26,18 +26,18 @@ export const defaultChangeset = function(data, validators) {
  *   currently the only supported property of these configuration objects is `type` which currently allows you to
  *   set a property as 'array-like'
  */
-export default function(changeset = defaultChangeset, getFormNameProperty = parseElementName) {
-  return function(name = '', obj = {}) {
+export default function (changeset = defaultChangeset, getFormNameProperty = parseElementName) {
+  return function (name = '', obj = {}) {
     const _children = {};
     let _validators = null;
     // TODO make this into a class to reuse prototype
     const form = {
       data: null,
       name: name,
-      getName: function() {
+      getName: function () {
         return this.name;
       },
-      setData: function(data) {
+      setData: function (data) {
         // Array check temporarily for when we get an empty array from repo.status
         if (_validators && !Array.isArray(data)) {
           data = changeset(data, _validators);
@@ -45,14 +45,14 @@ export default function(changeset = defaultChangeset, getFormNameProperty = pars
         set(this, 'data', data);
         return this;
       },
-      getData: function() {
+      getData: function () {
         return this.data;
       },
-      add: function(child) {
+      add: function (child) {
         _children[child.getName()] = child;
         return this;
       },
-      handleEvent: function(e, targetName) {
+      handleEvent: function (e, targetName) {
         const target = e.target;
         // currently we only use targetName in {{form-component}} for handling deeply
         // nested forms, once {{form-component}} handles deeply nested forms targetName can go
@@ -118,32 +118,32 @@ export default function(changeset = defaultChangeset, getFormNameProperty = pars
         // validate everything
         return this.validate();
       },
-      reset: function() {
+      reset: function () {
         const data = this.getData();
         if (typeof data.rollbackAttributes === 'function') {
           this.getData().rollbackAttributes();
         }
         return this;
       },
-      clear: function(cb = {}) {
+      clear: function (cb = {}) {
         if (typeof cb === 'function') {
           return (this.clearer = cb);
         } else {
           return this.setData(this.clearer(cb)).getData();
         }
       },
-      submit: function(cb = {}) {
+      submit: function (cb = {}) {
         if (typeof cb === 'function') {
           return (this.submitter = cb);
         } else {
           this.submitter(this.getData());
         }
       },
-      setValidators: function(validators) {
+      setValidators: function (validators) {
         _validators = validators;
         return this;
       },
-      validate: function() {
+      validate: function () {
         const data = this.getData();
         // just pass along to the Changeset for now
         if (typeof data.validate === 'function') {
@@ -151,19 +151,19 @@ export default function(changeset = defaultChangeset, getFormNameProperty = pars
         }
         return this;
       },
-      addError: function(name, message) {
+      addError: function (name, message) {
         const data = this.getData();
         if (typeof data.addError === 'function') {
           data.addError(...arguments);
         }
       },
-      form: function(name) {
+      form: function (name) {
         if (name == null) {
           return this;
         }
         return _children[name];
       },
-      has: function(name) {
+      has: function (name) {
         return typeof _children[name] !== 'undefined';
       },
     };
diff --git a/ui/packages/consul-ui/app/utils/get-environment.js b/ui/packages/consul-ui/app/utils/get-environment.js
index 86e051f21e..264e5c8e4e 100644
--- a/ui/packages/consul-ui/app/utils/get-environment.js
+++ b/ui/packages/consul-ui/app/utils/get-environment.js
@@ -7,25 +7,20 @@ import { runInDebug } from '@ember/debug';
 // 3. Those that can be set only during development by adding cookie values
 // via the browsers Web Inspector, or via the browsers hash (#COOKIE_NAME=1),
 // which is useful for showing the UI with various settings enabled/disabled
-export default function(config = {}, win = window, doc = document) {
+export default function (config = {}, win = window, doc = document) {
   // look at the hash in the URL and transfer anything after the hash into
   // cookies to enable linking of the UI with various settings enabled
   runInDebug(() => {
-    const cookies = function(str) {
+    const cookies = function (str) {
       return str
         .split(';')
-        .map(item => item.trim())
-        .filter(item => item !== '')
-        .filter(item =>
-          item
-            .split('=')
-            .shift()
-            .startsWith('CONSUL_')
-        );
+        .map((item) => item.trim())
+        .filter((item) => item !== '')
+        .filter((item) => item.split('=').shift().startsWith('CONSUL_'));
     };
-    win['Scenario'] = function(str = '') {
+    win['Scenario'] = function (str = '') {
       if (str.length > 0) {
-        cookies(str).forEach(item => {
+        cookies(str).forEach((item) => {
           // this current outlier is the only one that
           // 1. Toggles
           // 2. Uses localStorage
@@ -68,23 +63,23 @@ export default function(config = {}, win = window, doc = document) {
       win['Scenario'](win.location.hash.substr(1));
     }
   });
-  const dev = function(str = doc.cookie) {
+  const dev = function (str = doc.cookie) {
     return str
       .split(';')
-      .filter(item => item !== '')
-      .map(item => {
+      .filter((item) => item !== '')
+      .map((item) => {
         const [key, ...rest] = item.trim().split('=');
         return [key, rest.join('=')];
       });
   };
-  const user = function(str) {
+  const user = function (str) {
     const item = win.localStorage.getItem(str);
     return item === null ? undefined : item;
   };
-  const getResourceFor = function(src) {
+  const getResourceFor = function (src) {
     try {
       return (
-        win.performance.getEntriesByType('resource').find(item => {
+        win.performance.getEntriesByType('resource').find((item) => {
           return item.initiatorType === 'script' && src === item.name;
         }) || {}
       );
@@ -107,7 +102,7 @@ export default function(config = {}, win = window, doc = document) {
   // turning off blocking queries if its a busy cluster
   // forcing/providing amount of possible HTTP connections
   // re-setting the base url for the API etc
-  const operator = function(str, env) {
+  const operator = function (str, env) {
     let protocol, dashboards, provider, proxy;
     switch (str) {
       case 'CONSUL_NSPACES_ENABLED':
@@ -164,10 +159,7 @@ export default function(config = {}, win = window, doc = document) {
         }
         return ui_config;
       case 'CONSUL_BASE_UI_URL':
-        return currentSrc
-          .split('/')
-          .slice(0, -2)
-          .join('/');
+        return currentSrc.split('/').slice(0, -2).join('/');
       case 'CONSUL_HTTP_PROTOCOL':
         if (typeof resource === 'undefined') {
           // resource needs to be retrieved lazily as entries aren't guaranteed
@@ -197,14 +189,14 @@ export default function(config = {}, win = window, doc = document) {
         }
     }
   };
-  const ui = function(key) {
+  const ui = function (key) {
     let $ = {};
     switch (config.environment) {
       case 'development':
       case 'staging':
       case 'coverage':
       case 'test':
-        $ = dev().reduce(function(prev, [key, value]) {
+        $ = dev().reduce(function (prev, [key, value]) {
           switch (key) {
             case 'CONSUL_INTL_LOCALE':
               prev['CONSUL_INTL_LOCALE'] = String(value).toLowerCase();
@@ -246,7 +238,7 @@ export default function(config = {}, win = window, doc = document) {
         }, {});
         break;
       case 'production':
-        $ = dev().reduce(function(prev, [key, value]) {
+        $ = dev().reduce(function (prev, [key, value]) {
           switch (key) {
             case 'TokenSecretID':
               prev['CONSUL_HTTP_TOKEN'] = value;
diff --git a/ui/packages/consul-ui/app/utils/get-form-name-property.js b/ui/packages/consul-ui/app/utils/get-form-name-property.js
index 50379c6f37..4ce8746210 100644
--- a/ui/packages/consul-ui/app/utils/get-form-name-property.js
+++ b/ui/packages/consul-ui/app/utils/get-form-name-property.js
@@ -1,4 +1,4 @@
-export default function(name) {
+export default function (name) {
   if (name.indexOf('[') !== -1) {
     return name.match(/(.*)\[(.*)\]/).slice(1);
   }
diff --git a/ui/packages/consul-ui/app/utils/helpers/call-if-type.js b/ui/packages/consul-ui/app/utils/helpers/call-if-type.js
index fa751d1e09..73a58a5db1 100644
--- a/ui/packages/consul-ui/app/utils/helpers/call-if-type.js
+++ b/ui/packages/consul-ui/app/utils/helpers/call-if-type.js
@@ -1,6 +1,6 @@
-export default function(type) {
-  return function(cb) {
-    return function(params, hash = {}) {
+export default function (type) {
+  return function (cb) {
+    return function (params, hash = {}) {
       if (typeof params[0] !== type) {
         return params[0];
       }
diff --git a/ui/packages/consul-ui/app/utils/http/create-headers.js b/ui/packages/consul-ui/app/utils/http/create-headers.js
index 43f30094c6..9ead9e7ce7 100644
--- a/ui/packages/consul-ui/app/utils/http/create-headers.js
+++ b/ui/packages/consul-ui/app/utils/http/create-headers.js
@@ -1,6 +1,6 @@
-export default function() {
-  return function(lines) {
-    return lines.reduce(function(prev, item) {
+export default function () {
+  return function (lines) {
+    return lines.reduce(function (prev, item) {
       const [key, ...value] = item.split(':');
       if (value.length > 0) {
         prev[key.trim()] = value.join(':').trim();
diff --git a/ui/packages/consul-ui/app/utils/http/create-query-params.js b/ui/packages/consul-ui/app/utils/http/create-query-params.js
index 5b4bcd1397..aade6f0b5c 100644
--- a/ui/packages/consul-ui/app/utils/http/create-query-params.js
+++ b/ui/packages/consul-ui/app/utils/http/create-query-params.js
@@ -1,7 +1,7 @@
-export default function(encode = encodeURIComponent) {
+export default function (encode = encodeURIComponent) {
   return function stringify(obj, parent) {
     return Object.entries(obj)
-      .reduce(function(prev, [key, value], i) {
+      .reduce(function (prev, [key, value], i) {
         // if the value is undefined do nothing
         if (typeof value === 'undefined') {
           return prev;
diff --git a/ui/packages/consul-ui/app/utils/http/create-url.js b/ui/packages/consul-ui/app/utils/http/create-url.js
index 2405ecdd79..aa0f8096c5 100644
--- a/ui/packages/consul-ui/app/utils/http/create-url.js
+++ b/ui/packages/consul-ui/app/utils/http/create-url.js
@@ -3,8 +3,8 @@ const PATH_PARSING = 1;
 const QUERY_PARSING = 2;
 const HEADER_PARSING = 3;
 const BODY_PARSING = 4;
-export default function(encode, queryParams) {
-  return function(strs, ...values) {
+export default function (encode, queryParams) {
+  return function (strs, ...values) {
     // TODO: Potentially url should check if any of the params
     // passed to it are undefined (null is fine). We could then get rid of the
     // multitude of checks we do throughout the adapters
@@ -12,7 +12,7 @@ export default function(encode, queryParams) {
     // anywhere
     let state = PATH_PARSING;
     return strs
-      .map(function(item, i, arr) {
+      .map(function (item, i, arr) {
         if (i === 0) {
           item = item.trimStart();
         }
@@ -39,7 +39,7 @@ export default function(encode, queryParams) {
               // split encode and join arrays by `/`
               case Array.isArray(val):
                 val = val
-                  .map(function(item) {
+                  .map(function (item) {
                     return `${encode(item)}`;
                   }, '')
                   .join('/');
diff --git a/ui/packages/consul-ui/app/utils/http/xhr.js b/ui/packages/consul-ui/app/utils/http/xhr.js
index 8ef24a0194..29440f2a23 100644
--- a/ui/packages/consul-ui/app/utils/http/xhr.js
+++ b/ui/packages/consul-ui/app/utils/http/xhr.js
@@ -1,7 +1,7 @@
-export default function(parseHeaders, XHR) {
-  return function(options) {
+export default function (parseHeaders, XHR) {
+  return function (options) {
     const xhr = new (XHR || XMLHttpRequest)();
-    xhr.onreadystatechange = function() {
+    xhr.onreadystatechange = function () {
       if (this.readyState === 4) {
         const headers = parseHeaders(this.getAllResponseHeaders().split('\n'));
         if (this.status >= 200 && this.status < 400) {
diff --git a/ui/packages/consul-ui/app/utils/intl/missing-message.js b/ui/packages/consul-ui/app/utils/intl/missing-message.js
index a454243ca9..3d17586599 100644
--- a/ui/packages/consul-ui/app/utils/intl/missing-message.js
+++ b/ui/packages/consul-ui/app/utils/intl/missing-message.js
@@ -4,13 +4,7 @@ import { runInDebug } from '@ember/debug';
 // if we can't find the message, take the last part of the identifier and
 // ucfirst it so it looks human
 export default function missingMessage(key, locales) {
-  runInDebug(
-    _ => console.debug(`Translation key not found: ${key}`)
-  );
-  const last = key
-    .split('.')
-    .pop()
-    .split('-')
-    .join(' ');
+  runInDebug((_) => console.debug(`Translation key not found: ${key}`));
+  const last = key.split('.').pop().split('-').join(' ');
   return `${last.substr(0, 1).toUpperCase()}${last.substr(1)}`;
 }
diff --git a/ui/packages/consul-ui/app/utils/isFolder.js b/ui/packages/consul-ui/app/utils/isFolder.js
index 3a8d795dae..51b8c146a9 100644
--- a/ui/packages/consul-ui/app/utils/isFolder.js
+++ b/ui/packages/consul-ui/app/utils/isFolder.js
@@ -1,5 +1,5 @@
 // Boolean if the key is a "folder" or not, i.e is a nested key
 // that feels like a folder.
-export default function(path = '') {
+export default function (path = '') {
   return path.slice(-1) === '/';
 }
diff --git a/ui/packages/consul-ui/app/utils/keyToArray.js b/ui/packages/consul-ui/app/utils/keyToArray.js
index 47ac074499..316125f757 100644
--- a/ui/packages/consul-ui/app/utils/keyToArray.js
+++ b/ui/packages/consul-ui/app/utils/keyToArray.js
@@ -7,6 +7,6 @@
  * @param {String} separator - The separator
  * @returns {String[]}
  */
-export default function(key, separator = '/') {
+export default function (key, separator = '/') {
   return (key === separator ? '' : key).split(separator);
 }
diff --git a/ui/packages/consul-ui/app/utils/maybe-call.js b/ui/packages/consul-ui/app/utils/maybe-call.js
index de501b6d56..c76b8a61c2 100644
--- a/ui/packages/consul-ui/app/utils/maybe-call.js
+++ b/ui/packages/consul-ui/app/utils/maybe-call.js
@@ -5,9 +5,9 @@
  * @param {Promise} [what] - A boolean resolving promise
  * @returns {function} - function when called returns a Promise that resolves the argument it is called with
  */
-export default function(cb, what) {
-  return function(res) {
-    return what.then(function(bool) {
+export default function (cb, what) {
+  return function (res) {
+    return what.then(function (bool) {
       if (bool) {
         cb();
       }
diff --git a/ui/packages/consul-ui/app/utils/merge-checks.js b/ui/packages/consul-ui/app/utils/merge-checks.js
index 99b33feb4b..9f444cdb63 100644
--- a/ui/packages/consul-ui/app/utils/merge-checks.js
+++ b/ui/packages/consul-ui/app/utils/merge-checks.js
@@ -17,7 +17,7 @@ export default (checks = [], exposed = false, MMap = MultiMap) => {
   const ids = new MMap();
   const a = checks.shift();
   const result = a
-    .map(item => {
+    .map((item) => {
       // its a Node check (ServiceName === ""), record this one so we
       // don't end up with duplicates of it
       if (item.ServiceName === '') {
@@ -53,8 +53,8 @@ export default (checks = [], exposed = false, MMap = MultiMap) => {
   // TODO: consider moving this out of here so we aren't doing too much in one util
   if (exposed) {
     result
-      .filter(item => get(item, 'Exposable'))
-      .forEach(item => {
+      .filter((item) => get(item, 'Exposable'))
+      .forEach((item) => {
         set(item, 'Exposed', exposed);
       });
   }
diff --git a/ui/packages/consul-ui/app/utils/minimizeModel.js b/ui/packages/consul-ui/app/utils/minimizeModel.js
index 6411ad8ce7..c48819c7a1 100644
--- a/ui/packages/consul-ui/app/utils/minimizeModel.js
+++ b/ui/packages/consul-ui/app/utils/minimizeModel.js
@@ -1,13 +1,13 @@
 import { get } from '@ember/object';
 
-export default function(arr) {
+export default function (arr) {
   if (Array.isArray(arr)) {
     return arr
-      .filter(function(item) {
+      .filter(function (item) {
         // Just incase, don't save any models that aren't saved
         return !get(item, 'isNew');
       })
-      .map(function(item) {
+      .map(function (item) {
         return {
           ID: get(item, 'ID'),
           Name: get(item, 'Name'),
diff --git a/ui/packages/consul-ui/app/utils/non-empty-set.js b/ui/packages/consul-ui/app/utils/non-empty-set.js
index d9ba2df680..b2ca9de059 100644
--- a/ui/packages/consul-ui/app/utils/non-empty-set.js
+++ b/ui/packages/consul-ui/app/utils/non-empty-set.js
@@ -1,5 +1,5 @@
-export default function(prop) {
-  return function(value) {
+export default function (prop) {
+  return function (value) {
     if (typeof value === 'undefined' || value === null || value === '') {
       return {};
     } else {
diff --git a/ui/packages/consul-ui/app/utils/promisedTimeout.js b/ui/packages/consul-ui/app/utils/promisedTimeout.js
index cd16f09878..f7984bde36 100644
--- a/ui/packages/consul-ui/app/utils/promisedTimeout.js
+++ b/ui/packages/consul-ui/app/utils/promisedTimeout.js
@@ -1,11 +1,11 @@
-export default function(P = Promise, timeout = setTimeout) {
+export default function (P = Promise, timeout = setTimeout) {
   // var interval;
-  return function(milliseconds, cb = function() {}) {
+  return function (milliseconds, cb = function () {}) {
     // clearInterval(interval);
     // const cb = typeof _cb !== 'function' ? (i) => { clearInterval(interval);interval = i; } : _cb;
     return new P((resolve, reject) => {
       cb(
-        timeout(function() {
+        timeout(function () {
           resolve(milliseconds);
         }, milliseconds)
       );
diff --git a/ui/packages/consul-ui/app/utils/routing/redirect-to.js b/ui/packages/consul-ui/app/utils/routing/redirect-to.js
index 38fb3fb28c..cfdd0dd5ea 100644
--- a/ui/packages/consul-ui/app/utils/routing/redirect-to.js
+++ b/ui/packages/consul-ui/app/utils/routing/redirect-to.js
@@ -1,9 +1,6 @@
-export default function(to, route) {
-  return function(model, transition) {
-    const parent = this.routeName
-      .split('.')
-      .slice(0, -1)
-      .join('.');
+export default function (to, route) {
+  return function (model, transition) {
+    const parent = this.routeName.split('.').slice(0, -1).join('.');
     this.replaceWith(`${parent}.${to}`, model);
   };
 }
diff --git a/ui/packages/consul-ui/app/utils/routing/transitionable.js b/ui/packages/consul-ui/app/utils/routing/transitionable.js
index e1a2098da9..81bf23dc51 100644
--- a/ui/packages/consul-ui/app/utils/routing/transitionable.js
+++ b/ui/packages/consul-ui/app/utils/routing/transitionable.js
@@ -1,9 +1,9 @@
-const filter = function(routeName, atts, params) {
+const filter = function (routeName, atts, params) {
   return [routeName, ...atts];
 };
-const replaceRouteParams = function(route, params = {}) {
+const replaceRouteParams = function (route, params = {}) {
   return (route.paramNames || [])
-    .map(function(item) {
+    .map(function (item) {
       if (typeof params[item] !== 'undefined') {
         return params[item];
       }
@@ -11,7 +11,7 @@ const replaceRouteParams = function(route, params = {}) {
     })
     .reverse();
 };
-export default function(route, params = {}, container) {
+export default function (route, params = {}, container) {
   if (route === null) {
     route = container.lookup('route:application');
   }
diff --git a/ui/packages/consul-ui/app/utils/routing/walk.js b/ui/packages/consul-ui/app/utils/routing/walk.js
index 388f4ce219..9e25566148 100644
--- a/ui/packages/consul-ui/app/utils/routing/walk.js
+++ b/ui/packages/consul-ui/app/utils/routing/walk.js
@@ -1,18 +1,18 @@
 import { runInDebug } from '@ember/debug';
 
-export const walk = function(routes) {
+export const walk = function (routes) {
   const keys = Object.keys(routes);
   keys.forEach((item, i) => {
     if (item === '_options') {
       return;
     }
-    if(routes[item] === null) {
+    if (routes[item] === null) {
       return;
     }
     const options = routes[item]._options;
     let cb;
     if (Object.keys(routes[item]).length > 1) {
-      cb = function() {
+      cb = function () {
         walk.apply(this, [routes[item]]);
       };
     }
@@ -34,8 +34,8 @@ export const walk = function(routes) {
  *
  * @param {object} routes - JSON representation of routes
  */
-export default function(routes) {
-  return function() {
+export default function (routes) {
+  return function () {
     walk.apply(this, [routes]);
   };
 }
@@ -43,10 +43,8 @@ export default function(routes) {
 export let dump = (routes) => {};
 
 runInDebug(() => {
-  const indent = function(num) {
-    return Array(num)
-      .fill('  ', 0, num)
-      .join('');
+  const indent = function (num) {
+    return Array(num).fill('  ', 0, num).join('');
   };
   /**
    * String dumper to produce Router.map code
@@ -56,11 +54,11 @@ runInDebug(() => {
    * @param {object} routes - JSON representation of routes
    * @example `console.log(dump(routes));`
    */
-  dump = function(routes) {
+  dump = function (routes) {
     let level = 2;
     const obj = {
       out: '',
-      route: function(name, options, cb) {
+      route: function (name, options, cb) {
         this.out += `${indent(level)}this.route('${name}', ${JSON.stringify(options)}`;
         if (cb) {
           level++;
diff --git a/ui/packages/consul-ui/app/utils/routing/wildcard.js b/ui/packages/consul-ui/app/utils/routing/wildcard.js
index 2fb82c446d..f3339280b4 100644
--- a/ui/packages/consul-ui/app/utils/routing/wildcard.js
+++ b/ui/packages/consul-ui/app/utils/routing/wildcard.js
@@ -1,6 +1,6 @@
 import { get } from '@ember/object';
-export default function(routes) {
-  return function(name) {
+export default function (routes) {
+  return function (name) {
     let wildcard = false;
     try {
       wildcard = get(routes, name)._options.path.indexOf('*') !== -1;
diff --git a/ui/packages/consul-ui/app/utils/search/exact.js b/ui/packages/consul-ui/app/utils/search/exact.js
index b39b18b70f..70aea39f09 100644
--- a/ui/packages/consul-ui/app/utils/search/exact.js
+++ b/ui/packages/consul-ui/app/utils/search/exact.js
@@ -3,10 +3,6 @@ import PredicateSearch from './predicate';
 export default class ExactSearch extends PredicateSearch {
   predicate(s) {
     s = s.toLowerCase();
-    return (item = '') =>
-      item
-        .toString()
-        .toLowerCase()
-        .indexOf(s) !== -1;
+    return (item = '') => item.toString().toLowerCase().indexOf(s) !== -1;
   }
 }
diff --git a/ui/packages/consul-ui/app/utils/search/fuzzy.js b/ui/packages/consul-ui/app/utils/search/fuzzy.js
index 892b284c8a..c8130b543e 100644
--- a/ui/packages/consul-ui/app/utils/search/fuzzy.js
+++ b/ui/packages/consul-ui/app/utils/search/fuzzy.js
@@ -15,6 +15,6 @@ export default class FuzzySearch {
   }
 
   search(s) {
-    return this.fuse.search(s).map(item => item.item);
+    return this.fuse.search(s).map((item) => item.item);
   }
 }
diff --git a/ui/packages/consul-ui/app/utils/search/predicate.js b/ui/packages/consul-ui/app/utils/search/predicate.js
index 398821755f..a72cc69ad6 100644
--- a/ui/packages/consul-ui/app/utils/search/predicate.js
+++ b/ui/packages/consul-ui/app/utils/search/predicate.js
@@ -8,7 +8,7 @@ export default class PredicateSearch {
     const predicate = this.predicate(s);
     // Test the value of each key for each object against the regex
     // All that match are returned.
-    return this.items.filter(item => {
+    return this.items.filter((item) => {
       return Object.entries(this.options.finders).some(([key, finder]) => {
         const val = finder(item);
         if (Array.isArray(val)) {
diff --git a/ui/packages/consul-ui/app/utils/search/regexp.js b/ui/packages/consul-ui/app/utils/search/regexp.js
index f71e13799b..583e17aa79 100644
--- a/ui/packages/consul-ui/app/utils/search/regexp.js
+++ b/ui/packages/consul-ui/app/utils/search/regexp.js
@@ -10,6 +10,6 @@ export default class RegExpSearch extends PredicateSearch {
       // eager search of an incomplete regex
       return () => false;
     }
-    return item => regex.test(item);
+    return (item) => regex.test(item);
   }
 }
diff --git a/ui/packages/consul-ui/app/utils/storage/local-storage.js b/ui/packages/consul-ui/app/utils/storage/local-storage.js
index 9f8e1541dd..f5e84f44c1 100644
--- a/ui/packages/consul-ui/app/utils/storage/local-storage.js
+++ b/ui/packages/consul-ui/app/utils/storage/local-storage.js
@@ -1,15 +1,15 @@
-export default function(
+export default function (
   scheme = '',
   storage = window.localStorage,
   encode = JSON.stringify,
   decode = JSON.parse,
-  dispatch = function(key) {
+  dispatch = function (key) {
     window.dispatchEvent(new StorageEvent('storage', { key: key }));
   }
 ) {
   const prefix = `${scheme}:`;
   return {
-    getValue: function(path) {
+    getValue: function (path) {
       let value = storage.getItem(`${prefix}${path}`);
       if (typeof value !== 'string') {
         value = '""';
@@ -21,7 +21,7 @@ export default function(
       }
       return value;
     },
-    setValue: function(path, value) {
+    setValue: function (path, value) {
       if (value === null) {
         return this.removeValue(path);
       }
@@ -34,12 +34,12 @@ export default function(
       dispatch(`${prefix}${path}`);
       return res;
     },
-    removeValue: function(path) {
+    removeValue: function (path) {
       const res = storage.removeItem(`${prefix}${path}`);
       dispatch(`${prefix}${path}`);
       return res;
     },
-    all: function() {
+    all: function () {
       return Object.keys(storage).reduce((prev, item, i, arr) => {
         if (item.indexOf(`${prefix}`) === 0) {
           const key = item.substr(prefix.length);
diff --git a/ui/packages/consul-ui/app/utils/templatize.js b/ui/packages/consul-ui/app/utils/templatize.js
index 4b76a11b9a..0931c38b70 100644
--- a/ui/packages/consul-ui/app/utils/templatize.js
+++ b/ui/packages/consul-ui/app/utils/templatize.js
@@ -1,3 +1,3 @@
-export default function(arr = []) {
-  return arr.map(item => `template-${item}`);
+export default function (arr = []) {
+  return arr.map((item) => `template-${item}`);
 }
diff --git a/ui/packages/consul-ui/app/utils/ticker/index.js b/ui/packages/consul-ui/app/utils/ticker/index.js
index 688ec2cae3..ce6022a9ab 100644
--- a/ui/packages/consul-ui/app/utils/ticker/index.js
+++ b/ui/packages/consul-ui/app/utils/ticker/index.js
@@ -128,7 +128,7 @@ const TimelineAbstract = class {
   }
 };
 const Cubic = {
-  easeOut: function(t, b, c, d) {
+  easeOut: function (t, b, c, d) {
     t /= d;
     t--;
     return c * (t * t * t + 1) + b;
@@ -140,7 +140,7 @@ export const Tween = class extends TimelineAbstract {
     Ticker.destroy();
   }
   static to(start, finish, frames, method) {
-    Object.keys(finish).forEach(function(key) {
+    Object.keys(finish).forEach(function (key) {
       finish[key] -= start[key];
     });
     return new Tween(start, finish, frames, method).play();
@@ -154,7 +154,7 @@ export const Tween = class extends TimelineAbstract {
     this.tick = this.forwards;
   }
   _process() {
-    Object.keys(this._props).forEach(key => {
+    Object.keys(this._props).forEach((key) => {
       const num = this._method(
         this._currentframe,
         this._initialstate[key],
@@ -187,7 +187,7 @@ export const Tween = class extends TimelineAbstract {
   gotoAndPlay() {
     if (typeof this._initialstate === 'undefined') {
       this._initialstate = {};
-      Object.keys(this._props).forEach(key => {
+      Object.keys(this._props).forEach((key) => {
         this._initialstate[key] = this._target[key];
       });
     }
diff --git a/ui/packages/consul-ui/app/utils/tomography.js b/ui/packages/consul-ui/app/utils/tomography.js
index 137bc1dcb4..a636f5a2c4 100644
--- a/ui/packages/consul-ui/app/utils/tomography.js
+++ b/ui/packages/consul-ui/app/utils/tomography.js
@@ -1,15 +1,15 @@
 // TODO: Istanbul is ignored for the moment as it's not mine,
 // once I come here properly and 100% follow unignore
 /* istanbul ignore file */
-export default function(distance) {
-  return function(name, coordinates) {
+export default function (distance) {
+  return function (name, coordinates) {
     var min = 999999999;
     var max = -999999999;
     var distances = [];
-    coordinates.forEach(function(node) {
+    coordinates.forEach(function (node) {
       if (name == node.Node) {
         var segment = node.Segment;
-        coordinates.forEach(function(other) {
+        coordinates.forEach(function (other) {
           if (node.Node != other.Node && other.Segment == segment) {
             var dist = distance(node, other);
             distances.push({ node: other.Node, distance: dist, segment: segment });
@@ -21,7 +21,7 @@ export default function(distance) {
             }
           }
         });
-        distances.sort(function(a, b) {
+        distances.sort(function (a, b) {
           return a.distance - b.distance;
         });
       }
diff --git a/ui/packages/consul-ui/app/utils/ucfirst.js b/ui/packages/consul-ui/app/utils/ucfirst.js
index 346ae8c3e9..fa2f2ee07d 100644
--- a/ui/packages/consul-ui/app/utils/ucfirst.js
+++ b/ui/packages/consul-ui/app/utils/ucfirst.js
@@ -1,3 +1,3 @@
-export default function(str) {
+export default function (str) {
   return `${str.substr(0, 1).toUpperCase()}${str.substr(1)}`;
 }
diff --git a/ui/packages/consul-ui/app/utils/update-array-object.js b/ui/packages/consul-ui/app/utils/update-array-object.js
index c8d264b870..716ea402f1 100644
--- a/ui/packages/consul-ui/app/utils/update-array-object.js
+++ b/ui/packages/consul-ui/app/utils/update-array-object.js
@@ -1,8 +1,8 @@
 import { get, set } from '@ember/object';
 import ObjectProxy from '@ember/object/proxy';
-export default function(items, item, prop, value) {
+export default function (items, item, prop, value) {
   value = typeof value === 'undefined' ? get(item, prop) : value;
-  const pos = items.findIndex(function(item) {
+  const pos = items.findIndex(function (item) {
     return get(item, prop) === value;
   });
   if (pos !== -1) {
diff --git a/ui/packages/consul-ui/app/validations/intention-permission-http-header.js b/ui/packages/consul-ui/app/validations/intention-permission-http-header.js
index de67f06192..67d5560b1c 100644
--- a/ui/packages/consul-ui/app/validations/intention-permission-http-header.js
+++ b/ui/packages/consul-ui/app/validations/intention-permission-http-header.js
@@ -1,8 +1,8 @@
 import { validatePresence } from 'ember-changeset-validations/validators';
 import validateSometimes from 'ember-changeset-conditional-validations/validators/sometimes';
-export default schema => ({
+export default (schema) => ({
   Name: [validatePresence(true)],
-  Value: validateSometimes([validatePresence(true)], function() {
+  Value: validateSometimes([validatePresence(true)], function () {
     return this.get('HeaderType') !== 'Present';
   }),
 });
diff --git a/ui/packages/consul-ui/app/validations/intention-permission.js b/ui/packages/consul-ui/app/validations/intention-permission.js
index ad855130e6..8fd96a6ce8 100644
--- a/ui/packages/consul-ui/app/validations/intention-permission.js
+++ b/ui/packages/consul-ui/app/validations/intention-permission.js
@@ -6,8 +6,8 @@ import {
 import validateSometimes from 'ember-changeset-conditional-validations/validators/sometimes';
 
 const name = 'intention-permission';
-export default schema => ({
-  '*': validateSometimes([validatePresence(true)], function() {
+export default (schema) => ({
+  '*': validateSometimes([validatePresence(true)], function () {
     const methods = this.get('HTTP.Methods') || [];
     const headers = this.get('HTTP.Header') || [];
     const pathType = this.get('HTTP.PathType') || 'NoPath';
@@ -21,7 +21,7 @@ export default schema => ({
   }),
   Action: [validateInclusion({ in: schema[name].Action.allowedValues })],
   HTTP: {
-    Path: validateSometimes([validateFormat({ regex: /^\// })], function() {
+    Path: validateSometimes([validateFormat({ regex: /^\// })], function () {
       const pathType = this.get('HTTP.PathType');
       return typeof pathType !== 'undefined' && pathType !== 'NoPath';
     }),
diff --git a/ui/packages/consul-ui/app/validations/intention.js b/ui/packages/consul-ui/app/validations/intention.js
index 12e3115b27..9f03e0dc3b 100644
--- a/ui/packages/consul-ui/app/validations/intention.js
+++ b/ui/packages/consul-ui/app/validations/intention.js
@@ -1,7 +1,7 @@
 import { validatePresence, validateLength } from 'ember-changeset-validations/validators';
 import validateSometimes from 'ember-changeset-conditional-validations/validators/sometimes';
 export default {
-  '*': validateSometimes([validatePresence(true)], function() {
+  '*': validateSometimes([validatePresence(true)], function () {
     const action = this.get('Action') || '';
     const permissions = this.get('Permissions') || [];
     if (action === '' && permissions.length === 0) {
@@ -12,7 +12,7 @@ export default {
   SourceName: [validatePresence(true), validateLength({ min: 1 })],
   DestinationName: [validatePresence(true), validateLength({ min: 1 })],
   Permissions: [
-    validateSometimes([validateLength({ min: 1 })], function(changes, content) {
+    validateSometimes([validateLength({ min: 1 })], function (changes, content) {
       return !this.get('Action');
     }),
   ],
diff --git a/ui/packages/consul-ui/blueprints/adapter-test/index.js b/ui/packages/consul-ui/blueprints/adapter-test/index.js
index fcdb84f3cc..76be5362fb 100644
--- a/ui/packages/consul-ui/blueprints/adapter-test/index.js
+++ b/ui/packages/consul-ui/blueprints/adapter-test/index.js
@@ -18,7 +18,6 @@ module.exports = useTestFrameworkDetector({
   },
 
   locals(options) {
-    return {
-    };
+    return {};
   },
 });
diff --git a/ui/packages/consul-ui/blueprints/adapter/index.js b/ui/packages/consul-ui/blueprints/adapter/index.js
index d4fe91847a..76d2fe8730 100644
--- a/ui/packages/consul-ui/blueprints/adapter/index.js
+++ b/ui/packages/consul-ui/blueprints/adapter/index.js
@@ -7,13 +7,11 @@ module.exports = {
 
   root: __dirname,
 
-  fileMapTokens(options) {
-  },
+  fileMapTokens(options) {},
   locals(options) {
     // Return custom template variables here.
-    return {
-    };
-  }
+    return {};
+  },
 
   // afterInstall(options) {
   //   // Perform extra work here.
diff --git a/ui/packages/consul-ui/blueprints/component/index.js b/ui/packages/consul-ui/blueprints/component/index.js
index bc164e8481..011f1d2e15 100644
--- a/ui/packages/consul-ui/blueprints/component/index.js
+++ b/ui/packages/consul-ui/blueprints/component/index.js
@@ -1,4 +1 @@
-module.exports = Object.assign(
-  require('ember-source/blueprints/component/index.js')
-);
-
+module.exports = Object.assign(require('ember-source/blueprints/component/index.js'));
diff --git a/ui/packages/consul-ui/blueprints/css-component/index.js b/ui/packages/consul-ui/blueprints/css-component/index.js
index 48a3e79633..b8c23a8376 100644
--- a/ui/packages/consul-ui/blueprints/css-component/index.js
+++ b/ui/packages/consul-ui/blueprints/css-component/index.js
@@ -9,17 +9,16 @@ module.exports = {
   root: __dirname,
 
   fileMapTokens(options) {
-      return {
-        __path__() {
-          return path.join('styles', 'components');
-        }
-      };
+    return {
+      __path__() {
+        return path.join('styles', 'components');
+      },
+    };
   },
   locals(options) {
     // Return custom template variables here.
-    return {
-    };
-  }
+    return {};
+  },
 
   // afterInstall(options) {
   //   // Perform extra work here.
diff --git a/ui/packages/consul-ui/blueprints/model-test/index.js b/ui/packages/consul-ui/blueprints/model-test/index.js
index 2a45c318ca..6c8f155dff 100644
--- a/ui/packages/consul-ui/blueprints/model-test/index.js
+++ b/ui/packages/consul-ui/blueprints/model-test/index.js
@@ -18,7 +18,6 @@ module.exports = useTestFrameworkDetector({
   },
 
   locals(options) {
-    return {
-    };
+    return {};
   },
 });
diff --git a/ui/packages/consul-ui/blueprints/model/index.js b/ui/packages/consul-ui/blueprints/model/index.js
index 4d0c6e185f..3855bc4c1f 100644
--- a/ui/packages/consul-ui/blueprints/model/index.js
+++ b/ui/packages/consul-ui/blueprints/model/index.js
@@ -9,9 +9,8 @@ module.exports = {
 
   locals(options) {
     // Return custom template variables here.
-    return {
-    };
-  }
+    return {};
+  },
 
   // afterInstall(options) {
   //   // Perform extra work here.
diff --git a/ui/packages/consul-ui/blueprints/repository-test/index.js b/ui/packages/consul-ui/blueprints/repository-test/index.js
index a35d3b9ab9..650ec6ebb1 100644
--- a/ui/packages/consul-ui/blueprints/repository-test/index.js
+++ b/ui/packages/consul-ui/blueprints/repository-test/index.js
@@ -19,7 +19,7 @@ module.exports = useTestFrameworkDetector({
 
   locals(options) {
     return {
-      screamingSnakeCaseModuleName: options.entity.name.replace('-', '_').toUpperCase()
+      screamingSnakeCaseModuleName: options.entity.name.replace('-', '_').toUpperCase(),
     };
   },
 });
diff --git a/ui/packages/consul-ui/blueprints/repository/index.js b/ui/packages/consul-ui/blueprints/repository/index.js
index 29f9b1e1ac..6dc50bddae 100644
--- a/ui/packages/consul-ui/blueprints/repository/index.js
+++ b/ui/packages/consul-ui/blueprints/repository/index.js
@@ -9,17 +9,16 @@ module.exports = {
   root: __dirname,
 
   fileMapTokens(options) {
-      return {
-        __path__() {
-          return path.join('services', 'repository');
-        }
-      };
+    return {
+      __path__() {
+        return path.join('services', 'repository');
+      },
+    };
   },
   locals(options) {
     // Return custom template variables here.
-    return {
-    };
-  }
+    return {};
+  },
 
   // afterInstall(options) {
   //   // Perform extra work here.
diff --git a/ui/packages/consul-ui/blueprints/route/index.js b/ui/packages/consul-ui/blueprints/route/index.js
index 0867ff7d1d..e3b9ab3e24 100644
--- a/ui/packages/consul-ui/blueprints/route/index.js
+++ b/ui/packages/consul-ui/blueprints/route/index.js
@@ -1,30 +1,28 @@
 /* eslint-env node */
 const chalk = require('chalk');
 
-module.exports = Object.assign(
-  require('ember-source/blueprints/route/index.js'),
-  {
-    afterInstall: function(options) {
-      updateRouter.call(this, 'add', options);
-    },
+module.exports = Object.assign(require('ember-source/blueprints/route/index.js'), {
+  afterInstall: function (options) {
+    updateRouter.call(this, 'add', options);
+  },
 
-    afterUninstall: function(options) {
-      updateRouter.call(this, 'remove', options);
-    }
-  }
-);
+  afterUninstall: function (options) {
+    updateRouter.call(this, 'remove', options);
+  },
+});
 
 function updateRouter(action, options) {
   var entity = options.entity;
   var actionColorMap = {
     add: 'green',
-    remove: 'red'
+    remove: 'red',
   };
   var color = actionColorMap[action] || 'gray';
 
   if (this.shouldTouchRouter(entity.name, options)) {
-
-    this.ui.writeLine(`we don't currently update the router for you, please edit ${findRouter(options).join('/')}`);
+    this.ui.writeLine(
+      `we don't currently update the router for you, please edit ${findRouter(options).join('/')}`
+    );
     this._writeStatusToUI(chalk[color], action + ' route', entity.name);
   }
 }
@@ -40,4 +38,3 @@ function findRouter(options) {
 
   return routerPathParts;
 }
-
diff --git a/ui/packages/consul-ui/blueprints/serializer-test/index.js b/ui/packages/consul-ui/blueprints/serializer-test/index.js
index 052ce5357c..ca22ba7c2b 100644
--- a/ui/packages/consul-ui/blueprints/serializer-test/index.js
+++ b/ui/packages/consul-ui/blueprints/serializer-test/index.js
@@ -18,7 +18,6 @@ module.exports = useTestFrameworkDetector({
   },
 
   locals(options) {
-    return {
-    };
+    return {};
   },
 });
diff --git a/ui/packages/consul-ui/blueprints/serializer/index.js b/ui/packages/consul-ui/blueprints/serializer/index.js
index c9df3ae223..72cfdc8106 100644
--- a/ui/packages/consul-ui/blueprints/serializer/index.js
+++ b/ui/packages/consul-ui/blueprints/serializer/index.js
@@ -7,13 +7,11 @@ module.exports = {
 
   root: __dirname,
 
-  fileMapTokens(options) {
-  },
+  fileMapTokens(options) {},
   locals(options) {
     // Return custom template variables here.
-    return {
-    };
-  }
+    return {};
+  },
 
   // afterInstall(options) {
   //   // Perform extra work here.
diff --git a/ui/packages/consul-ui/config/ember-cli-update.json b/ui/packages/consul-ui/config/ember-cli-update.json
new file mode 100644
index 0000000000..7ae868b44e
--- /dev/null
+++ b/ui/packages/consul-ui/config/ember-cli-update.json
@@ -0,0 +1,20 @@
+{
+  "schemaVersion": "1.0.0",
+  "packages": [
+    {
+      "name": "ember-cli",
+      "version": "3.24.0",
+      "blueprints": [
+        {
+          "name": "app",
+          "outputRepo": "https://github.com/ember-cli/ember-new-output",
+          "codemodsSource": "ember-app-codemods-manifest@1",
+          "isBaseBlueprint": true,
+          "options": [
+            "--no-welcome"
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/ui/packages/consul-ui/config/ember-intl.js b/ui/packages/consul-ui/config/ember-intl.js
index be1e0249e0..4fc7158d7c 100644
--- a/ui/packages/consul-ui/config/ember-intl.js
+++ b/ui/packages/consul-ui/config/ember-intl.js
@@ -1,6 +1,6 @@
 /* jshint node:true */
 
-module.exports = function(/* environment */) {
+module.exports = function (/* environment */) {
   return {
     /**
      * Merges the fallback locale's translations into all other locales as a
diff --git a/ui/packages/consul-ui/config/environment.js b/ui/packages/consul-ui/config/environment.js
index f8b11e8041..66d06aa60a 100644
--- a/ui/packages/consul-ui/config/environment.js
+++ b/ui/packages/consul-ui/config/environment.js
@@ -12,7 +12,7 @@ const repositoryYear = utils.repositoryYear;
 const repositorySHA = utils.repositorySHA;
 const binaryVersion = utils.binaryVersion(repositoryRoot);
 
-module.exports = function(environment, $ = process.env) {
+module.exports = function (environment, $ = process.env) {
   // available environments
   // ['production', 'development', 'staging', 'test'];
   const env = utils.env($);
@@ -87,7 +87,7 @@ module.exports = function(environment, $ = process.env) {
       HCPEnabled: false,
       LocalDatacenter: env('CONSUL_DATACENTER_LOCAL', 'dc1'),
       PrimaryDatacenter: env('CONSUL_DATACENTER_PRIMARY', 'dc1'),
-      APIPrefix: env('CONSUL_API_PREFIX', '')
+      APIPrefix: env('CONSUL_API_PREFIX', ''),
     },
 
     // Static variables used in multiple places throughout the UI
@@ -114,7 +114,7 @@ module.exports = function(environment, $ = process.env) {
           HCPEnabled: env('CONSUL_HCP_ENABLED', false),
           LocalDatacenter: env('CONSUL_DATACENTER_LOCAL', 'dc1'),
           PrimaryDatacenter: env('CONSUL_DATACENTER_PRIMARY', 'dc1'),
-          APIPrefix: env('CONSUL_API_PREFIX', '')
+          APIPrefix: env('CONSUL_API_PREFIX', ''),
         },
 
         '@hashicorp/ember-cli-api-double': {
@@ -168,7 +168,7 @@ module.exports = function(environment, $ = process.env) {
           HCPEnabled: env('CONSUL_HCP_ENABLED', false),
           LocalDatacenter: env('CONSUL_DATACENTER_LOCAL', 'dc1'),
           PrimaryDatacenter: env('CONSUL_DATACENTER_PRIMARY', 'dc1'),
-          APIPrefix: env('CONSUL_API_PREFIX', '')
+          APIPrefix: env('CONSUL_API_PREFIX', ''),
         },
 
         '@hashicorp/ember-cli-api-double': {
@@ -184,7 +184,7 @@ module.exports = function(environment, $ = process.env) {
         // in production operatorConfig is populated at consul runtime from
         // operator configuration
         operatorConfig: {
-          APIPrefix: ''
+          APIPrefix: '',
         },
       });
       break;
diff --git a/ui/packages/consul-ui/config/utils.js b/ui/packages/consul-ui/config/utils.js
index b1b58a54e8..c24172a037 100644
--- a/ui/packages/consul-ui/config/utils.js
+++ b/ui/packages/consul-ui/config/utils.js
@@ -2,31 +2,27 @@ const read = require('fs').readFileSync;
 const exec = require('child_process').execSync;
 
 // See tests ../node-tests/config/utils.js
-const repositoryYear = function(date = exec('git show -s --format=%ci HEAD')) {
-  return date
-    .toString()
-    .trim()
-    .split('-')
-    .shift();
+const repositoryYear = function (date = exec('git show -s --format=%ci HEAD')) {
+  return date.toString().trim().split('-').shift();
 };
-const repositorySHA = function(sha = exec('git rev-parse --short HEAD')) {
+const repositorySHA = function (sha = exec('git rev-parse --short HEAD')) {
   return sha.toString().trim();
 };
-const binaryVersion = function(repositoryRoot) {
-  return function(versionFileContents = read(`${repositoryRoot}/version/version.go`)) {
+const binaryVersion = function (repositoryRoot) {
+  return function (versionFileContents = read(`${repositoryRoot}/version/version.go`)) {
     // see /scripts/dist.sh:8
     return versionFileContents
       .toString()
       .split('\n')
-      .find(function(item, i, arr) {
+      .find(function (item, i, arr) {
         return item.indexOf('Version =') !== -1;
       })
       .trim()
       .split('"')[1];
   };
 };
-const env = function($) {
-  return function(flag, fallback) {
+const env = function ($) {
+  return function (flag, fallback) {
     // a fallback value MUST be set
     if (typeof fallback === 'undefined') {
       throw new Error(`Please provide a fallback value for $${flag}`);
diff --git a/ui/packages/consul-ui/ember-cli-build.js b/ui/packages/consul-ui/ember-cli-build.js
index 576ea55ee9..4fe7919075 100644
--- a/ui/packages/consul-ui/ember-cli-build.js
+++ b/ui/packages/consul-ui/ember-cli-build.js
@@ -11,7 +11,7 @@ const utils = require('./config/utils');
 // const BroccoliDebug = require('broccoli-debug');
 // const debug = BroccoliDebug.buildDebugCallback(`app:consul-ui`)
 
-module.exports = function(defaults, $ = process.env) {
+module.exports = function (defaults, $ = process.env) {
   // available environments
   // ['production', 'development', 'staging', 'test'];
 
@@ -33,34 +33,31 @@ module.exports = function(defaults, $ = process.env) {
     'consul-peerings',
     'consul-partitions',
     'consul-nspaces',
-    'consul-hcp'
-  ].map(item => {
+    'consul-hcp',
+  ].map((item) => {
     return {
       name: item,
-      path: path.dirname(require.resolve(`${item}/package.json`))
+      path: path.dirname(require.resolve(`${item}/package.json`)),
     };
   });
 
   const babel = {
-    plugins: [
-      '@babel/plugin-proposal-object-rest-spread',
-    ],
+    plugins: ['@babel/plugin-proposal-object-rest-spread'],
     sourceMaps: sourcemaps ? 'inline' : false,
-  }
+  };
 
   // setup up different build configuration depending on environment
-  if(!['test'].includes(env)) {
+  if (!['test'].includes(env)) {
     // exclude any component/pageobject.js files from anything but test
     excludeFiles = excludeFiles.concat([
       'components/**/pageobject.js',
       'components/**/test-support.js',
       'components/**/*.test-support.js',
       'components/**/*.test.js',
-    ])
+    ]);
   }
 
-
-  if(['test', 'production'].includes(env)) {
+  if (['test', 'production'].includes(env)) {
     // exclude our debug initializer, route and template
     excludeFiles = excludeFiles.concat([
       'instance-initializers/debug.js',
@@ -69,69 +66,62 @@ module.exports = function(defaults, $ = process.env) {
       'modifiers/**/*-debug.js',
       'services/**/*-debug.js',
       'templates/debug.hbs',
-      'components/debug/**/*.*'
-    ])
+      'components/debug/**/*.*',
+    ]);
     // inspect *-debug configuration files for files to exclude
-    excludeFiles = apps.reduce(
-      (prev, item) => {
-        return ['services', 'routes'].reduce(
-          (prev, type) => {
-            const path = `${item.path}/vendor/${item.name}/${type}-debug.js`;
-            if(exists(path)) {
-              return Object.entries(JSON.parse(require(path)[type])).reduce(
-                (prev, [key, definition]) => {
-                  if(typeof definition.class !== 'undefined') {
-                    return prev.concat(`${definition.class.replace(`${item.name}/`, '')}.js`);
-                  }
-                  return prev;
-                },
-                prev
-              );
-            }
-            return prev;
-          },
-          prev
-        )
-      },
-      excludeFiles
-    );
+    excludeFiles = apps.reduce((prev, item) => {
+      return ['services', 'routes'].reduce((prev, type) => {
+        const path = `${item.path}/vendor/${item.name}/${type}-debug.js`;
+        if (exists(path)) {
+          return Object.entries(JSON.parse(require(path)[type])).reduce(
+            (prev, [key, definition]) => {
+              if (typeof definition.class !== 'undefined') {
+                return prev.concat(`${definition.class.replace(`${item.name}/`, '')}.js`);
+              }
+              return prev;
+            },
+            prev
+          );
+        }
+        return prev;
+      }, prev);
+    }, excludeFiles);
     // exclude any debug like addons from production or test environments
     addons.blacklist = [
       // exclude docfy
-      '@docfy/ember'
+      '@docfy/ember',
     ];
   }
 
-  if(['production'].includes(env)) {
+  if (['production'].includes(env)) {
     // everything apart from production is 'debug', including test
     // which means this and everything it affects is never tested
-    babel.plugins.push(
-      ['strip-function-call', {'strip': ['Ember.runInDebug']}]
-    )
+    babel.plugins.push(['strip-function-call', { strip: ['Ember.runInDebug'] }]);
   }
 
   //
-  (
-    function(apps) {
-      trees.app = mergeTrees([
-        new Funnel('app', { exclude: excludeFiles })
-      ].concat(
-        apps.filter(item => exists(`${item.path}/app`)).map(item => new Funnel(`${item.path}/app`, {exclude: excludeFiles}))
-      ), {
-        overwrite: true
-      });
-      trees.vendor = mergeTrees([
-        new Funnel('vendor'),
-      ].concat(
-        apps.map(item => new Funnel(`${item.path}/vendor`))
-      ));
-    }
-  // consul-ui will eventually be a separate app just like the others
-  // at which point we can remove this filter/extra scope
-  )(apps.filter(item => item.name !== 'consul-ui'));
+  (function (apps) {
+    trees.app = mergeTrees(
+      [new Funnel('app', { exclude: excludeFiles })].concat(
+        apps
+          .filter((item) => exists(`${item.path}/app`))
+          .map((item) => new Funnel(`${item.path}/app`, { exclude: excludeFiles }))
+      ),
+      {
+        overwrite: true,
+      }
+    );
+    trees.vendor = mergeTrees(
+      [new Funnel('vendor')].concat(apps.map((item) => new Funnel(`${item.path}/vendor`)))
+    );
+  })(
+    // consul-ui will eventually be a separate app just like the others
+    // at which point we can remove this filter/extra scope
+    apps.filter((item) => item.name !== 'consul-ui')
+  );
   //
 
-  const app = new EmberApp(
+  let app = new EmberApp(
     Object.assign({}, defaults, {
       productionEnvironments: prodlike,
     }),
@@ -143,7 +133,15 @@ module.exports = function(defaults, $ = process.env) {
         includePolyfill: true,
       },
       'ember-cli-string-helpers': {
-        only: ['capitalize', 'lowercase', 'truncate', 'uppercase', 'humanize', 'titleize', 'classify'],
+        only: [
+          'capitalize',
+          'lowercase',
+          'truncate',
+          'uppercase',
+          'humanize',
+          'titleize',
+          'classify',
+        ],
       },
       'ember-cli-math-helpers': {
         only: ['div'],
@@ -163,26 +161,19 @@ module.exports = function(defaults, $ = process.env) {
           'mode/loadmode.js',
         ],
       },
-      'ember-cli-uglify': {
-        uglify: {
-          compress: {
-            keep_fargs: false,
-          },
-        },
-      },
       sassOptions: {
         implementation: require('sass'),
         sourceMapEmbed: sourcemaps,
       },
     }
   );
-  const build = function(path, options) {
-    const {root, ...rest} = options;
-    if(exists(`${root}/${path}`)) {
+  const build = function (path, options) {
+    const { root, ...rest } = options;
+    if (exists(`${root}/${path}`)) {
       app.import(path, rest);
     }
   };
-  apps.forEach(item => {
+  apps.forEach((item) => {
     build(`vendor/${item.name}/routes.js`, {
       root: item.path,
       outputFile: `assets/${item.name}/routes.js`,
@@ -191,7 +182,7 @@ module.exports = function(defaults, $ = process.env) {
       root: item.path,
       outputFile: `assets/${item.name}/services.js`,
     });
-    if(devlike) {
+    if (devlike) {
       build(`vendor/${item.name}/routes-debug.js`, {
         root: item.path,
         outputFile: `assets/${item.name}/routes-debug.js`,
diff --git a/ui/packages/consul-ui/lib/block-slots/addon/components/block-slot.js b/ui/packages/consul-ui/lib/block-slots/addon/components/block-slot.js
index 1b692a4a44..65513a3bc4 100644
--- a/ui/packages/consul-ui/lib/block-slots/addon/components/block-slot.js
+++ b/ui/packages/consul-ui/lib/block-slots/addon/components/block-slot.js
@@ -8,10 +8,10 @@ import YieldSlot from './yield-slot';
 const BlockSlot = Component.extend({
   layout,
   tagName: '',
-  _name: computed('name', function() {
+  _name: computed('name', function () {
     return this.name;
   }),
-  didInsertElement: function() {
+  didInsertElement: function () {
     const slottedComponent = this.nearestOfType(Slots);
     if (!slottedComponent._isRegistered(this._name)) {
       slottedComponent._activateSlot(this._name);
@@ -42,7 +42,7 @@ const BlockSlot = Component.extend({
       }
     }
   },
-  willDestroyElement: function() {
+  willDestroyElement: function () {
     if (this.slottedComponent) {
       // Deactivate the yield slot using the slots interface when the block
       // is destroyed to allow the yield slot default {{else}} to take effect
diff --git a/ui/packages/consul-ui/lib/block-slots/addon/components/yield-slot.js b/ui/packages/consul-ui/lib/block-slots/addon/components/yield-slot.js
index 358d3b3cd3..e394c739cb 100644
--- a/ui/packages/consul-ui/lib/block-slots/addon/components/yield-slot.js
+++ b/ui/packages/consul-ui/lib/block-slots/addon/components/yield-slot.js
@@ -5,16 +5,16 @@ import Slots from '../mixins/slots';
 const YieldSlotComponent = Component.extend({
   layout,
   tagName: '',
-  _name: computed('name', function() {
+  _name: computed('name', function () {
     return this.name;
   }),
-  _blockParams: computed('params', function() {
+  _blockParams: computed('params', function () {
     return this.params;
   }),
-  _parentView: computed(function() {
+  _parentView: computed(function () {
     return this.nearestOfType(Slots);
   }),
-  isActive: computed('_parentView._slots.[]', '_name', function() {
+  isActive: computed('_parentView._slots.[]', '_name', function () {
     return get(this, '_parentView._slots').includes(get(this, '_name'));
   }),
 });
diff --git a/ui/packages/consul-ui/lib/block-slots/addon/mixins/slots.js b/ui/packages/consul-ui/lib/block-slots/addon/mixins/slots.js
index 43f16ae434..3ed0273f13 100644
--- a/ui/packages/consul-ui/lib/block-slots/addon/mixins/slots.js
+++ b/ui/packages/consul-ui/lib/block-slots/addon/mixins/slots.js
@@ -2,7 +2,7 @@ import { computed, get } from '@ember/object';
 import { A } from '@ember/array';
 import Mixin from '@ember/object/mixin';
 export default Mixin.create({
-  _slots: computed(function() {
+  _slots: computed(function () {
     return A();
   }),
   _activateSlot(name) {
diff --git a/ui/packages/consul-ui/lib/colocated-components/index.js b/ui/packages/consul-ui/lib/colocated-components/index.js
index ef3a1130ac..8c8f75e547 100644
--- a/ui/packages/consul-ui/lib/colocated-components/index.js
+++ b/ui/packages/consul-ui/lib/colocated-components/index.js
@@ -13,7 +13,7 @@ module.exports = {
    * Make any CSS available for import within app/components/component-name:
    * @import 'app-name/components/component-name/index.scss'
    */
-  treeForStyles: function(tree) {
+  treeForStyles: function (tree) {
     let debug = read(`${this.project.root}/app/styles/debug.scss`);
     if (['production', 'test'].includes(process.env.EMBER_ENV)) {
       debug = '';
diff --git a/ui/packages/consul-ui/lib/commands/index.js b/ui/packages/consul-ui/lib/commands/index.js
index c8c558db54..c5219bb849 100644
--- a/ui/packages/consul-ui/lib/commands/index.js
+++ b/ui/packages/consul-ui/lib/commands/index.js
@@ -3,11 +3,11 @@
 'use strict';
 module.exports = {
   name: 'commands',
-  includedCommands: function() {
+  includedCommands: function () {
     return {
       'steps:list': {
         name: 'steps:list',
-        run: function(config, args) {
+        run: function (config, args) {
           require('./lib/list.js')(`${process.cwd()}/tests/steps.js`);
         },
       },
diff --git a/ui/packages/consul-ui/lib/commands/lib/list.js b/ui/packages/consul-ui/lib/commands/lib/list.js
index 82db58de29..f34863f5f6 100644
--- a/ui/packages/consul-ui/lib/commands/lib/list.js
+++ b/ui/packages/consul-ui/lib/commands/lib/list.js
@@ -7,41 +7,41 @@ const path = require('path');
 const vm = require('vm');
 const color = require('chalk');
 
-const out = function(prefix, step, desc) {
+const out = function (prefix, step, desc) {
   if (!Array.isArray(step)) {
     step = [step];
   }
-  step.forEach(function(item) {
+  step.forEach(function (item) {
     const str =
       prefix +
-      item.replace('\n', ' | ').replace(/\$\w+/g, function(match) {
+      item.replace('\n', ' | ').replace(/\$\w+/g, function (match) {
         return color.cyan(match);
       });
     console.log(color.green(str));
   });
 };
 const library = {
-  given: function(step, cb, desc) {
+  given: function (step, cb, desc) {
     out('Given ', step, desc);
     return this;
   },
-  desc: function(desc) {
+  desc: function (desc) {
     console.log(color.yellow(`- ${desc.trim()}`));
   },
-  section: function() {
+  section: function () {
     console.log(color.yellow(`##`));
   },
-  then: function(step, cb, desc) {
+  then: function (step, cb, desc) {
     out('Then ', step, desc);
     return this;
   },
-  when: function(step, cb, desc) {
+  when: function (step, cb, desc) {
     out('When ', step, desc);
     return this;
   },
 };
 const root = process.cwd();
-const exec = function(filename) {
+const exec = function (filename) {
   const js = read(filename);
   const code = babel.transform(js.toString(), {
     filename: filename,
@@ -52,7 +52,7 @@ const exec = function(filename) {
     code,
     {
       exports: exports,
-      require: function(str) {
+      require: function (str) {
         return exec(path.resolve(`${root}/tests`, `${str}.js`)).default;
       },
     },
@@ -63,7 +63,7 @@ const exec = function(filename) {
   return exports;
 };
 
-module.exports = function(filename) {
+module.exports = function (filename) {
   const assert = () => {};
   exec(filename).default({ assert, library });
 };
diff --git a/ui/packages/consul-ui/lib/custom-element/index.js b/ui/packages/consul-ui/lib/custom-element/index.js
index 6a52e24e09..f5ad21011f 100644
--- a/ui/packages/consul-ui/lib/custom-element/index.js
+++ b/ui/packages/consul-ui/lib/custom-element/index.js
@@ -2,24 +2,29 @@
 
 module.exports = {
   name: require('./package').name,
-  getTransform: function() {
+  getTransform: function () {
     return {
       name: 'custom-element',
       plugin: class {
         transform(ast) {
           this.syntax.traverse(ast, {
             ElementNode: (node) => {
-              if(node.tag === 'CustomElement') {
+              if (node.tag === 'CustomElement') {
                 node.attributes = node.attributes
                   // completely remove these ones, they are not used runtime
                   // element is potentially only temporarily being removed
-                  .filter(item => !['element', 'description', 'slots', 'cssparts'].includes(`${item.name.substr(1)}`))
-                  .map(item => {
-                    switch(true) {
+                  .filter(
+                    (item) =>
+                      !['element', 'description', 'slots', 'cssparts'].includes(
+                        `${item.name.substr(1)}`
+                      )
+                  )
+                  .map((item) => {
+                    switch (true) {
                       // these ones are ones where we need to remove the documentation only
                       // the attributes themselves are required at runtime
                       case ['attrs', 'cssprops'].includes(`${item.name.substr(1)}`):
-                        item.value.params = item.value.params.map(item => {
+                        item.value.params = item.value.params.map((item) => {
                           // we can't use arr.length here as we don't know
                           // whether someone has used the documentation entry
                           // in the array or not We use the hardcoded `3` for
@@ -30,7 +35,6 @@ module.exports = {
                           return item;
                         });
                         break;
-
                     }
                     return item;
                   });
@@ -39,14 +43,13 @@ module.exports = {
           });
           return ast;
         }
-
       },
-      baseDir: function() {
+      baseDir: function () {
         return __dirname;
       },
-      cacheKey: function() {
+      cacheKey: function () {
         return 'custom-element';
-      }
+      },
     };
   },
   setupPreprocessorRegistry(type, registry) {
@@ -54,10 +57,8 @@ module.exports = {
     transform.parallelBabel = {
       requireFile: __filename,
       buildUsing: 'getTransform',
-      params: {}
+      params: {},
     };
     registry.add('htmlbars-ast-plugin', transform);
   },
-
 };
-
diff --git a/ui/packages/consul-ui/lib/rehype-prism/index.js b/ui/packages/consul-ui/lib/rehype-prism/index.js
index 5e7350c756..9e12d8b940 100644
--- a/ui/packages/consul-ui/lib/rehype-prism/index.js
+++ b/ui/packages/consul-ui/lib/rehype-prism/index.js
@@ -37,14 +37,13 @@ module.exports = (options) => {
 
   return (tree) => {
     visit(tree, 'element', (node, index, parent) => {
-      if (typeof parent === 'undefined' ||
-          parent.tagName !== 'pre' ||
-          node.tagName !== 'code'
-      ) {
+      if (typeof parent === 'undefined' || parent.tagName !== 'pre' || node.tagName !== 'code') {
         return;
       }
       const languagePrefix = 'language-';
-      const langClass = ((node.properties.className || []).find(item => item.startsWith(languagePrefix)) || '').toLowerCase();
+      const langClass = (
+        (node.properties.className || []).find((item) => item.startsWith(languagePrefix)) || ''
+      ).toLowerCase();
       if (langClass.length === 0) {
         return;
       }
diff --git a/ui/packages/consul-ui/lib/startup/index.js b/ui/packages/consul-ui/lib/startup/index.js
index 5a2f6b534d..6f6e854e35 100644
--- a/ui/packages/consul-ui/lib/startup/index.js
+++ b/ui/packages/consul-ui/lib/startup/index.js
@@ -19,7 +19,7 @@ const bodyParser = require('body-parser');
 //
 module.exports = {
   name: 'startup',
-  serverMiddleware: function(server) {
+  serverMiddleware: function (server) {
     // TODO: see if we can move these into the project specific `/server` directory
     // instead of inside an addon
 
@@ -35,11 +35,11 @@ module.exports = {
       cookieParser(),
       bodyParser.text({ type: '*/*' }),
       controller().serve,
-    ].reduce(function(app, item) {
+    ].reduce(function (app, item) {
       return app.use(item);
     }, server.app);
   },
-  treeFor: function(name) {
+  treeFor: function (name) {
     const tree = this._super.treeFor.apply(this, arguments);
     if (name === 'app') {
       if (['production', 'test'].includes(process.env.EMBER_ENV)) {
@@ -48,13 +48,13 @@ module.exports = {
     }
     return tree;
   },
-  contentFor: function(type, config) {
+  contentFor: function (type, config) {
     const vars = {
       appName: config.modulePrefix,
       environment: config.environment,
       rootURL: config.environment === 'production' ? '{{.ContentPath}}' : config.rootURL,
       config: config,
-      env: function(key) {
+      env: function (key) {
         if (process.env[key]) {
           return process.env[key];
         }
diff --git a/ui/packages/consul-ui/lib/startup/templates/body.html.js b/ui/packages/consul-ui/lib/startup/templates/body.html.js
index af0cdc5b4a..4aeb0f9a20 100644
--- a/ui/packages/consul-ui/lib/startup/templates/body.html.js
+++ b/ui/packages/consul-ui/lib/startup/templates/body.html.js
@@ -12,8 +12,8 @@ const hbs = (path, attrs = {}) =>
     .replace('{{yield}}', '')
     .replace(hbsRe, (match, prop) => attrs[prop.substr(1)]);
 
-const BrandLoader = attrs => hbs('brand-loader/index.hbs', attrs);
-const Enterprise = attrs => hbs('brand-loader/enterprise.hbs', attrs);
+const BrandLoader = (attrs) => hbs('brand-loader/index.hbs', attrs);
+const Enterprise = (attrs) => hbs('brand-loader/enterprise.hbs', attrs);
 
 module.exports = ({ appName, environment, rootURL, config, env }) => `