ui: Implement read-only KV/Session and Intention views based on ACLs

ui/packages/consul-ui/README.md

@@ -128,6 +128,7 @@ token/secret.
 | `CONSUL_EXPOSED_COUNT` | (random) | Configure the number of exposed paths that the API returns. |
 | `CONSUL_CHECK_COUNT` | (random) | Configure the number of health checks that the API returns. |
 | `CONSUL_OIDC_PROVIDER_COUNT` | (random) | Configure the number of OIDC providers that the API returns. |
+| `CONSUL_RESOURCE_<singular-resource-name>_<access-type>` | true | Configure permissions e.g `CONSUL_RESOURCE_INTENTION_WRITE=false`. |
 | `DEBUG_ROUTES_ENDPOINT` | undefined | When using the window.Routes() debug utility ([see utility functions](#browser-debug-utility-functions)), use a URL to pass the route DSL to. %s in the URL will be replaced with the route DSL - http://url.com?routes=%s  |
 
 See `./mock-api` for more details.

ui/packages/consul-ui/app/abilities/base.js

@@ -14,23 +14,27 @@ export default class BaseAbility extends Ability {
     return this.permissions.generate(this.resource, action);
   }
 
-  get canCreate() {
-    return this.permissions.has(this.generate(ACCESS_WRITE));
+  get canRead() {
+    return this.permissions.has(this.generate(ACCESS_READ));
   }
 
-  get canDelete() {
+  get canList() {
+    return this.permissions.has(this.generate(ACCESS_LIST));
+  }
+
+  get canWrite() {
     return this.permissions.has(this.generate(ACCESS_WRITE));
   }
 
-  get canRead() {
-    return this.permissions.has(this.generate(ACCESS_READ));
+  get canCreate() {
+    return this.canWrite;
   }
 
-  get canList() {
-    return this.permissions.has(this.generate(ACCESS_LIST));
+  get canDelete() {
+    return this.canWrite;
   }
 
   get canUpdate() {
-    return this.permissions.has(this.generate(ACCESS_WRITE));
+    return this.canWrite;
   }
 }

ui/packages/consul-ui/app/abilities/intention.js

@@ -2,4 +2,8 @@ import BaseAbility from './base';
 
 export default class IntentionAbility extends BaseAbility {
   resource = 'intention';
+
+  get canWrite() {
+    return super.canWrite && (typeof this.item === 'undefined' || this.item.IsEditable);
+  }
 }

ui/packages/consul-ui/app/abilities/session.js

@@ -0,0 +1,5 @@
+import BaseAbility from './base';
+
+export default class SessionAbility extends BaseAbility {
+  resource = 'session';
+}

ui/packages/consul-ui/app/components/consul/intention/form/index.hbs

@@ -32,7 +32,7 @@ as |api|>
 
     <BlockSlot @name="form">
 {{#let api.data as |item|}}
-  {{#if item.IsEditable}}
+{{#if (can 'write intention' item=item)}}
 
 {{#if this.warn}}
   {{#let (changeset-get item 'Action') as |newAction|}}

ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs

@@ -59,7 +59,7 @@ as |item index|>
           More
         </BlockSlot>
         <BlockSlot @name="menu" as |confirm send keypressClick change|>
-        {{#if item.IsEditable}}
+        {{#if (can "write intention" item=item)}}
             <li role="none">
               <a role="menuitem" tabindex="-1" href={{href-to (or routeName 'dc.intentions.edit') item.ID}}>Edit</a>
             </li>

ui/packages/consul-ui/app/components/consul/kv/form/index.hbs

@@ -11,8 +11,11 @@
   as |api|
 >
   <BlockSlot @name="content">
+{{#let (cannot 'write kv' item=api.data) as |disabld|}}
     <form onsubmit={{action api.submit}}>
-      <fieldset disabled={{api.disabled}}>
+      <fieldset
+        {{disabled (or disabld api.disabled)}}
+      >
 {{#if api.isCreate}}
         <label class="type-text{{if api.data.error.Key ' has-error'}}">
             <span>Key or folder</span>
@@ -24,27 +27,47 @@
         <div>
             <div class="type-toggle">
               <label>
-                  <input type="checkbox" name="json" checked={{if json 'checked'}} onchange={{action api.change}} />
+                  <input
+                    type="checkbox"
+                    name="json"
+                    {{disabled false}}
+                    checked={{if json 'checked'}}
+                    onchange={{action api.change}}
+                  />
                   <span>Code</span>
               </label>
             </div>
             <label for="" class="type-text{{if api.data.error.Value ' has-error'}}">
                 <span>Value</span>
 {{#if json}}
-                <CodeEditor @name="value" @value={{atob api.data.Value}} @onkeyup={{action api.change "value"}} />
+                <CodeEditor
+                  @name="value"
+                  @readonly={{or disabld api.disabled}}
+                  @value={{atob api.data.Value}}
+                  @onkeyup={{action api.change "value"}}
+                />
 {{else}}
-                <textarea autofocus={{not api.isCreate}} name="value" oninput={{action api.change}}>{{atob api.data.Value}}</textarea>
+                <textarea
+                  {{disabled (or disabld api.disabled)}}
+                  autofocus={{not api.isCreate}}
+                  name="value"
+                  oninput={{action api.change}}>{{atob api.data.Value}}</textarea>
 {{/if}}
             </label>
         </div>
 {{/if}}
     </fieldset>
     {{#if api.isCreate}}
+{{#if (not disabld)}}
         <button type="submit" disabled={{or api.data.isPristine api.data.isInvalid api.disabled}}>Save</button>
+{{/if}}
         <button type="reset" onclick={{action oncancel api.data}} disabled={{api.disabled}}>Cancel</button>
     {{else}}
+{{#if (not disabld)}}
         <button type="submit" disabled={{or api.data.isInvalid api.disabled}}>Save</button>
+{{/if}}
         <button type="reset" onclick={{action oncancel api.data}} disabled={{api.disabled}}>Cancel</button>
+{{#if (not disabld)}}
         <ConfirmationDialog @message="Are you sure you want to delete this key?">
           <BlockSlot @name="action" as |confirm|>
             <button data-test-delete type="button" class="type-delete" {{action confirm api.delete}} disabled={{api.disabled}}>Delete</button>
@@ -54,6 +77,8 @@
           </BlockSlot>
         </ConfirmationDialog>
     {{/if}}
+{{/if}}
       </form>
+{{/let}}
     </BlockSlot>
 </DataForm>

ui/packages/consul-ui/app/components/consul/kv/list/index.hbs

@@ -17,6 +17,7 @@ as |item index|>
         More
       </BlockSlot>
       <BlockSlot @name="menu" as |confirm send keypressClick|>
+      {{#if (can 'write kv' item=item)}}
           <li role="none">
             <a data-test-edit role="menuitem" tabindex="-1" href={{href-to (if item.isFolder 'dc.kv.folder' 'dc.kv.edit') item.Key}}>{{if item.isFolder 'View' 'Edit'}}</a>
           </li>
@@ -55,6 +56,11 @@ as |item index|>
               </InformedAction>
             </div>
           </li>
+        {{else}}
+          <li role="none">
+            <a data-test-edit role="menuitem" tabindex="-1" href={{href-to (if item.isFolder 'dc.kv.folder' 'dc.kv.edit') item.Key}}>View</a>
+          </li>
+        {{/if}}
       </BlockSlot>
     </PopoverMenu>
   </BlockSlot>

ui/packages/consul-ui/app/components/consul/lock-session/form/index.hbs

@@ -41,6 +41,7 @@
           </dd>
 {{/if}}
         </dl>
+{{#if (can 'delete session' item=api.data)}}
         <ConfirmationDialog @message="Are you sure you want to invalidate this session?">
           <BlockSlot @name="action" as |confirm|>
             <button type="button" data-test-delete class="type-delete" {{action confirm api.delete session}} disabled={{api.disabled}}>Invalidate Session</button>
@@ -53,6 +54,7 @@
             <button type="button" class="type-cancel" {{action cancel}}>Cancel</button>
           </BlockSlot>
         </ConfirmationDialog>
+{{/if}}
       </div>
     </BlockSlot>
 </DataForm>

ui/packages/consul-ui/app/components/consul/lock-session/list/index.hbs

@@ -50,6 +50,7 @@
       </dd>
     </dl>
   </BlockSlot>
+{{#if (can "delete sessions")}}
   <BlockSlot @name="actions">
     <ConfirmationDialog @message="Are you sure you want to invalidate this session?">
       <BlockSlot @name="action" as |confirm|>
@@ -70,5 +71,6 @@
       </BlockSlot>
     </ConfirmationDialog>
   </BlockSlot>
+{{/if}}
 </ListCollection>
 {{/if}}

ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs

@@ -96,6 +96,7 @@
       returns=(set this 'popoverController')
     }}
     {{on 'click' (fn (optional this.popoverController.show))}}
+    {{disabled (cannot 'update intention' item=item.Intention)}}
     type="button"
     style={{{concat 'top:' @position.y 'px;left:' @position.x 'px;'}}}
     aria-label={{if (eq @type 'deny') 'Add intention' 'View intention'}}

ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss

@@ -5,11 +5,14 @@
     background-color: $white;
     padding: 1px 1px;
     &:hover {
-      cursor:pointer;
+      cursor: pointer;
     }
     &:active, &:focus {
       outline: none;
     }
+    &:disabled {
+      cursor: default;
+    }
   }
   &.deny .informed-action header::before {
     display: none;

ui/packages/consul-ui/app/instance-initializers/nspace.js

@@ -80,6 +80,9 @@ export function initialize(container) {
       .filter(function(item) {
         return item.startsWith('dc');
       })
+      .filter(function(item) {
+        return item.endsWith('path');
+      })
       .map(function(item) {
         return item.replace('._options.path', '').replace(dotRe, '/');
       })

ui/packages/consul-ui/app/modifiers/disabled.js

@@ -0,0 +1,17 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function enabled($element, [bool], hash) {
+  if (['input', 'textarea', 'select', 'button'].includes($element.nodeName.toLowerCase())) {
+    if (bool) {
+      $element.disabled = bool;
+    } else {
+      $element.dataset.disabled = false;
+    }
+    return;
+  }
+  for (const $el of $element.querySelectorAll('input,textarea')) {
+    if ($el.dataset.disabled !== 'false') {
+      $el.disabled = bool;
+    }
+  }
+});

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

@@ -91,10 +91,16 @@ export const routes = {
     intentions: {
       _options: { path: '/intentions' },
       edit: {
-        _options: { path: '/:intention_id' },
+        _options: {
+          path: '/:intention_id',
+          abilities: ['read intentions'],
+        },
       },
       create: {
-        _options: { path: '/create' },
+        _options: {
+          path: '/create',
+          abilities: ['create intentions'],
+        },
       },
     },
     // Key/Value
@@ -107,10 +113,16 @@ export const routes = {
         _options: { path: '/*key/edit' },
       },
       create: {
-        _options: { path: '/*key/create' },
+        _options: {
+          path: '/*key/create',
+          abilities: ['create kvs'],
+        },
       },
       'root-create': {
-        _options: { path: '/create' },
+        _options: {
+          path: '/create',
+          abilities: ['create kvs'],
+        },
       },
     },
     // ACLs

ui/packages/consul-ui/app/routes/application.js

@@ -36,7 +36,7 @@ export default Route.extend(WithBlockingActions, {
     error: function(e, transition) {
       // TODO: Normalize all this better
       let error = {
-        status: e.code || '',
+        status: e.code || e.statusCode || '',
         message: e.message || e.detail || 'Error',
       };
       if (e.errors && e.errors[0]) {

ui/packages/consul-ui/app/routes/dc/kv/edit.js

@@ -6,11 +6,9 @@ import { get } from '@ember/object';
 import ascend from 'consul-ui/utils/ascend';
 
 export default class EditRoute extends Route {
-  @service('repository/kv')
-  repo;
-
-  @service('repository/session')
-  sessionRepo;
+  @service('repository/kv') repo;
+  @service('repository/session') sessionRepo;
+  @service('repository/permission') permissions;
 
   model(params) {
     const create =
@@ -39,7 +37,7 @@ export default class EditRoute extends Route {
       // TODO: Consider loading this after initial page load
       if (typeof model.item !== 'undefined') {
         const session = get(model.item, 'Session');
-        if (session) {
+        if (session && this.permissions.can('read sessions')) {
           return hash({
             ...model,
             ...{