Commit Graph

3 Commits

Author SHA1 Message Date
Brendan O'Handley
ba97c492f9 Prometheus: Metrics explorer usability test improvements (#69528)
* remove infer type functionality because usability tests confirmed it was confusing/not helpful

* persist button option to open modal when typing in metric select

* update copy desc for setting that includes type and description in search

* when filtering by type, only return metrics with defined type

* give focused metric row more contrast, consistent with metric select focused option

* allow selection of metrics with unknown types and undefined types

* add highlighting to backend search

* augment counters created from summaries with (summary)

* remove type from search input setting and only search by name and description

* fix test to reflect that type has been removed from the metadata input search as duplicated by the filter

* add button to select metric, change wording, make table hover row consistent with grafana table

* add tooltip icon with docs link for metric types that are augmented, histogram and summary

* remove files slated for future refactoring

* style changes based on catherine's review

* remove border from settings btn, select btn increase to md, change col size in table, fix responsive inputs ui for sm screens
2023-06-08 12:53:17 -04:00
Brendan O'Handley
2e6c71fd39 Prometheus: Metric encyclopedia ux collab design (#68421)
* add class for full story click event on open modal

* move feedback link to modal top under header

* move results amount to bottom left

* move settings into modal, change language from exclude to include

* add metadata to backend search, use toggletip for settings, clean code

* style input row, remove labels and update settings button design

* remove alphabet search as requested by design

* display selected metric

* update style warning message for labels filtered metrics

* organize results footer

* update table design w fixed width and sticky header

* allow focus row on tab and use key Enter to select metric on keydown

* add rudderstack event for disable text wrap

* add messages for no metrics found, labels, search and none in data source.

* filter by type placeholder

* add min width to custom select option

* add text wrap for long metric names

* Have 4px margin b/w the search row and the 'currently selected' text. 16px between 'currently selected text' and the table

* Add some padding inside the first table header row (8 pixels on all sides)

* font-size of 12px for additional settings text

* 4px padding between additional settings text

* 24px margin between the last table cell and the pagination row

* # of Results per page font size 0.85rem

* 8px margin b/w the '# of results per page' and the dropdown

* fix test

* add infer type setting for testing

* use title on icon instead of wrapping in tooltip to fix test

* fix icon issue

* italicize inferred types, update setting text and add icon

* add space for label filters alert message

* make open button style consistent with advanced datasource picker

* keep copy for open modal button

* refactor rudderstack interactions and add inferType

* add event tracking for opening the modal

* galen's feedback, fix select horizontal scroll and results perpg bug

* ismail's feedback for metric types

* revert button in option for accessibility(galen) and style button with ghost mode

* change name to Metrics explorer

* fix hover/focus styles

* ismail's feedbcak, refactor hints, return empty string, remove @return

* Fix icon hovering: put tooltips back in over titles on icon

* make results not expand to fill table space and fix width for modal open option button
2023-05-26 12:39:34 -04:00
Brendan O'Handley
d31d1576fb Prometheus: Metric encyclopedia improvements (#67084)
* move to me directory and sort by relevance

* refactor letter search, uFuzzy and styles out of ency

* begin state refactor

* refactor getMetaData useEffect call with useReducer

* refactor pagination with useReducer

* refactor fuzzy state for useReducer

* refactor all filters for useReducer

* remove haystacks arrays in favor of haystack dictionaries w object keys

* refactor out functions into state helpers

* switch label filter text color to work with light theme

* make each row clickable to select metric

* add pagination component

* fix max results

* make a better table with keystrokes, navigate to metric with up&down, select on enter, hide settings, make a nice button

* save space, give more real esate to the table

* add highlighting for fuzzy search matches

* add custom button in metric select option to open metric encyclopedia

* open the modal with enter keystroke

* remove unnecessary actions and variables from m.e.

* fix tests, clean code

* remove setting of selected idx on results row when hovering

* tests

* rename to metrics modal and have select option same as header

* reduce width for wider screens

* pass in initial metrics list and remove call to labels and series in metrics modal

* use createSlice from reduc toolkit to deduce actions

* save the metrics modal additional settings

* galen alphabet refactor suggestion

* remove extra row in results table

* fix storing settings, wrap in feature toggle

* remove metadata check & load because metric select already handles this

* Update public/app/plugins/datasource/prometheus/querybuilder/components/metrics-modal/LetterSearch.tsx

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* fix styles, show cursor as pointer for select option and clickable row

* taller modal for larger screens

* turn off metadata settings if usebackend is selected

* additional settings button space

* add pipe to ufuzzy metadata search

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
2023-05-01 17:29:35 -04:00