Spaces:
Sleeping
Sleeping
style: improve dashboard responsiveness and increase health monitor interval to 30 seconds
Browse files- health-server.js +51 -3
health-server.js
CHANGED
|
@@ -117,9 +117,11 @@ function renderDashboard() {
|
|
| 117 |
color: var(--text);
|
| 118 |
display: flex;
|
| 119 |
justify-content: center;
|
| 120 |
-
align-items:
|
| 121 |
min-height: 100vh;
|
| 122 |
-
overflow: hidden;
|
|
|
|
|
|
|
| 123 |
background-image:
|
| 124 |
radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
|
| 125 |
radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
|
|
@@ -135,6 +137,7 @@ function renderDashboard() {
|
|
| 135 |
padding: 40px;
|
| 136 |
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
| 137 |
animation: fadeIn 0.8s ease-out;
|
|
|
|
| 138 |
}
|
| 139 |
|
| 140 |
@keyframes fadeIn {
|
|
@@ -380,6 +383,51 @@ function renderDashboard() {
|
|
| 380 |
font-weight: 600;
|
| 381 |
cursor: pointer;
|
| 382 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 383 |
</style>
|
| 384 |
</head>
|
| 385 |
<body>
|
|
@@ -680,7 +728,7 @@ async function createUptimeRobotMonitor(apiKey, host) {
|
|
| 680 |
type: "1",
|
| 681 |
friendly_name: `HuggingClaw ${cleanHost}`,
|
| 682 |
url: monitorUrl,
|
| 683 |
-
interval: "
|
| 684 |
});
|
| 685 |
|
| 686 |
if (created.stat !== "ok") {
|
|
|
|
| 117 |
color: var(--text);
|
| 118 |
display: flex;
|
| 119 |
justify-content: center;
|
| 120 |
+
align-items: flex-start;
|
| 121 |
min-height: 100vh;
|
| 122 |
+
overflow-x: hidden;
|
| 123 |
+
overflow-y: auto;
|
| 124 |
+
padding: 24px 0;
|
| 125 |
background-image:
|
| 126 |
radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
|
| 127 |
radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
|
|
|
|
| 137 |
padding: 40px;
|
| 138 |
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
| 139 |
animation: fadeIn 0.8s ease-out;
|
| 140 |
+
margin: 24px 0;
|
| 141 |
}
|
| 142 |
|
| 143 |
@keyframes fadeIn {
|
|
|
|
| 383 |
font-weight: 600;
|
| 384 |
cursor: pointer;
|
| 385 |
}
|
| 386 |
+
|
| 387 |
+
@media (max-width: 700px) {
|
| 388 |
+
body {
|
| 389 |
+
padding: 16px 0;
|
| 390 |
+
}
|
| 391 |
+
|
| 392 |
+
.dashboard {
|
| 393 |
+
width: calc(100% - 24px);
|
| 394 |
+
padding: 24px;
|
| 395 |
+
border-radius: 18px;
|
| 396 |
+
margin: 12px 0;
|
| 397 |
+
}
|
| 398 |
+
|
| 399 |
+
header {
|
| 400 |
+
margin-bottom: 28px;
|
| 401 |
+
}
|
| 402 |
+
|
| 403 |
+
h1 {
|
| 404 |
+
font-size: 2rem;
|
| 405 |
+
}
|
| 406 |
+
|
| 407 |
+
.stats-grid {
|
| 408 |
+
grid-template-columns: 1fr;
|
| 409 |
+
gap: 14px;
|
| 410 |
+
margin-bottom: 20px;
|
| 411 |
+
}
|
| 412 |
+
|
| 413 |
+
.stat-btn {
|
| 414 |
+
grid-column: span 1;
|
| 415 |
+
}
|
| 416 |
+
|
| 417 |
+
.stat-card {
|
| 418 |
+
padding: 16px;
|
| 419 |
+
}
|
| 420 |
+
|
| 421 |
+
.helper-row {
|
| 422 |
+
flex-direction: column;
|
| 423 |
+
}
|
| 424 |
+
|
| 425 |
+
.helper-input,
|
| 426 |
+
.helper-button {
|
| 427 |
+
width: 100%;
|
| 428 |
+
min-width: 0;
|
| 429 |
+
}
|
| 430 |
+
}
|
| 431 |
</style>
|
| 432 |
</head>
|
| 433 |
<body>
|
|
|
|
| 728 |
type: "1",
|
| 729 |
friendly_name: `HuggingClaw ${cleanHost}`,
|
| 730 |
url: monitorUrl,
|
| 731 |
+
interval: "30",
|
| 732 |
});
|
| 733 |
|
| 734 |
if (created.stat !== "ok") {
|