mirror of
https://github.com/woodchen-ink/proxy-go.git
synced 2025-07-18 16:41:54 +08:00
fix(metrics): update metrics dashboard styles and improve status code display
This commit is contained in:
parent
3270bb5f36
commit
d69d34bb5d
@ -298,12 +298,13 @@ var metricsTemplate = `
|
|||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: black;
|
color: white;
|
||||||
}
|
}
|
||||||
.status-2xx { background: #28a745; }
|
.status-2xx { background: #28a745; }
|
||||||
.status-3xx { background: #17a2b8; }
|
.status-3xx { background: #17a2b8; }
|
||||||
.status-4xx { background: #ffc107; }
|
.status-4xx { background: #ffc107; }
|
||||||
.status-5xx { background: #dc3545; }
|
.status-5xx { background: #dc3545; }
|
||||||
|
.status-other { background: #000000; }
|
||||||
.grid-container {
|
.grid-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
@ -388,41 +389,37 @@ var metricsTemplate = `
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
+ #statusCodes {
|
+ #statusCodes {
|
||||||
+ display: flex;
|
|
||||||
+ flex-direction: row;
|
|
||||||
+ gap: 10px;
|
|
||||||
+ align-items: center;
|
|
||||||
+ padding: 10px;
|
+ padding: 10px;
|
||||||
+ background: #f8f9fa;
|
+ background: #f8f9fa;
|
||||||
+ border-radius: 8px;
|
+ border-radius: 8px;
|
||||||
+ flex-wrap: nowrap;
|
|
||||||
+ overflow-x: auto;
|
|
||||||
+ white-space: nowrap;
|
|
||||||
+ justify-content: flex-start;
|
|
||||||
+ }
|
+ }
|
||||||
+
|
+
|
||||||
+ #statusCodes .metric {
|
+ .status-row {
|
||||||
+ flex: 0 0 auto;
|
+ display: flex;
|
||||||
|
+ flex-direction: column;
|
||||||
|
+ gap: 8px;
|
||||||
|
+ }
|
||||||
|
+
|
||||||
|
+ .status-labels, .status-values {
|
||||||
+ display: flex;
|
+ display: flex;
|
||||||
+ align-items: center;
|
|
||||||
+ justify-content: space-between;
|
+ justify-content: space-between;
|
||||||
+ padding: 4px 12px;
|
+ gap: 10px;
|
||||||
+ background: white;
|
|
||||||
+ border-radius: 4px;
|
|
||||||
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
+ margin-right: 10px;
|
|
||||||
+ min-width: 100px;
|
|
||||||
+ height: 32px;
|
|
||||||
+ }
|
|
||||||
+ #statusCodes .metric:last-child {
|
|
||||||
+ margin-right: 0;
|
|
||||||
+ }
|
+ }
|
||||||
|
+
|
||||||
+ .status-badge {
|
+ .status-badge {
|
||||||
+ padding: 3px 8px;
|
+ flex: 1;
|
||||||
+ border-radius: 12px;
|
+ text-align: center;
|
||||||
|
+ padding: 4px 8px;
|
||||||
|
+ border-radius: 4px;
|
||||||
+ font-size: 12px;
|
+ font-size: 12px;
|
||||||
+ color: white;
|
+ color: white;
|
||||||
+ margin-right: 8px;
|
+ min-width: 60px;
|
||||||
|
+ }
|
||||||
|
+
|
||||||
|
+ .metric-value {
|
||||||
|
+ flex: 1;
|
||||||
|
+ text-align: center;
|
||||||
|
+ min-width: 60px;
|
||||||
+ }
|
+ }
|
||||||
+ .loading {
|
+ .loading {
|
||||||
+ position: relative;
|
+ position: relative;
|
||||||
@ -689,18 +686,28 @@ var metricsTemplate = `
|
|||||||
document.getElementById('bytesPerSecond').textContent = formatBytes(data.bytes_per_second) + '/s';
|
document.getElementById('bytesPerSecond').textContent = formatBytes(data.bytes_per_second) + '/s';
|
||||||
|
|
||||||
// 更新状态码计
|
// 更新状态码计
|
||||||
const statusCodesHtml = Object.entries(data.status_code_stats)
|
const statusCodesHtml = '<div class="status-row">' +
|
||||||
.sort((a, b) => a[0].localeCompare(b[0])) // 按状态码排序
|
'<div class="status-labels">' +
|
||||||
.map(([status, count]) => {
|
Object.entries(data.status_code_stats)
|
||||||
const statusClass = 'status-' + status.charAt(0) + 'xx';
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||||
return '<div class="metric">' +
|
.map(([status, _]) => {
|
||||||
'<span class="status-badge ' + statusClass + '">' + status + '</span>' +
|
const firstDigit = status.charAt(0);
|
||||||
'<span class="metric-value">' + count.toLocaleString() + '</span>' +
|
const statusClass = (firstDigit >= '2' && firstDigit <= '5')
|
||||||
'</div>';
|
? 'status-' + firstDigit + 'xx'
|
||||||
})
|
: 'status-other';
|
||||||
.join('');
|
return '<span class="status-badge ' + statusClass + '">' + status + '</span>';
|
||||||
|
}).join('') +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="status-values">' +
|
||||||
|
Object.entries(data.status_code_stats)
|
||||||
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||||
|
.map(([_, count]) => {
|
||||||
|
return '<span class="metric-value">' + count.toLocaleString() + '</span>';
|
||||||
|
}).join('') +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
const statusCodesContainer = document.getElementById('statusCodes');
|
const statusCodesContainer = document.getElementById('statusCodes');
|
||||||
statusCodesContainer.style.flexDirection = 'row'; // 强制横向排列
|
|
||||||
statusCodesContainer.innerHTML = statusCodesHtml;
|
statusCodesContainer.innerHTML = statusCodesHtml;
|
||||||
|
|
||||||
// 更新热门路径
|
// 更新热门路径
|
||||||
@ -1101,7 +1108,7 @@ func (h *ProxyHandler) MetricsHistoryHandler(w http.ResponseWriter, r *http.Requ
|
|||||||
json.NewEncoder(w).Encode(metrics)
|
json.NewEncoder(w).Encode(metrics)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加安全的类型转换辅助函数
|
// 添加安全的类型转<EFBFBD><EFBFBD><EFBFBD>辅助函数
|
||||||
func safeStatusCodeStats(v interface{}) map[string]int64 {
|
func safeStatusCodeStats(v interface{}) map[string]int64 {
|
||||||
if v == nil {
|
if v == nil {
|
||||||
return make(map[string]int64)
|
return make(map[string]int64)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user