291 lines
13 KiB
HTML
291 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load url from future %}
|
|
{% load static %}
|
|
{% load compress %}
|
|
{% block title %}{% trans "Create Workbook" %}{% endblock %}
|
|
|
|
{% block page_header %}
|
|
{% include "horizon/common/_page_header.html" with title=_("Workbooks") %}
|
|
{% endblock page_header %}
|
|
|
|
{% block js %}
|
|
{% include "horizon/_scripts.html" %}
|
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/services.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/directives.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/controllers.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
{% include "_stylesheets.html" %}
|
|
{% compress css %}
|
|
<link rel="stylesheet" href="{{ STATIC_URL }}mistral/css/mistral.css">
|
|
<link href='{{ STATIC_URL }}mistral/css/mistral.scss' type='text/scss' media='screen' rel='stylesheet' />
|
|
{% endcompress %}
|
|
{% block merlin-css %}{% endblock %}
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<h3>Create Workbook</h3>
|
|
<div id="create-workbook" class="fluid-container" ng-controller="workbookCtrl">
|
|
<div class="well">
|
|
<div class="two-panels">
|
|
<div class="left-panel">
|
|
<div class="pull-left">
|
|
<h4><strong>Workbook1</strong></h4>
|
|
</div>
|
|
<div class="pull-right">
|
|
<div class="table-actions clearfix">
|
|
<button ng-click="add('actions')" class="btn btn-default btn-sm"><span class="fa fa-plus">Add Action</span></button>
|
|
<button class="btn btn-default btn-sm"><span class="fa fa-plus">Add Workflow</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="btn-group btn-toggle pull-right">
|
|
<button class="btn btn-sm btn-default">Graph</button>
|
|
<button class="btn btn-sm btn-primary active">YAML</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Data panel start -->
|
|
<div class="two-panels">
|
|
<div class="left-panel">
|
|
<div ng-repeat="panelSpec in schema | prepareSchema | groupBy: 'panelIndex' | toArray:true | orderBy: '$key' | normalizePanels track by panelSpec.$key">
|
|
<panel ng-if="panelSpec.multiple" ng-repeat="item in data[panelSpec.name] track by item.id" title="{$ item.name $}" on-remove="remove('{$ panelSpec.name $}', item)">
|
|
<div ng-repeat="specs in panelSpec | groupBy: 'row' | toArray: true | orderBy: '$key' track by specs.$key">
|
|
<div ng-class="{'three-columns': specs[0].row !== undefined }">
|
|
<div ng-repeat="spec in specs track by spec.name"
|
|
ng-class="{'right-column': $even && isAtomic(spec.type), 'left-column': $odd && isAtomic(spec.type)}">
|
|
<typed-field></typed-field>
|
|
<div class="clearfix" ng-show="$even"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</panel>
|
|
<panel ng-if="!panelSpec.multiple">
|
|
<!-- ugly duplication here -->
|
|
<div ng-repeat="specs in panelSpec | groupBy: 'row' | toArray: true | orderBy: '$key' track by specs.$key">
|
|
<div ng-class="{'two-columns': specs[0].row !== undefined }">
|
|
<div ng-repeat="spec in specs track by spec.name"
|
|
ng-class="{'right-column': $even && isAtomic(spec.type), 'left-column': $odd && isAtomic(spec.type)}">
|
|
<typed-field></typed-field>
|
|
<div class="clearfix" ng-show="$even"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</panel>
|
|
</div>
|
|
<!-- panel with workflow -->
|
|
<div ng-controller="workflowsCtrl">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<!-- page footer -->
|
|
<div class="two-panels">
|
|
<div class="full-width">
|
|
<div class="pull-right">
|
|
<button class="btn btn-default cancel">Cancel</button>
|
|
<button class="btn btn-primary">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|