Merge pull request #3654 from codyrancher/vsphere-init

Improve Vsphere UX around cloudinit/cloudconfig

app/styles/components/_code.scss

@@ -66,3 +66,13 @@ pre {
     color: #000;
   }
 }
+
+.codemirror-container {
+  textarea {
+    // We can't just use display: none or visibility hidden because then the
+    // text area can't receive focus which prevents the user from editing.
+    height: 0;
+    width: 0;
+    padding: 0;
+  }
+}

lib/global-admin/addon/components/cru-cloud-credential/template.hbs

@@ -169,9 +169,9 @@
           <label class="acc-label">
             {{t "nodeDriver.vmwarevsphere.vcenter.label"}}{{field-required}}
           </label>
-          {{input
+          {{input-url
-            type="text"
+            classNames="form-control"
-            class="form-control"
+            id="server-url"
             value=config.vcenter
             placeholder=(t "nodeDriver.vmwarevsphere.vcenter.placeholder")
           }}

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

@@ -1,5 +1,7 @@
 import { alias } from '@ember/object/computed';
-import { get, set, computed, observer } from '@ember/object';
+import {
+  get, set, setProperties, computed, observer
+} from '@ember/object';
 import Component from '@ember/component';
 import NodeDriver from 'shared/mixins/node-driver';
 import layout from './template';
@@ -173,6 +175,9 @@ export default Component.extend(NodeDriver, {
       const clearKey = value ? 'config.datastore' : 'config.datastoreCluster';
 
       set(this, clearKey, '');
+    },
+    updateCloudConfig(value) {
+      set(this, 'config.cloudConfig', value);
     }
   },
 
@@ -350,6 +355,7 @@ export default Component.extend(NodeDriver, {
       tag:                    [],
       customAttribute:        [],
       cfgparam:               ['disk.enableUUID=TRUE'],
+      cloudConfig:            '#cloud-config\n\n',
       boot2dockerUrl:         iso,
       datacenter:             null,
       vappIpprotocol:         initialVAppOptions.vappIpprotocol,
@@ -450,11 +456,17 @@ export default Component.extend(NodeDriver, {
 
     set(this, 'config.customAttribute', configCustomAttribute);
 
-    const clearKey = get(this, 'config.useDataStoreCluster')
+    const datastoreClearKey = get(this, 'config.useDataStoreCluster')
       ? 'config.datastore'
       : 'config.datastoreCluster';
+    const cloudClearKey = get(this, 'showRancherOsIso')
+      ? 'config.cloudConfig'
+      : 'config.cloudinit';
 
-    set(this, clearKey, '');
+    setProperties(this,  {
+      [datastoreClearKey]: '',
+      [cloudClearKey]:     ''
+    });
 
     const vappMode = get(this, 'vappMode')
 

lib/nodes/addon/components/driver-vmwarevsphere/template.hbs

@@ -234,7 +234,7 @@
       {{#if showContentLibrary}}
           <div class="col span-4">
               <label class="acc-label">
-                Content library:
+                {{t "nodeDriver.vmwarevsphere.contentLibrary"}}
               </label>
               <NewSelect
                 @useContentForDefaultValue={{true}}
@@ -244,7 +244,7 @@
           </div>
           <div class="col span-4">
             <label class="acc-label">
-              Library template:
+              {{t "nodeDriver.vmwarevsphere.libraryTemplate"}}
             </label>
             <SearchableSelect
               @content={{libraryTemplateContent}}
@@ -255,7 +255,7 @@
       {{#if showVirtualMachine}}
             <div class="col span-6">
               <label class="acc-label">
-                Virtual machine:
+                {{t "nodeDriver.vmwarevsphere.virtualMachine"}}
               </label>
               <SearchableSelect
                 @content={{virtualMachineContent}}
@@ -266,7 +266,7 @@
       {{#if showTemplate}}
           <div class="col span-6">
             <label class="acc-label">
-              Template:
+              {{t "nodeDriver.vmwarevsphere.template"}}
             </label>
             <SearchableSelect
               @content={{templateContent}}
@@ -278,17 +278,33 @@
 
     <div class="row">
       <div class="col span-12">
-        <label class="acc-label">
+        {{#if showRancherOsIso }}
-          {{t "nodeDriver.vmwarevsphere.cloudinit.label"}}
+          <label class="acc-label">
-        </label>
+            {{t "nodeDriver.vmwarevsphere.cloudinit.label"}}
-        {{textarea-autogrow
+          </label>
-          value=config.cloudConfig
+          {{input
-          classNames="form-control no-resize"
+            type="text"
-          placeholder="nodeDriver.vmwarevsphere.cloudinit.placeholder"
+            value=config.cloudinit 
-        }}
+            classNames="form-control"
-        <p class="help-block">
+            placeholder=(t "nodeDriver.vmwarevsphere.cloudinit.placeholder")
-          {{t "nodeDriver.vmwarevsphere.cloudinit.help"}}
+          }}
-        </p>
+          <p class="help-block">
+            {{t "nodeDriver.vmwarevsphere.cloudinit.help"}}
+          </p>
+        {{else}}
+          <label class="acc-label">
+            {{t "nodeDriver.vmwarevsphere.cloudconfig.label"}}
+          </label>
+          {{input-yaml
+            showDownload=false
+            showUpload=false
+            canChangeName=false
+            gutters=(array)
+            minHeight=500
+            value=config.cloudConfig
+            valueUpdated=(action "updateCloudConfig")
+          }}
+        {{/if}}
       </div>
     </div>
 

lib/shared/addon/components/input-yaml/component.js

@@ -38,9 +38,10 @@ export default Component.extend(ThrottledResize, {
   showUpload:       true,
   showDownload:     true,
   showCopy:         false,
-
   shouldChangeName: true,
 
+  _isEditorVisible:  false,
+
   init() {
     this._super(...arguments);
 
@@ -48,6 +49,17 @@ export default Component.extend(ThrottledResize, {
     window.jsyaml || (window.jsyaml = jsyaml);
   },
 
+  didRender() {
+    this._super(...arguments);
+    // We're using _isEditorVisible to trigger a refresh in the ivy-codemirror as
+    // suggested by https://github.com/IvyApp/ivy-codemirror/issues/2. We do this
+    // trigger inside of render to ensure the component is already rendered even
+    // after 'loading' has changed.
+    next(() => {
+      set(this, '_isEditorVisible', !get(this, 'loading'));
+    });
+  },
+
   actions: {
     click() {
       $('INPUT[type=file]')[0].click();

lib/shared/addon/components/input-yaml/template.hbs

@@ -24,7 +24,7 @@
     </div>
     <h1>{{title}}</h1>
   </section>
-{{else}}
+{{else if (or showCopy showUpload showDownload)}}
   <div class="text-right mb-20">
     {{#if showCopy}}
       {{copy-to-clipboard
@@ -62,6 +62,7 @@
         placeholder=placeholder
         value=value
         valueUpdated=(if valueUpdated valueUpdated (action (mut value)) )
+        isVisible=_isEditorVisible
         options=(hash
           autofocus=true
           theme="monokai"

translations/en-us.yaml

@@ -8357,6 +8357,12 @@ nodeDriver:
     hostOptions:
       any:
         label: 'Any'
+    cloudconfig:
+      label: Cloud Config YAML
+    contentLibrary: 'Content library:'
+    libraryTemplate: 'Library template:'
+    virtualMachine: 'Virtual machine:'
+    template: 'Template:'
     creationType:
       label: Creation method
       library: "Deploy from template: Content Library"
@@ -8386,7 +8392,7 @@ nodeDriver:
       detail: Choose OVF environment properties
     vcenter:
       label: vCenter or ESXi Server
-      placeholder: vCenter or ESXi hostname/IP
+      placeholder: vcenter.domain.com
     vcenterPort:
       label: Port
     username: