grafana/packages/grafana-ui
Andre Pereira fd37ff29b5
Tempo: New Search UI using TraceQL (#63808)
* WIP of creating new components to support the Search tab using TraceQL

* Search fields now require an ID. Added duration fields to new Search UI

* Distinguish static from dynamic fields. Added dynamic tags input

* Moved new search behind traceqlSearch feature flag. Added handling of different types of values to accurately wrap them in quotes when generating query.

* Hold search state in TempoQuery to leverage state in URL. Moved types to schema file

* Use a read only monaco editor to render a syntax highlighted generated query. Added tooltip to duration. Added query options section

* Support multiple values using the regex operator and multi input

* Delete dynamic filters

* Automatically select the regex op when multiple values are selected. Revert to previous operator when only one value is selected

* Added tests for SearchField component

* Added tests for the TraceQLSearch component

* Added tests for function that generates the query

* Fix merge conflicts

* Update test

* Replace Search tab when traceqlSearch feature flag is enabled. Limit operators for both name fields to =,!=,=~

* Disable clear button for values

* Changed delete and add buttons to AccessoryButton. Added descriptions to operators

* Remove duplicate test

* Added a prismjs grammar for traceql. Replaced read only query editor with syntax highlighted query. Removed spaces between tag operator and value when generating query.

* Fix support for custom values when isMulti is enabled in Select

* Use toOption function
2023-03-06 16:31:08 +00:00
..
.storybook Chore: Bump d3-color to 3.1.0 (#61609) 2023-01-26 13:02:22 +01:00
scripts Icons: Move unicons icons to the repository and generate the iconsBundle.js with nodejs (#53766) 2022-08-23 15:47:14 +02:00
src Tempo: New Search UI using TraceQL (#63808) 2023-03-06 16:31:08 +00:00
.eslintrc Revert "Update dependency rollup to v3 (#58252)" (#63790) 2023-02-27 07:01:24 -05:00
CHANGELOG.md Prettier: Fix all markdown files and add markdown files to CI verify step (#39776) 2021-09-29 14:34:40 +02:00
LICENSE_APACHE2 Re-license Grafana to AGPLv3 (#33184) 2021-04-20 19:03:30 +02:00
package.json Update dependency rimraf to v4 (#64150) 2023-03-03 12:08:01 -05:00
README.md Chore: Move from master to main branch (#33693) 2021-05-06 16:29:29 +02:00
rollup.config.ts Revert "Update dependency rollup to v3 (#58252)" (#63790) 2023-02-27 07:01:24 -05:00
tsconfig.build.json Chore: Update slate and related packages (#54566) 2022-09-06 15:23:48 +01:00
tsconfig.json Chore: Bump d3-color to 3.1.0 (#61609) 2023-01-26 13:02:22 +01:00

Grafana UI components library

@grafana/ui is currently in BETA.

@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.

Browse the Storybook catalog of the components.

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.

Storybook 6.x migration

We've upgraded Storybook to version 6 and with that we will convert to using controls instead of knobs for manipulating components. Controls will not require as much coding as knobs do. Please refer to the storybook style-guide for further information.