Fleshing-Out Implementation of Credential Management for Ansible Playbooks

2025-10-27 22:21:58 -06:00 · 2025-10-11 02:14:56 -06:00
parent b07f52dbb5
commit 01202e8ac2
10 changed files with 2310 additions and 110 deletions
--- a/Data/Server/WebUI/src/Scheduling/Create_Job.jsx
+++ b/Data/Server/WebUI/src/Scheduling/Create_Job.jsx
@@ -9,8 +9,10 @@ import {
  Button,
  IconButton,
  Checkbox,
+  FormControl,
  FormControlLabel,
  Select,
+  InputLabel,
  Menu,
  MenuItem,
  Divider,
@@ -24,7 +26,8 @@ import {
  TableCell,
  TableBody,
  TableSortLabel,
-  GlobalStyles
+  GlobalStyles,
+  CircularProgress
 } from "@mui/material";
 import {
  Add as AddIcon,
@@ -34,7 +37,8 @@ import {
  Sync as SyncIcon,
  Timer as TimerIcon,
  Check as CheckIcon,
-  Error as ErrorIcon
+  Error as ErrorIcon,
+  Refresh as RefreshIcon
 } from "@mui/icons-material";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -421,6 +425,52 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
  const [stopAfterEnabled, setStopAfterEnabled] = useState(false);
  const [expiration, setExpiration] = useState("no_expire");
  const [execContext, setExecContext] = useState("system");
+  const [credentials, setCredentials] = useState([]);
+  const [credentialLoading, setCredentialLoading] = useState(false);
+  const [credentialError, setCredentialError] = useState("");
+  const [selectedCredentialId, setSelectedCredentialId] = useState("");
+
+  const loadCredentials = useCallback(async () => {
+    setCredentialLoading(true);
+    setCredentialError("");
+    try {
+      const resp = await fetch("/api/credentials");
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data = await resp.json();
+      const list = Array.isArray(data?.credentials) ? data.credentials : [];
+      list.sort((a, b) => String(a?.name || "").localeCompare(String(b?.name || "")));
+      setCredentials(list);
+    } catch (err) {
+      setCredentials([]);
+      setCredentialError(String(err.message || err));
+    } finally {
+      setCredentialLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadCredentials();
+  }, [loadCredentials]);
+
+  const remoteExec = useMemo(() => execContext === "ssh" || execContext === "winrm", [execContext]);
+  const filteredCredentials = useMemo(() => {
+    if (!remoteExec) return credentials;
+    const target = execContext === "winrm" ? "winrm" : "ssh";
+    return credentials.filter((cred) => String(cred.connection_type || "").toLowerCase() === target);
+  }, [credentials, remoteExec, execContext]);
+
+  useEffect(() => {
+    if (!remoteExec) {
+      return;
+    }
+    if (!filteredCredentials.length) {
+      setSelectedCredentialId("");
+      return;
+    }
+    if (!selectedCredentialId || !filteredCredentials.some((cred) => String(cred.id) === String(selectedCredentialId))) {
+      setSelectedCredentialId(String(filteredCredentials[0].id));
+    }
+  }, [remoteExec, filteredCredentials, selectedCredentialId]);

  // dialogs state
  const [addCompOpen, setAddCompOpen] = useState(false);
@@ -827,11 +877,12 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
  const isValid = useMemo(() => {
    const base = jobName.trim().length > 0 && components.length > 0 && targets.length > 0;
    if (!base) return false;
+    if (remoteExec && !selectedCredentialId) return false;
    if (scheduleType !== "immediately") {
      return !!startDateTime;
    }
    return true;
-  }, [jobName, components.length, targets.length, scheduleType, startDateTime]);
+  }, [jobName, components.length, targets.length, scheduleType, startDateTime, remoteExec, selectedCredentialId]);

  const [confirmOpen, setConfirmOpen] = useState(false);
  const editing = !!(initialJob && initialJob.id);
@@ -1306,6 +1357,7 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
        setStopAfterEnabled(Boolean(initialJob.duration_stop_enabled));
        setExpiration(initialJob.expiration || "no_expire");
        setExecContext(initialJob.execution_context || "system");
+        setSelectedCredentialId(initialJob.credential_id ? String(initialJob.credential_id) : "");
        const comps = Array.isArray(initialJob.components) ? initialJob.components : [];
        const hydrated = await hydrateExistingComponents(comps);
        if (!canceled) {
@@ -1316,6 +1368,7 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
        setPageTitleJobName("");
        setComponents([]);
        setComponentVarErrors({});
+        setSelectedCredentialId("");
      }
    };
    hydrate();
@@ -1411,6 +1464,10 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
  };

  const handleCreate = async () => {
+    if (remoteExec && !selectedCredentialId) {
+      alert("Please select a credential for this execution context.");
+      return;
+    }
    const requiredErrors = {};
    components.forEach((comp) => {
      if (!comp || !comp.localId) return;
@@ -1438,7 +1495,8 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
      targets,
      schedule: { type: scheduleType, start: scheduleType !== "immediately" ? (() => { try { const d = startDateTime?.toDate?.() || new Date(startDateTime); d.setSeconds(0,0); return d.toISOString(); } catch { return startDateTime; } })() : null },
      duration: { stopAfterEnabled, expiration },
-      execution_context: execContext
+      execution_context: execContext,
+      credential_id: remoteExec && selectedCredentialId ? Number(selectedCredentialId) : null
    };
    try {
      const resp = await fetch(initialJob && initialJob.id ? `/api/scheduled_jobs/${initialJob.id}` : "/api/scheduled_jobs", {
@@ -1665,10 +1723,61 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
        {tab === 4 && (
          <Box>
            <SectionHeader title="Execution Context" />
-            <Select size="small" value={execContext} onChange={(e) => setExecContext(e.target.value)} sx={{ minWidth: 280 }}>
-              <MenuItem value="system">Run as SYSTEM Account</MenuItem>
-              <MenuItem value="current_user">Run as the Logged-In User</MenuItem>
+            <Select
+              size="small"
+              value={execContext}
+              onChange={(e) => setExecContext(e.target.value)}
+              sx={{ minWidth: 320 }}
+            >
+              <MenuItem value="system">Run on agent as SYSTEM (device-local)</MenuItem>
+              <MenuItem value="current_user">Run on agent as logged-in user (device-local)</MenuItem>
+              <MenuItem value="ssh">Run from server via SSH (remote)</MenuItem>
+              <MenuItem value="winrm">Run from server via WinRM (remote)</MenuItem>
            </Select>
+            {remoteExec && (
+              <Box sx={{ mt: 2, display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap" }}>
+                <FormControl
+                  size="small"
+                  sx={{ minWidth: 320 }}
+                  disabled={credentialLoading || !filteredCredentials.length}
+                >
+                  <InputLabel sx={{ color: "#aaa" }}>Credential</InputLabel>
+                  <Select
+                    value={selectedCredentialId}
+                    label="Credential"
+                    onChange={(e) => setSelectedCredentialId(e.target.value)}
+                    sx={{ bgcolor: "#1f1f1f", color: "#fff" }}
+                  >
+                    {filteredCredentials.map((cred) => (
+                      <MenuItem key={cred.id} value={String(cred.id)}>
+                        {cred.name}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<RefreshIcon fontSize="small" />}
+                  onClick={loadCredentials}
+                  disabled={credentialLoading}
+                  sx={{ color: "#58a6ff", borderColor: "#58a6ff" }}
+                >
+                  Refresh
+                </Button>
+                {credentialLoading && <CircularProgress size={18} sx={{ color: "#58a6ff" }} />}
+                {!credentialLoading && credentialError && (
+                  <Typography variant="body2" sx={{ color: "#ff8080" }}>
+                    {credentialError}
+                  </Typography>
+                )}
+                {!credentialLoading && !credentialError && !filteredCredentials.length && (
+                  <Typography variant="body2" sx={{ color: "#ff8080" }}>
+                    No {execContext === "winrm" ? "WinRM" : "SSH"} credentials available. Create one under Access Management &gt; Credentials.
+                  </Typography>
+                )}
+              </Box>
+            )}
          </Box>
        )}

--- a/Data/Server/WebUI/src/Scheduling/Quick_Job.jsx
+++ b/Data/Server/WebUI/src/Scheduling/Quick_Job.jsx
@@ -10,7 +10,12 @@ import {
  Paper,
  FormControlLabel,
  Checkbox,
-  TextField
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  CircularProgress
 } from "@mui/material";
 import { Folder as FolderIcon, Description as DescriptionIcon } from "@mui/icons-material";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
@@ -82,6 +87,10 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
  const [error, setError] = useState("");
  const [runAsCurrentUser, setRunAsCurrentUser] = useState(false);
  const [mode, setMode] = useState("scripts"); // 'scripts' | 'ansible'
+  const [credentials, setCredentials] = useState([]);
+  const [credentialsLoading, setCredentialsLoading] = useState(false);
+  const [credentialsError, setCredentialsError] = useState("");
+  const [selectedCredentialId, setSelectedCredentialId] = useState("");
  const [variables, setVariables] = useState([]);
  const [variableValues, setVariableValues] = useState({});
  const [variableErrors, setVariableErrors] = useState({});
@@ -115,6 +124,53 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
    }
  }, [open, loadTree]);

+  useEffect(() => {
+    if (!open || mode !== "ansible") return;
+    let canceled = false;
+    setCredentialsLoading(true);
+    setCredentialsError("");
+    (async () => {
+      try {
+        const resp = await fetch("/api/credentials");
+        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+        const data = await resp.json();
+        if (canceled) return;
+        const list = Array.isArray(data?.credentials)
+          ? data.credentials.filter((cred) => String(cred.connection_type || "").toLowerCase() === "ssh")
+          : [];
+        list.sort((a, b) => String(a?.name || "").localeCompare(String(b?.name || "")));
+        setCredentials(list);
+      } catch (err) {
+        if (!canceled) {
+          setCredentials([]);
+          setCredentialsError(String(err.message || err));
+        }
+      } finally {
+        if (!canceled) setCredentialsLoading(false);
+      }
+    })();
+    return () => {
+      canceled = true;
+    };
+  }, [open, mode]);
+
+  useEffect(() => {
+    if (!open) {
+      setSelectedCredentialId("");
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (mode !== "ansible") return;
+    if (!credentials.length) {
+      setSelectedCredentialId("");
+      return;
+    }
+    if (!selectedCredentialId || !credentials.some((cred) => String(cred.id) === String(selectedCredentialId))) {
+      setSelectedCredentialId(String(credentials[0].id));
+    }
+  }, [mode, credentials, selectedCredentialId]);
+
  const renderNodes = (nodes = []) =>
    nodes.map((n) => (
      <TreeItem
@@ -286,6 +342,10 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
      setError(mode === 'ansible' ? "Please choose a playbook to run." : "Please choose a script to run.");
      return;
    }
+    if (mode === 'ansible' && !selectedCredentialId) {
+      setError("Select a credential to run this playbook.");
+      return;
+    }
    if (variables.length) {
      const errors = {};
      variables.forEach((variable) => {
@@ -314,7 +374,12 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
        resp = await fetch("/api/ansible/quick_run", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ playbook_path, hostnames, variable_values: variableOverrides })
+          body: JSON.stringify({
+            playbook_path,
+            hostnames,
+            variable_values: variableOverrides,
+            credential_id: selectedCredentialId ? Number(selectedCredentialId) : null
+          })
        });
      } else {
        // quick_run expects a path relative to Assemblies root with 'Scripts/' prefix
@@ -340,6 +405,9 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
    }
  };

+  const credentialRequired = mode === "ansible";
+  const disableRun = running || !selectedPath || (credentialRequired && (!selectedCredentialId || !credentials.length));
+
  return (
    <Dialog open={open} onClose={running ? undefined : onClose} fullWidth maxWidth="md"
      PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}
@@ -353,6 +421,38 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
        <Typography variant="body2" sx={{ color: "#aaa", mb: 1 }}>
          Select a {mode === 'ansible' ? 'playbook' : 'script'} to run on {hostnames.length} device{hostnames.length !== 1 ? "s" : ""}.
        </Typography>
+        {mode === 'ansible' && (
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap", mb: 2 }}>
+            <FormControl
+              size="small"
+              sx={{ minWidth: 260 }}
+              disabled={credentialsLoading || !credentials.length}
+            >
+              <InputLabel sx={{ color: "#aaa" }}>Credential</InputLabel>
+              <Select
+                value={selectedCredentialId}
+                label="Credential"
+                onChange={(e) => setSelectedCredentialId(e.target.value)}
+                sx={{ bgcolor: "#1f1f1f", color: "#fff" }}
+              >
+                {credentials.map((cred) => (
+                  <MenuItem key={cred.id} value={String(cred.id)}>
+                    {cred.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            {credentialsLoading && <CircularProgress size={18} sx={{ color: "#58a6ff" }} />}
+            {!credentialsLoading && credentialsError && (
+              <Typography variant="body2" sx={{ color: "#ff8080" }}>{credentialsError}</Typography>
+            )}
+            {!credentialsLoading && !credentialsError && !credentials.length && (
+              <Typography variant="body2" sx={{ color: "#ff8080" }}>
+                No SSH credentials available. Create one under Access Management.
+              </Typography>
+            )}
+          </Box>
+        )}
        <Box sx={{ display: "flex", gap: 2 }}>
          <Paper sx={{ flex: 1, p: 1, bgcolor: "#1e1e1e", maxHeight: 400, overflow: "auto" }}>
            <SimpleTreeView sx={{ color: "#e6edf3" }} onItemSelectionToggle={onItemSelect}>
@@ -444,8 +544,8 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={running} sx={{ color: "#58a6ff" }}>Cancel</Button>
-        <Button onClick={onRun} disabled={running || !selectedPath}
-          sx={{ color: running || !selectedPath ? "#666" : "#58a6ff" }}
+        <Button onClick={onRun} disabled={disableRun}
+          sx={{ color: disableRun ? "#666" : "#58a6ff" }}
        >
          Run
        </Button>
@@ -453,4 +553,3 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
    </Dialog>
  );
 }
-