Skip to content

Commit 2c703fe

Browse files
devhttpsdevhttps
committed
Create dashboard.html
1 parent 473f368 commit 2c703fe

File tree

1 file changed

+189
-0
lines changed

1 file changed

+189
-0
lines changed

‎modelsync/web/templates/dashboard.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
{% extends "base.html" %}
2+
3+
{% block title %}Dashboard - ModelSync{% endblock %}
4+
5+
{% block content %}
6+
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
7+
<h1 class="h2">Dashboard</h1>
8+
<div class="btn-toolbar mb-2 mb-md-0">
9+
<div class="btn-group me-2">
10+
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
11+
</div>
12+
</div>
13+
</div>
14+
15+
<!-- Metrics Cards -->
16+
<div class="row mb-4">
17+
<div class="col-xl-3 col-md-6 mb-4">
18+
<div class="card metric-card h-100">
19+
<div class="card-body">
20+
<div class="row no-gutters align-items-center">
21+
<div class="col mr-2">
22+
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
23+
Experiment Branches
24+
</div>
25+
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ branches_count }}</div>
26+
</div>
27+
<div class="col-auto">
28+
<i class="fas fa-code-branch fa-2x text-gray-300"></i>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div class="col-xl-3 col-md-6 mb-4">
36+
<div class="card metric-card h-100">
37+
<div class="card-body">
38+
<div class="row no-gutters align-items-center">
39+
<div class="col mr-2">
40+
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
41+
Models
42+
</div>
43+
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ models_count }}</div>
44+
</div>
45+
<div class="col-auto">
46+
<i class="fas fa-cube fa-2x text-gray-300"></i>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<div class="col-xl-3 col-md-6 mb-4">
54+
<div class="card metric-card h-100">
55+
<div class="card-body">
56+
<div class="row no-gutters align-items-center">
57+
<div class="col mr-2">
58+
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
59+
Datasets
60+
</div>
61+
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ datasets_count }}</div>
62+
</div>
63+
<div class="col-auto">
64+
<i class="fas fa-database fa-2x text-gray-300"></i>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
71+
<div class="col-xl-3 col-md-6 mb-4">
72+
<div class="card metric-card h-100">
73+
<div class="card-body">
74+
<div class="row no-gutters align-items-center">
75+
<div class="col mr-2">
76+
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
77+
Deployments
78+
</div>
79+
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ deployments_count }}</div>
80+
</div>
81+
<div class="col-auto">
82+
<i class="fas fa-rocket fa-2x text-gray-300"></i>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
90+
<!-- Recent Activity -->
91+
<div class="row">
92+
<div class="col-lg-8">
93+
<div class="card">
94+
<div class="card-header">
95+
<h6 class="m-0 font-weight-bold text-primary">Recent Activity</h6>
96+
</div>
97+
<div class="card-body">
98+
{% if recent_activity %}
99+
<div class="timeline">
100+
{% for activity in recent_activity %}
101+
<div class="timeline-item">
102+
<div class="timeline-marker bg-primary"></div>
103+
<div class="timeline-content">
104+
<h6 class="timeline-title">
105+
<i class="fas fa-flask"></i> {{ activity.name }}
106+
<span class="badge bg-secondary status-badge">{{ activity.branch }}</span>
107+
</h6>
108+
<p class="timeline-text">
109+
{% for metric, value in activity.metrics.items() %}
110+
<span class="badge bg-info me-1">{{ metric }}: {{ "%.3f"|format(value) }}</span>
111+
{% endfor %}
112+
</p>
113+
<small class="text-muted">{{ activity.timestamp }}</small>
114+
</div>
115+
</div>
116+
{% endfor %}
117+
</div>
118+
{% else %}
119+
<p class="text-muted">No recent activity</p>
120+
{% endif %}
121+
</div>
122+
</div>
123+
</div>
124+
125+
<div class="col-lg-4">
126+
<div class="card">
127+
<div class="card-header">
128+
<h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
129+
</div>
130+
<div class="card-body">
131+
<div class="d-grid gap-2">
132+
<a href="/experiments" class="btn btn-primary">
133+
<i class="fas fa-plus"></i> New Experiment
134+
</a>
135+
<a href="/models" class="btn btn-outline-primary">
136+
<i class="fas fa-upload"></i> Upload Model
137+
</a>
138+
<a href="/datasets" class="btn btn-outline-primary">
139+
<i class="fas fa-database"></i> Add Dataset
140+
</a>
141+
<a href="/deployments" class="btn btn-outline-primary">
142+
<i class="fas fa-cog"></i> Configure Deployment
143+
</a>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
{% endblock %}
150+
151+
{% block scripts %}
152+
<style>
153+
.timeline {
154+
position: relative;
155+
padding-left: 30px;
156+
}
157+
158+
.timeline-item {
159+
position: relative;
160+
margin-bottom: 20px;
161+
}
162+
163+
.timeline-marker {
164+
position: absolute;
165+
left: -30px;
166+
top: 5px;
167+
width: 12px;
168+
height: 12px;
169+
border-radius: 50%;
170+
}
171+
172+
.timeline-content {
173+
background: #f8f9fa;
174+
padding: 15px;
175+
border-radius: 5px;
176+
border-left: 3px solid #007bff;
177+
}
178+
179+
.timeline-title {
180+
margin-bottom: 5px;
181+
font-size: 1rem;
182+
}
183+
184+
.timeline-text {
185+
margin-bottom: 5px;
186+
font-size: 0.9rem;
187+
}
188+
</style>
189+
{% endblock %}

0 commit comments

Comments
 (0)