[Dashboard] Implement custom title for panels. #5607

acs · 2015-12-09T10:02:36Z

elasticsearch-release · 2015-12-09T10:02:38Z

Jenkins standing by to test this. If you aren't a maintainer, you can ignore this comment. Someone with commit access, please review this and clear it for Jenkins to run; then say 'jenkins, test it'.

rashidkpc · 2015-12-09T15:19:27Z

I like the functionality here, there's a few things that would need to change to get it merge-able:

Store the title on $scope.uiState using the set/get methods.
Instead of a button, make the title clickable. Perhaps a hover with an icon to indicate it is editable. When the title is clicked change it to an editable input with the existing title already filled.
Add confirm, cancel and reset icons as buttons. Note the markup used in the dashboard query bar for getting them to flow nicely together.

LeeSyd · 2015-12-09T16:07:36Z

Different organisation but obviously similar requirements. Have viewed the Youtube video linked on the referenced article and looks good in terms of labeling aggregations/metrics. Would still like to extend this to cover the title of the saved visualisation as well if possible?

rashidkpc · 2015-12-09T16:21:03Z

This pull covers your "Also requested" not the "covered by update"

acs · 2015-12-09T17:29:24Z

@rashidkpc I think also in editing the title just clicking on it, but I was afraid that the normal user does not find the feature. But adding a hover with an icon is a good idea. Is there some sample UI in KIbana I can use as reference?

I will try to fix the other issues in order to get a merge-able PR. Thanks!

rashidkpc · 2015-12-09T17:43:56Z

Nothing currently, but we're moving in that direction. I'd say any time someone hovers the title bar of the panel, show the icon.

acs · 2015-12-09T17:52:52Z

Ok, I will play with the idea of showing the icon in hover case. It is the most effective UI. Also, I was thinking in just changing the full title with the edit input when in editing mode. So the title gets editable. Time to play :)

…set/get methods.

…n hover.

…title editing. Improve hover ux.

acs · 2015-12-10T12:16:10Z

@rashidkpc I have implemented your suggestions. Time to wait now for your review to iterate over the PR.

… narrower panels.

rashidkpc · 2015-12-10T17:52:37Z

jenkins, test it

rashidkpc · 2015-12-10T18:04:08Z

src/plugins/kibana/public/dashboard/components/panel/panel.html

+	      <span ng-if="panel.customTitle">{{panel.customTitle}}</span>
+	      <span ng-hide="panel.customTitle">{{savedObj.title}}</span>
+      </a>
+      <input size="10" ng-if="showFormTitle" text="title" ng-model="panel.customTitle" ng-show="chrome.getVisible() && editUrl">


This needs the proper bootstrap form classes added to it. See examples in the query bar.

Requires editUrl in order to be shown?

Just call it title instead of customTitle

Don't set size=10, use css to control the input width. See bootstrap way of doing this.

The ng-click shouldn't fire if !chrome.getVisible()

rashidkpc · 2015-12-10T18:15:31Z

I don't like the syncing back and forth of $scope.panel and $scope.uiState here, it would be more graceful to persist uiState on the dashboard. Thoughts @w33ble?

Proper bootstrap form classes added. Remove not needed editUrl. Use title as param name. Remove arrow syntax.

acs · 2015-12-11T05:59:12Z

@rashidkpc new version uploaded fixing some of your review comments.

Some doubts/issues:

I added editUrl because I thought this control that the dashboard is in edit mode. If it is not in edit mode, the title should not be editable. I have removed this check.
I have tried to layout the form as closer as possible to the query bar, But query bar is inside a and the styles are different. The mix between bootstrap and flex layout make some strange behaviors when for example, trying to use class="form-control" in the input text.
The ng-click shouldn't fire if !chrome.getVisible(): In this state, is it needed the title editor at all? Not sure yet what this checking control.

w33ble · 2015-12-14T21:42:37Z

I don't like the syncing back and forth of $scope.panel and $scope.uiState here

The syncing itself isn't toublesome - it's cumbersome, sure, but that's pretty much what needs to happen. Ideally though, this code should never set panel.title by hand, it should just change the uiState's title value and let the syncUI handler take care of the rest.

…SC key.

acs · 2016-02-11T11:10:34Z

@rashidkpc I think this version follows better Kibana style. Just pending fix the title of the panel so it uses the custom title. And next step should be adding the tests for this new feature?

rashidkpc · 2016-02-11T16:41:01Z

@acs Visually this looks good now! Tests would seal the deal!

acs · 2016-02-11T18:18:42Z

@rashidkpc great! I have created tests in the past for the custom label feature. But this one includes more logic. I should include Selenium tests for the GUI? Also, with mocha tests for the backend functionality. Any clues will be greatly appreciated. I will start working on tests asap.

rashidkpc · 2016-02-12T17:23:14Z

Selenium tests would be neccesary for a change of this nature, yes. I also noticed with the last merge this changes all of the ES6 code back to ES5, everything here should be ES6.

elasticsearch-release · 2016-02-20T23:16:50Z

Jenkins standing by to test this. If you aren't a maintainer, you can ignore this comment. Someone with commit access, please review this and clear it for Jenkins to run; then say 'jenkins, test it'.

rashidkpc · 2016-03-09T23:47:43Z

Going to un-assign this for now, @acs if you make any updates please @rashidkpc ping me

acs · 2016-03-10T04:45:44Z

@rashidkpc really busy working in our full retrieval and analytics platform. But creating these tests is on my high priority list. As soon as I have results, I will ping you in this ticket. My slot time for working on this should be next week probably.

acs · 2016-03-15T19:30:36Z

@rashidkpc I have started to work in creating the Selenium testing. I am following https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#running-browser-automation-tests Any special recommendation if needed is welcomed.

acs · 2016-03-15T21:42:19Z

@rashidkpc just getting familiar with intern, I can not see the tests for the dashboard (the custom title is something specific of the dashboards).

https://github.com/elastic/kibana/tree/master/test/functional/apps

Dashboard app does not have tests?

rashidkpc · 2016-03-15T23:02:25Z

It does not currently have selenium tests, correct, we're working on it. @LeeDr any idea how that looks right now?

LeeDr · 2016-03-16T20:28:51Z

I have a dashboard_page.js that should be on a PR soon. Right now it only has a couple of methods like getting the titles of the visualizations on a dashboard. And I have some tests that include dashboards but they're integration tests with beats products so they're a little farther out. In any case, I'd be happy to help you with these tests.

acs · 2016-03-16T21:23:42Z

@LeeDr great news! The tests should be fairly simple. Fill the input text with some title sample, and then interact with the three buttons and check the results. What are the best approach to implement them? Start from your PR and implement using it?

LeeDr · 2016-03-17T15:21:36Z

Currently, the visualize tests all clean up before and after themselves, so there's no saved visualizations to add to a dashboard. I'm going to submit a PR soon (today or tomorrow I hope) that changes the visualize tests to start with an empty kibana index but leave all the visualization there when done. And I have a new Dashboard suite that adds all those visualizations to a dashboard, saves it, loads it, etc. I'll mention you @acs on that PR so you'll see it. You can tack your tests onto that new dashboard test.

acs · 2016-03-17T16:44:02Z

@LeeDr cool!

acs · 2016-03-18T18:32:14Z

@rashidkpc So, until there are tests for the Dashboard in Kibana, this PR is blocked? Maybe we can add unit testing, merge the PR and add the tests once the Dashboard tests are ready for production? Just to plan my mind and my work :) I am ok with both plans.

spalger · 2016-04-05T15:03:58Z

jenkins, test it

rashidkpc · 2016-04-12T15:29:26Z

@LeeDr how are we looking on minimal Dashboard tests?

LeeDr · 2016-04-12T15:56:05Z

@rashidkpc I created #6576 for initial Dashboard tests.
I had a discussion with @tylersmalley and we agreed that a better approach than what I've done in that PR would be to add functionality to;
[ ] save or export each viz
[ ] test the exported JSON
[ ] have the dashboard test load saved vizs

What I've done so far in that PR is to change the viz tests to leave the saved visualizations by not reloading the empty .kibana index at the start of each test (which does save some test time). And then the Dashboard tests depend on those saved viz being there (not the most desired approach).

So that's why there's no Review label on that PR yet. I'll try to rework it ASAP.

panda01 · 2016-05-24T16:56:44Z

I'm not a fan of this implementation. IMO, this should be it's own directive. That simply takes an ng model and changes the necessary variable. that would remove the need for integration tests on dashboard which is the hold up for this, and make it so we can use it everywhere, and there are a few places i could imagine this would be useful.

I'm going to take a crack at this.

panda01 · 2016-06-08T16:19:25Z

Closed in favor of the above PR

[Dashboard] Implement custom title for panels.

7df4cff

rashidkpc added the updates_needed label Dec 9, 2015

rashidkpc self-assigned this Dec 9, 2015

rashidkpc mentioned this pull request Dec 9, 2015

Enhancement Request : Add 'Title" option to Visualisations #5606

Closed

Alvaro del Castillo added 3 commits December 10, 2015 04:15

[Dashboard] Store the panel custom title on $scope.uiState using the …

48dea27

…set/get methods.

[Dashboard] Make the panel title editable with an edit icon shown whe…

a036cc9

…n hover.

[Dashboard] Add confirm, cancel and reset icons as buttons for panel …

6451401

…title editing. Improve hover ux.

[Dashboard] Make input text for title smaller so icons are visible in…

e283f26

… narrower panels.

rashidkpc added review and removed updates_needed labels Dec 10, 2015

rashidkpc reviewed Dec 10, 2015
View reviewed changes

rashidkpc added the updates_needed label Dec 10, 2015

rashidkpc assigned w33ble and unassigned rashidkpc Dec 10, 2015

[dashboard] Edit title

a694869

Proper bootstrap form classes added. Remove not needed editUrl. Use title as param name. Remove arrow syntax.

[Panel] Follow Kibana style in title edit form. Support cancel with E…

de8d7fd

…SC key.

Merge branch 'master' into panel-title-custom

f327ff7

rashidkpc removed their assignment Mar 9, 2016

Merge branch 'master' into panel-title-custom

33f170e

Merge branch 'master' into panel-title-custom

2ef74d7

panda01 mentioned this pull request Jun 3, 2016

Custom Dashboard Panel Title #7336

Closed

panda01 closed this Jun 8, 2016

tbragin mentioned this pull request Jan 4, 2017

Dashboard-specific visualization title #3393

Closed

snyk-bot mentioned this pull request May 27, 2021

[Snyk] Fix for 1 vulnerabilities larrycameron80/kibana#87

Open

larrycameron80 mentioned this pull request Jan 10, 2023

[Snyk] Fix for 1 vulnerabilities larrycameron80/kibana#154

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] Implement custom title for panels. #5607

[Dashboard] Implement custom title for panels. #5607

acs commented Dec 9, 2015

elasticsearch-release commented Dec 9, 2015

rashidkpc commented Dec 9, 2015

LeeSyd commented Dec 9, 2015

rashidkpc commented Dec 9, 2015

acs commented Dec 9, 2015

rashidkpc commented Dec 9, 2015

acs commented Dec 9, 2015

acs commented Dec 10, 2015

rashidkpc commented Dec 10, 2015

rashidkpc Dec 10, 2015

rashidkpc commented Dec 10, 2015

acs commented Dec 11, 2015

w33ble commented Dec 14, 2015

acs commented Feb 11, 2016

rashidkpc commented Feb 11, 2016

acs commented Feb 11, 2016

rashidkpc commented Feb 12, 2016

elasticsearch-release commented Feb 20, 2016

rashidkpc commented Mar 9, 2016

acs commented Mar 10, 2016

acs commented Mar 15, 2016

acs commented Mar 15, 2016

rashidkpc commented Mar 15, 2016

LeeDr commented Mar 16, 2016

acs commented Mar 16, 2016

LeeDr commented Mar 17, 2016

acs commented Mar 17, 2016

acs commented Mar 18, 2016

spalger commented Apr 5, 2016

rashidkpc commented Apr 12, 2016

LeeDr commented Apr 12, 2016

panda01 commented May 24, 2016

panda01 commented Jun 8, 2016

[Dashboard] Implement custom title for panels. #5607

[Dashboard] Implement custom title for panels. #5607

Conversation

acs commented Dec 9, 2015

elasticsearch-release commented Dec 9, 2015

rashidkpc commented Dec 9, 2015

LeeSyd commented Dec 9, 2015

rashidkpc commented Dec 9, 2015

acs commented Dec 9, 2015

rashidkpc commented Dec 9, 2015

acs commented Dec 9, 2015

acs commented Dec 10, 2015

rashidkpc commented Dec 10, 2015

rashidkpc Dec 10, 2015

Choose a reason for hiding this comment

rashidkpc commented Dec 10, 2015

acs commented Dec 11, 2015

w33ble commented Dec 14, 2015

acs commented Feb 11, 2016

rashidkpc commented Feb 11, 2016

acs commented Feb 11, 2016

rashidkpc commented Feb 12, 2016

elasticsearch-release commented Feb 20, 2016

rashidkpc commented Mar 9, 2016

acs commented Mar 10, 2016

acs commented Mar 15, 2016

acs commented Mar 15, 2016

rashidkpc commented Mar 15, 2016

LeeDr commented Mar 16, 2016

acs commented Mar 16, 2016

LeeDr commented Mar 17, 2016

acs commented Mar 17, 2016

acs commented Mar 18, 2016

spalger commented Apr 5, 2016

rashidkpc commented Apr 12, 2016

LeeDr commented Apr 12, 2016

panda01 commented May 24, 2016

panda01 commented Jun 8, 2016