refactor size and location computed properties

rancher/rancher#19396

refactor display location into class

refactor display sizes on node templates

refactor 2 new display prop classes to 1

app/models/nodetemplate.js

@@ -1,8 +1,9 @@
 import Resource from '@rancher/ember-api-store/models/resource';
-import { get, set, computed } from '@ember/object';
+import { get, set, computed, defineProperty } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { ucFirst } from 'shared/utils/util';
 import { getDisplayLocation, getDisplaySize } from 'shared/mixins/node-driver';
+import { isArray } from '@ember/array';
 
 export default Resource.extend({
   intl:         service(),
@@ -11,6 +12,17 @@ export default Resource.extend({
   type:         'nodeTemplate',
   canClone:     true,
 
+  init() {
+    this._super(...arguments);
+
+    const { driver } = this;
+
+    if (driver) {
+      this.initDisplayLocation(driver);
+      this.initDisplaySize(driver);
+    }
+  },
+
   config: computed('driver', function() {
     const driver = get(this, 'driver');
 
@@ -29,18 +41,6 @@ export default Resource.extend({
     }
   }),
 
-  displaySize: computed('config', function() {
-    const driver = get(this, 'driver');
-
-    return this._displayVar(getDisplaySize(driver) || 'config.size');
-  }).volatile(),
-
-  displayLocation: computed(function() {
-    const driver = get(this, 'driver');
-
-    return this._displayVar(getDisplayLocation(driver) || 'config.region');
-  }).volatile(),
-
   actions: {
     edit() {
       let driver = get(this, 'driver');
@@ -71,7 +71,7 @@ export default Resource.extend({
     if ( keyOrFn ) {
       if ( typeof (keyOrFn) === 'function' ) {
         return keyOrFn.call(this);
-      } else {
+      }  else {
         return get(this, keyOrFn) || intl.t('generic.unknown');
       }
     } else {
@@ -89,4 +89,25 @@ export default Resource.extend({
       }
     }
   },
+
+  initDisplayLocation(driver) {
+    let location     = getDisplayLocation(driver);
+    let computedKeys = isArray(location.keyOrKeysToWatch) ? location.keyOrKeysToWatch : [location.keyOrKeysToWatch];
+
+    this.registerDynamicComputedProperty('displayLocation', computedKeys, location.getDisplayProperty);
+  },
+
+  initDisplaySize(driver) {
+    let size     = getDisplaySize(driver);
+    let computedKeys = isArray(size.keyOrKeysToWatch) ? size.keyOrKeysToWatch : [size.keyOrKeysToWatch];
+
+    this.registerDynamicComputedProperty('displaySize', computedKeys, size.getDisplayProperty);
+  },
+
+  registerDynamicComputedProperty(propertyName, watchedKeys, key) {
+    defineProperty(this, propertyName, computed(...watchedKeys, () => {
+      return this._displayVar(key);
+    }));
+  },
+
 });

lib/nodes/addon/components/driver-digitalocean/component.js

@@ -8,9 +8,6 @@ import NodeDriver, { registerDisplayLocation, registerDisplaySize } from 'shared
 import layout from './template';
 import { inject as service } from '@ember/service';
 
-registerDisplayLocation(DRIVER, 'config.region');
-registerDisplaySize(DRIVER, 'config.size');
-
 const DRIVER = 'digitalocean';
 const VALID_IMAGES = [
   'rancheros',

lib/nodes/addon/node-templates/controller.js

@@ -1,6 +1,6 @@
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import { get } from '@ember/object';
+import { get, computed } from '@ember/object';
 
 const HEADERS = [
   {
@@ -44,4 +44,8 @@ export default Controller.extend({
       get(this, 'modalService').toggleModal('modal-edit-node-template');
     },
   },
+
+  filteredNodeTemplates: computed('model.nodeTemplates.@each.{id,name,state,displayLocation,displaySize}', function() {
+    return get(this, 'model.nodeTemplates').filterBy('displayName');
+  }),
 });

lib/nodes/addon/node-templates/template.hbs

@@ -20,15 +20,15 @@
 
 <section>
   {{#sortable-table
-      tableClassNames="bordered"
-      bulkActions=true
-      paging=false
-      search=false
-      sortBy=sortBy
-      headers=headers
-      descending=descending
-      body=model.nodeTemplates
-      as |sortable kind row dt|
+     tableClassNames="bordered"
+     bulkActions=true
+     paging=false
+     search=false
+     sortBy=sortBy
+     headers=headers
+     descending=descending
+     body=filteredNodeTemplates
+     as |sortable kind row dt|
   }}
     {{#if (eq kind "row")}}
       {{node-template-row model=row dt=dt}}

lib/shared/addon/mixins/node-driver.js

@@ -11,56 +11,149 @@ import { formatSi } from 'shared/utils/parse-unit';
 import C from 'ui/utils/constants';
 import { isArray } from '@ember/array';
 
-// Map of driverName -> [string | function]
-//  If string, the given field is retrieved
-//  If function, the function is executed with the template as "this"
-//  Custom UIs should call registerDisplay{Size|Location} to register new entries.
-const DISPLAY_LOCATIONS = {
-  aliyunecs() {
-    return get(this, 'config.region') + get(this, 'config.zone');
-  },
-  amazonec2() {
-    return get(this, 'config.region') + get(this, 'config.zone');
-  },
-  azure:         'config.environment',
-  digitalocean:  'config.region',
-  exoscale:      'config.availabilityZone',
-  packet:        'config.facilityCode',
-  rackspace:     'config.region',
-  vmwarevsphere: null,
+class DynamicDependentKeysProperty {
+  constructor(property) {
+    const {
+      driver, keyOrKeysToWatch, getDisplayProperty
+    } = property;
+
+    setProperties(this, {
+      driver,
+      keyOrKeysToWatch,
+    });
+
+    if (getDisplayProperty) {
+      set(this, 'getDisplayProperty', getDisplayProperty);
+    } else {
+      if (keyOrKeysToWatch) {
+        let keyToGet = keyOrKeysToWatch;
+
+        set(this, 'getDisplayProperty', function() {
+          return get(this, keyToGet);
+        });
+      }
+    }
+  }
 }
 
-const DISPLAY_SIZES = {
-  aliyunecs:    'config.instanceType',
-  amazonec2:    'config.instanceType',
-  azure:        'config.size',
-  digitalocean: 'config.size',
-  exoscale:     'config.instanceProfile',
-  packet:       'config.plan',
-  rackspace:    'config.flavorId',
+// Map of location objects -> { driver, keyOrKeysToWatch, getLocation }
+// driver: driver name (e.g. digitial ocean, azure)
+// keyOrKeysToWatch: string | map of strings corresponding to key or keys on config storing the location
+// getLocation: if multiple location keys you may provide an override getting function to fetch and massage display location to your liking
+// Custom UIs should call registerDisplayLocation{new Location} to register new entries.
+const DISPLAY_LOCATIONS = [];
+const DISPLAY_SIZES     = [];
 
-  vmwarevsphere() {
-    const size = formatSi(get(this, 'config.memorySize') * 1048576, 1024, 'iB');
+function _initBuiltInSizes() {
+  const CONFIG_SIZE_KEYS = [
+    {
+      driver:           'aliyunecs',
+      keyOrKeysToWatch: 'config.instanceType',
+    },
+    {
+      driver:           'amazonec2',
+      keyOrKeysToWatch: 'config.instanceType',
+    },
+    {
+      driver:           'azure',
+      keyOrKeysToWatch: 'config.size',
+    },
+    {
+      driver:           'digitalocean',
+      keyOrKeysToWatch: 'config.size',
+    },
+    {
+      driver:           'exoscale',
+      keyOrKeysToWatch: 'config.instanceProfile',
+    },
+    {
+      driver:           'packet',
+      keyOrKeysToWatch: 'config.plan',
+    },
+    {
+      driver:           'rackspace',
+      keyOrKeysToWatch: 'config.flavorId',
+    },
+    {
+      driver:           'vmwarevsphere',
+      keyOrKeysToWatch: ['config.memorySize', 'config.cpuCount'],
+      getDisplayProperty() {
+        const size = formatSi(get(this, 'config.memorySize') * 1048576, 1024, 'iB');
 
-    return `${ size }, ${ get(this, 'config.cpuCount')  } Core`;
-  },
+        return `${ size }, ${ get(this, 'config.cpuCount')  } Core`;
+      }
+    },
+  ];
+
+  CONFIG_SIZE_KEYS.forEach((size) => {
+    registerDisplaySize(new DynamicDependentKeysProperty(size));
+  });
 }
 
+function _initBuiltInLocations() {
+  const CONFIG_LOCATION_KEYS = [
+    {
+      driver:            'aliyunecs',
+      keyOrKeysToWatch: ['config.region', 'config.zone'],
+      getDisplayProperty() {
+        return `${ get(this, 'config.region') }${ get(this, 'config.zone') }`
+      }
+    },
+    {
+      driver:            'amazonec2',
+      keyOrKeysToWatch: ['config.region', 'config.zone'],
+      getDisplayProperty() {
+        return `${ get(this, 'config.region') }${ get(this, 'config.zone') }`
+      }
+    },
+    {
+      driver:            'azure',
+      keyOrKeysToWatch: 'config.environment',
+    },
+    {
+      driver:            'digitalocean',
+      keyOrKeysToWatch: 'config.region',
+    },
+    {
+      driver:            'exoscale',
+      keyOrKeysToWatch: 'config.availabilityZone',
+    },
+    {
+      driver:            'packet',
+      keyOrKeysToWatch: 'config.facilityCode',
+    },
+    {
+      driver:            'rackspace',
+      keyOrKeysToWatch: 'config.region',
+    },
+    {
+      driver:            'vmwarevsphere',
+      keyOrKeysToWatch: null,
+    },
+  ];
+
+  CONFIG_LOCATION_KEYS.forEach((location) => {
+    registerDisplayLocation(new DynamicDependentKeysProperty(location));
+  });
+}
+
+_initBuiltInLocations();
+_initBuiltInSizes();
 
 export function getDisplayLocation(driver) {
-  return DISPLAY_LOCATIONS[driver];
+  return DISPLAY_LOCATIONS.findBy('driver', driver);
 }
 
 export function getDisplaySize(driver) {
-  return DISPLAY_SIZES[driver];
+  return DISPLAY_SIZES.findBy('driver', driver );
 }
 
-export function registerDisplayLocation(driver, keyOrFn) {
-  DISPLAY_LOCATIONS[driver] = keyOrFn;
+export function registerDisplayLocation(location) {
+  DISPLAY_LOCATIONS.push(location)
 }
 
-export function registerDisplaySize(driver, keyOrFn) {
-  DISPLAY_SIZES[driver] = keyOrFn;
+export function registerDisplaySize(size) {
+  DISPLAY_SIZES.push(size);
 }
 
 export default Mixin.create(NewOrEdit, ManageLabels, {

yarn.lock

@@ -1557,6 +1557,7 @@ babel-eslint@^10.0.1:
 babel-eslint@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-9.0.0.tgz#7d9445f81ed9f60aff38115f838970df9f2b6220"
+  integrity sha512-itv1MwE3TMbY0QtNfeL7wzak1mV47Uy+n6HtSOO4Xd7rvmO+tsGQSgyOEEgo6Y2vHZKZphaoelNeSVj4vkLA1g==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@babel/parser" "^7.0.0"