Extend Dashboard Listing functionality

Elastic Stack Kibana
1

I have a plugin that I'm trying to extend a bit of functionality to the dashboardListing directive. Essentially what I'm trying to do is add a header above the dashboard list. to the dashboard listing by modifying the react render code in the following file:

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js.

so that it reads something like this:

<EuiPage data-test-subj="dashboardLandingPage" className="dshDashboardListing__page" restrictWidth>
        <EuiPageBody>
          // This is where I would want to insert my code.
          <div>
            <h1>Test</h1>
            <p>My custom updated header </p>
          </div>
          {this.renderPageContent()}
        </EuiPageBody>
</EuiPage>

I've tried to decorate the directive, but when I modify the directive here it just returns a blank page. Rather than what I've inserted or rendered with react.

Any thoughts on how to accomplish this?

2

What version of kibana are you using?

3

6.5.4

4

To clarify, I'm not modifying that file directly.

From within my plugin app, I'm grabbing that directive and decorating it.

hack.js

import { dashboardListingDirectiveDecorator } from './dashboard_listing_directive';
kibana.config(['$provide', dashboardListingDirectiveDecorator]);

dashboard_listing_directive

import { DashboardListing } from './dashboard_listing';

function dashboardListingDecorator(reactDirective) {
  return reactDirective(DashboardListing);
}

export function dashboardListingDirectiveDecorator($provide) {
  $provide.decorator('dashboardListingDirective', [
    reactDirective', dashboardListingDecorator
  ]);
}

dashboard_listing

export class DashboardListing extends React.Component {
render() {
    return (
      // This could even be completely customized landing page if needed.
      <div>
        <h1>Test</h1>
        <p>From within plugin codebase </p>
      </div>
    );
  }
}

However, when this is done, since this is essentially wrapped in an ng-wrapper, the only thing that renders is the wrapper with no contents... i.e.

<dashboard-listing find="find" delete="delete" listing-limit="listingLimit" hide-write-controls="hideWriteControls" initial-filter="initialFilter" class="ng-scope"></dashboard-listing>
5

Any thoughts @Nathan_Reese?

6

What is your use case? What are you trying to do with the header? Maybe with a better understanding of your use case we could work out an enhancement request that could allow for a pluggable extension point in the future.

I think you would be better off just modifying https://github.com/elastic/kibana/blob/master/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js to fit your needs.

We are actively working on replacing angular in the 7.x series so these directives will be going away, making any changes to them brittle.

7

My use cases and requirements vary and require changes with every version of kibana.

One use case would be adding custom table rows (with additional dashboard info).
Anther could be adding various buttons in the header to perform various tasks like exporting dashboard definitions.

I do not have a way to modify kibana's code directly as the would mean us building a fork of kibana.

So being able to modify the react component directly via a HOC or some other method would be ideal.

8

@Nathan_Reese is there a way I can access the DashboardListing component, and create a Higher-Order Component (HOC) from within the decorator

I know at this point the component is already wrapped with the src/core_plugins/kibana/public/dashboard/listing/dashboard_listing_ng_wrapper.html and actually in a directive form.

Thoughts?

9

is there a way I can access the DashboardListing component, and create a Higher-Order Component (HOC) from within the decorator

not without directly modifying the source code

10

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