Use NP registry instead of ui/registry/field_formats

[gospodarsky]

Summary

A part of #43443

• Get rid of uiExports/fieldFormats;
• Remove field_formats.js;
• Create FieldFormatRegisty and replace old field_formats.js dependencies by the new one;
• Add the FieldFormatRegisty to plugins/data;

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

Dev Docs

The FieldFormats service has been moved to the data plugin in the New Platform. If your plugin has any imports from ui/registry/field_formats, you'll need to update your imports as follows:

Use it in your New Platform plugin:

class MyPlugin {
  setup (core, { data }) {
    data.fieldFormats.register(myFieldFormat);
    // ...
  }
  start (core, { data }) {
    data.fieldFormats.getType(myFieldFormatId);
    // ...
  }
}

Or, in your legacy platform plugin, consume it through the ui/new_platform module:

import { npSetup, npStart } from 'ui/new_platform';

npSetup.plugins.data.fieldFormats.register(myFieldFormat);
npStart.plugins.data.fieldFormats.getType(myFieldFormatId);
// ...

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 3fdc72c

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: d087d58

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 75d9d79

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: da2fb9a

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 95a3b88

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 5728d15

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 66c66ef

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: ccd5570

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 72220cb

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: bc6ad8a

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 331518d

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: dca6f91

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: f7ae0bf

[gospodarsky]

[pgege]

Hi, I attempted to register my plugin using this:

Here is how I used it:

But I get this error:

I changed the code to this (passing an array with my field formatter):

However the page to edit field types comes up blank on kibana

Can someone provide some insight as to what I can do to register my field formatter plugin?

[alexwizp]

@paulyg321 Looks like you did everything right. At the setup stage, you must execute the fieldFormats.register method and pass an array of your custom field formats.

Keep in mind that you can add custom field formats only at the setup stage
But I'm a little worried why you see a blank page. Could you confirm that DictionaryLookupProvider is a class inherited from FieldFormat

[mattkime]

@paulyg321 Is there a way for you to share your code? Perhaps point me to a PR on your own repo.

[pgege]

@mattkime @alexwizp Here's a link to the Github repo with the code i'm working on. https://github.com/paulyg321/kibana-field-formatters/blob/master/public/dictionary-lookup.js

[mattkime]

@paulyg321 I think it would be helpful to try to use the kibana platform (aka the new platform) to create this plugin. It will be a little bit more work but it will help preserve future compatibility. Here's how I recommend we accomplish that -

Clone the kibana repo, run yarn run kbn bootstrap and then run node scripts/generate_plugin - you can try adding your field formatting code there or just push the result as a PR and we can continue the discussion there.

You can also reach me on the elastic community slack - https://www.elastic.co/blog/join-our-elastic-stack-workspace-on-slack

Anyway, I know I'm pointing you in a different direction but I hope you find it helpful.

---

Oh, do you see any console errors with your current code? There might be a simple fix.

[cliffplaysdrums]

Hello, I've been encountering the same issues as the previous poster. My code is very similar to what they linked on GitHub, but I'll also try to make mine publicly available shortly.

The current issue only appears after clicking "edit" on a field within an index pattern (management tab). When the new page loads that would normally allow the selection of a field formatter, I see a console error "format.fieldType is undefined." It is however defined as such

class ScteFormat extends FieldFormat {
    static id = 'scte';
    static title = 'SCTE';
    static fieldType = ['string']; // src/plugins/data/common/kbn_field_types/types.ts

    constructor(params) {
      super(params);
    }
  }

Edit: plugin code is available here https://github.com/cliffplaysdrums/kibana-plugins/tree/master/cliff_test_plugin

[cliffplaysdrums]

@mattkime @alexwizp just checking if this commit is still being watched, or if I should be asking for help elsewhere.
Thanks!

[alexwizp]

Hi @cliffplaysdrums. I looked at your code and found that you are still using an outdated approach that has already been removed. Please see our migration documentation:

Also I can show you an example of how to register a custom format in a new platform:
alexwizp@4246029

Please let me know if something is unclear.

You can use the following command to generate new plugin:
node scripts/generate_plugin plugin_name