Hello everyone,
I'm using Kibana v8.3.3 and i'm trying to modify the DOM of my dashboard.
For this I tried to use a chrome extension and it worked but I want to explore another option.
I tried creating a SPA and embedded the iframe of my dashboard but the cross origin issue makes it impossible. And I couldn't wrap my head on how to use the Kibana API to get the HTML of the dashboard and not just the json file ; nor how to allow CORS ( I modified kibana yml and I even tried a chrome extension to make CORS work but it doesn't work )
So my solution was to create a plugin to add a core application ( adds a folder in the left panel ) that is just the iframe of my dashboard ( no more CORS problem ). In my plugin.ts I register a simple application and mount a really simple reactElement that just holds the iframe of my dashboard.
It works fine and my iframe is working inside my kibana application.
Now I would like to execute code to modify the DOM of the iframe.
For now I tried to just log "test" but it does not work.
Here is my code that export renderApp called for the mount argument in the setup.
const App =
() => {
React.useEffect(() => {
const head = document.querySelector("head");
const script = document.createElement("script");
script.setAttribute("src","./scriptspa.js");
script.setAttribute("type","text/javascript");
script.setAttribute("charset","utf-8");
head?.appendChild(script);
return () => {
head?.removeChild(script);
}
})
const reactElement = (
<EuiPage>
<EuiPageBody>
<EuiPageHeader>SPA PLUGIN INSIDE KIBANA</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody style={{height: '100%', width: '100%'}}>
<div id="root" style={{height: '100%', width: '100%'}}>
<iframe src="http://localhost:5601/app/dashboards#/view/722b74f0-b882-11e8-a6d9-e546fe2bba5f?embed=true&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-7d%2Cto%3Anow))" style={{height: '100%', width: '100%'}} />
</div>x
</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
);
return reactElement;
};
export const renderApp = ({ element }: AppMountParameters) => {
render(<App />, element);
return () => unmountComponentAtNode(element);
};
The useEffect doesn't work and tries to read from an html file ?
I get this error : "refused to execute script from 'http://localhost:5601/app/scriptspa.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."
And when I click on the 'http://localhost:5601/app/scriptspa.js' it redirects me to an actual HTML file that is not in my plugin folder ??? ( Titled Elastic )
Anyway, if anybody knows how to fix the useEffect or another way to execute code I'm down to learn !!
Thanks in advance.