Beep actiontype

[lstoneir (lal ston)]

I have added a new actionType to my kibana source.
I register it in both server and client side

my action id is : .beep
at this moment i log a message in file. but i want to play a beep sound in my kibana.
how can i call a function in public (client-side) to play a Audio('beep.mp3').play() ?
any idea?

Please help

[lstoneir (lal ston)]

Any idea for this?

How can call a function inside header component for playing Audio?!

[lukeelmers]

@lstoneir

how can i call a function in public (client-side) to play a Audio('beep.mp3').play() ?
any idea?

If you need to store a static asset like an mp3 file, you can place it in your plugin inside a myplugin/public/assets directory. Any files living in that directory will be served from /plugins/my_plugin_id/assets

[lstoneir (lal ston)]

thanks for your attention <3
i have another question.
and how can i inject my plugin client-side in header area? for example a highlighted bell for attention of operator!

very thank you

[lukeelmers]

@lstoneir

how can i inject my plugin client-side in header area? for example a highlighted bell for attention of operator

Kibana's core exposes a few options for this which are available to all plugins.

The closest to what you describe is probably setBadge, which will let you add a badge to the upper-right corner of the screen, below the black global navigation bar, with an optional tooltip.

// my-plugin/public/plugin.ts
class MyPlugin {
  start(core) {
    core.chrome.setBadge({
      text: 'Attention',
      tooltip: 'Something has happened',
      iconType: 'alert', // icon name from EUI: https://elastic.github.io/eui/#/display/icons
    });
  }
}

Core also has an overlays service that lets you display banners:

// my-plugin/public/plugin.ts

import React from 'react';
import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public';
import { MyBannerComponent } from '../banner';

class MyPlugin {
  start(core) {
    core.overlays.banners.add(
      toMountPoint(<MyBannerComponent /)
    );
  }
}

And lastly there's a notifications service which displays popups, usually in the lower right corner of the screen:

// my-plugin/public/plugin.ts
class MyPlugin {
  start(core) {
    core.notifications.toasts.addInfo({
      title: 'Attention',
      text: 'Something has happened'
    });
  }
}

Those are the main options I can think of. At the moment we don't have a way to completely override the header banner, so chrome.setBadge is probably the closest thing to what you describe that I can think of at the moment.