0a9240aeba
* organize layout, make design uniform, add doc link * fix e2e test * move overhauled config parts into prometheus code * update tooltips with doc links * clean component styles for section padding, top and bottom 32px * make additional settings subsection headers h6 * use secondary gray for section descriptions * fix merge issues * change inlineswitch to switch only in prom settings because the other components are shared * remove legacy formfield and input, replace with inlinefield and input from grafana-ui * find more formfield and UI design fixes like changing inlineformlabel to inlinefield * remove unused inline form label * replace legacy duration validations with <FieldValidationMessage> * fix styles secondary gray from theme * change language, headings and datasource -> data source * update alert setting styles with new component * update prom url heading and tooltip * update default editor tooltip and set builder as default editor * update interval tooltip * update prom type tooltip * update custom query params tooltip * update exemplar internal link tooltip * fix inline form styling inconsistency * allow for using the DataSourceHTTPSettings component without the connection string * remove overhaul component, re-use dshtttps comp, and use connection input in config editor * make tooltips interactive to click links * consistent label width across the elements we can control for now, fix exemplar switch * make connection url a component * refactor onBlur validation * remove unused component * add tests for config validations * add more meaningful health check * fix e2e test * fix e2e test * fix e2e test * add error handling for more url errors * remove unnecessary conversion * health check tests * Clean up the health check * health check unit tests * health check unit tests improved * make pretty for drone * lint check go * lint check go * add required attr to connection component * Update public/app/plugins/datasource/prometheus/configuration/Connection.tsx Co-authored-by: Torkel Ödegaard <torkel@grafana.com> * fix read only issue for provisioned datasources * validate multiple durations for incremental query setting * use sentence case for headers * use className consistently for styles * add tests for url regex * remove console logs * only use query as healthcheck as the healthy api is not supported by Mimir * fix exemplar e2e test * remove overhaul prop from custom headers setting component * remove connection section and use DatasourceHttpSettings connection with custom label and interactive tooltip * add spaces back * spaces --------- Co-authored-by: ismail simsek <ismailsimsek09@gmail.com> Co-authored-by: Torkel Ödegaard <torkel@grafana.com> |
||
|---|---|---|
| .. | ||
| .storybook | ||
| scripts | ||
| src | ||
| .eslintrc | ||
| CHANGELOG.md | ||
| LICENSE_APACHE2 | ||
| package.json | ||
| README.md | ||
| rollup.config.ts | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
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.