ilker/victorialogs-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: Setup React Frontend (Issue #1)

Browse Source 
- Initialize Vite + React + TypeScript project
- Install dependencies (React Router, Zustand, Axios, Tailwind CSS)
- Configure Tailwind CSS and PostCSS
- Create basic folder structure
- Setup ESLint and Prettier
- Create placeholder pages (Login, Dashboard, Logs, Alerts, etc.)
- Create Layout and ProtectedRoute components
- Add TypeScript types

Closes #1

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Code
2026-02-05 00:47:14 +03:00
parent 7043429150
commit be86fa226a
22 changed files with 460 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,20 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
},
}

13
frontend/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VictoriaLogs Manager</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

39
frontend/package.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "victorialogs-manager-frontend",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",
"zustand": "^4.5.0",
"axios": "^1.6.5",
"echarts": "^5.4.3",
"echarts-for-react": "^3.0.2",
"@monaco-editor/react": "^4.6.0",
"react-window": "^1.8.10"
},
"devDependencies": {
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@types/react-window": "^1.8.8",
"@typescript-eslint/eslint-plugin": "^6.19.0",
"@typescript-eslint/parser": "^6.19.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.33",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3",
"vite": "^5.0.11"
}
}

6
frontend/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

37
frontend/src/App.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import LogsExplorer from './pages/LogsExplorer'
import AlertsManager from './pages/AlertsManager'
import PatternDetection from './pages/PatternDetection'
import Reports from './pages/Reports'
import Settings from './pages/Settings'
import Layout from './components/common/Layout'
import ProtectedRoute from './components/common/ProtectedRoute'
function App() {
return (
<Router>
<Routes>
{/* Public routes */}
<Route path="/login" element={<Login />} />
{/* Protected routes */}
<Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>
<Route index element={<Navigate to="/dashboard" replace />} />
<Route path="dashboard" element={<Dashboard />} />
<Route path="logs" element={<LogsExplorer />} />
<Route path="alerts" element={<AlertsManager />} />
<Route path="patterns" element={<PatternDetection />} />
<Route path="reports" element={<Reports />} />
<Route path="settings" element={<Settings />} />
</Route>
{/* 404 */}
<Route path="*" element={<Navigate to="/dashboard" replace />} />
</Routes>
</Router>
)
}
export default App

69
frontend/src/components/common/Layout.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { Outlet, Link, useLocation } from 'react-router-dom'
export default function Layout() {
const location = useLocation()
const navigation = [
{ name: 'Dashboard', path: '/dashboard', icon: '📊' },
{ name: 'Logs Explorer', path: '/logs', icon: '🔍' },
{ name: 'Alerts', path: '/alerts', icon: '🔔' },
{ name: 'Patterns', path: '/patterns', icon: '🎯' },
{ name: 'Reports', path: '/reports', icon: '📈' },
{ name: 'Settings', path: '/settings', icon: '⚙️' },
]
return (
<div className="min-h-screen bg-gray-100">
{/* Sidebar */}
<div className="fixed inset-y-0 left-0 w-64 bg-white shadow-lg">
<div className="flex flex-col h-full">
{/* Logo */}
<div className="flex items-center justify-center h-16 border-b">
<h1 className="text-xl font-bold text-primary-600">VictoriaLogs</h1>
</div>
{/* Navigation */}
<nav className="flex-1 px-4 py-6 space-y-1">
{navigation.map((item) => {
const isActive = location.pathname === item.path
return (
<Link
key={item.path}
to={item.path}
className={`flex items-center px-4 py-3 rounded-lg transition-colors ${
isActive
? 'bg-primary-100 text-primary-700 font-medium'
: 'text-gray-700 hover:bg-gray-100'
}`}
>
<span className="mr-3 text-xl">{item.icon}</span>
{item.name}
</Link>
)
})}
</nav>
{/* User info */}
<div className="p-4 border-t">
<div className="flex items-center">
<div className="w-10 h-10 rounded-full bg-primary-200 flex items-center justify-center">
<span className="text-primary-700 font-medium">A</span>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-gray-700">Admin User</p>
<p className="text-xs text-gray-500">admin@example.com</p>
</div>
</div>
</div>
</div>
</div>
{/* Main content */}
<div className="ml-64">
<div className="p-8">
<Outlet />
</div>
</div>
</div>
)
}

17
frontend/src/components/common/ProtectedRoute.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { ReactNode } from 'react'
import { Navigate } from 'react-router-dom'
interface ProtectedRouteProps {
children: ReactNode
}
export default function ProtectedRoute({ children }: ProtectedRouteProps) {
// TODO: Implement actual authentication check
const isAuthenticated = true // Temporary - always allow access
if (!isAuthenticated) {
return <Navigate to="/login" replace />
}
return <>{children}</>
}

62
frontend/src/index.css Normal file
View File

@@ -0,0 +1,62 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
#root {
width: 100%;
min-height: 100vh;
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-gray-50 text-gray-900;
}
}
@layer components {
.btn {
@apply px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-primary {
@apply bg-primary-600 text-white hover:bg-primary-700;
}
.btn-secondary {
@apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}
.input {
@apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
}
.card {
@apply bg-white rounded-lg shadow-md p-6;
}
}

10
frontend/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

8
frontend/src/pages/AlertsManager.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function AlertsManager() {
return (
<div>
<h1 className="text-3xl font-bold mb-6">Alerts Manager</h1>
<p className="text-gray-600">Alerts Manager page - To be implemented</p>
</div>
)
}

8
frontend/src/pages/Dashboard.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function Dashboard() {
return (
<div>
<h1 className="text-3xl font-bold mb-6">Dashboard</h1>
<p className="text-gray-600">Dashboard page - To be implemented</p>
</div>
)
}

10
frontend/src/pages/Login.tsx Normal file
View File

@@ -0,0 +1,10 @@
export default function Login() {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<div className="card max-w-md w-full">
<h1 className="text-2xl font-bold text-center mb-6">VictoriaLogs Manager</h1>
<p className="text-center text-gray-600">Login page - To be implemented</p>
</div>
</div>
)
}

8
frontend/src/pages/LogsExplorer.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function LogsExplorer() {
return (
<div>
<h1 className="text-3xl font-bold mb-6">Logs Explorer</h1>
<p className="text-gray-600">Logs Explorer page - To be implemented</p>
</div>
)
}

8
frontend/src/pages/PatternDetection.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function PatternDetection() {
return (
<div>
<h1 className="text-3xl font-bold mb-6">Pattern Detection</h1>
<p className="text-gray-600">Pattern Detection page - To be implemented</p>
</div>
)
}

8
frontend/src/pages/Reports.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function Reports() {
return (
<div>
<h1 className="text-3xl font-bold mb-6">Reports & Dashboards</h1>
<p className="text-gray-600">Reports page - To be implemented</p>
</div>
)
}

8
frontend/src/pages/Settings.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function Settings() {
return (
<div>
<h1 className="text-3xl font-bold mb-6">Settings</h1>
<p className="text-gray-600">Settings page - To be implemented</p>
</div>
)
}

32
frontend/src/types/index.ts Normal file
View File

@@ -0,0 +1,32 @@
// Common types and interfaces
export interface User {
id: string
username: string
email: string
role: 'admin' | 'editor' | 'analyst' | 'viewer'
isActive: boolean
createdAt: string
}
export interface AuthResponse {
token: string
refreshToken: string
user: User
}
export interface ApiError {
message: string
code?: string
details?: unknown
}
export type Permission =
| 'logs:view'
| 'logs:export'
| 'alerts:manage'
| 'alerts:view'
| 'patterns:manage'
| 'patterns:ml'
| 'reports:manage'
| 'users:manage'

9
frontend/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,9 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_BASE_URL: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}

26
frontend/tailwind.config.js Normal file
View File

@@ -0,0 +1,26 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
},
},
},
plugins: [],
}

31
frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,31 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
/* Path aliases */
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
frontend/tsconfig.node.json Normal file
View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

21
frontend/vite.config.ts Normal file
View File

@@ -0,0 +1,21 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
host: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
}
}
},
build: {
outDir: 'dist',
sourcemap: true,
}
})