Updating wizard with better layout, better saved state restore, bette…

…r time handling, etc. Addresses #666
sandialabs · Nov 16, 2016 · 54fbedf · 54fbedf
1 parent df4dbe0
commit 54fbedf
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/web-server/css/slycat.css b/web-server/css/slycat.css
@@ -583,3 +583,8 @@ input,
   word-break: break-word;
   word-wrap: break-word;
 }
+.bottom-margin,
+label.bottom-margin 
+{
+  margin-bottom: 20px;
+}
diff --git a/web-server/js/slycat-remote-interface.js b/web-server/js/slycat-remote-interface.js
@@ -74,7 +74,7 @@ define('slycat-remote-interface', ['knockout', 'knockout-mapping', 'slycat-serve
             var nodes = parseInt(result.nodes);
             var tasks = parseInt(result.tasks);
             var size = parseInt(result.size);
-            if(nodes == vm.nnodes() && tasks == vm.ntasks_per_node() && size == vm.job_size())
+            if(nodes == vm.nnodes() && tasks == vm.ntasks_per_node() && size == vm.job_size() && vm.time_recommended())
             {
               var total_seconds = parseInt(result['time-seconds']);
               var hours = Math.floor(total_seconds / 3600);
@@ -109,7 +109,7 @@ define('slycat-remote-interface', ['knockout', 'knockout-mapping', 'slycat-serve
 
       // Set initial job time
       (function() {
-        vm.set_job_time();
+        vm.conditionally_set_job_time();
       })();
 
       vm.connect = function() {

diff --git a/web-server/plugins/slycat-timeseries-model/wizard-ui.html b/web-server/plugins/slycat-timeseries-model/wizard-ui.html
@@ -40,60 +40,61 @@ <h3 class="modal-title">New Timeseries Model</h3>
       </div>
 
       <div class="form-group" style="margin-top: 40px;">
-        <label for="timeseries-type-radios">Where is your data located?</label>
+        <label class="bottom-margin">Where is your data located?</label>
         <form class="form-horizontal" role="form">
           <slycat-remote-controls params="hostname:remote.hostname,username:remote.username,password:remote.password,status:remote.status,status_type:remote.status_type,enable:remote.enable,focus:remote.focus,activate:connect,session_exists:remote.session_exists"></slycat-remote-controls>
         </form>
       </div>
     </div>
 
     <div data-bind="visible:tab() == 2" style="height: 400px">
+      <label class="bottom-margin">Please select your input file</label>
       <slycat-remote-browser params="type:'remote',sid:remote.sid,hostname:remote.hostname,selection:browser.selection,path:browser.path,open_file_callback:select_input_file,session_exists:remote.session_exists"></slycat-remote-browser>
     </div>
 
     <div data-bind="visible:tab() == 4" class="form-horizontal">
       <div id="form-id-column-name" class="form-group">
-        <label class="col-sm-4">ID Column Name</label>
+        <label class="col-sm-4 control-label">ID Column Name</label>
         <div class="col-sm-8">
           <input class="form-control" type="text" data-bind="value: id_column">
         </div>
       </div>
       <!-- ko if: timeseries_type() == 'csv' -->
         <div id="form-inputs-file-delimiter" class="form-group">
-          <label class="col-sm-4">Inputs File Delimiter</label>
+          <label class="col-sm-4 control-label">Inputs File Delimiter</label>
           <div class="col-sm-8">
             <input class="form-control" type="text" data-bind="value: inputs_file_delimiter">
           </div>
         </div>
       <!-- /ko -->
       <!-- ko if: timeseries_type() == 'csv' -->
         <div id="form-timeseries-name" class="form-group">
-          <label class="col-sm-4">Timeseries Name</label>
+          <label class="col-sm-4 control-label">Timeseries Name</label>
           <div class="col-sm-8">
             <input class="form-control" type="text" data-bind="value: timeseries_name">
           </div>
         </div>
       <!-- /ko -->
     	<div id="form-cluster-sample-count" class="form-group">
-        <label class="col-sm-4">Cluster Sample Count</label>
+        <label class="col-sm-4 control-label">Cluster Sample Count</label>
         <div class="col-sm-8">
           <input class="form-control" type="number" data-bind="value: cluster_sample_count">
         </div>
       </div>
     	<div class="form-group">
-        <label class="col-sm-4">Cluster Sample Type</label>
+        <label class="col-sm-4 control-label">Cluster Sample Type</label>
         <div class="col-sm-8">
           <select id="timeseries-wizard-cluster-sample-type" class="form-control" data-bind="options: cluster_sample_type"></select>
         </div>
       </div>
     	<div class="form-group">
-        <label class="col-sm-4">Cluster Type</label>
+        <label class="col-sm-4 control-label">Cluster Type</label>
         <div class="col-sm-8">
           <select id="timeseries-wizard-cluster-type" class="form-control" data-bind="options: cluster_type"></select>
         </div>
       </div>
     	<div class="form-group">
-        <label class="col-sm-4">Cluster Metric</label>
+        <label class="col-sm-4 control-label">Cluster Metric</label>
         <div class="col-sm-8">
           <select id="timeseries-wizard-cluster-metric" class="form-control" data-bind="options: cluster_metric"></select>
         </div>

diff --git a/web-server/plugins/slycat-timeseries-model/wizard-ui.js b/web-server/plugins/slycat-timeseries-model/wizard-ui.js
@@ -38,7 +38,7 @@ define(['slycat-server-root', 'slycat-web-client', 'slycat-dialog', 'slycat-mark
 
     var updateUserConfig = function() {
       component.user_config['timeseries-wizard'] = component.user_config['timeseries-wizard'] || {};
-      component.user_config['timeseries-wizard']['persistent-output'] = component.output_directory();
+      // component.user_config['timeseries-wizard']['persistent-output'] = component.output_directory();
       component.user_config['timeseries-wizard']['id-column'] = component.id_column();
       component.user_config['timeseries-wizard']['inputs-file-delimiter'] = component.inputs_file_delimiter();
       component.user_config['timeseries-wizard']['timeseries-name'] = component.timeseries_name();
@@ -95,7 +95,7 @@ define(['slycat-server-root', 'slycat-web-client', 'slycat-dialog', 'slycat-mark
               }
 
               if (response.config['timeseries-wizard']) {
-                response.config['timeseries-wizard']['persistent-output'] ? component.output_directory(response.config['timeseries-wizard']['persistent-output']) : null;
+                // response.config['timeseries-wizard']['persistent-output'] ? component.output_directory(response.config['timeseries-wizard']['persistent-output']) : null;
                 response.config['timeseries-wizard']['timeseries-name'] ? component.timeseries_name(response.config['timeseries-wizard']['timeseries-name']) : null;
                 response.config['timeseries-wizard']['id-column'] ? component.id_column(response.config['timeseries-wizard']['id-column']) : null;
                 response.config['timeseries-wizard']['inputs-file-delimiter'] ? component.inputs_file_delimiter(response.config['timeseries-wizard']['inputs-file-delimiter']) : null;
@@ -109,9 +109,15 @@ define(['slycat-server-root', 'slycat-web-client', 'slycat-dialog', 'slycat-mark
                 response.config.slurm.nnodes ? vm.nnodes(response.config.slurm.nnodes) : null;
                 response.config.slurm['ntasks-per-node'] ? vm.ntasks_per_node(response.config.slurm['ntasks-per-node']) : null;
 
-                // response.config.slurm['time-hours'] ? component.time_hours(response.config.slurm['time-hours']) : null;
-                // response.config.slurm['time-minutes'] ? component.time_minutes(response.config.slurm['time-minutes']) : null;
-                // response.config.slurm['time-seconds'] ? component.time_seconds(response.config.slurm['time-seconds']) : null;
+                // Restore state of time controls if user unchecked "Use recommended values" checkbox last
+                var time_recommended = !(response.config.slurm['time_recommended'] == 'False');
+                if(!time_recommended)
+                {
+                  vm.time_recommended(time_recommended);
+                  response.config.slurm['time-hours'] ? vm.time_hours(response.config.slurm['time-hours']) : null;
+                  response.config.slurm['time-minutes'] ? vm.time_minutes(response.config.slurm['time-minutes']) : null;
+                  response.config.slurm['time-seconds'] ? vm.time_seconds(response.config.slurm['time-seconds']) : null;
+                }
               }
 
               component.user_config = response.config;
@@ -139,7 +145,7 @@ define(['slycat-server-root', 'slycat-web-client', 'slycat-dialog', 'slycat-mark
                   }
 
                   if (response.config['timeseries-wizard']) {
-                    response.config['timeseries-wizard']['persistent-output'] ? component.output_directory(response.config['timeseries-wizard']['persistent-output']) : null;
+                    // response.config['timeseries-wizard']['persistent-output'] ? component.output_directory(response.config['timeseries-wizard']['persistent-output']) : null;
                     response.config['timeseries-wizard']['timeseries-name'] ? component.timeseries_name(response.config['timeseries-wizard']['timeseries-name']) : null;
                     response.config['timeseries-wizard']['id-column'] ? component.id_column(response.config['timeseries-wizard']['id-column']) : null;
                     response.config['timeseries-wizard']['inputs-file-delimiter'] ? component.inputs_file_delimiter(response.config['timeseries-wizard']['inputs-file-delimiter']) : null;
@@ -153,9 +159,15 @@ define(['slycat-server-root', 'slycat-web-client', 'slycat-dialog', 'slycat-mark
                     response.config.slurm.nnodes ? vm.nnodes(response.config.slurm.nnodes) : null;
                     response.config.slurm['ntasks-per-node'] ? vm.ntasks_per_node(response.config.slurm['ntasks-per-node']) : null;
 
-                    // response.config.slurm['time-hours'] ? component.time_hours(response.config.slurm['time-hours']) : null;
-                    // response.config.slurm['time-minutes'] ? component.time_minutes(response.config.slurm['time-minutes']) : null;
-                    // response.config.slurm['time-seconds'] ? component.time_seconds(response.config.slurm['time-seconds']) : null;
+                    // Restore state of time controls if user unchecked "Use recommended values" checkbox last
+                    var time_recommended = !(response.config.slurm['time_recommended'] == 'False');
+                    if(!time_recommended)
+                    {
+                      vm.time_recommended(time_recommended);
+                      response.config.slurm['time-hours'] ? vm.time_hours(response.config.slurm['time-hours']) : null;
+                      response.config.slurm['time-minutes'] ? vm.time_minutes(response.config.slurm['time-minutes']) : null;
+                      response.config.slurm['time-seconds'] ? vm.time_seconds(response.config.slurm['time-seconds']) : null;
+                    }
                   }
 
                   component.user_config = response.config;
@@ -295,22 +307,27 @@ define(['slycat-server-root', 'slycat-web-client', 'slycat-dialog', 'slycat-mark
 
     component.compute = function() {
       var vm = ko.dataFor($('.slycat-remote-interface')[0]);
-      vm.submit_job();
-
+
       component.user_config['slurm'] = component.user_config['slurm'] || {};
       component.user_config['slurm']['wcid'] = vm.wckey();
       component.user_config['slurm']['partition'] = vm.partition();
       component.user_config['slurm']['workdir'] = vm.workdir();
-      // component.user_config['slurm']['time-hours'] = vm.time_hours();
-      // component.user_config['slurm']['time-minutes'] = vm.time_minutes();
-      // component.user_config['slurm']['time-seconds'] = vm.time_seconds();
+      component.user_config['slurm']['time-hours'] = vm.time_hours();
+      component.user_config['slurm']['time-minutes'] = vm.time_minutes();
+      component.user_config['slurm']['time-seconds'] = vm.time_seconds();
       component.user_config['slurm']['nnodes'] = vm.nnodes();
       component.user_config['slurm']['ntasks-per-node'] = vm.ntasks_per_node();
+      component.user_config['slurm']['time_recommended'] = vm.time_recommended();
+
+      updateUserConfig();
+
+      vm.submit_job();
+
     };
 
     // A callback that is fired on submit?
     component.to_compute_next_step = function() {
-      updateUserConfig();
+      // updateUserConfig();
       component.tab(6);
     };