Plugin management setting missing CSS styling

Elastic Stack Kibana
1

Hello,

I followed this guide to add a plugin specific management section: Adding management plugin

The problem I'm having is that the html is displaying without any styling. this is an example of my html:

<kbn-management-app section="appName/documentation">
    <kbn-management-appName>
        <div id="documentation">
            <md-content class="md-padding">
                <h1>Documentation</h1>
                <button class="btn-primary" ng-click="downloadPDF()">Download PDF</button>
            </md-content>
        </div>
    </kbn-management-appName>
</kbn-management-app>

the h1 tag is not displayed as a header and displayed as plain text and the material styling is not displaying. I know kibana uses react for the default management sections so I'm not sure if that's the reason or if there's something else I'm missing.

I'm using kibana-6.3.2

This is the way I'm registering the management section:

import { management } from 'ui/management';
import routes from 'ui/routes';
import template from './main.html';
import documentationController from './documentation_controller'
import '../less/main.less'

management.register('appName', {
	display: 'appName',
	order: 40,
	visible: true
});

management.getSection('appName').register('documentation', {
	visible: true,
	display: 'Documentation',
	order: 1,
	url: '#/management/appName/documentation'
});

routes.when('/management/appName/documentation', {
	template: template,
  	controllerAs: 'documentationController',
	controller: documentationController
});
2

Hey @Sam_Reynolds

Nothing immediately looks out of place to me. You are right that we are using React for a lot of the management sections, and we are actively transitioning the rest to React as well. if you can, I would suggest writing your management section in React too. This will allow you to take advantage of EUI, which will give you consistent styling and accessibility features with the rest of Kibana. This will also help future-proof your plugin for later versions of Kibana.

For an example of setting up a React-based management section, take a look at how the Spaces plugin has implemented one: https://github.com/elastic/kibana/blob/master/x-pack/plugins/spaces/public/views/management/page_routes.tsx

3

Thanks @Larry_Gregory, I ended up writing my management section in react and got it working.

I haven't been able to figure out how to modify the top nav bar though. How would I go about adding tabs or just a header?

4

That's great!

Can you explain what you mean by the top nav bar? Kibana has lots of navigation sections, so I want to make sure we're talking about the same thing before giving you an answer.

5

Sorry, I meant the top nav bar of my new management section.
top_nav

similar to how the advanced settings section has tabs in the top nav bar, I want to put either a header or just a single tab that says "Documentation".

6

This is ordinarily taken care of by the <kbn-management-app> directive (angular basically bootstraps the react app, at least for now). Can you post the code you have at this point?

7

Index.html:

<!DOCTYPE html>
<html>
<kbn-management-app section="appName/documentation">
    <kbn-management-appName>
        <div id="appName-documentation"></div>
    </kbn-management-appName>
</kbn-management-app>
</html>

management_section.js

import {
	management,
	PAGE_TITLE_COMPONENT,
	registerSettingsComponent,
} from 'ui/management';
import routes from 'ui/routes';
import template from './main.html';
import '../less/main.less'

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { uiModules } from 'ui/modules';
import { Documentation } from './Documentation'




const document_id = "appName-documentation";


management.register('appName', {
	display: 'appName',
	order: 40,
	visible: true
});

management.getSection('appName').register('documentation', {
	visible: true,
	display: 'Documentation',
	order: 1,
	url: '#/management/appName/documentation'
});

routes.when('/management/appName/documentation', {
	template: template,
	controller: function($scope, $http){
		$scope.$$postDigest(() => {
            const node = document.getElementById(document_id);
            render(
                <Documentation http={$http}/>,
                node,
            );
		})
        // updateDocumentation($scope);
	}

});

documentation.js:

import {
    Comparators,
    EuiFlexGroup,
    EuiFlexItem,
    EuiSpacer,
    EuiPage,
    Query,
    EuiButton,
    EuiTitle,
} from '@elastic/eui';



import React, { Component } from 'react';
import utils from "../lib/utils";


export class Documentation extends Component {

    constructor(props){
        super(props);
        this.http = props.http;
        const {config, query } = this.props;
        this.state = {};
    }

    downloadPDF = async () => {
        let pdfReq = await this.http.get('../api/appName/docs/pdf/');
        utils.saveToPdf(pdfReq.data.toString("base64"), 'documentation.pdf')
    }

    render(){
        return (
                <EuiPage>
                    <EuiTitle><h1>appName Documentation</h1></EuiTitle>
                    <EuiButton onClick={this.downloadPDF}>Download PDF</EuiButton>
                </EuiPage>
            )
    }
}

index.js

import './management_section';
8

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