mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ba97c492f9
* 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
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
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;
|
|
};
|
|
|
|
export function AdditionalSettings(props: AdditionalSettingsProps) {
|
|
const { state, onChangeFullMetaSearch, onChangeIncludeNullMetadata, onChangeDisableTextWrap, onChangeUseBackend } =
|
|
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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
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;
|
|
`,
|
|
};
|
|
}
|