Create
$ yarn create @grafana/plugin
yarn create v1.22.21
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@grafana/create-plugin@4.11.1" with binaries:
- create-plugin
[########################################################################################################################] 1053/1053?✔ What is going to be the name of your plugin? · app-test
✔ What is the organization name of your plugin? · clh021
✔ How would you describe your plugin? · test grafana app plugin
✔ What type of plugin would you like? · app
✔ Do you want a backend part of your plugin? (y/N) · true
✔ Do you want to add Github CI and Release workflows? (y/N) · true
✔ Do you want to add a Github workflow for automatically checking "Grafana API compatibility" on PRs? (y/N) · true
✔︎ ++ /home/lee/Projects/clh021-apptest-app/go.sum
✔︎ ++ /home/lee/Projects/clh021-apptest-app/go.mod
✔︎ ++ /home/lee/Projects/clh021-apptest-app/Magefile.go
✔︎ ++ /home/lee/Projects/clh021-apptest-app/pkg/main.go
✔︎ ++ /home/lee/Projects/clh021-apptest-app/pkg/plugin/resources_test.go
✔︎ ++ /home/lee/Projects/clh021-apptest-app/pkg/plugin/resources.go
✔︎ ++ /home/lee/Projects/clh021-apptest-app/pkg/plugin/app.go
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.vscode/launch.json
✔︎ ++ /home/lee/Projects/clh021-apptest-app/README.md
✔︎ ++ /home/lee/Projects/clh021-apptest-app/tests/fixtures.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/tests/appNavigation.spec.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/tests/appConfig.spec.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/plugin.json
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/module.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/constants.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/utils/utils.routing.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/pages/index.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/pages/PageTwo.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/pages/PageThree.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/pages/PageOne.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/pages/PageFour.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/components/testIds.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/components/AppConfig/index.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/components/AppConfig/AppConfig.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/components/AppConfig/AppConfig.test.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/components/App/index.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/components/App/App.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/components/App/App.test.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/provisioning/plugins/apps.yaml
✔︎ ++ /home/lee/Projects/clh021-apptest-app/provisioning/plugins/README.md
✔︎ ++ /home/lee/Projects/clh021-apptest-app/tsconfig.json
✔︎ ++ /home/lee/Projects/clh021-apptest-app/playwright.config.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/jest.config.js
✔︎ ++ /home/lee/Projects/clh021-apptest-app/jest-setup.js
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.gitignore
✔︎ ++ /home/lee/Projects/clh021-apptest-app/docker-compose.yaml
✔︎ ++ /home/lee/Projects/clh021-apptest-app/package.json
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.eslintrc
✔︎ ++ /home/lee/Projects/clh021-apptest-app/LICENSE
✔︎ ++ /home/lee/Projects/clh021-apptest-app/CHANGELOG.md
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.prettierrc.js
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.nvmrc
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.cprc.json
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/README.md
✔︎ ++ /home/lee/Projects/clh021-apptest-app/src/img/logo.svg
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/tsconfig.json
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/jest.config.js
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/jest-setup.js
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/entrypoint.sh
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/.eslintrc
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/README.md
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/Dockerfile
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/.prettierrc.js
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/.cprc.json
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/webpack/webpack.config.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/webpack/utils.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/webpack/constants.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/types/custom.d.ts
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/supervisord/supervisord.conf
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/jest/utils.js
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.config/jest/mocks/react-inlinesvg.tsx
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.github/workflows/release.yml
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.github/workflows/ci.yml
✔︎ ++ /home/lee/Projects/clh021-apptest-app/.github/workflows/is-compatible.yml
✔︎ Grafana go sdk updated successfully.
✔︎ Successfully ran prettier against new plugin.
# Congratulations on scaffolding a Grafana app plugin! 🚀
## What's next?
Run the following commands to get started:
* cd ./clh021-apptest-app
* yarn install to install frontend dependencies.
* yarn exec playwright install chromium to install e2e test dependencies.
* yarn run dev to build (and watch) the plugin frontend code.
* mage -v build:linux to build the plugin backend code. Rerun this command every time you edit your backend files.
* docker-compose up to start a grafana development server.
* Open http://localhost:3000 in your browser to create a dashboard to begin developing your plugin.
Note: We strongly recommend creating a new Git repository by running git init in ./clh021-apptest-app before continuing.
* Learn more about Grafana Plugin Development at https://grafana.com/developers/plugin-tools
Done in 62.49s.
Depends
# Go (Version)
# Mage 一个使用Go的类似make的构建工具。您编写普通的go函数,法师会自动将它们用作类似Makefile的可运行目标。
# 建议下载源码安装,或者下载 [release](https://github.com/magefile/mage/releases),直接 go install 会安装一个没有版本信息的二进制。
# git clone https://github.com/magefile/mage; cd mage; go run bootstrap.go # 这个命令会在 GOPATH 中生成包含版本信息的二进制程序
# rm -rf ./mage # 可以删除项目目录了。
# LTS version of Node.js
# Docker
# Yarn/NPM
Prepare
# 安装前端依赖包
cd ./clh021-apptest-app
yarn
Run your plugin in Docker
yarn dev # 在开发模式下构建前端
mage -v build:linux # 构建后端(可选),如果有后端程序就需要,没有就不需要
yarn server # 运行Grafana服务器
TODO
- 前后端接口数据交互,读取,提交
- 了解接口本身可以读取到 grafana 自身数据或功能的内容。
- 了解app-plugin直接显示其它仪表盘的内容。可以依赖少量配置。