mirror of
https://github.com/haiwen/seahub.git
synced 2025-04-28 03:10:45 +00:00
update ui
This commit is contained in:
parent
d26b91e8c4
commit
e63b7532cc
@ -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>
|
||||
`;
|
||||
|
||||
|
@ -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
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user