🔧refactor: stacks forms

D10S0VSkY-OSS · Nov 11, 2023 · 099b12c · 099b12c
1 parent 1c1d9f7
commit 099b12c
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 27 deletions.
diff --git a/sld-dashboard/app/base/static/assets/css/volt.css b/sld-dashboard/app/base/static/assets/css/volt.css
@@ -41719,3 +41719,8 @@ pre {
     background-color: black;
     color: white; 
 }
+
+.textarea-right-aligned {
+    direction: rtl; /* Right-to-left */
+    text-align: right; /* For good measure, in case of LTR content */
+}
diff --git a/sld-dashboard/app/helpers/converter.py b/sld-dashboard/app/helpers/converter.py
@@ -1,4 +1,5 @@
 import ast
+import json
 
 
 def convert_to_dict(data):
@@ -17,3 +18,10 @@ def convert_to_dict(data):
     if not len(result):
         return data
     return result[0]
+
+def trim_dict(valor):
+    try:
+        obj = json.loads(valor)
+        return json.dumps(obj)
+    except json.JSONDecodeError:
+        return valor
diff --git a/sld-dashboard/app/home/routes.py b/sld-dashboard/app/home/routes.py
@@ -688,7 +688,6 @@ def deploy_stack(stack_id):
                 "project_path": request.form.get("project_path").replace(" ",""),
                 "variables": variables,
             }
-            print(data)
             endpoint = f"plan"
             if not "plan" in request.form.get("button"):
                 endpoint = f"deploy"

diff --git a/sld-dashboard/app/home/templates/deploys-list.html b/sld-dashboard/app/home/templates/deploys-list.html
@@ -174,7 +174,7 @@ <h2 class="h4">All Deploys</h2>
                                 <a class="dropdown-item" href="{{ url_for('.edit_deploy',deploy_id=deploy.id)}}">
                                     <span class="fas fa-edit mr-2"></span>Edit</a>
                                 <a class="dropdown-item" href="{{ url_for('.relaunch_deploy',deploy_id=deploy.id)}}">
-                                    <span class="fas fa-sync mr-2"></span>ReDeploy</a>
+                                    <span class="fas fa-sync mr-2"></span>Apply</a>
                                 <a class="dropdown-item text-danger" data-toggle="modal"
                                                                      data-target="#DestroyModalCenter-{{deploy.id}}">
                                     <span class="fas fa-trash-alt mr-2"></span>Destroy</a>

diff --git a/sld-dashboard/app/home/templates/stacks-deploy.html b/sld-dashboard/app/home/templates/stacks-deploy.html
@@ -38,7 +38,7 @@ <h1 class="h4">Deploy Stack</h1>
                             <!-- Form -->
                             <div class="col-md-12 col-md-offset-1">
                                 <h3>Stack {{ stack['json']['stack_name'] }}</h3>
-                                <form class="" method="post">
+                                <form class="" method="post" id="vars_form">
 
 
                                     <div class="form-group">
@@ -222,34 +222,77 @@ <h3>Tfvars</h3>
                                 </div>
                                     <!-- Collapse Variables -->
                                 <div class="collapse" id="variables">
-                                <h3>Variables</h3>
-                                <footer class="blockquote-footer">
-                                 Complete the form with the variables
-                                </footer>
                                     <div class="border-top my-4"></div>
                                     <!-- start SLD_SORT False -->
                                     {% if not sort_form %}
-                                    {% for key, value in data_json.items()%}
-                                    <div class="form-group">
-                                        <p class="mb-110"><h6><strong>{{key}}</strong></h6></p>
-                                        <footer class="blockquote-footer"> {{value.get('description', "").split('|')[-1]}}</footer>
+{% set basic_variables = {} %}
+{% set advanced_variables = {} %}
+
+{% for key, value in data_json.items() %}
+    {% if value.get('default') is none %}
+        {% set _ = basic_variables.update({key: value}) %}
+    {% else %}
+        {% set _ = advanced_variables.update({key: value}) %}
+    {% endif %}
+{% endfor %}
+
+<!-- Basic Variables -->
+<div class="basic-variables-section">
+    <h2>Basic Variables</h2>
+    {% for key, value in basic_variables.items() %}
+        <div class="form-group">
+            <p class="mb-110"><h6><strong>{{ key }}</strong></h6></p>
+            <footer class="blockquote-footer">{{ value.get('description', "").split('|')[-1] }}</footer>
+
+            {% set field_type = value.get('type', 'string') %}
+            {% if field_type == "bool" %}
+                <select name={{ key }} class='form-control'>
+                    <option value="true" {% if value.get("default") %} selected {% endif %}>True</option>
+                    <option value="false" {% if not value.get("default") %} selected {% endif %}>False</option>
+                </select>
+            {% elif field_type.startswith("map") or "object" in field_type %}
+                <textarea name={{ key }} class='form-control' rows="6" required>
+{{ value.get("default") | tojson | replace(",", ",\n") | replace("{", "{\n") | replace("}", "\n}") | trim | indent(4) }}
+                </textarea>
+            {% elif "passw" in key or "token" in key or "key" in key or "secret" in key %}
+                <input type="password" name={{ key }} class='form-control' required>
+            {% else %}
+                <input type="text" value="{{ value.get('default') }}" name={{ key }} class='form-control' required>
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>
+
+<!-- Advanced Variables -->
+<form onsubmit="return cleanFormData()">
+<div class="advanced-variables-section">
+    <h2 class="toggle-advanced" style="cursor:pointer;">Advanced Variables</h2>
+    <div id="advanced-variables-content" style="display:none;">
+        {% for key, value in advanced_variables.items() %}
+            <div class="form-group">
+            <p class="mb-110"><h6><strong>{{ key }}</strong></h6></p>
+            <footer class="blockquote-footer">{{ value.get('description', "").split('|')[-1] }}</footer>
+
+            {% set field_type = value.get('type', 'string') %}
+            {% if field_type == "bool" %}
+                <select name={{ key }} class='form-control'>
+                    <option value="true" {% if value.get("default") %} selected {% endif %}>True</option>
+                    <option value="false" {% if not value.get("default") %} selected {% endif %}>False</option>
+                </select>
+            {% elif field_type.startswith("map") or "object" in field_type %}
+                <textarea name={{ key }} class='form-control' rows="6">
+{{ value.get("default") | tojson | replace(",", ",\n") | replace("{", "{\n") | replace("}", "\n}") | trim | indent(4) }}
+                </textarea>
+            {% elif "passw" in key or "token" in key or "key" in key or "secret" in key %}
+                <input type="password" name={{ key }} class='form-control'>
+            {% else %}
+                <input type="text" value="{{ value.get('default') }}" name={{ key }} class='form-control'>
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>
+</div>
 
-                                        {% for k, v in value.items() %}
-                                            {% if v == "bool" %}
-                                                <input type="text" value={{value.get("default")|lower}}
-                                            {% elif "default" in k %}
-                                                <input type="text" value="{{ v }}"
-                                            {% elif "passw" in key %}
-                                                <input type="password"
-                                            {% elif "type" in k %}
-                                                <input type="text" title="{{k}} {{v}} "
-                                            {% else %}
-                                                <input type="text"
-                                            {% endif %}
-                                        {% endfor %}
-                                        name={{ key }} class='form-control'>
-                                    </div>
-                                    {% endfor %}
                                     {% endif %}
                                     <!-- END SLD_SORT False -->
                                     <!-- start SLD_SORT True -->
@@ -306,4 +349,30 @@ <h5>{{value.get('description').split('|')[1]}}</h4>
 
 <!-- Specific Page JS goes HERE  -->
 {% block javascripts %}
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    document.querySelector('.toggle-advanced').addEventListener('click', function() {
+        var content = document.getElementById('advanced-variables-content');
+        if (content.style.display === 'none') {
+            content.style.display = 'block';
+        } else {
+            content.style.display = 'none';
+        }
+    });
+});
+</script>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    var form = document.getElementById('vars_form');
+    form.addEventListener('submit', function() {
+        document.querySelectorAll('textarea').forEach(function(textarea) {
+            textarea.value = textarea.value.replace(/\s+/g, ' ').trim();
+        });
+    });
+});
+</script>
+
+
+
+
 {% endblock javascripts %}