Add basic support for embedded types

For example, given: ```javascript { { id: 'container', type: 'schema', resourceFields: { restart: { type: 'restartPolicy' } } }, { id: 'restartPolicy', type: 'schema', resourceFields: { name: { type: 'string' }, maximumRetryCount: { type: 'int', } } } } ``` the `restart` field will now show up as a textarea that you can put JSON in. It would be nicer if it looked up the properties of a restartPolicy and allowed you to enter them directly, but nesting complex types is not a terribly simple change so this will provide a way to set embedded types in the meantime.
rancher · Jan 16, 2015 · bb2a818 · bb2a818
1 parent 613e2d8
commit bb2a818
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 88 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+npm-debug.log
 bower_components
 dist
 tmp

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "api-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Embedded UI for any service that implements the Rancher API spec",
   "contributors": [
     "Go Daddy Operating Company, LLC. (http://godaddy.com)",
@@ -14,7 +14,7 @@
     "url": "https://github.com/rancherio/api-ui.git"
   },
   "scripts": {
-    "start": "./scripts/server",
+    "start": "./scripts/serve",
     "build": "./scripts/build"
   },
   "devDependencies": {

diff --git a/src/HTMLApi.js b/src/HTMLApi.js
@@ -472,7 +472,6 @@ HTMLApi.prototype.actionLoad = function(name, obj, body)
   // The description of the input and output for this action
   var actionSchema = (isCollection ? objSchema.collectionActions[name] : objSchema.resourceActions[name]);
 
-
   // The schema for the input
   var actionInput = {};
   if ( actionSchema.input )
@@ -1349,117 +1348,129 @@ HTMLApi.prototype._flattenFields = function(mode,schema,data)
 
 HTMLApi.prototype._flattenField = function(mode, name, field, data, depth)
 {
+  if ( (mode != 'update') && (mode != 'action') && !(mode == 'create' && field.create) )
+  {
+    // This field is not set/changeable
+    return null;
+  }
+
   depth = depth || 0;
 
   var type = field._typeList[depth];
 
-  if ( mode == 'update' || (mode == 'create' && field.create) || (mode == 'action') )
+  var isEmbedded = false;
+  if ( ['string','password','float','int','date','blob','boolean','enum','reference','array','map'].indexOf(type) === -1 && this.getSchema(type) )
   {
-    // The value input's name
-    var formFieldName = name;
+    // Show embedded types as JSON, until proper support for embedded types is added.
+    type = 'json';
+    isEmbedded = true;
+  }
 
-    // The key input's name, for maps
-    var formFieldName2 = null;
-    var subType;
-    for ( var i = 0 ; i <= depth; i++ )
-    {
-      subType = field._typeList[i];
-      if ( subType == 'array' )
-      {
-        formFieldName += '[]';
-      }
-      else if ( subType == 'map' )
-      {
-        formFieldName2 = formFieldName+'.key{}';
-        formFieldName += '.value{}';
-      }
 
-      if ( subType == 'json' )
-      {
-        formFieldName += '.json{}';
-      }
-    }
+  // The value input's name
+  var formFieldName = name;
 
-    var row = {
-      name: name,
-      formFieldName: formFieldName,
-      formFieldName2: formFieldName2,
-      formFieldNameNull: formFieldName+this._magicNull,
-      required: field.required || false,
-      writable: (mode == 'action') || (mode == 'update' && field.update) || (mode != 'update' && field.create),
-      description: field.description,
-      placeholder: field.placeholder||"",
-      enlargeable: (type == 'string' && (!field.maxLength || field.maxLength > 63)),
-      nullCheck: (field.nullable && !field.options && ['string','data','password','number','int','float','reference'].indexOf(field.type) >= 0 ),
-      type: type,
-      field: field,
-      children: null,
-      value: ''
-    };
-
-    var displayType = field._typeList[ field._typeList.length - 1];
-    var parentType  = field._typeList[ field._typeList.length - 2];
-    if ( parentType && parentType == 'reference' )
+  // The key input's name, for maps
+  var formFieldName2 = null;
+  var subType;
+  for ( var i = 0 ; i <= depth; i++ )
+  {
+    subType = field._typeList[i];
+    if ( subType == 'array' )
     {
-      var link = null;
-      if ( field.referenceCollection )
-      {
-        link = field.referenceCollection;
-      }
-      else
-      {
-        var displaySchema = this.getSchema(displayType);
-        if ( displaySchema )
-        {
-          link = displaySchema.links['collection'] || displaySchema.links['self'];
-        }
-      }
-
-      if ( link )
-        displayType = '<a tabindex="-1" href="' + link + '" target="_blank">' + displayType + '</a>';
+      formFieldName += '[]';
+    }
+    else if ( subType == 'map' )
+    {
+      formFieldName2 = formFieldName+'.key{}';
+      formFieldName += '.value{}';
     }
 
-    for ( var i = field._typeList.length - 2 ; i >= depth ; i-- )
+    if ( subType == 'json' || (isEmbedded && i === depth) )
     {
-      displayType = field._typeList[i] + '[' + displayType + ']';
+      formFieldName += '.json{}';
     }
+  }
 
-    row.displayType = displayType;
+  var row = {
+    name: name,
+    formFieldName: formFieldName,
+    formFieldName2: formFieldName2,
+    formFieldNameNull: formFieldName+this._magicNull,
+    required: field.required || false,
+    writable: (mode == 'action') || (mode == 'update' && field.update) || (mode != 'update' && field.create),
+    description: field.description,
+    placeholder: field.placeholder||"",
+    enlargeable: (type == 'string' && (!field.maxLength || field.maxLength > 63)),
+    nullCheck: (field.nullable && !field.options && ['string','data','password','number','int','float','reference'].indexOf(field.type) >= 0 ),
+    type: type,
+    field: field,
+    children: null,
+    value: ''
+  };
 
-    if ( type == 'map' )
+  var displayType = field._typeList[ field._typeList.length - 1];
+  var parentType  = field._typeList[ field._typeList.length - 2];
+  if ( isEmbedded || (parentType && parentType == 'reference') )
+  {
+    var link = null;
+    if ( field.referenceCollection )
     {
-      row.children = [];
-      var keys = Object.keys(data||{});
-      var child;
-      for ( var i = 0 ; i < keys.length ; i++ )
-      {
-        child = this._flattenField(mode, name, field, data[keys[i]], depth+1);
-        child.value2 = keys[i];
-        child.parentIsMap = true;
-        row.children.push(child);
-      }
+      link = field.referenceCollection;
     }
-    else if ( type == 'array' )
+    else
     {
-      row.children = [];
-      for ( var i = 0 ; i < (data||[]).length ; i++ )
+      var displaySchema = this.getSchema(displayType);
+      if ( displaySchema )
       {
-        row.children.push( this._flattenField(mode, name, field, data[i], depth+1) );
+        link = displaySchema.links['collection'] || displaySchema.links['self'];
       }
     }
-    else if ( type == 'json' )
+
+    if ( link )
     {
-      row.value = JSON.stringify(data);
+      displayType = '<a tabindex="-1" href="' + link + '" target="_blank">' + displayType + '</a>';
     }
-    else
+  }
+
+  for ( var i = field._typeList.length - 2 ; i >= depth ; i-- )
+  {
+    displayType = field._typeList[i] + '[' + displayType + ']';
+  }
+
+  row.displayType = displayType;
+
+  if ( type == 'map' )
+  {
+    row.children = [];
+    var keys = Object.keys(data||{});
+    var child;
+    for ( var i = 0 ; i < keys.length ; i++ )
     {
-      row.value = data;
+      child = this._flattenField(mode, name, field, data[keys[i]], depth+1);
+      child.value2 = keys[i];
+      child.parentIsMap = true;
+      row.children.push(child);
+    }
+  }
+  else if ( type == 'array' )
+  {
+    row.children = [];
+    for ( var i = 0 ; i < (data||[]).length ; i++ )
+    {
+      row.children.push( this._flattenField(mode, name, field, data[i], depth+1) );
     }
-
-    return row;
+  }
+  else if ( type == 'json' )
+  {
+    row.value = JSON.stringify(data);
+  }
+  else
+  {
+    row.value = data;
   }
 
-  return null;
+  return row;
 }
 
 
@@ -1751,7 +1762,7 @@ HTMLApi.prototype.subAdd = function(button, name)
     children: [field]
   }
 
-  var html = Handlebars.templates['field.hbs'](par);
+  var html = Handlebars.partials['field.hbs'](par);
 
 //  html = '<div><input type="button" onclick="htmlapi.subRemove(this);" value="-">' + html + '</div>';
   $(button).before(html);