💮 👩🏿‍🤝‍👨🏼 🍆 Reactコンポーネントを使用してZabbix APIのUIインターフェースを準備する 👨‍✈️ 👩🏿‍💼 🍽️

みなさんこんにちは！それはすべて、電話プラットフォームを企業のWebサイトに統合することから始まりました。

さまざまなアプローチと実装方法に感銘を受けたWEB開発。技術スタックは多様性に富んでおり、ツールの選択により、プロジェクトの開発スタイル、モジュール性、または骨化が決まります。

次回は電話プラットフォームについて書きます。 VoIP固有の強い偏りは、主要なもの、つまり最新のSPAアプリケーションの開発方法から注意をそらすでしょう。

この記事では、サードパーティのサービスを既存の作業環境に導入するプロセスについて説明します。

今日は、 Zabbix-APIで遊んでみましょう。

ライブデモ

誰が興味を持ちます

10年前にサーバー側でCGIスクリプトを使用してWEBインタラクティブを実装し、最新のアプローチを理解したい人。独自のAPIを発明しなければならない場合、何が起こったのかを文書化するために、解決策を以下に示します。

タスクを設定します

Zabbixの初期設定は、統合されたWEBインターフェースを介して行われます。通常、ルーチンは単にホストをグループに追加するだけです。

自社のシステムの機器の記録（ホストの追加）を企業のWebサイトに保管しています。

Zabbixの日常的なタスクを既存の会計環境に統合することは素晴らしいことです。パラメーターの数を最小限に抑える、理想的には1つの「追加」ボタン

通常、企業システムの開発は別のチームによって行われます。

既製のモジュールの形で機能を提供することは素晴らしいことです。理想的には、数行のコード「import ...」と「render ...」
最新の技術スタック、できれば標準の対話インターフェースを使用してみてください

技術スタック

ReactJS

ユーザーとの対話は、 MVC作業スキームとそのバリエーションによって古典的に説明されています。材料の研究には、 Vue 、 Ember 、 Meteor 、 Angular 、 ReactJSの候補者がいました。

ほとんどのフレームワーク/ライブラリは、フロントエンドおよびバックエンドの実装を備えた完全なMVCエコシステムを実装しようとしていることが理解されるようになり、これを「フルスタック」と呼びます。

Reactは「MVC」の「V」です。私は他の人の生態系に飛び込みたくありませんでしたが、シンプルな引き出しがとても気に入りました。 Web、IOS、Android用の1つのコードであるReact Nativeに飛び込むことができたので、見込み顧客は喜んでいました。そしてReduxを接続することにより、完全なスタックを取得する必要があります。別にJSX、キラー機能IMHOに満足しています。

Jsx

React JSX開発者ブレインは、ブラウザーのDOM要素の操作を視覚的に簡素化するJavaScriptの構文アドオンです。

熱心なWeb開発者は、HTMLマークアップとJavaScriptコードを混合したことで彼をscりました。私はベテランの開発者ではなく、JSXは素晴らしいソリューションだと考えています。

NodeJS

最初は、「ブラウザ」JavaScriptで記述するのが便利に思えました。確かに、プロジェクトをモジュールに分割して必要なモジュールをロードするのは不便です。この問題はBowerパッケージマネージャーによって解決されました。 Bowerには独自の哲学があり、モジュールのバージョンが互いに競合しないように注意しています。

実際には、必要なすべてのツールがnpmパッケージとして利用可能であることが判明しました。目的のモジュールがnpmパッケージとして利用できない場合は、Bowerを追加することをお勧めします。

結果。 Nodeに書き込み、npmパッケージマネージャーを使用します。

Browserify

NodeJSは、ブラウザベースではなく、サーバー側のJavaScriptです。善良な人々は、 NodeifyコードをブラウザーバージョンにリメイクするBrowserify トランスポーターを思い付きました。

バベル

ブラウザには、組み込みJavaScriptエンジンの更新速度が高くありません。私は、最新のJavasScriptのすべての「砂糖」、つまり別のツール-Babelを使用したいと思います。 ECMAScriptの最新バージョンで動作するトランスポーター。それでも、JSX構文を認識するのは彼です。

ガルプ

JavaScriptでの作業に加えて、最新のWEBページはCSSを多用していますが、これは新しいレベルのSASS抽象化に移行しました。独自のフォントと画像がロードされます。 HTMLテキストはさまざまなファイルに散在する可能性があります。その結果、最終プロジェクトの構築は、さまざまな方法でファイルシステムに散在するさまざまなファイルに対する10のアクションになります。

Gulpはコレクターです。実際、これは通常のNodeスクリプトであり、プロジェクトのソースファイルを処理するアクションが自動化されています。

私はGulpを選択しました。かつて、その処理の原則が気に入っていました。ストリーム処理、高速です。彼は Gruntを破り、 Insaytの記事も入手しました。これに基づいてgulpfile.jsを作成しました。

あるいは、 webpackを検討することは理にかなっています、私は試しませんでした。

ここで注目に値する-フロントエンドを開発するための主要なツールをリストしました。今度はバックエンドの番です。

しかし、最初に、将来のReactコンポーネントとZabbix-APIの動作原理を定式化します。

目的

フロントバックのやり取りを単純なRESTリクエストに減らす
Zabbixサーバーとのやり取りのすべてのロジックをバックエンドに集中させるため
優先標準インターフェース+ドキュメント

フロントエンドですべてのロジックを積み重ねることは可能ですが、これは悪いことです：

Zabbix-APIは、すべてのクライアントブラウザに対して開かれている必要があります。アクションのセットが制限されている別のリソースを開く方が安全です
SNMPセンサー、telnetセッション、サーバーOSリソースなど、根本的に異なるシステムで機能する一般的なソリューションを作成します。（Zabbixは実装の1つにすぎません）。ブラウザにはこの機能がありません

結果。独自のAPIを備えた「スマート」バックエンドが必要です。

もう少しの技術

Openapi

電話プラットフォームに統合すると、最初の「レーキ」が完成しました。私自身のAPIサーバーが作成されました。彼は働いた。ソフトスイッチの「ステアリング」に成功し、本質的にRESTではないREST要求を受け入れました。リクエストの形式、方法、パラメータに関するドキュメントはありませんでした。

この状況に関心が寄せられましたが、ドキュメントが自動的に生成されるように、何らかの形でAPIを形式化することは可能ですか？ OpenAPIのアプローチが気に入りました。

一番下の行は、最初にすべてのメソッド、フィールド、応答形式などが記述される仕様ファイルを書く必要があるということです。次に、このファイルに基づいて、既製のAPIサーバーを生成できます。言語のリストは印象的です。NodeJSで行います。

仕様ファイルは標準であるため、 Swagger 、 ReDoc 、 OA Viewerなどのツールが既に考案されています。ドキュメントの問題は自動的に解決されます-これは仕様ファイルです。

Docker

すぐに実行可能なコードを書き始めます。スクリプトはNodeJSにあります。どの言語も進化し、バージョンが変化します。異なるバージョンの言語で結果を試してみるといいでしょう。各言語には、「ジャグリング」バージョン用の特別なツールがあります。

私はより根本的に行動します。 Linuxカーネルレベルで非常に簡単な仮想化を提供する優れたLXCテクノロジーがあります。それを使わないのは罪です。他のOSの場合、特殊性があり、開発者はニュアンスを考慮してDocker製品を作成しました。

必要なDockerコンテナに必要な開発環境を構築します。

さあ始めましょう

このプロジェクトはGithubで入手できます。

git clone https://github.com/ars-anosov/zabbix-react.git

zabbix-reactor-node

バックエンドサーバーを「zabbix-reactor-node」と呼びます。仕様ファイルを調べます。ホストフィールドを確認してください。

 less zabbix-react/node-back/api/zabbix-api.yaml

サーバーをマシンにデプロイする場合

 host: 'localhost:8002'

サーバーは、「zabbix-api.yaml」に基づいたswagger エディターを使用して構築されます。構造は次のとおりです。

index.js-起動スクリプト

 var app = require('connect')() var swaggerTools = require('swagger-tools') var http = require('http')

http -WEBサーバー
ミドルウェアswagger-toolsと接続 -要求処理

  // Route validated requests to appropriate controller app.use(middleware.swaggerRouter(options)); // Serve the Swagger documents and Swagger UI app.use(middleware.swaggerUi({ apiDocs: '/spec/swagger.json', swaggerUi: '/spec-ui'

方法

middleware.swaggerRouter-zabbix-react / node-back / controllersディレクトリ内の適切なコントローラーにリクエストを転送するルーター
middleware.swaggerUiはSwaggerUIツールです。これはAPIドキュメントであり、テストRESTリクエストを実行できます。

コントローラー/ -API要求の処理を担当するスクリプト

 Configuration.js Data.js config_host_del.js config_host_get.js config_host_post.js config_host_put.js config_hostgroup_get.js data_hostlink_get.js

これは、Zabbix-APIとのやり取りがロジックで満たされている場所です。

「ノードバック」ディレクトリは、Dockerコンテナにスクロールされます：そこに移動します。

 cd zabbix-react/node-back/

「zabbix-reactor-node」を起動します。環境変数ZX_URL、ZX_USER、ZX_PASSをコンテナーに渡します-独自のZabbixがある場合は、独自に駆動します。例として、私のテストZabbixを使用できます。

 docker run \ --name zabbix-reactor-node \ -v $PWD:/zabbix-reactor-node \ -w /zabbix-reactor-node \ --publish=8002:8002 \ --env="ZX_URL=http://zabbix-server.react.com.ru/api_jsonrpc.php" \ --env="ZX_USER=guest" \ --env="ZX_PASS=" \ -it \ node:8 bash

zabbixの古いバージョンは、異なるURLでリクエストを受け入れることができます。 Zabbixのドキュメントをご覧ください。

次に、コンテナ内のすべてのアクション。

 npm install node index.js $ZX_URL $ZX_USER $ZX_PASS

コンテナから飛び出す：Ctrl + P + Q

可用性の確認SwaggerUI- http：// localhost：8002 / spec-ui /

「トークン」フィールドに「テスト」と入力します。認証トークンがあり、node-back / sub_modules / aaa_handle.jsスクリプトが検証に関与します。

Zabbix設定

Zabbixの特定のホストグループのみにアクセスを許可します。これを行うには、別のユーザーreact_userを作成します。

管理/ユーザーグループ-ユーザーグループ「react_user_group」を追加します
管理/ユーザーグループ/権限-react_userの使用を許可するホストグループを追加します。読み書きを公開します。
管理/ユーザー-ユーザーを追加し、段落1で作成したユーザーグループに含めます
管理/ユーザー/アクセス許可-ユーザータイプセット「Zabbix Admin」

zabbix-react-front

開発環境を構築して、「zabbix-react-front」と呼びましょう。

「web-front」ディレクトリはDockerコンテナにスクロールされます：そこに行きます。

 cd zabbix-react/web-front/

zabbix-react-frontを実行します。

 docker run \ --name zabbix-react-front \ -v $PWD:/web-front \ -w /web-front \ --publish=8003:8003 \ -it \ node:8 bash

次に、コンテナ内のすべてのアクション。

 #   gulp-cli npm install -g gulp-cli #    (, , ) npm install

コンポーネントはweb-front / src / js / componentsディレクトリにあり、独自の依存関係があります。

インストール：

 npm run install-components

プロジェクトをweb-front / buildディレクトリに収集します

 gulp

コンテナから飛び出す：Ctrl + P + Q

コンポーネントの動作を確認します-http：// localhost：8003 /

zabbix-react-component

そのため、コンポーネントを使用する必要がありました。今何が実行されているのか見てみましょう。

zabbix-reactor-node-OpenAPIサーバー、 httpで RESTリクエストを受信するために開きます：// localhost：8002 / ...
zabbix-react-front-Reactコンポーネントを表示するためのlivereload-webサーバー、 httpで描画：// localhost：8003 /

次のファイル構造を使用します。

web-front / src / index.jsx-コンポーネントを含むJSXスクリプト

 import React from 'react'; import ReactDOM from 'react-dom' import { OpenApiSwagger, HostConfig, HostGraph } from './components/zabbix-react-component' window.localStorage.setItem('token', 'test') const specUrl = 'http://localhost:8002/spec/swagger.json' const swg = new OpenApiSwagger(specUrl) swg.connect((client, err) => { if (err) { ReactDOM.render( <div className='std-win'>no spec - <a href={specUrl}>{specUrl}</a> !</div>, document.getElementById('root') ) } else { ReactDOM.render( <div> <HostConfig swgClient={client} /> <HostGraph swgClient={client} /> </div>, document.getElementById('root') ) } })

specUrl-zabbix-reactor-nodeの仕様ファイルへのパス

web-front / src / components / -コンポーネントのあるディレクトリ

web-front / src / components / zabbix-react-component.js-エクスポートされたクラス。 npm zabbix-react-componentパッケージとして利用可能。

 export { OpenApiSwagger } from './OpenApiSwagger.js' export { HostConfig } from './HostConfig.jsx' export { HostGraph } from './HostGraph.jsx'

この場所から、コンポーネントを安全にスカルプトし、機能を向上させることができます。

例として、 NagiosにあるがZabbixにはないツールを添付しました。ネットワーク要素の記述内のソース-ターゲットメタ情報に基づいたネットワークマップの自動構築。

コンポーネントHostGraphを見てください。 Zabbixホストタブの「ホストインベントリ」フィールド「メモ」で使用する情報を保存します。そこで、JSON形式で、「source-target」要素のバンドルを入力します。視覚化には、 d3プロジェクト-Force -Directed Graphを使用しました。

おわりに

これで、開発環境、フロントエンドおよびバックエンドが手に入りました。 JavaScriptの知識とNodeJSの仕様で十分です。

APIは文書化されており、サードパーティのフロントエンド開発者によるテストに利用できます。 APIサーバーは、Zabbixに特に関連付けられていません。これは一般的なソリューションです。任意のシステムへの統合が可能です。

標準のCRUD機能を実行する既製のReactコンポーネントがコンパイルされます。コンポーネントは、統合システムとの対話の複雑さから解放され、マッピングのみが行われます。

Reactコンポーネントを使用してZabbix APIのUIインターフェースを準備する