Запуск dev-среды и разработка простейшего плагина в Apache Superset
Форматирование визуализаций Apache Superset с использованием CSS и HTML применимо в большинстве случаев, но для некоторых чартов недоступно, а также может существенно усложнить запрос к источнику данных.
Логичным решением данной проблемы и следующим этапом развития является создание собственной кастомной визуализации. Сложность такого подхода заключается в необходимости использования множества разных технологий, таких как docker, git, react, npm и др. В данной статье мы расскажем о своем опыте создания плагина и его внедрения в проект через сборку нового образа docker.
Окружение:
- Установка Apache Superset и соответствующего окружения.
- Установка docker и docker-compose.
Открываем терминал и выполняем следующие команды:
sudo apt update sudo apt install apt-transport-https ca-certificates curl software-properties-common curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add – sudo apt update sudo apt install docker-ce sudo systemctl status docker (проверка статуса) sudo curl -L "https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose docker-compose –version (проверка версии)
1.2. Установка Apache Superset
1.2.1. Клонируем проект из github и переходим в каталог superset
git clone https://github.com/apache/superset.gitcd cd superset
1.2.2. Запускаем контейнер Apache Superset
sudo docker-compose -f docker-compose-non-dev.yml up -d
1.2.3. После завершения переходим по адресу http://localhost:8088/ и авторизуемся логин/пароль: admin/admin
1.3. Установка Node с помощью Node Version Manager:
Для корректной работы необходимо установить node.js и npm версии совместимой с Superset. Узнать какая версия node необходима можно в файле package.json, который находится в папке superset-frontend:
Для установки выполняем следующие команды:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash source ~/.bashrc nvm list-remote nvm install v16.9.1 node -v npm -v
2. Запуск dev среды Superset и создание плагина
2.1. Запускаем dev среду
Переходим в папку superset-frontend и запускаем команду установки всех зависимостей и пакетов:
cd superset-frontend npm install
Запускаем dev superset:
npm run dev-server
Переходим по ссылке http://localhost:9000, где мы должны увидеть dev-superset (логин и пароль либо admin/admin, либо соответствует вашей продуктивной среде).
Останавливаем dev-server после проверки нажав в терминале Ctrl + C.
2.2. Создание плагина и подключение к dev среде Superset
2.2.1. Устанавливаем генератор Superset Yeoman и все необходимые зависимости. Выполняем следующие команды:
npm i -g yo cd superset-frontend/packages/generator-superset npm i npm link
2.2.2. Создаем новый каталог в удобной директории для вашего плагина и запускаем генератор Yeoman:
mkdir superset-my-first-chart cd superset-my-first-chart yo @superset-ui/superset
На вопросы генератора оставляем ответы по умолчанию.
2.2.3. Выполняем следующие команды для сборки плагина:
npm i –force npm run build
Чтобы запустить плагин в режиме отладки, запускаем сервер разработки с помощью следующей команды (сборка будет осуществляться автоматически при изменении кода):
npm run dev
2.2.4. Добавляем пакет в Superset.
Переходим в superset-frontend подкаталог исходной папки superset и запускаем:
npm i -S /home/juls/tmp/superset-my-first-chart
В папке node_modules появится каталог c нашим плагином
В директории разработки плагина заходим в файл README. В нем необходимо найти две строки:
В подкаталоге superset-frontend находим /src/visualizations/presets/MainPreset.js, вставляем в него строки из README:
- Важно!!! Для последующей успешной сборки образа docker необходимо импортировать плагин до фильтров:
- Важно!!! Для последующей успешной сборки образа docker, строка создания экземпляра плагина записывается перед ...experimentalplugins в следующем формате:
new SupersetMyFirstChart().configure({
key: 'superset-my-first-chart',
}),
Запускаем dev-server и проверяем наличие плагина и его работоспособность:
npm run dev-server
Теперь при изменении и сохранении исходных файлов в директории плагина изменения будут автоматически отображаться в браузере, изменим надпись «Hello, World!» для примера.
3. Сборка нового образа docker
Чтобы отобразить разработанный плагин в продуктивной среде, необходимо остановить dev среду, нажав ctrl+c в терминале с плагином и сервером.
Останавливаем Superset
sudo docker-compose stop
Запускаем сборку образа командой:
sudo docker build -f Dockerfile --force-rm -t apache/superset:${TAG:-latest-8} /home/juls/tst/superset здесь latest-8 – название вашего нового образа, /home/juls/tst/superset – дериктория установки superset
Сборка нового образа занимает длительное время и требует достаточного объема памяти, если возникают проблемы, то можно увеличить размер файла подкачки.
После деплоя в файле docker-compose-non-dev.yml меняем версию образа на только что собранную и сохраняем.
Запускаем Superset
sudo docker-compose -f docker-compose-non-dev.yml up –d
Источник: Блог bilab
