feat: complete Git Repo Manager MVP implementation
Backend (Phase 1-6): - Pydantic schemas for request/response validation - Service layer (SSH Key, Server, Repo, Sync) - API routes with authentication - FastAPI main application with lifespan management - ORM models (SshKey, Server, Repo, SyncLog) Frontend (Phase 7): - Vue 3 + Element Plus + Pinia + Vue Router - API client with Axios and interceptors - State management stores - All page components (Dashboard, Servers, Repos, SyncLogs, SshKeys, Settings) Deployment (Phase 8): - README with quick start guide - Startup script (start.sh) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
panw
19
frontend/.gitignore
vendored
Normal file
19
frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
dist/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Editor
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env.local
|
||||
57
frontend/README.md
Normal file
57
frontend/README.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# Git Manager Frontend
|
||||
|
||||
Vue 3 frontend for Git Manager application.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- Vue 3 - Progressive JavaScript framework
|
||||
- Element Plus - Vue 3 UI component library
|
||||
- Pinia - State management
|
||||
- Vue Router - Official router for Vue.js
|
||||
- Axios - HTTP client
|
||||
- Vite - Next generation frontend tooling
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── src/
|
||||
│ ├── api/ # API client modules
|
||||
│ ├── assets/ # Static assets
|
||||
│ ├── components/ # Reusable components
|
||||
│ ├── router/ # Vue Router configuration
|
||||
│ ├── stores/ # Pinia stores
|
||||
│ ├── views/ # Page components
|
||||
│ ├── App.vue # Root component
|
||||
│ └── main.js # Application entry point
|
||||
├── public/ # Public static files
|
||||
├── index.html # HTML template
|
||||
├── vite.config.js # Vite configuration
|
||||
└── package.json # Dependencies
|
||||
```
|
||||
|
||||
## API Integration
|
||||
|
||||
The frontend includes API clients for:
|
||||
- Servers management
|
||||
- SSH keys management
|
||||
- Sync logs
|
||||
- System settings
|
||||
|
||||
All API calls go through the configured Vite proxy to the backend server.
|
||||
12
frontend/index.html
Normal file
12
frontend/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Git Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
104
frontend/src/App.vue
Normal file
104
frontend/src/App.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-container class="app-container">
|
||||
<el-aside width="250px" class="sidebar">
|
||||
<div class="logo">
|
||||
<el-icon><Link /></el-icon>
|
||||
<span>Git Manager</span>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="currentRoute"
|
||||
router
|
||||
background-color="#001529"
|
||||
text-color="#fff"
|
||||
active-text-color="#1890ff"
|
||||
>
|
||||
<el-menu-item index="/dashboard">
|
||||
<el-icon><Odometer /></el-icon>
|
||||
<span>Dashboard</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/servers">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<span>Servers</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/repos">
|
||||
<el-icon><FolderOpened /></el-icon>
|
||||
<span>Repositories</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/sync-logs">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span>Sync Logs</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/ssh-keys">
|
||||
<el-icon><Key /></el-icon>
|
||||
<span>SSH Keys</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/settings">
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span>Settings</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-main class="main-content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const currentRoute = computed(() => route.path)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #001529;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 64px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo .el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background-color: #f0f2f5;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
39
frontend/src/api/index.js
Normal file
39
frontend/src/api/index.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const apiClient = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 30000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
// Request interceptor
|
||||
apiClient.interceptors.request.use(
|
||||
(config) => {
|
||||
// Add auth token if available
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// Response interceptor
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => {
|
||||
return response.data
|
||||
},
|
||||
(error) => {
|
||||
const message = error.response?.data?.message || error.message || 'An error occurred'
|
||||
ElMessage.error(message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default apiClient
|
||||
38
frontend/src/api/servers.js
Normal file
38
frontend/src/api/servers.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import api from './index'
|
||||
|
||||
export const serversApi = {
|
||||
// Get all servers
|
||||
getAll() {
|
||||
return api.get('/servers')
|
||||
},
|
||||
|
||||
// Get server by ID
|
||||
getById(id) {
|
||||
return api.get(`/servers/${id}`)
|
||||
},
|
||||
|
||||
// Create new server
|
||||
create(data) {
|
||||
return api.post('/servers', data)
|
||||
},
|
||||
|
||||
// Update server
|
||||
update(id, data) {
|
||||
return api.put(`/servers/${id}`, data)
|
||||
},
|
||||
|
||||
// Delete server
|
||||
delete(id) {
|
||||
return api.delete(`/servers/${id}`)
|
||||
},
|
||||
|
||||
// Test server connection
|
||||
testConnection(id) {
|
||||
return api.post(`/servers/${id}/test`)
|
||||
},
|
||||
|
||||
// Get server repositories
|
||||
getRepos(id) {
|
||||
return api.get(`/servers/${id}/repos`)
|
||||
}
|
||||
}
|
||||
33
frontend/src/api/sshKeys.js
Normal file
33
frontend/src/api/sshKeys.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import api from './index'
|
||||
|
||||
export const sshKeysApi = {
|
||||
// Get all SSH keys
|
||||
getAll() {
|
||||
return api.get('/ssh-keys')
|
||||
},
|
||||
|
||||
// Get SSH key by ID
|
||||
getById(id) {
|
||||
return api.get(`/ssh-keys/${id}`)
|
||||
},
|
||||
|
||||
// Create new SSH key
|
||||
create(data) {
|
||||
return api.post('/ssh-keys', data)
|
||||
},
|
||||
|
||||
// Update SSH key
|
||||
update(id, data) {
|
||||
return api.put(`/ssh-keys/${id}`, data)
|
||||
},
|
||||
|
||||
// Delete SSH key
|
||||
delete(id) {
|
||||
return api.delete(`/ssh-keys/${id}`)
|
||||
},
|
||||
|
||||
// Generate new SSH key pair
|
||||
generate() {
|
||||
return api.post('/ssh-keys/generate')
|
||||
}
|
||||
}
|
||||
33
frontend/src/api/syncLogs.js
Normal file
33
frontend/src/api/syncLogs.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import api from './index'
|
||||
|
||||
export const syncLogsApi = {
|
||||
// Get all sync logs with pagination
|
||||
getAll(params) {
|
||||
return api.get('/sync-logs', { params })
|
||||
},
|
||||
|
||||
// Get sync log by ID
|
||||
getById(id) {
|
||||
return api.get(`/sync-logs/${id}`)
|
||||
},
|
||||
|
||||
// Get logs by server ID
|
||||
getByServerId(serverId, params) {
|
||||
return api.get(`/sync-logs/server/${serverId}`, { params })
|
||||
},
|
||||
|
||||
// Get logs by repository ID
|
||||
getByRepoId(repoId, params) {
|
||||
return api.get(`/sync-logs/repo/${repoId}`, { params })
|
||||
},
|
||||
|
||||
// Get logs by status
|
||||
getByStatus(status, params) {
|
||||
return api.get(`/sync-logs/status/${status}`, { params })
|
||||
},
|
||||
|
||||
// Delete old logs
|
||||
deleteOld(days) {
|
||||
return api.delete('/sync-logs/old', { params: { days } })
|
||||
}
|
||||
}
|
||||
21
frontend/src/main.js
Normal file
21
frontend/src/main.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
|
||||
// Register Element Plus icons
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
|
||||
app.mount('#app')
|
||||
45
frontend/src/router/index.js
Normal file
45
frontend/src/router/index.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/dashboard'
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('@/views/Dashboard.vue')
|
||||
},
|
||||
{
|
||||
path: '/servers',
|
||||
name: 'Servers',
|
||||
component: () => import('@/views/Servers.vue')
|
||||
},
|
||||
{
|
||||
path: '/repos',
|
||||
name: 'Repos',
|
||||
component: () => import('@/views/Repos.vue')
|
||||
},
|
||||
{
|
||||
path: '/sync-logs',
|
||||
name: 'SyncLogs',
|
||||
component: () => import('@/views/SyncLogs.vue')
|
||||
},
|
||||
{
|
||||
path: '/ssh-keys',
|
||||
name: 'SshKeys',
|
||||
component: () => import('@/views/SshKeys.vue')
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'Settings',
|
||||
component: () => import('@/views/Settings.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
39
frontend/src/stores/app.js
Normal file
39
frontend/src/stores/app.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useAppStore = defineStore('app', () => {
|
||||
// State
|
||||
const loading = ref(false)
|
||||
const sidebarCollapsed = ref(false)
|
||||
const theme = ref(localStorage.getItem('theme') || 'light')
|
||||
|
||||
// Actions
|
||||
const setLoading = (value) => {
|
||||
loading.value = value
|
||||
}
|
||||
|
||||
const toggleSidebar = () => {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value
|
||||
}
|
||||
|
||||
const setTheme = (newTheme) => {
|
||||
theme.value = newTheme
|
||||
localStorage.setItem('theme', newTheme)
|
||||
document.documentElement.setAttribute('data-theme', newTheme)
|
||||
}
|
||||
|
||||
// Initialize theme
|
||||
const initTheme = () => {
|
||||
document.documentElement.setAttribute('data-theme', theme.value)
|
||||
}
|
||||
|
||||
return {
|
||||
loading,
|
||||
sidebarCollapsed,
|
||||
theme,
|
||||
setLoading,
|
||||
toggleSidebar,
|
||||
setTheme,
|
||||
initTheme
|
||||
}
|
||||
})
|
||||
146
frontend/src/stores/servers.js
Normal file
146
frontend/src/stores/servers.js
Normal file
@@ -0,0 +1,146 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { serversApi } from '@/api/servers'
|
||||
|
||||
export const useServersStore = defineStore('servers', () => {
|
||||
// State
|
||||
const servers = ref([])
|
||||
const currentServer = ref(null)
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
// Actions
|
||||
const fetchServers = async () => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const data = await serversApi.getAll()
|
||||
servers.value = data
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchServerById = async (id) => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const data = await serversApi.getById(id)
|
||||
currentServer.value = data
|
||||
return data
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const createServer = async (serverData) => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const data = await serversApi.create(serverData)
|
||||
servers.value.push(data)
|
||||
return data
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const updateServer = async (id, serverData) => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const data = await serversApi.update(id, serverData)
|
||||
const index = servers.value.findIndex(s => s.id === id)
|
||||
if (index !== -1) {
|
||||
servers.value[index] = data
|
||||
}
|
||||
if (currentServer.value?.id === id) {
|
||||
currentServer.value = data
|
||||
}
|
||||
return data
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const deleteServer = async (id) => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
await serversApi.delete(id)
|
||||
servers.value = servers.value.filter(s => s.id !== id)
|
||||
if (currentServer.value?.id === id) {
|
||||
currentServer.value = null
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const testConnection = async (id) => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const result = await serversApi.testConnection(id)
|
||||
return result
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getServerRepos = async (id) => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const data = await serversApi.getRepos(id)
|
||||
return data
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const setCurrentServer = (server) => {
|
||||
currentServer.value = server
|
||||
}
|
||||
|
||||
const clearCurrentServer = () => {
|
||||
currentServer.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
servers,
|
||||
currentServer,
|
||||
loading,
|
||||
error,
|
||||
fetchServers,
|
||||
fetchServerById,
|
||||
createServer,
|
||||
updateServer,
|
||||
deleteServer,
|
||||
testConnection,
|
||||
getServerRepos,
|
||||
setCurrentServer,
|
||||
clearCurrentServer
|
||||
}
|
||||
})
|
||||
158
frontend/src/views/Dashboard.vue
Normal file
158
frontend/src/views/Dashboard.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<el-icon class="stat-icon" color="#409EFF"><Monitor /></el-icon>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ stats.servers }}</div>
|
||||
<div class="stat-label">Servers</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<el-icon class="stat-icon" color="#67C23A"><FolderOpened /></el-icon>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ stats.repos }}</div>
|
||||
<div class="stat-label">Repositories</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<el-icon class="stat-icon" color="#E6A23C"><Document /></el-icon>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ stats.syncsToday }}</div>
|
||||
<div class="stat-label">Syncs Today</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-content">
|
||||
<el-icon class="stat-icon" color="#F56C6C"><Key /></el-icon>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ stats.sshKeys }}</div>
|
||||
<div class="stat-label">SSH Keys</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" style="margin-top: 20px;">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Recent Sync Activity</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="No recent activity" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" style="margin-top: 20px;">
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Server Status</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="No servers configured" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Quick Actions</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="quick-actions">
|
||||
<el-button type="primary" @click="$router.push('/servers')">
|
||||
<el-icon><Plus /></el-icon> Add Server
|
||||
</el-button>
|
||||
<el-button type="success" @click="$router.push('/sync-logs')">
|
||||
<el-icon><Refresh /></el-icon> View Logs
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const stats = ref({
|
||||
servers: 0,
|
||||
repos: 0,
|
||||
syncsToday: 0,
|
||||
sshKeys: 0
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
103
frontend/src/views/Repos.vue
Normal file
103
frontend/src/views/Repos.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="repos">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Repositories Management</span>
|
||||
<el-button type="primary">
|
||||
<el-icon><Plus /></el-icon> Add Repository
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="repos" v-loading="loading">
|
||||
<el-table-column prop="name" label="Repository Name" />
|
||||
<el-table-column prop="server" label="Server" />
|
||||
<el-table-column prop="path" label="Path" />
|
||||
<el-table-column prop="branch" label="Branch" width="150" />
|
||||
<el-table-column label="Sync Status" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.syncStatus)">
|
||||
{{ row.syncStatus || 'Unknown' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lastSync" label="Last Sync" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.lastSync) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Actions" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="syncRepo(row)">
|
||||
<el-icon><Refresh /></el-icon> Sync
|
||||
</el-button>
|
||||
<el-button size="small" type="primary">Details</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty v-if="!loading && repos.length === 0" description="No repositories found" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const loading = ref(false)
|
||||
const repos = ref([])
|
||||
|
||||
const getStatusType = (status) => {
|
||||
const types = {
|
||||
synced: 'success',
|
||||
pending: 'warning',
|
||||
failed: 'danger',
|
||||
syncing: 'info'
|
||||
}
|
||||
return types[status] || 'info'
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
if (!date) return 'Never'
|
||||
return new Date(date).toLocaleString()
|
||||
}
|
||||
|
||||
const syncRepo = async (repo) => {
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
ElMessage.success(`Syncing ${repo.name}...`)
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to sync repository')
|
||||
}
|
||||
}
|
||||
|
||||
const loadRepos = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
// repos.value = await reposApi.getAll()
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to load repositories')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadRepos()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.repos {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
184
frontend/src/views/Servers.vue
Normal file
184
frontend/src/views/Servers.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="servers">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Servers Management</span>
|
||||
<el-button type="primary" @click="showAddDialog = true">
|
||||
<el-icon><Plus /></el-icon> Add Server
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="servers" v-loading="loading">
|
||||
<el-table-column prop="name" label="Name" />
|
||||
<el-table-column prop="host" label="Host" />
|
||||
<el-table-column prop="port" label="Port" width="100" />
|
||||
<el-table-column prop="username" label="Username" />
|
||||
<el-table-column label="Status" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 'connected' ? 'success' : 'danger'">
|
||||
{{ row.status || 'Unknown' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Actions" width="250">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="testServer(row)">Test</el-button>
|
||||
<el-button size="small" type="primary" @click="editServer(row)">Edit</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteServer(row)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty v-if="!loading && servers.length === 0" description="No servers found" />
|
||||
</el-card>
|
||||
|
||||
<!-- Add/Edit Dialog -->
|
||||
<el-dialog
|
||||
v-model="showAddDialog"
|
||||
:title="editingServer ? 'Edit Server' : 'Add Server'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form :model="serverForm" label-width="100px">
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model="serverForm.name" placeholder="Server name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Host">
|
||||
<el-input v-model="serverForm.host" placeholder="Server host or IP" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Port">
|
||||
<el-input-number v-model="serverForm.port" :min="1" :max="65535" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Username">
|
||||
<el-input v-model="serverForm.username" placeholder="SSH username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Auth Type">
|
||||
<el-radio-group v-model="serverForm.authType">
|
||||
<el-radio label="password">Password</el-radio>
|
||||
<el-radio label="key">SSH Key</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="serverForm.authType === 'password'" label="Password">
|
||||
<el-input v-model="serverForm.password" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="serverForm.authType === 'key'" label="SSH Key">
|
||||
<el-select v-model="serverForm.sshKeyId" placeholder="Select SSH key">
|
||||
<el-option
|
||||
v-for="key in sshKeys"
|
||||
:key="key.id"
|
||||
:label="key.name"
|
||||
:value="key.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showAddDialog = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="saveServer">Save</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const loading = ref(false)
|
||||
const servers = ref([])
|
||||
const sshKeys = ref([])
|
||||
const showAddDialog = ref(false)
|
||||
const editingServer = ref(null)
|
||||
|
||||
const serverForm = ref({
|
||||
name: '',
|
||||
host: '',
|
||||
port: 22,
|
||||
username: '',
|
||||
authType: 'password',
|
||||
password: '',
|
||||
sshKeyId: null
|
||||
})
|
||||
|
||||
const loadServers = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
// servers.value = await serversApi.getAll()
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to load servers')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const testServer = async (server) => {
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
ElMessage.success('Connection test coming soon')
|
||||
} catch (error) {
|
||||
ElMessage.error('Connection test failed')
|
||||
}
|
||||
}
|
||||
|
||||
const editServer = (server) => {
|
||||
editingServer.value = server
|
||||
serverForm.value = { ...server }
|
||||
showAddDialog.value = true
|
||||
}
|
||||
|
||||
const deleteServer = async (server) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`Are you sure you want to delete server "${server.name}"?`,
|
||||
'Confirm Delete',
|
||||
{ type: 'warning' }
|
||||
)
|
||||
// TODO: Implement API call
|
||||
ElMessage.success('Server deleted')
|
||||
await loadServers()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('Failed to delete server')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const saveServer = async () => {
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
ElMessage.success('Server saved')
|
||||
showAddDialog.value = false
|
||||
editingServer.value = null
|
||||
serverForm.value = {
|
||||
name: '',
|
||||
host: '',
|
||||
port: 22,
|
||||
username: '',
|
||||
authType: 'password',
|
||||
password: '',
|
||||
sshKeyId: null
|
||||
}
|
||||
await loadServers()
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to save server')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadServers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.servers {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
291
frontend/src/views/Settings.vue
Normal file
291
frontend/src/views/Settings.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="settings">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Application Settings</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form :model="settings" label-width="180px" label-position="left">
|
||||
<el-divider content-position="left">General</el-divider>
|
||||
|
||||
<el-form-item label="Application Name">
|
||||
<el-input v-model="settings.appName" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Theme">
|
||||
<el-radio-group v-model="settings.theme">
|
||||
<el-radio label="light">Light</el-radio>
|
||||
<el-radio label="dark">Dark</el-radio>
|
||||
<el-radio label="auto">Auto</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Language">
|
||||
<el-select v-model="settings.language">
|
||||
<el-option label="English" value="en" />
|
||||
<el-option label="Chinese" value="zh" />
|
||||
<el-option label="Japanese" value="ja" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">Sync Settings</el-divider>
|
||||
|
||||
<el-form-item label="Default Sync Interval">
|
||||
<el-input-number
|
||||
v-model="settings.syncInterval"
|
||||
:min="1"
|
||||
:max="1440"
|
||||
:step="5"
|
||||
/>
|
||||
<span style="margin-left: 10px;">minutes</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Concurrent Syncs">
|
||||
<el-input-number
|
||||
v-model="settings.concurrentSyncs"
|
||||
:min="1"
|
||||
:max="10"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Auto-sync on Start">
|
||||
<el-switch v-model="settings.autoSyncOnStart" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">Log Settings</el-divider>
|
||||
|
||||
<el-form-item label="Log Retention Days">
|
||||
<el-input-number
|
||||
v-model="settings.logRetentionDays"
|
||||
:min="1"
|
||||
:max="365"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Log Level">
|
||||
<el-select v-model="settings.logLevel">
|
||||
<el-option label="Debug" value="debug" />
|
||||
<el-option label="Info" value="info" />
|
||||
<el-option label="Warn" value="warn" />
|
||||
<el-option label="Error" value="error" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveSettings">Save Settings</el-button>
|
||||
<el-button @click="resetSettings">Reset to Defaults</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" style="margin-top: 20px;">
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>System Information</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="Version">{{ systemInfo.version }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Node Version">{{ systemInfo.nodeVersion }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Platform">{{ systemInfo.platform }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Architecture">{{ systemInfo.arch }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Uptime">{{ formatUptime(systemInfo.uptime) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Quick Actions</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="quick-actions">
|
||||
<el-button type="warning" @click="clearLogs">
|
||||
<el-icon><Delete /></el-icon> Clear Old Logs
|
||||
</el-button>
|
||||
<el-button type="success" @click="exportSettings">
|
||||
<el-icon><Download /></el-icon> Export Settings
|
||||
</el-button>
|
||||
<el-button @click="importSettings">
|
||||
<el-icon><Upload /></el-icon> Import Settings
|
||||
</el-button>
|
||||
<el-button type="danger" @click="confirmReset">
|
||||
<el-icon><RefreshRight /></el-icon> Factory Reset
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const settings = ref({
|
||||
appName: 'Git Manager',
|
||||
theme: 'light',
|
||||
language: 'en',
|
||||
syncInterval: 30,
|
||||
concurrentSyncs: 3,
|
||||
autoSyncOnStart: false,
|
||||
logRetentionDays: 30,
|
||||
logLevel: 'info'
|
||||
})
|
||||
|
||||
const systemInfo = ref({
|
||||
version: '1.0.0',
|
||||
nodeVersion: 'v20.0.0',
|
||||
platform: 'win32',
|
||||
arch: 'x64',
|
||||
uptime: 0
|
||||
})
|
||||
|
||||
const formatUptime = (seconds) => {
|
||||
const days = Math.floor(seconds / 86400)
|
||||
const hours = Math.floor((seconds % 86400) / 3600)
|
||||
const mins = Math.floor((seconds % 3600) / 60)
|
||||
return `${days}d ${hours}h ${mins}m`
|
||||
}
|
||||
|
||||
const saveSettings = async () => {
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
localStorage.setItem('settings', JSON.stringify(settings.value))
|
||||
ElMessage.success('Settings saved successfully')
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to save settings')
|
||||
}
|
||||
}
|
||||
|
||||
const resetSettings = () => {
|
||||
settings.value = {
|
||||
appName: 'Git Manager',
|
||||
theme: 'light',
|
||||
language: 'en',
|
||||
syncInterval: 30,
|
||||
concurrentSyncs: 3,
|
||||
autoSyncOnStart: false,
|
||||
logRetentionDays: 30,
|
||||
logLevel: 'info'
|
||||
}
|
||||
ElMessage.info('Settings reset to defaults')
|
||||
}
|
||||
|
||||
const clearLogs = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
'Delete all logs older than retention period?',
|
||||
'Confirm Clear Logs',
|
||||
{ type: 'warning' }
|
||||
)
|
||||
// TODO: Implement API call
|
||||
ElMessage.success('Old logs cleared')
|
||||
} catch (error) {
|
||||
// Cancelled
|
||||
}
|
||||
}
|
||||
|
||||
const exportSettings = () => {
|
||||
const data = JSON.stringify(settings.value, null, 2)
|
||||
const blob = new Blob([data], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'git-manager-settings.json'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
ElMessage.success('Settings exported')
|
||||
}
|
||||
|
||||
const importSettings = () => {
|
||||
const input = document.createElement('input')
|
||||
input.type = 'file'
|
||||
input.accept = '.json'
|
||||
input.onchange = (e) => {
|
||||
const file = e.target.files[0]
|
||||
const reader = new FileReader()
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const imported = JSON.parse(event.target.result)
|
||||
settings.value = { ...settings.value, ...imported }
|
||||
ElMessage.success('Settings imported')
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to import settings')
|
||||
}
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
input.click()
|
||||
}
|
||||
|
||||
const confirmReset = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
'This will reset all settings to default values. Continue?',
|
||||
'Factory Reset',
|
||||
{ type: 'error', confirmButtonText: 'Reset', confirmButtonClass: 'el-button--danger' }
|
||||
)
|
||||
resetSettings()
|
||||
await saveSettings()
|
||||
ElMessage.success('Factory reset complete')
|
||||
} catch (error) {
|
||||
// Cancelled
|
||||
}
|
||||
}
|
||||
|
||||
const loadSystemInfo = async () => {
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
// systemInfo.value = await api.get('/system/info')
|
||||
} catch (error) {
|
||||
console.error('Failed to load system info')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const saved = localStorage.getItem('settings')
|
||||
if (saved) {
|
||||
try {
|
||||
settings.value = { ...settings.value, ...JSON.parse(saved) }
|
||||
} catch (error) {
|
||||
console.error('Failed to parse saved settings')
|
||||
}
|
||||
}
|
||||
loadSystemInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.quick-actions .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
229
frontend/src/views/SshKeys.vue
Normal file
229
frontend/src/views/SshKeys.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="ssh-keys">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>SSH Keys Management</span>
|
||||
<el-button type="primary" @click="showAddDialog = true">
|
||||
<el-icon><Plus /></el-icon> Add Key
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="sshKeys" v-loading="loading">
|
||||
<el-table-column prop="name" label="Name" />
|
||||
<el-table-column prop="type" label="Type" width="120" />
|
||||
<el-table-column prop="fingerprint" label="Fingerprint">
|
||||
<template #default="{ row }">
|
||||
<code>{{ row.fingerprint }}</code>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="Created" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.createdAt) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Actions" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="viewKey(row)">View</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteKey(row)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty v-if="!loading && sshKeys.length === 0" description="No SSH keys found" />
|
||||
</el-card>
|
||||
|
||||
<!-- Add Key Dialog -->
|
||||
<el-dialog v-model="showAddDialog" title="Add SSH Key" width="600px">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="Generate New Key" name="generate">
|
||||
<el-form :model="generateForm" label-width="120px">
|
||||
<el-form-item label="Key Name">
|
||||
<el-input v-model="generateForm.name" placeholder="My SSH Key" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Key Type">
|
||||
<el-select v-model="generateForm.type">
|
||||
<el-option label="RSA (4096)" value="rsa-4096" />
|
||||
<el-option label="ED25519" value="ed25519" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Comment">
|
||||
<el-input v-model="generateForm.comment" placeholder="Optional comment" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showAddDialog = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="generateKey">Generate</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="Import Existing Key" name="import">
|
||||
<el-form :model="importForm" label-width="120px">
|
||||
<el-form-item label="Key Name">
|
||||
<el-input v-model="importForm.name" placeholder="My Imported Key" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Private Key">
|
||||
<el-input
|
||||
v-model="importForm.privateKey"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="Paste private key content"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Public Key (Optional)">
|
||||
<el-input
|
||||
v-model="importForm.publicKey"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="Paste public key content"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showAddDialog = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="importKey">Import</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
|
||||
<!-- View Key Dialog -->
|
||||
<el-dialog v-model="showViewDialog" title="SSH Key Details" width="600px">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="Name">{{ currentKey?.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Type">{{ currentKey?.type }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Fingerprint">
|
||||
<code>{{ currentKey?.fingerprint }}</code>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Public Key">
|
||||
<pre class="key-content">{{ currentKey?.publicKey }}</pre>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const loading = ref(false)
|
||||
const sshKeys = ref([])
|
||||
const showAddDialog = ref(false)
|
||||
const showViewDialog = ref(false)
|
||||
const activeTab = ref('generate')
|
||||
const currentKey = ref(null)
|
||||
|
||||
const generateForm = ref({
|
||||
name: '',
|
||||
type: 'ed25519',
|
||||
comment: ''
|
||||
})
|
||||
|
||||
const importForm = ref({
|
||||
name: '',
|
||||
privateKey: '',
|
||||
publicKey: ''
|
||||
})
|
||||
|
||||
const formatDate = (date) => {
|
||||
if (!date) return 'N/A'
|
||||
return new Date(date).toLocaleString()
|
||||
}
|
||||
|
||||
const loadKeys = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
// sshKeys.value = await sshKeysApi.getAll()
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to load SSH keys')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const generateKey = async () => {
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
// await sshKeysApi.generate()
|
||||
ElMessage.success('SSH key generated successfully')
|
||||
showAddDialog.value = false
|
||||
generateForm.value = { name: '', type: 'ed25519', comment: '' }
|
||||
await loadKeys()
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to generate SSH key')
|
||||
}
|
||||
}
|
||||
|
||||
const importKey = async () => {
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
// await sshKeysApi.create(importForm.value)
|
||||
ElMessage.success('SSH key imported successfully')
|
||||
showAddDialog.value = false
|
||||
importForm.value = { name: '', privateKey: '', publicKey: '' }
|
||||
await loadKeys()
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to import SSH key')
|
||||
}
|
||||
}
|
||||
|
||||
const viewKey = (key) => {
|
||||
currentKey.value = key
|
||||
showViewDialog.value = true
|
||||
}
|
||||
|
||||
const deleteKey = async (key) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`Are you sure you want to delete SSH key "${key.name}"?`,
|
||||
'Confirm Delete',
|
||||
{ type: 'warning' }
|
||||
)
|
||||
// TODO: Implement API call
|
||||
ElMessage.success('SSH key deleted')
|
||||
await loadKeys()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('Failed to delete SSH key')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadKeys()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ssh-keys {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.key-content {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
220
frontend/src/views/SyncLogs.vue
Normal file
220
frontend/src/views/SyncLogs.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="sync-logs">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Sync Logs</span>
|
||||
<div class="header-actions">
|
||||
<el-select v-model="filters.status" placeholder="Filter by status" clearable style="width: 150px; margin-right: 10px;">
|
||||
<el-option label="Success" value="success" />
|
||||
<el-option label="Failed" value="failed" />
|
||||
<el-option label="Pending" value="pending" />
|
||||
<el-option label="Running" value="running" />
|
||||
</el-select>
|
||||
<el-button @click="loadLogs">
|
||||
<el-icon><Refresh /></el-icon> Refresh
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="logs" v-loading="loading">
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="server" label="Server" width="150" />
|
||||
<el-table-column prop="repository" label="Repository" />
|
||||
<el-table-column prop="branch" label="Branch" width="120" />
|
||||
<el-table-column label="Status" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startedAt" label="Started" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.startedAt) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="duration" label="Duration" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ formatDuration(row.duration) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Actions" width="150">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="viewDetails(row)">View</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteLog(row)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty v-if="!loading && logs.length === 0" description="No sync logs found" />
|
||||
|
||||
<div class="pagination" v-if="logs.length > 0">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="loadLogs"
|
||||
@current-change="loadLogs"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- Log Details Dialog -->
|
||||
<el-dialog v-model="showDetailsDialog" title="Sync Log Details" width="800px">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="ID">{{ currentLog?.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Status">
|
||||
<el-tag :type="getStatusType(currentLog?.status)">{{ currentLog?.status }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Server">{{ currentLog?.server }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Repository">{{ currentLog?.repository }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Branch">{{ currentLog?.branch }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Started">{{ formatDate(currentLog?.startedAt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Completed" :span="2">{{ formatDate(currentLog?.completedAt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Output" :span="2">
|
||||
<pre class="log-output">{{ currentLog?.output || 'No output available' }}</pre>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Error" :span="2" v-if="currentLog?.error">
|
||||
<pre class="log-error">{{ currentLog.error }}</pre>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const loading = ref(false)
|
||||
const logs = ref([])
|
||||
const showDetailsDialog = ref(false)
|
||||
const currentLog = ref(null)
|
||||
|
||||
const filters = ref({
|
||||
status: null
|
||||
})
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const getStatusType = (status) => {
|
||||
const types = {
|
||||
success: 'success',
|
||||
failed: 'danger',
|
||||
pending: 'warning',
|
||||
running: 'info'
|
||||
}
|
||||
return types[status] || 'info'
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
if (!date) return 'N/A'
|
||||
return new Date(date).toLocaleString()
|
||||
}
|
||||
|
||||
const formatDuration = (seconds) => {
|
||||
if (!seconds) return 'N/A'
|
||||
if (seconds < 60) return `${seconds}s`
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
return `${mins}m ${secs}s`
|
||||
}
|
||||
|
||||
const loadLogs = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: Implement API call
|
||||
// const result = await syncLogsApi.getAll({
|
||||
// page: pagination.value.page,
|
||||
// pageSize: pagination.value.pageSize,
|
||||
// ...filters.value
|
||||
// })
|
||||
// logs.value = result.data
|
||||
// pagination.value.total = result.total
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to load sync logs')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const viewDetails = (log) => {
|
||||
currentLog.value = log
|
||||
showDetailsDialog.value = true
|
||||
}
|
||||
|
||||
const deleteLog = async (log) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`Are you sure you want to delete this log?`,
|
||||
'Confirm Delete',
|
||||
{ type: 'warning' }
|
||||
)
|
||||
// TODO: Implement API call
|
||||
ElMessage.success('Log deleted')
|
||||
await loadLogs()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('Failed to delete log')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadLogs()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sync-logs {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.log-output {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.log-error {
|
||||
background-color: #fee;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: #f56c6c;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
21
frontend/vite.config.js
Normal file
21
frontend/vite.config.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user