src/components/FileDetail.jsx - master - perminevma/frontend

src/components/FileDetail.jsx
205 строк7 KB
ivgrd
26 авг 2025, 11:44
26 авг 2025, 11:44d65cc04
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { 
  Box, 
  Card, 
  CardContent, 
  Typography, 
  CircularProgress, 
  Alert,
  Chip,
  Grid,
  Paper
} from '@mui/material';
import { getFileDetail } from '../api';

const FileDetail = () => {
  const { id } = useParams();
  const [file, setFile] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    loadFile();
  }, [id]);

  const loadFile = async () => {
    try {
      const res = await getFileDetail(id);
      setFile(res.data);
    } catch (err) {
      setError('Ошибка загрузки данных файла');
    } finally {
      setLoading(false);
    }
  };

  const parseResult = (raw) => {
    if (!raw) return null;
    try {
      const obj = typeof raw === 'string' ? JSON.parse(raw) : raw;
      const inner = (obj && typeof obj === 'object' && obj.result && typeof obj.result === 'object')
        ? obj.result
        : obj;
      return inner;
    } catch {
      return null;
    }
  };

  const renderStatus = (s) => {
    const map = {
      pending: { label: 'В очереди', color: 'warning' },
      queued:  { label: 'В очереди', color: 'warning' },
      processing: { label: 'Обработка', color: 'info' },
      processed: { label: 'Обработан', color: 'success' },
      done: { label: 'Готово', color: 'success' },
      error: { label: 'Ошибка', color: 'error' },
      uploaded: { label: 'Загружен', color: 'default' },
    };
    return map[s] || { label: s || '—', color: 'default' };
  };

  if (loading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Alert severity="error">
        {error}
      </Alert>
    );
  }

  const result = parseResult(file?.result);
  const st = renderStatus(file?.status);

  return (
    <Box>
      <Typography variant="h1" gutterBottom>
        Детали файла
      </Typography>
      
      <Card sx={{ mb: 3 }}>
        <CardContent>
          <Grid container spacing={3}>
            <Grid item xs={12} md={6}>
              <Typography variant="h2" gutterBottom>
                Информация о файле
              </Typography>
              
              <Paper sx={{ p: 2, background: 'rgba(255,255,255,0.02)' }}>
                <Box sx={{ '& > div': { mb: 2 } }}>
                  <Box>
                    <Typography variant="body2" color="text.secondary">
                      ID файла
                    </Typography>
                    <Typography variant="body1">
                      {file?.id}
                    </Typography>
                  </Box>
                  
                  <Box>
                    <Typography variant="body2" color="text.secondary">
                      Имя файла
                    </Typography>
                    <Typography variant="body1">
                      {file?.filename}
                    </Typography>
                  </Box>
                  
                  <Box>
                    <Typography variant="body2" color="text.secondary">
                      Статус
                    </Typography>
                    <Chip 
                      label={st.label}
                      color={st.color}
                    />
                  </Box>
                </Box>
              </Paper>
            </Grid>
            
            <Grid item xs={12} md={6}>
              <Typography variant="h2" gutterBottom>
                Результат диагностики
              </Typography>
              
              {['pending','queued','uploaded','processing'].includes(file?.status) ? (
                <Box sx={{ textAlign: 'center', py: 4 }}>
                  <CircularProgress />
                  <Typography sx={{ mt: 2 }}>
                    Файл находится в очереди на обработку...
                  </Typography>
                </Box>
              ) : file?.status === 'error' ? (
                <Alert severity="error">
                  Ошибка при обработке файла
                </Alert>
              ) : (result && typeof result === 'object') ? (
                <Paper sx={{ p: 2, background: 'rgba(255,255,255,0.02)' }}>
                  {result.has_defect ? (
                    <Box sx={{ '& > div': { mb: 2 } }}>
                      <Box>
                        <Typography variant="body2" color="text.secondary">
                          Наличие дефекта
                        </Typography>
                        <Chip 
                          label="Обнаружен" 
                          color="error"
                          sx={{ fontWeight: 'bold' }}
                        />
                      </Box>
                      
                      <Box>
                        <Typography variant="body2" color="text.secondary">
                          Тип дефекта
                        </Typography>
                        <Typography variant="body1">
                          {result.defect_type}
                        </Typography>
                      </Box>
                      
                      <Box>
                        <Typography variant="body2" color="text.secondary">
                          Степень серьезности
                        </Typography>
                        <Typography variant="body1">
                          {typeof result.severity === 'number' ? result.severity : '—'} (0–1)
                        </Typography>
                      </Box>
                    </Box>
                  ) : (
                    <Box sx={{ textAlign: 'center', py: 4 }}>
                      <Typography variant="h4" sx={{ color: 'success.main', mb: 2 }}>
                        ✅
                      </Typography>
                      <Typography variant="h6">
                        Дефектов не обнаружено
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        Система не выявила никаких аномалий в данных
                      </Typography>
                    </Box>
                  )}
                </Paper>
              ) : (
                <Typography color="text.secondary">
                  Результат недоступен
                </Typography>
              )}
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    </Box>
  );
};

export default FileDetail;