Запуск dev-среды и разработка простейшего плагина

Логичным решением данной проблемы и следующим этапом развития является создание собственной кастомной визуализации. Сложность такого подхода заключается в необходимости использования множества разных технологий, таких как docker, git, react, npm и др. В данной статье мы расскажем о своем опыте создания плагина и его внедрения в проект через сборку нового образа docker.

Окружение:

1. Установка Apache Superset и соответствующего окружения.
2. Установка 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