search

influxdata / ui

UI for InfluxDB
89 stars 41 forks source link

Epic: firstMile - MQTT Onboarding Wizard #5362

Open Luckette opened 1 year ago

Luckette commented 1 year ago

As a Builder using the MQTT method of Data Acquisition in InfluxDB Cloud, I want to write and query my data in less than 5 minutes so that I can quickly learn the basic functionality of InfluxDB Cloud without spending excess time heads-down in the documentation.

Business Goal

Product Brief

Target Audience

Core Team

Design Notes

https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1810%3A10781

Image

User Stories & Acceptance Criteria

User Story: Home Page 

    ACs
    - Update the homepage to match Figma: https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1419%3A6436
    - Order of Client Library Options at the top: 

           Python, Arduino, JavaScript.Node.js, GO

    - Underneath client library options should be a link to "view more" which takes users to the existing load data page
    - Underneath the client library options should be a page break then: 

            Native MQTT
            Connect to your MQTT subscription in the cloud

            InfluxDB's CLI
            Write and query data using the Influx command line interface. Supports CSV and line protocol.

            Server Agent (Telegraf)
            Easily collect and write data using custom standalone agent plugins

User Story: Wizard Structure

    ACs
    - Establish the basic structure of the MQTT Onboarding Wizard:

       Overview
       Connect to Broker
       Subscribe to Topic
       Define Data Parsing Rules
       Finish

   Dev Notes
    - Note: The Dumplings team will own & maintain the "Overview" page and the "Finish" page. The Data Acquisition with own and maintain the middle steps. Any improvements/changes to the middle steps will be implemented by the Data Acquisition team. (Their PM is Samantha Wang, and their lead dev is Gene Hynson)

User Story: User Navigation

    ACs
    - Match the navigation that the Data Acquisition team already created for their MQTT Wizard. That is, keep all content on 1 page. No need for a "next" button, the user should be able to scroll to proceed. 
    - The wizard step icons should indicate when the user progresses to the next step via the wizard and via scrolling
    - The wizard icons should turn blue and contain a white checkmark once completed/scrolled past
    - If the user chooses to navigate using the wizard icons, bring the user to the corresponding wizard section with that section displaying at the top of the screen. 
    - See Figma: https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1810%3A10781
    - Coordinate w/ Gene Hynson as needed (Data Acquisition dev lead)

User Story: Overview

    ACs
    - Reuse the same overview page components as the previous wizards
    - Everything should remain the same EXCEPT:

          - The text under the welcome statement should say "In the next 5 minutes, you will connect to your MQTT data and define parsing rules."    

          - The user won't need to see a "next" button to proceed, they can simply scroll down or use the wizard to proceed to next. 

    Dev Notes
    - See Figma: https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1810%3A10781

User Story: Native MQTT Wizards Steps

    ACs
    - The DA team will own and maintain the Native MQTT Steps of the wizard, however, we need to make sure that the overview page leads the user seamlessly into the Native MQTT Steps from the overview step. Native MQTT steps for MVP MQTT Onboarding wizard: 

            Connect to a Broker
            Subscribe to Topic
            Define Data Parsing Riles

   Dev Notes
    - Note: The Dumplings team will own & maintain the "Overview" page and the "Finish" page. The Data Acquisition with own and maintain the middle steps. Any improvements/changes to the middle steps will be implemented by the Data Acquisition team. (Their PM is Samantha Wang, and their lead dev is Gene Hynson)
    - Ideally, we want to code this in a way that allows the DA team to make changes that automatically get reflected in the onboarding flow. Team w/ the DA team as needed to determine the best way to implement.

User Story: Finish 

    ACs
    - Finish page should have similar components as the other wizards (Congrats, Confetti, Thumbs up / Thumbs down component, Key Concepts, and InfluxDB University)
   - Text underneath "Congrats" should say "You completed connecting to your MQTT broker and writing data to InfluxDB Cloud"
    - One of the UI boxes should be the option to see an "MQTT Blog Article"
    - See Figma: https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1810%3A10782

   Dev Notes
   - We're still waiting on the MQTT Blog Article to be published. Gary Fowler drafted the blog on 8/15/22.

User Story: Set up User Pilot Survey

    ACs
    - Tara (Designer) will configure the user pilot survey when the dev team is close to launching.

User Story: UI Eventing

  ACs
   - Capture all the same events that are captured for the other wizards.
   - See our UI Eventing Dictionary here: https://influxdb.atlassian.net/wiki/spaces/IPO/pages/2530574337/UI+Eventing+Dictionary

  Dev Notes
    - Eventually, this should end up in Domo for PM and Analytics to create visuals

User Story: Update/Create Deep Links

User Story: Manage via Feature Flag

User Story: End to End Testing

User Story: Remove Feature Flag

Luckette commented 1 year ago

@taramk @sjwang90 @kristinarobinson Here is the Epic for MQTT Onboarding

kristinarobinson commented 1 year ago

@Luckette - Is this on hold? Or are we doing just an MVP?

sjwang90 commented 1 year ago

I'd really like to get the Native MQTT on the homepage at a minimum. I've outlined some options depending how much engineering / design time we can get.

Proposal: add MQTT icon to homepage that directs to Native Subscriptions + guiding user through set up with Sample MQTT broker