Skip to content

Commit 18c28fc

Browse files
andrewm4894andrewm4894
authored
Merge pull request #137 from andrewm4894/dashboard-clean-up
Dashboard clean up
2 parents 3727c80 + 6221778 commit 18c28fc

File tree

11 files changed

+1279
-999
lines changed

11 files changed

+1279
-999
lines changed

‎Makefile‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ requirements:
5656
pip-compile requirements.compile
5757

5858
dashboard:
59-
python dashboard/dashboard.py
59+
python dashboard/app.py
6060

6161
dashboardd:
62-
nohup python dashboard/dashboard.py > /dev/null 2>&1 &
62+
nohup python dashboard/app.py > /dev/null 2>&1 &

‎dashboard/README.md‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
11
# Dashboard
22

3-
- [`dashboard.py`](dashboard.py): [FastHTML](https://fastht.ml/) dashboard for the project (WIP).
3+
- [`app.py`](app.py): [FastHTML](https://fastht.ml/) dashboard for the project (WIP).
4+
- [`charts.py`](charts.py): Chart manager for the dashboard.
5+
- [`components.py`](components.py): Components for the dashboard.
6+
- [`constants.py`](constants.py): Constants for the dashboard.
7+
- [`data.py`](data.py): Data manager for the dashboard.
8+
- [`routes.py`](routes.py): Routes for the dashboard.
9+
- [`state.py`](state.py): State manager for the dashboard.
10+
- [`utils.py`](utils.py): Utility functions for the dashboard.
11+
12+
## Running the dashboard
13+
14+
```bash
15+
make dashboard
16+
```
17+
18+
## Running the dashboard in the background
19+
20+
```bash
21+
make dashboardd
22+
```
23+
24+
To stop:
25+
26+
```bash
27+
make kill-dashboardd
28+
```

‎dashboard/app.py‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
"""
2+
Anomstack Dashboard
3+
4+
This is a dashboard for the Anomstack project. It is a web application that allows you to view and analyze metrics from the Anomstack project.
5+
6+
It is built with FastHTML and MonsterUI.
7+
8+
"""
9+
10+
import logging
11+
12+
from fasthtml.common import *
13+
from monsterui.all import *
14+
from fasthtml.svg import *
15+
16+
from routes import *
17+
from components import *
18+
from constants import *
19+
from state import AppState
20+
21+
22+
log = logging.getLogger("anomstack")
23+
24+
25+
app, rt = fast_app(
26+
hdrs=(
27+
Theme.blue.headers(),
28+
Script(src="https://cdn.plot.ly/plotly-2.32.0.min.js"),
29+
Link(
30+
rel="icon",
31+
type="image/svg+xml",
32+
href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoYXJ0LWxpbmUiPjxwYXRoIGQ9Ik0zIDN2MTZhMiAyIDAgMCAwIDIgMmgxNiIvPjxwYXRoIGQ9Im0xOSA5LTUgNS00LTQtMyAzIi8+PC9zdmc+",
33+
),
34+
Style(
35+
"""
36+
/* Light mode defaults */
37+
body {
38+
background-color: #ffffff;
39+
color: #1a1a1a;
40+
transition: all 0.3s ease;
41+
}
42+
43+
.loading-indicator {
44+
display: none;
45+
position: fixed;
46+
top: 1rem;
47+
right: 1rem;
48+
z-index: 1000;
49+
}
50+
.loading-indicator .htmx-indicator {
51+
padding: 0.5rem 1rem;
52+
background: #fff;
53+
border-radius: 4px;
54+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
55+
}
56+
.loading-indicator .htmx-indicator.htmx-request {
57+
display: inline-block;
58+
}
59+
.top-nav {
60+
border-bottom: 1px solid #e5e7eb;
61+
background: #f8fafc;
62+
}
63+
.top-nav li {
64+
margin: 0;
65+
}
66+
.top-nav li a {
67+
font-weight: 500;
68+
color: #4b5563;
69+
transition: all 0.2s;
70+
}
71+
.top-nav li a:hover {
72+
color: #1e40af;
73+
background: #f1f5f9;
74+
}
75+
.top-nav li.uk-active a {
76+
color: #1e40af;
77+
border-bottom: 2px solid #1e40af;
78+
}
79+
80+
/* Dark mode styles */
81+
body.dark-mode {
82+
background-color: #1a1a1a;
83+
color: #e5e7eb;
84+
}
85+
86+
body.dark-mode .uk-card {
87+
background-color: #262626;
88+
border-color: #404040;
89+
color: #e5e7eb;
90+
}
91+
92+
body.dark-mode .uk-card-header {
93+
border-color: #404040;
94+
}
95+
96+
body.dark-mode .top-nav {
97+
background: #262626;
98+
border-color: #404040;
99+
}
100+
101+
body.dark-mode .top-nav li a {
102+
color: #e5e7eb;
103+
}
104+
105+
body.dark-mode .top-nav li a:hover {
106+
color: #60a5fa;
107+
background: #333333;
108+
}
109+
110+
body.dark-mode .top-nav li.uk-active a {
111+
color: #60a5fa;
112+
border-color: #60a5fa;
113+
}
114+
115+
body.dark-mode .uk-input,
116+
body.dark-mode .uk-select,
117+
body.dark-mode .uk-textarea,
118+
body.dark-mode .uk-button-secondary {
119+
background-color: #333333;
120+
border-color: #404040;
121+
color: #e5e7eb;
122+
}
123+
124+
body.dark-mode .uk-dropdown {
125+
background-color: #262626;
126+
border-color: #404040;
127+
color: #e5e7eb;
128+
}
129+
130+
body.dark-mode .uk-dropdown li a {
131+
color: #e5e7eb;
132+
}
133+
134+
body.dark-mode .uk-dropdown li a:hover {
135+
background-color: #333333;
136+
}
137+
138+
body.dark-mode .loading-indicator .htmx-indicator {
139+
background: #262626;
140+
color: #e5e7eb;
141+
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
142+
}
143+
144+
/* Ensure text colors are readable in dark mode */
145+
body.dark-mode h1,
146+
body.dark-mode h2,
147+
body.dark-mode h3,
148+
body.dark-mode h4,
149+
body.dark-mode h5,
150+
body.dark-mode h6,
151+
body.dark-mode p {
152+
color: #e5e7eb;
153+
}
154+
155+
body.dark-mode .text-muted-foreground,
156+
body.dark-mode .uk-text-muted {
157+
color: #9ca3af;
158+
}
159+
160+
/* Update dark mode button styles */
161+
body.dark-mode .uk-button-default,
162+
body.dark-mode .uk-button-secondary {
163+
background-color: #1f1f1f; /* Darker background */
164+
color: #e5e7eb;
165+
border-color: #2d2d2d; /* Slightly lighter border */
166+
}
167+
168+
body.dark-mode .uk-button-default:hover,
169+
body.dark-mode .uk-button-secondary:hover {
170+
background-color: #2d2d2d; /* Darker hover state */
171+
color: #ffffff;
172+
border-color: #404040;
173+
}
174+
175+
body.dark-mode .uk-button-primary {
176+
background-color: #0f2d66; /* Darker blue */
177+
color: #ffffff;
178+
border: none;
179+
}
180+
181+
body.dark-mode .uk-button-primary:hover {
182+
background-color: #1a3f80; /* Slightly lighter on hover */
183+
}
184+
185+
/* Switch styles */
186+
.uk-toggle-switch {
187+
appearance: none;
188+
position: relative;
189+
width: 32px; /* Reduced from 40px */
190+
height: 18px; /* Reduced from 24px */
191+
border-radius: 9px; /* Reduced from 12px */
192+
background-color: #e5e7eb;
193+
cursor: pointer;
194+
transition: all 0.3s ease;
195+
}
196+
197+
.uk-toggle-switch:checked {
198+
background-color: #1e40af;
199+
}
200+
201+
.uk-toggle-switch::before {
202+
content: '';
203+
position: absolute;
204+
left: 2px;
205+
top: 2px;
206+
width: 14px; /* Reduced from 20px */
207+
height: 14px; /* Reduced from 20px */
208+
border-radius: 50%;
209+
background-color: white;
210+
transition: transform 0.3s ease;
211+
}
212+
213+
.uk-toggle-switch:checked::before {
214+
transform: translateX(14px); /* Reduced from 16px */
215+
}
216+
217+
/* Dark mode switch styles */
218+
body.dark-mode .uk-toggle-switch {
219+
background-color: #4b5563;
220+
}
221+
222+
body.dark-mode .uk-toggle-switch:checked {
223+
background-color: #60a5fa;
224+
}
225+
226+
body.dark-mode .uk-toggle-switch::before {
227+
background-color: #e5e7eb;
228+
}
229+
"""
230+
),
231+
),
232+
debug=True,
233+
log=log,
234+
)
235+
236+
237+
setup_toasts(app, duration=3)
238+
239+
app.state = AppState()
240+
241+
serve(host="localhost", port=5003)

0 commit comments

Comments
 (0)