dvirlabs/snapix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center it

Browse Source
This commit is contained in:
dvirlabs 2025-06-10 20:46:34 +03:00
parent afbc630d48
commit ff18c5d6d7
8 changed files with 1063 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

931
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
frontend/package.json
View File

@ -10,6 +10,11 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/base": "^5.0.0-beta.70",
"@mui/material": "^7.1.1",
"@mui/styled-engine": "^7.1.1",
"axios": "^1.9.0", "axios": "^1.9.0",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0" "react-dom": "^19.1.0"

68
frontend/src/App.css
View File

@ -1,42 +1,36 @@
#root { body {
max-width: 1280px; display: flex;
margin: 0 auto; justify-content: center;
align-items: center;
height: 100vh;
}
/* Top-level layout container */
.snapix-container {
display: flex;
flex-direction: column;
align-items: center; /* horizontal center */
justify-content: center; /* vertical center */
min-height: 100vh;
color: white;
padding: 2rem; padding: 2rem;
box-sizing: border-box;
}
/* Title styling */
.snapix-title {
text-align: center; text-align: center;
color: white;
margin-bottom: 2rem;
font-size: 2rem;
} }
.logo { /* Dashboard: backup + restore side by side */
height: 6em; .snapix-dashboard {
padding: 1.5em; display: flex;
will-change: filter; justify-content: center;
transition: filter 300ms; align-items: flex-start;
} gap: 30px;
.logo:hover { flex-wrap: wrap;
filter: drop-shadow(0 0 2em #646cffaa); margin: auto;
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
} }

13
frontend/src/App.jsx
View File

@ -1,13 +1,16 @@
import BackupForm from './components/BackupForm'; import BackupForm from './components/BackupForm';
import RestoreForm from './components/RestoreForm'; import RestoreForm from './components/RestoreForm';
import './App.css';
function App() { function App() {
return ( return (
<div style={{ padding: "2rem" }}> <div className="snapix-container">
<h1>🚀 Snapix Dashboard</h1> <h1 className="snapix-title">🚀 Snapix Dashboard</h1>
<BackupForm /> <div className="snapix-dashboard">
<hr /> <BackupForm />
<RestoreForm /> <RestoreForm />
</div>
</div> </div>
); );
} }

55
frontend/src/components/BackupForm.jsx
View File

@ -1,5 +1,6 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { getNamespaces, getPVCs, createBackup } from '../api/snapix'; import { getNamespaces, getPVCs, createBackup } from '../api/snapix';
import { Button, Select, Option, Input } from '@mui/base'
export default function BackupForm() { export default function BackupForm() {
const [namespaces, setNamespaces] = useState([]); const [namespaces, setNamespaces] = useState([]);
@ -34,34 +35,40 @@ export default function BackupForm() {
}; };
return ( return (
<div> <div className='form-group'>
<h2>📦 Backup PVC</h2> <h2>📦 Backup PVC</h2>
<label>Namespace:</label> <div className='form-content'>
<select onChange={e => setSelectedNs(e.target.value)} value={selectedNs}> <label>Namespace:</label>
<option value="">-- Select Namespace --</option> <Select onChange={e => setSelectedNs(e.target.value)} value={selectedNs}>
{namespaces.map(ns => <option key={ns}>{ns}</option>)} <Option value="">-- Select Namespace --</Option>
</select> {namespaces.map(ns => <Option key={ns}>{ns}</Option>)}
</Select>
</div>
<label>PVC:</label> <div className='form-content'>
<select <label>PVC:</label>
onChange={e => setSelectedPvc(e.target.value)} <Select
value={selectedPvc} onChange={e => setSelectedPvc(e.target.value)}
disabled={!selectedNs} value={selectedPvc}
> disabled={!selectedNs}
<option value="">-- Select PVC --</option> >
{pvcs.map(pvc => <option key={pvc}>{pvc}</option>)} <Option value="">-- Select PVC --</Option>
</select> {pvcs.map(pvc => <Option key={pvc}>{pvc}</Option>)}
</Select>
</div>
<label>Backup Name:</label> <div className='form-content'>
<input <label>Backup Name:</label>
type="text" <Input
value={backupName} type="text"
onChange={e => setBackupName(e.target.value)} value={backupName}
placeholder="e.g. git-bkp" onChange={e => setBackupName(e.target.value)}
/> placeholder="e.g. git-bkp"
/>
<button onClick={handleSubmit}>Create Backup</button> </div>
<Button className='btn' onClick={handleSubmit}>Create Backup</Button>
</div> </div>
); );
} }

47
frontend/src/components/RestoreForm.jsx
View File

@ -1,5 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { restoreBackup } from '../api/snapix'; import { restoreBackup } from '../api/snapix';
import { Button, Input } from '@mui/base'
export default function RestoreForm() { export default function RestoreForm() {
const [backupName, setBackupName] = useState(''); const [backupName, setBackupName] = useState('');
@ -19,31 +20,39 @@ export default function RestoreForm() {
}; };
return ( return (
<div> <div className='form-group'>
<h2>🔁 Restore PVC</h2> <h2>🔁 Restore PVC</h2>
<div className='form-content'>
<label>Backup Name:</label> <label>Backup Name:</label>
<input <Input
type="text" type="text"
value={backupName} value={backupName}
onChange={e => setBackupName(e.target.value)} onChange={e => setBackupName(e.target.value)}
/> className='restore-input'
/>
</div>
<label>Target Namespace:</label> <div className='form-content'>
<input <label>Target Namespace:</label>
type="text" <Input
value={targetNs} type="text"
onChange={e => setTargetNs(e.target.value)} value={targetNs}
/> onChange={e => setTargetNs(e.target.value)}
className='restore-input'
/>
</div>
<div className='form-content'>
<label>Target PVC:</label> <label>Target PVC:</label>
<input <Input
type="text" type="text"
value={targetPvc} value={targetPvc}
onChange={e => setTargetPvc(e.target.value)} onChange={e => setTargetPvc(e.target.value)}
/> className='restore-input'
/>
</div>
<button onClick={handleRestore}>Restore</button> <Button className='btn' onClick={handleRestore}>Restore</Button>
</div> </div>
); );
} }

1
frontend/src/main.jsx
View File

@ -1,6 +1,7 @@
import { StrictMode } from 'react' import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import './index.css' import './index.css'
import './style/global.css'
import App from './App.jsx' import App from './App.jsx'
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(

41
frontend/src/style/global.css Normal file
View File

@ -0,0 +1,41 @@
h2 {
text-align: center;
}
.form-group {
border: 2px solid #ccc;
border-radius: 8px;
padding: 13px;
margin: 10px;
height: 400px;
width: 500px;
flex: 1;
max-width: 500px;
min-width: 500px;
}
.form-content {
display: flex;
flex-direction: column;
padding: 10px;
}
input {
width: 100%;
padding: 10px;
background-color: #1a1a1a;
border: 1px solid #444;
border-radius: 8px;
color: white;
font-size: 1rem;
box-sizing: border-box;
}
input:hover {
border-color: #1a73e8;
}
.btn {
background-color: #4CAF50;
margin-top: 30px;
}