Packaging a few small changes

* Make edit http function endpoint accept function id rather than name
* Move show alert js function to function editor template as its only used here
* Added a note that previous commit (API -> isolator request was changed from global routing to inter app routing) (It sped things up, but not its regressed; need to look into this further)
This commit is contained in:
Peter Stockings
2024-03-28 21:26:49 +11:00
parent df458c2738
commit 25178b5aad
4 changed files with 47 additions and 45 deletions

12
app.py
View File

@@ -35,7 +35,8 @@ class User(UserMixin):
return User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at']) return User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'])
return None return None
# Swith to inter app routing, which results in speed up from ~400ms to ~270ms
# https://stackoverflow.com/questions/76886643/linking-two-not-exposed-dokku-apps
API_URL = os.environ.get('API_URL', 'http://isolator.web:5000/execute') # 'https://isolator.peterstockings.com/execute' 'http://127.0.0.1:5000/execute' API_URL = os.environ.get('API_URL', 'http://isolator.web:5000/execute') # 'https://isolator.peterstockings.com/execute' 'http://127.0.0.1:5000/execute'
DEFAULT_FUNCTION_NAME = 'foo' DEFAULT_FUNCTION_NAME = 'foo'
@@ -159,20 +160,19 @@ def get_http_function_edit_form(function_id):
return render_block(app.jinja_env, 'dashboard/http_functions/edit.html', 'page', user_id=user_id, function_id=function_id, name=name, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response) return render_block(app.jinja_env, 'dashboard/http_functions/edit.html', 'page', user_id=user_id, function_id=function_id, name=name, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response)
return render_template("dashboard/http_functions/edit.html", user_id=user_id, name=name, function_id=function_id, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response) return render_template("dashboard/http_functions/edit.html", user_id=user_id, name=name, function_id=function_id, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response)
@ app.route("/dashboard/http_functions/edit", methods=["POST"]) @ app.route("/dashboard/http_functions/<int:function_id>/edit", methods=["POST"])
@login_required @login_required
def edit_http_function(): def edit_http_function(function_id):
try: try:
user_id = current_user.id user_id = current_user.id
name = request.json.get('name') name = request.json.get('name')
updated_name = request.json.get('updated_name')
script_content = request.json.get('script_content') script_content = request.json.get('script_content')
environment_info = request.json.get('environment_info') environment_info = request.json.get('environment_info')
is_public = request.json.get('is_public') is_public = request.json.get('is_public')
log_request = request.json.get('log_request') log_request = request.json.get('log_request')
log_response = request.json.get('log_response') log_response = request.json.get('log_response')
db.edit_http_function(user_id, name, updated_name, script_content, environment_info, is_public, log_request, log_response) db.edit_http_function(user_id, function_id, name, script_content, environment_info, is_public, log_request, log_response)
return { "status": "success", "message": f'{name} updated' } return { "status": "success", "message": f'{name} updated' }
except Exception as e: except Exception as e:
@@ -206,7 +206,7 @@ def get_http_function_logs(function_id):
return render_block(app.jinja_env, 'dashboard/http_functions/logs.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function_invocations=http_function_invocations) return render_block(app.jinja_env, 'dashboard/http_functions/logs.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function_invocations=http_function_invocations)
return render_template("dashboard/http_functions/logs.html", user_id=user_id, name=name, function_id=function_id, http_function_invocations=http_function_invocations) return render_template("dashboard/http_functions/logs.html", user_id=user_id, name=name, function_id=function_id, http_function_invocations=http_function_invocations)
@ app.route("/http_functions/<int:function_id>/client", methods=["GET"]) @ app.route("/dashboard/http_functions/<int:function_id>/client", methods=["GET"])
@login_required @login_required
def client(function_id): def client(function_id):
user_id = current_user.id user_id = current_user.id

6
db.py
View File

@@ -69,10 +69,10 @@ class DataBase():
commit=True commit=True
) )
def edit_http_function(self, user_id, name, updated_name, script_content, environment_info, is_public, log_request, log_response): def edit_http_function(self, user_id, function_id, name, script_content, environment_info, is_public, log_request, log_response):
self.execute( self.execute(
'UPDATE http_functions SET NAME=%s, script_content=%s, environment_info=%s, is_public=%s, log_request=%s, log_response=%s WHERE user_id=%s AND NAME=%s', 'UPDATE http_functions SET NAME=%s, script_content=%s, environment_info=%s, is_public=%s, log_request=%s, log_response=%s WHERE user_id=%s AND id=%s',
[updated_name, script_content, environment_info, is_public, log_request, log_response, user_id, name], [name, script_content, environment_info, is_public, log_request, log_response, user_id, function_id],
commit=True commit=True
) )

View File

@@ -83,32 +83,4 @@
{% endblock %} {% endblock %}
</div> </div>
<div id="alert-container" class="fixed top-10 right-10 z-50"></div>
<script>
function showAlert(message, type = 'success', duration = 1500) {
const alertContainer = document.getElementById('alert-container');
const alertDiv = document.createElement('div');
const icon = type === 'success'
? '<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>' // SVG for success icon
: '<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01"></path></svg>'; // SVG for error icon
const baseClasses = "flex items-center p-4 mb-4 text-sm text-white rounded-lg shadow-md transition-opacity duration-300";
alertDiv.className = `${baseClasses} ${type === 'success' ? 'bg-green-400' : 'bg-red-400'}`;
alertDiv.innerHTML = `${icon}<span class="ml-3">${message}</span>`;
// Append alert div to the container
alertContainer.appendChild(alertDiv);
// Remove the alert after 'duration' milliseconds
setTimeout(() => {
alertDiv.style.opacity = '0';
setTimeout(() => alertContainer.removeChild(alertDiv), 300);
}, duration);
}
</script>
</body> </body>

View File

@@ -288,32 +288,29 @@
</button> </button>
<script> <script>
document.querySelector('#edit-http-function').addEventListener('click', () => { document.querySelector('#edit-http-function').addEventListener('click', () => {
let name = "{{ name }}"; let name = document.querySelector('#function-name').value;
let updated_name = document.querySelector('#function-name').value;
let script_content = editor.getValue().trim(); let script_content = editor.getValue().trim();
let environment_info = editor_environment.getValue().trim(); let environment_info = editor_environment.getValue().trim();
let is_public = document.querySelector('#is_public').checked let is_public = document.querySelector('#is_public').checked
let log_request = document.querySelector('#log_request').checked let log_request = document.querySelector('#log_request').checked
let log_response = document.querySelector('#log_response').checked let log_response = document.querySelector('#log_response').checked
fetch("{{ url_for('edit_http_function') }}", { fetch("{{ url_for('edit_http_function', function_id=function_id) }}", {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ name, updated_name, script_content, environment_info, is_public, log_request, log_response }), body: JSON.stringify({ name, script_content, environment_info, is_public, log_request, log_response }),
}) })
.then(response => response.json()) .then(response => response.json())
.then(json => { .then(json => {
if (name != updated_name) { if ("{{ name }}" != name) {
htmx.ajax('GET', "{{ url_for('get_http_function_edit_form', function_id=function_id) }}", { htmx.ajax('GET', "{{ url_for('get_http_function_edit_form', function_id=function_id) }}", {
target: '#container', target: '#container',
swap: 'innerHTML' swap: 'innerHTML'
}); });
} }
else { showAlert(json.message, json.status)
showAlert(json.message, json.status)
}
}) })
}) })
</script> </script>
@@ -362,4 +359,37 @@
<!-- Execution results will appear here --> <!-- Execution results will appear here -->
</div> </div>
<script>
function showAlert(message, type = 'success', duration = 1500) {
// Create a new div element
var alertContainerDiv = document.createElement('div');
// Add the required classes to the alertContainerDiv
alertContainerDiv.classList.add('fixed', 'top-10', 'right-10', 'z-50');
// Append the new div to the body of the document
document.body.appendChild(alertContainerDiv);
const alertContainer = document.getElementById('alert-container');
const alertDiv = document.createElement('div');
const icon = type === 'success'
? '<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>' // SVG for success icon
: '<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01"></path></svg>'; // SVG for error icon
const baseClasses = "flex items-center p-4 mb-4 text-sm text-white rounded-lg shadow-md transition-opacity duration-300";
alertDiv.className = `${baseClasses} ${type === 'success' ? 'bg-green-400' : 'bg-red-400'}`;
alertDiv.innerHTML = `${icon}<span class="ml-3">${message}</span>`;
// Append alert div to the container
alertContainerDiv.appendChild(alertDiv);
// Remove the alert after 'duration' milliseconds
setTimeout(() => {
alertDiv.style.opacity = '0';
setTimeout(() => alertContainerDiv.parentElement.removeChild(alertContainerDiv), 300);
}, duration);
}
</script>
</div> </div>