84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
||
import "../Style/SystemStatusTable.css";
|
||
import axios from "axios";
|
||
|
||
const SystemStatusTable = () => {
|
||
const [systemData, setSystemData] = useState([]);
|
||
const [expandedRow, setExpandedRow] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
|
||
// Загрузка данных с бэкенда
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
try {
|
||
const response = await axios.get("/trust.json"); // Укажите ваш endpoint
|
||
setSystemData(response.data);
|
||
setLoading(false);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchData();
|
||
}, []);
|
||
|
||
// Обработчик для кнопки "Подробнее"
|
||
const handleDetailsClick = (id) => {
|
||
setExpandedRow(expandedRow === id ? null : id);
|
||
};
|
||
|
||
if (loading) {
|
||
return <p>Загрузка данных...</p>;
|
||
}
|
||
|
||
if (error) {
|
||
return <p>Ошибка: {error}</p>;
|
||
}
|
||
|
||
return (
|
||
<table>
|
||
<caption>
|
||
<h2>Состояние системы</h2>
|
||
</caption>
|
||
<thead>
|
||
<tr>
|
||
<th>Метрика</th>
|
||
<th>Значение</th>
|
||
<th>Статус</th>
|
||
<th>Детали</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{systemData.map((item) => (
|
||
<React.Fragment key={item.id}>
|
||
<tr>
|
||
<td>{item.name}</td>
|
||
<td>{item.value}%</td>
|
||
<td>
|
||
<span className={`status ${item.status}`}>{item.status}</span>
|
||
</td>
|
||
<td>
|
||
<button onClick={() => handleDetailsClick(item.id)}>
|
||
{expandedRow === item.id ? "Скрыть" : "Подробнее"}
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
{expandedRow === item.id && (
|
||
<tr>
|
||
<td colSpan="4">
|
||
<div className="details">
|
||
<p>{item.details}</p>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</React.Fragment>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
);
|
||
};
|
||
|
||
export default SystemStatusTable; |