Skip to content

[Ingest] Agent configuration - create data source UI #60696

Description

@jen-huang

image
image
image

View in Figma

View Figma prototype

Videos:

  • starting on agent configuration page: https://share.getcloudapp.com/YEuA9QrJ
  • starting from integration detail page: https://share.getcloudapp.com/7KuR5Pll
  • please note: 2 subtle changes on behavior since recording these videos:
    • The EuiBottomBar should always be visible, but the submit button should be disabled depending on the state of the form.
    • Ignore where it says "X / X streams enabled" in the bottom left, just leave it blank. For the "edit" workflow, this area will say "You have unsaved changes" if the form is in a dirty state.

Convert existing 3-step create data source wizard that spans separate pages into one page. The page will still be three steps but will be hidden and enabled as the user completes them.

Tasks

  • Convert existing steps into one page
  • Add sticky bottom bar for Cancel/Save actions
  • Convert existing agent count check callout into modal

Activity

  1. added
    Feature:EPMFleet team's Elastic Package Manager (aka Integrations) project
    Feature:FleetFleet team's agent central management project
    on Mar 19, 2020
  2. elasticmachine commented on Mar 19, 2020

    @elasticmachine
    Contributor

    Pinging @elastic/ingest-management (Feature:EPM)

  3. self-assigned this
    on Apr 1, 2020
  4. hbharding commented on Apr 1, 2020

    @hbharding
    Contributor

    @ruflin @nchaulet @jen-huang I updated this issue with screenshots and 2 videos that walk through the 2 possible userflows for adding a data source.

    After i posted it, I noticed some of my language is inconsistent, "New data source" vs "Add data source". I've gone back and forth on this. At the moment, I'm thinking it should say "Add data source". Let me know and I can update screenshots, or we can just record the decision here.

  5. ruflin commented on Apr 2, 2020

    @ruflin
    Contributor

    Few notes from my side which I think we also discussed in our meeting yesterday:

    • I like that all is in on screen
    • I think Step 2 and 3 should be just 2 steps
    • I like the bottom bar
    • I think we should remove the 4/8 streams enabled

    +1 on calling it "add data source", also the button in the package detail view.

  6. hbharding commented on Apr 3, 2020

    @hbharding
    Contributor

    I updated screenshots and left a note about the expected behavior based on our meeting. I also included a link to the prototype which starts at the beginning of the flow. For the time being, I want to keep steps 2 and 3 as is. I think @ruflin might be right, but I don't want to spend the time right now updating the designs, and I believe the code already has these parts separated into steps. I'll make note of this here #59807

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Feature:EPMFleet team's Elastic Package Manager (aka Integrations) projectFeature:FleetFleet team's agent central management projectTeam:Fleet - DEPRECATEDUse Team:streams-uidesign

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions