├── .eslintrc.js ├── .github └── workflows │ ├── ci.yml │ └── release.yml ├── .gitignore ├── .prettierrc.js ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package.json ├── src ├── ExampleRootPage.tsx ├── README.md ├── config │ ├── ExamplePage1.tsx │ └── ExamplePage2.tsx ├── dashboards │ ├── stats.json │ └── streaming.json ├── img │ └── logo.svg ├── legacy │ └── config.ts ├── module.ts ├── pages │ ├── A.tsx │ ├── B.tsx │ ├── C.tsx │ └── index.ts ├── plugin.json ├── types.ts └── utils │ ├── consts.ts │ └── hooks.ts ├── tsconfig.json └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@grafana/eslint-config', 'plugin:react-hooks/recommended'], 3 | rules: { 4 | 'react/prop-types': 'off', 5 | 'react-hooks/exhaustive-deps': 'error', 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 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/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 | -------------------------------------------------------------------------------- /.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 | 2 | ## ⚠️ Deprecated! 3 | 4 | **This repository is deprecated.**
5 | A more up-to-date version is available here: https://github.com/grafana/grafana-plugin-examples/tree/master/examples/app-basic 6 | 7 | --- 8 | 9 | # Grafana App Plugin Template 10 | 11 | [![Build](https://github.com/grafana/grafana-starter-app/workflows/CI/badge.svg)](https://github.com/grafana/grafana-starter-app/actions?query=workflow%3A%22CI%22) 12 | 13 | This template is a starting point for building Grafana App Plugins in Grafana 7.0+ 14 | 15 | ## Getting started 16 | 17 | 1. Install dependencies 18 | 19 | ```bash 20 | yarn install 21 | ``` 22 | 23 | 2. Build plugin in development mode or run in watch mode 24 | 25 | ```bash 26 | yarn dev 27 | ``` 28 | 29 | or 30 | 31 | ```bash 32 | yarn watch 33 | ``` 34 | 35 | 3. Build plugin in production mode 36 | 37 | ```bash 38 | yarn build 39 | ``` 40 | 41 | ## Learn more 42 | 43 | - [Build a app plugin tutorial](https://grafana.com/tutorials/build-a-app-plugin) 44 | - [Grafana documentation](https://grafana.com/docs/) 45 | - [Grafana Tutorials](https://grafana.com/tutorials/) - Grafana Tutorials are step-by-step guides that help you make the most of Grafana 46 | - [Grafana UI Library](https://developers.grafana.com/ui) - UI components to help you build interfaces using Grafana Design System 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-app", 3 | "version": "1.0.0", 4 | "description": "Grafana App Plugin Template", 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": "Grafana Labs", 14 | "license": "Apache-2.0", 15 | "devDependencies": { 16 | "@grafana/toolkit": "latest" 17 | }, 18 | "engines": { 19 | "node": ">=14" 20 | }, 21 | "dependencies": { 22 | "@grafana/data": "^8.4.2", 23 | "@grafana/runtime": "^8.4.1", 24 | "@grafana/ui": "^8.4.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/ExampleRootPage.tsx: -------------------------------------------------------------------------------- 1 | import { AppRootProps } from '@grafana/data'; 2 | import { pages } from 'pages'; 3 | import React, { useEffect, useMemo } from 'react'; 4 | import { useNavModel } from 'utils/hooks'; 5 | 6 | export const ExampleRootPage = React.memo(function ExampleRootPage(props: AppRootProps) { 7 | const { 8 | path, 9 | onNavChanged, 10 | query: { tab }, 11 | meta, 12 | } = props; 13 | // Required to support grafana instances that use a custom `root_url`. 14 | const pathWithoutLeadingSlash = path.replace(/^\//, ''); 15 | 16 | // Update the navigation when the tab or path changes 17 | const navModel = useNavModel( 18 | useMemo(() => ({ tab, pages, path: pathWithoutLeadingSlash, meta }), [meta, pathWithoutLeadingSlash, tab]) 19 | ); 20 | useEffect(() => { 21 | onNavChanged(navModel); 22 | }, [navModel, onNavChanged]); 23 | 24 | const Page = pages.find(({ id }) => id === tab)?.component || pages[0].component; 25 | return ; 26 | }); 27 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | # Example App - Native Plugin 2 | 3 | This is an example app. It has no real use other than making sure external apps are supported. 4 | 5 | -------------------------------------------------------------------------------- /src/config/ExamplePage1.tsx: -------------------------------------------------------------------------------- 1 | // Libraries 2 | import React, { PureComponent } from 'react'; 3 | 4 | // Types 5 | import { PluginConfigPageProps, AppPluginMeta } from '@grafana/data'; 6 | import { ExampleAppSettings } from 'types'; 7 | 8 | interface Props extends PluginConfigPageProps> {} 9 | 10 | export class ExamplePage1 extends PureComponent { 11 | constructor(props: Props) { 12 | super(props); 13 | } 14 | 15 | render() { 16 | const { query } = this.props; 17 | 18 | return ( 19 |
20 | 11111111111111111111111111111111 21 | 
{JSON.stringify(query)}
22 | 11111111111111111111111111111111 23 |
24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/config/ExamplePage2.tsx: -------------------------------------------------------------------------------- 1 | // Libraries 2 | import React, { PureComponent } from 'react'; 3 | 4 | // Types 5 | import { PluginConfigPageProps, AppPluginMeta } from '@grafana/data'; 6 | import { ExampleAppSettings } from 'types'; 7 | 8 | interface Props extends PluginConfigPageProps> {} 9 | 10 | export class ExamplePage2 extends PureComponent { 11 | constructor(props: Props) { 12 | super(props); 13 | } 14 | 15 | render() { 16 | const { query } = this.props; 17 | 18 | return ( 19 |
20 | 22222222222222222222222222222222 21 | 
{JSON.stringify(query)}
22 | 22222222222222222222222222222222 23 |
24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/dashboards/stats.json: -------------------------------------------------------------------------------- 1 | { 2 | "__inputs": [], 3 | "__requires": [ 4 | { 5 | "type": "grafana", 6 | "id": "grafana", 7 | "name": "Grafana", 8 | "version": "6.2.0-pre" 9 | }, 10 | { 11 | "type": "panel", 12 | "id": "singlestat2", 13 | "name": "Singlestat (react)", 14 | "version": "" 15 | } 16 | ], 17 | "annotations": { 18 | "list": [ 19 | { 20 | "builtIn": 1, 21 | "datasource": "-- Grafana --", 22 | "enable": true, 23 | "hide": true, 24 | "iconColor": "rgba(0, 211, 255, 1)", 25 | "name": "Annotations & Alerts", 26 | "type": "dashboard" 27 | } 28 | ] 29 | }, 30 | "editable": true, 31 | "gnetId": null, 32 | "graphTooltip": 0, 33 | "id": null, 34 | "links": [], 35 | "panels": [ 36 | { 37 | "gridPos": { 38 | "h": 4, 39 | "w": 24, 40 | "x": 0, 41 | "y": 0 42 | }, 43 | "id": 2, 44 | "options": { 45 | "orientation": "auto", 46 | "sparkline": { 47 | "fillColor": "rgba(31, 118, 189, 0.18)", 48 | "full": false, 49 | "lineColor": "rgb(31, 120, 193)", 50 | "show": true 51 | }, 52 | "thresholds": [ 53 | { 54 | "color": "green", 55 | "index": 0, 56 | "value": null 57 | }, 58 | { 59 | "color": "red", 60 | "index": 1, 61 | "value": 80 62 | } 63 | ], 64 | "valueMappings": [], 65 | "valueOptions": { 66 | "decimals": null, 67 | "prefix": "", 68 | "stat": "mean", 69 | "suffix": "", 70 | "unit": "none" 71 | } 72 | }, 73 | "pluginVersion": "6.2.0-pre", 74 | "targets": [ 75 | { 76 | "refId": "A", 77 | "scenarioId": "random_walk_table", 78 | "stringInput": "" 79 | }, 80 | { 81 | "refId": "B", 82 | "scenarioId": "random_walk_table", 83 | "stringInput": "" 84 | } 85 | ], 86 | "timeFrom": null, 87 | "timeShift": null, 88 | "title": "Panel Title", 89 | "type": "stat" 90 | } 91 | ], 92 | "schemaVersion": 18, 93 | "style": "dark", 94 | "tags": [], 95 | "templating": { 96 | "list": [] 97 | }, 98 | "time": { 99 | "from": "now-6h", 100 | "to": "now" 101 | }, 102 | "timepicker": { 103 | "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"], 104 | "time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"] 105 | }, 106 | "timezone": "", 107 | "title": "Starter App - Stats", 108 | "uid": "YeBxHjzWz", 109 | "revision": 3, 110 | "version": 3 111 | } 112 | -------------------------------------------------------------------------------- /src/dashboards/streaming.json: -------------------------------------------------------------------------------- 1 | { 2 | "__inputs": [], 3 | "__requires": [ 4 | { 5 | "type": "grafana", 6 | "id": "grafana", 7 | "name": "Grafana", 8 | "version": "6.2.0-pre" 9 | }, 10 | { 11 | "type": "panel", 12 | "id": "graph2", 13 | "name": "React Graph", 14 | "version": "" 15 | } 16 | ], 17 | "annotations": { 18 | "list": [ 19 | { 20 | "builtIn": 1, 21 | "datasource": "-- Grafana --", 22 | "enable": true, 23 | "hide": true, 24 | "iconColor": "rgba(0, 211, 255, 1)", 25 | "name": "Annotations & Alerts", 26 | "type": "dashboard" 27 | } 28 | ] 29 | }, 30 | "editable": true, 31 | "gnetId": null, 32 | "graphTooltip": 0, 33 | "id": null, 34 | "links": [], 35 | "panels": [ 36 | { 37 | "description": "", 38 | "gridPos": { 39 | "h": 6, 40 | "w": 24, 41 | "x": 0, 42 | "y": 0 43 | }, 44 | "id": 2, 45 | "links": [], 46 | "targets": [ 47 | { 48 | "refId": "A", 49 | "scenarioId": "streaming_client", 50 | "stream": { 51 | "noise": 10, 52 | "speed": 100, 53 | "spread": 20, 54 | "type": "signal" 55 | }, 56 | "stringInput": "" 57 | } 58 | ], 59 | "timeFrom": null, 60 | "timeShift": null, 61 | "title": "Simple dummy streaming example", 62 | "type": "timeseries" 63 | } 64 | ], 65 | "schemaVersion": 18, 66 | "style": "dark", 67 | "tags": [], 68 | "templating": { 69 | "list": [] 70 | }, 71 | "time": { 72 | "from": "now-1m", 73 | "to": "now" 74 | }, 75 | "timepicker": { 76 | "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"], 77 | "time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"] 78 | }, 79 | "timezone": "", 80 | "title": "Starter App - Streaming", 81 | "uid": "TbbEZjzWz", 82 | "revision": 4, 83 | "version": 4 84 | } 85 | -------------------------------------------------------------------------------- /src/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/legacy/config.ts: -------------------------------------------------------------------------------- 1 | import { PluginMeta } from '@grafana/data'; 2 | 3 | export class ExampleConfigCtrl { 4 | static template = '

hello

'; 5 | 6 | appEditCtrl: any; 7 | appModel?: PluginMeta; 8 | 9 | /** @ngInject */ 10 | constructor($scope: any, $injector: any) { 11 | this.appEditCtrl.setPostUpdateHook(this.postUpdate.bind(this)); 12 | 13 | // Make sure it has a JSON Data spot 14 | if (!this.appModel) { 15 | this.appModel = {} as PluginMeta; 16 | } 17 | 18 | // Required until we get the types sorted on appModel :( 19 | const appModel = this.appModel as any; 20 | if (!appModel.jsonData) { 21 | appModel.jsonData = {}; 22 | } 23 | 24 | console.log('ExampleConfigCtrl', this); 25 | } 26 | 27 | postUpdate() { 28 | if (!this.appModel?.enabled) { 29 | console.log('Not enabled...'); 30 | return; 31 | } 32 | 33 | // TODO, can do stuff after update 34 | console.log('Post Update:', this); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { ComponentClass } from 'react'; 2 | import { ExampleConfigCtrl } from './legacy/config'; 3 | import { AppPlugin, AppRootProps } from '@grafana/data'; 4 | import { ExamplePage1 } from './config/ExamplePage1'; 5 | import { ExamplePage2 } from './config/ExamplePage2'; 6 | import { ExampleRootPage } from './ExampleRootPage'; 7 | import { ExampleAppSettings } from './types'; 8 | 9 | export { ExampleConfigCtrl as ConfigCtrl }; 10 | 11 | export const plugin = new AppPlugin() 12 | .setRootPage((ExampleRootPage as unknown) as ComponentClass) 13 | .addConfigPage({ 14 | title: 'Page 1', 15 | icon: 'info-circle', 16 | body: ExamplePage1, 17 | id: 'page1', 18 | }) 19 | .addConfigPage({ 20 | title: 'Page 2', 21 | icon: 'user', 22 | body: ExamplePage2, 23 | id: 'page2', 24 | }); 25 | -------------------------------------------------------------------------------- /src/pages/A.tsx: -------------------------------------------------------------------------------- 1 | import { AppRootProps } from '@grafana/data'; 2 | import React, { FC } from 'react'; 3 | 4 | export const A: FC = ({ query, path, meta }) => { 5 | return ( 6 |
7 | 18 |
19 | QUERY: 
{JSON.stringify(query)}
20 |
21 | Stored configuration data: 22 | 
{JSON.stringify(meta.jsonData)}
23 |
24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /src/pages/B.tsx: -------------------------------------------------------------------------------- 1 | import { AppRootProps, dateTime, FieldType, DataFrame, PanelData, LoadingState, toDataFrame } from '@grafana/data'; 2 | import { PanelRenderer } from '@grafana/runtime'; 3 | import { LegendDisplayMode, PanelChrome, PanelChromeProps } from '@grafana/ui'; 4 | import React, { FC } from 'react'; 5 | 6 | export const B: FC = ({ query, path, meta }) => { 7 | // Create data frames, in this case we simply generate 8 | // random values over a fixed interval from the current time 9 | const times = []; 10 | const vals = [10, 20, 30, -20, 33.6234, null, 25, 0, 20, 20, 0, 0, -29.12345, null, -23.456]; 11 | 12 | // Grab dates an calculate a week ago 13 | // and the corresponding step amount 14 | let now = dateTime(); 15 | let weekAgo = dateTime().subtract(1, 'week'); 16 | let stepper = dateTime().subtract(1, 'week'); 17 | let step = (now.unix() - weekAgo.unix()) / vals.length; 18 | 19 | // Generated random data points at evenly 20 | // separated times across the past week 21 | for (let i = 0; i < vals.length; i++) { 22 | times.push(stepper.add(step, 'seconds').valueOf()); 23 | } 24 | 25 | // Construct data frame object 26 | // More information: 27 | // See https://grafana.com/docs/grafana/latest/developers/plugins/data-frames/ 28 | // and https://grafana.com/docs/grafana/latest/developers/plugins/working-with-data-frames/ 29 | const frame = toDataFrame({ 30 | name: 'last_week_example', 31 | fields: [ 32 | { name: 'Time', type: FieldType.time, values: times }, 33 | { name: 'Value', type: FieldType.number, values: vals }, 34 | ], 35 | }); 36 | 37 | // Create DataFrame array and add constructed frame 38 | // which is necessary for the PanelData object 39 | const frames: DataFrame[] = []; 40 | frames.push(frame); 41 | 42 | // Using the data frames create a PanelData 43 | // object which will contain data frames 44 | // and time range for the viz 45 | const panelData: PanelData = { 46 | state: LoadingState.Done, // Set loading state as appropriate for viz 47 | series: frames, // The accumulated data frames 48 | timeRange: { 49 | from: weekAgo, 50 | to: now, 51 | raw: { 52 | from: weekAgo.toISOString(), 53 | to: now.toISOString(), 54 | }, 55 | }, 56 | }; 57 | 58 | // Set options for Panel Chrome (wraps the panel) 59 | const panelProps: PanelChromeProps = { 60 | width: 400, 61 | height: 400, 62 | title: 'Title', 63 | children: () => undefined, 64 | }; 65 | 66 | // Setup options for the panel 67 | const opts = { 68 | legend: { 69 | displayMode: LegendDisplayMode.List, 70 | placement: 'bottom', 71 | calcs: [], 72 | }, 73 | graph: {}, 74 | tooltipOptions: { 75 | mode: 'multi', 76 | }, 77 | tooltip: { 78 | mode: 'multi', 79 | }, 80 | }; 81 | 82 | // Provide a barebones field configuration 83 | let fieldConfig = { 84 | defaults: { 85 | custom: { 86 | spanNulls: false, 87 | }, 88 | }, 89 | overrides: [], 90 | }; 91 | 92 | return ( 93 |
94 | 95 | {(innerWidth, innerHeight) => ( 96 | 105 | )} 106 | 107 |
108 | ); 109 | }; 110 | -------------------------------------------------------------------------------- /src/pages/C.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | export const C: FC = () => { 4 | return
C
; 5 | }; 6 | -------------------------------------------------------------------------------- /src/pages/index.ts: -------------------------------------------------------------------------------- 1 | import { AppRootProps } from '@grafana/data'; 2 | import { A } from './A'; 3 | import { B } from './B'; 4 | import { C } from './C'; 5 | 6 | export type PageDefinition = { 7 | component: React.FC; 8 | icon: string; 9 | id: string; 10 | text: string; 11 | }; 12 | 13 | export const pages: PageDefinition[] = [ 14 | { 15 | component: A, 16 | icon: 'file-alt', 17 | id: 'a', 18 | text: 'Tab A', 19 | }, 20 | { 21 | component: B, 22 | icon: 'file-alt', 23 | id: 'b', 24 | text: 'Tab B', 25 | }, 26 | { 27 | component: C, 28 | icon: 'file-alt', 29 | id: 'c', 30 | text: 'Tab C', 31 | }, 32 | ]; 33 | -------------------------------------------------------------------------------- /src/plugin.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json", 3 | "type": "app", 4 | "name": "Simple App", 5 | "id": "myorgid-simple-app", 6 | 7 | "info": { 8 | "description": "Grafana App Plugin Template", 9 | "author": { 10 | "name": "Your Name" 11 | }, 12 | "keywords": ["panel", "template"], 13 | "logos": { 14 | "small": "img/logo.svg", 15 | "large": "img/logo.svg" 16 | }, 17 | "links": [ 18 | { "name": "Website", "url": "https://github.com/grafana/grafana-starter-app" }, 19 | { "name": "License", "url": "https://github.com/grafana/grafana-starter-app/blob/master/LICENSE" } 20 | ], 21 | "screenshots": [], 22 | "version": "%VERSION%", 23 | "updated": "%TODAY%" 24 | }, 25 | 26 | "includes": [ 27 | { 28 | "type": "page", 29 | "name": "Root Page (react)", 30 | "path": "/a/myorgid-simple-app", 31 | "role": "Viewer", 32 | "addToNav": true, 33 | "defaultNav": true 34 | }, 35 | { 36 | "type": "page", 37 | "name": "Root Page (Tab B)", 38 | "path": "/a/myorgid-simple-app/?tab=b", 39 | "role": "Viewer", 40 | "addToNav": true 41 | }, 42 | { 43 | "type": "page", 44 | "name": "React Config", 45 | "path": "/plugins/myorgid-simple-app/?page=page2", 46 | "role": "Admin", 47 | "addToNav": true 48 | }, 49 | { 50 | "type": "dashboard", 51 | "name": "Streaming Example", 52 | "path": "dashboards/streaming.json" 53 | }, 54 | { 55 | "type": "dashboard", 56 | "name": "Lots of Stats", 57 | "path": "dashboards/stats.json" 58 | } 59 | ], 60 | 61 | "dependencies": { 62 | "grafanaDependency": ">=7.0.0", 63 | "grafanaVersion": "7.0.0", 64 | "plugins": [] 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export interface ExampleAppSettings { 2 | customText?: string; 3 | customCheckbox?: boolean; 4 | } 5 | -------------------------------------------------------------------------------- /src/utils/consts.ts: -------------------------------------------------------------------------------- 1 | export const APP_TITLE = 'Simple App Plugin'; 2 | export const APP_SUBTITLE = 'Simple App Plugin subtitle'; 3 | -------------------------------------------------------------------------------- /src/utils/hooks.ts: -------------------------------------------------------------------------------- 1 | import { AppRootProps, NavModelItem } from '@grafana/data'; 2 | import { PageDefinition } from 'pages'; 3 | import { useMemo } from 'react'; 4 | import { APP_TITLE, APP_SUBTITLE } from './consts'; 5 | 6 | type Args = { 7 | meta: AppRootProps['meta']; 8 | pages: PageDefinition[]; 9 | path: string; 10 | tab: string; 11 | }; 12 | 13 | export function useNavModel({ meta, pages, path, tab }: Args) { 14 | return useMemo(() => { 15 | const tabs: NavModelItem[] = []; 16 | 17 | pages.forEach(({ text, icon, id }) => { 18 | tabs.push({ 19 | text, 20 | icon, 21 | id, 22 | url: `${path}?tab=${id}`, 23 | }); 24 | 25 | if (tab === id) { 26 | tabs[tabs.length - 1].active = true; 27 | } 28 | }); 29 | 30 | // Fallback if current `tab` doesn't match any page 31 | if (!tabs.some(({ active }) => active)) { 32 | tabs[0].active = true; 33 | } 34 | 35 | const node = { 36 | text: APP_TITLE, 37 | img: meta.info.logos.large, 38 | subTitle: APP_SUBTITLE, 39 | url: path, 40 | children: tabs, 41 | }; 42 | 43 | return { 44 | node, 45 | main: node, 46 | }; 47 | }, [meta.info.logos.large, pages, path, tab]); 48 | } 49 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@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 | --------------------------------------------------------------------------------