Initial commit: JIRA AI Fixer Portal
- React 18 + TypeScript + Vite - TailwindCSS styling - React Query for data fetching - React Router for navigation Pages: - Dashboard with stats - Issues list with filters - Issue detail view - Repositories management - Settings/Integrations
This commit is contained in:
Ricel Leite
parent
0b24d51ce1
commit
fd966983a3
|
|
@ -0,0 +1,6 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
*.log
|
||||||
|
.DS_Store
|
||||||
56
README.md
56
README.md
|
|
@ -1,3 +1,55 @@
|
||||||
# jira-ai-fixer-portal
|
# JIRA AI Fixer Portal
|
||||||
|
|
||||||
JIRA AI Fixer Portal - React Dashboard for intelligent support case resolution
|
React dashboard for the JIRA AI Fixer - Intelligent Support Case Resolution system.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- 📊 **Dashboard** - Real-time stats and recent issues
|
||||||
|
- 🎫 **Issues** - Browse and filter analyzed issues
|
||||||
|
- 📁 **Repositories** - Manage connected code repositories
|
||||||
|
- ⚙️ **Settings** - Configure integrations and AI settings
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
- React 18 + TypeScript
|
||||||
|
- Vite
|
||||||
|
- TailwindCSS
|
||||||
|
- React Query
|
||||||
|
- React Router
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install dependencies
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Start dev server
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Build for production
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## Environment Variables
|
||||||
|
|
||||||
|
```env
|
||||||
|
VITE_API_URL=https://jira-fixer.startdata.com.br/api
|
||||||
|
```
|
||||||
|
|
||||||
|
## Integrations
|
||||||
|
|
||||||
|
### Issue Trackers
|
||||||
|
- TicketHub (Active)
|
||||||
|
- JIRA (Ready)
|
||||||
|
- ServiceNow (Ready)
|
||||||
|
- Azure DevOps (Ready)
|
||||||
|
|
||||||
|
### Code Repositories
|
||||||
|
- Gitea (Active)
|
||||||
|
- GitHub (Ready)
|
||||||
|
- GitLab (Ready)
|
||||||
|
- Bitbucket (Ready)
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>JIRA AI Fixer Portal</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "jira-ai-fixer-portal",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "JIRA AI Fixer Portal - React Dashboard",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.22.0",
|
||||||
|
"@tanstack/react-query": "^5.17.0",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"date-fns": "^3.3.0",
|
||||||
|
"recharts": "^2.12.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.48",
|
||||||
|
"@types/react-dom": "^18.2.18",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"autoprefixer": "^10.4.17",
|
||||||
|
"postcss": "^8.4.33",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"typescript": "^5.3.3",
|
||||||
|
"vite": "^5.0.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<text y=".9em" font-size="90">🤖</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 114 B |
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Routes, Route } from 'react-router-dom'
|
||||||
|
import Layout from './components/Layout'
|
||||||
|
import Dashboard from './pages/Dashboard'
|
||||||
|
import Issues from './pages/Issues'
|
||||||
|
import IssueDetail from './pages/IssueDetail'
|
||||||
|
import Repositories from './pages/Repositories'
|
||||||
|
import Settings from './pages/Settings'
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Layout />}>
|
||||||
|
<Route index element={<Dashboard />} />
|
||||||
|
<Route path="issues" element={<Issues />} />
|
||||||
|
<Route path="issues/:id" element={<IssueDetail />} />
|
||||||
|
<Route path="repositories" element={<Repositories />} />
|
||||||
|
<Route path="settings" element={<Settings />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { Outlet, NavLink } from 'react-router-dom'
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ to: '/', label: 'Dashboard', icon: '📊' },
|
||||||
|
{ to: '/issues', label: 'Issues', icon: '🎫' },
|
||||||
|
{ to: '/repositories', label: 'Repositories', icon: '📁' },
|
||||||
|
{ to: '/settings', label: 'Settings', icon: '⚙️' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function Layout() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900 text-white flex">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
|
||||||
|
<div className="p-4 border-b border-gray-700">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-2xl">🤖</span>
|
||||||
|
<div>
|
||||||
|
<h1 className="font-bold">JIRA AI Fixer</h1>
|
||||||
|
<p className="text-xs text-gray-400">Portal</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex-1 p-4">
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{navItems.map(item => (
|
||||||
|
<li key={item.to}>
|
||||||
|
<NavLink
|
||||||
|
to={item.to}
|
||||||
|
end={item.to === '/'}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
|
||||||
|
isActive
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'text-gray-400 hover:bg-gray-700 hover:text-white'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span>{item.icon}</span>
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="p-4 border-t border-gray-700 text-xs text-gray-500">
|
||||||
|
<p>JIRA AI Fixer v1.0.0</p>
|
||||||
|
<p className="mt-1">© 2026 StartData</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<main className="flex-1 overflow-auto">
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
import App from './App'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
retry: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import { issuesApi } from '../services/api'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
|
export default function Dashboard() {
|
||||||
|
const { data: stats } = useQuery({
|
||||||
|
queryKey: ['stats'],
|
||||||
|
queryFn: issuesApi.getStats,
|
||||||
|
refetchInterval: 10000,
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: issues } = useQuery({
|
||||||
|
queryKey: ['issues'],
|
||||||
|
queryFn: () => issuesApi.list(),
|
||||||
|
refetchInterval: 10000,
|
||||||
|
})
|
||||||
|
|
||||||
|
const recentIssues = issues?.slice(0, 5) || []
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<h1 className="text-2xl font-bold mb-6">Dashboard</h1>
|
||||||
|
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||||
|
<StatCard
|
||||||
|
title="Total Issues"
|
||||||
|
value={stats?.total || 0}
|
||||||
|
icon="📋"
|
||||||
|
color="blue"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Analyzed"
|
||||||
|
value={stats?.analyzed || 0}
|
||||||
|
icon="✅"
|
||||||
|
color="green"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="PRs Created"
|
||||||
|
value={stats?.prs_created || 0}
|
||||||
|
icon="🔀"
|
||||||
|
color="purple"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Avg Confidence"
|
||||||
|
value={`${stats?.avg_confidence || 0}%`}
|
||||||
|
icon="🎯"
|
||||||
|
color="yellow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Issues */}
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700">
|
||||||
|
<div className="p-4 border-b border-gray-700 flex justify-between items-center">
|
||||||
|
<h2 className="font-semibold">Recent Issues</h2>
|
||||||
|
<Link to="/issues" className="text-sm text-blue-400 hover:text-blue-300">
|
||||||
|
View all →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y divide-gray-700">
|
||||||
|
{recentIssues.length === 0 ? (
|
||||||
|
<div className="p-8 text-center text-gray-500">No issues yet</div>
|
||||||
|
) : (
|
||||||
|
recentIssues.map(issue => (
|
||||||
|
<Link
|
||||||
|
key={issue.id}
|
||||||
|
to={`/issues/${issue.id}`}
|
||||||
|
className="p-4 block hover:bg-gray-700/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-mono text-blue-400 text-sm">
|
||||||
|
{issue.external_key || `#${issue.id}`}
|
||||||
|
</span>
|
||||||
|
<StatusBadge status={issue.status} />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-medium mt-1">{issue.title}</h3>
|
||||||
|
</div>
|
||||||
|
{issue.confidence && (
|
||||||
|
<span className="text-sm text-green-400">
|
||||||
|
{Math.round(issue.confidence * 100)}%
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({ title, value, icon, color }: {
|
||||||
|
title: string
|
||||||
|
value: number | string
|
||||||
|
icon: string
|
||||||
|
color: 'blue' | 'green' | 'purple' | 'yellow'
|
||||||
|
}) {
|
||||||
|
const colors = {
|
||||||
|
blue: 'bg-blue-500/20 text-blue-400',
|
||||||
|
green: 'bg-green-500/20 text-green-400',
|
||||||
|
purple: 'bg-purple-500/20 text-purple-400',
|
||||||
|
yellow: 'bg-yellow-500/20 text-yellow-400',
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-400 text-sm">{title}</p>
|
||||||
|
<p className={`text-3xl font-bold mt-1 ${colors[color].split(' ')[1]}`}>
|
||||||
|
{value}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className={`w-12 h-12 rounded-lg flex items-center justify-center ${colors[color].split(' ')[0]}`}>
|
||||||
|
<span className="text-2xl">{icon}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatusBadge({ status }: { status: string }) {
|
||||||
|
const styles = {
|
||||||
|
analyzed: 'bg-green-500/20 text-green-400',
|
||||||
|
pending: 'bg-yellow-500/20 text-yellow-400',
|
||||||
|
error: 'bg-red-500/20 text-red-400',
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className={`px-2 py-0.5 rounded text-xs ${styles[status as keyof typeof styles] || 'bg-gray-500/20 text-gray-400'}`}>
|
||||||
|
{status}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
import { useParams, Link } from 'react-router-dom'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import { issuesApi } from '../services/api'
|
||||||
|
|
||||||
|
export default function IssueDetail() {
|
||||||
|
const { id } = useParams()
|
||||||
|
|
||||||
|
const { data: issue, isLoading, error } = useQuery({
|
||||||
|
queryKey: ['issue', id],
|
||||||
|
queryFn: () => issuesApi.get(Number(id)),
|
||||||
|
enabled: !!id,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="text-center text-gray-500">Loading...</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !issue) {
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="text-center text-red-400">Issue not found</div>
|
||||||
|
<Link to="/issues" className="block text-center text-blue-400 mt-4">
|
||||||
|
← Back to issues
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusStyles = {
|
||||||
|
analyzed: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||||
|
pending: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||||
|
error: 'bg-red-500/20 text-red-400 border-red-500/30',
|
||||||
|
}
|
||||||
|
|
||||||
|
let affectedFiles: string[] = []
|
||||||
|
try {
|
||||||
|
affectedFiles = JSON.parse(issue.affected_files || '[]')
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<Link to="/issues" className="text-blue-400 hover:text-blue-300 text-sm">
|
||||||
|
← Back to issues
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6 mb-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="font-mono text-blue-400 text-lg">
|
||||||
|
{issue.external_key || `#${issue.id}`}
|
||||||
|
</span>
|
||||||
|
<span className={`px-2 py-1 rounded text-sm border ${statusStyles[issue.status] || ''}`}>
|
||||||
|
{issue.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold mt-2">{issue.title}</h1>
|
||||||
|
<p className="text-gray-400 mt-1">Source: {issue.source}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{issue.confidence && (
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-sm text-gray-400">Confidence</p>
|
||||||
|
<p className="text-3xl font-bold text-green-400">
|
||||||
|
{Math.round(issue.confidence * 100)}%
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6 mb-6">
|
||||||
|
<h2 className="font-semibold mb-3">Description</h2>
|
||||||
|
<pre className="whitespace-pre-wrap text-gray-300 bg-gray-900 p-4 rounded-lg">
|
||||||
|
{issue.description}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Analysis */}
|
||||||
|
{issue.analysis && (
|
||||||
|
<div className="bg-green-500/10 border border-green-500/30 rounded-xl p-6 mb-6">
|
||||||
|
<h2 className="font-semibold text-green-400 mb-3">🔍 Analysis</h2>
|
||||||
|
<pre className="whitespace-pre-wrap text-gray-300">
|
||||||
|
{issue.analysis}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Affected Files */}
|
||||||
|
{affectedFiles.length > 0 && (
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6 mb-6">
|
||||||
|
<h2 className="font-semibold mb-3">📁 Affected Files</h2>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{affectedFiles.map((file, i) => (
|
||||||
|
<span key={i} className="px-3 py-1 bg-gray-700 rounded-lg font-mono text-sm">
|
||||||
|
{file}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Suggested Fix */}
|
||||||
|
{issue.suggested_fix && (
|
||||||
|
<div className="bg-purple-500/10 border border-purple-500/30 rounded-xl p-6 mb-6">
|
||||||
|
<h2 className="font-semibold text-purple-400 mb-3">🔧 Suggested Fix</h2>
|
||||||
|
<pre className="whitespace-pre-wrap font-mono text-sm bg-gray-900 p-4 rounded-lg">
|
||||||
|
{issue.suggested_fix}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Metadata */}
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||||
|
<h2 className="font-semibold mb-3">Details</h2>
|
||||||
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">Created:</span>
|
||||||
|
<span className="ml-2">{new Date(issue.created_at).toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
{issue.analyzed_at && (
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">Analyzed:</span>
|
||||||
|
<span className="ml-2">{new Date(issue.analyzed_at).toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import { issuesApi, Issue } from '../services/api'
|
||||||
|
|
||||||
|
export default function Issues() {
|
||||||
|
const [filter, setFilter] = useState('')
|
||||||
|
|
||||||
|
const { data: issues, isLoading } = useQuery({
|
||||||
|
queryKey: ['issues', filter],
|
||||||
|
queryFn: () => issuesApi.list(filter || undefined),
|
||||||
|
refetchInterval: 10000,
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-2xl font-bold">Issues</h1>
|
||||||
|
<select
|
||||||
|
value={filter}
|
||||||
|
onChange={(e) => setFilter(e.target.value)}
|
||||||
|
className="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
|
||||||
|
>
|
||||||
|
<option value="">All Status</option>
|
||||||
|
<option value="pending">Pending</option>
|
||||||
|
<option value="analyzed">Analyzed</option>
|
||||||
|
<option value="error">Error</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="p-8 text-center text-gray-500">Loading...</div>
|
||||||
|
) : !issues?.length ? (
|
||||||
|
<div className="p-8 text-center text-gray-500">No issues found</div>
|
||||||
|
) : (
|
||||||
|
<div className="divide-y divide-gray-700">
|
||||||
|
{issues.map(issue => (
|
||||||
|
<IssueRow key={issue.id} issue={issue} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function IssueRow({ issue }: { issue: Issue }) {
|
||||||
|
const statusStyles = {
|
||||||
|
analyzed: 'bg-green-500/20 text-green-400',
|
||||||
|
pending: 'bg-yellow-500/20 text-yellow-400',
|
||||||
|
error: 'bg-red-500/20 text-red-400',
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
to={`/issues/${issue.id}`}
|
||||||
|
className="p-4 block hover:bg-gray-700/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-mono text-blue-400 text-sm">
|
||||||
|
{issue.external_key || `#${issue.id}`}
|
||||||
|
</span>
|
||||||
|
<span className={`px-2 py-0.5 rounded text-xs ${statusStyles[issue.status] || 'bg-gray-500/20 text-gray-400'}`}>
|
||||||
|
{issue.status}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500">{issue.source}</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-medium mt-1">{issue.title}</h3>
|
||||||
|
<p className="text-sm text-gray-400 mt-1 line-clamp-2">{issue.description}</p>
|
||||||
|
</div>
|
||||||
|
{issue.confidence && (
|
||||||
|
<div className="ml-4 text-right">
|
||||||
|
<div className="w-24 bg-gray-700 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className="bg-green-500 h-2 rounded-full"
|
||||||
|
style={{ width: `${issue.confidence * 100}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-400 mt-1">
|
||||||
|
{Math.round(issue.confidence * 100)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
export default function Repositories() {
|
||||||
|
const repos = [
|
||||||
|
{
|
||||||
|
name: 'cobol-sample-app',
|
||||||
|
url: 'https://gitea.startdata.com.br/startdata/cobol-sample-app',
|
||||||
|
files: 4,
|
||||||
|
language: 'COBOL',
|
||||||
|
status: 'indexed',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-2xl font-bold">Repositories</h1>
|
||||||
|
<button className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center gap-2">
|
||||||
|
<span>+</span>
|
||||||
|
<span>Add Repository</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700">
|
||||||
|
{repos.map((repo, i) => (
|
||||||
|
<div key={i} className="p-4 flex items-center justify-between border-b border-gray-700 last:border-0">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-gray-700 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-2xl">📁</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold">{repo.name}</h3>
|
||||||
|
<p className="text-sm text-gray-400">{repo.url}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-lg font-semibold">{repo.files}</p>
|
||||||
|
<p className="text-xs text-gray-400">Files</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-lg font-semibold">{repo.language}</p>
|
||||||
|
<p className="text-xs text-gray-400">Language</p>
|
||||||
|
</div>
|
||||||
|
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">
|
||||||
|
{repo.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Integrations */}
|
||||||
|
<h2 className="text-xl font-bold mt-8 mb-4">Integrations</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
<IntegrationCard
|
||||||
|
name="Gitea"
|
||||||
|
icon="📦"
|
||||||
|
status="connected"
|
||||||
|
description="Self-hosted Git service"
|
||||||
|
/>
|
||||||
|
<IntegrationCard
|
||||||
|
name="GitHub"
|
||||||
|
icon="🐙"
|
||||||
|
status="available"
|
||||||
|
description="GitHub repositories"
|
||||||
|
/>
|
||||||
|
<IntegrationCard
|
||||||
|
name="GitLab"
|
||||||
|
icon="🦊"
|
||||||
|
status="available"
|
||||||
|
description="GitLab repositories"
|
||||||
|
/>
|
||||||
|
<IntegrationCard
|
||||||
|
name="Bitbucket"
|
||||||
|
icon="🪣"
|
||||||
|
status="available"
|
||||||
|
description="Atlassian Bitbucket"
|
||||||
|
/>
|
||||||
|
<IntegrationCard
|
||||||
|
name="Azure DevOps"
|
||||||
|
icon="🔷"
|
||||||
|
status="available"
|
||||||
|
description="Azure Repos"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function IntegrationCard({ name, icon, status, description }: {
|
||||||
|
name: string
|
||||||
|
icon: string
|
||||||
|
status: 'connected' | 'available'
|
||||||
|
description: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-4">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-2xl">{icon}</span>
|
||||||
|
<h3 className="font-semibold">{name}</h3>
|
||||||
|
</div>
|
||||||
|
<span className={`px-2 py-1 rounded text-xs ${
|
||||||
|
status === 'connected'
|
||||||
|
? 'bg-green-500/20 text-green-400'
|
||||||
|
: 'bg-gray-500/20 text-gray-400'
|
||||||
|
}`}>
|
||||||
|
{status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-400">{description}</p>
|
||||||
|
{status === 'available' && (
|
||||||
|
<button className="mt-3 text-sm text-blue-400 hover:text-blue-300">
|
||||||
|
Connect →
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
export default function Settings() {
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<h1 className="text-2xl font-bold mb-6">Settings</h1>
|
||||||
|
|
||||||
|
{/* Webhook Endpoints */}
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6 mb-6">
|
||||||
|
<h2 className="font-semibold mb-4">Webhook Endpoints</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<EndpointRow
|
||||||
|
method="POST"
|
||||||
|
path="/api/webhook/tickethub"
|
||||||
|
description="Receive ticket events from TicketHub"
|
||||||
|
/>
|
||||||
|
<EndpointRow
|
||||||
|
method="POST"
|
||||||
|
path="/api/webhook/jira"
|
||||||
|
description="Receive issue events from JIRA"
|
||||||
|
/>
|
||||||
|
<EndpointRow
|
||||||
|
method="POST"
|
||||||
|
path="/api/webhook/servicenow"
|
||||||
|
description="Receive incident events from ServiceNow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Issue Trackers */}
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6 mb-6">
|
||||||
|
<h2 className="font-semibold mb-4">Issue Tracker Integrations</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<TrackerCard name="TicketHub" icon="🎫" status="active" />
|
||||||
|
<TrackerCard name="JIRA" icon="🔵" status="ready" />
|
||||||
|
<TrackerCard name="ServiceNow" icon="🟢" status="ready" />
|
||||||
|
<TrackerCard name="Azure DevOps" icon="🔷" status="ready" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* AI Settings */}
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6">
|
||||||
|
<h2 className="font-semibold mb-4">AI Configuration</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-gray-400 mb-1">LLM Provider</label>
|
||||||
|
<select className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2">
|
||||||
|
<option>OpenRouter (Free Tier)</option>
|
||||||
|
<option>OpenAI</option>
|
||||||
|
<option>Anthropic</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-gray-400 mb-1">Model</label>
|
||||||
|
<select className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2">
|
||||||
|
<option>meta-llama/llama-3.3-70b-instruct (Free)</option>
|
||||||
|
<option>gpt-4-turbo</option>
|
||||||
|
<option>claude-3-opus</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-gray-400 mb-1">Confidence Threshold</label>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
defaultValue="70"
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500">
|
||||||
|
<span>0%</span>
|
||||||
|
<span>70%</span>
|
||||||
|
<span>100%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function EndpointRow({ method, path, description }: {
|
||||||
|
method: string
|
||||||
|
path: string
|
||||||
|
description: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-4 p-3 bg-gray-700/50 rounded-lg">
|
||||||
|
<span className="px-2 py-1 bg-blue-500/20 text-blue-400 rounded text-xs font-mono">
|
||||||
|
{method}
|
||||||
|
</span>
|
||||||
|
<code className="flex-1 font-mono text-sm">{path}</code>
|
||||||
|
<span className="text-sm text-gray-400">{description}</span>
|
||||||
|
<button className="text-gray-400 hover:text-white">
|
||||||
|
📋
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TrackerCard({ name, icon, status }: {
|
||||||
|
name: string
|
||||||
|
icon: string
|
||||||
|
status: 'active' | 'ready'
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-700/50 rounded-lg">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-2xl">{icon}</span>
|
||||||
|
<span className="font-medium">{name}</span>
|
||||||
|
</div>
|
||||||
|
<span className={`px-2 py-1 rounded text-xs ${
|
||||||
|
status === 'active'
|
||||||
|
? 'bg-green-500/20 text-green-400'
|
||||||
|
: 'bg-gray-500/20 text-gray-400'
|
||||||
|
}`}>
|
||||||
|
{status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const API_URL = import.meta.env.VITE_API_URL || '/api'
|
||||||
|
|
||||||
|
export const api = axios.create({
|
||||||
|
baseURL: API_URL,
|
||||||
|
})
|
||||||
|
|
||||||
|
export interface Issue {
|
||||||
|
id: number
|
||||||
|
external_key: string
|
||||||
|
source: string
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
status: 'pending' | 'analyzed' | 'error'
|
||||||
|
analysis?: string
|
||||||
|
affected_files?: string
|
||||||
|
suggested_fix?: string
|
||||||
|
confidence?: number
|
||||||
|
created_at: string
|
||||||
|
analyzed_at?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Stats {
|
||||||
|
total: number
|
||||||
|
analyzed: number
|
||||||
|
pending: number
|
||||||
|
error: number
|
||||||
|
prs_created: number
|
||||||
|
avg_confidence: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export const issuesApi = {
|
||||||
|
list: async (status?: string): Promise<Issue[]> => {
|
||||||
|
const params = status ? { status } : {}
|
||||||
|
const { data } = await api.get('/issues', { params })
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
|
||||||
|
get: async (id: number): Promise<Issue> => {
|
||||||
|
const { data } = await api.get(`/issues/${id}`)
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
|
||||||
|
getStats: async (): Promise<Stats> => {
|
||||||
|
const issues = await issuesApi.list()
|
||||||
|
const analyzed = issues.filter(i => i.status === 'analyzed')
|
||||||
|
return {
|
||||||
|
total: issues.length,
|
||||||
|
analyzed: analyzed.length,
|
||||||
|
pending: issues.filter(i => i.status === 'pending').length,
|
||||||
|
error: issues.filter(i => i.status === 'error').length,
|
||||||
|
prs_created: analyzed.filter(i => i.suggested_fix).length,
|
||||||
|
avg_confidence: analyzed.length
|
||||||
|
? Math.round(analyzed.reduce((a, i) => a + (i.confidence || 0), 0) / analyzed.length * 100)
|
||||||
|
: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
'/api': 'http://localhost:8000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue