* WIP: initial panel links editor * WIP: Added dashboard migration to new panel drilldown link schema * Make link_srv interpolate new variables * Fix failing tests * Drilldown: Add context menu to graph viz (#17284) * Add simple context menu for adding graph annotations and showing drilldown links * Close graph context menu when user start scrolling * Move context menu component to grafana/ui * Make graph context menu appear on click, use cmd/ctrl click for quick annotations * Move graph context menu controller to separate file * Drilldown: datapoint variables interpolation (#17328) * Add simple context menu for adding graph annotations and showing drilldown links * Close graph context menu when user start scrolling * Move context menu component to grafana/ui * Make graph context menu appear on click, use cmd/ctrl click for quick annotations * Add util for absolute time range transformation * Add series name and datapoint timestamp interpolation * Rename drilldown link variables tot snake case, use const values instead of strings in tests * Bring LinkSrv.getPanelLinkAnchorInfo for compatibility reasons and add deprecation warning * Rename seriesLabel to seriesName * Drilldown: use separate editors for panel and series links (#17355) * Use correct target ini context menu links * Rename PanelLinksEditor to DrilldownLinksEditor and mote it to grafana/ui * Expose DrilldownLinksEditor as an angular directive * Enable visualization specifix drilldown links * Props interfaces rename * Drilldown: Add variables suggestion and syntax highlighting for drilldown link editor (#17391) * Add variables suggestion in drilldown link editor * Enable prism * Fix backspace not working * Move slate value helpers to grafana/ui * Add syntax higlighting for links input * Rename drilldown link components to data links * Add template variabe suggestions * Bugfix * Fix regexp not working in Firefox * Display correct links in panel header corner * bugfix * bugfix * Bugfix * Context menu UI tweaks * Use data link terminology instead of drilldown * DataLinks: changed autocomplete syntax * Use singular form for data link * Use the same syntax higlighting for built-in and template variables in data links editor * UI improvements to context menu * UI review tweaks * Tweak layout of data link editor * Fix vertical spacing * Remove data link header in context menu * Remove pointer cursor from series label in context menu * Fix variable selection on click * DataLinks: migrations for old links * Update docs about data links * Use value time instead of time range when interpolating datapoint timestamp * Remove not used util * Update docs * Moved icon a bit more down * Interpolate value ts only when using __value_time variable * Bring href property back to LinkModel * Add any type annotations * Fix TS error on slate's Value type * minor changes |
||
---|---|---|
.. | ||
.storybook | ||
src | ||
CHANGELOG.md | ||
index.js | ||
package.json | ||
README.md | ||
rollup.config.ts | ||
tsconfig.build.json | ||
tsconfig.json | ||
tslint.json |
Grafana UI components library
@grafana/ui is a collection of components used by Grafana
Our goal is to deliver Grafana's common UI elements for plugins developers and contributors.
See package source for more details.
Installation
yarn add @grafana/ui
npm install @grafana/ui
Development
For development purposes we suggest using yarn link
that will create symlink to @grafana/ui lib. To do so navigate to packages/grafana-ui
and run yarn link
. Then, navigate to your project and run yarn link @grafana/ui
to use the linked version of the lib. To unlink follow the same procedure, but use yarn unlink
instead.
Building @grafana/ui
To build @grafana/ui run npm run gui:build
script from Grafana repository root. The build will be created in packages/grafana-ui/dist
directory. Following steps from Development you can test built package.
Releasing new version
To release new version run npm run gui:release
script from Grafana repository root. The script will prepare the distribution package as well as prompt you to bump library version and publish it to the NPM registry.
Automatic version bump
When running npm run gui:release
package.json file will be automatically updated. Also, package.json file will be commited and pushed to upstream branch.
Manual version bump
To use package.json
defined version run npm run gui:release --usePackageJsonVersion
from Grafana repository root.
Preparing release package without publishing to NPM registry
For testing purposes there is npm run gui:releasePrepare
task that prepares distribution package without publishing it to the NPM registry.
V1 release process overview
- Package is compiled with TSC. Typings are created in
/dist
directory, and the compiled js lands in/compiled
dir - Rollup creates a CommonJS package based on compiled sources, and outputs it to
/dist
directory - Readme, changelog and index.js files are moved to
/dist
directory - Package version is bumped in both
@grafana/ui
package dir and in dist directory. - Version commit is created and pushed to master branch
- Package is published to npm
Versioning
To limit the confusion related to @grafana/ui and Grafana versioning we decided to keep the major version in sync between those two. This means, that first version of @grafana/ui is taged with 6.0.0-alpha.0 to keep version in sync with Grafana 6.0 release.