Skip to content

Commit c34474a

Browse files
pflookypflooky
committed
feat(ui): update navigation and add shutdown confirmation modal
- Replaced shutdown link with a button that triggers a confirmation modal to prevent accidental server shutdowns. - Moved toast history button to the navigation bar for better accessibility and to avoid overlap with page content. - Removed unused login button from the UI to streamline the interface.
1 parent fbafc29 commit c34474a

7 files changed

Lines changed: 109 additions & 55 deletions

File tree

‎app/src/main/resources/ui/connection/connection.html‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@
2323
<a href="/connection">Connection</a>
2424
<a href="/plan">Plan</a>
2525
<a href="/history">History</a>
26-
<a href="/shutdown" class="btn btn-danger" style="float: right; margin-right: 5px">Shutdown</a>
26+
<button class="btn btn-danger" style="float: right; margin-right: 5px" data-bs-toggle="modal" data-bs-target="#shutdown-confirm-modal">Shutdown</button>
27+
<button id="toast-history-btn" class="btn btn-outline-light" style="float: right; margin-right: 5px; position: relative;" title="View notification history" data-bs-toggle="modal" data-bs-target="#toast-history-modal">
28+
<i class="bi bi-bell"></i>
29+
<span id="toast-history-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6rem;"></span>
30+
</button>
2731
</nav>
2832
<div>
2933
<h2>Create new connections</h2>
@@ -43,12 +47,6 @@ <h2>Create new connections</h2>
4347
<h3>Existing connections</h3>
4448
<div class="accordion" id="connections-list"></div>
4549
</div>
46-
<!-- Toast History Button -->
47-
<button id="toast-history-btn" class="btn btn-outline-secondary position-fixed" style="bottom: 20px; right: 80px; z-index: 1050; border-radius: 50%; width: 45px; height: 45px; padding: 0;" title="View notification history" data-bs-toggle="modal" data-bs-target="#toast-history-modal">
48-
<i class="bi bi-bell"></i>
49-
<span id="toast-history-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6rem;"></span>
50-
</button>
51-
5250
<!-- Toast History Modal -->
5351
<div class="modal fade" id="toast-history-modal" tabindex="-1" aria-labelledby="toast-history-modal-label" aria-hidden="true">
5452
<div class="modal-dialog modal-lg modal-dialog-scrollable">
@@ -107,6 +105,26 @@ <h5 class="modal-title" id="delete-confirm-modal-label"><i class="bi bi-exclamat
107105
</div>
108106
</div>
109107

108+
<!-- Shutdown Confirmation Modal -->
109+
<div class="modal fade" id="shutdown-confirm-modal" tabindex="-1" aria-labelledby="shutdown-confirm-modal-label" aria-hidden="true">
110+
<div class="modal-dialog">
111+
<div class="modal-content">
112+
<div class="modal-header bg-danger text-white">
113+
<h5 class="modal-title" id="shutdown-confirm-modal-label"><i class="bi bi-exclamation-triangle me-2"></i>Confirm Shutdown</h5>
114+
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
115+
</div>
116+
<div class="modal-body">
117+
<p>Are you sure you want to shutdown the Data Caterer server?</p>
118+
<p class="text-muted mb-0">Any running processes will be terminated.</p>
119+
</div>
120+
<div class="modal-footer">
121+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
122+
<a href="/shutdown" class="btn btn-danger">Shutdown</a>
123+
</div>
124+
</div>
125+
</div>
126+
</div>
127+
110128
<div id="toast-container" class="toast-container position-fixed end-0 p-3" style="z-index: 1060; bottom: 80px;"></div>
111129
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
112130
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

‎app/src/main/resources/ui/history/history.html‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,15 @@
2323
<a href="/connection">Connection</a>
2424
<a href="/plan">Plan</a>
2525
<a href="/history">History</a>
26-
<a href="/shutdown" class="btn btn-danger" style="float: right; margin-right: 5px">Shutdown</a>
26+
<button class="btn btn-danger" style="float: right; margin-right: 5px" data-bs-toggle="modal" data-bs-target="#shutdown-confirm-modal">Shutdown</button>
27+
<button id="toast-history-btn" class="btn btn-outline-light" style="float: right; margin-right: 10px; position: relative;" title="View notification history" data-bs-toggle="modal" data-bs-target="#toast-history-modal">
28+
<i class="bi bi-bell"></i>
29+
<span id="toast-history-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6rem;"></span>
30+
</button>
2731
</nav>
2832
<div><h2>History</h2>
2933
<div class="accordion" id="history-container"></div>
3034
</div>
31-
<!-- Toast History Button -->
32-
<button id="toast-history-btn" class="btn btn-outline-secondary position-fixed" style="bottom: 20px; right: 20px; z-index: 10; border-radius: 50%; width: 45px; height: 45px; padding: 0;" title="View notification history">
33-
<i class="bi bi-bell"></i>
34-
<span id="toast-history-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6rem;"></span>
35-
</button>
36-
3735
<!-- Toast History Modal -->
3836
<div class="modal fade" id="toast-history-modal" tabindex="-1" aria-labelledby="toast-history-modal-label" aria-hidden="true">
3937
<div class="modal-dialog modal-lg modal-dialog-scrollable">
@@ -72,6 +70,26 @@ <h5 class="modal-title" id="error-detail-modal-label"><i class="bi bi-exclamatio
7270
</div>
7371
</div>
7472

73+
<!-- Shutdown Confirmation Modal -->
74+
<div class="modal fade" id="shutdown-confirm-modal" tabindex="-1" aria-labelledby="shutdown-confirm-modal-label" aria-hidden="true">
75+
<div class="modal-dialog">
76+
<div class="modal-content">
77+
<div class="modal-header bg-danger text-white">
78+
<h5 class="modal-title" id="shutdown-confirm-modal-label"><i class="bi bi-exclamation-triangle me-2"></i>Confirm Shutdown</h5>
79+
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
80+
</div>
81+
<div class="modal-body">
82+
<p>Are you sure you want to shutdown the Data Caterer server?</p>
83+
<p class="text-muted mb-0">Any running processes will be terminated.</p>
84+
</div>
85+
<div class="modal-footer">
86+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
87+
<a href="/shutdown" class="btn btn-danger">Shutdown</a>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
7593
<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 11"></div>
7694
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
7795
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

‎app/src/main/resources/ui/index.html‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,12 @@
2424
<a href="/connection">Connection</a>
2525
<a href="/plan">Plan</a>
2626
<a href="/history">History</a>
27-
<a href="/shutdown" class="btn btn-danger" style="float: right; margin-right: 5px">Shutdown</a>
28-
<a id="login-button" class="btn btn-primary" style="float: right; margin-right: 5px">Login</a>
27+
<button class="btn btn-danger" style="float: right; margin-right: 5px" data-bs-toggle="modal" data-bs-target="#shutdown-confirm-modal">Shutdown</button>
28+
<button id="toast-history-btn" class="btn btn-outline-light" style="float: right; margin-right: 5px; position: relative;" title="View notification history" data-bs-toggle="modal" data-bs-target="#toast-history-modal">
29+
<i class="bi bi-bell"></i>
30+
<span id="toast-history-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6rem;"></span>
31+
</button>
2932
</nav>
30-
<div id="login-box">
31-
<input type="text" class="form-control" id="username" placeholder="Username"><br><br>
32-
<input type="password" class="form-control" id="token" placeholder="Token"><br><br>
33-
<button id="login-save-button" class="btn btn-outline-primary">Save</button>
34-
<button id="login-close-button" class="btn btn-outline-secondary">Close</button>
35-
</div>
3633
<div><h2>Create new plan</h2>
3734
<form id="plan-form" class="plan-form m-3 needs-validation">
3835
<div class="row justify-content-between align-items-center mb-2">
@@ -276,12 +273,6 @@ <h5>Transactions</h5>
276273
</div>
277274
</form>
278275
</div>
279-
<!-- Toast History Button -->
280-
<button id="toast-history-btn" class="btn btn-outline-secondary position-fixed" style="bottom: 20px; right: 80px; z-index: 1050; border-radius: 50%; width: 45px; height: 45px; padding: 0;" title="View notification history" data-bs-toggle="modal" data-bs-target="#toast-history-modal">
281-
<i class="bi bi-bell"></i>
282-
<span id="toast-history-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6rem;"></span>
283-
</button>
284-
285276
<!-- Toast History Modal -->
286277
<div class="modal fade" id="toast-history-modal" tabindex="-1" aria-labelledby="toast-history-modal-label" aria-hidden="true">
287278
<div class="modal-dialog modal-lg modal-dialog-scrollable">
@@ -320,12 +311,31 @@ <h5 class="modal-title" id="error-detail-modal-label"><i class="bi bi-exclamatio
320311
</div>
321312
</div>
322313

314+
<!-- Shutdown Confirmation Modal -->
315+
<div class="modal fade" id="shutdown-confirm-modal" tabindex="-1" aria-labelledby="shutdown-confirm-modal-label" aria-hidden="true">
316+
<div class="modal-dialog">
317+
<div class="modal-content">
318+
<div class="modal-header bg-danger text-white">
319+
<h5 class="modal-title" id="shutdown-confirm-modal-label"><i class="bi bi-exclamation-triangle me-2"></i>Confirm Shutdown</h5>
320+
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
321+
</div>
322+
<div class="modal-body">
323+
<p>Are you sure you want to shutdown the Data Caterer server?</p>
324+
<p class="text-muted mb-0">Any running processes will be terminated.</p>
325+
</div>
326+
<div class="modal-footer">
327+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
328+
<a href="/shutdown" class="btn btn-danger">Shutdown</a>
329+
</div>
330+
</div>
331+
</div>
332+
</div>
333+
323334
<div id="toast-container" class="toast-container position-fixed end-0 p-3" style="z-index: 1060; bottom: 80px;"></div>
324335
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
325336
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
326337
<script src="https://unpkg.com/bootstrap-table@1.22.2/dist/bootstrap-table.min.js"></script>
327338
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
328339
<script type="module" src="/ui/index.js"></script>
329-
<script type="module" src="/ui/login.js"></script>
330340
</body>
331341
</html>

‎app/src/main/resources/ui/index.js‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ import {createGenerationElements, getGenerationYaml} from "./helper-generation.j
4242
import {createValidationFromPlan, getValidations} from "./helper-validation.js";
4343
import {createCountElementsFromPlan, createRecordCount, getRecordCount} from "./helper-record-count.js";
4444
import {configurationOptionsMap, reportConfigKeys} from "./configuration-data.js";
45-
import {initLoginButton, initLoginCloseButton, initLoginSaveButton} from "./login.js";
4645
import {apiFetch} from "./config.js";
4746

4847
const addTaskButton = document.getElementById("add-task-button");
@@ -56,9 +55,6 @@ const perFieldExampleSwitch = document.getElementById("showPerFieldExample");
5655
const planName = document.getElementById("plan-name");
5756
let numDataSources = 1;
5857

59-
initLoginButton();
60-
initLoginSaveButton();
61-
initLoginCloseButton();
6258
initToastHistoryListeners();
6359
tasksDiv.append(await createDataSourceForPlan(numDataSources));
6460
foreignKeysDiv.append(createForeignKeys());
@@ -385,10 +381,6 @@ function savePlan() {
385381
headers: {"Content-Type": "application/json"},
386382
body: JSON.stringify(requestBody)
387383
})
388-
.catch(err => {
389-
console.error(err);
390-
createToast(planName, `Plan save failed! Error: ${err}`, "fail");
391-
})
392384
.then(r => {
393385
if (!r) {
394386
createToast(planName, `Plan ${planName} save failed! Check if server is running.`, "fail");
@@ -425,10 +417,6 @@ if (currUrlParams.includes("plan-name=")) {
425417
// then get the plan details and fill in the form
426418
let planName = currUrlParams.substring(currUrlParams.indexOf("=") + 1);
427419
await apiFetch(`/plan/${planName}`, {method: "GET"})
428-
.catch(err => {
429-
console.error(err);
430-
createToast(planName, `Failed to load plan ${planName}! Error: ${err}`, "fail");
431-
})
432420
.then(r => {
433421
if (!r) {
434422
createToast(planName, `Failed to load plan ${planName}! Check if server is running.`, "fail");

‎app/src/main/resources/ui/main.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -136,22 +136,21 @@ pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
136136
.null { color: magenta; }
137137
.key { color: red; }
138138

139-
/* Toast history button */
139+
/* Toast history button in nav bar */
140140
#toast-history-btn {
141141
transition: all 0.2s ease;
142-
background-color: #ff6e42;
143-
border-color: #ff6e42;
142+
border-color: rgba(255, 255, 255, 0.5);
144143
color: white;
145-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
146-
font-size: 1.2rem;
144+
font-size: 1rem;
145+
padding: 4px 10px;
146+
margin-top: 7px;
147+
margin-right: 10px;
147148
}
148149

149150
#toast-history-btn:hover {
150151
background-color: #ff9100;
151152
border-color: #ff9100;
152153
color: white;
153-
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
154-
transform: scale(1.05);
155154
}
156155

157156
/* Toast show more button */

‎app/src/main/resources/ui/plan/plan.html‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,17 @@
2323
<a href="/connection">Connection</a>
2424
<a href="/plan">Plan</a>
2525
<a href="/history">History</a>
26-
<a href="/shutdown" class="btn btn-danger" style="float: right; margin-right: 5px">Shutdown</a>
26+
<button class="btn btn-danger" style="float: right; margin-right: 5px" data-bs-toggle="modal" data-bs-target="#shutdown-confirm-modal">Shutdown</button>
27+
<button id="toast-history-btn" class="btn btn-outline-light" style="float: right; margin-right: 5px; position: relative;" title="View notification history" data-bs-toggle="modal" data-bs-target="#toast-history-modal">
28+
<i class="bi bi-bell"></i>
29+
<span id="toast-history-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6rem;"></span>
30+
</button>
2731
</nav>
2832
<div>
2933
<h2>Plans</h2>
3034
<a id="create-plan" class="btn btn-primary m-3" href="/">Create new plan</a>
3135
<div class="accordion" id="plan-list"></div>
3236
</div>
33-
<!-- Toast History Button -->
34-
<button id="toast-history-btn" class="btn btn-outline-secondary position-fixed" style="bottom: 20px; right: 80px; z-index: 1050; border-radius: 50%; width: 45px; height: 45px; padding: 0;" title="View notification history" data-bs-toggle="modal" data-bs-target="#toast-history-modal">
35-
<i class="bi bi-bell"></i>
36-
<span id="toast-history-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6rem;"></span>
37-
</button>
38-
3937
<!-- Toast History Modal -->
4038
<div class="modal fade" id="toast-history-modal" tabindex="-1" aria-labelledby="toast-history-modal-label" aria-hidden="true">
4139
<div class="modal-dialog modal-lg modal-dialog-scrollable">
@@ -74,6 +72,26 @@ <h5 class="modal-title" id="error-detail-modal-label"><i class="bi bi-exclamatio
7472
</div>
7573
</div>
7674

75+
<!-- Shutdown Confirmation Modal -->
76+
<div class="modal fade" id="shutdown-confirm-modal" tabindex="-1" aria-labelledby="shutdown-confirm-modal-label" aria-hidden="true">
77+
<div class="modal-dialog">
78+
<div class="modal-content">
79+
<div class="modal-header bg-danger text-white">
80+
<h5 class="modal-title" id="shutdown-confirm-modal-label"><i class="bi bi-exclamation-triangle me-2"></i>Confirm Shutdown</h5>
81+
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
82+
</div>
83+
<div class="modal-body">
84+
<p>Are you sure you want to shutdown the Data Caterer server?</p>
85+
<p class="text-muted mb-0">Any running processes will be terminated.</p>
86+
</div>
87+
<div class="modal-footer">
88+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
89+
<a href="/shutdown" class="btn btn-danger">Shutdown</a>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
7795
<div id="toast-container" class="toast-container position-fixed end-0 p-3" style="z-index: 1060; bottom: 80px;"></div>
7896
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
7997
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

‎docs/use-case/changelog/0.17.3.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ Latest features and fixes for Data Caterer include fixing the connection details
1616
- Connections now display their source (file or config) to indicate whether they can be deleted.
1717
- Added test buttons for existing saved connections in the UI.
1818
- CORS is now configurable via environment variables for stricter security settings.
19+
- Moved toast notification history button to the navigation bar header for better accessibility and to prevent overlapping with page content.
20+
- Added shutdown confirmation modal to prevent accidental server shutdowns.
21+
- Removed unused login button from the UI.
1922

2023
## Bugfix
2124

0 commit comments

Comments
 (0)