# Extend Dashboard Listing functionality

**URL:** <https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975>\
**Category:** Kibana\
**Created:** [March 5, 2019, 7:08pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975 "2019-03-05T19:08:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ENG618](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/eng618/32/59206_2.png) [@ENG618](https://discuss.elastic.co/u/ENG618)\
**Post date:** [March 5, 2019, 7:08pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/1 "2019-03-05T19:08:28Z")

</div>

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:

```auto
<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?

---

<div class="post-metadata">

**Author:** ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)\
**Post date:** [March 5, 2019, 8:20pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/2 "2019-03-05T20:20:25Z")

</div>

What version of kibana are you using?

---

<div class="post-metadata">

**Author:** ![ENG618](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/eng618/32/59206_2.png) [@ENG618](https://discuss.elastic.co/u/ENG618)\
**Post date:** [March 5, 2019, 8:21pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/3 "2019-03-05T20:21:03Z")

</div>

6.5.4

---

<div class="post-metadata">

**Author:** ![ENG618](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/eng618/32/59206_2.png) [@ENG618](https://discuss.elastic.co/u/ENG618)\
**Post date:** [March 5, 2019, 9:18pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/4 "2019-03-05T21:18:57Z")

</div>

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

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

**hack.js**

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

```

**dashboard\_listing\_directive**

```auto
import { DashboardListing } from './dashboard_listing';

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

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

```

**dashboard\_listing**

```auto
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.

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

```

---

<div class="post-metadata">

**Author:** ![ENG618](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/eng618/32/59206_2.png) [@ENG618](https://discuss.elastic.co/u/ENG618)\
**Post date:** [March 14, 2019, 4:00pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/5 "2019-03-14T16:00:54Z")

</div>

Any thoughts @Nathan_Reese?

---

<div class="post-metadata">

**Author:** ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)\
**Post date:** [March 14, 2019, 4:37pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/6 "2019-03-14T16:37:51Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![ENG618](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/eng618/32/59206_2.png) [@ENG618](https://discuss.elastic.co/u/ENG618)\
**Post date:** [March 15, 2019, 6:54pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/7 "2019-03-15T18:54:15Z")

</div>

> [@Nathan\_Reese](#):
>
> What is your use case? What are you trying to do with the header?

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.

> [@Nathan\_Reese](#):
>
> I think you would be better off just modifying

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](https://reactjs.org/docs/higher-order-components.html) or some other method would be ideal.

---

<div class="post-metadata">

**Author:** ![ENG618](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/eng618/32/59206_2.png) [@ENG618](https://discuss.elastic.co/u/ENG618)\
**Post date:** [April 3, 2019, 2:14pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/8 "2019-04-03T14:14:52Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)\
**Post date:** [April 3, 2019, 2:30pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/9 "2019-04-03T14:30:42Z")

</div>

> 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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 1, 2019, 2:30pm UTC](https://discuss.elastic.co/t/extend-dashboard-listing-functionality/170975/10 "2019-05-01T14:30:45Z")

</div>

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