Beep actiontype

Elastic Stack Kibana
1

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

Screenshot_2021-05-24 Connectors - Elastic
Screenshot_2021-05-24 Connectors - Elastic714×480 16.3 KB

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 :slight_smile:

1 Like
2

Any idea for this?

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

4

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

1 Like
5

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 :heartbeat:

6

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.

7

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