feat(ui): redesign load data page #19246

alexpaxton · 2020-08-06T21:55:06Z

UX Goals

Make it easier for users to see all the ways they can write data
Make it easier for users to find the method that works for them (and set it up quickly)

Architecture Notes

This section of the app is essentially a miniature static site. The addition of markdown and image files for all these pages makes this PR seem much larger than it is. The code previously located in src/clientLibraries has been moved and modified to fit the new model.

Sources Page
- Displays list of all data sources organized by category
- There are 2 categories with unfinished content that are feature flagged off
Details template
- Used to display client libraries, telegraf plugins, and others
- Renders a markdown file
Content definition files
- One file per category (example: contentClientLibraries)
- Determines information about the category and what items appear within it
- Each category has a folder for all the markdown files that relate to it

Build Changes

Add support for importing SVG and MD files into react components

CHANGELOG.md updated with a link to the PR (not the Issue)
Well-formatted commit messages
Rebased/mergeable
Tests pass
http/swagger.yml updated (if modified Go structs or API)
Documentation updated or issue created (provide link to issue/pr)
Signed CLA (if not already signed)

alexpaxton · 2020-08-06T21:56:52Z

drdelambre · 2020-08-13T23:47:35Z

ui/src/writeData/components/WriteDataSection.tsx

+import {sortBy} from 'lodash'
+
+// Contexts
+import {WriteDataSearchContext} from 'src/writeData/containers/WriteDataPage'


ITS SPILLING OUT OF NOTEBOOKS

You did this to me

drdelambre · 2020-08-13T23:48:42Z

ui/src/writeData/components/WriteDataSections.tsx

+
+  const filteredSections = WRITE_DATA_SECTIONS.filter(section => {
+    const containsMatches = sectionContainsMatchingItems(section, searchTerm)
+    const featureFlagEnabled = isFlagEnabled(section.featureFlag)


drdelambre · 2020-08-13T23:56:20Z

ui/src/writeData/components/WriteDataSection.tsx

+    doesItemMatchSearchTerm(item.name, searchTerm)
+  )
+
+  const sortedItems = sortBy(filteredItems, item => item.name.toLowerCase())


filteredItems.sort((a,b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))

now get that lodash nonsense outta here

drdelambre · 2020-08-13T23:56:56Z

ui/src/writeData/components/clientLibraries/ClientLibrariesIndex.tsx

+import WriteDataIndexView from 'src/writeData/components/WriteDataIndexView'
+
+// Constants
+import WRITE_DATA_CLIENT_LIBRARIES_SECTION from 'src/writeData/constants/contentClientLibraries'


how come not wrapped in curly brackets?

drdelambre · 2020-08-13T23:58:24Z

ui/src/writeData/constants/contentClientLibraries.ts

+import {WriteDataItem, WriteDataSection} from 'src/writeData/constants'
+
+// Markdown
+import ArduinoMarkdown from 'src/writeData/components/clientLibraries/Arduino.md'


if only there was a way to self register these to the page.... where have i seen that....

drdelambre · 2020-08-13T23:59:39Z

ui/src/writeData/constants/contentTelegrafPlugins.ts

+import azure_storage_queueMarkdown from 'src/writeData/components/telegrafPlugins/azure_storage_queue.md'
+import bcacheMarkdown from 'src/writeData/components/telegrafPlugins/bcache.md'
+import beanstalkdMarkdown from 'src/writeData/components/telegrafPlugins/beanstalkd.md'
+import bindMarkdown from 'src/writeData/components/telegrafPlugins/bind.md'


if webpack, could somehow find all of these.. using a folder mechanism....

drdelambre · 2020-08-14T00:01:11Z

ui/src/writeData/containers/ClientLibrariesPage.tsx

+  )
+}
+
+@ErrorHandling


we should put watts up to teaching us how to add decorators to functional components

drdelambre · 2020-08-14T00:04:15Z

my favorite part was when there was that block of code hidden in the middle of all of that svg code. like treasure hunting

drdelambre

lgtm. these telegraf plugins should be served by an api that reads from the latest version of telegraf and not defined here to languish and fall out of spec.... but thats for a different PR. the design looks real nice! like it'll work for people and junk.

…details views

This reverts commit 67857f2.

This reverts commit 0111f02.

* Revert "Revert "feat(ui): redesign load data page (#19246)" (#19336)" This reverts commit 0111f02. * fix: guard against no tokens or buckets * fix: typo * refactor: name sources page titles properly * fix: avoid referencing image asset inline

* refactor: rename client libraries from overlay to page * refactor: remove client libraries from load data nav * refactor: remove client libraries from main nav * refactor: convert client library overlays to pages * feat: create Write Data and related sub-pages * fix: assing proper component to route * refactor: separate sections of write data page into own files * refactor: implement telegraf plugins pages * refactor: rename components to match filenames * refactor: organize client libraries within writeData folder * fix: cleanup loose ends from moving files around * refactor: move client lib graphics into write data section * fix: correct import path * fix: import path * feat: enable importing of markdown files * feat: use markdown source for example telegraf plugin * feat: convert Arduino page to use markdown * fix: properly type svg and markdown imports * feat: replace react component images with regular images * feat: add placeholder image for items without images * fix: cleanup * feat: start standardizing pages for write data views * refactor: use params instead making a component for each page * refactor: make client libraries pages all markdown and use template * refactor: cleanup * refactor: move templates out of folder * refactor: style details view * feat(ui): add activemq, aerospike, and bcache * feat(writeData): load up all the telegraf inputs * feat: add telegraf explainer to telegraf plugins pages * refactor: make card grid more compact * refactor: polish * feat(write): adding logos * fix(writeData): more logos * refactor: make CopyButton more customizable * refactor: add real content to telegraf plugin explainer * refactor: polish thumbnail appearance * refactor: make index views scrollable * feat(write): alphabetize & more logos * refactor: increase width of token overlay * refactor: add description to telegraf section * feat: wrap each section in feature flags * refactor: WIP helper widgets for details pages * feat(writeData): add more logos * feat(writeData): update Plugin names, readmes, add logos * feat(write): final batch of logos * feat(write): readme updates * feat(write): adding proxmox * refactor: add tabbed navigation back to browse page * refactor: make code snippets templatized * fix: replace untemplatized URL key in arduino markdown * refactor: cleanup * refactor: rename "browse" to "sources" * refactor: rename feature flags to match page names * refactor: make sort case insensitive * refactor: make code sample helper only appear in client libraries pages * fix: remove image padding from client library logos * fix: select first user bucket instead of first any bucket * fix: make less legible logos more legible * refactor: make search field autofocus * fix: linter error * fix: case sensitive file import * fix: remove empty prop definitions * fix: more case sensitive imports * refactor: remove use of lodash * fix(writeData): update kapa & tele logos; rename internal plugin * fix: repair broken explorer test * fix: rework client libs e2e tests to match new design * refactor: rename e2e test appropriately * refactor: rewrite data sources e2e to assert proper rendering of the details views * feat: add GA tracking of code snippet copy event * chore: changelog update Co-authored-by: Russ Savage <[email protected]>

This reverts commit 67857f2.

* Revert "Revert "feat(ui): redesign load data page (#19246)" (#19336)" This reverts commit 0111f02. * fix: guard against no tokens or buckets * fix: typo * refactor: name sources page titles properly * fix: avoid referencing image asset inline

alexpaxton added 16 commits August 5, 2020 14:57

refactor: rename client libraries from overlay to page

f54fc1f

refactor: remove client libraries from load data nav

bb4272f

refactor: remove client libraries from main nav

4ef9bd3

refactor: convert client library overlays to pages

51c276b

feat: create Write Data and related sub-pages

9b111d5

fix: assing proper component to route

a9ee256

refactor: separate sections of write data page into own files

46c692f

refactor: implement telegraf plugins pages

487cfe9

refactor: rename components to match filenames

64aeac4

refactor: organize client libraries within writeData folder

517ee87

fix: cleanup loose ends from moving files around

ed74c54

refactor: move client lib graphics into write data section

edabb58

fix: correct import path

a93c04c

fix: import path

5d3ec20

feat: enable importing of markdown files

cfd8794

feat: use markdown source for example telegraf plugin

8fda8ac

alexpaxton and others added 13 commits August 6, 2020 15:10

feat: convert Arduino page to use markdown

9365b8f

fix: properly type svg and markdown imports

a326956

feat: replace react component images with regular images

4dd09cd

feat: add placeholder image for items without images

0a14036

fix: cleanup

31bc620

feat: start standardizing pages for write data views

f0ed073

Merge branch 'master' into feat/write-data-page

43b5203

refactor: use params instead making a component for each page

2b5eb45

refactor: make client libraries pages all markdown and use template

927db46

refactor: cleanup

7fd1eac

refactor: move templates out of folder

6df3661

refactor: style details view

09f3909

feat(ui): add activemq, aerospike, and bcache

9e78473

drdelambre reviewed Aug 13, 2020

View reviewed changes

drdelambre reviewed Aug 14, 2020

View reviewed changes

fix: more case sensitive imports

efe3b94

refactor: remove use of lodash

1d87ea4

drdelambre approved these changes Aug 14, 2020

View reviewed changes

fix(writeData): update kapa & tele logos; rename internal plugin

7b28e5a

sanderson mentioned this pull request Aug 14, 2020

Update documentation for new "Load Data" UI influxdata/docs-v2#1311

Closed

alexpaxton added 8 commits August 14, 2020 10:12

fix: repair broken explorer test

083ce0f

fix: rework client libs e2e tests to match new design

a436b6a

refactor: rename e2e test appropriately

7673201

refactor: rewrite data sources e2e to assert proper rendering of the …

1fc15f2

…details views

feat: add GA tracking of code snippet copy event

060deac

chore: changelog update

3796e87

Merge branch 'master' into feat/write-data-page

519b501

Merge branch 'master' into feat/write-data-page

71de7bd

alexpaxton merged commit 67857f2 into master Aug 14, 2020

alexpaxton deleted the feat/write-data-page branch August 14, 2020 21:00

alexpaxton added a commit that referenced this pull request Aug 15, 2020

Revert "feat(ui): redesign load data page (#19246)"

083882e

This reverts commit 67857f2.

alexpaxton added a commit that referenced this pull request Aug 15, 2020

Revert "feat(ui): redesign load data page (#19246)" (#19336)

0111f02

This reverts commit 67857f2.

alexpaxton added a commit that referenced this pull request Aug 17, 2020

Revert "Revert "feat(ui): redesign load data page (#19246)" (#19336)"

1744d98

This reverts commit 0111f02.

Cubone21 pushed a commit that referenced this pull request Aug 25, 2020

Revert "feat(ui): redesign load data page (#19246)" (#19336)

4cd7277

This reverts commit 67857f2.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): redesign load data page #19246

feat(ui): redesign load data page #19246

alexpaxton commented Aug 6, 2020 •

edited

Loading

alexpaxton commented Aug 6, 2020 •

edited

Loading

drdelambre Aug 13, 2020

alexpaxton Aug 13, 2020

drdelambre Aug 13, 2020

drdelambre Aug 13, 2020

drdelambre Aug 13, 2020

drdelambre Aug 13, 2020

drdelambre Aug 13, 2020

drdelambre Aug 14, 2020

drdelambre commented Aug 14, 2020

drdelambre left a comment

feat(ui): redesign load data page #19246

feat(ui): redesign load data page #19246

Conversation

alexpaxton commented Aug 6, 2020 • edited Loading

UX Goals

Architecture Notes

Build Changes

alexpaxton commented Aug 6, 2020 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drdelambre commented Aug 14, 2020

drdelambre left a comment

Choose a reason for hiding this comment

alexpaxton commented Aug 6, 2020 •

edited

Loading

alexpaxton commented Aug 6, 2020 •

edited

Loading