@grafana/labels

Getting Started

The following guide is for consuming the library imports

1. Import core component

import { ServiceLabels } from '@grafana/labels';

2. 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 to id)
• labelField - (optional) Field name for the value field (defaults to name)
• loadById - (optional - defaults to true) 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

The following guide is for running the development version

To bootstrap both the webpack server and the library build:

1. Open terminal and run pnpm watch in the frontend directory - this will watch for any changes in library
2. In your grafana plugin directory, run pnpm link <path-to-gops-labels>

Available commands

pnpm build // triggers webpack to build the library
pnpm watch // triggers webpack to watch for library changes

NPM library publishing

• Update version in package.json
• Run npm publish, authenticate and voila!