enh(api): Add getServices and wire service dropdowns

Add deploymentsApi.getServices() for fetching deployment
services. Export apiClient for reuse. Remove hardcoded
container_name from compose templates. Replace free-text
service input in CronJobsView with a dropdown populated
from the deployment's real services.

Signed-off-by: nfebe <fenn25.fn@gmail.com>

Author: nfebe

src/components/NewDeploymentModal.vue

@@ -1951,7 +1951,6 @@ const getDatabaseServiceYaml = () => {
     return `
   db:
     image: mysql:8
-    container_name: ${form.name}-db
     environment:
       MYSQL_ROOT_PASSWORD: ${rootPassword}
       MYSQL_DATABASE: ${dbName}
@@ -1966,7 +1965,6 @@ const getDatabaseServiceYaml = () => {
     return `
   db:
     image: mariadb:10
-    container_name: ${form.name}-db
     environment:
       MYSQL_ROOT_PASSWORD: ${rootPassword}
       MYSQL_DATABASE: ${dbName}
@@ -1981,7 +1979,6 @@ const getDatabaseServiceYaml = () => {
     return `
   db:
     image: postgres:15
-    container_name: ${form.name}-db
     environment:
       POSTGRES_DB: ${dbName}
       POSTGRES_USER: ${db.dbUser || "app"}
@@ -1995,7 +1992,6 @@ const getDatabaseServiceYaml = () => {
     return `
   db:
     image: mongo:6
-    container_name: ${form.name}-db
     environment:
       MONGO_INITDB_ROOT_USERNAME: ${db.dbUser || "app"}
       MONGO_INITDB_ROOT_PASSWORD: ${db.dbPassword}
@@ -2032,7 +2028,6 @@ const buildComposeTemplate = (name: string, ports: { containerPort: number; host
 services:
   app:
     image: nginx:alpine
-    container_name: ${name}
     ${portConfig}
     networks:
       - ${networkName}
@@ -2071,8 +2066,6 @@ const buildComposeFromImage = () => {
   return `name: ${name}
 services:
   app:
-    image: ${image}
-    container_name: ${name}
     ${portConfig}
     networks:
       - ${networkName}

src/services/api.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import type {
   Deployment,
+  Service,
   Network,
   Certificate,
   ProxyStatus,
@@ -83,6 +84,7 @@ export const deploymentsApi = {
     const queryString = params.toString();
     return apiClient.delete(`/deployments/${name}${queryString ? `?${queryString}` : ""}`);
   },
+  getServices: (name: string) => apiClient.get<{ services: Service[] }>(`/deployments/${name}/services`),
   start: (name: string) => apiClient.post(`/deployments/${name}/start`),
   stop: (name: string) => apiClient.post(`/deployments/${name}/stop`),
   restart: (name: string) => apiClient.post(`/deployments/${name}/restart`),

src/views/CronJobsView.vue

@@ -229,15 +229,18 @@
             </div>
 
             <div class="form-group">
-              <label for="service">Service (optional)</label>
-              <input
+              <label for="service">Service</label>
+              <select
                 id="service"
                 v-model="form.service"
-                type="text"
-                placeholder="web, app, worker..."
-                :disabled="saving"
-              />
-              <span class="hint">Leave empty to use deployment name as container</span>
+                :disabled="saving || loadingServices || !form.deployment_name"
+              >
+                <option value="">Default ({{ form.deployment_name || "select deployment" }})</option>
+                <option v-for="svc in deploymentServices" :key="svc.name" :value="svc.name">
+                  {{ svc.name }}
+                </option>
+              </select>
+              <span class="hint">Target service container for the command</span>
             </div>
 
             <div class="form-group">
@@ -374,7 +377,7 @@
 import { ref, computed, onMounted, watch } from "vue";
 import { schedulerApi, deploymentsApi } from "@/services/api";
 import type { ScheduledTask, TaskExecution } from "@/services/api";
-import type { Deployment } from "@/types";
+import type { Deployment, Service } from "@/types";
 import { useNotificationsStore } from "@/stores/notifications";
 import { useAuthStore } from "@/stores/auth";
 import ConfirmModal from "@/components/ConfirmModal.vue";
@@ -512,6 +515,31 @@ const defaultForm = (): CronJobForm => ({
 });
 
 const form = ref<CronJobForm>(defaultForm());
+const deploymentServices = ref<Service[]>([]);
+const loadingServices = ref(false);
+
+const fetchDeploymentServices = async (deploymentName: string) => {
+  if (!deploymentName) {
+    deploymentServices.value = [];
+    return;
+  }
+  loadingServices.value = true;
+  try {
+    const response = await deploymentsApi.getServices(deploymentName);
+    deploymentServices.value = response.data.services || [];
+  } catch {
+    deploymentServices.value = [];
+  } finally {
+    loadingServices.value = false;
+  }
+};
+
+watch(
+  () => form.value.deployment_name,
+  (name) => {
+    fetchDeploymentServices(name);
+  },
+);
 
 const isFormValid = computed(() => {
   return Boolean(