Merge pull request #12 from westlywright/2.0

2.0 Fixups

README.md

@@ -1,6 +1,8 @@
 # ui-driver-skel
 Skeleton Rancher UI driver for custom docker-machine drivers
 
+**Note: The Master branch works with Rancher 2.x+, if you are building a custom driver for Rancher 1.x use the 1.x branch**
+
 ## Setup
 
 * Fork this repository into your own account as `ui-driver-DRIVERNAME`
@@ -16,6 +18,7 @@ This package contains a small web-server that will serve up the custom driver UI
 * The driver name can be optionally overridden: `npm start -- --name=DRIVERNAME`
 * The compiled files are viewable at http://localhost:3000.
 * **Note:** The development server does not currently automatically restart when files are changed.
+* Do not use the `model.<drivername>Confg` signature to access your driver config in the template file, use the `config` alias that is already setup in the component
 
 ## Building
 

component/component.js

@@ -1,51 +1,62 @@
 /*!!!!!!!!!!!Do not change anything between here (the DRIVERNAME placeholder will be automatically replaced at buildtime)!!!!!!!!!!!*/
-
 import NodeDriver from 'shared/mixins/node-driver';
 
+// do not remove LAYOUT, it is replaced at build time with a base64 representation of the template of the hbs template
+// we do this to avoid converting template to a js file that returns a string and the cors issues that would come along with that
 const LAYOUT;
+/*!!!!!!!!!!!DO NOT CHANGE END!!!!!!!!!!!*/
+
+
+/*!!!!!!!!!!!GLOBAL CONST START!!!!!!!!!!!*/
+// EMBER API Access - if you need access to any of the Ember API's add them here in the same manner rather then import them via modules, since the dependencies exist in rancher we dont want to expor the modules in the amd def
 const computed     = Ember.computed;
 const get          = Ember.get;
 const set          = Ember.set;
 const alias        = Ember.computed.alias;
 const service      = Ember.inject.service;
+
 const defaultRadix = 10;
 const defaultBase  = 1024;
+/*!!!!!!!!!!!GLOBAL CONST END!!!!!!!!!!!*/
 
+
+
+/*!!!!!!!!!!!DO NOT CHANGE START!!!!!!!!!!!*/
 export default Ember.Component.extend(NodeDriver, {
-  /*!!!!!!!!!!!DO NOT CHANGE END!!!!!!!!!!!*/
   driverName: '%%DRIVERNAME%%',
   config:     alias('model.%%DRIVERNAME%%Config'),
   app:        service(),
 
   init() {
-    /*!!!!!!!!!!!DO NOT CHANGE START!!!!!!!!!!!*/
     // This does on the fly template compiling, if you mess with this :cry:
     const decodedLayout = window.atob(LAYOUT);
     const template      = Ember.HTMLBars.compile(decodedLayout, {
-      moduleName: 'nodes/components/driver-interoutevdc/template'
+      moduleName: 'nodes/components/driver-%%DRIVERNAME%%/template'
     });
     set(this,'layout', template);
 
     this._super(...arguments);
-    /*!!!!!!!!!!!DO NOT CHANGE END!!!!!!!!!!!*/
 
-    const config = get(this, 'globalStore').createRecord({
-      type:       '%%DRIVERNAME%%Config',
-      cpuCount:   2,
+  },
+  /*!!!!!!!!!!!DO NOT CHANGE END!!!!!!!!!!!*/
+
+  // Write your component here, starting with setting 'model' to a machine with your config populated
+  bootstrap: function() {
+    // bootstrap is called by rancher ui on 'init', you're better off doing your setup here rather then the init function to ensure everything is setup correctly
+    let config = get(this, 'globalStore').createRecord({
+      type: '%%DRIVERNAME%%Config',
+      cpuCount: 2,
       memorySize: 2048,
     });
 
     set(this, 'model.%%DRIVERNAME%%Config', config);
-
   },
 
   // Add custom validation beyond what can be done from the config API schema
   validate() {
     // Get generic API validation errors
     this._super();
-
     var errors = get(this, 'errors')||[];
-
     if ( !get(this, 'model.name') ) {
       errors.push('Name is required');
     }
@@ -66,6 +77,7 @@ export default Ember.Component.extend(NodeDriver, {
       set(this, 'errors', null);
       return true;
     }
-
   },
+
+  // Any computed properties or custom logic can go here
 });

gulpfile.js

@@ -1,21 +1,23 @@
 /* jshint node: true */
-const gulp        = require('gulp');
-const clean       = require('gulp-clean');
-const gulpConcat  = require('gulp-concat');
-const gulpConnect = require('gulp-connect');
-const replace     = require('gulp-replace');
-const babel       = require('gulp-babel');
-const argv        = require('yargs').argv;
-const pkg         = require('./package.json');
-const fs          = require('fs');
-
-const NAME_TOKEN  = '%%DRIVERNAME%%';
-
-const BASE        = 'component/';
-const DIST        = 'dist/';
-const TMP         = 'tmp/';
-const ASSETS      = 'assets/';
-const DRIVER_NAME = argv.name || pkg.name.replace(/^ui-driver-/,'');
+const gulp          = require('gulp');
+const clean         = require('gulp-clean');
+const gulpConcat    = require('gulp-concat');
+const gulpConnect   = require('gulp-connect');
+const replace       = require('gulp-replace');
+const babel         = require('gulp-babel');
+const argv          = require('yargs').argv;
+const pkg           = require('./package.json');
+const fs            = require('fs');
+const replaceString = require('replace-string');
+
+
+const NAME_TOKEN    = '%%DRIVERNAME%%';
+
+const BASE          = 'component/';
+const DIST          = 'dist/';
+const TMP           = 'tmp/';
+const ASSETS        = 'assets/';
+const DRIVER_NAME   = argv.name || pkg.name.replace(/^ui-driver-/,'');
 
 console.log('Driver Name:', DRIVER_NAME);
 
@@ -59,7 +61,9 @@ gulp.task('babel', ['assets'], function() {
     "comments": false
   };
 
-  let hbs = fs.readFileSync(`${BASE}template.hbs`);
+  let hbs = fs.readFileSync(`${BASE}template.hbs`, 'utf8');
+
+  hbs = replaceString(hbs, NAME_TOKEN, DRIVER_NAME);
 
   hbs = Buffer.from(hbs).toString('base64');
 

package.json

@@ -33,6 +33,7 @@
     "gulp-replace": "0.6.1",
     "gulp-sourcemaps": "2.6.4",
     "jshint": "2.9.5",
+    "replace-string": "^1.1.0",
     "yargs": "11.0.0"
   }
 }