What is the location for a local image file to be used in a dashboard Markdown widget?

Elastic Stack Kibana
1
  • ES stack 6.7.1
  • CentOS 7.6

I have an image file (PNG) that I want to display at the top of a dashboard. The image cannot be obtained by a URL, but, rather needs to be local in the Kibana deployment. I am using a Markdown widget with the following markup:

// ![DataIntegrity](/bundles/data_integrity.png)

This works fine if the Kibana optimization runs prior to the image file being copied into the optimize/bundles directory. If there is any change in configuration that triggers the optimization cycle when Kibana is restarted, the custom image file is lost from the optimize/bundle directory and thus I have a broken link for the widget.

Is there a specific location within the Kibana deployment where I can place this image file to survive an optimization cycle using this strategy?

Using this suggestion ( Has anyone modified Kibana code to display images or documents? ) I did try placing a copy in the src/ui/public/images/ directory, however, this did not work even after forcing a re-optimize cycle.

Thanks,
James

2

You really shouldn't be manually copying things into the optimize directory. You could create a custom plugin to serve this image.

3

Tyler,

Would the plugin be simply an index.js and a public directory storing the image file?

James

4

If you checkout the Kibana repository there is a plugin generator you can use to get you started. You will want to checkout the branch (6.7) that corresponds to the version you are using:

5

Looking a little deeper to see if I can provide a better example.

6

Ok, here is how this could be accomplished with a plugin:

  1. Checkout the Kibana 6.7 branch, since we're building a plugin for 6.7.1. More information on running Kibana locally for development can be found here
  2. Use the plugin generator to create a plugin node scripts/generate_plugin.js static_assets. More information on the plugin generator can be found here. Say no to all options, as we won't need them for this example.
node scripts/generate_plugin.js static_assets
? Provide a short description Static Assets
? What Kibana version are you targeting? 6.7.1
? Should an app component be generated? No
? Should translation files be generated? No
? Should a hack component be generated? No
? Should a server API be generated? No
Initialized empty Git repository in /mnt/c/elastic/kibana-extra/static_assets/.git/
yarn run v1.15.2
$ node scripts/kbn bootstrap
Running [bootstrap] command from [/mnt/c/elastic/kibana]:

Found [28] projects:
...
  1. Open the plugin in an editor ../kibana-extra/static_assets
  2. Add the following line to the plugin definition in index.js: publicDir: resolve(__dirname, 'public'),

Should look something like this:

export default function (kibana) {
  return new kibana.Plugin({
    name: 'static_assets',
    publicDir: resolve(__dirname, 'public'),

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },
  });
}
  1. Create the public directory, and copy your image into it.
  2. Running yarn build should build the plugin located at build/static_assets-0.0.0.zip
  3. If you would like to test the plugin locally, you can run yarn start --no-base-path and yarn es snapshot in another terminal.
  4. Image should be available at: http://localhost:5601/plugins/static_assets/data_integrity.jpg

I also uploaded my plugin: https://drive.google.com/open?id=17JyiHaOxsO3OsT-kenqpTAvKJfVjNVC-

7

Awesome! I really appreciate your help Tyler. Followed your example creating the plugin. Installed the new plugin and works like a charm.

Thanks again,
James

8

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.