mirror of https://github.com/grafana/grafana
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 buttonpull/68638/head
Brendan O'Handley
3 years ago
committed by
GitHub
parent
effe21fb65
commit
2e6c71fd39
@ -0,0 +1,100 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { Icon, Switch, Tooltip, useTheme2 } from '@grafana/ui'; |
||||
|
||||
import { testIds } from './MetricsModal'; |
||||
import { placeholders } from './state/helpers'; |
||||
import { MetricsModalState } from './state/state'; |
||||
|
||||
type AdditionalSettingsProps = { |
||||
state: MetricsModalState; |
||||
onChangeFullMetaSearch: () => void; |
||||
onChangeIncludeNullMetadata: () => void; |
||||
onChangeDisableTextWrap: () => void; |
||||
onChangeUseBackend: () => void; |
||||
onChangeInferType: () => void; |
||||
}; |
||||
|
||||
export function AdditionalSettings(props: AdditionalSettingsProps) { |
||||
const { |
||||
state, |
||||
onChangeFullMetaSearch, |
||||
onChangeIncludeNullMetadata, |
||||
onChangeDisableTextWrap, |
||||
onChangeUseBackend, |
||||
onChangeInferType, |
||||
} = props; |
||||
|
||||
const theme = useTheme2(); |
||||
const styles = getStyles(theme); |
||||
|
||||
return ( |
||||
<> |
||||
<div className={styles.selectItem}> |
||||
<Switch |
||||
data-testid={testIds.searchWithMetadata} |
||||
value={state.fullMetaSearch} |
||||
disabled={state.useBackend || !state.hasMetadata} |
||||
onChange={() => onChangeFullMetaSearch()} |
||||
/> |
||||
<div className={styles.selectItemLabel}>{placeholders.metadataSearchSwitch}</div> |
||||
</div> |
||||
<div className={styles.selectItem}> |
||||
<Switch |
||||
value={state.includeNullMetadata} |
||||
disabled={!state.hasMetadata} |
||||
onChange={() => onChangeIncludeNullMetadata()} |
||||
/> |
||||
<div className={styles.selectItemLabel}>{placeholders.includeNullMetadata}</div> |
||||
</div> |
||||
<div className={styles.selectItem}> |
||||
<Switch value={state.disableTextWrap} onChange={() => onChangeDisableTextWrap()} /> |
||||
<div className={styles.selectItemLabel}>Disable text wrap</div> |
||||
</div> |
||||
<div className={styles.selectItem}> |
||||
<Switch data-testid={testIds.setUseBackend} value={state.useBackend} onChange={() => onChangeUseBackend()} /> |
||||
<div className={styles.selectItemLabel}>{placeholders.setUseBackend} </div> |
||||
<Tooltip |
||||
content={'Filter metric names by regex search, using an additional call on the Prometheus API.'} |
||||
placement="bottom-end" |
||||
> |
||||
<Icon name="info-circle" size="xs" className={styles.settingsIcon} /> |
||||
</Tooltip> |
||||
</div> |
||||
<div className={styles.selectItem}> |
||||
<Switch data-testid={testIds.inferType} value={state.inferType} onChange={() => onChangeInferType()} /> |
||||
<div className={styles.selectItemLabel}>{placeholders.inferType} </div> |
||||
<Tooltip |
||||
content={ |
||||
'For example, metrics ending in _sum, _count, will be given an inferred type of counter. Metrics ending in _bucket with be given a type of histogram.' |
||||
} |
||||
placement="bottom-end" |
||||
> |
||||
<Icon name="info-circle" size="xs" className={styles.settingsIcon} /> |
||||
</Tooltip> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
settingsIcon: css` |
||||
color: ${theme.colors.text.secondary}; |
||||
`,
|
||||
selectItem: css` |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 4px 0; |
||||
`,
|
||||
selectItemLabel: css` |
||||
margin: 0 0 0 ${theme.spacing(1)}; |
||||
align-self: center; |
||||
color: ${theme.colors.text.secondary}; |
||||
font-size: 12px; |
||||
`,
|
||||
}; |
||||
} |
||||
@ -1,71 +0,0 @@ |
||||
import React from 'react'; |
||||
|
||||
import { useTheme2 } from '@grafana/ui'; |
||||
|
||||
import { getStyles } from './styles'; |
||||
import { MetricData, MetricsData } from './types'; |
||||
|
||||
export type LetterSearchProps = { |
||||
filteredMetrics: MetricsData; |
||||
disableTextWrap: boolean; |
||||
updateLetterSearch: (letter: string) => void; |
||||
letterSearch: string | null; |
||||
}; |
||||
|
||||
export function LetterSearch(props: LetterSearchProps) { |
||||
const { filteredMetrics, disableTextWrap, updateLetterSearch, letterSearch } = props; |
||||
|
||||
const alphabetDictionary = alphabetCheck(); |
||||
|
||||
const theme = useTheme2(); |
||||
const styles = getStyles(theme, disableTextWrap); |
||||
|
||||
filteredMetrics.forEach((m: MetricData, idx: number) => { |
||||
const metricFirstLetter = m.value[0].toUpperCase(); |
||||
|
||||
if (alphabet.includes(metricFirstLetter) && !alphabetDictionary[metricFirstLetter]) { |
||||
alphabetDictionary[metricFirstLetter] += 1; |
||||
} |
||||
}); |
||||
|
||||
// return the alphabet components with the correct style and behavior
|
||||
return ( |
||||
<div> |
||||
{Object.keys(alphabetDictionary).map((letter: string) => { |
||||
const active: boolean = alphabetDictionary[letter] > 0; |
||||
// starts with letter search
|
||||
// filter by starts with letter
|
||||
// if same letter searched null out remove letter search
|
||||
function setLetterSearch() { |
||||
updateLetterSearch(letter); |
||||
} |
||||
// selected letter to filter by
|
||||
const selectedClass: string = letterSearch === letter ? styles.selAlpha : ''; |
||||
// these letters are represented in the list of metrics
|
||||
const activeClass: string = active ? styles.active : styles.gray; |
||||
|
||||
return ( |
||||
<span |
||||
onClick={active ? setLetterSearch : () => {}} |
||||
className={`${selectedClass} ${activeClass}`} |
||||
key={letter} |
||||
data-testid={'letter-' + letter} |
||||
> |
||||
{letter + ' '} |
||||
{/* {idx !== coll.length - 1 ? '|': ''} */} |
||||
</span> |
||||
); |
||||
})} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export const alphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ']; |
||||
|
||||
function alphabetCheck(): { [char: string]: number } { |
||||
const check: { [char: string]: number } = {}; |
||||
|
||||
alphabet.forEach((char) => (check[char] = 0)); |
||||
|
||||
return check; |
||||
} |
||||
Loading…
Reference in new issue