Проект по созданию React-компонент для работы с Zabbix-API. Компоненты общаяются с API в соответствии с OpenAPI-Spec спецификацией, на базе которой можно собрать как API-сервер, так и SDK-клиента.
- Demo
- zabbix-server demo (пользователь guest)
- API demo (token test)
- Предоставить FrontEnd в виде React-компоненты
- Взаимодействие Front-Back свести до простейших REST-запросов
- Сосредоточить всю логику взаимодействия с Zabbix-сервером на BackEnd - zabbix-reactor
Мы хотим открыть доступ только к определенным Host group на Zabbix. Для этого необходимо создать отдельного пользователя «react_user».
- Administration/User groups: добавляем группу пользователей react_user_group
- Administration/Users: добавляем пользователя react_user, включаем в группу пользователей react_user_group
- Administration/User groups/Permissions: добавляем Host groups, с которыми будет позволено работать «react_user». Выставляем Read-write. Именно здесь ограничиваем возможности React компонент по воздействию на Zabbix.
Я собирал на своей машине IP=192.168.13.97, все ссылки относительно этого IP.
OpenAPI-сервер обрабатывает REST-запросы от React-компонент. Общается с Zabbix-API.
В директории node-back описана установка.
Результат:
- WEB-интерфейс для тестовых запросов через Swagger-UI - 192.168.13.97:8002/spec-ui/
- OpenAPI-Spec файл доступен - 192.168.13.97:8002/spec/swagger.json
- API принимает REST-запросы - 192.168.13.97:8002/v2api
В поле "token" вписываем "test".
docker build -t 'zabbix-react-front:latest' github.com/ars-anosov/zabbix-react#:web-front
docker run \
--name zabbix-react-front \
--publish=8003:8003 \
-it \
zabbix-react-front:latest
Выскочить из контейнера : Ctrl+P+Q
Живые компоненты - 192.168.13.97:8003
Например через create-react-app
mkdir ~/react-app && cd ~/react-app
docker run \
--name react-app \
--publish=3000:3000 \
-v $PWD:/my-app \
-w / \
-it \
node:8 bash
# Дальше все действия в контейнере:
npm install -g create-react-app
create-react-app my-app
cd my-app
rm -f src/*
yarn add zabbix-react-component
# Редактируем файлы. См. ниже.
touch src/index.js
touch src/index.css
npm start
- Содержимое index.js
import React from 'react';
import ReactDOM from 'react-dom'
import { OpenApiSwagger, HostConfig, HostGraph } from 'zabbix-react-component'
import './index.css';
window.localStorage.setItem('token', 'test')
const specUrl = 'http://192.168.13.97:8002/spec/swagger.json'
const swg = new OpenApiSwagger(specUrl)
swg.connect((client, err) => {
if (err) {
// Error actions
}
else {
ReactDOM.render(
<div>
<HostConfig swgClient={client} headerTxt='HostConfig component' />
<HostGraph swgClient={client} headerTxt='HostGraph component' />
</div>,
document.getElementById('root')
)
}
})
- Содержимое index.css копируем отсюда examples/css
Тыкаем компоненты на локальном web-сервере - 192.168.13.97:3000
- node-back: Swagger-сервер "zabbix-reactor-node":
- web-front: livereload-сервер с компонентами
- web-front/src/js/components: содержимое npm пакета "zabbix-react-component"
docker run \
--publish=8001:8080 \
--name=swagger-editor \
swaggerapi/swagger-editor
Пишем файл спецификации - 192.168.13.97:8001, там же генерим Server API / Client SDK
Любителям хардкора.
Компилируем
git clone https://github.com/swagger-api/swagger-codegen
cd swagger-codegen
./run-in-docker.sh mvn package
Генерим Server API
cp node-back/api/zabbix-api.yaml swagger-codegen/ && \
swagger-codegen/run-in-docker.sh generate \
-i zabbix-api.yaml \
-l nodejs-server \
-o /gen/out/node-back
Генерим Client SDK
cp node-back/api/zabbix-api.yaml swagger-codegen/ && \
swagger-codegen/run-in-docker.sh generate \
-i zabbix-api.yaml \
-l javascript
-o /gen/out/web_front
Results
ls -la swagger-codegen/out/
cp -r swagger-codegen/out/web-front/src/ web-front/src/js/partails/swagger_client/