From 5a138fe0664509e8ee4079084adfe2af908f8d1a Mon Sep 17 00:00:00 2001
From: Timur Sufiev <tsufiev@mirantis.com>
Date: Tue, 3 Mar 2015 17:21:27 +0300
Subject: [PATCH] Remove hard-coded sample Workflow panel

Among other things are:
* finally port yaqllist field to new models
* support YAML dynamic updates

Change-Id: I109e2d4ae50ebf5cf60dd838ec074740d64360a9
---
 .../static/mistral/js/mistral.directives.js   |  36 ---
 .../js/mistral.workbook.controllers.js        |   2 +-
 .../mistral/js/mistral.workbook.models.js     |  37 +++-
 .../mistral/templates/fields/yaqllist.html    |  27 ++-
 .../templates/yaql-field-combined.html        |  16 --
 .../mistral/templates/mistral/create.html     | 208 +-----------------
 .../static/merlin/js/merlin.panel.models.js   |   1 -
 7 files changed, 55 insertions(+), 272 deletions(-)
 delete mode 100644 extensions/mistral/static/mistral/js/mistral.directives.js
 delete mode 100644 extensions/mistral/static/mistral/templates/yaql-field-combined.html

diff --git a/extensions/mistral/static/mistral/js/mistral.directives.js b/extensions/mistral/static/mistral/js/mistral.directives.js
deleted file mode 100644
index 432ca10..0000000
--- a/extensions/mistral/static/mistral/js/mistral.directives.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Created by tsufiev on 12/29/14.
- */
-
-(function() {
-  angular.module('hz')
-
-    .directive('yaqlFieldCombined', function() {
-      return {
-        restrict: 'E',
-        templateUrl: '/static/mistral/templates/yaql-field-combined.html',
-        scope: {
-          yaqlExpression: '@',
-          value: '@'
-        },
-        link: function(scope, element) {
-          angular.element(element).find('span.yaql-condition')
-            .on('click', function() {
-              var $elt = $(this),
-                $inputColumn = $elt.closest('.three-columns').children(':first-child'),
-                $input;
-
-              $elt.hide();
-              $input = $inputColumn.show().find('textarea');
-              $input.focus().on('blur', function() {
-                $inputColumn.hide();
-                $elt.toggleClass('fa-lock', $input.val() !== '');
-                $elt.toggleClass('fa-unlock', $input.val() === '');
-                $elt.show();
-              });
-            });
-        }
-      }
-    })
-
-})();
diff --git a/extensions/mistral/static/mistral/js/mistral.workbook.controllers.js b/extensions/mistral/static/mistral/js/mistral.workbook.controllers.js
index f26387e..194c871 100644
--- a/extensions/mistral/static/mistral/js/mistral.workbook.controllers.js
+++ b/extensions/mistral/static/mistral/js/mistral.workbook.controllers.js
@@ -6,7 +6,7 @@
 
     .controller('workbookCtrl',
     ['$scope', 'mistral.workbook.models', function($scope, models) {
-      var workbook = models.Workbook.create();
+      var workbook = models.Workbook.create({name: 'My Workbook'});
       $scope.workbook = workbook;
 
       function getNextIDSuffix(container, regexp) {
diff --git a/extensions/mistral/static/mistral/js/mistral.workbook.models.js b/extensions/mistral/static/mistral/js/mistral.workbook.models.js
index dad238d..8d2b810 100644
--- a/extensions/mistral/static/mistral/js/mistral.workbook.models.js
+++ b/extensions/mistral/static/mistral/js/mistral.workbook.models.js
@@ -78,6 +78,25 @@
         }
       });
 
+      models.yaqllist = fields.list.extend({
+        create: function(json, parameters) {
+          var self = fields.list.create.call(this, json, parameters);
+          self.setType('yaqllist');
+          return self;
+        }
+      }, {
+        '*': {
+          '@class': fields.frozendict.extend({}, {
+            'yaql': {
+              '@class': fields.string
+            },
+            'action': {
+              '@class': fields.string
+            }
+          })
+        }
+      });
+
       models.Action =  fields.frozendict.extend({}, {
         'name': {
           '@class': fields.string.extend({}, {
@@ -326,35 +345,26 @@
               'additive': false
             },
             'onError': {
-              '@class': fields.list.extend({}, {
+              '@class': models.yaqllist.extend({}, {
                 '@meta': {
                   'title': 'On error',
                   'index': 0
-                },
-                '*': {
-                  '@class': fields.string
                 }
               })
             },
             'onSuccess': {
-              '@class': fields.list.extend({}, {
+              '@class': models.yaqllist.extend({}, {
                 '@meta': {
                   'title': 'On success',
                   'index': 1
-                },
-                '*': {
-                  '@class': fields.string
                 }
               })
             },
             'onComplete': {
-              '@class': fields.list.extend({}, {
+              '@class': models.yaqllist.extend({}, {
                 '@meta': {
                   'title': 'On complete',
                   'index': 2
-                },
-                '*': {
-                  '@class': fields.string
                 }
               })
             }
@@ -378,6 +388,9 @@
         create: function(json, parameters) {
           var self = fields.frozendict.create.call(this, json, parameters);
           return panel.panelmixin.call(self);
+        },
+        toYAML: function() {
+          return jsyaml.dump(this.toJSON());
         }
       }, {
         'version': {
diff --git a/extensions/mistral/static/mistral/templates/fields/yaqllist.html b/extensions/mistral/static/mistral/templates/fields/yaqllist.html
index 89a81f1..1323426 100644
--- a/extensions/mistral/static/mistral/templates/fields/yaqllist.html
+++ b/extensions/mistral/static/mistral/templates/fields/yaqllist.html
@@ -1,16 +1,29 @@
-<collapsible-group title="{$ spec.title || makeTitle(spec.name) $}" on-add="add(item[spec.name], '')">
-  <div class="three-columns">
-    <div class="left-column" style="display:none">
+<collapsible-group title="{$ title $}" on-add="value.add()">
+  <div class="three-columns"
+       ng-repeat="subItem in value.getValues() track by $index">
+    <pre>{$ subItem $}</pre>
+    <div class="left-column" ng-show="subItem.showYaql">
       <div class="form-group">
-        <textarea class="form-control">{$ yaqlExpresion $}</textarea>
+        <textarea class="form-control" ng-model="subItem.get('yaql').value"
+                  ng-model-options="{getterSetter: true}"></textarea>
       </div>
     </div>
     <div class="right-column">
       <div class="form-group">
         <div class="input-group">
-          <span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
-          <input type="text" class="form-control" value="{$ value $}">
-          <span class="input-group-addon fa fa-minus-circle"></span>
+          <span class="input-group-btn">
+            <button class="btn btn-default" ng-click="subItem.showYaql = !subItem.showYaql;">
+              <i class="fa"
+                 ng-class="{'fa-lock': subItem.get('yaql').value(), 'fa-unlock': !subItem.get('yaql').value()}"></i>
+            </button>
+          </span>
+          <input type="text" class="form-control" ng-model="subItem.get('action').value"
+                 ng-model-options="{getterSetter: true}">
+          <span class="input-group-btn">
+            <button class="btn btn-default" ng-click="value.remove($index)">
+              <i class="fa fa-minus-circle"></i>
+            </button>
+          </span>
         </div>
       </div>
     </div>
diff --git a/extensions/mistral/static/mistral/templates/yaql-field-combined.html b/extensions/mistral/static/mistral/templates/yaql-field-combined.html
deleted file mode 100644
index f82e7ee..0000000
--- a/extensions/mistral/static/mistral/templates/yaql-field-combined.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="three-columns">
-  <div class="left-column" style="display:none">
-    <div class="form-group">
-      <textarea class="form-control">{$ yaqlExpresion $}</textarea>
-    </div>
-  </div>
-  <div class="right-column">
-    <div class="form-group">
-      <div class="input-group">
-        <span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
-        <input type="text" class="form-control" value="{$ value $}">
-        <span class="input-group-addon fa fa-minus-circle"></span>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/extensions/mistral/templates/mistral/create.html b/extensions/mistral/templates/mistral/create.html
index 01b1988..03ea6c9 100644
--- a/extensions/mistral/templates/mistral/create.html
+++ b/extensions/mistral/templates/mistral/create.html
@@ -12,13 +12,13 @@
 {% block js %}
 {% include "horizon/_scripts.html" %}
 <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/lib/barricade.js"></script>
+<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/lib/js-yaml.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.directives.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.field.models.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.init.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.panel.models.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.utils.js"></script>
 
-<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.directives.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.init.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.workbook.controllers.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.workbook.models.js"></script>
@@ -60,204 +60,6 @@
       <!-- Data panel start -->
       <div class="two-panels">
         <div class="left-panel">
-          <!-- panel with workflow -->
-          <div>
-            <panel title="Workflow1" removable="true">
-              <!-- 2 simple inputs in a single row -->
-              <div class="three-columns">
-                <div class="left-column">
-                  <div class="form-group">
-                    <label for="workflow1Name">Name</label>
-                    <input type="text" class="form-control" id="workflow1Name" placeholder="Workflow1">
-                  </div>
-                </div>
-                <div class="right-column">
-                  <div class="form-group">
-                    <label for="workflow1Type">Base</label>
-                    <select class="form-control" id="workflow1Type">
-                      <option selected>Direct</option>
-                      <option>Reverse</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-              <!-- collapsible keys list section -->
-              <collapsible-group title="Input" additive="true">
-                <div class="three-columns">
-                  <div class="left-column">
-                    <div class="form-group">
-                      <div class="input-group">
-                        <input type="text" class="form-control">
-                        <i class="fa fa-minus-circle input-group-addon"></i>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </collapsible-group>
-              <!-- collapsible section with variable type = string|list|dictionary -->
-              <collapsible-group title="Output" additive="true">
-                <!-- string input type -->
-                <div class="three-columns">
-                  <div class="left-column">
-                    <div class="form-group">
-                      <label for="collapseFourOuputF11">Key Type</label>
-                      <select id="collapseFourOuputF11" class="form-control">
-                        <option selected disabled>String</option>
-                        <option disabled>List</option>
-                        <option disabled>Dictionary</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div class="right-column">
-                    <div class="form-group">
-                      <label>&nbsp;</label>
-                      <input type="text" class="form-control">
-                    </div>
-                  </div>
-                </div>
-              </collapsible-group>
-              <collapsible-group title="Task Defaults" additive="false">
-                <collapsible-group title="On error" additive="true">
-                  <yaql-field-combined></yaql-field-combined>
-                  <yaql-field-combined></yaql-field-combined>
-                </collapsible-group>
-                <collapsible-group title="On success" additive="true">
-                  <yaql-field-combined></yaql-field-combined>
-                </collapsible-group>
-                <collapsible-group title="On complete" additive="true">
-                  <yaql-field-combined></yaql-field-combined>
-                  <yaql-field-combined></yaql-field-combined>
-                </collapsible-group>
-              </collapsible-group>
-              <collapsible-group title="Tasks" additive="true">
-                <collapsible-group title="TaskAutoName1" removable="true">
-                  <div class="three-columns">
-                    <div class="left-column">
-                      <div class="form-group">
-                        <label for="collapseFourOuputF12">Name</label>
-                        <input type="text" id="collapseFourOuputF12" class="form-control" value="TaskAutoName1">
-                      </div>
-                    </div>
-                    <div class="right-column">
-                      <div class="form-group">
-                        <label for="collapseFourOuputF13">Type</label>
-                        <select id="collapseFourOuputF13" class="form-control">
-                          <option selected disabled>Action-based</option>
-                          <option disabled>Workflow-based</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="three-columns">
-                    <div class="left-column">
-                      <div class="form-group">
-                        <label for="collapseFourOuputF14">Action</label>
-                        <select id="collapseFourOuputF14" class="form-control">
-                          <option selected disabled>Action1</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <collapsible-group title="Input" additive="true">
-                    <div class="three-columns">
-                      <div class="left-column">
-                        <div class="form-group">
-                          <label for="collapseFourOuputF15">
-                            <editable value="Key1" label="New Name"></editable>
-                          </label>
-                          <div class="input-group" id="collapseFourOuputF15">
-                            <input type="text" class="form-control">
-                            <i class="fa fa-minus-circle input-group-addon"></i>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </collapsible-group>
-                  <collapsible-group title="Publish" additive="true">
-                    <div class="three-columns">
-                      <div class="left-column">
-                        <div class="form-group">
-                          <label for="collapseFourOuputF16">
-                            <editable value="Key1" label="New Name"></editable>
-                          </label>
-                          <div class="input-group" id="collapseFourOuputF16">
-                            <input type="text" class="form-control">
-                            <i class="fa fa-minus-circle input-group-addon"></i>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </collapsible-group>
-                  <collapsible-group title="On error" additive="true">
-                    <yaql-field-combined></yaql-field-combined>
-                  </collapsible-group>
-                  <collapsible-group title="On success" additive="true">
-                    <yaql-field-combined></yaql-field-combined>
-                  </collapsible-group>
-                  <collapsible-group title="On complete" additive="true">
-                    <yaql-field-combined></yaql-field-combined>
-                  </collapsible-group>
-                  <collapsible-group title="Policies">
-                    <div class="two-columns">
-                      <div class="left-column">
-                        <div class="form-group">
-                          <label for="waitBefore">Wait before</label>
-                          <input type="number" class="form-control" id="waitBefore">
-                        </div>
-                      </div>
-                      <div class="right-column">
-                        <div class="form-group">
-                          <label for="waitAfter">Wait after</label>
-                          <input type="number" class="form-control" id="waitAfter">
-                        </div>
-                      </div>
-                    </div>
-                    <div class="two-columns">
-                      <div class="left-column">
-                        <div class="form-group">
-                          <label for="timeout">Timeout</label>
-                          <input type="number" class="form-control" id="timeout">
-                        </div>
-                      </div>
-                    </div>
-                    <div class="two-columns">
-                      <div class="left-column">
-                        <div class="form-group">
-                          <label for="retryCount">Retry count</label>
-                          <input type="number" class="form-control" id="retryCount">
-                        </div>
-                      </div>
-                      <div class="right-column">
-                        <div class="form-group">
-                          <label for="retryDelay">Retry delay</label>
-                          <input type="number" class="form-control" id="retryDelay">
-                        </div>
-                      </div>
-                    </div>
-                    <div class="two-columns">
-                      <div class="left-column">
-                        <div class="form-group">
-                          <label for="retryBreakOn">Retry break on</label>
-                          <input type="text" class="form-control" id="retryBreakOn">
-                        </div>
-                      </div>
-                    </div>
-                  </collapsible-group>
-                </collapsible-group>
-              </collapsible-group>
-            </panel>
-          </div>
-        </div>
-        <!-- YAML Panel -->
-        <div class="right-panel">
-          <div class="panel panel-default">
-            <div class="panel-body">
-                  <pre>
-version: 2
-name: Workbook1
-description:                  </pre>
-            </div>
-          </div>
           <panel ng-repeat="panel in workbook.getPanels() track by panel.id"
                  title="{$ panel.getTitle() $}" removable="{$ panel.removable $}"
                  on-remove="panel.remove(panel.id)">
@@ -272,6 +74,14 @@ description:                  </pre>
             </div>
           </panel>
         </div>
+        <!-- YAML Panel -->
+        <div class="right-panel">
+          <div class="panel panel-default">
+            <div class="panel-body">
+              <pre>{$ workbook.toYAML() $}</pre>
+            </div>
+          </div>
+        </div>
       </div>
       <!-- page footer -->
       <div class="two-panels">
diff --git a/merlin/static/merlin/js/merlin.panel.models.js b/merlin/static/merlin/js/merlin.panel.models.js
index 8c73aad..1ce06fc 100644
--- a/merlin/static/merlin/js/merlin.panel.models.js
+++ b/merlin/static/merlin/js/merlin.panel.models.js
@@ -116,7 +116,6 @@
           return rows;
         };
         self.on('change', function(op) {
-          console.log(arguments);
           if ( op == 'add' ) {
             var items = self._getContents();
             utils.groupByMetaKey(items, 'row').forEach(function(items) {