search

opensearch-project / OpenSearch-Dashboards

📊 Open source visualization dashboards for OpenSearch.
https://opensearch.org/docs/latest/dashboards/index/
Apache License 2.0
1.67k stars 875 forks source link

[Home Page] Add recently viewed section to home page #6066

Open abbyhu2000 opened 7 months ago

abbyhu2000 commented 7 months ago

Add a section on the new home page for users to view a list of recently viewed objects.

More UI to followed. @kgcreative @lauralexis

Home-1

Original RFC: #5251

lauralexis commented 7 months ago

@abbyhu2000

Thank you for writing up this issue! Some notes on the functionality and design:

  1. This page section should contain recently updated work.
  2. The type of saved objects that will display in this section are the following: dashboards, notebooks, searches, visualizations, maps, observability searches, observability visualizations, and visualizations vis-builder (visualizations of the vis-builder type).
  3. This list can be filtered by type, so there can be up to 8 of each type displayed.
  4. There will be an empty state for the section, if there is no recent work. This content might get adjusted slightly from what you see here.
  5. I added a design for if we are unable to show previews.

Recent work section; no recent work Home-1

Recent work section; filtered by dashboards Home-2

Filter menu; more than one type showing Home

No previews Home

lauralexis commented 7 months ago

@abbyhu2000 The following is a description of style and content updates to the homepage seen in the mockups above.

Content

  1. Title of the first section is "Start working with data". It includes the following 4 cards:

    • Start with a sample data set; links to "app/home#/tutorial_directory"
    • Prepare and ingest data; link opens in a new tab to "https://opensearch.org/docs/latest/data-prepper/"; note the popout icon that denotes the link opens in a new tab and is external
    • Set up pre-built dashboards; links to "/app/integrations#/"
    • Query and filter data for in-depth analysis; links to "/app/data-explorer/discover#"
    • Note the use of sentence-casing for content, except for feature names like Data Prepper, Integrations, Discover

  2. Title of the third section is Learn OpenSearch basics. It includes the following 6 cards, all of which open in a new tab and have the popout icon that denotes that the link opens in another tab and is external. All of the 6 cards contain a snippet of content from the first lines in the article.

  3. Links on page

    • Remove the following page links: dev tools, manage, add data, visualize & analyze

Style

  1. Increase max-width of the page to 1680px
  2. Use OUI accordion with right aligned expand/collapse icon
  3. Use OUI accordion with border below
lauralexis commented 6 months ago

@abbyhu2000 Please see the following content updates by @vagimeli. Let me know if you have any questions.

Home

lauralexis commented 6 months ago

@abbyhu2000

I'm wondering if we can include both recently viewed and recently updated items in the recent items list? These would be items recently viewed and recently updated by a user (as opposed to all users in the tenant/ application, even though, if the security plugin is disabled, perhaps it would default to recently updated or viewed by all users. I'd look to you to help me understand what this behavior might be).

I've mocked up two possibilities for what this could look like. I prefer the tabbed approach. Please let me know if you see any issues with this design. (@kgcreative)

Screenshot 2024-03-20 at 4 31 20 PM
abbyhu2000 commented 6 months ago

Hi @lauralexis, I am currently modifying the styling in the sections. For the third card Set up pre-built dashboards; links to "/app/integrations#/", could you provide the picture? and also i don't think the route /app/integrations#/ exist?

lauralexis commented 6 months ago

Hi @abbyhu2000 --

Do you see https://playground.opensearch.org/app/integrations#/? This is where the third card should link.

I added the image for the card here too

integrations

abbyhu2000 commented 6 months ago

@lauralexis I see. The integration page only comes with installing the observability plugin. I think by default we should not show this card since user might not have observability plugin installed?

lauralexis commented 6 months ago

@abbyhu2000 Is it possible to do either of the following if the observability plugin is not installed?

  1. Hide the card, or
  2. Change the link destination to external documentation

I'm just trying to understand our options in terms of conditional behavior.

abbyhu2000 commented 6 months ago

@abbyhu2000 Is it possible to do either of the following if the observability plugin is not installed?

  1. Hide the card, or
  2. Change the link destination to external documentation

I'm just trying to understand our options in terms of conditional behavior.

@lauralexis i can do either one option for the observability plugin. The current implementation for the above PR is to hide the card if observability plugin is not installed. I can also change the behavior to the second option if needed.

lauralexis commented 6 months ago

@abbyhu2000 Hiding the card works. Thank you

abbyhu2000 commented 6 months ago

Hi @abbyhu2000 --

Do you see https://playground.opensearch.org/app/integrations#/? This is where the third card should link.

I added the image for the card here too

integrations

@lauralexis Could you attach picture of both dark mode and light mode for the integration card unless they are the same one? Thx!

abbyhu2000 commented 6 months ago

@lauralexis @ashwin-pc @kgcreative

I have some opinions on the filter button for the recent work section.

  1. Since recent work section only shows 8 items maximum, is it necessary to have a filter just over 8 items?

  2. Since there are 8 different types for the item, every time user choose a type, it is possible that they can get 8 totally different recent section. They can also choose to selected multiple different types, and that will add even more permutations to the recent work items. I feel like this is a confusing user experience, and overly complicated for the recent work section.

  3. Also since I am using 'services.chrome.recentlyAccessed' services to get a list of recent work, the max number recent items it stored is 20. So if we add a type filter and there are 8 types, that means we have to possibly store 64 items if we want to show 8 items of the type that is selected. (Since we store such a long list of item, some of the item prob has a super old timestamp like last updated 2 month ago, do we really need to still show them in the recent work?) I think this is unnecessarily complicated since users mostly just want to use this as a shortcut to access some pretty recent item that they wish to modified again. If they want to access other item that is not super recent, they will prob just go to saved object to access that item instead of using recent work section.

Thus I think we do not need a filter button on the recent work section, what do you guys think?

lauralexis commented 6 months ago

Hi @abbyhu2000 -- Do you see https://playground.opensearch.org/app/integrations#/? This is where the third card should link. I added the image for the card here too integrations

@lauralexis Could you attach picture of both dark mode and light mode for the integration card unless they are the same one? Thx!

@abbyhu2000 I've attached images for both the light and dark themes here

integrations-dark-theme integrations-light-theme

lauralexis commented 6 months ago

@lauralexis @ashwin-pc @kgcreative

I have some opinions on the filter button for the recent work section.

  1. Since recent work section only shows 8 items maximum, is it necessary to have a filter just over 8 items?
  2. Since there are 8 different types for the item, every time user choose a type, it is possible that they can get 8 totally different recent section. They can also choose to selected multiple different types, and that will add even more permutations to the recent work items. I feel like this is a confusing user experience, and overly complicated for the recent work section.
  3. Also since I am using 'services.chrome.recentlyAccessed' services to get a list of recent work, the max number recent items it stored is 20. So if we add a type filter and there are 8 types, that means we have to possibly store 64 items if we want to show 8 items of the type that is selected. (Since we store such a long list of item, some of the item prob has a super old timestamp like last updated 2 month ago, do we really need to still show them in the recent work?) I think this is unnecessarily complicated since users mostly just want to use this as a shortcut to access some pretty recent item that they wish to modified again. If they want to access other item that is not super recent, they will prob just go to saved object to access that item instead of using recent work section.

Thus I think we do not need a filter button on the recent work section, what do you guys think?

@abbyhu2000 An additional item to consider that will impact the final design:

Do you have any thoughts on the ability to filter between recently viewed by me and recently updated by me? This would add further complexity to the design, but is very useful as we have two different user types: the producer who is mostly authoring and interested in last updated, and the consumer who is mostly viewing and interested in last viewed. https://github.com/opensearch-project/OpenSearch-Dashboards/issues/6066#issuecomment-2010583258

To answer your question directly:

  1. The filter increases the usefulness of the section as it allows the user to see more of a specific type of asset that they are interested in. I don't think it is necessary, but I do think it is useful and is a better user experience.
  2. I disagree that the filtering experience is particularly confusing. I think it's fairly straightforward as all of our multi-select filters behave in this way. I do think there are improvements we could make to the filter experience, but we would do that at the design system level.
  3. "that means we have to possibly store 64 items" - Yes that's true, and we would potentially need to store even more to show last modified. We can set a cut off of 90 days (or some other duration), where we wouldn't show any items older than 90 days. I think that would be acceptable from a user expectation standpoint for recent items behavior.

To summarize: Let me know if you have concerns on the effort and timeline for this. I think it's valuable from the user experience perspective, but if it is very complex, we can break the work into phases, as I think we can still deliver some value without the filter. More importantly/ as a higher priority, we want to show items that have been updated and items that have been viewed. Let me know your thoughts!