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.
|
under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.left, .right {
|
/*.left, .right {*/
|
||||||
padding: 6px;
|
/*padding: 6px;*/
|
||||||
}
|
/*}*/
|
||||||
.left {
|
/*.left {*/
|
||||||
border: 1px solid black;
|
/*border: 1px solid black;*/
|
||||||
}
|
/*}*/
|
||||||
.expandable:before {
|
.expandable:before {
|
||||||
content: '+';
|
content: '+';
|
||||||
}
|
}
|
||||||
.expandable.expanded:before {
|
.expandable.expanded:before {
|
||||||
content: '-';
|
content: '-';
|
||||||
}
|
}
|
||||||
label {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.container-action {
|
.container-action {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
@ -35,3 +32,91 @@ label {
|
|||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
border-left: 1px solid green;
|
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
|
from mistral import api
|
||||||
|
|
||||||
|
|
||||||
class CreateWorkbook(tables.LinkAction):
|
class CreateWorkbook(tables.LinkAction):
|
||||||
name = 'create'
|
name = 'create'
|
||||||
verbose_name = _('Create Workbook')
|
verbose_name = _('Create Workbook')
|
||||||
@ -26,6 +27,13 @@ class CreateWorkbook(tables.LinkAction):
|
|||||||
icon = 'plus'
|
icon = 'plus'
|
||||||
|
|
||||||
|
|
||||||
|
class CreateWorkbook1(tables.LinkAction):
|
||||||
|
name = 'create1'
|
||||||
|
verbose_name = _('Create Workbook1')
|
||||||
|
url = 'horizon:project:mistral:create1'
|
||||||
|
icon = 'plus'
|
||||||
|
|
||||||
|
|
||||||
class EditWorkbook(tables.LinkAction):
|
class EditWorkbook(tables.LinkAction):
|
||||||
name = 'edit'
|
name = 'edit'
|
||||||
verbose_name = _('Edit Workbook')
|
verbose_name = _('Edit Workbook')
|
||||||
@ -48,6 +56,6 @@ class WorkbooksTable(tables.DataTable):
|
|||||||
filters=(defaultfilters.yesno,))
|
filters=(defaultfilters.yesno,))
|
||||||
|
|
||||||
class Meta:
|
class Meta:
|
||||||
table_actions = (CreateWorkbook, RemoveWorkbook)
|
table_actions = (CreateWorkbook, CreateWorkbook1, RemoveWorkbook)
|
||||||
name = 'workbooks'
|
name = 'workbooks'
|
||||||
row_actions = (EditWorkbook, RemoveWorkbook)
|
row_actions = (EditWorkbook, RemoveWorkbook)
|
||||||
|
|||||||
302
extensions/mistral/templates/mistral/create.html
Normal file
302
extensions/mistral/templates/mistral/create.html
Normal file
@ -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('',
|
urlpatterns = patterns('',
|
||||||
url(r'^$', views.IndexView.as_view(), name='index'),
|
url(r'^$', views.IndexView.as_view(), name='index'),
|
||||||
url(r'^create$', views.CreateWorkbookView.as_view(), name='create'),
|
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(),
|
url(r'^edit/(?P<workbook_id>[^/]+)$', views.EditWorkbookView.as_view(),
|
||||||
name='edit')
|
name='edit')
|
||||||
)
|
)
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
from django.core.urlresolvers import reverse_lazy
|
from django.core.urlresolvers import reverse_lazy
|
||||||
from horizon import tables
|
from horizon import tables
|
||||||
from horizon.forms import views
|
from horizon.forms import views
|
||||||
|
from horizon.views import APIView
|
||||||
import yaml
|
import yaml
|
||||||
|
|
||||||
from mistral import api
|
from mistral import api
|
||||||
@ -28,6 +29,10 @@ class CreateWorkbookView(views.ModalFormView):
|
|||||||
success_url = reverse_lazy('horizon:project:mistral:index')
|
success_url = reverse_lazy('horizon:project:mistral:index')
|
||||||
|
|
||||||
|
|
||||||
|
class CreateWorkbookView1(APIView):
|
||||||
|
template_name = 'project/mistral/create.html'
|
||||||
|
|
||||||
|
|
||||||
class EditWorkbookView(views.ModalFormView):
|
class EditWorkbookView(views.ModalFormView):
|
||||||
form_class = mistral_forms.EditWorkbookForm
|
form_class = mistral_forms.EditWorkbookForm
|
||||||
template_name = 'project/mistral/create.html'
|
template_name = 'project/mistral/create.html'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user