Framework for building UIs for OpenStack projects dealing with complex input data
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

create.html 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. {% extends "base.html" %}
  2. {% load i18n %}
  3. {% load url from future %}
  4. {% load static %}
  5. {% load compress %}
  6. {% block title %}{% trans "Create Workbook" %}{% endblock %}
  7. {% block page_header %}
  8. {% include "horizon/common/_page_header.html" with title=_("Workbooks") %}
  9. {% endblock page_header %}
  10. {% block js %}
  11. {% include "horizon/_scripts.html" %}
  12. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/custom-libs/barricade.js"></script>
  13. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/libs/js-yaml/dist/js-yaml.min.js"></script>
  14. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/libs/underscore/underscore-min.js"></script>
  15. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.init.js"></script>
  16. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.templates.js"></script>
  17. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.filters.js"></script>
  18. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.directives.js"></script>
  19. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.field.models.js"></script>
  20. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.panel.models.js"></script>
  21. <script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.utils.js"></script>
  22. <script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.init.js"></script>
  23. <script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.workbook.controllers.js"></script>
  24. <script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.workbook.models.js"></script>
  25. {% endblock %}
  26. {% block css %}
  27. {% include "_stylesheets.html" %}
  28. {% compress css %}
  29. <link href='{{ STATIC_URL }}merlin/scss/merlin.scss' type='text/scss' media='screen' rel='stylesheet' />
  30. {% endcompress %}
  31. {% block merlin-css %}{% endblock %}
  32. {% endblock %}
  33. {% block main %}
  34. <h3>Create Workbook</h3>
  35. <div id="create-workbook" class="fluid-container" ng-cloak ng-controller="workbookCtrl"
  36. ng-init="init({{ id|default:'undefined' }}, '{{ yaml }}', '{{ commit_url }}', '{{ discard_url }}')">
  37. <div class="well">
  38. <div class="two-panels">
  39. <div class="left-panel">
  40. <div class="pull-left">
  41. <h4><strong>{$ workbook.get('name') $}</strong></h4>
  42. </div>
  43. <div class="pull-right">
  44. <div class="table-actions clearfix">
  45. <button ng-click="addAction()" class="btn btn-default btn-sm"><span class="fa fa-plus">Add Action</span></button>
  46. <button ng-click="addWorkflow()" class="btn btn-default btn-sm"><span class="fa fa-plus">Add Workflow</span></button>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="right-panel">
  51. <div class="btn-group btn-toggle pull-right">
  52. <button ng-click="isGraphMode = true" class="btn btn-sm"
  53. ng-class="isGraphMode ? 'active btn-primary' : 'btn-default'">Graph</button>
  54. <button ng-click="isGraphMode = false" class="btn btn-sm"
  55. ng-class="!isGraphMode ? 'active btn-primary' : 'btn-default'">YAML</button>
  56. </div>
  57. </div>
  58. </div>
  59. <!-- Data panel start -->
  60. <div class="two-panels">
  61. <div class="left-panel">
  62. <panel ng-repeat="panel in workbook | extractPanels track by panel.id"
  63. content="panel">
  64. <div ng-repeat="row in panel | extractRows track by row.id">
  65. <div ng-class="{'two-columns': row.index !== undefined }">
  66. <div ng-repeat="item in row | extractItems track by item.id"
  67. ng-class="{'right-column': item.isAtomic() && $odd, 'left-column': item.isAtomic() && $even}">
  68. <typed-field value="item" type="{$ item.getType() $}"></typed-field>
  69. <div class="clearfix" ng-if="$odd"></div>
  70. </div>
  71. </div>
  72. </div>
  73. </panel>
  74. </div>
  75. <!-- YAML Panel -->
  76. <div class="right-panel">
  77. <div class="panel panel-default">
  78. <div class="panel-body" ng-show="!isGraphMode">
  79. <pre>{$ workbook.toYAML() $}</pre>
  80. </div>
  81. <div class="panel-body" ng-show="isGraphMode">
  82. Here will be a fancy Graph View as soon as we implement it!
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. <!-- page footer -->
  88. <div class="two-panels">
  89. <div class="full-width">
  90. <div class="pull-right">
  91. <button ng-click="discardWorkbook()" class="btn btn-default cancel">Cancel</button>
  92. <button ng-click="commitWorkbook()" class="btn btn-primary">
  93. {$ workbookID ? 'Modify' : 'Create' $}
  94. </button>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. {% endblock %}