charts update

Reviewed-on: http://git.enode/deployer3000/trust-module-frontend/pulls/40

src/Charts2/Components/LineChartComponent.jsx

@@ -1,21 +1,142 @@
 import React from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  ReferenceArea
+} from 'recharts';
 
+// ====== Вспомогательные функции ======
+const getStatusColor = (status) => {
+    switch(status) {
+      case 0: return '#757575';   // тёмно-серый
+      case 1: return '#00C853';   // ярко-зелёный
+      case 2: return '#FF6D00';   // ярко-оранжевый
+      case 3: return '#D50000';   // ярко-красный
+      default: return '#BDBDBD';  // fallback-серый
+    }
+  };
+
+const getStatusText = (status) => {
+  return {
+    0: 'Нет соединения',
+    1: 'Норма',
+    2: 'Отклонение',
+    3: 'Критично'
+  }[status] || 'Неизвестно';
+};
+
+const getStatusDescription = (status) => {
+  return {
+    0: 'Устройство не отвечает',
+    1: 'Параметры в норме',
+    2: 'Обнаружены отклонения от нормы',
+    3: 'Критическое состояние системы'
+  }[status] || 'Статус неизвестен';
+};
+
+const StatusIndicator = ({ cx, cy, payload }) => {
+  const status = payload?.status ?? 0;
+  return (
+    <circle 
+      cx={cx} 
+      cy={cy} 
+      r={6}
+      fill={getStatusColor(status)}
+      stroke="#fff"
+      strokeWidth={2}
+    />
+  );
+};
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (!active || !payload || !payload.length) return null;
+
+  const status = payload[0].payload.status;
+  const statusColor = getStatusColor(status);
+
+  return (
+    <div style={{
+      background: '#fff',
+      padding: '10px',
+      border: '1px solid #ccc',
+      borderRadius: '4px',
+      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+    }}>
+      <p><strong>{new Date(label).toLocaleString()}</strong></p>
+      <p style={{ color: payload[0].color }}>
+        Значение: <strong>{payload[0].value.toFixed(2)}</strong>
+      </p>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '4px 8px',
+        background: `${statusColor}20`,
+        borderLeft: `4px solid ${statusColor}`,
+        borderRadius: '4px'
+      }}>
+        <span style={{
+          width: 12,
+          height: 12,
+          backgroundColor: statusColor,
+          borderRadius: '50%',
+          marginRight: 8
+        }} />
+        <div>
+          <strong>{getStatusText(status)}</strong>
+          <div style={{ fontSize: '0.8em', color: '#666' }}>
+            {getStatusDescription(status)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ====== Основной компонент ======
 const LineChartComponent = ({
   data,
   title,
   description,
   metaInfo,
   dataKey = 'value',
-    lineColor = '#8884d8',
+  height = 400
-    height = 400,
-    showLegend = true,
-    showGrid = true,
-    customTooltip,
-    customXAxisFormatter,
-    customYAxis,
-    additionalLines = []
 }) => {
+
+  const getStatusAreas = () => {
+    if (!data || data.length === 0) return null;
+
+    const areas = [];
+    let currentStatus = data[0].status;
+    let start = data[0].timestamp;
+
+    for (let i = 1; i < data.length; i++) {
+      const current = data[i];
+      if (current.status !== currentStatus) {
+        areas.push({ status: currentStatus, start, end: current.timestamp });
+        currentStatus = current.status;
+        start = current.timestamp;
+      }
+    }
+
+    areas.push({ status: currentStatus, start, end: data[data.length - 1].timestamp });
+
+    return areas.map((area, i) => (
+      <ReferenceArea
+        key={`area-${i}`}
+        x1={area.start}
+        x2={area.end}
+        fill={getStatusColor(area.status)}
+        fillOpacity={0.1}
+      />
+    ));
+  };
+
   return (
     <div style={{ width: '100%', height: `${height}px` }}>
       {title && <h3>{title}</h3>}
@@ -31,36 +152,56 @@ const LineChartComponent = ({
       <ResponsiveContainer width="100%" height="80%">
         <LineChart
           data={data}
-                    margin={{
+          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-                        top: 5,
-                        right: 30,
-                        left: 20,
-                        bottom: 5,
-                    }}
         >
-                    {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+          <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey="timestamp"
-                        tickFormatter={customXAxisFormatter || ((timestamp) => new Date(timestamp).toLocaleTimeString())}
+            tickFormatter={(ts) => new Date(ts).toLocaleTimeString()}
           />
-                    {customYAxis || <YAxis />}
+          <YAxis />
-                    <Tooltip
+          {getStatusAreas()}
-                        content={customTooltip}
+          <Tooltip content={<CustomTooltip />} />
-                        labelFormatter={(timestamp) => new Date(timestamp).toLocaleString()}
+          <Legend />
-                    />
-                    {showLegend && <Legend />}
           <Line
             type="monotone"
             dataKey={dataKey}
-                        stroke={lineColor}
+            stroke="#8884d8"
+            strokeWidth={2}
+            dot={<StatusIndicator />}
             activeDot={{ r: 8 }}
+            isAnimationActive={false}
             name={title}
           />
-                    {additionalLines.map((lineProps, index) => (
-                        <Line key={index} {...lineProps} />
-                    ))}
         </LineChart>
       </ResponsiveContainer>
+
+      {/* Легенда статусов */}
+      <div style={{
+        marginTop: 20,
+        display: 'flex',
+        justifyContent: 'center',
+        gap: 20,
+        flexWrap: 'wrap'
+      }}>
+        {[
+          { status: 1, label: '1 - Норма', color: '#4CAF50' },
+          { status: 2, label: '2 - Отклонение', color: '#FF9800' },
+          { status: 3, label: '3 - Критично', color: '#F44336' },
+          { status: 0, label: '0 - Нет связи', color: '#888' }
+        ].map(item => (
+          <div key={item.status} style={{ display: 'flex', alignItems: 'center' }}>
+            <div style={{
+              width: 16,
+              height: 16,
+              backgroundColor: item.color,
+              marginRight: 8,
+              borderRadius: '50%'
+            }}></div>
+            <span>{item.label}</span>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

src/Charts2/Components/StatusLogTable.jsx

@@ -0,0 +1,86 @@
+// src/Components/StatusLogTable.jsx
+import React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Chip,
+  Typography
+} from '@mui/material';
+
+const statusColors = {
+  '0': 'default',
+  '1': 'success',
+  '2': 'warning',
+  '3': 'error'
+};
+
+const StatusLogTable = ({ logs }) => {
+  return (
+    <TableContainer component={Paper} sx={{ mt: 2, maxHeight: 400 }}>
+      <Table stickyHeader size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Время</TableCell>
+            <TableCell>Устройство</TableCell>
+            <TableCell>Модуль</TableCell>
+            <TableCell>Статус</TableCell>
+            <TableCell>Значение</TableCell>
+            <TableCell>Описание</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {logs.map((log, index) => (
+            <TableRow key={index}>
+              <TableCell>
+                {new Date(log.timestamp).toLocaleString()}
+              </TableCell>
+              <TableCell>{log.device}</TableCell>
+              <TableCell>{log.source_id?.split('$')[1]}</TableCell>
+              <TableCell>
+                <Chip 
+                  label={getStatusText(log.status)}
+                  color={statusColors[log.status] || 'default'}
+                  size="small"
+                />
+              </TableCell>
+              <TableCell>{parseFloat(log.value).toFixed(2)}</TableCell>
+              <TableCell>
+                <Typography variant="body2">
+                  {log.description || getStatusDescription(log.status)}
+                </Typography>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+// Вспомогательные функции
+const getStatusText = (status) => {
+  const statusMap = {
+    '0': 'Нет соединения',
+    '1': 'Норма',
+    '2': 'Отклонение',
+    '3': 'Критично'
+  };
+  return statusMap[status] || 'Неизвестно';
+};
+
+const getStatusDescription = (status) => {
+  const descriptions = {
+    '0': 'Устройство не отвечает',
+    '1': 'Параметры в норме',
+    '2': 'Обнаружены отклонения от нормы',
+    '3': 'Критическое состояние системы'
+  };
+  return descriptions[status] || 'Статус неизвестен';
+};
+
+export default StatusLogTable;

src/Charts2/Components/metricsService.jsx

@@ -40,6 +40,7 @@ class MetricsService {
     });
 
     this.socket.on('metrics-data', ({ metric, data, requestId }) => {
+      console.log('Incoming metric update:', metric);
       if (requestId && this.pendingRequests.has(requestId)) {
         const { resolve } = this.pendingRequests.get(requestId);
         resolve(data);

src/Charts2/PrometheusChart.jsx

@@ -4,6 +4,9 @@ import DateRangeSelector from './Components/DateRangeSelector';
 import metricsService from './Components/metricsService';
 import { Button, Radio, message, Tag } from 'antd';
 import moment from 'moment';
+import StatusLogTable from './Components/StatusLogTable';
+import { Box, IconButton, Tooltip as MuiTooltip } from '@mui/material';
+import { ListAlt } from '@mui/icons-material';
 
 const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
     const {
@@ -14,7 +17,7 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
         context = {}
     } = metricInfo || {};
 
-    const { device, source_id: module } = context;
+    const { device, source_id } = context;
 
     const [chartData, setChartData] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
@@ -24,27 +27,45 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
     const [startDate, setStartDate] = useState(moment().subtract(1, 'hour').toDate());
     const [endDate, setEndDate] = useState(moment().toDate());
     const [isLiveUpdating, setIsLiveUpdating] = useState(false);
+    const [showLogs, setShowLogs] = useState(false);
+    const [statusLogs, setStatusLogs] = useState([]);
 
     const getSubscriptionKey = () => {
         const filterParts = [];
-        if (device) filterParts.push(`device=${device}`);
+        if (device) filterParts.push(`device=${encodeURIComponent(device)}`);
-        if (module) filterParts.push(`source_id=${module}`);
+        if (source_id) filterParts.push(`source_id=${encodeURIComponent(source_id)}`);
         return `${metricName}${filterParts.length ? `?${filterParts.join('&')}` : ''}`;
     };
 
     const formatMetricData = (dataArray) => {
         return dataArray
             .map(item => ({
+                ...item,
                 timestamp: item.timestamp,
                 value: parseFloat(item.value),
                 name: item.__name__ || metricName,
-                status: item.status,
+                status: item.status?.toString() || '0',
                 device: item.device?.trim() || null,
-                source_id: item.source_id || null
+                source_id: item.source_id || null,
+                description: item.description || description
             }))
             .sort((a, b) => a.timestamp - b.timestamp);
     };
 
+    // Обновляем логи при изменении данных
+    useEffect(() => {
+        if (chartData.length > 0) {
+            const newLogs = chartData.reduce((acc, point, index) => {
+                if (index === 0 || point.status !== chartData[index - 1].status) {
+                    return [...acc, point];
+                }
+                return acc;
+            }, []);
+            setStatusLogs(newLogs);
+        }
+    }, [chartData]);
+    
+
     const fetchHistoricalData = async (start, end) => {
         setIsLoading(true);
         setError(null);
@@ -53,7 +74,7 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
             const extendedFilters = {
                 ...filters,
                 ...(device && { device: device.toString() }),
-                ...(module && { source_id: module.toString() })
+                ...(source_id && { source_id: source_id.toString() })
             };
 
             const data = await metricsService.fetchMetricsRange(
@@ -107,7 +128,7 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
             {
                 ...filters,
                 ...(device && { device }),
-                ...(module && { source_id: module })
+                ...(source_id && { source_id })
             }
         );
     };
@@ -124,6 +145,7 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
     };
 
     useEffect(() => {
+        console.log('Current metric context:', { device, source_id, metricName });
         let unsubscribe;
         if (mode === 'realtime') {
             unsubscribe = startRealtimeUpdates();
@@ -136,7 +158,7 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
             if (unsubscribe) unsubscribe();
             stopRealtimeUpdates();
         };
-    }, [mode, metricName, device, module]);
+    }, [mode, metricName, device, source_id]);
 
     const metaInfo = [
         metricMeta.instance && `Instance: ${metricMeta.instance}`,
@@ -180,7 +202,24 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
             </div>
 
             {device && <Tag color="geekblue">Устройство: {device}</Tag>}
-            {module && <Tag color="purple">Модуль: {module.split('$')[1]}</Tag>}
+            {source_id && <Tag color="purple">Модуль: {source_id.split('$')[1]}</Tag>}
+
+            <Box position="relative">
+                <MuiTooltip title={showLogs ? "Скрыть логи" : "Показать логи"}>
+                    <IconButton
+                        onClick={() => setShowLogs(!showLogs)}
+                        sx={{
+                            position: 'absolute',
+                            right: 16,
+                            top: 16,
+                            zIndex: 1000,
+                            bgcolor: 'background.paper',
+                            boxShadow: 1
+                        }}
+                    >
+                        <ListAlt />
+                    </IconButton>
+                </MuiTooltip>
 
                 {isLoading ? (
                     <div>Загрузка графика...</div>
@@ -189,6 +228,7 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
                 ) : chartData.length === 0 ? (
                     <div>Нет данных для метрики: {metricName}</div>
                 ) : (
+                    <>
                         <LineChartComponent
                             data={chartData}
                             title={title}
@@ -197,10 +237,15 @@ const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
                             height={chartHeight}
                             additionalFilters={{
                                 device,
-                        module
+                                source_id
                             }}
                         />
+                        {showLogs && (
+                            <StatusLogTable logs={statusLogs} />
                         )}
+                    </>
+                )}
+            </Box>
         </div>
     );
 };

src/Components/Layout/Dashboard.jsx

@@ -95,7 +95,7 @@ const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
           context: {
             device: item.filters?.device,
             source_id: item.filters?.source_id,
-            parent: item // для построения пути
+            parent: item 
           }
         }}
       />