Implementing Fullscreen in a Kibana plugin

Elastic Stack Kibana
1

Hi there,

I need to implement a full screen feature inside a kibana plugin, like to the dashboard full screen (without header and sidebar)

I tryed to use the code describe in the " Fullscreen demo" from eui library, without success.

Can someone help me?

Thanks,
Nicola

2

Hi @Nicolap,

In general I'd recommend to explore dashboard's code.

Specifically, this is the place where dashboard is hiding header and sidebar (we call it chrome):
Usage and Docs

Hope this is helpful.

3

Thanks @dosant for the tip :slight_smile:

Seeing the code It seems that I need to require the CoreSetup from 'src/core/public'
How can I include this in my plugin?

4

@Nicolap, chrome is a service on core's start contract. It is be passed into your plugin in start hook. This is where it happens in dashboard: https://github.com/elastic/kibana/blob/master/src/plugins/dashboard/public/plugin.tsx#L292
From that point setVisible is accessible as core.chrome.setVisible

5

I did not understand very well..

However, I just tried with the following code and It seems works:

import chrome from "ui/chrome";
...
chrome.setVisible(false);

What do you think about it?

6

Got it, looks like your plugin uses older apis for creating plugins. If this is the case, then yes,

import chrome from "ui/chrome";
...
chrome.setVisible(false);

should be good :+1:

7

Maybe the following code is better:

import { npStart } from "ui/new_platform";
npStart.core.chrome.setIsVisible(false);

In both cases, using puppeteer to create a PDF by url It seems skip this rule...uhmmm

8

As @dosant says this will work for now, but this api will go away soon (probably before the next major release 8.0). If you are building for the future, it's highly recommended to switch to Kibana platform plugins. When you are creating a plugin with the plugin generator it will set up everything correctly - the most important thing is a central plugin class that gets passed in the setup and start services in the respective lifecycle methods. You can learn about this new more structured way of building Kibana plugins in https://github.com/elastic/kibana/blob/master/src/core/CONVENTIONS.md#technical-conventions

2 Likes
9

Thanks @flash1293, this is very useful !
I used the plugin generator one month ago and I don't have for example kibana.json at the top.
It has been recently updated ?

Going back to the problem, you know if using chrome in the backend with puppeteer is there some problem?

In the picture below is the result from a puppeteer run (using chrome.setIsVisible(false) in the frontend)

Immagine
Immagine1029×1255 16.1 KB

10

When you are looking for examples, check out the plugins in src/plugins - they all have kibana.json files specifying their dependencies.

About your puppeteer run - maybe it is screenshotting too early and your plugin didn't have time yet to hide the chrome? Very hard to help here effectively without the code or a minimal example to reproduce.

11

@flash1293 you are right...

Anyway, the main problem I asked in this topic is solved :slight_smile:

From the puppeteer side, using the code below I got the same result
that I wanted:

await page.addStyleTag({

        content: ".euiHeader{display: none};",

      });

      await page.addStyleTag({

        content: ".euiNavDrawer{display: none};",

      });

      await page.addStyleTag({

        content:

          ".chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome){top: 0px};",

      });

Thanks again to everyone

12

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