UI: Namespaces redesign

ui/app/abilities/abstract.js

@@ -12,19 +12,24 @@ export default class Abstract extends Ability {
   @not('token.aclEnabled') bypassAuthorization;
   @equal('token.selfToken.type', 'management') selfTokenIsManagement;
 
-  @computed('system.activeNamespace.name')
-  get activeNamespace() {
-    return this.get('system.activeNamespace.name') || 'default';
+  // Pass in a namespace to `can` or `cannot` calls to override
+  // https://github.com/minutebase/ember-can#additional-attributes
+  namespace = 'default';
+
+  get _namespace() {
+    if (!this.namespace) return 'default';
+    if (typeof this.namespace === 'string') return this.namespace;
+    return get(this.namespace, 'name');
   }
 
-  @computed('activeNamespace', 'token.selfTokenPolicies.[]')
-  get rulesForActiveNamespace() {
-    let activeNamespace = this.activeNamespace;
+  @computed('_namespace', 'token.selfTokenPolicies.[]')
+  get rulesForNamespace() {
+    let namespace = this._namespace;
 
     return (this.get('token.selfTokenPolicies') || []).toArray().reduce((rules, policy) => {
       let policyNamespaces = get(policy, 'rulesJSON.Namespaces') || [];
 
-      let matchingNamespace = this._findMatchingNamespace(policyNamespaces, activeNamespace);
+      let matchingNamespace = this._findMatchingNamespace(policyNamespaces, namespace);
 
       if (matchingNamespace) {
         rules.push(policyNamespaces.find(namespace => namespace.Name === matchingNamespace));
@@ -46,8 +51,8 @@ export default class Abstract extends Ability {
       }, []);
   }
 
-  activeNamespaceIncludesCapability(capability) {
-    return this.rulesForActiveNamespace.some(rules => {
+  namespaceIncludesCapability(capability) {
+    return this.rulesForNamespace.some(rules => {
       let capabilities = get(rules, 'Capabilities') || [];
       return capabilities.includes(capability);
     });
@@ -64,11 +69,11 @@ export default class Abstract extends Ability {
 
   // Chooses the closest namespace as described at the bottom here:
   // https://learn.hashicorp.com/tutorials/nomad/access-control-policies?in=nomad/access-control#namespace-rules
-  _findMatchingNamespace(policyNamespaces, activeNamespace) {
+  _findMatchingNamespace(policyNamespaces, namespace) {
     let namespaceNames = policyNamespaces.mapBy('Name');
 
-    if (namespaceNames.includes(activeNamespace)) {
-      return activeNamespace;
+    if (namespaceNames.includes(namespace)) {
+      return namespace;
     }
 
     let globNamespaceNames = namespaceNames.filter(namespaceName => namespaceName.includes('*'));
@@ -77,11 +82,11 @@ export default class Abstract extends Ability {
       (mostMatching, namespaceName) => {
         // Convert * wildcards to .* for regex matching
         let namespaceNameRegExp = new RegExp(namespaceName.replace(/\*/g, '.*'));
-        let characterDifference = activeNamespace.length - namespaceName.length;
+        let characterDifference = namespace.length - namespaceName.length;
 
         if (
           characterDifference < mostMatching.mostMatchingCharacterDifference &&
-          activeNamespace.match(namespaceNameRegExp)
+          namespace.match(namespaceNameRegExp)
         ) {
           return {
             mostMatchingNamespaceName: namespaceName,

ui/app/abilities/allocation.js

@@ -6,9 +6,9 @@ export default class Allocation extends AbstractAbility {
   @or('bypassAuthorization', 'selfTokenIsManagement', 'policiesSupportExec')
   canExec;
 
-  @computed('rulesForActiveNamespace.@each.capabilities')
+  @computed('rulesForNamespace.@each.capabilities')
   get policiesSupportExec() {
-    return this.rulesForActiveNamespace.some(rules => {
+    return this.rulesForNamespace.some(rules => {
       let capabilities = get(rules, 'Capabilities') || [];
       return capabilities.includes('alloc-exec');
     });

ui/app/abilities/job.js

@@ -20,13 +20,13 @@ export default class Job extends AbstractAbility {
   @or('bypassAuthorization', 'selfTokenIsManagement')
   canListAll;
 
-  @computed('rulesForActiveNamespace.@each.capabilities')
+  @computed('rulesForNamespace.@each.capabilities')
   get policiesSupportRunning() {
-    return this.activeNamespaceIncludesCapability('submit-job');
+    return this.namespaceIncludesCapability('submit-job');
   }
 
-  @computed('rulesForActiveNamespace.@each.capabilities')
+  @computed('rulesForNamespace.@each.capabilities')
   get policiesSupportScaling() {
-    return this.activeNamespaceIncludesCapability('scale-job');
+    return this.namespaceIncludesCapability('scale-job');
   }
 }

ui/app/adapters/namespace.js

@@ -1,7 +1,7 @@
-import ApplicationAdapter from './application';
+import Watchable from './watchable';
 import codesForError from '../utils/codes-for-error';
 
-export default class NamespaceAdapter extends ApplicationAdapter {
+export default class NamespaceAdapter extends Watchable {
   findRecord(store, modelClass, id) {
     return super.findRecord(...arguments).catch(error => {
       const errorCodes = codesForError(error);

ui/app/adapters/watchable-namespace-ids.js

@@ -7,10 +7,18 @@ export default class WatchableNamespaceIDs extends Watchable {
   @service system;
 
   findAll() {
-    const namespace = this.get('system.activeNamespace');
     return super.findAll(...arguments).then(data => {
       data.forEach(record => {
-        record.Namespace = namespace ? namespace.get('id') : 'default';
+        record.Namespace = 'default';
+      });
+      return data;
+    });
+  }
+
+  query(store, type, { namespace }) {
+    return super.query(...arguments).then(data => {
+      data.forEach(record => {
+        if (!record.Namespace) record.Namespace = namespace;
       });
       return data;
     });
@@ -25,14 +33,12 @@ export default class WatchableNamespaceIDs extends Watchable {
 
   urlForFindAll() {
     const url = super.urlForFindAll(...arguments);
-    const namespace = this.get('system.activeNamespace.id');
-    return associateNamespace(url, namespace);
+    return associateNamespace(url);
   }
 
   urlForQuery() {
     const url = super.urlForQuery(...arguments);
-    const namespace = this.get('system.activeNamespace.id');
-    return associateNamespace(url, namespace);
+    return associateNamespace(url);
   }
 
   urlForFindRecord(id, type, hash, pathSuffix) {

ui/app/adapters/watchable.js

@@ -48,11 +48,12 @@ export default class Watchable extends ApplicationAdapter {
   }
 
   findRecord(store, type, id, snapshot, additionalParams = {}) {
-    let [url, params] = this.buildURL(type.modelName, id, snapshot, 'findRecord').split('?');
+    const originalUrl = this.buildURL(type.modelName, id, snapshot, 'findRecord');
+    let [url, params] = originalUrl.split('?');
     params = assign(queryString.parse(params) || {}, this.buildQuery(), additionalParams);
 
     if (get(snapshot || {}, 'adapterOptions.watch')) {
-      params.index = this.watchList.getIndexFor(url);
+      params.index = this.watchList.getIndexFor(originalUrl);
     }
 
     const signal = get(snapshot || {}, 'adapterOptions.abortController.signal');

ui/app/components/job-row.js

@@ -8,6 +8,7 @@ import classic from 'ember-classic-decorator';
 @tagName('tr')
 @classNames('job-row', 'is-interactive')
 export default class JobRow extends Component {
+  @service system;
   @service store;
 
   job = null;

ui/app/components/single-select-dropdown/index.hbs

@@ -0,0 +1,13 @@
+<div data-test-single-select-dropdown class="dropdown" ...attributes>
+  <PowerSelect
+    @options={{@options}}
+    @selected={{this.activeOption}}
+    @searchEnabled={{gt @options.length 10}}
+    @searchField="label"
+    @onChange={{action this.setSelection}}
+    @dropdownClass="dropdown-options"
+    as |option|>
+    <span class="ember-power-select-prefix">{{@label}}: </span>
+    <span class="dropdown-label" data-test-dropdown-option={{option.key}}>{{option.label}}</span>
+  </PowerSelect>
+</div>

ui/app/components/single-select-dropdown/index.js

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class SingleSelectDropdown extends Component {
+  get activeOption() {
+    return this.args.options.findBy('key', this.args.selection);
+  }
+
+  @action
+  setSelection({ key }) {
+    this.args.onSelect && this.args.onSelect(key);
+  }
+}

ui/app/controllers/csi/volumes.js

@@ -1,13 +1,5 @@
 import Controller from '@ember/controller';
 
 export default class VolumesController extends Controller {
-  queryParams = [
-    {
-      volumeNamespace: 'namespace',
-    },
-  ];
-
   isForbidden = false;
-
-  volumeNamespace = 'default';
 }

ui/app/controllers/csi/volumes/index.js

@@ -1,10 +1,12 @@
 import { inject as service } from '@ember/service';
 import { action, computed } from '@ember/object';
 import { alias, readOnly } from '@ember/object/computed';
+import { scheduleOnce } from '@ember/runloop';
 import Controller, { inject as controller } from '@ember/controller';
 import SortableFactory from 'nomad-ui/mixins/sortable-factory';
 import Searchable from 'nomad-ui/mixins/searchable';
 import { lazyClick } from 'nomad-ui/helpers/lazy-click';
+import { serialize } from 'nomad-ui/utils/qp-serialize';
 import classic from 'ember-classic-decorator';
 
 @classic
@@ -38,6 +40,9 @@ export default class IndexController extends Controller.extend(
     {
       sortDescending: 'desc',
     },
+    {
+      qpNamespace: 'namespace',
+    },
   ];
 
   currentPage = 1;
@@ -58,29 +63,60 @@ export default class IndexController extends Controller.extend(
 
   fuzzySearchEnabled = true;
 
+  @computed('qpNamespace', 'model.namespaces.[]', 'system.cachedNamespace')
+  get optionsNamespaces() {
+    const availableNamespaces = this.model.namespaces.map(namespace => ({
+      key: namespace.name,
+      label: namespace.name,
+    }));
+
+    availableNamespaces.unshift({
+      key: '*',
+      label: 'All (*)',
+    });
+
+    // Unset the namespace selection if it was server-side deleted
+    if (!availableNamespaces.mapBy('key').includes(this.qpNamespace)) {
+      // eslint-disable-next-line ember/no-incorrect-calls-with-inline-anonymous-functions
+      scheduleOnce('actions', () => {
+        // eslint-disable-next-line ember/no-side-effects
+        this.set('qpNamespace', this.system.cachedNamespace || 'default');
+      });
+    }
+
+    return availableNamespaces;
+  }
+
   /**
     Visible volumes are those that match the selected namespace
   */
-  @computed('model.@each.parent', 'system.{activeNamespace.id,namespaces.length}')
+  @computed('model.volumes.@each.parent', 'system.{namespaces.length}')
   get visibleVolumes() {
-    if (!this.model) return [];
-
-    // Namespace related properties are ommitted from the dependent keys
-    // due to a prop invalidation bug caused by region switching.
-    const hasNamespaces = this.get('system.namespaces.length');
-    const activeNamespace = this.get('system.activeNamespace.id') || 'default';
-
-    return this.model
-      .compact()
-      .filter(volume => !hasNamespaces || volume.get('namespace.id') === activeNamespace);
+    if (!this.model.volumes) return [];
+    return this.model.volumes.compact();
   }
 
   @alias('visibleVolumes') listToSort;
   @alias('listSorted') listToSearch;
   @alias('listSearched') sortedVolumes;
 
+  @action
+  cacheNamespace(namespace) {
+    this.system.cachedNamespace = namespace;
+  }
+
+  setFacetQueryParam(queryParam, selection) {
+    this.set(queryParam, serialize(selection));
+  }
+
   @action
   gotoVolume(volume, event) {
-    lazyClick([() => this.transitionToRoute('csi.volumes.volume', volume.get('plainId')), event]);
+    lazyClick([
+      () =>
+        this.transitionToRoute('csi.volumes.volume', volume.get('plainId'), {
+          queryParams: { volumeNamespace: volume.get('namespace.name') },
+        }),
+      event,
+    ]);
   }
 }

ui/app/controllers/csi/volumes/volume.js

@@ -6,6 +6,13 @@ export default class VolumeController extends Controller {
   // Used in the template
   @service system;
 
+  queryParams = [
+    {
+      volumeNamespace: 'namespace',
+    },
+  ];
+  volumeNamespace = 'default';
+
   @computed('model.readAllocations.@each.modifyIndex')
   get sortedReadAllocations() {
     return this.model.readAllocations.sortBy('modifyIndex').reverse();

ui/app/controllers/jobs.js

@@ -1,16 +1,3 @@
-import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
 
-export default class JobsController extends Controller {
-  @service system;
-
-  queryParams = [
-    {
-      jobNamespace: 'namespace',
-    },
-  ];
-
-  isForbidden = false;
-
-  jobNamespace = 'default';
-}
+export default class JobsController extends Controller {}