opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-02 23:53:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Decouple Label Browser from LocalStorage (#40449)

Browse Source 
* Refactor: Decouple Label Browser from LocalStorage

* Clean up
This commit is contained in:
Piotr Jamróz
2021-10-15 14:18:11 +02:00
committed by GitHub
parent 7140867868
commit 6dc21d5899
7 changed files with 154 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
public/app/plugins/datasource/loki/components/LokiQueryField.tsx
View File

@ -17,6 +17,9 @@ import { LanguageMap, languages as prismLanguages } from 'prismjs';
import LokiLanguageProvider from '../language_provider';
import { shouldRefreshLabels } from '../language_utils';
import LokiDatasource from '../datasource';
import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
const LAST_USED_LABELS_KEY = 'grafana.datasources.loki.browser.labels';
function getChooserText(hasSyntax: boolean, hasLogLabels: boolean) {
if (!hasSyntax) {
@ -159,42 +162,54 @@ export class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, Lok
const buttonDisabled = !(labelsLoaded && hasLogLabels);
return (
<>
<div
className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1"
data-testid={this.props['data-testid']}
>
<button
className="gf-form-label query-keyword pointer"
onClick={this.onClickChooserButton}
disabled={buttonDisabled}
>
{chooserText}
<Icon name={labelBrowserVisible ? 'angle-down' : 'angle-right'} />
</button>
<div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
<QueryField
additionalPlugins={this.plugins}
cleanText={cleanText}
query={query.expr}
onTypeahead={this.onTypeahead}
onWillApplySuggestion={willApplySuggestion}
onChange={this.onChangeQuery}
onBlur={this.props.onBlur}
onRunQuery={this.props.onRunQuery}
placeholder={placeholder}
portalOrigin="loki"
/>
</div>
</div>
{labelBrowserVisible && (
<div className="gf-form">
<LokiLabelBrowser languageProvider={lokiLanguageProvider} onChange={this.onChangeLabelBrowser} />
</div>
)}
<LocalStorageValueProvider<string[]> storageKey={LAST_USED_LABELS_KEY} defaultValue={[]}>
{(lastUsedLabels, onLastUsedLabelsSave, onLastUsedLabelsDelete) => {
return (
<>
<div
className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1"
data-testid={this.props['data-testid']}
>
<button
className="gf-form-label query-keyword pointer"
onClick={this.onClickChooserButton}
disabled={buttonDisabled}
>
{chooserText}
<Icon name={labelBrowserVisible ? 'angle-down' : 'angle-right'} />
</button>
<div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
<QueryField
additionalPlugins={this.plugins}
cleanText={cleanText}
query={query.expr}
onTypeahead={this.onTypeahead}
onWillApplySuggestion={willApplySuggestion}
onChange={this.onChangeQuery}
onBlur={this.props.onBlur}
onRunQuery={this.props.onRunQuery}
placeholder={placeholder}
portalOrigin="loki"
/>
</div>
</div>
{labelBrowserVisible && (
<div className="gf-form">
<LokiLabelBrowser
languageProvider={lokiLanguageProvider}
onChange={this.onChangeLabelBrowser}
lastUsedLabels={lastUsedLabels || []}
storeLastUsedLabels={onLastUsedLabelsSave}
deleteLastUsedLabels={onLastUsedLabelsDelete}
/>
</div>
)}
{ExtraFieldElement}
</>
{ExtraFieldElement}
</>
);
}}
</LocalStorageValueProvider>
);
}
}