64f302149e
Some checks failed
LabFusion CI/CD Pipeline / api-gateway (push) Failing after 34s
Docker Build and Push / build-and-push (push) Failing after 42s
LabFusion CI/CD Pipeline / service-adapters (push) Successful in 1m2s
LabFusion CI/CD Pipeline / frontend (push) Failing after 1m5s
Integration Tests / integration-tests (push) Failing after 38s
Integration Tests / performance-tests (push) Has been skipped
LabFusion CI/CD Pipeline / api-docs (push) Successful in 1m47s
Frontend (React) / test (latest) (push) Failing after 1m14s
LabFusion CI/CD Pipeline / integration-tests (push) Has been skipped
Frontend (React) / build (push) Has been skipped
Frontend (React) / lighthouse (push) Has been skipped
### Summary of Changes - Replaced `react-query` with `@tanstack/react-query` in `package.json` and updated related imports. - Updated frontend CI workflow to use `vitest` for testing instead of Jest, modifying test commands accordingly. - Removed the `App.js`, `Dashboard.js`, `Settings.js`, and other component files, transitioning to a new structure. - Enhanced error handling in the `useServiceStatus` hook to provide more informative error messages. ### Expected Results - Improved performance and modernized the frontend build process with Vite. - Streamlined testing setup with `vitest`, enhancing test execution speed and reliability. - Increased clarity and maintainability of the codebase by adhering to clean code principles and removing unused components.
79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import { Routes, Route } from 'react-router-dom';
|
|
import { Layout, Menu, Typography } from 'antd';
|
|
import { DashboardOutlined, SettingOutlined, BarChartOutlined } from '@ant-design/icons';
|
|
import Dashboard from './components/Dashboard.jsx';
|
|
import SystemMetrics from './components/SystemMetrics.jsx';
|
|
import Settings from './components/Settings.jsx';
|
|
import OfflineMode from './components/OfflineMode.jsx';
|
|
import ErrorBoundary from './components/common/ErrorBoundary.jsx';
|
|
import { useServiceStatus } from './hooks/useServiceStatus';
|
|
import './App.css';
|
|
|
|
const { Header, Sider, Content } = Layout;
|
|
const { Title } = Typography;
|
|
|
|
function App() {
|
|
const serviceStatus = useServiceStatus();
|
|
|
|
const handleRetry = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|
<Sider width={250} theme="dark">
|
|
<div style={{ padding: '16px', textAlign: 'center' }}>
|
|
<Title level={3} style={{ color: 'white', margin: 0 }}>
|
|
LabFusion
|
|
</Title>
|
|
</div>
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
defaultSelectedKeys={['dashboard']}
|
|
items={[
|
|
{
|
|
key: 'dashboard',
|
|
icon: <DashboardOutlined />,
|
|
label: 'Dashboard',
|
|
},
|
|
{
|
|
key: 'metrics',
|
|
icon: <BarChartOutlined />,
|
|
label: 'System Metrics',
|
|
},
|
|
{
|
|
key: 'settings',
|
|
icon: <SettingOutlined />,
|
|
label: 'Settings',
|
|
},
|
|
]}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header style={{ background: '#fff', padding: '0 24px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
|
|
<Title level={4} style={{ margin: 0, lineHeight: '64px' }}>
|
|
Homelab Dashboard
|
|
</Title>
|
|
</Header>
|
|
<Content style={{ margin: '24px', background: '#fff', borderRadius: '8px' }}>
|
|
{serviceStatus.overall === 'offline' && (
|
|
<OfflineMode onRetry={handleRetry} />
|
|
)}
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/dashboard" element={<Dashboard />} />
|
|
<Route path="/metrics" element={<SystemMetrics />} />
|
|
<Route path="/settings" element={<Settings />} />
|
|
</Routes>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|
|
|
|
export default App;
|