Skip to content

Technical Task 2: Error & loading state integration across all admin pages #902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mraula merged 2 commits into from
May 11, 2026
Merged

Technical Task 2: Error & loading state integration across all admin pages #902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cdb96f2
Technical Task 2: Error & loading state integration across all admin …
mankiratt May 11, 2026
3562921
Merge branch 'main' into EHMI/ms/technical-task-1
mankiratt May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
369 changes: 232 additions & 137 deletions src/Components/HMI/ui/public/admin/admin-nodes.html
View file
Open in desktop

Large diffs are not rendered by default.

422 changes: 203 additions & 219 deletions src/Components/HMI/ui/public/admin/admin-request.html
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 20 additions & 22 deletions src/Components/HMI/ui/public/admin/api-explorer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,28 @@
<link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
<link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />

<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>

<!-- Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Sidebar + App JS -->
<script src="/admin/js/sidebarmenu.js"></script>
<script src="/admin/js/app.min.js"></script>

<!-- Simplebar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

<script src="/admin/js/admin-page-state.js"></script>
</head>

<body>
<!-- Page Wrapper -->
<div
class="page-wrapper"
id="main-wrapper"
Expand All @@ -44,16 +40,29 @@
data-sidebar-position="fixed"
data-header-position="fixed"
>
<!-- Sidebar -->
<div id="sidebar"></div>

<!-- Main Content -->
<div class="body-wrapper">
<div id="header"></div>

<div class="container-fluid">
<div class="admin-page-status">
<div class="admin-error-banner d-none" role="alert" aria-live="polite">
<div class="admin-error-banner__content">
<i class="ti ti-alert-circle"></i>
<span>Something went wrong while loading this page.</span>
</div>
<button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
<i class="ti ti-x"></i>
</button>
</div>

<div class="admin-loading-spinner d-none" role="status" aria-live="polite">
<div class="spinner-border text-danger" aria-hidden="true"></div>
<span class="admin-loading-spinner__text">Loading...</span>
</div>
</div>

<!-- Header Row -->
<div class="d-flex align-items-start justify-content-between flex-wrap gap-2 mb-3">
<div>
<h5 class="fw-semibold mb-1">API Explorer</h5>
Expand All @@ -69,11 +78,8 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
</div>
</div>

<!-- Main Card -->
<div class="card">
<div class="card-body">

<!-- Endpoint Builder -->
<div class="row g-3 mb-3">
<div class="col-12 col-lg-3">
<label class="form-label">Start (epoch)</label>
Expand Down Expand Up @@ -103,16 +109,12 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
</div>
</div>

<!-- Action Buttons -->
<div class="d-flex gap-2 flex-wrap mb-3">
<button class="btn btn-primary" id="testBtn">Test</button>
<button class="btn btn-outline-secondary" id="clearBtn">Clear Output</button>
</div>

<!-- Content Row -->
<div class="row g-3">

<!-- Endpoint List -->
<div class="col-12 col-lg-4">
<div class="fw-semibold mb-2">Available now</div>
<div class="list-group mb-3">
Expand Down Expand Up @@ -142,7 +144,6 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
</div>
</div>

<!-- Response -->
<div class="col-12 col-lg-8">
<div class="fw-semibold mb-2">Response</div>
<pre
Expand All @@ -151,7 +152,6 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
style="min-height: 320px; overflow:auto;"
>Click "Test" to send a request.</pre>
</div>

</div>
</div>
</div>
Expand All @@ -160,7 +160,6 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
</div>
</div>

<!-- Load sidebar / header / footer -->
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").load("/admin/component/sidebar-component.html", function () {
Expand All @@ -171,9 +170,8 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
});
</script>

<!-- Page Logic -->
<script src="./js/api-explorer.js"></script>
<script src="/admin/js/api-explorer.js"></script>

<div id="footer"></div>
</body>
</html>
</html>
120 changes: 49 additions & 71 deletions src/Components/HMI/ui/public/admin/cloud-compute.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,17 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cloud compute</title>
<title>Cloud Compute</title>

<link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
<link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />

<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>

<!-- Font Awesome (icons) -->
<script
type="text/javascript"
src="https://kit.fontawesome.com/8aa980d912.js"
Expand All @@ -28,7 +26,6 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>

<!-- jQuery + daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<link
rel="stylesheet"
Expand All @@ -41,26 +38,22 @@
src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"
></script>

<!-- Existing Echo admin JS -->
<script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
<script type="text/javascript" src="/admin/js/app.min.js"></script>

<!-- ApexCharts (for graphs) -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<!-- Simplebar -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
/>
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

<!-- Existing dashboard JS -->
<script type="text/javascript" src="/admin/js/dashboard.js"></script>
<!-- Shared admin page state -->
<script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
</head>

<body>
<!-- Body Wrapper -->
<div
class="page-wrapper"
id="main-wrapper"
Expand All @@ -70,15 +63,33 @@
data-sidebar-position="fixed"
data-header-position="fixed"
>
<!-- Sidebar Start -->
<div id="sidebar"></div>
<!-- Sidebar End -->

<!-- Main wrapper -->
<div class="body-wrapper">
<div id="header"></div>

<div class="container-fluid">
<!-- Shared page status UI -->
<div class="admin-page-status">
<div class="admin-error-banner d-none" role="alert" aria-live="polite">
<div class="admin-error-banner__content">
<i class="ti ti-alert-circle"></i>
<span>Something went wrong while loading this page.</span>
</div>
<button
type="button"
class="admin-error-banner__dismiss"
aria-label="Dismiss error message"
>
<i class="ti ti-x"></i>
</button>
</div>

<div class="admin-loading-spinner d-none" role="status" aria-live="polite">
<div class="spinner-border text-danger" aria-hidden="true"></div>
<span class="admin-loading-spinner__text">Loading...</span>
</div>
</div>

<!-- Page Title -->
<div class="row">
Expand All @@ -95,41 +106,25 @@ <h3 class="fw-semibold mb-4">Cloud Compute Management</h3>
<h6 class="fw-semibold mb-3">Compute Metrics</h6>

<div class="row">
<!-- CPU -->
<div class="col-12 col-md-4 mb-3 mb-md-0">
<p class="text-muted mb-1">CPU Usage</p>
<h3 id="cpu-usage-value" class="fw-semibold mb-1">45%</h3>
<p id="cpu-trend-text" class="text-muted mb-0">
Trend: Rising ↑
</p>
<p id="cpu-trend-text" class="text-muted mb-0">Trend: Rising ↑</p>
</div>

<!-- Memory -->
<div class="col-12 col-md-4 mb-3 mb-md-0">
<p class="text-muted mb-1">Memory Load</p>
<h3 id="memory-usage-value" class="fw-semibold mb-1">
6 / 16 GB
</h3>
<p id="memory-load-text" class="text-muted mb-0">
Avg load: Medium
</p>
<h3 id="memory-usage-value" class="fw-semibold mb-1">6 / 16 GB</h3>
<p id="memory-load-text" class="text-muted mb-0">Avg load: Medium</p>
</div>

<!-- Storage -->
<div class="col-12 col-md-4">
<p class="text-muted mb-1">Storage Capacity</p>
<h3 id="storage-usage-value" class="fw-semibold mb-1">
1.3 / 3 TB
</h3>
<p id="storage-growth-text" class="text-muted mb-0">
Growth: 8% weekly
</p>
<p id="storage-forecast-text" class="text-muted mb-0">
Forecast: Full in 3 months
</p>
<h3 id="storage-usage-value" class="fw-semibold mb-1">1.3 / 3 TB</h3>
<p id="storage-growth-text" class="text-muted mb-0">Growth: 8% weekly</p>
<p id="storage-forecast-text" class="text-muted mb-0">Forecast: Full in 3 months</p>
</div>
</div>

</div>
</div>
</div>
Expand All @@ -143,20 +138,14 @@ <h3 id="storage-usage-value" class="fw-semibold mb-1">
<h6 class="fw-semibold mb-3">Cost &amp; Billing Forecast</h6>

<div class="row align-items-stretch">
<!-- Cost numbers -->
<div class="col-12 col-md-6 mb-3 mb-md-0">
<p class="text-muted mb-1">Current Monthly Spending</p>
<h4 id="current-cost-amount" class="fw-semibold mb-3">
$315.06 AUD
</h4>
<h4 id="current-cost-amount" class="fw-semibold mb-3">$315.06 AUD</h4>

<p class="text-muted mb-1">Estimated End-of-Month Cost</p>
<h4 id="forecast-cost-amount" class="fw-semibold mb-0">
$530.18 AUD
</h4>
<h4 id="forecast-cost-amount" class="fw-semibold mb-0">$530.18 AUD</h4>
</div>

<!-- Cost Chart Placeholder -->
<div class="col-12 col-md-6 d-flex align-items-center">
<div class="w-100">
<p class="text-muted mb-2">Cost Over Time</p>
Expand All @@ -173,8 +162,7 @@ <h4 id="forecast-cost-amount" class="fw-semibold mb-0">
</div>
</div>
</div>

</div> <!-- row -->
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -209,53 +197,43 @@ <h6 class="fw-semibold mb-3">CPU / Memory / Storage Usage Over Time</h6>
<div class="col-12 mb-4">
<div class="card">
<div class="card-body d-flex flex-wrap gap-2">
<button
type="button"
class="btn btn-primary"
id="btn-scale-up"
>
<button type="button" class="btn btn-primary" id="btn-scale-up">
Scale Up Resources
</button>

<button
type="button"
class="btn btn-outline-primary"
id="btn-scale-down"
>
<button type="button" class="btn btn-outline-primary" id="btn-scale-down">
Scale Down Resources
</button>

<button
type="button"
class="btn btn-outline-secondary"
id="btn-customise-alerts"
>
<button type="button" class="btn btn-outline-secondary" id="btn-customise-alerts">
Customise Alerts
</button>
</div>
</div>
</div>
</div>
</div>

</div> <!-- /container-fluid -->
<div id="footer"></div>
</div>
</div> <!-- /body-wrapper -->
</div> <!-- /page-wrapper -->
</div>
</div>

<!-- Load sidebar + header -->
<script type="text/javascript">
$(document).ready(function() {
console.log("Start!");
$("#sidebar").load("/admin/component/sidebar-component.html");
$("#sidebar").load("/admin/component/sidebar-component.html", function() {
$.getScript('/admin/js/sidebarmenu.js');
});
$("#header").load("/admin/component/header-component.html");
$("#footer").load("/admin/component/footer-component.html");
});
</script>

<!-- Cloud Compute page JS (fake data + charts + buttons) -->
<script src="./admin/js/cloud-compute.js"></script>
const pageState = createAdminPageState();
pageState.resetPageState();
</script>

<!-- Cloud Compute page JS -->
<script type="text/javascript" src="/admin/js/cloud-compute.js"></script>
</body>

</html>
</html>
Loading
Loading