haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-04-29 03:35:08 +00:00
Code Issues Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
孙永强 2025-04-10 15:22:13 +08:00
parent d26b91e8c4
commit e63b7532cc
2 changed files with 93 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/pages/sys-admin/statistic/statistic-metrics.js
View File

@ -4,11 +4,34 @@ import { systemAdminAPI } from '../../../utils/system-admin-api';
import MainPanelTopbar from '../main-panel-topbar'; import MainPanelTopbar from '../main-panel-topbar';
import StatisticNav from './statistic-nav'; import StatisticNav from './statistic-nav';
import { gettext } from '../../../utils/constants'; import { gettext } from '../../../utils/constants';
import { Tooltip } from 'reactstrap';
class ComponentMetricsTable extends Component { class ComponentMetricsTable extends Component {
constructor(props) {
super(props);
this.state = {
hoveredRow: null,
tooltipOpen: null
};
}
toggleTooltip = (id) => {
this.setState(prevState => ({
tooltipOpen: prevState.tooltipOpen === id ? null : id
}));
};
handleRowHover = (id) => {
this.setState({ hoveredRow: id });
};
handleRowLeave = () => {
this.setState({ hoveredRow: null });
};
render() { render() {
const { componentName, metrics } = this.props; const { componentName, metrics } = this.props;
const { hoveredRow, tooltipOpen } = this.state;
return ( return (
<> <>
<tr className="component-header"> <tr className="component-header">
@ -19,22 +42,55 @@ class ComponentMetricsTable extends Component {
</td> </td>
</tr> </tr>
{metrics.map((metric) => ( {metrics.map((metric) => (
metric.data_points.map((point, pointIndex) => ( metric.data_points.map((point, pointIndex) => {
<tr key={`${metric.name}-${pointIndex}`} className="metric-row"> const rowId = `${metric.name}-${point.labels.node}-${pointIndex}`;
<td> return (
<div className="metric-info"> <tr key={rowId} className="metric-row">
<div className="metric-name">{metric.name}</div> <td
</div> onMouseEnter={() => this.handleRowHover(rowId)}
</td> onMouseLeave={this.handleRowLeave}
<td>{point.labels.node}</td> >
<td className="metric-value">{point.value}</td> <div className="metric-info">
<td> <div className="metric-name">
<span className="collected-time"> {metric.name.substring(metric.name.indexOf('_') + 1)}
{dayjs(point.labels.collected_at).format('YYYY-MM-DD HH:mm:ss')} {metric.help && (
</span> <>
</td> <i
</tr> className="sf3-font-help sf3-font"
)) id={rowId}
aria-hidden="true"
style={{
visibility: hoveredRow === rowId ? 'visible' : 'hidden',
}}
>
</i>
<Tooltip
placement='right'
isOpen={tooltipOpen === rowId && hoveredRow === rowId}
toggle={() => this.toggleTooltip(rowId)}
target={rowId}
delay={{ show: 200, hide: 0 }}
fade={true}
className="metric-tooltip"
hideArrow={true}
>
{metric.help}
</Tooltip>
</>
)}
</div>
</div>
</td>
<td>{point.labels.node}</td>
<td className="metric-value">{point.value}</td>
<td>
<span className="collected-time">
{dayjs(point.labels.collected_at).format('YYYY-MM-DD HH:mm:ss')}
</span>
</td>
</tr>
);
})
))} ))}
</> </>
); );
@ -227,6 +283,15 @@ const style = `
color: #666; color: #666;
font-size: 14px; font-size: 14px;
} }
.sf3-font-help {
font-size: 14px;
color: #666;
margin-left: 4px;
opacity: 0.7;
transition: opacity 0.2s;
}
</style> </style>
`; `;

24
seahub/api2/endpoints/admin/statistics.py
View File

@ -487,16 +487,14 @@ def parse_prometheus_metrics(metrics_raw):
""" """
Ensure metric entry exists in formatted metrics dict Ensure metric entry exists in formatted metrics dict
""" """
formatted_name = '_'.join(raw_name.split('_')[1:]) if raw_name not in formatted_metrics_dict:
if formatted_name not in formatted_metrics_dict: formatted_metrics_dict[raw_name] = {
formatted_metrics_dict[formatted_name] = { 'name': raw_name,
'name': formatted_name,
'help': '', 'help': '',
'type': '', 'type': '',
'data_points': [], 'data_points': []
'original_name': raw_name
} }
return formatted_name return raw_name
def parse_labels(line): def parse_labels(line):
""" """
@ -535,23 +533,23 @@ def parse_prometheus_metrics(metrics_raw):
parts = line.split(' ', 3) parts = line.split(' ', 3)
if len(parts) > 3: if len(parts) > 3:
metric_name, help_text = parts[2], parts[3] metric_name, help_text = parts[2], parts[3]
formatted_name = ensure_metric_exists(metric_name) ensure_metric_exists(metric_name)
formatted_metrics_dict[formatted_name]['help'] = help_text formatted_metrics_dict[metric_name]['help'] = help_text
elif line.startswith('# TYPE'): elif line.startswith('# TYPE'):
parts = line.split(' ') parts = line.split(' ')
if len(parts) > 3: if len(parts) > 3:
metric_name, metric_type = parts[2], parts[3] metric_name, metric_type = parts[2], parts[3]
formatted_name = ensure_metric_exists(metric_name) ensure_metric_exists(metric_name)
formatted_metrics_dict[formatted_name]['type'] = metric_type formatted_metrics_dict[metric_name]['type'] = metric_type
elif not line.startswith('#'): elif not line.startswith('#'):
# handle metric data # handle metric data
parsed_data = parse_metric_line(line) parsed_data = parse_metric_line(line)
if parsed_data: if parsed_data:
metric_name, labels, value = parsed_data metric_name, labels, value = parsed_data
formatted_name = ensure_metric_exists(metric_name) ensure_metric_exists(metric_name)
formatted_metrics_dict[formatted_name]['data_points'].append({ formatted_metrics_dict[metric_name]['data_points'].append({
'labels': labels, 'labels': labels,
'value': value 'value': value
}) })