Remove hard-coded sample Workflow panel
Among other things are: * finally port yaqllist field to new models * support YAML dynamic updates Change-Id: I109e2d4ae50ebf5cf60dd838ec074740d64360a9
This commit is contained in:
Timur Sufiev
parent
fc14e3c993
commit
5a138fe066
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})();
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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': {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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> </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">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue