2502fe4d19
* Canvas: Add Zoom * Scale selecto components based on zoom state * Fix pan by reverting to 3.1.0 for zoom-pan * Update to latest library that fixes pan regression * Add mini map to canvas pan zoom * Fix selecto and anchors on hover * Update naming to be more clear * Switch back to contentComponent * Apply transformScale to drag and resize * Update connection source and target scaling * Add option to display mini map * Update yarn lock * Revert "Update yarn lock" This reverts commit3d1dd65d57. * Set yarn lock to main * Revert "Set yarn lock to main" This reverts commit64bc50557e. * Update to Yarn 4 * Add react-zoom-pan-pinch * Update react-zoom-pan checksum * Revert changes to json files * Remove last line of api merged * Remove last lines of all impacted jsons * Update home json * Update coordinate calc function to include scale * Fix types in coordinate calc function * Fix util calculation for transform * Fix arrow anchor shift behavior * Fix scale offset when adding elements during zoom * Fix drag of selected group during zoom * Add feature flag for canvas pan zoom * Revert "Add feature flag for canvas pan zoom" This reverts commitb026e31d8d. * Regenerate feature flag after merge * Apply feature flag to enable pan zoom wrappers * Add mini map toggle behind feature flag * Simplify minimap behavior * Update feature flag registry * Set minimap to false by default * fix gen-cue * Set toggles gen to main Add blank line to toggle gen csv * Add canvas pan zoom to csv * Remove old comment * Change ref parameter to be more descriptive * Rename visibleFun to be more descriptive * Consolidate transformScale transformRef in util * Remove non-null assertion on connection parentRect * Consolidate parentRect null coalescing into object * Remove minimap and change toggle * Add controls inline help for pan and zoom * Clean up mouse events * Pull scale out of ref and isolate transform * Remove transform ref from scene div * Fix context menu visible behavior * Fix connections and update util functions * Move transform component instance to util * fix backend test * minor updates * Clean up connections / fix minor bug where offset of arrow wasn't being calculated correctly * missed connection code cleanup * cleanup scene code a bit more * actually fix backend test * move eslint disable line closer to actual issue --------- Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
Building the docs locally
When you contribute to documentation, it's a good practice to build the docs on your local machine to make sure your changes appear as you expect. This README explains the process for doing that.
To build a local version, you need to run a process in a Docker container.
Grafana periodically updates the Docker image, docs-base, to update the styling of the Docs.
Requirements
- Docker >= 2.1.0.3
- Yarn >= 1.22.4
Build the doc site
First, make sure the Docker daemon is running on your machine. Then, follow these steps:
- On the command line, first change to the docs folder:
cd docs. - Run
make docs. This launches a preview of the website with the current grafana docs athttp://localhost:3002/docs/grafana/latest/which will refresh automatically when changes are made to content in thesourcesdirectory.
If you have the grafana/website repo checked out in the same directory as the grafana repo, then you can run make docs-local-static to use local assets (such as images).
Content guidelines
Generally, one can edit content in the sources directory.
The following paths are built instead from a typescript file and are auto-generated. Please do not edit these files directly. Instead, navigate to the appropriate typescript source file and edit the content there, then follow the build instructions to generate the markdown files.
Transformations
Auto-generated markdown location:
- docs/sources/panels-visualizations/query-transform-data/transform-data/index.md
Typescript location for editing and instructions:
- scripts/docs/generate-transformations.ts - Includes all content not specific to a transformation.
- public/app/features/transformers/docs/content.ts - Transformation-specific content.
Only use reference style links in the content.ts file or else link text will be visible in the UI.
Contributing
Using relref for internal links
Use the Hugo shortcode relref any time you are linking to other internal docs pages.
Syntax is:
{{< relref "example.md" >}}
You might need to add more context for the link (containing folders and so on, folder/example.md) if Hugo says the relref is ambiguous.
Managing redirects
When moving content around or removing pages it's important that users following old links are properly redirected to the new location. We do this using the aliases feature in Hugo.
If you are moving a page, add an aliases entry in the front matter referencing the old location of the page which will redirect the old url to the new location.
If you are removing a page, add an aliases entry in the front matter of the most-applicable page referencing the location of the page being removed.
If you are copying an existing page as the basis for a new one, be sure to remove any aliases entries in the front matter in your copy to avoid conflicting redirects.
Edit the side menu
The side menu is automatically build from the file structure. Use the weight front matter parameter to order pages.
To specify different menu text from the page title, use the front matter parameter menuTitle.
Add images
Please see our help documentation on Image, diagram, and screenshot guidelines for comprehensive information.
Deploy changes to grafana.com
When a PR is merged with changes in the docs/sources directory, those changes are automatically synced by a GitHub action (.github/workflows/publish.yml) to the grafana/website repo.
- A PR that targets the
mainbranch syncs to thecontent/docs/grafana/nextdirectory in thewebsiterepository, and publishes tohttps://grafana.com/docs/grafana/next/. - A PR targeting the
latest/currentrelease branch syncs to thecontent/docs/grafana/latestdirectory in thewebsiterepository, and publishes tohttps://grafana.com/docs/grafana/latest/.
Once the sync is complete, the website will automatically publish to production - no further action is needed.