Создание страницы управления скриптами в Cockpit

Admin

Инструкция: Создание страницы управления скриптами в Cockpit

Цель

Создать пользовательскую страницу в Cockpit, где можно:

запускать скрипты на сервере (в том числе от root)
видеть вывод скрипта в реальном времени
автоматически скроллить вывод вниз

1️⃣ Создаём каталог модуля

В терминале сервера:

sudo mkdir -p /usr/share/cockpit/mybutton
cd /usr/share/cockpit/mybutton

Все файлы для модуля будут храниться здесь.

2️⃣ Создаём `manifest.json`

Файл описывает модуль и его название в меню Cockpit.

sudo nano manifest.json

Вставляем:

{
  "version": 0,
  "tools": {
    "mybutton": {
      "label": "Управление скриптами",
      "path": "index.html"
    }
  }
}

Сохраняем и выходим.

3️⃣ Создаём HTML-страницу

sudo nano index.html

Вставляем следующий код без inline-скриптов и стилей, чтобы не блокировался CSP:

<!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>
<button id="run">Запустить скрипт</button>
<div id="terminal">Готов к запуску</div>

</body>
</html>

4️⃣ Создаём CSS для терминала

sudo nano style.css

Пример стилей:

#terminal {
    background: black;
    color: #00ff00;
    font-family: monospace;
    padding: 10px;
    height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
}
button {
    margin-bottom: 10px;
    padding: 5px 15px;
}

5️⃣ Создаём JS-файл для кнопки и автоскроллинга

sudo nano main.js

Пример кода:

document.addEventListener("DOMContentLoaded", function () {

    const button = document.getElementById("run");
    const terminal = document.getElementById("terminal");

    button.addEventListener("click", function () {

        terminal.textContent = "Запуск скрипта от root...\n";

        cockpit.spawn(
            ["/usr/local/bin/myscript.sh"], // путь к вашему скрипту
            { superuser: "require", err: "out", pty: true } // запуск от root
        )
        .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️⃣ Создаём сам скрипт

Например:

sudo nano /usr/local/bin/myscript.sh

Пример скрипта:

#!/bin/bash
echo "Скрипт запущен!"
sleep 1
echo "Выполняется процесс..."
sleep 1
echo "Завершено"
date

Сделаем скрипт исполняемым:

sudo chmod +x /usr/local/bin/myscript.sh

7️⃣ Перезапускаем Cockpit

sudo systemctl restart cockpit

8️⃣ Используем модуль

Открой Cockpit в браузере.
В левом меню появится пункт «Управление скриптами».
Нажми на него.
Нажми кнопку «Запустить скрипт».
Вывод скрипта появится в терминале прямо на странице.
Автоскролл покажет последние строки в реальном времени.

Советы

Проверяйте скрипт вручную в терминале перед запуском через Cockpit:

sudo /usr/local/bin/myscript.sh

Если скрипт требует root — оставляйте { superuser: "require" }. Cockpit покажет диалог для подтверждения.
Используйте pty: true для корректного вывода (как в терминале).
Любые изменения JS и CSS требуют Ctrl+Shift+R в браузере для полной перезагрузки.

Admin

Инструкция: Интерактивная страница управления скриптами в 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, чтобы браузер загрузил новые файлы.

База знаний (кластер NBICS)

Создание страницы управления скриптами в Cockpit

Инструкция: Создание страницы управления скриптами в Cockpit

Цель

1️⃣ Создаём каталог модуля

2️⃣ Создаём manifest.json

3️⃣ Создаём HTML-страницу

4️⃣ Создаём CSS для терминала

5️⃣ Создаём JS-файл для кнопки и автоскроллинга

6️⃣ Создаём сам скрипт

7️⃣ Перезапускаем Cockpit

8️⃣ Используем модуль

Советы

Инструкция: Интерактивная страница управления скриптами в Cockpit

Цель

1️⃣ Структура модуля

2️⃣ manifest.json

3️⃣ index.html — страница с формой

4️⃣ style.css — стили

5️⃣ main.js — логика интерактивной формы

6️⃣ Скрипт принимает аргументы

7️⃣ Перезапуск Cockpit

8️⃣ Использование

Советы

2️⃣ Создаём `manifest.json`