- Import core component
import { ServiceLabels } from '@grafana/labels'
- Render
ServiceLabels
<ServiceLabels
value={options}
errors={{}}
loadById
onLoadKeys={() => Promise.resolve(keys)}
onLoadValuesForKey={() => Promise.resolve(values)}
onCreateKey={() => Promise.resolve(undefined)}
onUpdateKey={() => Promise.resolve(undefined)}
onCreateValue={() => Promise.resolve(undefined)}
onUpdateValue={() => Promise.resolve(undefined)}
onRowItemRemoval={() => {}}
onDataUpdate={(result) => console.info(result)}
/>
Props you may want to pass to the component
-
valueField
- (optional) Field name for the id field (defaults toid
) -
labelField
- (optional) Field name for the value field (defaults toname
) -
loadById
- (optional - defaults totrue
) If true this will pas the id to some callbacks that fetch that, otherwise it will pass the value -
onLoadKeys
- Callback for fetching the keys -
onLoadValuesForKey
- Callback for fetching the values for a key -
onCreateKey
- Callback for requesting data whenever a new key is added -
onUpdateKey
- Callback for requesting data whenever a key is updated (edited) -
onCreateValue
- Callback for requesting data whenever a new value is added -
onUpdateValue
- Callback for requesting data whenever a value is updated (edited) -
onRowItemRemoval
- (optional) Callback for when a row is being removed (clicked X) -
onDataUpdate
- Callback for whenever the data changes (add/edit/add new row/remove row)
valueField
and labelField
allow customizing the data type you pass to the component in case you don't want to follow id
/name
convention
To bootstrap both the webpack server and the library build:
- Open terminal and run
yarn watch
in thefrontend
directory - this will watch for any changes in library - Run
yarn link
to allow creating a symlink to this directory - In your grafana plugin directory, run
yarn add '@grafana/labels'
yarn build // triggers webpack to build the library
yarn watch // triggers webpack to watch for library changes
- Update version
in package.json
- Run
npm publish
, authenticate and voila!