Инструкция: Интерактивная страница управления скриптами в Cockpit
Цель
Создать страницу, где можно:
запускать скрипты от root
вводить параметры через поля формы (логины, пароли, имена БД и др.)
видеть потоковый вывод скрипта с автоскроллингом
полностью работать через интерфейс, без терминала
1️⃣ Структура модуля
/usr/share/cockpit/mybutton2/
├── manifest.json
├── index.html
├── main.js
└── style.css
2️⃣ manifest.json
{
"version": 0,
"tools": {
"mybutton": {
"label": "Управление сервисом",
"path": "index.html"
}
}
}
3️⃣ index.html — страница с формой
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../base1/cockpit.js"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<h2>Настройка сервиса</h2>
<form id="configForm">
<label>Имя пользователя: <input type="text" id="username" required></label><br>
<label>Пароль: <input type="password" id="password" required></label><br>
<label>Имя БД: <input type="text" id="dbname" required></label><br>
<button type="submit">Запустить скрипт</button>
</form>
<div id="terminal">Готов к запуску</div>
</body>
</html>
4️⃣ style.css — стили
#terminal {
background: black;
color: #00ff00;
font-family: monospace;
padding: 10px;
height: 300px;
overflow-y: auto;
white-space: pre-wrap;
margin-top: 10px;
}
form label {
display: block;
margin-bottom: 5px;
}
form input {
margin-bottom: 10px;
}
button {
padding: 5px 15px;
}
5️⃣ main.js — логика интерактивной формы
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("configForm");
const terminal = document.getElementById("terminal");
form.addEventListener("submit", function (event) {
event.preventDefault(); // предотвращаем стандартное обновление страницы
// получаем данные из формы
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const dbname = document.getElementById("dbname").value;
terminal.textContent = "Запуск скрипта с параметрами...\n";
// запускаем скрипт от root
cockpit.spawn(
["/usr/local/bin/myscript2.sh", username, password, dbname],
{ superuser: "require", err: "out", pty: true }
)
.stream(function(data) {
terminal.textContent += data;
terminal.scrollTop = terminal.scrollHeight; // автоскролл
})
.done(function() {
terminal.textContent += "\n[Скрипт завершён]";
terminal.scrollTop = terminal.scrollHeight;
})
.fail(function(error) {
terminal.textContent += "\n[Ошибка]\n" + error;
terminal.scrollTop = terminal.scrollHeight;
});
});
});
6️⃣ Скрипт принимает аргументы
Пример /usr/local/bin/myscript2.sh:
#!/bin/bash
USERNAME=$1
PASSWORD=$2
DBNAME=$3
echo "Создаём пользователя: $USERNAME"
sleep 1
echo "Устанавливаем пароль: $PASSWORD"
sleep 1
echo "Создаём БД: $DBNAME"
sleep 1
echo "Настройка завершена!"
Сделаем скрипт исполняемым:
sudo chmod +x /usr/local/bin/myscript2.sh
7️⃣ Перезапуск Cockpit
sudo systemctl restart cockpit
8️⃣ Использование
Открыть Cockpit в браузере
Перейти в Управление сервисом
Заполнить форму (логин, пароль, имя БД)
Нажать Запустить скрипт
Смотреть вывод скрипта в терминале прямо на странице
Автоскролл покажет новые строки автоматически, даже если скрипт выводит много информации.
Советы
Любые проверки и валидацию данных лучше делать на стороне скрипта.
Не храните пароли в открытом виде в JS или HTML — Cockpit защищён, но безопасность критична.
Используйте pty: true для корректного отображения потокового вывода.
После изменений JS и CSS делайте Ctrl+Shift+R, чтобы браузер загрузил новые файлы.