Add "recently accessed" to Kibana Home #16556
Conversation
|
@formgeist The mockups had the accessed list only showing a couple of values that fit on a single line. What is the best way to calculate what will fit? And to know when the rest need to be displayed in a drop down? |
💚 Build Succeeded |
💚 Build Succeeded |
|
@nreese I believe the idea was to have max. 5 before moving the rest into a dropdown. I suppose the truncation you have now doesn't work if each link has percentage width, so it'll be fluid if the screensize is smaller. Probably should have a breakpoint where the items just line up in a list instead, still max. 5 before a dropdown. Noticed that when I saved a query it created a "New saved search" item as well, but it seems to be discarded when I try to load it. The proper saved search with my long name works.
@snide Do you have any tricks to calculate the sizing responsively like described? ^ |
|
You should be able to use Flexbox and if you only give the last item (the +5 dropdown) a set width, the others should fill in the rest equally with |
|
@cchaos So I should not be truncating the labels in Javascript, but instead letting CSS do it? |
|
That would be the most flexible option. |
|
@cchaos Thanks for the help. The recently accessed section now exists on a single line and CSS is use to shorten the link text. @formgeist Thanks for finding the "New Saved Search" getting added to the history. I have added logic to avoid pushing searches without ids onto the history. |
|
Pretty awesome @nreese! I'm wondering what the best approach to handling
A few other quick questions. What did we decide upon for "separating" these links. At first it was @nreese I imagine that after we introduce this feature, users are going to wonder why they're recently visited ML jobs or APM applications aren't in the list. Thoughts on the scope of work there? Are we building in a way that accommodate these plugins as well? |
|
Yeah, it would be best to left align, though that gets harder to manage when you're trying to truncate... Somewhat of a complex grid layout here. I don't know the final solution for that. I believe @formgeist was coming up with a solution for separating items that included dots and/or icons? |
|
@alexfrancoeur Plugin authors will just have to do the following to add items to the history |
|
Thanks @nreese, I'll reach out to a few different teams. |
💚 Build Succeeded |
|
Been playing around with some layout changes to clean up everything. If we're putting the each of the Add data panels inside the big 100% panel, we should remove the borders. I think we have a general consensus around not doing panel in panel. I've also just adjusted how we display the "Data already in Elasticsearch? Set up index patterns" option so it flows a little better. Beyond the separator between each item in the Recently Accessed panel, we discussed using the
|
|
@nreese This is a quick and dirty solution for inline truncation. You'd just need to figure out a way to update the more dropdown to say and show whatever is not visible. |
💚 Build Succeeded |
💚 Build Succeeded |
|
@alexfrancoeur Try out the latest. The CSS has changed to fix the justification problem. The flex items no longer grow to fill the space and the Maybe a
|
💚 Build Succeeded |
💚 Build Succeeded |
|
I encountered an odd bug. Steps to repro:
|
💚 Build Succeeded |
💚 Build Succeeded |
|
@stacey-gammon Do you want to take another look at this before merging? |
|
Looks good! |
* kbn history * put Add Data section in panel and move to seperate component * RecentlyAccessed component * complete circle with recently accessed dashboards * record visualizations in recent accessed history * render recently accessed * do not show recently accessed panel when no recently accessed history * add test cases for home feature panels * render dropdown when more than 5 items * only add saved search when id is provided * remove border around add data cards, move set up index patterns to under cards * add dot icon to seperate recently accessed items * fix white space issues * add timelion sheet to recently accessed * fix spelling errors, better name space styles, enhance dropdown label * avoid cutting off bottom of letters, do not display separators with small screen * wrap separator (EuiIcon) in EuiText component so it is even link text * track history by object id to avoid duplicate entries when saved object is renamed * align link dropdown on right side * shift popover placement for small screens * update recently_accessed tests to look for nodes insted of using snapshots * move id to variable * change 'Recently accessed' to 'Recently viewed' * change more dropdown label * add max-width to flex item * include /app in link path, use arrow functions to remove bind in react props * add to recently accessed when saved object is saved * address cjcenizal's comments on test assertion order and react imports
* kbn history * put Add Data section in panel and move to seperate component * RecentlyAccessed component * complete circle with recently accessed dashboards * record visualizations in recent accessed history * render recently accessed * do not show recently accessed panel when no recently accessed history * add test cases for home feature panels * render dropdown when more than 5 items * only add saved search when id is provided * remove border around add data cards, move set up index patterns to under cards * add dot icon to seperate recently accessed items * fix white space issues * add timelion sheet to recently accessed * fix spelling errors, better name space styles, enhance dropdown label * avoid cutting off bottom of letters, do not display separators with small screen * wrap separator (EuiIcon) in EuiText component so it is even link text * track history by object id to avoid duplicate entries when saved object is renamed * align link dropdown on right side * shift popover placement for small screens * update recently_accessed tests to look for nodes insted of using snapshots * move id to variable * change 'Recently accessed' to 'Recently viewed' * change more dropdown label * add max-width to flex item * include /app in link path, use arrow functions to remove bind in react props * add to recently accessed when saved object is saved * address cjcenizal's comments on test assertion order and react imports
fixes #16280
Had to bump
enzyme-to-jsonto3.3.0for React.Fragment enzyme supportcc @alexfrancoeur @elastic/kibana-design