fix(metrics): update metrics dashboard styles and SQL query

- Enhanced CSS styles for the metrics dashboard, improving layout and visual presentation with new flex properties and background adjustments.
- Modified the SQL query in GetRecentMetrics to include an additional interval parameter, ensuring more accurate data retrieval for recent metrics.
- These changes improve the user experience and data accuracy in the metrics dashboard, providing a more robust framework for performance monitoring.
This commit is contained in:
wood chen 2024-12-05 08:03:03 +08:00
parent e286fa9eaf
commit 96a792abf2
2 changed files with 15 additions and 6 deletions

View File

@ -393,22 +393,31 @@ var metricsTemplate = `
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 10px;
+ justify-content: flex-start;
+ background: #f8f9fa;
+ border-radius: 8px;
+ overflow-x: auto;
+ white-space: nowrap;
+ }
+
+ #statusCodes .metric {
+ flex: 0 0 auto;
+ display: flex;
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ padding: 5px 15px;
+ background: #f8f9fa;
+ padding: 4px 12px;
+ background: white;
+ border-radius: 20px;
+ margin: 0;
+ border: none;
+ min-width: 100px;
+ min-width: 80px;
+ justify-content: space-between;
+ margin-right: 10px;
+ display: inline-block;
+ }
+ #statusCodes .metric:last-child {
+ margin-right: 0;
+ }
+
.status-badge {
padding: 3px 8px;
border-radius: 12px;

View File

@ -535,7 +535,7 @@ func (db *MetricsDB) GetRecentMetrics(hours float64) ([]HistoricalMetrics, error
LEFT JOIN grouped_metrics m ON strftime(?, ts.time_point, 'localtime') = m.group_time
ORDER BY timestamp DESC
LIMIT 1000
`, endTimeStr, timeStep, startTimeStr, interval, startTimeStr, endTimeStr, interval)
`, endTimeStr, timeStep, startTimeStr, interval, startTimeStr, endTimeStr, interval, interval)
if err != nil {
return nil, err
}