feat: Add alpine variant support for LXC scripts

- Download alpine install scripts (alpine-{slug}-install.sh) when alpine variant exists - Add ScriptVersionModal component for version selection (default/alpine) - Update ScriptDetailModal to show version selection before server selection - Update script execution to use selected version type - Support downloading both default and alpine variants of scripts
2025-11-07 14:44:34 +01:00
parent 73776ec6ac
commit 6ad18e185e
3 changed files with 326 additions and 1 deletions
--- a/src/app/_components/ScriptDetailModal.tsx
+++ b/src/app/_components/ScriptDetailModal.tsx
@@ -8,6 +8,7 @@ import { DiffViewer } from "./DiffViewer";
 import { TextViewer } from "./TextViewer";
 import { ExecutionModeModal } from "./ExecutionModeModal";
 import { ConfirmationModal } from "./ConfirmationModal";
+import { ScriptVersionModal } from "./ScriptVersionModal";
 import { TypeBadge, UpdateableBadge, PrivilegedBadge, NoteBadge } from "./Badge";
 import { Button } from "./ui/button";
 import { useRegisterModal } from './modal/ModalStackProvider';
@@ -38,6 +39,8 @@ export function ScriptDetailModal({
  const [selectedDiffFile, setSelectedDiffFile] = useState<string | null>(null);
  const [textViewerOpen, setTextViewerOpen] = useState(false);
  const [executionModeOpen, setExecutionModeOpen] = useState(false);
+  const [versionModalOpen, setVersionModalOpen] = useState(false);
+  const [selectedVersionType, setSelectedVersionType] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);

@@ -133,16 +136,43 @@ export function ScriptDetailModal({

  const handleInstallScript = () => {
    if (!script) return;
+    
+    // Check if script has multiple variants (default and alpine)
+    const installMethods = script.install_methods || [];
+    const hasMultipleVariants = installMethods.filter(method => 
+      method.type === 'default' || method.type === 'alpine'
+    ).length > 1;
+    
+    if (hasMultipleVariants) {
+      // Show version selection modal first
+      setVersionModalOpen(true);
+    } else {
+      // Only one variant, proceed directly to execution mode
+      // Use the first available method or default to 'default' type
+      const defaultMethod = installMethods.find(method => method.type === 'default');
+      const firstMethod = installMethods[0];
+      setSelectedVersionType(defaultMethod?.type || firstMethod?.type || 'default');
+      setExecutionModeOpen(true);
+    }
+  };
+
+  const handleVersionSelect = (versionType: string) => {
+    setSelectedVersionType(versionType);
+    setVersionModalOpen(false);
    setExecutionModeOpen(true);
  };

  const handleExecuteScript = (mode: "local" | "ssh", server?: any) => {
    if (!script || !onInstallScript) return;

-    // Find the script path (CT or tools)
+    // Find the script path based on selected version type
+    const versionType = selectedVersionType || 'default';
    const scriptMethod = script.install_methods?.find(
+      (method) => method.type === versionType && method.script,
+    ) || script.install_methods?.find(
      (method) => method.script,
    );
+    
    if (scriptMethod?.script) {
      const scriptPath = `scripts/${scriptMethod.script}`;
      const scriptName = script.name;
@@ -804,6 +834,16 @@ export function ScriptDetailModal({
        />
      )}

+      {/* Version Selection Modal */}
+      {script && (
+        <ScriptVersionModal
+          script={script}
+          isOpen={versionModalOpen}
+          onClose={() => setVersionModalOpen(false)}
+          onSelectVersion={handleVersionSelect}
+        />
+      )}
+
      {/* Execution Mode Modal */}
      {script && (
        <ExecutionModeModal
--- a/src/app/_components/ScriptVersionModal.tsx
+++ b/src/app/_components/ScriptVersionModal.tsx
@@ -0,0 +1,210 @@
+'use client';
+
+import { useState } from 'react';
+import type { Script, ScriptInstallMethod } from '../../types/script';
+import { Button } from './ui/button';
+import { useRegisterModal } from './modal/ModalStackProvider';
+
+interface ScriptVersionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectVersion: (versionType: string) => void;
+  script: Script | null;
+}
+
+export function ScriptVersionModal({ isOpen, onClose, onSelectVersion, script }: ScriptVersionModalProps) {
+  useRegisterModal(isOpen, { id: 'script-version-modal', allowEscape: true, onClose });
+  const [selectedVersion, setSelectedVersion] = useState<string | null>(null);
+
+  if (!isOpen || !script) return null;
+
+  // Get available install methods
+  const installMethods = script.install_methods || [];
+  const defaultMethod = installMethods.find(method => method.type === 'default');
+  const alpineMethod = installMethods.find(method => method.type === 'alpine');
+
+  const handleConfirm = () => {
+    if (selectedVersion) {
+      onSelectVersion(selectedVersion);
+      onClose();
+    }
+  };
+
+  const handleVersionSelect = (versionType: string) => {
+    setSelectedVersion(versionType);
+  };
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-card rounded-lg shadow-xl max-w-2xl w-full border border-border">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <h2 className="text-xl font-bold text-foreground">Select Version</h2>
+          <Button
+            onClick={onClose}
+            variant="ghost"
+            size="icon"
+            className="text-muted-foreground hover:text-foreground"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </Button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          <div className="mb-6">
+            <h3 className="text-lg font-medium text-foreground mb-2">
+              Choose a version for &quot;{script.name}&quot;
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              Select the version you want to install. Each version has different resource requirements.
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            {/* Default Version */}
+            {defaultMethod && (
+              <div
+                onClick={() => handleVersionSelect('default')}
+                className={`cursor-pointer rounded-lg border-2 p-4 transition-all ${
+                  selectedVersion === 'default'
+                    ? 'border-primary bg-primary/10'
+                    : 'border-border bg-card hover:border-primary/50'
+                }`}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-3 mb-3">
+                      <div
+                        className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
+                          selectedVersion === 'default'
+                            ? 'border-primary bg-primary'
+                            : 'border-border'
+                        }`}
+                      >
+                        {selectedVersion === 'default' && (
+                          <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                              fillRule="evenodd"
+                              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                        )}
+                      </div>
+                      <h4 className="text-base font-semibold text-foreground capitalize">
+                        {defaultMethod.type}
+                      </h4>
+                    </div>
+                    <div className="grid grid-cols-2 gap-3 text-sm ml-8">
+                      <div>
+                        <span className="text-muted-foreground">CPU: </span>
+                        <span className="text-foreground font-medium">{defaultMethod.resources.cpu} cores</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">RAM: </span>
+                        <span className="text-foreground font-medium">{defaultMethod.resources.ram} MB</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">HDD: </span>
+                        <span className="text-foreground font-medium">{defaultMethod.resources.hdd} GB</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">OS: </span>
+                        <span className="text-foreground font-medium">
+                          {defaultMethod.resources.os} {defaultMethod.resources.version}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Alpine Version */}
+            {alpineMethod && (
+              <div
+                onClick={() => handleVersionSelect('alpine')}
+                className={`cursor-pointer rounded-lg border-2 p-4 transition-all ${
+                  selectedVersion === 'alpine'
+                    ? 'border-primary bg-primary/10'
+                    : 'border-border bg-card hover:border-primary/50'
+                }`}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-3 mb-3">
+                      <div
+                        className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
+                          selectedVersion === 'alpine'
+                            ? 'border-primary bg-primary'
+                            : 'border-border'
+                        }`}
+                      >
+                        {selectedVersion === 'alpine' && (
+                          <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                              fillRule="evenodd"
+                              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                        )}
+                      </div>
+                      <h4 className="text-base font-semibold text-foreground capitalize">
+                        {alpineMethod.type}
+                      </h4>
+                    </div>
+                    <div className="grid grid-cols-2 gap-3 text-sm ml-8">
+                      <div>
+                        <span className="text-muted-foreground">CPU: </span>
+                        <span className="text-foreground font-medium">{alpineMethod.resources.cpu} cores</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">RAM: </span>
+                        <span className="text-foreground font-medium">{alpineMethod.resources.ram} MB</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">HDD: </span>
+                        <span className="text-foreground font-medium">{alpineMethod.resources.hdd} GB</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">OS: </span>
+                        <span className="text-foreground font-medium">
+                          {alpineMethod.resources.os} {alpineMethod.resources.version}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex justify-end space-x-3 mt-6">
+            <Button
+              onClick={onClose}
+              variant="outline"
+              size="default"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              disabled={!selectedVersion}
+              variant="default"
+              size="default"
+              className={!selectedVersion ? 'bg-muted-foreground cursor-not-allowed' : ''}
+            >
+              Continue
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
--- a/src/server/services/scriptDownloader.js
+++ b/src/server/services/scriptDownloader.js
@@ -145,6 +145,35 @@ export class ScriptDownloaderService {
        }
      }

+      // Download alpine install script if alpine variant exists (only for CT scripts)
+      const hasAlpineCtVariant = script.install_methods?.some(
+        method => method.type === 'alpine' && method.script?.startsWith('ct/')
+      );
+      console.log(`[${script.slug}] Checking for alpine variant:`, {
+        hasAlpineCtVariant,
+        installMethods: script.install_methods?.map(m => ({ type: m.type, script: m.script }))
+      });
+      
+      if (hasAlpineCtVariant) {
+        const alpineInstallScriptName = `alpine-${script.slug}-install.sh`;
+        try {
+          console.log(`[${script.slug}] Downloading alpine install script: install/${alpineInstallScriptName}`);
+          const alpineInstallContent = await this.downloadFileFromGitHub(`install/${alpineInstallScriptName}`);
+          const localAlpineInstallPath = join(this.scriptsDirectory, 'install', alpineInstallScriptName);
+          await writeFile(localAlpineInstallPath, alpineInstallContent, 'utf-8');
+          files.push(`install/${alpineInstallScriptName}`);
+          console.log(`[${script.slug}] Successfully downloaded: install/${alpineInstallScriptName}`);
+        } catch (error) {
+          // Alpine install script might not exist, that's okay
+          console.error(`[${script.slug}] Alpine install script not found or error: install/${alpineInstallScriptName}`, error);
+          if (error instanceof Error) {
+            console.error(`[${script.slug}] Error details:`, error.message, error.stack);
+          }
+        }
+      } else {
+        console.log(`[${script.slug}] No alpine CT variant found, skipping alpine install script download`);
+      }
+
      return {
        success: true,
        message: `Successfully loaded ${files.length} script(s) for ${script.name}`,
@@ -286,6 +315,23 @@ export class ScriptDownloaderService {
        }
      }

+      // Check alpine install script if alpine variant exists (only for CT scripts)
+      const hasAlpineCtVariant = script.install_methods?.some(
+        method => method.type === 'alpine' && method.script?.startsWith('ct/')
+      );
+      if (hasAlpineCtVariant) {
+        const alpineInstallScriptName = `alpine-${script.slug}-install.sh`;
+        const alpineInstallPath = join(this.scriptsDirectory, 'install', alpineInstallScriptName);
+        
+        try {
+          await access(alpineInstallPath);
+          files.push(`install/${alpineInstallScriptName}`);
+          installExists = true; // Mark as exists if alpine install script exists
+        } catch {
+          // File doesn't exist
+        }
+      }
+
      return { ctExists, installExists, files };
    } catch (error) {
      console.error('Error checking script existence:', error);
@@ -427,6 +473,35 @@ export class ScriptDownloaderService {
        );
      }

+      // Compare alpine install script if alpine variant exists (only for CT scripts)
+      const hasAlpineCtVariant = script.install_methods?.some(
+        method => method.type === 'alpine' && method.script?.startsWith('ct/')
+      );
+      if (hasAlpineCtVariant) {
+        const alpineInstallScriptName = `alpine-${script.slug}-install.sh`;
+        const alpineInstallScriptPath = `install/${alpineInstallScriptName}`;
+        const localAlpineInstallPath = join(this.scriptsDirectory, alpineInstallScriptPath);
+        
+        // Check if alpine install script exists locally
+        try {
+          await access(localAlpineInstallPath);
+          comparisonPromises.push(
+            this.compareSingleFile(alpineInstallScriptPath, alpineInstallScriptPath)
+              .then(result => {
+                if (result.hasDifferences) {
+                  hasDifferences = true;
+                  differences.push(result.filePath);
+                }
+              })
+              .catch(() => {
+                // Don't add to differences if there's an error reading files
+              })
+          );
+        } catch {
+          // Alpine install script doesn't exist locally, skip comparison
+        }
+      }
+
      // Wait for all comparisons to complete
      await Promise.all(comparisonPromises);