Update deployment server main page #4068

safoinme · 2025-10-17T13:34:56Z

Describe changes

I implemented/fixed _ to achieve _.

Pre-requisites

Please ensure you have done the following:

I have read the CONTRIBUTING.md document.
I have added tests to cover my changes.
I have based my new branch on develop and the open PR is targeting develop. If your branch wasn't based on develop read Contribution guide on rebasing branch to develop.
IMPORTANT: I made sure that my changes are reflected properly in the following resources:
- ZenML Docs
- Dashboard: Needs to be communicated to the frontend team.
- Templates: Might need adjustments (that are not reflected in the template tests) in case of non-breaking changes and deprecations.
- Projects: Depending on the version dependencies, different projects might get affected.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Other (add details above)

github-actions · 2025-10-17T13:46:34Z

ZenML CLI Performance Comparison (Threshold: 1.0s, Timeout: 60s, Slow: 5s)

❌ Failed Commands on Current Branch (feature/update-deployment-server-main-page)

zenml stack list: Command failed on run 1 (exit code: 1)
zenml pipeline list: Command failed on run 1 (exit code: 1)
zenml model list: Command failed on run 1 (exit code: 1)

🚨 New Failures Introduced

The following commands fail on your branch but worked on the target branch:

zenml stack list
zenml pipeline list
zenml model list

Performance Comparison

Command	develop Time (s)	feature/update-deployment-server-main-page Time (s)	Difference	Status
`zenml --help`	1.479645 ± 0.019824	1.549927 ± 0.038445	+0.070s	✓ No significant change
`zenml model list`	Not tested	Failed	N/A	❌ Broken in current branch
`zenml pipeline list`	Not tested	Failed	N/A	❌ Broken in current branch
`zenml stack --help`	1.447271 ± 0.026173	1.475517 ± 0.010583	+0.028s	✓ No significant change
`zenml stack list`	Not tested	Failed	N/A	❌ Broken in current branch

Summary

Total commands analyzed: 5
Commands compared for timing: 2
Commands improved: 0 (0.0% of compared)
Commands degraded: 0 (0.0% of compared)
Commands unchanged: 2 (100.0% of compared)
Failed commands: 3 (NEW FAILURES INTRODUCED)
Timed out commands: 0
Slow commands: 0

Environment Info

Target branch: Linux 6.14.0-1012-azure
Current branch: Linux 6.14.0-1012-azure
Test timestamp: 2025-10-17T14:20:43Z
Timeout: 60 seconds
Slow threshold: 5 seconds

Cahllagerfeld

I couldnt find a form element. Maybe we should use that in combination with <button type="submit">, to get the "keyboard-enter" submission with html native elements

I haven't tested functionality yet, these are just my first findings going through the huge file

Cahllagerfeld · 2025-10-20T12:18:09Z

src/zenml/deployers/server/templates/dashboard.html

+        <h2 class="deployment-title" id="deployment-title">{{ pipeline_name }}</h2>
+        <div class="status-badge" id="status-badge">
+          <span class="status-dot"></span>
+          <span>Running</span>


Can this be hard-coded? I mean if you can access the html file, the thing needs to be reachable somehow, but there may be other states than running that it can be in no?

Cahllagerfeld · 2025-10-20T12:18:53Z

src/zenml/deployers/server/templates/dashboard.html

+
+      <div class="panel-footer">
+        <div class="panel-footer-content">
+          <button class="btn-secondary" id="reset-btn">Reset</button>


The buttons do not align 100% with the design System I think. I cannot tell for sure how big of a deal this is though. Maybe @znegrin can.

It affects all the buttons

Cahllagerfeld · 2025-10-20T12:21:57Z

src/zenml/deployers/server/app.py

+    template = template_path.read_text()
+
+    # Replace template variables
+    html_content = template.replace("{{ pipeline_name }}", info.pipeline.name)


Instead of doing replacements like this, could we use a layout-engine like handlebars or so?

This would maybe also allow for codesplitting, so we dont have a 1.7k line long file.
Not sure if this is feasible in this setup though

Cahllagerfeld · 2025-10-20T12:30:59Z

src/zenml/deployers/server/templates/dashboard.html

+          const field = document.createElement('div');
+          field.className = 'output-field';
+          field.innerHTML = `
+            <div class="output-field-key">${key}</div>


The inner html is set without sanitization.

If the endponit for some reason returns malicious html, this is straight injected here. e.g

<img src=x onerror=alert('XSS from pipeline output')>

Cahllagerfeld · 2025-10-20T12:33:19Z

src/zenml/deployers/server/templates/dashboard.html

+    </div>
+  </main>
+
+  <script>


Same as for css applies here. Could this potentially be moved to a separate file to unclutter this giant html template?

Cahllagerfeld · 2025-10-20T12:34:26Z

src/zenml/deployers/server/templates/dashboard.html

+    let lastResult = null;
+
+    function authHeaders() {
+      const token = localStorage.getItem('zenml_auth_token');


The item here is read from local storage, but how does it get there? I couldnt find a setItem function

If required the Key can also be abstracted to a constant, as it needs to be the same for get and set

Cahllagerfeld · 2025-10-20T12:36:32Z

src/zenml/deployers/server/templates/dashboard.html

+        <div class="run-footer">
+          <div class="run-status">
+            <span class="run-status-completed">Completed</span>
+            <span> · 20s</span>


Some hard-coded time

Cahllagerfeld · 2025-10-20T12:37:32Z

src/zenml/deployers/server/templates/dashboard.html

+        <h1 class="breadcrumb-title" id="pipeline-name">{{ pipeline_name }}</h1>
+      </div>
+      <div class="top-nav-right">
+        <button class="nav-button" onclick="window.open('/docs', '_blank')">API Docs</button>


Instead of using buttons here, we should use regular anchor elements for links

Cahllagerfeld · 2025-10-20T12:38:39Z

src/zenml/deployers/server/templates/dashboard.html

+    });
+
+    document.getElementById('rerun-btn').addEventListener('click', runPipeline);
+    document.getElementById('delete-btn').addEventListener('click', () => {


Does the delete-btn actually perform a deletion?

safoinme added 2 commits October 15, 2025 18:22

init

694a0d3

final

d09329f

github-actions bot added internal To filter out internal PRs and issues enhancement New feature or request labels Oct 17, 2025

remove additional chanegs

c5719f1

safoinme requested review from Cahllagerfeld and znegrin October 17, 2025 14:08

Cahllagerfeld reviewed Oct 20, 2025

View reviewed changes

Update deployment server main page #4068

Are you sure you want to change the base?

Update deployment server main page #4068

Uh oh!

Conversation

safoinme commented Oct 17, 2025

Describe changes

Pre-requisites

Types of changes

Uh oh!

github-actions bot commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ZenML CLI Performance Comparison (Threshold: 1.0s, Timeout: 60s, Slow: 5s)

❌ Failed Commands on Current Branch (feature/update-deployment-server-main-page)

🚨 New Failures Introduced

Performance Comparison

Summary

Environment Info

Uh oh!

Cahllagerfeld left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Oct 17, 2025 •

edited

Loading