feat/ajout-de-fonctionnalites (#1)
All checks were successful
Auto Tag Develop / tag (push) Successful in 6s
All checks were successful
Auto Tag Develop / tag (push) Successful in 6s
Reviewed-on: #1 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #1.
This commit is contained in:
126
frontend/components/ui/AppModal.vue
Normal file
126
frontend/components/ui/AppModal.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<Teleport v-if="isOpen" to="body">
|
||||
<Transition name="modal" appear>
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
|
||||
@click="close"
|
||||
/>
|
||||
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="relative z-10 flex w-full flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
|
||||
:class="maxWidthClass"
|
||||
style="max-height: min(90vh, 900px)"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="border-b border-neutral-100 bg-neutral-50/80 px-4 py-4 sm:px-8 sm:py-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold tracking-tight text-neutral-900">
|
||||
<slot name="title" />
|
||||
</h2>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
variant="ghost"
|
||||
icon-size="20"
|
||||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="overflow-y-auto px-4 py-4 sm:px-8 sm:py-6">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="border-t border-neutral-100 px-4 py-4 sm:px-8">
|
||||
<div class="flex justify-end gap-3">
|
||||
<slot name="footer">
|
||||
<MalioButton
|
||||
:label="cancelLabel"
|
||||
variant="tertiary"
|
||||
@click="close"
|
||||
/>
|
||||
<MalioButton
|
||||
:label="submitLabel"
|
||||
:loading="loading"
|
||||
@click="$emit('submit')"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: boolean
|
||||
submitLabel?: string
|
||||
cancelLabel?: string
|
||||
loading?: boolean
|
||||
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
|
||||
}>(), {
|
||||
submitLabel: 'Enregistrer',
|
||||
cancelLabel: 'Annuler',
|
||||
loading: false,
|
||||
maxWidth: '2xl',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'submit'): void
|
||||
}>()
|
||||
|
||||
const isOpen = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
})
|
||||
|
||||
function close() {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
const maxWidthClass = computed(() => {
|
||||
const map = {
|
||||
sm: 'max-w-sm',
|
||||
md: 'max-w-md',
|
||||
lg: 'max-w-lg',
|
||||
xl: 'max-w-xl',
|
||||
'2xl': 'max-w-2xl',
|
||||
}
|
||||
return map[props.maxWidth]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-active > div:last-child,
|
||||
.modal-leave-active > div:last-child {
|
||||
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from > div:last-child {
|
||||
transform: scale(0.95) translateY(8px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-leave-to > div:last-child {
|
||||
transform: scale(0.97);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -8,8 +8,21 @@
|
||||
"delete": "Impossible de supprimer la ressource."
|
||||
},
|
||||
"applications": {
|
||||
"activateMaintenance": "Impossible d'activer le mode maintenance.",
|
||||
"deactivateMaintenance": "Impossible de désactiver le mode maintenance."
|
||||
"create": "Erreur lors de la creation de l'application",
|
||||
"update": "Erreur lors de la modification de l'application",
|
||||
"delete": "Erreur lors de la suppression de l'application",
|
||||
"load": "Erreur lors du chargement des applications"
|
||||
},
|
||||
"environments": {
|
||||
"create": "Erreur lors de la creation de l'environnement",
|
||||
"update": "Erreur lors de la modification de l'environnement",
|
||||
"delete": "Erreur lors de la suppression de l'environnement",
|
||||
"activateMaintenance": "Erreur lors de l'activation de la maintenance",
|
||||
"deactivateMaintenance": "Erreur lors de la desactivation de la maintenance"
|
||||
},
|
||||
"deploy": {
|
||||
"tags": "Erreur lors du chargement des versions",
|
||||
"deploy": "Erreur lors du deploiement"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Identifiants invalides.",
|
||||
@@ -19,8 +32,16 @@
|
||||
},
|
||||
"success": {
|
||||
"applications": {
|
||||
"activateMaintenance": "Le mode maintenance a été activé.",
|
||||
"deactivateMaintenance": "Le mode maintenance a été désactivé."
|
||||
"create": "Application creee avec succes",
|
||||
"update": "Application modifiee avec succes",
|
||||
"delete": "Application supprimee avec succes"
|
||||
},
|
||||
"environments": {
|
||||
"create": "Environnement cree avec succes",
|
||||
"update": "Environnement modifie avec succes",
|
||||
"delete": "Environnement supprime avec succes",
|
||||
"activateMaintenance": "Maintenance activee",
|
||||
"deactivateMaintenance": "Maintenance desactivee"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Connexion réussie.",
|
||||
@@ -28,30 +49,95 @@
|
||||
}
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Tableau de bord"
|
||||
"title": "Dashboard",
|
||||
"description": "Vue d'ensemble du SI",
|
||||
"refresh": "Actualiser",
|
||||
"status": {
|
||||
"running": "En ligne",
|
||||
"exited": "Arrete",
|
||||
"restarting": "Redemarrage",
|
||||
"not_found": "Introuvable"
|
||||
}
|
||||
},
|
||||
"applications": {
|
||||
"eyebrow": "Pilotage centralise",
|
||||
"title": "Supervision des applications",
|
||||
"description": "Active ou desactive le mode maintenance sans te connecter a chaque projet. Chaque action pilote le fichier de maintenance de l'application cible.",
|
||||
"listTitle": "Applications managees",
|
||||
"listDescription": "L'etat affiche correspond au trigger de maintenance present sur le serveur de production.",
|
||||
"emptyTitle": "Aucune application disponible",
|
||||
"emptyDescription": "La configuration backend ne retourne encore aucune application geree.",
|
||||
"status": {
|
||||
"active": "Maintenance active",
|
||||
"inactive": "En ligne"
|
||||
},
|
||||
"title": "Applications",
|
||||
"description": "Gerer les applications du SI",
|
||||
"addButton": "Ajouter une application",
|
||||
"emptyTitle": "Aucune application",
|
||||
"emptyDescription": "Aucune application configuree pour le moment.",
|
||||
"card": {
|
||||
"activeDescription": "Les utilisateurs voient actuellement la page de maintenance de cette application.",
|
||||
"inactiveDescription": "L'application repond normalement et le trigger de maintenance est absent.",
|
||||
"triggerFile": "Fichier trigger maintenance.on"
|
||||
"environments": "environnement | environnements",
|
||||
"noEnvironments": "Aucun environnement configure"
|
||||
},
|
||||
"actions": {
|
||||
"refresh": "Rafraichir",
|
||||
"detail": {
|
||||
"title": "Detail de l'application",
|
||||
"registryImage": "Image registry",
|
||||
"giteaUrl": "Depot Gitea",
|
||||
"description": "Description",
|
||||
"editButton": "Modifier",
|
||||
"deleteButton": "Supprimer",
|
||||
"deleteConfirm": "Etes-vous sur de vouloir supprimer cette application et tous ses environnements ?"
|
||||
},
|
||||
"form": {
|
||||
"name": "Nom",
|
||||
"slug": "Slug",
|
||||
"registryImage": "Image registry",
|
||||
"description": "Description",
|
||||
"giteaUrl": "URL Gitea",
|
||||
"save": "Enregistrer",
|
||||
"cancel": "Annuler"
|
||||
}
|
||||
},
|
||||
"environments": {
|
||||
"title": "Environnements",
|
||||
"addButton": "Ajouter un environnement",
|
||||
"maintenance": {
|
||||
"active": "Maintenance active",
|
||||
"inactive": "En ligne",
|
||||
"activate": "Activer la maintenance",
|
||||
"deactivate": "Desactiver la maintenance",
|
||||
"pending": "Mise a jour en cours"
|
||||
"pending": "En cours..."
|
||||
},
|
||||
"editButton": "Modifier",
|
||||
"deleteButton": "Supprimer",
|
||||
"deleteConfirm": "Etes-vous sur de vouloir supprimer cet environnement ?",
|
||||
"form": {
|
||||
"name": "Nom",
|
||||
"containerName": "Nom du container",
|
||||
"deployScriptPath": "Chemin du script de deploiement",
|
||||
"maintenanceFilePath": "Chemin du fichier de maintenance",
|
||||
"appUrl": "URL de l'application",
|
||||
"save": "Enregistrer",
|
||||
"cancel": "Annuler"
|
||||
},
|
||||
"logFiles": {
|
||||
"title": "Fichiers de log",
|
||||
"addButton": "Ajouter un fichier de log",
|
||||
"label": "Label",
|
||||
"path": "Chemin",
|
||||
"remove": "Retirer"
|
||||
},
|
||||
"health": {
|
||||
"title": "Sante du container",
|
||||
"status": "Statut",
|
||||
"version": "Version",
|
||||
"uptime": "Uptime",
|
||||
"cpu": "CPU",
|
||||
"memory": "Memoire",
|
||||
"noData": "Aucune donnee disponible"
|
||||
},
|
||||
"deploy": {
|
||||
"button": "Deployer",
|
||||
"title": "Deployer une version",
|
||||
"selectTag": "Version a deployer",
|
||||
"selectPlaceholder": "Selectionner une version",
|
||||
"loadingTags": "Chargement des versions...",
|
||||
"noTags": "Aucune version disponible",
|
||||
"confirm": "Deployer",
|
||||
"deploying": "Deploiement en cours...",
|
||||
"success": "Deploiement reussi",
|
||||
"error": "Echec du deploiement",
|
||||
"output": "Sortie du deploiement"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,13 +39,20 @@
|
||||
</div>
|
||||
<nav class="flex-1 overflow-hidden" :class="sidebarIsCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
|
||||
<SidebarLink
|
||||
to="/"
|
||||
icon="mdi:view-dashboard-outline"
|
||||
label="Tableau de bord"
|
||||
to="/dashboard"
|
||||
icon="mdi:view-dashboard"
|
||||
:label="$t('dashboard.title')"
|
||||
:collapsed="sidebarIsCollapsed"
|
||||
:class="sidebarIsCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
|
||||
@click="ui.closeMobileSidebar()"
|
||||
/>
|
||||
<SidebarLink
|
||||
to="/applications"
|
||||
icon="mdi:apps"
|
||||
:label="$t('applications.title')"
|
||||
:collapsed="sidebarIsCollapsed"
|
||||
@click="ui.closeMobileSidebar()"
|
||||
/>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center justify-center p-4">
|
||||
|
||||
@@ -10,7 +10,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
|
||||
return navigateTo('/login')
|
||||
}
|
||||
|
||||
if (isLogin && auth.isAuthenticated) {
|
||||
return navigateTo('/')
|
||||
if (auth.isAuthenticated && (isLogin || to.path === '/')) {
|
||||
return navigateTo('/dashboard')
|
||||
}
|
||||
})
|
||||
|
||||
43
frontend/package-lock.json
generated
43
frontend/package-lock.json
generated
@@ -570,29 +570,6 @@
|
||||
"integrity": "sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
|
||||
"integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@emnapi/wasi-threads": "1.2.1",
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/runtime": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
|
||||
"integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/wasi-threads": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
|
||||
@@ -5715,16 +5692,6 @@
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
|
||||
"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/commondir": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
|
||||
@@ -12683,6 +12650,15 @@
|
||||
"url": "https://opencollective.com/svgo"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/commander": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
|
||||
"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/tagged-tag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
|
||||
@@ -12788,6 +12764,7 @@
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
|
||||
"integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@alloc/quick-lru": "^5.2.0",
|
||||
"arg": "^5.0.2",
|
||||
|
||||
601
frontend/pages/applications/[slug].vue
Normal file
601
frontend/pages/applications/[slug].vue
Normal file
@@ -0,0 +1,601 @@
|
||||
<script setup lang="ts">
|
||||
import type { Application, ApplicationWrite, Environment, EnvironmentWrite } from '~/services/dto/application'
|
||||
import { getApplication, updateApplication, deleteApplication } from '~/services/applications'
|
||||
import { createEnvironment, updateEnvironment, deleteEnvironment, toggleMaintenance } from '~/services/environments'
|
||||
import type { DeployResult } from '~/services/dto/deploy'
|
||||
import { getAvailableTags, deploy } from '~/services/deploy'
|
||||
import type { EnvironmentHealth } from '~/services/dto/dashboard'
|
||||
import { getEnvironmentHealth } from '~/services/dashboard'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
const application = ref<Application | null>(null)
|
||||
const loading = ref(true)
|
||||
const pendingMaintenanceByEnvId = ref<Record<number, boolean>>({})
|
||||
|
||||
// Deploy modal
|
||||
const showDeployModal = ref(false)
|
||||
const deployEnvId = ref<number | null>(null)
|
||||
const deployTags = ref<string[]>([])
|
||||
const selectedTag = ref('')
|
||||
const loadingTags = ref(false)
|
||||
const isDeploying = ref(false)
|
||||
const deployResult = ref<DeployResult | null>(null)
|
||||
|
||||
// Health data per env
|
||||
const healthByEnvId = ref<Record<number, EnvironmentHealth>>({})
|
||||
const loadingHealth = ref(false)
|
||||
|
||||
// App edit modal
|
||||
const showAppModal = ref(false)
|
||||
const editForm = ref<ApplicationWrite>({ name: '', slug: '', registryImage: '', description: '', giteaUrl: '' })
|
||||
const isSubmittingApp = ref(false)
|
||||
|
||||
// Env modal
|
||||
const showEnvModal = ref(false)
|
||||
const editingEnvId = ref<number | null>(null)
|
||||
const envForm = ref<EnvironmentWrite>({
|
||||
name: '',
|
||||
containerName: '',
|
||||
deployScriptPath: '',
|
||||
maintenanceFilePath: '',
|
||||
appUrl: '',
|
||||
logFiles: [],
|
||||
})
|
||||
const isSubmittingEnv = ref(false)
|
||||
|
||||
async function loadApplication() {
|
||||
loading.value = true
|
||||
try {
|
||||
application.value = await getApplication(slug)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
loadHealthData()
|
||||
}
|
||||
|
||||
// Application edit
|
||||
function openEditAppModal() {
|
||||
if (!application.value) return
|
||||
editForm.value = {
|
||||
name: application.value.name,
|
||||
slug: application.value.slug,
|
||||
registryImage: application.value.registryImage,
|
||||
description: application.value.description ?? '',
|
||||
giteaUrl: application.value.giteaUrl ?? '',
|
||||
}
|
||||
showAppModal.value = true
|
||||
}
|
||||
|
||||
async function saveApp() {
|
||||
isSubmittingApp.value = true
|
||||
try {
|
||||
application.value = await updateApplication(slug, editForm.value)
|
||||
showAppModal.value = false
|
||||
if (editForm.value.slug !== slug) {
|
||||
router.replace(`/applications/${editForm.value.slug}`)
|
||||
}
|
||||
} finally {
|
||||
isSubmittingApp.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteApp() {
|
||||
if (!confirm(t('applications.detail.deleteConfirm'))) return
|
||||
await deleteApplication(slug)
|
||||
router.push('/applications')
|
||||
}
|
||||
|
||||
// Environment CRUD
|
||||
function openCreateEnvModal() {
|
||||
editingEnvId.value = null
|
||||
envForm.value = { name: '', containerName: '', deployScriptPath: '', maintenanceFilePath: '', appUrl: '', logFiles: [] }
|
||||
showEnvModal.value = true
|
||||
}
|
||||
|
||||
function openEditEnvModal(env: Environment) {
|
||||
editingEnvId.value = env.id!
|
||||
envForm.value = {
|
||||
name: env.name,
|
||||
containerName: env.containerName,
|
||||
deployScriptPath: env.deployScriptPath,
|
||||
maintenanceFilePath: env.maintenanceFilePath,
|
||||
appUrl: env.appUrl ?? '',
|
||||
logFiles: env.logFiles.map(lf => ({ label: lf.label, path: lf.path })),
|
||||
}
|
||||
showEnvModal.value = true
|
||||
}
|
||||
|
||||
async function saveEnv() {
|
||||
isSubmittingEnv.value = true
|
||||
try {
|
||||
if (editingEnvId.value) {
|
||||
await updateEnvironment(editingEnvId.value, envForm.value)
|
||||
} else {
|
||||
await createEnvironment(slug, envForm.value)
|
||||
}
|
||||
showEnvModal.value = false
|
||||
await loadApplication()
|
||||
} finally {
|
||||
isSubmittingEnv.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteEnv(envId: number) {
|
||||
if (!confirm(t('environments.deleteConfirm'))) return
|
||||
await deleteEnvironment(envId)
|
||||
await loadApplication()
|
||||
}
|
||||
|
||||
async function handleToggleMaintenance(env: Environment) {
|
||||
const envId = env.id!
|
||||
pendingMaintenanceByEnvId.value[envId] = true
|
||||
try {
|
||||
await toggleMaintenance(envId, !env.maintenance)
|
||||
await loadApplication()
|
||||
} finally {
|
||||
delete pendingMaintenanceByEnvId.value[envId]
|
||||
}
|
||||
}
|
||||
|
||||
function addLogFile() {
|
||||
envForm.value.logFiles.push({ label: '', path: '' })
|
||||
}
|
||||
|
||||
function removeLogFile(index: number) {
|
||||
envForm.value.logFiles.splice(index, 1)
|
||||
}
|
||||
|
||||
async function openDeployModal(env: Environment) {
|
||||
deployEnvId.value = env.id!
|
||||
selectedTag.value = ''
|
||||
deployResult.value = null
|
||||
deployTags.value = []
|
||||
showDeployModal.value = true
|
||||
loadingTags.value = true
|
||||
try {
|
||||
const response = await getAvailableTags(slug)
|
||||
deployTags.value = response.tags ?? []
|
||||
if (deployTags.value.length > 0) {
|
||||
selectedTag.value = deployTags.value[0]
|
||||
}
|
||||
} finally {
|
||||
loadingTags.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeploy() {
|
||||
if (!deployEnvId.value || !selectedTag.value) return
|
||||
isDeploying.value = true
|
||||
deployResult.value = null
|
||||
try {
|
||||
deployResult.value = await deploy(deployEnvId.value, selectedTag.value)
|
||||
if (deployResult.value.success) {
|
||||
await loadApplication()
|
||||
}
|
||||
} finally {
|
||||
isDeploying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function closeDeployModal() {
|
||||
showDeployModal.value = false
|
||||
deployResult.value = null
|
||||
}
|
||||
|
||||
async function loadHealthData() {
|
||||
if (!application.value?.environments?.length) return
|
||||
loadingHealth.value = true
|
||||
try {
|
||||
const promises = application.value.environments.map(async (env) => {
|
||||
try {
|
||||
const health = await getEnvironmentHealth(env.id!)
|
||||
healthByEnvId.value[env.id!] = health
|
||||
} catch {
|
||||
// silently ignore individual env health failures
|
||||
}
|
||||
})
|
||||
await Promise.all(promises)
|
||||
} finally {
|
||||
loadingHealth.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatUptime(startedAt: string): string {
|
||||
if (!startedAt) return '-'
|
||||
const start = new Date(startedAt)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - start.getTime()
|
||||
const days = Math.floor(diffMs / 86400000)
|
||||
const hours = Math.floor((diffMs % 86400000) / 3600000)
|
||||
const minutes = Math.floor((diffMs % 3600000) / 60000)
|
||||
if (days > 0) return `${days}j ${hours}h`
|
||||
if (hours > 0) return `${hours}h ${minutes}m`
|
||||
return `${minutes}m`
|
||||
}
|
||||
|
||||
function statusClass(status: string): string {
|
||||
switch (status) {
|
||||
case 'running': return 'bg-green-100 text-green-700'
|
||||
case 'exited': return 'bg-red-100 text-red-700'
|
||||
case 'restarting': return 'bg-orange-100 text-orange-700'
|
||||
default: return 'bg-neutral-100 text-neutral-500'
|
||||
}
|
||||
}
|
||||
|
||||
const envModalTitle = computed(() =>
|
||||
editingEnvId.value ? t('environments.editButton') : t('environments.addButton')
|
||||
)
|
||||
|
||||
onMounted(loadApplication)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-4 py-8 sm:px-8 lg:px-16">
|
||||
<!-- Back link -->
|
||||
<NuxtLink to="/applications" class="text-neutral-400 hover:text-primary-500 text-sm mb-6 inline-flex items-center gap-1">
|
||||
<Icon name="mdi:arrow-left" size="16" />
|
||||
{{ t('applications.title') }}
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="animate-pulse mt-4">
|
||||
<div class="h-10 bg-neutral-200 rounded w-1/3 mb-4" />
|
||||
<div class="h-4 bg-neutral-200 rounded w-2/3 mb-2" />
|
||||
<div class="h-4 bg-neutral-200 rounded w-1/2" />
|
||||
</div>
|
||||
|
||||
<template v-else-if="application">
|
||||
<!-- Application header -->
|
||||
<div class="flex items-start justify-between pb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ application.name }}</h1>
|
||||
<p v-if="application.description" class="text-neutral-500 mt-2">{{ application.description }}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<MalioButton
|
||||
:label="t('applications.detail.editButton')"
|
||||
variant="secondary"
|
||||
icon-name="mdi:pencil"
|
||||
icon-position="left"
|
||||
@click="openEditAppModal"
|
||||
/>
|
||||
<MalioButton
|
||||
:label="t('applications.detail.deleteButton')"
|
||||
variant="danger"
|
||||
icon-name="mdi:trash-can-outline"
|
||||
icon-position="left"
|
||||
@click="handleDeleteApp"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Application info -->
|
||||
<div class="rounded-lg bg-tertiary-500 p-5 mb-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-neutral-400">{{ t('applications.detail.registryImage') }} :</span>
|
||||
<span class="text-neutral-800 ml-1 font-mono">{{ application.registryImage }}</span>
|
||||
</div>
|
||||
<div v-if="application.giteaUrl">
|
||||
<span class="text-neutral-400">{{ t('applications.detail.giteaUrl') }} :</span>
|
||||
<a :href="application.giteaUrl" target="_blank" class="text-primary-500 hover:underline ml-1">
|
||||
{{ application.giteaUrl }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Environments section -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between pb-4">
|
||||
<h2 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ t('environments.title') }}</h2>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:plus"
|
||||
aria-label="Retour"
|
||||
@click="openCreateEnvModal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Environments list -->
|
||||
<div v-if="!application.environments?.length" class="rounded-lg border border-neutral-200 bg-white p-6 text-center text-neutral-500">
|
||||
{{ t('applications.card.noEnvironments') }}
|
||||
</div>
|
||||
|
||||
<div v-for="env in application.environments" :key="env.id" class="rounded-lg bg-tertiary-500 p-5 mb-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-3">
|
||||
<h3 class="text-lg font-semibold text-neutral-900">{{ env.name }}</h3>
|
||||
<span
|
||||
class="inline-block rounded-full px-3 py-1 text-xs font-semibold"
|
||||
:class="env.maintenance
|
||||
? 'bg-orange-100 text-orange-700'
|
||||
: 'bg-green-100 text-green-700'"
|
||||
>
|
||||
{{ env.maintenance ? t('environments.maintenance.active') : t('environments.maintenance.inactive') }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-neutral-400 text-sm mt-1 font-mono">{{ env.containerName }}</p>
|
||||
<a
|
||||
v-if="env.appUrl"
|
||||
:href="env.appUrl"
|
||||
target="_blank"
|
||||
class="text-primary-500 hover:underline text-sm mt-1 inline-flex items-center gap-1"
|
||||
>
|
||||
{{ env.appUrl }}
|
||||
<Icon name="mdi:open-in-new" size="14" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<MalioButton
|
||||
:label="t('environments.deploy.button')"
|
||||
icon-name="mdi:rocket-launch-outline"
|
||||
icon-position="left"
|
||||
@click="openDeployModal(env)"
|
||||
/>
|
||||
<MalioButton
|
||||
:label="pendingMaintenanceByEnvId[env.id!]
|
||||
? t('environments.maintenance.pending')
|
||||
: env.maintenance
|
||||
? t('environments.maintenance.deactivate')
|
||||
: t('environments.maintenance.activate')"
|
||||
:variant="env.maintenance ? 'danger' : 'primary'"
|
||||
:icon-name="env.maintenance ? 'mdi:shield-check-outline' : 'mdi:alert-outline'"
|
||||
icon-position="left"
|
||||
:loading="!!pendingMaintenanceByEnvId[env.id!]"
|
||||
@click="handleToggleMaintenance(env)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log files -->
|
||||
<div v-if="env.logFiles.length" class="mt-4 border-t border-neutral-200 pt-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-2">{{ t('environments.logFiles.title') }}</p>
|
||||
<div v-for="lf in env.logFiles" :key="lf.id" class="text-sm text-neutral-700 flex gap-2">
|
||||
<span class="font-medium">{{ lf.label }} :</span>
|
||||
<span class="font-mono text-neutral-400">{{ lf.path }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Health metrics -->
|
||||
<div v-if="healthByEnvId[env.id!]" class="mt-4 border-t border-neutral-200 pt-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-3">{{ t('environments.health.title') }}</p>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
<div>
|
||||
<p class="text-xs text-neutral-400">{{ t('environments.health.status') }}</p>
|
||||
<span
|
||||
class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold mt-1"
|
||||
:class="statusClass(healthByEnvId[env.id!].status)"
|
||||
>
|
||||
{{ t(`dashboard.status.${healthByEnvId[env.id!].status}`) }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-400">{{ t('environments.health.version') }}</p>
|
||||
<p class="text-sm font-mono text-neutral-800 mt-1">{{ healthByEnvId[env.id!].version || '-' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-400">{{ t('environments.health.uptime') }}</p>
|
||||
<p class="text-sm text-neutral-800 mt-1">{{ formatUptime(healthByEnvId[env.id!].startedAt) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-400">{{ t('environments.health.cpu') }}</p>
|
||||
<p class="text-sm text-neutral-800 mt-1">{{ healthByEnvId[env.id!].cpuPercent }}%</p>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<p class="text-xs text-neutral-400">{{ t('environments.health.memory') }}</p>
|
||||
<p class="text-sm text-neutral-800 mt-1">
|
||||
{{ healthByEnvId[env.id!].memoryUsage }} / {{ healthByEnvId[env.id!].memoryLimit }}
|
||||
<span class="text-neutral-400">({{ healthByEnvId[env.id!].memoryPercent }}%)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center gap-4 mt-4">
|
||||
<MalioButton
|
||||
:label="t('environments.editButton')"
|
||||
variant="secondary"
|
||||
icon-name="mdi:pencil"
|
||||
icon-position="left"
|
||||
@click="openEditEnvModal(env)"
|
||||
/>
|
||||
<MalioButton
|
||||
:label="t('environments.deleteButton')"
|
||||
variant="danger"
|
||||
icon-name="mdi:trash-can-outline"
|
||||
icon-position="left"
|
||||
@click="handleDeleteEnv(env.id!)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Edit application modal -->
|
||||
<AppModal
|
||||
v-model="showAppModal"
|
||||
:submit-label="t('applications.form.save')"
|
||||
:cancel-label="t('applications.form.cancel')"
|
||||
:loading="isSubmittingApp"
|
||||
@submit="saveApp"
|
||||
>
|
||||
<template #title>{{ t('applications.detail.editButton') }}</template>
|
||||
|
||||
<form @submit.prevent="saveApp" class="space-y-4">
|
||||
<div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
|
||||
<MalioInputText
|
||||
v-model="editForm.name"
|
||||
:label="t('applications.form.name')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="editForm.slug"
|
||||
:label="t('applications.form.slug')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="editForm.registryImage"
|
||||
:label="t('applications.form.registryImage')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="editForm.giteaUrl"
|
||||
:label="t('applications.form.giteaUrl')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-neutral-700">{{ t('applications.form.description') }}</label>
|
||||
<textarea
|
||||
v-model="editForm.description"
|
||||
class="w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:ring-2 focus:ring-secondary-500/20"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</AppModal>
|
||||
|
||||
<!-- Environment modal -->
|
||||
<AppModal
|
||||
v-model="showEnvModal"
|
||||
:submit-label="t('environments.form.save')"
|
||||
:cancel-label="t('environments.form.cancel')"
|
||||
:loading="isSubmittingEnv"
|
||||
@submit="saveEnv"
|
||||
>
|
||||
<template #title>{{ envModalTitle }}</template>
|
||||
|
||||
<form @submit.prevent="saveEnv" class="space-y-4">
|
||||
<div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
|
||||
<MalioInputText
|
||||
v-model="envForm.name"
|
||||
:label="t('environments.form.name')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="envForm.containerName"
|
||||
:label="t('environments.form.containerName')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="envForm.deployScriptPath"
|
||||
:label="t('environments.form.deployScriptPath')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="envForm.maintenanceFilePath"
|
||||
:label="t('environments.form.maintenanceFilePath')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="envForm.appUrl"
|
||||
:label="t('environments.form.appUrl')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Log files -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<p class="text-sm font-medium text-neutral-700">{{ t('environments.logFiles.title') }}</p>
|
||||
<button type="button" @click="addLogFile" class="text-primary-500 hover:underline text-sm font-semibold">
|
||||
+ {{ t('environments.logFiles.addButton') }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-for="(lf, index) in envForm.logFiles" :key="index" class="flex gap-2 mb-2">
|
||||
<MalioInputText v-model="lf.label" :label="t('environments.logFiles.label')" groupClass="mt-0" inputClass="flex-1" required />
|
||||
<MalioInputText v-model="lf.path" :label="t('environments.logFiles.path')" groupClass="mt-0" inputClass="flex-[2]" required />
|
||||
<MalioButtonIcon
|
||||
icon="mdi:delete-outline"
|
||||
:aria-label="t('environments.logFiles.remove')"
|
||||
variant="ghost"
|
||||
icon-size="18"
|
||||
button-class="text-red-500 hover:bg-red-50 hover:text-red-700 my-1"
|
||||
@click="removeLogFile(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</AppModal>
|
||||
|
||||
<!-- Deploy modal -->
|
||||
<AppModal
|
||||
v-model="showDeployModal"
|
||||
:submit-label="isDeploying ? t('environments.deploy.deploying') : t('environments.deploy.confirm')"
|
||||
:cancel-label="t('applications.form.cancel')"
|
||||
:loading="isDeploying"
|
||||
max-width="xl"
|
||||
@submit="handleDeploy"
|
||||
@update:model-value="!$event && closeDeployModal()"
|
||||
>
|
||||
<template #title>{{ t('environments.deploy.title') }}</template>
|
||||
|
||||
<!-- Tag selection -->
|
||||
<div v-if="!deployResult">
|
||||
<div v-if="loadingTags" class="py-8 text-center text-neutral-400">
|
||||
<Icon name="mdi:loading" size="24" class="animate-spin" />
|
||||
<p class="mt-2 text-sm">{{ t('environments.deploy.loadingTags') }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="deployTags.length === 0" class="py-8 text-center text-neutral-400">
|
||||
<Icon name="mdi:package-variant" size="32" />
|
||||
<p class="mt-2 text-sm">{{ t('environments.deploy.noTags') }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<label class="mb-1 block text-sm font-medium text-neutral-700">
|
||||
{{ t('environments.deploy.selectTag') }}
|
||||
</label>
|
||||
<select
|
||||
v-model="selectedTag"
|
||||
class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
||||
>
|
||||
<option v-for="tag in deployTags" :key="tag" :value="tag">
|
||||
{{ tag }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deploy result -->
|
||||
<div v-else>
|
||||
<div
|
||||
class="mb-4 flex items-center gap-2 rounded-lg px-4 py-3"
|
||||
:class="deployResult.success
|
||||
? 'bg-green-50 text-green-700'
|
||||
: 'bg-red-50 text-red-700'"
|
||||
>
|
||||
<Icon
|
||||
:name="deployResult.success ? 'mdi:check-circle' : 'mdi:alert-circle'"
|
||||
size="20"
|
||||
/>
|
||||
<span class="text-sm font-semibold">
|
||||
{{ deployResult.success
|
||||
? t('environments.deploy.success')
|
||||
: t('environments.deploy.error')
|
||||
}}
|
||||
</span>
|
||||
<span class="ml-auto text-xs font-mono">{{ deployResult.tag }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-semibold uppercase tracking-wider text-neutral-400">
|
||||
{{ t('environments.deploy.output') }}
|
||||
</p>
|
||||
<pre class="max-h-80 overflow-auto rounded-lg bg-neutral-900 p-4 text-xs text-green-400 font-mono whitespace-pre-wrap">{{ deployResult.output }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Override footer when showing result -->
|
||||
<template v-if="deployResult" #footer>
|
||||
<MalioButton
|
||||
:label="t('applications.form.cancel')"
|
||||
variant="tertiary"
|
||||
@click="closeDeployModal"
|
||||
/>
|
||||
</template>
|
||||
</AppModal>
|
||||
</div>
|
||||
</template>
|
||||
151
frontend/pages/applications/index.vue
Normal file
151
frontend/pages/applications/index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<script setup lang="ts">
|
||||
import type { Application, ApplicationWrite } from '~/services/dto/application'
|
||||
import { getApplications, createApplication } from '~/services/applications'
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
const applications = ref<Application[]>([])
|
||||
const loading = ref(true)
|
||||
const showCreateModal = ref(false)
|
||||
const createForm = ref<ApplicationWrite>({
|
||||
name: '',
|
||||
slug: '',
|
||||
registryImage: '',
|
||||
description: '',
|
||||
giteaUrl: '',
|
||||
})
|
||||
const isSubmitting = ref(false)
|
||||
|
||||
async function loadApplications() {
|
||||
loading.value = true
|
||||
try {
|
||||
applications.value = await getApplications()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openCreateModal() {
|
||||
createForm.value = { name: '', slug: '', registryImage: '', description: '', giteaUrl: '' }
|
||||
showCreateModal.value = true
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
isSubmitting.value = true
|
||||
try {
|
||||
const created = await createApplication(createForm.value)
|
||||
showCreateModal.value = false
|
||||
router.push(`/applications/${created.slug}`)
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function generateSlug(name: string) {
|
||||
createForm.value.slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
|
||||
}
|
||||
|
||||
onMounted(loadApplications)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-4 py-8 sm:px-8 lg:px-16">
|
||||
<div class="flex items-center justify-between pb-6">
|
||||
<h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ t('applications.title') }}</h1>
|
||||
<MalioButton
|
||||
:label="t('applications.addButton')"
|
||||
icon-name="mdi:plus"
|
||||
icon-position="left"
|
||||
@click="openCreateModal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
|
||||
<div v-for="i in 3" :key="i" class="rounded-lg bg-tertiary-500 p-5 animate-pulse">
|
||||
<div class="h-5 bg-neutral-300 rounded w-1/2 mb-3" />
|
||||
<div class="h-4 bg-neutral-300 rounded w-3/4 mb-2" />
|
||||
<div class="h-4 bg-neutral-300 rounded w-1/3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="applications.length === 0" class="rounded-lg border border-neutral-200 bg-white p-6 text-center">
|
||||
<h3 class="text-lg font-medium text-neutral-800">{{ t('applications.emptyTitle') }}</h3>
|
||||
<p class="text-neutral-500 mt-1">{{ t('applications.emptyDescription') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Application cards -->
|
||||
<div v-else class="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
|
||||
<NuxtLink
|
||||
v-for="app in applications"
|
||||
:key="app.slug"
|
||||
:to="`/applications/${app.slug}`"
|
||||
class="rounded-lg bg-tertiary-500 p-5 transition hover:shadow-md"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<h3 class="text-lg font-semibold text-neutral-900">{{ app.name }}</h3>
|
||||
<a
|
||||
v-if="app.giteaUrl"
|
||||
:href="app.giteaUrl"
|
||||
target="_blank"
|
||||
class="text-neutral-400 hover:text-primary-500"
|
||||
@click.stop
|
||||
>
|
||||
<Icon name="mdi:open-in-new" size="18" />
|
||||
</a>
|
||||
</div>
|
||||
<p v-if="app.description" class="text-neutral-500 text-sm mt-2 line-clamp-2">{{ app.description }}</p>
|
||||
<p class="text-neutral-400 text-xs mt-4 flex items-center gap-1">
|
||||
<Icon name="mdi:server" size="14" />
|
||||
{{ app.environments?.length ?? 0 }} {{ t('applications.card.environments', app.environments?.length ?? 0) }}
|
||||
</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Create modal -->
|
||||
<AppModal
|
||||
v-model="showCreateModal"
|
||||
:submit-label="t('applications.form.save')"
|
||||
:cancel-label="t('applications.form.cancel')"
|
||||
:loading="isSubmitting"
|
||||
@submit="handleCreate"
|
||||
>
|
||||
<template #title>{{ t('applications.addButton') }}</template>
|
||||
|
||||
<form @submit.prevent="handleCreate" class="space-y-4">
|
||||
<div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
|
||||
<MalioInputText
|
||||
v-model="createForm.name"
|
||||
:label="t('applications.form.name')"
|
||||
@update:model-value="generateSlug"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="createForm.slug"
|
||||
:label="t('applications.form.slug')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="createForm.registryImage"
|
||||
:label="t('applications.form.registryImage')"
|
||||
required
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="createForm.giteaUrl"
|
||||
:label="t('applications.form.giteaUrl')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-neutral-700">{{ t('applications.form.description') }}</label>
|
||||
<textarea
|
||||
v-model="createForm.description"
|
||||
class="w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:ring-2 focus:ring-secondary-500/20"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</AppModal>
|
||||
</div>
|
||||
</template>
|
||||
96
frontend/pages/dashboard.vue
Normal file
96
frontend/pages/dashboard.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
import type { DashboardResponse } from '~/services/dto/dashboard'
|
||||
import { getDashboard } from '~/services/dashboard'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const data = ref<DashboardResponse | null>(null)
|
||||
const loading = ref(true)
|
||||
|
||||
async function loadDashboard() {
|
||||
loading.value = true
|
||||
try {
|
||||
data.value = await getDashboard()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function statusClass(status: string): string {
|
||||
switch (status) {
|
||||
case 'running': return 'bg-green-100 text-green-700'
|
||||
case 'exited': return 'bg-red-100 text-red-700'
|
||||
case 'restarting': return 'bg-orange-100 text-orange-700'
|
||||
default: return 'bg-neutral-100 text-neutral-500'
|
||||
}
|
||||
}
|
||||
|
||||
function statusLabel(status: string): string {
|
||||
return t(`dashboard.status.${status}`)
|
||||
}
|
||||
|
||||
onMounted(loadDashboard)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-4 py-8 sm:px-8 lg:px-16">
|
||||
<div class="flex items-center justify-between pb-6">
|
||||
<h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ t('dashboard.title') }}</h1>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:refresh"
|
||||
:aria-label="t('dashboard.refresh')"
|
||||
icon-size="22"
|
||||
@click="loadDashboard"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading && !data" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div v-for="i in 3" :key="i" class="rounded-lg bg-tertiary-500 p-5 animate-pulse">
|
||||
<div class="h-6 bg-neutral-300 rounded w-1/3 mb-4" />
|
||||
<div class="h-4 bg-neutral-300 rounded w-2/3 mb-2" />
|
||||
<div class="h-4 bg-neutral-300 rounded w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard cards -->
|
||||
<div v-else-if="data" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<NuxtLink
|
||||
v-for="app in data.applications"
|
||||
:key="app.slug"
|
||||
:to="`/applications/${app.slug}`"
|
||||
class="rounded-lg bg-tertiary-500 p-5 transition hover:shadow-md"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-neutral-900">{{ app.name }}</h3>
|
||||
<a
|
||||
v-if="app.giteaUrl"
|
||||
:href="app.giteaUrl"
|
||||
target="_blank"
|
||||
class="text-neutral-400 hover:text-primary-500"
|
||||
@click.stop
|
||||
>
|
||||
<Icon name="mdi:open-in-new" size="18" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-for="env in app.environments" :key="env.id" class="flex items-center justify-between py-2 border-t border-neutral-200 first:border-t-0">
|
||||
<span class="text-sm text-neutral-700">{{ env.name }}</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs font-mono text-neutral-400">{{ env.version }}</span>
|
||||
<span
|
||||
class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold"
|
||||
:class="statusClass(env.status)"
|
||||
>
|
||||
{{ statusLabel(env.status) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!app.environments.length" class="text-sm text-neutral-400">
|
||||
{{ t('applications.card.noEnvironments') }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-6 pb-10">
|
||||
<section class="flex flex-col gap-2">
|
||||
<h1 class="text-2xl font-bold text-neutral-900 sm:text-3xl">
|
||||
{{ t('applications.title') }}
|
||||
</h1>
|
||||
<p class="max-w-3xl text-sm leading-6 text-neutral-500 sm:text-base">
|
||||
{{ t('applications.description') }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="min-h-0 rounded-3xl border border-primary-500/15 bg-white shadow-sm">
|
||||
<header class="flex flex-col gap-4 border-b border-primary-500/10 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-primary-500">
|
||||
{{ t('applications.listTitle') }}
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-neutral-500">
|
||||
{{ t('applications.listDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-xl border border-primary-500/20 px-4 py-2 text-sm font-semibold text-primary-500 transition-colors hover:bg-tertiary-500 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
:disabled="loading"
|
||||
@click="loadApplications()"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:refresh"
|
||||
size="18"
|
||||
class="mr-2"
|
||||
:class="loading ? 'animate-spin' : ''"
|
||||
/>
|
||||
{{ t('applications.actions.refresh') }}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div v-if="loading" class="grid gap-4 p-6 xl:grid-cols-2">
|
||||
<div
|
||||
v-for="index in 4"
|
||||
:key="index"
|
||||
class="animate-pulse rounded-2xl border border-primary-500/10 p-5"
|
||||
>
|
||||
<div class="h-4 w-24 rounded bg-neutral-200" />
|
||||
<div class="mt-4 h-7 w-40 rounded bg-neutral-200" />
|
||||
<div class="mt-3 h-4 w-full rounded bg-neutral-100" />
|
||||
<div class="mt-6 h-11 w-44 rounded-xl bg-neutral-200" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="applications.length === 0" class="px-6 py-12 text-center">
|
||||
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-tertiary-500 text-primary-500">
|
||||
<Icon name="mdi:server-off" size="28" />
|
||||
</div>
|
||||
<h3 class="mt-4 text-lg font-bold text-primary-500">
|
||||
{{ t('applications.emptyTitle') }}
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-neutral-500">
|
||||
{{ t('applications.emptyDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid gap-4 p-6 xl:grid-cols-2">
|
||||
<article
|
||||
v-for="application in applications"
|
||||
:key="application.slug"
|
||||
class="flex h-full min-w-0 flex-col rounded-2xl border p-5 transition-colors"
|
||||
:class="application.maintenance ? 'border-red-200 bg-red-50/60' : 'border-emerald-200 bg-emerald-50/60'"
|
||||
>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-neutral-500">
|
||||
{{ application.slug }}
|
||||
</p>
|
||||
<h3 class="mt-2 break-words text-xl font-bold text-primary-500">
|
||||
{{ application.name }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="inline-flex w-fit items-center rounded-full px-3 py-1 text-xs font-bold"
|
||||
:class="application.maintenance ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'"
|
||||
>
|
||||
<span
|
||||
class="mr-2 h-2.5 w-2.5 rounded-full"
|
||||
:class="application.maintenance ? 'bg-red-500' : 'bg-emerald-500'"
|
||||
/>
|
||||
{{ application.maintenance ? t('applications.status.active') : t('applications.status.inactive') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 flex-1 text-sm leading-6 text-neutral-600">
|
||||
{{
|
||||
application.maintenance
|
||||
? t('applications.card.activeDescription')
|
||||
: t('applications.card.inactiveDescription')
|
||||
}}
|
||||
</p>
|
||||
|
||||
<div class="mt-6 flex flex-col gap-3 border-t border-black/5 pt-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="text-xs font-medium uppercase tracking-[0.14em] text-neutral-400">
|
||||
{{ t('applications.card.triggerFile') }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="inline-flex w-full items-center justify-center rounded-xl px-4 py-3 text-sm font-semibold text-white transition-opacity disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto sm:min-w-[220px]"
|
||||
:class="application.maintenance ? 'bg-red-600 hover:bg-red-700' : 'bg-primary-500 hover:bg-primary-600'"
|
||||
:disabled="Boolean(pendingBySlug[application.slug])"
|
||||
@click="toggleMaintenance(application)"
|
||||
>
|
||||
<Icon
|
||||
:name="pendingBySlug[application.slug] ? 'mdi:loading' : (application.maintenance ? 'mdi:shield-check-outline' : 'mdi:alert-outline')"
|
||||
size="18"
|
||||
class="mr-2"
|
||||
:class="pendingBySlug[application.slug] ? 'animate-spin' : ''"
|
||||
/>
|
||||
{{
|
||||
pendingBySlug[application.slug]
|
||||
? t('applications.actions.pending')
|
||||
: application.maintenance
|
||||
? t('applications.actions.deactivate')
|
||||
: t('applications.actions.activate')
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ManagedApplication } from '~/services/dto/managed-application'
|
||||
import { getManagedApplications, setApplicationMaintenance } from '~/services/managed-applications'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const applications = ref<ManagedApplication[]>([])
|
||||
const loading = ref(true)
|
||||
const pendingBySlug = ref<Record<string, boolean>>({})
|
||||
|
||||
async function loadApplications() {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
applications.value = await getManagedApplications()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleMaintenance(application: ManagedApplication) {
|
||||
pendingBySlug.value = {
|
||||
...pendingBySlug.value,
|
||||
[application.slug]: true
|
||||
}
|
||||
|
||||
try {
|
||||
const updatedApplication = await setApplicationMaintenance(application.slug, !application.maintenance)
|
||||
applications.value = applications.value.map((item) => item.slug === updatedApplication.slug ? updatedApplication : item)
|
||||
} finally {
|
||||
pendingBySlug.value = {
|
||||
...pendingBySlug.value,
|
||||
[application.slug]: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadApplications()
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Applications'
|
||||
})
|
||||
</script>
|
||||
41
frontend/services/applications.ts
Normal file
41
frontend/services/applications.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import type { Application, ApplicationWrite } from './dto/application'
|
||||
import { type HydraCollection, extractHydraMembers } from '~/utils/api'
|
||||
|
||||
export function getApplications(): Promise<Application[]> {
|
||||
const api = useApi()
|
||||
return api.get<Application[]>('/applications', undefined, {
|
||||
toast: false,
|
||||
}).then((response) => {
|
||||
if (Array.isArray(response)) {
|
||||
return response
|
||||
}
|
||||
return extractHydraMembers(response as HydraCollection<Application>)
|
||||
})
|
||||
}
|
||||
|
||||
export function getApplication(slug: string): Promise<Application> {
|
||||
return useApi().get<Application>(`/applications/${slug}`, undefined, {
|
||||
toast: false,
|
||||
})
|
||||
}
|
||||
|
||||
export function createApplication(data: ApplicationWrite): Promise<Application> {
|
||||
return useApi().post<Application>('/applications', data, {
|
||||
toastSuccessKey: 'success.applications.create',
|
||||
toastErrorKey: 'errors.applications.create',
|
||||
})
|
||||
}
|
||||
|
||||
export function updateApplication(slug: string, data: Partial<ApplicationWrite>): Promise<Application> {
|
||||
return useApi().patch<Application>(`/applications/${slug}`, data, {
|
||||
toastSuccessKey: 'success.applications.update',
|
||||
toastErrorKey: 'errors.applications.update',
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteApplication(slug: string): Promise<void> {
|
||||
return useApi().delete<void>(`/applications/${slug}`, undefined, {
|
||||
toastSuccessKey: 'success.applications.delete',
|
||||
toastErrorKey: 'errors.applications.delete',
|
||||
})
|
||||
}
|
||||
13
frontend/services/dashboard.ts
Normal file
13
frontend/services/dashboard.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import type { DashboardResponse, EnvironmentHealth } from './dto/dashboard'
|
||||
|
||||
export function getDashboard(): Promise<DashboardResponse> {
|
||||
return useApi().get<DashboardResponse>('/dashboard', undefined, {
|
||||
toast: false,
|
||||
})
|
||||
}
|
||||
|
||||
export function getEnvironmentHealth(envId: number): Promise<EnvironmentHealth> {
|
||||
return useApi().get<EnvironmentHealth>(`/environments/${envId}/health`, undefined, {
|
||||
toast: false,
|
||||
})
|
||||
}
|
||||
13
frontend/services/deploy.ts
Normal file
13
frontend/services/deploy.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import type { TagListResponse, DeployResult } from './dto/deploy'
|
||||
|
||||
export function getAvailableTags(slug: string): Promise<TagListResponse> {
|
||||
return useApi().get<TagListResponse>(`/applications/${slug}/tags`, undefined, {
|
||||
toast: false,
|
||||
})
|
||||
}
|
||||
|
||||
export function deploy(envId: number, tag: string): Promise<DeployResult> {
|
||||
return useApi().post<DeployResult>(`/environments/${envId}/deploy`, { tag }, {
|
||||
toast: false,
|
||||
})
|
||||
}
|
||||
46
frontend/services/dto/application.ts
Normal file
46
frontend/services/dto/application.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
type LogFile = {
|
||||
id?: number
|
||||
label: string
|
||||
path: string
|
||||
}
|
||||
|
||||
type Environment = {
|
||||
id?: number
|
||||
'@id'?: string
|
||||
name: string
|
||||
containerName: string
|
||||
deployScriptPath: string
|
||||
maintenanceFilePath: string
|
||||
appUrl?: string
|
||||
logFiles: LogFile[]
|
||||
maintenance: boolean
|
||||
}
|
||||
|
||||
type EnvironmentWrite = {
|
||||
name: string
|
||||
containerName: string
|
||||
deployScriptPath: string
|
||||
maintenanceFilePath: string
|
||||
appUrl?: string
|
||||
logFiles: LogFile[]
|
||||
}
|
||||
|
||||
type Application = {
|
||||
id?: number
|
||||
'@id'?: string
|
||||
slug: string
|
||||
name: string
|
||||
registryImage: string
|
||||
description?: string
|
||||
giteaUrl?: string
|
||||
createdAt?: string
|
||||
environments?: Environment[]
|
||||
}
|
||||
|
||||
type ApplicationWrite = {
|
||||
name: string
|
||||
slug: string
|
||||
registryImage: string
|
||||
description?: string
|
||||
giteaUrl?: string
|
||||
}
|
||||
27
frontend/services/dto/dashboard.ts
Normal file
27
frontend/services/dto/dashboard.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
type DashboardEnvironment = {
|
||||
id: number
|
||||
name: string
|
||||
status: string
|
||||
version: string
|
||||
}
|
||||
|
||||
type DashboardApplication = {
|
||||
name: string
|
||||
slug: string
|
||||
giteaUrl?: string
|
||||
environments: DashboardEnvironment[]
|
||||
}
|
||||
|
||||
type DashboardResponse = {
|
||||
applications: DashboardApplication[]
|
||||
}
|
||||
|
||||
type EnvironmentHealth = {
|
||||
status: string
|
||||
version: string
|
||||
startedAt: string
|
||||
cpuPercent: number
|
||||
memoryUsage: string
|
||||
memoryLimit: string
|
||||
memoryPercent: number
|
||||
}
|
||||
9
frontend/services/dto/deploy.ts
Normal file
9
frontend/services/dto/deploy.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
type TagListResponse = {
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
type DeployResult = {
|
||||
success: boolean
|
||||
output: string
|
||||
tag: string
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
export type ManagedApplication = {
|
||||
slug: string
|
||||
name: string
|
||||
maintenance: boolean
|
||||
}
|
||||
|
||||
export type ManagedApplicationCollection = {
|
||||
'hydra:member'?: ManagedApplication[]
|
||||
member?: ManagedApplication[]
|
||||
}
|
||||
36
frontend/services/environments.ts
Normal file
36
frontend/services/environments.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { Environment, EnvironmentWrite } from './dto/application'
|
||||
|
||||
export function createEnvironment(appSlug: string, data: EnvironmentWrite): Promise<Environment> {
|
||||
return useApi().post<Environment>(`/applications/${appSlug}/environments`, data, {
|
||||
toastSuccessKey: 'success.environments.create',
|
||||
toastErrorKey: 'errors.environments.create',
|
||||
})
|
||||
}
|
||||
|
||||
export function updateEnvironment(id: number, data: Partial<EnvironmentWrite>): Promise<Environment> {
|
||||
return useApi().patch<Environment>(`/environments/${id}`, data, {
|
||||
toastSuccessKey: 'success.environments.update',
|
||||
toastErrorKey: 'errors.environments.update',
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteEnvironment(id: number): Promise<void> {
|
||||
return useApi().delete<void>(`/environments/${id}`, undefined, {
|
||||
toastSuccessKey: 'success.environments.delete',
|
||||
toastErrorKey: 'errors.environments.delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function toggleMaintenance(id: number, maintenance: boolean): Promise<Environment> {
|
||||
const successKey = maintenance
|
||||
? 'success.environments.activateMaintenance'
|
||||
: 'success.environments.deactivateMaintenance'
|
||||
const errorKey = maintenance
|
||||
? 'errors.environments.activateMaintenance'
|
||||
: 'errors.environments.deactivateMaintenance'
|
||||
|
||||
return useApi().post<Environment>(`/environments/${id}/maintenance`, { maintenance }, {
|
||||
toastSuccessKey: successKey,
|
||||
toastErrorKey: errorKey,
|
||||
})
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import type { ManagedApplication, ManagedApplicationCollection } from './dto/managed-application'
|
||||
|
||||
function normalizeManagedApplications(response: ManagedApplication[] | ManagedApplicationCollection): ManagedApplication[] {
|
||||
if (Array.isArray(response)) {
|
||||
return response
|
||||
}
|
||||
|
||||
return response['hydra:member'] ?? response.member ?? []
|
||||
}
|
||||
|
||||
export async function getManagedApplications(): Promise<ManagedApplication[]> {
|
||||
const api = useApi()
|
||||
const response = await api.get<ManagedApplication[] | ManagedApplicationCollection>('/applications')
|
||||
|
||||
return normalizeManagedApplications(response)
|
||||
}
|
||||
|
||||
export function setApplicationMaintenance(slug: string, maintenance: boolean) {
|
||||
const api = useApi()
|
||||
|
||||
return api.post<ManagedApplication>(
|
||||
`/applications/${slug}/maintenance`,
|
||||
{ maintenance },
|
||||
{
|
||||
toastSuccessKey: maintenance
|
||||
? 'success.applications.activateMaintenance'
|
||||
: 'success.applications.deactivateMaintenance',
|
||||
toastErrorKey: maintenance
|
||||
? 'errors.applications.activateMaintenance'
|
||||
: 'errors.applications.deactivateMaintenance'
|
||||
}
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user