Add a feature for custom panel titles #14831

stacey-gammon · 2017-11-07T22:19:47Z

Release note: Introduces the ability to specify custom titles, or remove the title entirely, for individual dashboard panels. Just hit the reset link to restore the title to it's original value.

Screenshots:
With no customization:

Customization process:

With customized, or removed, titles:

trevan · 2017-11-07T22:45:50Z

Is it possible to blank the title?

stacey-gammon · 2017-11-08T15:08:32Z

Is it possible to blank the title?

@trevan - yep, you just delete all the text. I wonder if we could make this a little clearer though. maybe an X button, or when you delete all the text, use placeholder text that says no title.

When there is no title the panel header hides in view mode, to give more space to the visualization underneath, and the actions menu shows up on hover. This is causing it to overlay the legend toggle a little bit but I think it won't be as bad once #14811 is submitted, which adds some padding.

cjcenizal · 2017-11-08T16:00:20Z

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_form.js

+  }
+  return (
+    <div
+      data-test-subj="dashboardPanelTitleInputMenuItem"


You can add style={{ padding: 16 }} to this container to fix the padding for now. @snide Any ideas for a component which can do this for us?

I've thought of making a padding size="m" component similar to spacer. Unfortunately with the way context / popovers can be different it's not easy to come up with a one size fits all solution.

Worst-case scenario, how about a borderless, shadowless Panel?

stacey-gammon · 2017-11-09T15:34:09Z

Here's how the expand floater looks with the new padding stuff. Still overlays it a little bit, but looks better.

stacey-gammon · 2017-11-09T15:40:30Z

Actually, having no title now looks a little weird because there is padding everywhere but the top:

I'm a little worried users won't like the margins + padding taking up so much space away from their visualizations.

snide · 2017-11-09T21:16:54Z

@stacey-gammon I hadn't thought about background coloring. Do you think we could maybe dedicate a couple hours to pair through this stuff. I really don't have the knowledge of depth of configuration that some of these panels can get in, and all of its fixable (for example, putting the padding on the viz itself so the coloring can be flush) but I'll likely run into this stuff a lot without a suped up dash to test locally.

Is there a premade set of saved objects you use?

stacey-gammon · 2017-11-09T22:07:57Z

Yea, lets sync tomorrow @snide.. Time series visual builder can have background color, and maps, are the only two I'm aware of that might look silly like that.

stacey-gammon · 2017-11-14T20:33:12Z

@snide - I think I fixed up all the padding. Pushing it into the visualization restores the padding but keeps the colors flush to the edge of the panel. Except for tile maps which I had to override... and some reason region maps don't need it? That was strange (cc @thomasneirynck).

Anyway, seems to be doing what we want now, though I made the padding 8px instead of 16px. Still helps with the expand toggle.

snide · 2017-11-14T22:26:38Z

@stacey-gammon awesome, thank you! looks great.

nreese · 2017-11-15T13:42:25Z

Looks like the menu is getting cut off on the right side

stacey-gammon · 2017-11-15T14:46:59Z

Ah, good call @nreese, should be fixed now:

nreese · 2017-11-15T13:45:30Z

src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.test.js

@@ -26,6 +29,7 @@ function getProps(props = {}) {

 beforeAll(() => {
  store.dispatch(updateViewMode(DashboardViewMode.EDIT));
+  store.dispatch(setPanels([{ panelIndex: 'foo1' }]));


What is this doing? Why foo1?

it's setting up redux so that the dashboard will be rendered with a single panel with a panel id/index of foo1 . foo1 could be anything as long as it matches the defaultTestProps panel above. Without this call it'll break because you will be passing in props that say render panel foo1 but that panel won't exist in the store, so I'll get an error like Cannot read property 'title' of undefined.

sorry, I did not see this was a test file. Disregard the questions

nreese · 2017-11-15T15:11:40Z

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js

    ];
    if (!this.props.isExpanded) {
-      items.push(<DeleteMenuItem key="3" onDeletePanel={this.onDeletePanel} />);
+      mainPanelMenuItems.push({
+        name: 'Delete visualization',


Delete visualization is a little ambiguous. Does it delete the visualization from the dashboard or delete the visualization from kibana entirely? Maybe keep the old text Delete from dashboard?

Good catch, this name change wasn't intentional. I'll put back the old variation!

nreese · 2017-11-15T15:39:00Z

One more thing - would it be possible to color the caret (little triangle thingy) in the menu? It looks a little funny when the top of the menu is grey and the caret is still white.

stacey-gammon · 2017-11-15T16:07:23Z

Looks like the popover component has the ability to set that by using withTitle, but I'm not totally sure what the title should be for the main panel - Panel settings and Panel options? Or maybe since right now it's just the panel title I should do Panel options for the main panel and Edit title
for the link and second panel? Thoughts? Long term, we do want Panel options because more stuff will go in there (e.g. custom time range). So maybe worth figuring out the options wording now instead of using panel title.

nreese · 2017-11-15T16:44:27Z

Maybe label the top menu Panel or Panel menu?

I think it makes sense to leave the secondary menu labeled as Panel options since more stuff will be added to it.

cjcenizal · 2017-11-15T17:09:12Z

How about naming the first panel "Options" and the second panel "Customize panel"? That makes more sense to me since the first panel has a bunch of somewhat-disconnected choices, so an ambiguous term like "Options" applies, whereas the second panel has a more specific purpose (to customize appearance).

nreese · 2017-11-15T19:45:53Z

Looks like there is no padding on Customize panel menu

cjcenizal · 2017-11-15T20:11:31Z

@nreese I think we should add a version of PanelSimple which has padding but no border or shadow around it. That would solve the problem here and it would also be something we can use in the EUI Framework. @snide does this sound good to you for a short-term solution?

stacey-gammon · 2017-11-15T20:32:13Z

@nreese can you try refreshing the browser or restarting kibana? Maybe you switched branches and it didn't pick up the updated style sheet? Should still have the padding on it.

nreese

server restart fixed everything and the padding is there.

lgtm

stacey-gammon · 2017-11-15T21:59:30Z

Failed on #14920

jenkins, test this

- add enter on close functionality - make reset title a link instead of a button - Push css to visualizations instead of the panel. This means background colors will be flush to the panel. Override for tile maps which apparently need it (yet region maps don’t for some reason??)

kobelb

LGTM

* Add a feature for custom panel titles * Add tests and put back data-test-subjs * sync with master and add padding to form * UI/UX cleanup - add enter on close functionality - make reset title a link instead of a button - Push css to visualizations instead of the panel. This means background colors will be flush to the panel. Override for tile maps which apparently need it (yet region maps don’t for some reason??) * Fix refactor miss from merge * whoops, put block display back to make link fall to bottom * Undo accidental delete visualization name change * Color top pop over arrow correctly * Use naming Options and Customize Panel * update jest snapshot * Use custom panels for data-title attributes

stacey-gammon added Feature:Dashboard Dashboard related features :Sharing release_note:enhancement v6.1.0 v7.0.0 labels Nov 7, 2017

cjcenizal reviewed Nov 8, 2017

View reviewed changes

stacey-gammon force-pushed the feature/custom-panel-titles branch from 8f9ada1 to 8fa3efc Compare November 14, 2017 20:26

stacey-gammon requested review from nreese and kobelb November 15, 2017 12:58

nreese reviewed Nov 15, 2017

View reviewed changes

nreese approved these changes Nov 15, 2017

View reviewed changes

stacey-gammon force-pushed the feature/custom-panel-titles branch from e5fb671 to 54cf0cc Compare November 16, 2017 13:56

stacey-gammon added 11 commits November 16, 2017 12:31

Add a feature for custom panel titles

1cb2a5d

Add tests and put back data-test-subjs

16bc0aa

sync with master and add padding to form

c217a8a

Fix refactor miss from merge

5a1d337

whoops, put block display back to make link fall to bottom

8a77dd1

Undo accidental delete visualization name change

168f18a

Color top pop over arrow correctly

6a2ea23

Use naming Options and Customize Panel

1ebdafa

update jest snapshot

a7c91cd

Use custom panels for data-title attributes

80d33d2

stacey-gammon force-pushed the feature/custom-panel-titles branch from 54cf0cc to 80d33d2 Compare November 16, 2017 18:12

kobelb approved these changes Nov 16, 2017

View reviewed changes

stacey-gammon merged commit c2c1b51 into elastic:master Nov 16, 2017

stacey-gammon mentioned this pull request Nov 16, 2017

[6.x] Add a feature for custom panel titles (#14831) #15004

Merged

This was referenced Nov 22, 2017

Hide saved visualization title when used in a dashboard #9048

Closed

Dashboard-specific visualization title #3393

Closed

jimgoodwin added release_note:roadmap and removed release_note:enhancement labels Nov 30, 2017

aphelionz mentioned this pull request May 7, 2018

Accessibility: Kibana 6.3 Meta Issue #18866

Closed

48 tasks

stacey-gammon mentioned this pull request May 30, 2018

Remove padding that exists only in 6.x but not master #19547

Merged

stacey-gammon deleted the feature/custom-panel-titles branch September 21, 2018 14:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a feature for custom panel titles #14831

Add a feature for custom panel titles #14831

stacey-gammon commented Nov 7, 2017 •

edited

trevan commented Nov 7, 2017

stacey-gammon commented Nov 8, 2017

cjcenizal Nov 8, 2017

snide Nov 8, 2017

cjcenizal Nov 8, 2017

stacey-gammon commented Nov 9, 2017

stacey-gammon commented Nov 9, 2017 •

edited

snide commented Nov 9, 2017

stacey-gammon commented Nov 9, 2017

stacey-gammon commented Nov 14, 2017

snide commented Nov 14, 2017

nreese commented Nov 15, 2017

stacey-gammon commented Nov 15, 2017

nreese Nov 15, 2017

stacey-gammon Nov 15, 2017

nreese Nov 15, 2017

nreese Nov 15, 2017

stacey-gammon Nov 15, 2017

nreese commented Nov 15, 2017 •

edited

stacey-gammon commented Nov 15, 2017

nreese commented Nov 15, 2017

cjcenizal commented Nov 15, 2017

nreese commented Nov 15, 2017

cjcenizal commented Nov 15, 2017

stacey-gammon commented Nov 15, 2017

nreese left a comment

stacey-gammon commented Nov 15, 2017 •

edited

kobelb left a comment

Add a feature for custom panel titles #14831

Add a feature for custom panel titles #14831

Conversation

stacey-gammon commented Nov 7, 2017 • edited

trevan commented Nov 7, 2017

stacey-gammon commented Nov 8, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stacey-gammon commented Nov 9, 2017

stacey-gammon commented Nov 9, 2017 • edited

snide commented Nov 9, 2017

stacey-gammon commented Nov 9, 2017

stacey-gammon commented Nov 14, 2017

snide commented Nov 14, 2017

nreese commented Nov 15, 2017

stacey-gammon commented Nov 15, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nreese commented Nov 15, 2017 • edited

stacey-gammon commented Nov 15, 2017

nreese commented Nov 15, 2017

cjcenizal commented Nov 15, 2017

nreese commented Nov 15, 2017

cjcenizal commented Nov 15, 2017

stacey-gammon commented Nov 15, 2017

nreese left a comment

Choose a reason for hiding this comment

stacey-gammon commented Nov 15, 2017 • edited

kobelb left a comment

Choose a reason for hiding this comment

stacey-gammon commented Nov 7, 2017 •

edited

stacey-gammon commented Nov 9, 2017 •

edited

nreese commented Nov 15, 2017 •

edited

stacey-gammon commented Nov 15, 2017 •

edited