├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ ├── ci.yml │ └── release.yml ├── .gitignore ├── .prettierrc.js ├── CHANGELOG.md ├── LICENSE ├── README.md ├── example └── api │ └── python │ └── run.py ├── jest.config.js ├── package.json ├── src ├── ConfigEditor.tsx ├── QueryEditor.tsx ├── datasource.ts ├── img │ ├── add-datasource.png │ ├── graph-example.png │ ├── logo.svg │ └── query-string.png ├── module.ts ├── plugin.json └── types.ts ├── tsconfig.json └── yarn.lock /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[BUG] Issue title" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop Information:** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Plugin Version [e.g. 0.1] 30 | - Grafana Version [e.g. 8.1] 31 | 32 | **Additional context** 33 | Add any other context about the problem here. 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Which sides should be considered to develop?** 20 | - [ ] Frontend(React) 21 | - [ ] Backend(Golang) 22 | 23 | **Additional context** 24 | Add any other context or screenshots about the feature request here. 25 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v2 15 | 16 | - name: Setup Node.js environment 17 | uses: actions/setup-node@v2.1.2 18 | with: 19 | node-version: "14.x" 20 | 21 | - name: Get yarn cache directory path 22 | id: yarn-cache-dir-path 23 | run: echo "::set-output name=dir::$(yarn cache dir)" 24 | 25 | - name: Cache yarn cache 26 | uses: actions/cache@v2 27 | id: cache-yarn-cache 28 | with: 29 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 30 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 31 | restore-keys: | 32 | ${{ runner.os }}-yarn- 33 | 34 | - name: Cache node_modules 35 | id: cache-node-modules 36 | uses: actions/cache@v2 37 | with: 38 | path: node_modules 39 | key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }} 40 | restore-keys: | 41 | ${{ runner.os }}-${{ matrix.node-version }}-nodemodules- 42 | 43 | - name: Install dependencies 44 | run: yarn install --frozen-lockfile 45 | 46 | - name: Build and test frontend 47 | run: yarn build 48 | 49 | - name: Check for backend 50 | id: check-for-backend 51 | run: | 52 | if [ -f "Magefile.go" ] 53 | then 54 | echo "::set-output name=has-backend::true" 55 | fi 56 | 57 | - name: Setup Go environment 58 | if: steps.check-for-backend.outputs.has-backend == 'true' 59 | uses: actions/setup-go@v2 60 | with: 61 | go-version: "1.15" 62 | 63 | - name: Test backend 64 | if: steps.check-for-backend.outputs.has-backend == 'true' 65 | uses: magefile/mage-action@v1 66 | with: 67 | version: latest 68 | args: coverage 69 | 70 | - name: Build backend 71 | if: steps.check-for-backend.outputs.has-backend == 'true' 72 | uses: magefile/mage-action@v1 73 | with: 74 | version: latest 75 | args: buildAll 76 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | tags: 6 | - "v*.*.*" # Run workflow on version tags, e.g. v1.0.0. 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/checkout@v2 14 | 15 | - name: Setup Node.js environment 16 | uses: actions/setup-node@v2.1.2 17 | with: 18 | node-version: "14.x" 19 | 20 | - name: Setup Go environment 21 | uses: actions/setup-go@v2 22 | with: 23 | go-version: "1.15" 24 | 25 | - name: Get yarn cache directory path 26 | id: yarn-cache-dir-path 27 | run: echo "::set-output name=dir::$(yarn cache dir)" 28 | 29 | - name: Cache yarn cache 30 | uses: actions/cache@v2 31 | id: cache-yarn-cache 32 | with: 33 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 34 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 35 | restore-keys: | 36 | ${{ runner.os }}-yarn- 37 | 38 | - name: Cache node_modules 39 | id: cache-node-modules 40 | uses: actions/cache@v2 41 | with: 42 | path: node_modules 43 | key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }} 44 | restore-keys: | 45 | ${{ runner.os }}-${{ matrix.node-version }}-nodemodules- 46 | 47 | - name: Install dependencies 48 | run: yarn install --frozen-lockfile; 49 | if: | 50 | steps.cache-yarn-cache.outputs.cache-hit != 'true' || 51 | steps.cache-node-modules.outputs.cache-hit != 'true' 52 | 53 | - name: Build and test frontend 54 | run: yarn build 55 | 56 | - name: Check for backend 57 | id: check-for-backend 58 | run: | 59 | if [ -f "Magefile.go" ] 60 | then 61 | echo "::set-output name=has-backend::true" 62 | fi 63 | 64 | - name: Test backend 65 | if: steps.check-for-backend.outputs.has-backend == 'true' 66 | uses: magefile/mage-action@v1 67 | with: 68 | version: latest 69 | args: coverage 70 | 71 | - name: Build backend 72 | if: steps.check-for-backend.outputs.has-backend == 'true' 73 | uses: magefile/mage-action@v1 74 | with: 75 | version: latest 76 | args: buildAll 77 | 78 | - name: Sign plugin 79 | run: yarn sign 80 | env: 81 | GRAFANA_API_KEY: ${{ secrets.GRAFANA_API_KEY }} # Requires a Grafana API key from Grafana.com. 82 | 83 | - name: Get plugin metadata 84 | id: metadata 85 | run: | 86 | sudo apt-get install jq 87 | 88 | export GRAFANA_PLUGIN_ID=$(cat dist/plugin.json | jq -r .id) 89 | export GRAFANA_PLUGIN_VERSION=$(cat dist/plugin.json | jq -r .info.version) 90 | export GRAFANA_PLUGIN_TYPE=$(cat dist/plugin.json | jq -r .type) 91 | export GRAFANA_PLUGIN_ARTIFACT=${GRAFANA_PLUGIN_ID}-${GRAFANA_PLUGIN_VERSION}.zip 92 | export GRAFANA_PLUGIN_ARTIFACT_CHECKSUM=${GRAFANA_PLUGIN_ARTIFACT}.md5 93 | 94 | echo "::set-output name=plugin-id::${GRAFANA_PLUGIN_ID}" 95 | echo "::set-output name=plugin-version::${GRAFANA_PLUGIN_VERSION}" 96 | echo "::set-output name=plugin-type::${GRAFANA_PLUGIN_TYPE}" 97 | echo "::set-output name=archive::${GRAFANA_PLUGIN_ARTIFACT}" 98 | echo "::set-output name=archive-checksum::${GRAFANA_PLUGIN_ARTIFACT_CHECKSUM}" 99 | 100 | echo ::set-output name=github-tag::${GITHUB_REF#refs/*/} 101 | 102 | - name: Read changelog 103 | id: changelog 104 | run: | 105 | awk '/^## / {s++} s == 1 {print}' CHANGELOG.md > release_notes.md 106 | echo "::set-output name=path::release_notes.md" 107 | 108 | - name: Check package version 109 | run: if [ "v${{ steps.metadata.outputs.plugin-version }}" != "${{ steps.metadata.outputs.github-tag }}" ]; then printf "\033[0;31mPlugin version doesn't match tag name\033[0m\n"; exit 1; fi 110 | 111 | - name: Package plugin 112 | id: package-plugin 113 | run: | 114 | mv dist ${{ steps.metadata.outputs.plugin-id }} 115 | zip ${{ steps.metadata.outputs.archive }} ${{ steps.metadata.outputs.plugin-id }} -r 116 | md5sum ${{ steps.metadata.outputs.archive }} > ${{ steps.metadata.outputs.archive-checksum }} 117 | echo "::set-output name=checksum::$(cat ./${{ steps.metadata.outputs.archive-checksum }} | cut -d' ' -f1)" 118 | 119 | - name: Lint plugin 120 | run: | 121 | git clone https://github.com/grafana/plugin-validator 122 | pushd ./plugin-validator/pkg/cmd/plugincheck 123 | go install 124 | popd 125 | plugincheck ${{ steps.metadata.outputs.archive }} 126 | 127 | - name: Create release 128 | id: create_release 129 | uses: actions/create-release@v1 130 | env: 131 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 132 | with: 133 | tag_name: ${{ github.ref }} 134 | release_name: Release ${{ github.ref }} 135 | body_path: ${{ steps.changelog.outputs.path }} 136 | draft: true 137 | 138 | - name: Add plugin to release 139 | id: upload-plugin-asset 140 | uses: actions/upload-release-asset@v1 141 | env: 142 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 143 | with: 144 | upload_url: ${{ steps.create_release.outputs.upload_url }} 145 | asset_path: ./${{ steps.metadata.outputs.archive }} 146 | asset_name: ${{ steps.metadata.outputs.archive }} 147 | asset_content_type: application/zip 148 | 149 | - name: Add checksum to release 150 | id: upload-checksum-asset 151 | uses: actions/upload-release-asset@v1 152 | env: 153 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 154 | with: 155 | upload_url: ${{ steps.create_release.outputs.upload_url }} 156 | asset_path: ./${{ steps.metadata.outputs.archive-checksum }} 157 | asset_name: ${{ steps.metadata.outputs.archive-checksum }} 158 | asset_content_type: text/plain 159 | 160 | - name: Publish to Grafana.com 161 | run: | 162 | echo A draft release has been created for your plugin. Please review and publish it. Then submit your plugin to grafana.com/plugins by opening a PR to https://github.com/grafana/grafana-plugin-repository with the following entry: 163 | echo 164 | echo '{ "id": "${{ steps.metadata.outputs.plugin-id }}", "type": "${{ steps.metadata.outputs.plugin-type }}", "url": "https://github.com/${{ github.repository }}", "versions": [ { "version": "${{ steps.metadata.outputs.plugin-version }}", "commit": "${{ github.sha }}", "url": "https://github.com/${{ github.repository }}", "download": { "any": { "url": "https://github.com/${{ github.repository }}/releases/download/v${{ steps.metadata.outputs.plugin-version }}/${{ steps.metadata.outputs.archive }}", "md5": "${{ steps.package-plugin.outputs.checksum }}" } } } ] }' | jq . 165 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | node_modules/ 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # Compiled binary addons (https://nodejs.org/api/addons.html) 23 | dist/ 24 | artifacts/ 25 | work/ 26 | ci/ 27 | e2e-results/ 28 | 29 | # Editor 30 | .idea 31 | 32 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ...require("./node_modules/@grafana/toolkit/src/config/prettier.plugin.config.json"), 3 | }; 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 1.0.0 (Unreleased) 4 | 5 | Initial release. 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nodegraph API Plugin for Grafana 2 | 3 | [![License](https://img.shields.io/github/license/hoptical/nodegraph-api-plugin)](LICENSE) 4 | [![CI](https://github.com/hoptical/nodegraph-api-plugin/actions/workflows/ci.yml/badge.svg)](https://github.com/hoptical/nodegraph-api-plugin/actions/workflows/ci.yml) 5 | [![Release](https://github.com/hoptical/nodegraph-api-plugin/actions/workflows/release.yml/badge.svg)](https://github.com/hoptical/nodegraph-api-plugin/actions/workflows/release.yml) 6 | 7 | This plugin provides a data source to connect a REST API to [nodegraph](https://grafana.com/docs/grafana/latest/visualizations/node-graph/) panel of Grafana. It is [signed and published by Grafana](https://grafana.com/grafana/plugins/hamedkarbasi93-nodegraphapi-datasource/). 8 | 9 | ![Graph Example](https://raw.githubusercontent.com/hoptical/nodegraph-api-plugin/f447b74ecefd827b388e791a34792730e9a9a11d/src/img/graph-example.png) 10 | 11 | ## Requirements 12 | - **Grafana 7.5+** 13 | 14 | ## Getting started 15 | 16 | ### Installation via grafana-cli tool 17 | 18 | Use the grafana-cli tool to install Node Graph API from the commandline: 19 | 20 | ```bash 21 | grafana-cli plugins install hamedkarbasi93-nodegraphapi-datasource 22 | ``` 23 | 24 | The plugin will be installed into your grafana plugins directory; the default is `/var/lib/grafana/plugins`. [More information on the cli tool](https://grafana.com/docs/grafana/latest/administration/cli/#plugins-commands). 25 | 26 | ### Installation via zip file 27 | 28 | Alternatively, you can manually download the [latest](https://github.com/hoptical/nodegraph-api-plugin/releases/latest) release .zip file and unpack it into your grafana plugins directory; the default is `/var/lib/grafana/plugins`. 29 | 30 | ### Plugin Configuration 31 | 32 | You can now add the data source. Just enter the URL of your API app and push "Save & Test." You will get an error in case of connection failure. 33 | 34 | ![Add Datasource](https://raw.githubusercontent.com/hoptical/nodegraph-api-plugin/f447b74ecefd827b388e791a34792730e9a9a11d/src/img/add-datasource.png) 35 | 36 | In the Grafana dashboard, pick the Nodegraph panel and visualize the graph. 37 | 38 | > Note on Application Access: 39 | > - Versions 0.x.x work in *direct* mode. i.e., The browser must have access to the API application. 40 | > - Versions 1.x.x+ work in *proxy* mode. i.e., The Grafana server should have access to the API application. 41 | 42 | ## API Configuration 43 | 44 | The REST API application should handle three requests: *fields*, *data*, and *health*. They are described below. 45 | 46 | ### Fetch Graph Fields 47 | 48 | This route returns the nodes and edges fields defined in the [parameter tables](https://grafana.com/docs/grafana/latest/visualizations/node-graph/#data-api). 49 | It would help the plugin to create desired parameters for the graph. 50 | For nodes, `id` and for edges, `id`, `source`, and `target` fields are required. Other fields are optional. 51 | 52 | endpoint: `/api/graph/fields` 53 | 54 | method: `GET` 55 | 56 | content type: `application/json` 57 | 58 | content format example: 59 | 60 | ```json 61 | { 62 | "edges_fields": [ 63 | { 64 | "field_name": "id", 65 | "type": "string" 66 | }, 67 | { 68 | "field_name": "source", 69 | "type": "string" 70 | }, 71 | { 72 | "field_name": "target", 73 | "type": "string" 74 | }, 75 | { 76 | "field_name": "mainStat", 77 | "type": "number" 78 | } 79 | ], 80 | "nodes_fields": [ 81 | { 82 | "field_name": "id", 83 | "type": "string" 84 | }, 85 | { 86 | "field_name": "title", 87 | "type": "string" 88 | }, 89 | { 90 | "field_name": "mainStat", 91 | "type": "string" 92 | }, 93 | { 94 | "field_name": "secondaryStat", 95 | "type": "number" 96 | }, 97 | { 98 | "color": "red", 99 | "field_name": "arc__failed", 100 | "type": "number" 101 | }, 102 | { 103 | "color": "green", 104 | "field_name": "arc__passed", 105 | "type": "number" 106 | }, 107 | { 108 | "displayName": "Role", 109 | "field_name": "detail__role", 110 | "type": "string" 111 | } 112 | ] 113 | } 114 | ``` 115 | 116 | ### Fetch Graph Data 117 | 118 | This route returns the graph data, which is intended to visualize. 119 | 120 | endpoint: `/api/graph/data` 121 | 122 | method: `GET` 123 | 124 | content type: `application/json` 125 | 126 | Data Format example: 127 | 128 | ```json 129 | { 130 | "edges": [ 131 | { 132 | "id": "1", 133 | "mainStat": "53/s", 134 | "source": "1", 135 | "target": "2" 136 | } 137 | ], 138 | "nodes": [ 139 | { 140 | "arc__failed": 0.7, 141 | "arc__passed": 0.3, 142 | "detail__zone": "load", 143 | "id": "1", 144 | "subTitle": "instance:#2", 145 | "title": "Service1" 146 | }, 147 | { 148 | "arc__failed": 0.5, 149 | "arc__passed": 0.5, 150 | "detail__zone": "transform", 151 | "id": "2", 152 | "subTitle": "instance:#3", 153 | "title": "Service2" 154 | } 155 | ] 156 | } 157 | ``` 158 | 159 | For more detail of the variables, please visit [here](https://grafana.com/docs/grafana/latest/visualizations/node-graph/#data-api). 160 | 161 | ### Health 162 | 163 | This route is for testing the health of the API, which is used by the *Save & Test* action while adding the plugin.[(Part 2 of the Getting Started Section)](#getting-started). 164 | Currently, it only needs to return the `200` status code in case of a successful connection. 165 | 166 | endpoint: `/api/health` 167 | 168 | method: `GET` 169 | 170 | success status code: `200` 171 | 172 | ## API Example 173 | 174 | In the `example` folder, you can find a simple API application in Python Flask. 175 | 176 | ### Requirements: 177 | 178 | - flask 179 | 180 | ### Run 181 | 182 | ```bash 183 | python run.py 184 | ``` 185 | The application will be started on `http://localhost:5000` 186 | 187 | ## Query Configuration 188 | You can pass a query string to apply for the data endpoint of the graph via *Query String*. Like any other query, you can utilize variables too: 189 | 190 | ![Add Datasource](https://raw.githubusercontent.com/hoptical/nodegraph-api-plugin/22a1933b1e012602c817817f4583697e25028382/src/img/query-string.png) 191 | 192 | With variable `$service` defined as `processors`, above query will produce this endpoint: 193 | `/api/graph/data?query=text1&service=processors` 194 | ## Compiling the data source by yourself 195 | 196 | 1. Install dependencies 197 | 198 | ```bash 199 | yarn install 200 | ``` 201 | 202 | 2. Build plugin in development mode or run in watch mode 203 | 204 | ```bash 205 | yarn dev 206 | ``` 207 | 208 | or 209 | 210 | ```bash 211 | yarn watch 212 | ``` 213 | 214 | 3. Build plugin in production mode 215 | 216 | ```bash 217 | yarn build 218 | ``` 219 | 220 | ## Roadmap 221 | 222 | - [x] Utilize BackenSrv in proxy mode. This will prevent the client browser necessity to connect to the API server. 223 | - [ ] Write unit tests. 224 | 225 | ## Learn more 226 | 227 | - [Build a data source plugin tutorial](https://grafana.com/tutorials/build-a-data-source-plugin) 228 | - [Grafana documentation](https://grafana.com/docs/) 229 | - [Grafana Tutorials](https://grafana.com/tutorials/) - Grafana Tutorials are step-by-step guides that help you make the most of Grafana 230 | - [Grafana UI Library](https://developers.grafana.com/ui) - UI components to help you build interfaces using Grafana Design System 231 | 232 | ## Contributing 233 | 234 | Thank you for considering contributing! If you find an issue or have a better way to do something, feel free to open an issue or a PR. 235 | 236 | ## License 237 | 238 | This repository is open-sourced software licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). 239 | -------------------------------------------------------------------------------- /example/api/python/run.py: -------------------------------------------------------------------------------- 1 | from flask import Flask, jsonify 2 | 3 | app = Flask(__name__) 4 | 5 | 6 | @app.route('/api/graph/fields') 7 | def fetch_graph_fields(): 8 | nodes_fields = [{"field_name": "id", "type": "string"}, 9 | {"field_name": "title", "type": "string", 10 | }, 11 | {"field_name": "subTitle", "type": "string"}, 12 | {"field_name": "mainStat", "type": "string"}, 13 | {"field_name": "secondaryStat", "type": "number"}, 14 | {"field_name": "arc__failed", 15 | "type": "number", "color": "red", "displayName": "Failed"}, 16 | {"field_name": "arc__passed", 17 | "type": "number", "color": "green", "displayName": "Passed"}, 18 | {"field_name": "detail__role", 19 | "type": "string", "displayName": "Role"}] 20 | edges_fields = [ 21 | {"field_name": "id", "type": "string"}, 22 | {"field_name": "source", "type": "string"}, 23 | {"field_name": "target", "type": "string"}, 24 | {"field_name": "mainStat", "type": "number"}, 25 | ] 26 | result = {"nodes_fields": nodes_fields, 27 | "edges_fields": edges_fields} 28 | return jsonify(result) 29 | 30 | 31 | @app.route('/api/graph/data') 32 | def fetch_graph_data(): 33 | 34 | nodes = [{"id": "1", "title": "Service1", "subTitle": "instance:#2", "detail__role": "load", 35 | "arc__failed": 0.7, "arc__passed": 0.3, "mainStat": "qaz"}, 36 | {"id": "2", "title": "Service2", "subTitle": "instance:#2", "detail__role": "transform", 37 | "arc__failed": 0.5, "arc__passed": 0.5, "mainStat": "qaz"}, 38 | {"id": "3", "title": "Service3", "subTitle": "instance:#3", "detail__role": "extract", 39 | "arc__failed": 0.3, "arc__passed": 0.7, "mainStat": "qaz"}, 40 | {"id": "4", "title": "Service3", "subTitle": "instance:#1", "detail__role": "transform", 41 | "arc__failed": 0.5, "arc__passed": 0.5, "mainStat": "qaz"}, 42 | {"id": "5", "title": "Service4", "subTitle": "instance:#5", "detail__role": "transform", 43 | "arc__failed": 0.5, "arc__passed": 0.5, "mainStat": "qaz"}] 44 | edges = [{"id": "1", "source": "1", "target": "2", "mainStat": 53}, 45 | {"id": "2", "source": "2", "target": "3", "mainStat": 53}, 46 | {"id": "2", "source": "1", "target": "4", "mainStat": 5}, 47 | {"id": "3", "source": "3", "target": "5", "mainStat": 70}, 48 | {"id": "4", "source": "2", "target": "5", "mainStat": 100}] 49 | result = {"nodes": nodes, "edges": edges} 50 | return jsonify(result) 51 | 52 | 53 | @app.route('/api/health') 54 | def check_health(): 55 | return "API is working well!" 56 | 57 | 58 | app.run(host='0.0.0.0', port=5000) 59 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | // This file is needed because it is used by vscode and other tools that 2 | // call `jest` directly. However, unless you are doing anything special 3 | // do not edit this file 4 | 5 | const standard = require('@grafana/toolkit/src/config/jest.plugin.config'); 6 | 7 | // This process will use the same config that `yarn test` is using 8 | module.exports = standard.jestConfig(); 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hamedkarbasi93-nodegraphapi-datasource", 3 | "version": "1.0.1", 4 | "description": "", 5 | "scripts": { 6 | "build": "grafana-toolkit plugin:build", 7 | "test": "grafana-toolkit plugin:test", 8 | "dev": "grafana-toolkit plugin:dev", 9 | "watch": "grafana-toolkit plugin:dev --watch", 10 | "sign": "grafana-toolkit plugin:sign", 11 | "start": "yarn watch" 12 | }, 13 | "author": "Hamed Karbasi", 14 | "license": "Apache-2.0", 15 | "devDependencies": { 16 | "@grafana/data": "latest", 17 | "@grafana/toolkit": "latest", 18 | "@grafana/ui": "latest", 19 | "@types/lodash": "latest", 20 | "@testing-library/jest-dom": "5.4.0", 21 | "@testing-library/react": "^10.0.2" 22 | }, 23 | "engines": { 24 | "node": ">=14" 25 | }, 26 | "dependencies": { 27 | "@grafana/runtime": "^8.2.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/ConfigEditor.tsx: -------------------------------------------------------------------------------- 1 | import React, { ChangeEvent, PureComponent } from 'react'; 2 | import { LegacyForms } from '@grafana/ui'; 3 | import { DataSourcePluginOptionsEditorProps } from '@grafana/data'; 4 | import { MyDataSourceOptions } from './types'; 5 | 6 | const { FormField } = LegacyForms; 7 | 8 | interface Props extends DataSourcePluginOptionsEditorProps {} 9 | 10 | interface State {} 11 | 12 | export class ConfigEditor extends PureComponent { 13 | onURLChange = (event: ChangeEvent) => { 14 | const { onOptionsChange, options } = this.props; 15 | const jsonData = { 16 | ...options.jsonData, 17 | url: event.target.value, 18 | }; 19 | onOptionsChange({ ...options, jsonData }); 20 | }; 21 | 22 | render() { 23 | const { options } = this.props; 24 | const { jsonData } = options; 25 | //const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData; 26 | 27 | return ( 28 |
29 |
30 | 36 |
37 |
38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/QueryEditor.tsx: -------------------------------------------------------------------------------- 1 | import defaults from 'lodash/defaults'; 2 | 3 | import React, { ChangeEvent, PureComponent } from 'react'; 4 | import { LegacyForms } from '@grafana/ui'; 5 | import { QueryEditorProps } from '@grafana/data'; 6 | import { DataSource } from './datasource'; 7 | import { defaultQuery, MyDataSourceOptions, MyQuery } from './types'; 8 | 9 | const { FormField } = LegacyForms; 10 | 11 | type Props = QueryEditorProps; 12 | 13 | export class QueryEditor extends PureComponent { 14 | onQueryTextChange = (event: ChangeEvent) => { 15 | const { onChange, query } = this.props; 16 | onChange({ ...query, queryText: event.target.value }); 17 | }; 18 | 19 | render() { 20 | const query = defaults(this.props.query, defaultQuery); 21 | const { queryText } = query; 22 | return ( 23 |
24 | 32 |
33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/datasource.ts: -------------------------------------------------------------------------------- 1 | import defaults from 'lodash/defaults'; 2 | import _ from 'lodash'; 3 | import { 4 | DataQueryRequest, 5 | DataQueryResponse, 6 | DataSourceApi, 7 | DataSourceInstanceSettings, 8 | MutableDataFrame, 9 | FieldType, 10 | FieldColorModeId, 11 | } from '@grafana/data'; 12 | 13 | import { getBackendSrv } from '@grafana/runtime'; 14 | 15 | import { getTemplateSrv } from '@grafana/runtime'; 16 | 17 | import { MyQuery, MyDataSourceOptions, defaultQuery } from './types'; 18 | 19 | // proxy route 20 | const routePath = '/nodegraphds'; 21 | 22 | export class DataSource extends DataSourceApi { 23 | url: string; 24 | constructor(instanceSettings: DataSourceInstanceSettings) { 25 | super(instanceSettings); 26 | 27 | // proxy url 28 | this.url = instanceSettings.url || ''; 29 | } 30 | 31 | async query(options: DataQueryRequest): Promise { 32 | const promises = options.targets.map(async target => { 33 | const query = defaults(target, defaultQuery); 34 | const dataQuery = getTemplateSrv().replace(query.queryText, options.scopedVars); 35 | // fetch graph fields from api 36 | const responseGraphFields = await this.doRequest('/api/graph/fields', `${dataQuery}`); 37 | // fetch graph data from api 38 | const responseGraphData = await this.doRequest('/api/graph/data', `${dataQuery}`); 39 | // extract fields of the nodes and edges in the graph fields object 40 | const nodeFieldsResponse = responseGraphFields.data.nodes_fields; 41 | const edgeFieldsResponse = responseGraphFields.data.edges_fields; 42 | // Define an interface for types of the FrameField 43 | interface FrameFieldType { 44 | name: string; 45 | type: any; 46 | config: Record; 47 | } 48 | // This function gets the fields of the api and transforms them to what grafana dataframe prefers 49 | function fieldAssignator(FieldsResponse: any): FrameFieldType[] { 50 | var outputFields: FrameFieldType[] = []; 51 | FieldsResponse.forEach((field: any) => { 52 | // fieldType can be either number of string 53 | var fieldType = field['type'] === 'number' ? FieldType.number : FieldType.string; 54 | // add 'name' and 'type' items to the output object 55 | var outputField: FrameFieldType = { name: field['field_name'], type: fieldType, config: {} }; 56 | // add color for 'arc__*' items(only apperas for the nodes) 57 | if ('color' in field) { 58 | outputField.config.color = { fixedColor: field['color'], mode: FieldColorModeId.Fixed }; 59 | } 60 | // add disPlayName for 'detail__*' items 61 | if ('displayName' in field) { 62 | outputField.config.displayName = field['displayName']; 63 | } 64 | outputFields.push(outputField); 65 | }); 66 | return outputFields; 67 | } 68 | // Define Frames Meta Data 69 | const frameMetaData: any = { preferredVisualisationType: 'nodeGraph' }; 70 | // Extract node fields 71 | const nodeFields: FrameFieldType[] = fieldAssignator(nodeFieldsResponse); 72 | // Create nodes dataframe 73 | const nodeFrame = new MutableDataFrame({ 74 | name: 'Nodes', 75 | refId: query.refId, 76 | fields: nodeFields, 77 | meta: frameMetaData, 78 | }); 79 | // Extract edge fields 80 | const edgeFields: FrameFieldType[] = fieldAssignator(edgeFieldsResponse); 81 | // Create Edges dataframe 82 | const edgeFrame = new MutableDataFrame({ 83 | name: 'Edges', 84 | refId: query.refId, 85 | fields: edgeFields, 86 | meta: frameMetaData, 87 | }); 88 | // Extract graph data of the related api response 89 | const nodes = responseGraphData.data.nodes; 90 | const edges = responseGraphData.data.edges; 91 | // add nodes to the node dataframe 92 | nodes.forEach((node: any) => { 93 | nodeFrame.add(node); 94 | }); 95 | // add edges to the edges dataframe 96 | edges.forEach((edge: any) => { 97 | edgeFrame.add(edge); 98 | }); 99 | return [nodeFrame, edgeFrame]; 100 | }); 101 | 102 | return Promise.all(promises).then(data => ({ data: data[0] })); 103 | } 104 | async doRequest(endpoint: string, params?: string) { 105 | // Do the request on proxy; the server will replace url + routePath with the url 106 | // defined in plugin.json 107 | const result = getBackendSrv().datasourceRequest({ 108 | method: 'GET', 109 | url: `${this.url}${routePath}${endpoint}${params?.length ? `?${params}` : ''}`, 110 | }); 111 | return result; 112 | } 113 | 114 | /** 115 | * Checks whether we can connect to the API. 116 | */ 117 | async testDatasource() { 118 | const defaultErrorMessage = 'Cannot connect to API'; 119 | try { 120 | const response = await this.doRequest('/api/health'); 121 | if (response.status === 200) { 122 | return { 123 | status: 'success', 124 | message: 'Success', 125 | }; 126 | } else { 127 | return { 128 | status: 'error', 129 | message: response.statusText ? response.statusText : defaultErrorMessage, 130 | }; 131 | } 132 | } catch (err) { 133 | if (_.isString(err)) { 134 | return { 135 | status: 'error', 136 | message: err, 137 | }; 138 | } else { 139 | let message = ''; 140 | message += err.statusText ? err.statusText : defaultErrorMessage; 141 | if (err.data && err.data.error && err.data.error.code) { 142 | message += ': ' + err.data.error.code + '. ' + err.data.error.message; 143 | } 144 | 145 | return { 146 | status: 'error', 147 | message, 148 | }; 149 | } 150 | } 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /src/img/add-datasource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoptical/nodegraph-api-plugin/eaf0cc88c375024c67912afa5b6986db2d301c2d/src/img/add-datasource.png -------------------------------------------------------------------------------- /src/img/graph-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoptical/nodegraph-api-plugin/eaf0cc88c375024c67912afa5b6986db2d301c2d/src/img/graph-example.png -------------------------------------------------------------------------------- /src/img/query-string.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoptical/nodegraph-api-plugin/eaf0cc88c375024c67912afa5b6986db2d301c2d/src/img/query-string.png -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { DataSourcePlugin } from '@grafana/data'; 2 | import { DataSource } from './datasource'; 3 | import { ConfigEditor } from './ConfigEditor'; 4 | import { QueryEditor } from './QueryEditor'; 5 | import { MyQuery, MyDataSourceOptions } from './types'; 6 | 7 | export const plugin = new DataSourcePlugin(DataSource) 8 | .setConfigEditor(ConfigEditor) 9 | .setQueryEditor(QueryEditor); 10 | -------------------------------------------------------------------------------- /src/plugin.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json", 3 | "routes": [ 4 | { 5 | "path": "nodegraphds", 6 | "url": "{{ .JsonData.url }}" 7 | } 8 | ], 9 | "type": "datasource", 10 | "name": "Node Graph API", 11 | "id": "hamedkarbasi93-nodegraphapi-datasource", 12 | "metrics": true, 13 | "info": { 14 | "description": "A datasource that provides data for nodegraph panel via api", 15 | "author": { 16 | "name": "Hamed Karbasi", 17 | "url": "https://grafana.com/orgs/hamedkarbasi93" 18 | }, 19 | "keywords": [ 20 | "nodegraph", 21 | "datasource", 22 | "api" 23 | ], 24 | "logos": { 25 | "small": "img/logo.svg", 26 | "large": "img/logo.svg" 27 | }, 28 | "links": [ 29 | { 30 | "name": "Website", 31 | "url": "https://github.com/hoptical/nodegraph-api-plugin" 32 | }, 33 | { 34 | "name": "License", 35 | "url": "https://github.com/hoptical/nodegraph-api-plugin/blob/master/LICENSE" 36 | } 37 | ], 38 | "screenshots": [ 39 | { 40 | "name": "Graph Example", 41 | "path": "img/graph-example.png" 42 | }, 43 | { 44 | "name": "Add Datasource", 45 | "path": "img/add-datasource.png" 46 | }, 47 | { 48 | "name": "Query String", 49 | "path": "img/query-string.png" 50 | } 51 | ], 52 | "version": "1.0.1", 53 | "updated": "%TODAY%" 54 | }, 55 | "dependencies": { 56 | "grafanaDependency": ">=7.5.0", 57 | "plugins": [] 58 | } 59 | } -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import { DataQuery, DataSourceJsonData } from '@grafana/data'; 2 | 3 | export interface MyQuery extends DataQuery { 4 | queryText?: string; 5 | } 6 | 7 | export const defaultQuery: Partial = {}; 8 | 9 | /** 10 | * These are options configured for each DataSource instance 11 | */ 12 | export interface MyDataSourceOptions extends DataSourceJsonData { 13 | url: string; 14 | } 15 | 16 | /** 17 | * Value that is used in the backend, but never sent over HTTP to the frontend 18 | */ 19 | export interface MySecureJsonData {} 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json", 3 | "include": ["src", "types"], 4 | "compilerOptions": { 5 | "rootDir": "./src", 6 | "baseUrl": "./src", 7 | "typeRoots": ["./node_modules/@types"] 8 | } 9 | } 10 | --------------------------------------------------------------------------------