PanelEdit: UX improvements #32124

torkelo · 2021-03-18T16:08:59Z

Library panels

Library panel selection moved to viz picker
Library panel card updated to be click on card and not button inside card
Need to unify the card design for visualization types and library panels

Support search this changes the structure for how options are rendered, instead of rendering it directly in different components the code first fetches all options and groups together with metadata (property name) and value. So we have it in a structure that we can search and filter.

WIP state: (Notice how table Show header option is next to field options)

Tried a million alternatives with more nested layouts, some can be found here:
https://www.figma.com/file/7tTwQzazE1QmLFaA5vHujy/Panel-edit-tweaks-Grafana-8?node-id=99%3A0

…r-to-top

…ptions

…atures

joshhunt

💯🔥🔥

just a few typescript/style nitpicks. I think it would be really great to not introduce any more any type holes (or, while we're at it, cover up the existing ones) - just my two cents.

joshhunt · 2021-03-22T10:22:51Z

public/app/features/dashboard/components/PanelEditor/types.ts

+  onPanelConfigChange: (configKey: string, value: any) => void;
+  onPanelOptionsChanged: (options: any) => void;


Do you think it's possible to type options and value? IMHO any should be a lint error (but that's a conversation for another day...)

I haven't exactly been able to glean from this what it's supposed to be (which is a part of the problem), but maybe something like PanelOptions = Record<string, string | number | PanelOptions> would be a lot more helpful?

@torkelo maybe unknown might be better then? Treat it as an opaque type that needs refining before it can be used, to reduce the temptation to make unsafe assumptions about it.

could type as as Record<string, any>

Record<string, unknown> 😌

just trying to think about how we can enforce preventing unsafe assumptions about the code that leads to runtime errors.

joshhunt · 2021-03-22T10:46:55Z

public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx

  const [showDeletionModal, setShowDeletionModal] = useState(false);

  const onDeletePanel = () => {
    onDelete?.(libraryPanel);
    setShowDeletionModal(false);
  };

+  const panelPlugin = config.panels[libraryPanel.model.type] ?? ({} as PanelPluginMeta);


This {} as PanelPluginMeta doesn't look like a safe to me. PanelPluginMeta has nested properties which looks like are later accessed in PanelTypeCard which would throw a runtime error.

In what scenario is panelPlugin undefined? Maybe PanelTypeCard should just be not rendered at all if it's not there?

(tbh this should also be a lint error, or at least a warning. but seperate conversation)

yea think if the panel plugin cannot be found here we need some error handling instead

joshhunt · 2021-03-22T11:07:29Z

public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx

+        .addItem(
+          new OptionsPaneItemDescriptor({
+            title: 'Max per row',
+            showIf: () => (panel.repeat && panel.repeatDirection === 'h') as boolean,


i know this is a relatively safe, but maybe it might just be better to use !!(...) to actually ensure it's actually a boolean rather than to just use a type cast

I don't agree, you should always use Boolean(...) instead of !!. So much easier to read.

Sure. I don't share the concern about !!, but Boolean() is also great. As long as we're not telling Typescript to lie to us 😅

public/app/core/components/FilterInput/FilterInput.tsx

public/app/features/dashboard/components/PanelEditor/AngularPanelOptions.tsx

public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx

public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx

public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx

public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx

public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx

ryantxu

🥇 This is looking really really good.

These are the only places I found that did not work as expected:

torkelo · 2021-03-24T07:07:16Z

@ryantxu ah, good catch. Library panels is still behind feature toggle, and if not enabled it will 404

… not enabled

…tching list mode

* origin/master: (38 commits) GraphNG: Fix tooltip displaying wrong or no data (grafana#32312) Render new email template and fix the title (grafana#32314) revert changes (grafana#32335) Add documentation page for how to install Grafana and GE on K8s (grafana#32008) Chore: use uppercase names in manual entry scenario (grafana#32334) live: fix writing headers in hijacked connection with gzip enabled (grafana#32310) ReleaseNotes: Updated changelog and release notes for 7.5.0 (grafana#32318) Release: Updates latest.json (grafana#32319) GraphNG: updates story from knobs to controls (grafana#32294) Library Panels: Improve unsaved changes handling (grafana#32026) Upgrade Prometheus Alertmanager and small fixes (grafana#32280) Chore: eslint react hook fix for public folder (grafana#31174) DashboardSettings: Migrates history diff view from angular to react (grafana#31997) chore(deps): bump visx/tooltip to 1.7.2 (grafana#32248) Loki: Fix text search in Label browser (grafana#32293) Docs: Adjust sizes of images in Loki documentation (grafana#32301) PanelEdit: v8 Panel Edit UX (grafana#32124) Timeseries: add UI to control the span nulls threshold (grafana#32222) Alerting: add state tracker to alerting evaluation (grafana#32298) Alerting: Add StartAt and FiredAt to the alert evaluation result (grafana#32302) ...

* Initial commit * Progress * Update * Progress * updates * Minor fix * fixed ts issue * fixed e2e tests * More explorations * Making progress * Panel options and field options unified * With nested categories * Starting to find something * fix paddings * Progress * Breakthrough ux layout * Progress * Updates * New way of composing options with search * added regex search * Refactoring to react note tree * Show overrides * Adding overrides radio button support * Added popular view * Separate stat/gauge/bargauge options into value options and display options * Initial work on getting library panels into viz picker flow * Fixed issues switching to panel library panel * Move search input put of LibraryPanelsView * Changing design again to have content inside boxes * Style updates * Refactoring to fix scroll issue * Option category naming * Fixed FilterInput issue * Updated snapshots * Fix padding * Updated viz picker design * Unify library panel an viz picker card * Updated card with delete action * Major refactoring back to an object model instead of searching and filtering react node tree * More refactoring * Show option category in label when searching * Nice logic for categories rendering when searching or when only child * Make getSuggestions more lazy for DataLinksEditor * Add missing repeat options and handle conditional options * Prepping options category to be more flexibly and control state from outside * Added option count to search result * Minor style tweak * Added button to close viz picker * Rewrote overrides to enable searching overrides * New search engine and tests * Searching overrides works * Hide radio buttons while searching * Added angular options back * Added memoize for all options so they are not rebuilt for every search key stroke * Added back support for category counters * Started unit test work * Refactoring and base popular options list * Initial update to e2e test, more coming to add e2e test for search features * Minor fix * Review updates * Fixing category open states * Unit test progress * Do not show visualization list mode radio button if library panels is not enabled * Use boolean * More unit tests * Increase library panels per page count and give search focus when switching list mode * field config change test and search test * Feedback updates * Minor tweaks * Minor refactorings * More minimal override collapse state

torkelo added 17 commits February 16, 2021 14:37

Initial commit

01190c0

Progress

8fb5a88

Update

e989ad9

Progress

3ac3f71

updates

2257292

Minor fix

1b0024f

fixed ts issue

3747893

Merge remote-tracking branch 'origin/master' into visualization-picke…

9c9789b

…r-to-top

Merge branch 'g8-dev' into visualization-picker-to-top

0f65ef6

fixed e2e tests

f730bb6

Merge remote-tracking branch 'origin/master' into visualization-picke…

fa168be

…r-to-top

More explorations

3cb731b

Making progress

c49046b

Merge remote-tracking branch 'origin/master' into visualization-picke…

6136123

…r-to-top

Panel options and field options unified

a9c3fc8

With nested categories

ce1fd7c

Starting to find something

f9463fd

grafanabot added the area/frontend label Mar 18, 2021

torkelo added 12 commits March 18, 2021 17:26

fix paddings

9934ce3

Progress

b3b3e45

Breakthrough ux layout

aa98c93

Progress

5e82963

Updates

d5ba61d

New way of composing options with search

4c80b69

added regex search

d995de3

Refactoring to react note tree

7ecec02

Show overrides

75958f3

Adding overrides radio button support

f6ed84d

Added popular view

a2f139b

Separate stat/gauge/bargauge options into value options and display o…

d9d7502

…ptions

torkelo added 2 commits March 23, 2021 16:21

Initial update to e2e test, more coming to add e2e test for search fe…

9339b3f

…atures

Minor fix

a6c8a04

joshhunt reviewed Mar 23, 2021

View reviewed changes

torkelo added 3 commits March 23, 2021 17:24

Review updates

5a0f3a7

Fixing category open states

01ef13a

Unit test progress

822d345

ryantxu self-requested a review March 24, 2021 07:00

ryantxu approved these changes Mar 24, 2021

View reviewed changes

torkelo added 12 commits March 24, 2021 08:51

Do not show visualization list mode radio button if library panels is…

ea5c735

… not enabled

Use boolean

2d7127b

More unit tests

546a666

Increase library panels per page count and give search focus when swi…

1cc79d7

…tching list mode

field config change test and search test

d45a96b

Merge remote-tracking branch 'origin/master' into v8-panel-edit

d4aa8cb

Feedback updates

86039bd

Minor tweaks

a75a565

Minor refactorings

6e47dd9

Merge remote-tracking branch 'origin/master' into v8-panel-edit

7687d0b

More minimal override collapse state

83a24fb

Merge remote-tracking branch 'origin/master' into v8-panel-edit

5a020fb

torkelo merged commit 9d6c8f8 into master Mar 25, 2021

torkelo deleted the v8-panel-edit branch March 25, 2021 07:33

torkelo added this to the 8.0.0 milestone Mar 25, 2021

dprokop changed the title ~~PanelEdit: v8 Panel Edit UX~~ PanelEdit: UX improvements May 13, 2021

dprokop added the add to changelog label May 13, 2021

polibb mentioned this pull request Aug 17, 2022

A11Y: Cannot switch between Viz/Suggestions/LibraryPanels via keyboard #53814

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PanelEdit: UX improvements #32124

PanelEdit: UX improvements #32124

torkelo commented Mar 18, 2021 •

edited

Loading

joshhunt left a comment

joshhunt Mar 22, 2021

joshhunt Mar 23, 2021

torkelo Mar 23, 2021

joshhunt Mar 23, 2021

joshhunt Mar 22, 2021

torkelo Mar 23, 2021

joshhunt Mar 22, 2021

hugohaggmark Mar 24, 2021

joshhunt Mar 24, 2021

ryantxu left a comment

torkelo commented Mar 24, 2021

		onPanelConfigChange: (configKey: string, value: any) => void;
		onPanelOptionsChanged: (options: any) => void;

PanelEdit: UX improvements #32124

PanelEdit: UX improvements #32124

Conversation

torkelo commented Mar 18, 2021 • edited Loading

joshhunt left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryantxu left a comment

Choose a reason for hiding this comment

torkelo commented Mar 24, 2021

torkelo commented Mar 18, 2021 •

edited

Loading