Working version of create target

gui/client/Runs/TargetsView.coffee

@@ -114,3 +114,89 @@ class TargetsUI extends CompositeElement
             t = @targetKnobs?.find("li.current a")
             t = @targetKnobs?.find("li a:first") unless t?.length > 0
             t?.tab("show")
+
+    # DOM objects for creating target
+    $targetForm = $("#target-create-form")
+    $createButton = $targetForm.find("#target-create")
+    $targetName = $targetForm.find("#target-name")
+    $targetEnvTable = $targetForm.find("#target-env-table")
+    $targetRemoteUrl = $targetForm.find("#target-remote-url")
+    $targetSharedPath = $targetForm.find("#target-shared-path")
+    $targetEnvTableAdd = $targetEnvTable.find("#env-pair-add") # buttons to add rows
+
+    # Initialize tooltips
+    $targetRemoteUrl.tooltip()
+    $targetSharedPath.tooltip()
+
+    # Drop-down menu
+    $targetTypeDropdown = $targetForm.find(".dropdown-menu")
+    $targetTypeDropdown.click (e) =>
+        do e.preventDefault
+        do enableButton
+        # add the form
+        $targetEnvTable.parent("div").removeClass("hide")
+
+        # addition form elements depending on target type
+        @newTargetType = $(e.target).text()
+        $targetTypeDropdown.siblings("button").text(@newTargetType)
+        switch @newTargetType
+            when "local"
+                $targetRemoteUrl.parent("div").addClass("hide")
+                $targetRemoteUrl.val("")
+                $targetSharedPath.parent("div").addClass("hide")
+                $targetSharedPath.val("")
+            when "ssh"
+                $targetRemoteUrl.parent("div").removeClass("hide")
+                $targetSharedPath.parent("div").addClass("hide")
+                $targetSharedPath.val("")
+            when "ssh-cluster"
+                $targetRemoteUrl.parent("div").removeClass("hide")
+                $targetSharedPath.parent("div").removeClass("hide")
+
+    enableButton = ->
+        if $targetName.val().length is 0 then $createButton.attr "disabled", "disabled"
+        else $createButton.removeAttr "disabled"
+
+    $targetName.on "keyup", ->
+        do enableButton
+
+    # Create target
+    $createButton.click (e) =>
+        do e.preventDefault
+
+        # get all env values and pairs
+        env = []
+        for pair in $targetForm.find(".env-pair")
+            envName = $(pair).find(".env-name").find("input").val()
+            envVal= $(pair).find(".env-value").find("input").val()
+            env.push envName + "=" + envVal
+        # get remote url value 
+        url = $targetRemoteUrl.val()
+        sharedPath = $targetSharedPath.val()
+
+        # Make API call
+        $.post("#{_3X_.BASE_URL}/api/run/target/#{$targetName.val()}:create",{
+            env: env,
+            type: @newTargetType,
+            url: url,
+            sharedPath: sharedPath
+        })
+        $targetForm.modal("hide")
+
+
+    # Add row in table
+    $targetEnvTableAdd.click (e) ->
+        do e.preventDefault
+        $targetEnvTable
+            .find(".env-pair").first()
+            .clone()
+            .insertBefore($(@).closest("tr"))
+            .find("input")
+            .val("")
+
+        $targetEnvTable
+            .find(".env-pair-remove").on "click", (e) ->
+                do e.preventDefault
+                $rowToRemove = $(@).closest("tr")
+                $rowToRemove.remove() unless $rowToRemove.is(":first-child")
+

gui/client/Runs/body.html

@@ -28,16 +28,15 @@ <h4 class="section-title pull-left"><i class="icon-tasks icon"></i>Queues</h4>
       <section class="clearfix" style="height:30%;">
         <h4 class="section-title pull-left"><i class="icon-flag icon"></i>Targets</h4>
         <div class="section-actions clearfix">
-          <!-- TODO
-            <button class="target-new btn btn-mini"
-              title="Create new target configuration"><i class="icon icon-plus"></i></button>
-            -->
+          <button class="target-new btn btn-mini" data-toggle="modal" data-target="#target-create-form"
+            title="Create new target configuration"><i class="icon icon-plus"></i></button>
         </div>
         <div id="targets" style="max-height:90%; overflow-y:auto;"></div>
       </section>
     </div>
   </div>
 
+
   <div class="span10 run-history-container">
     <h4 class="section-title pull-left"><i
         class="icon-list-ol icon"></i>Execution History of <span id="status-name">N/A</span></h3>
@@ -65,6 +64,7 @@ <h4 class="section-title pull-left"><i
   </div>
 </div>
 
+<!-- Modal form for queue create -->
 <div class="modal fade" id="queue-create-form" tabindex="-1" role="dialog" aria-labelledby="queue-create-form-label" aria-hidden="true">
   <div class="modal-dialog modal-sm">
     <form role="form">
@@ -87,4 +87,74 @@ <h4 class="modal-title" id="queue-create-form-label">New Queue</h4>
     </form>
   </div>
 </div>
+<!-- Modal form for target create -->
+<div class="modal fade" id="target-create-form" tabindex="-1" role="dialog" position=fixed
+  aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title" id="myModalLabel">New Target</h4>
+      </div>
+      <div class="modal-body">
+        <form class="form-horizontal" role="form">
+          <div class="form-group">
+            <label for="target-name" class="control-label">Name</label>
+            <input type="text" class="form-control" id="target-name" placeholder="Enter Name" required>
+    	        <div class="btn-group btn-input clearfix">
+    	          <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
+                    Select type
+    	          </button>
+    	          <ul class="dropdown-menu" role="menu">
+    	            <li><a href="#">local</a></li>
+    	            <li><a href="#">ssh</a></li>
+    	            <li><a href="#">ssh-cluster</a></li>
+                  </ul>
+                </div>
+                <div class="form-group hide">
+                  <label for="#target-remote-url" class="control-label">Remote url</label>
+                  <input type="text" class="form-control" id="target-remote-url" placeholder="Remote url" required
+                    data-toggle="tooltip" data-placement="bottom" 
+                    title="Example:
+                    USER@HOSTNAME:WORKING_DIR or 
+                    ssh://USER@HOSTNAME:PORT/WORKING_DIR">
+                </div>
+                <div class="form-group hide">
+                  <label for="#target-shared-path" class="control-label">Shared path</label>
+                  <input type="text" class="form-control" id="target-shared-path" placeholder="Shared path" required
+                    data-toggle="tooltip" data-placement="bottom" 
+                    title="A shared file system accessible by this path across all machines">
+                </div>
+                <div class="row-fluid hide">
+                  <table class="table table-striped" id="target-env-table" position="relative" >
+                    <thead>
+                      <tr>
+                        <th>Env Variable Name</th>
+                        <th>Value</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr class="env-pair">
+                        <td class="env-name"><input type="text" class="form-control" placeholder="NAME"</td>
+                        <td class="env-value"><input type="text" class="form-control" placeholder="VALUE"</td>
+                        <td class="env-pair-remove"><button class="btn btn-mini" title="Remove row">
+                            <i class="icon icon-minus"></i></button></td></tr>
+                      <tr>
+                        <td></td>
+                        <td style="vertical-align:middle;">
+                          <a href="#" class="btn btn-primary" id="env-pair-add">
+                            <i class="icon icon-plus">Add Row</i></a></td></tr>
+                    </tbody>
+                  </table>
+                </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" id="target-create" disabled=disabled>Create Target</button>
+      </div>
+    </div>
+  </div>
+</div>
 <!-- vim:set sw=2:sts=2:spell -->

gui/client/Runs/style.less

@@ -122,5 +122,18 @@ div.dataTables_scrollBody table.dataTable {
     }
   }
 }
+#target-create-form {
+  overflow: visible;
+  .modal-body{
+    overflow: visible;
+  }
+  .control-label{
+    text-align: left;
+    font-weight: bold;
+  }
+  .tooltip-inner{
+    max-width: 300px;
+  }
+}
 
 // vim:ft=less

gui/server.coffee

@@ -549,16 +549,31 @@ app.post /// /api/run/queue/([^:]+):(target) ///, (req, res) ->
             lazyLines.join -> next (true)
     ) (respondJSON res)
 
-# Attempt to create queue
+# Call to create queue
 app.post /// /api/run/queue/([^:]+):(create) ///, (req, res) ->
     [queueName, action] = req.params
-    #queueName = req.body.name
-    console.log "jens cli called with name: " + queueName
     cliEnv(res, {
         _3X_QUEUE: queueName
     }, "3x-queue", [queueName]
     ) (respondJSON res)
 
+# Call to create target
+app.post /// /api/run/target/([^:]+):(create) ///, (req, res) ->
+    [targetName, action] = req.params
+    envVar = req.body.env
+    targetType = req.body.type
+    url = req.body.url # empty string if targetType is local
+    sharedPath = req.body.sharedPath # empty string if targetType is local or ssh
+    {stdin} =
+    cli(res, "xargs", ["3x-target", targetName, "define", targetType, url, sharedPath]
+        , (lazyLines, next) ->
+            lazyLines.join -> next (true)
+    ) (respondJSON res)
+
+    for pair in envVar
+        stdin.write "#{pair}\n"
+    stdin.end()
+
 app.post /// /api/run/queue/([^:]+):(duplicate|prioritize|postpone|cancel) ///, (req, res) ->
     [queueName, action] = req.params
     # TODO sanitize queueName