97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import { useState, useEffect } from 'react';
|
|
|
|
import { CoreApp, GrafanaTheme2, LocalStorageValueProvider, TimeRange } from '@grafana/data';
|
|
import { reportInteraction } from '@grafana/runtime';
|
|
import { LoadingPlaceholder, Modal, useStyles2 } from '@grafana/ui';
|
|
|
|
import { LokiLabelBrowser } from '../../components/LokiLabelBrowser';
|
|
import { LokiDatasource } from '../../datasource';
|
|
import { LokiQuery } from '../../types';
|
|
|
|
export interface Props {
|
|
isOpen: boolean;
|
|
datasource: LokiDatasource;
|
|
query: LokiQuery;
|
|
app?: CoreApp;
|
|
timeRange?: TimeRange;
|
|
onClose: () => void;
|
|
onChange: (query: LokiQuery) => void;
|
|
onRunQuery: () => void;
|
|
}
|
|
|
|
export const LabelBrowserModal = (props: Props) => {
|
|
const { isOpen, onClose, datasource, app, timeRange } = props;
|
|
const [labelsLoaded, setLabelsLoaded] = useState(false);
|
|
const [hasLogLabels, setHasLogLabels] = useState(false);
|
|
const LAST_USED_LABELS_KEY = 'grafana.datasources.loki.browser.labels';
|
|
|
|
const styles = useStyles2(getStyles);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
return;
|
|
}
|
|
|
|
datasource.languageProvider.fetchLabels({ timeRange }).then((labels) => {
|
|
setLabelsLoaded(true);
|
|
setHasLogLabels(labels.length > 0);
|
|
});
|
|
}, [datasource, isOpen, timeRange]);
|
|
|
|
const changeQuery = (value: string) => {
|
|
const { query, onChange, onRunQuery } = props;
|
|
const nextQuery = { ...query, expr: value };
|
|
onChange(nextQuery);
|
|
onRunQuery();
|
|
};
|
|
|
|
const onChange = (selector: string) => {
|
|
changeQuery(selector);
|
|
onClose();
|
|
};
|
|
|
|
const reportInteractionAndClose = () => {
|
|
reportInteraction('grafana_loki_label_browser_closed', {
|
|
app,
|
|
closeType: 'modalClose',
|
|
});
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} title="Label browser" onDismiss={reportInteractionAndClose} className={styles.modal}>
|
|
{!labelsLoaded && <LoadingPlaceholder text="Loading labels..." />}
|
|
{labelsLoaded && !hasLogLabels && <p>No labels found.</p>}
|
|
{labelsLoaded && hasLogLabels && (
|
|
<LocalStorageValueProvider<string[]> storageKey={LAST_USED_LABELS_KEY} defaultValue={[]}>
|
|
{(lastUsedLabels, onLastUsedLabelsSave, onLastUsedLabelsDelete) => {
|
|
return (
|
|
<LokiLabelBrowser
|
|
languageProvider={datasource.languageProvider}
|
|
onChange={onChange}
|
|
lastUsedLabels={lastUsedLabels}
|
|
storeLastUsedLabels={onLastUsedLabelsSave}
|
|
deleteLastUsedLabels={onLastUsedLabelsDelete}
|
|
app={app}
|
|
timeRange={timeRange}
|
|
/>
|
|
);
|
|
}}
|
|
</LocalStorageValueProvider>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => {
|
|
return {
|
|
modal: css({
|
|
width: '85vw',
|
|
[theme.breakpoints.down('md')]: {
|
|
width: '100%',
|
|
},
|
|
}),
|
|
};
|
|
};
|