Prepare layout snippets for Actions section
Change-Id: I6e8a94ca80300b1553a735004eebb1840977edbd
This commit is contained in:
Timur Sufiev
parent
4801a01b93
commit
eef5d1c4e4
|
|
@ -13,21 +13,18 @@
|
|||
under the License.
|
||||
*/
|
||||
|
||||
.left, .right {
|
||||
padding: 6px;
|
||||
}
|
||||
.left {
|
||||
border: 1px solid black;
|
||||
}
|
||||
/*.left, .right {*/
|
||||
/*padding: 6px;*/
|
||||
/*}*/
|
||||
/*.left {*/
|
||||
/*border: 1px solid black;*/
|
||||
/*}*/
|
||||
.expandable:before {
|
||||
content: '+';
|
||||
}
|
||||
.expandable.expanded:before {
|
||||
content: '-';
|
||||
}
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.container-action {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
|
@ -35,3 +32,91 @@ label {
|
|||
padding-left: 5px;
|
||||
border-left: 1px solid green;
|
||||
}
|
||||
|
||||
div#create-workbook {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.panel-default.merlin-panel > .panel-heading {
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.panel-default.merlin-panel .panel-body {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.panel-heading a:before {
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f0d7";
|
||||
margin-left: -10px;
|
||||
float: left;
|
||||
color: grey;
|
||||
}
|
||||
.panel-heading a.collapsed:before {
|
||||
content:"\f0da";
|
||||
}
|
||||
|
||||
.section .form-group {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.section a {
|
||||
padding-left: 5px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section a[data-toggle="collapse"]:before {
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f147";
|
||||
font-weight: normal;
|
||||
float: left;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.section a[data-toggle="collapse"].collapsed:before {
|
||||
content: "\f196";
|
||||
}
|
||||
|
||||
i.fa-minus-circle.input-group-addon {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.merlin-panel label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.merlin-panel .panel-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popover-content > button {
|
||||
margin: 5px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.popover.right {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.dictionary .add-btn {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.list .add-btn {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.second-column .form-group {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.well .panel-body pre {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ from horizon import tables
|
|||
|
||||
from mistral import api
|
||||
|
||||
|
||||
class CreateWorkbook(tables.LinkAction):
|
||||
name = 'create'
|
||||
verbose_name = _('Create Workbook')
|
||||
|
|
@ -26,6 +27,13 @@ class CreateWorkbook(tables.LinkAction):
|
|||
icon = 'plus'
|
||||
|
||||
|
||||
class CreateWorkbook1(tables.LinkAction):
|
||||
name = 'create1'
|
||||
verbose_name = _('Create Workbook1')
|
||||
url = 'horizon:project:mistral:create1'
|
||||
icon = 'plus'
|
||||
|
||||
|
||||
class EditWorkbook(tables.LinkAction):
|
||||
name = 'edit'
|
||||
verbose_name = _('Edit Workbook')
|
||||
|
|
@ -48,6 +56,6 @@ class WorkbooksTable(tables.DataTable):
|
|||
filters=(defaultfilters.yesno,))
|
||||
|
||||
class Meta:
|
||||
table_actions = (CreateWorkbook, RemoveWorkbook)
|
||||
table_actions = (CreateWorkbook, CreateWorkbook1, RemoveWorkbook)
|
||||
name = 'workbooks'
|
||||
row_actions = (EditWorkbook, RemoveWorkbook)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,302 @@
|
|||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% load url from future %}
|
||||
{% block title %}{% trans "Create Workbook" %}{% endblock %}
|
||||
|
||||
{% block page_header %}
|
||||
{% include "horizon/common/_page_header.html" with title=_("Workbooks") %}
|
||||
{% endblock page_header %}
|
||||
|
||||
{% include "_stylesheets.html" %}
|
||||
|
||||
{% block css %}
|
||||
{% include "_stylesheets.html" %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}mistral/css/mistral.css">
|
||||
{% block merlin-css %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<h3>Create Workbook</h3>
|
||||
<div id="create-workbook" class="fluid-container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-lg-12 col-sm-12">
|
||||
<div class="well">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-6 col-sm-6">
|
||||
<div class="pull-left">
|
||||
<h4><strong>Workbook1</strong></h4>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<div class="table-actions clearfix">
|
||||
<button 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="col-md-6 col-lg-6 col-sm-6">
|
||||
<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="row">
|
||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12 col-lg-12">
|
||||
<!-- root-level parameters -->
|
||||
<div class="panel panel-default merlin-panel" id="panel0">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-target="#collapseZero" href="#">
|
||||
Base Parameters</a></h4>
|
||||
</div>
|
||||
<div id="collapseZero" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||
<div class="form-group">
|
||||
<label for="workbookName">Name</label>
|
||||
<input type="text" class="form-control" id="workbookName" placeholder="Workbook1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||
<div class="form-group">
|
||||
<label for="workbookDesc">Description</label>
|
||||
<textarea class="form-control" id="workbookDesc" placeholder="Type a description here"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action added -->
|
||||
<div class="panel panel-default merlin-panel" id="panel1">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">
|
||||
Action1</a>
|
||||
<i class="fa fa-times-circle pull-right"></i></h4>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<!-- 2 simple inputs in a single row -->
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="action1Name">Name</label>
|
||||
<input type="text" class="form-control" id="action1Name" placeholder="Action1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="action1Base">Base</label>
|
||||
<input type="text" class="form-control" id="action1Base" placeholder="nova.create_server">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- collapsible dictionary section with fixed keys -->
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="section">
|
||||
<h5><a data-toggle="collapse" data-target="#collapseTwo" id="collapseTwoLink" href="#collapseTwo">
|
||||
Base Input</a></h5>
|
||||
<div id="collapseTwo" class="collapse in">
|
||||
<div class="form-group">
|
||||
<label for="action1BaseInputFlavorId">Flavor Id</label>
|
||||
<input type="text" class="form-control" id="action1BaseInputFlavorId">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="action1BaseInputImageId">Image Id</label>
|
||||
<input type="text" class="form-control" id="action1BaseInputImageId">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- collapsible keys list section -->
|
||||
<div class="section">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
||||
<h5><a data-toggle="collapse" data-target="#collapseThree" id="collapseThreeLink" href="#collapseThree">
|
||||
Input</a></h5>
|
||||
</div>
|
||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse in">
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- collapsible section with variable type = string|list|dictionary -->
|
||||
<div class="section">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
||||
<h5><a data-toggle="collapse" data-target="#collapseFour" id="collapseFourLink" href="#collapseFour">
|
||||
Output</a></h5>
|
||||
</div>
|
||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="collapseFour" class="collapse in">
|
||||
<!-- string input type -->
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF1">Key Type</label>
|
||||
<select id="collapseFourOuputF1" class="form-control">
|
||||
<option selected disabled>String</option>
|
||||
<option disabled>List</option>
|
||||
<option disabled>Dictionary</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label> </label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- dictionary input type -->
|
||||
<div class="dictionary">
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF2">Key Type</label>
|
||||
<select id="collapseFourOuputF2" class="form-control">
|
||||
<option disabled>String</option>
|
||||
<option selected disabled>Dictionary</option>
|
||||
<option disabled>List</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF3">Key1
|
||||
<a href="#" data-toggle="popover" data-trigger="click"
|
||||
data-container="body" data-content="<label>New Name</label>
|
||||
<input type='text' class='form-control' value='Key1'>
|
||||
<button class='btn btn-default btn-sm cancel'>Cancel</button>
|
||||
<button class='btn btn-primary btn-sm'>Save</button>">
|
||||
<i class="fa fa-pencil"></i></a></label>
|
||||
<div class="input-group" id="collapseFourOuputF3">
|
||||
<input type="text" class="form-control">
|
||||
<i class="fa fa-minus-circle input-group-addon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-sm-5 col-lg-5"></div>
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF4">Key2
|
||||
<a href="#" data-toggle="popover" data-trigger="click"
|
||||
data-container="body" data-content="<label>New Name</label>
|
||||
<input type='text' class='form-control' value='Key2'>
|
||||
<button class='btn btn-default btn-sm cancel'>Cancel</button>
|
||||
<button class='btn btn-primary btn-sm'>Save</button>">
|
||||
<i class="fa fa-pencil"></i></a></label>
|
||||
<div class="input-group" id="collapseFourOuputF4">
|
||||
<input type="text" class="form-control">
|
||||
<i class="fa fa-minus-circle input-group-addon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- list input type -->
|
||||
<div class="list">
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF5">Key Type</label>
|
||||
<select id="collapseFourOuputF5" class="form-control">
|
||||
<option disabled>String</option>
|
||||
<option disabled>Dictionary</option>
|
||||
<option selected disabled>List</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<label> </label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<i class="fa fa-minus-circle input-group-addon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-sm-5 col-lg-5"></div>
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<i class="fa fa-minus-circle input-group-addon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- YAML Panel -->
|
||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<pre>
|
||||
version: 2
|
||||
name: Workbook1
|
||||
description: </pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- page footer -->
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-lg-12 col-sm-12">
|
||||
<div class="pull-right">
|
||||
<button class="btn btn-default cancel">Cancel</button>
|
||||
<button class="btn btn-primary">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block js %}
|
||||
{% include "horizon/_scripts.html" %}
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('a[data-toggle="popover"]').popover({html: true}).on('click', function(e) {
|
||||
e.preventDefault();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -20,6 +20,7 @@ from mistral import views
|
|||
urlpatterns = patterns('',
|
||||
url(r'^$', views.IndexView.as_view(), name='index'),
|
||||
url(r'^create$', views.CreateWorkbookView.as_view(), name='create'),
|
||||
url(r'^create1$', views.CreateWorkbookView1.as_view(), name='create1'),
|
||||
url(r'^edit/(?P<workbook_id>[^/]+)$', views.EditWorkbookView.as_view(),
|
||||
name='edit')
|
||||
)
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
from django.core.urlresolvers import reverse_lazy
|
||||
from horizon import tables
|
||||
from horizon.forms import views
|
||||
from horizon.views import APIView
|
||||
import yaml
|
||||
|
||||
from mistral import api
|
||||
|
|
@ -28,6 +29,10 @@ class CreateWorkbookView(views.ModalFormView):
|
|||
success_url = reverse_lazy('horizon:project:mistral:index')
|
||||
|
||||
|
||||
class CreateWorkbookView1(APIView):
|
||||
template_name = 'project/mistral/create.html'
|
||||
|
||||
|
||||
class EditWorkbookView(views.ModalFormView):
|
||||
form_class = mistral_forms.EditWorkbookForm
|
||||
template_name = 'project/mistral/create.html'
|
||||
|
|
|
|||
Loading…
Reference in New Issue