1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-04-28 03:10:45 +00:00

update ui

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

View File

@ -4,11 +4,34 @@ import { systemAdminAPI } from '../../../utils/system-admin-api';
import MainPanelTopbar from '../main-panel-topbar';
import StatisticNav from './statistic-nav';
import { gettext } from '../../../utils/constants';
import { Tooltip } from 'reactstrap';
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() {
const { componentName, metrics } = this.props;
const { hoveredRow, tooltipOpen } = this.state;
return (
<>
<tr className="component-header">
@ -19,22 +42,55 @@ class ComponentMetricsTable extends Component {
</td>
</tr>
{metrics.map((metric) => (
metric.data_points.map((point, pointIndex) => (
<tr key={`${metric.name}-${pointIndex}`} className="metric-row">
<td>
<div className="metric-info">
<div className="metric-name">{metric.name}</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>
))
metric.data_points.map((point, pointIndex) => {
const rowId = `${metric.name}-${point.labels.node}-${pointIndex}`;
return (
<tr key={rowId} className="metric-row">
<td
onMouseEnter={() => this.handleRowHover(rowId)}
onMouseLeave={this.handleRowLeave}
>
<div className="metric-info">
<div className="metric-name">
{metric.name.substring(metric.name.indexOf('_') + 1)}
{metric.help && (
<>
<i
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;
font-size: 14px;
}
.sf3-font-help {
font-size: 14px;
color: #666;
margin-left: 4px;
opacity: 0.7;
transition: opacity 0.2s;
}
</style>
`;

View File

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