Locking down on Kibana dashboard

[erickyi2006]

The current supported way to lock down the Kibana dashbord is to append the embed=true in the dashboard URL. This is cool and it hides the Kibana menus and locks down the individual container menus. It works.

What I want is to give to our NOC users two additional parameters :-

1. a timepicker to choose which time line the data is applied to so that the visualization is displayed accordingly
2. a search input box so that they can do a quick text-free search.

What would be the best way for me to do that? If I can specify the schema JSON file, I am game to explore this as well. Any guidance would be most appreciated.

[erickyi2006]

Beautiful. I am getting there.

Still using embed=true and maintaining the internal logic, one small change in the dashboard index.html and I got it. Not ideal, I still think it would be better if there is a configuration in the JSON schema file.
Next, to work on the timepicker to turn it on under embed=true.

[epixa]

This isn't really possible in a supported way in Kibana. There are some feature requests open for these things, though:

Time picker in embedded dashboards: #2739
Including the search/filters in embedded dashboards: #3046

If you still want to try to hack this together in an unsupported way, I recommend asking for help on our irc channel

[txisme]

@erickyi2006 what changes did you do in index.html file to maintain the searchbar with embed true?

[Samuren111]

Hi @erickyi2006

I have similar setup and wanted to implement search and time picker ability in embed=true mode. Can you please advise what you changed so i can implement in my setup

Thanks
Sam

[erickyi2006]

oooh.. it was a long time ago. if memory serves me right, the search and timepicker is controlled by the chrome controller once embed is set to true. maybe set <navbar ng-show="chrome-getVisible()"> in index.html? (this is for v4.5xxx).

the latest version of kibana is different so whatever kludge we do, we must apply to the index.html or dashboard_app.html.

curious, @epixa , were the two features (#2739 and #3046) implemented?

[epixa]

@erickyi2006 They have not been implemented yet

[Samuren111]

Hi @erickyi2006 and @epixa

Thank you for your replies. Actually i am a little bit weak on html part and so i was having hard time to have search bar in embed mode in kibana version 6.0.1. As we are a week before going live so please if you guys can help me out with this code implementation as part of work around to have search bar in embed=true mode that will be really helpful for me and all our community.

Thank you in advance,
Sam

[erickyi2006]

@Samuren111 ,

did you try the nav-bar modification above?
in your kibana's public folder (index.html or dashboard_app.html), modify the following if it exists

<navbar ng-show="chrome-getVisible()">

the index.html should be in the this folder
[ROOT]/kibana/src/plugins/kibana/public/dashboard

[Samuren111]

Hi @erickyi2006

Thank you so much for your quick reply. So now code base is changed a little here https://github.com/elastic/kibana/blob/master/src/core_plugins/kibana/public/dashboard/dashboard_app.html i dont get where to have this line so that it can make search bar visible

Thanks
Sam

[erickyi2006]

hi Samuel

hmm.. on looking at the new source, i think I have told you something incorrect. the hidding is definitely related to chrome.getVisible but you must remove it instead of adding it in. my bad.

can you try this? please be patient as i am trying to work from theory. once you have installed kibana in your environment, go to the dashboard folder.

backup your index.html or dashboard_app.html.
remove chrome.getVisible.

original

<div ng-show="chrome.getVisible()" class="fullWidth" data-transclude-slot="bottomRow">
        <query-bar
          query="model.query"
          app-name="'dashboard'"
          on-submit="updateQueryAndFetch($query)"
          index-patterns="indexPatterns"
        >
        </query-bar>
</div>

new

<div class="fullWidth" data-transclude-slot="bottomRow">
        <query-bar
          query="model.query"
          app-name="'dashboard'"
          on-submit="updateQueryAndFetch($query)"
          index-patterns="indexPatterns"
        >
        </query-bar>
</div>

[Samuren111]

Hi @erickyi2006

I am really glad that you are helping me on this. Sure, so I tried the above source code edit but it didnt seem to have worked.

Thanks in advance,
Sam

[Samuren111]

Hi @erickyi2006, below is the code to dashboard.html

<dashboard-app class="app-container dashboard-container">
  <div class="fullScreenModePlaceholder">
    <div
      aria-label="Exit full screen mode"
      kbn-accessible-click
      ng-if="fullScreenMode"
      class="exitFullScreenMode"
      ng-click="exitFullScreenMode()"
    >
      <span class="exitFullScreenModeLogo" data-test-subj="exitFullScreenModeLogo"></span>
      <span class="exitFullScreenModeText" data-test-subj="exitFullScreenModeText">
        Exit full screen
        <span class="kuiIcon fa fa-angle-left"></span>
      </span>
    </div>
  </div>
  <!-- Local nav. -->
  <kbn-top-nav name="dashboard" config="topNavMenu">
    <!-- Transcluded elements. -->
    <div data-transclude-slots>
      <!-- Title. -->
      <div
        data-transclude-slot="topLeftCorner"
        class="kuiLocalBreadcrumbs"
        data-test-subj="breadcrumbs"
        role="heading"
        aria-level="1"
      >
        <div class="kuiLocalBreadcrumb">
          <a class="kuiLocalBreadcrumb__link" href="{{landingPageUrl()}}">Dashboard</a>
        </div>
        <div class="kuiLocalBreadcrumb">
          {{ getDashTitle() }}
        </div>
      </div>

      <!-- Search. -->
      <div ng-show="chrome.getVisible()" class="fullWidth" data-transclude-slot="bottomRow">
        <query-bar
          query="model.query"
          app-name="'dashboard'"
          on-submit="updateQueryAndFetch($query)"
        >
        </query-bar>
      </div>
    </div>
  </kbn-top-nav>

  <!-- Filters. -->
  <filter-bar
    ng-show="showFilterBar()"
    state="state"
    index-patterns="indexPatterns"
    ng-if="model.query.language === 'lucene'"
  ></filter-bar>

  <div
    ng-show="getShouldShowEditHelp()"
    class="text-center start-screen"
  >
    <h2 class="kuiTitle kuiVerticalRhythm">
      This dashboard is empty. Let&rsquo;s fill it up!
    </h2>

    <p class="kuiText kuiVerticalRhythm">
      Click the <a kbn-accessible-click class="kuiButton kuiButton--primary kuiButton--small" ng-click="showAddPanel()" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't set up any visualizations yet, <a class="kuiLink" href="#/visualize">visit the Visualize app</a> to create your first visualization.
    </p>
  </div>

  <div ng-show="getShouldShowViewHelp()" class="text-center start-screen">
    <h2 class="kuiTitle kuiVerticalRhythm">
      This dashboard is empty. Let&rsquo;s fill it up!
    </h2>

    <p class="kuiText kuiVerticalRhythm">
      Click the <a kbn-accessible-click class="kuiButton kuiButton--primary kuiButton--small" ng-click="enterEditMode()">Edit</a> button in the menu bar above to start working on your new dashboard.
    </p>
  </div>

  <dashboard-grid
    ng-show="!hasExpandedPanel()"
    on-panel-removed="onPanelRemoved"
    dashboard-view-mode="dashboardViewMode"
    panels="panels"
    get-vis-click-handler="getFilterBarClickHandler"
    get-vis-brush-handler="getBrushEvent"
    save-state="saveState"
    app-state="appState"
    toggle-expand="toggleExpandPanel"
    create-child-ui-state="createChildUiState"
    toggle-expand="toggleExpandPanel"
    register-panel-index-pattern="registerPanelIndexPattern"
    data-shared-items-count="{{panels.length}}"
    on-filter="filter"
  ></dashboard-grid>

  <dashboard-panel
    ng-if="hasExpandedPanel()"
    panel="expandedPanel"
    is-full-screen-mode="!chrome.getVisible()"
    is-expanded="true"
    dashboard-view-mode="dashboardViewMode"
    get-vis-click-handler="getFilterBarClickHandler"
    get-vis-brush-handler="getBrushEvent"
    save-state="saveState"
    app-state="appState"
    register-panel-index-pattern="registerPanelIndexPattern"
    create-child-ui-state="createChildUiState"
    toggle-expand="toggleExpandPanel(expandedPanel.panelIndex)"
  ></dashboard-panel>

</dashboard-app>

[Samuren111]

Hi @erickyi2006 ,

Any advise on how could i include search bar in dashboard embedded mode as still i am struggling on including search bar.

Thanks
Sam

[Samuren111]

Hi @erickyi2006

If you can please help on displaying search bar in embedded mode?

Thanks
Sam

[Samuren111]

Hi @erickyi2006

Were you able to figure out how we can add an search bar under embedded mode? It will really helpful if you can advise on this as we are going in production.

Thanks, Sam

[prakhar8979]

Hi @erickyi2006 @Samuren111

I am also trying to add the time picker and search panel in my embed code dashboard, can you please guide me..