IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Loki: Set custom width for modals in the loki query editor (#59714)

Browse Source 
* set custom width for modals in the loki query editor

* convert unit from px to vw

* add media query for smaller devices

* use theme breakpoints instead of @media
This commit is contained in:
Gareth Dawson
2022-12-13 11:09:30 +00:00
committed by GitHub
parent 6d339d94dc
commit 1b1f2475c2
2 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx
View File

@@ -1,8 +1,9 @@
import { css } from '@emotion/css';
import React, { useState, useEffect } from 'react';
import { CoreApp } from '@grafana/data';
import { CoreApp, GrafanaTheme2 } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import { LoadingPlaceholder, Modal } from '@grafana/ui';
import { LoadingPlaceholder, Modal, useStyles2 } from '@grafana/ui';
import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
import { LokiLabelBrowser } from '../../components/LokiLabelBrowser';
@@ -25,6 +26,8 @@ export const LabelBrowserModal = (props: Props) => {
const [hasLogLabels, setHasLogLabels] = useState(false);
const LAST_USED_LABELS_KEY = 'grafana.datasources.loki.browser.labels';
const styles = useStyles2(getStyles);
useEffect(() => {
if (!isOpen) {
return;
@@ -57,7 +60,7 @@ export const LabelBrowserModal = (props: Props) => {
};
return (
<Modal isOpen={isOpen} title="Label browser" onDismiss={reportInteractionAndClose}>
<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 && (
@@ -79,3 +82,14 @@ export const LabelBrowserModal = (props: Props) => {
</Modal>
);
};
const getStyles = (theme: GrafanaTheme2) => {
return {
modal: css`
width: 85vw;
${theme.breakpoints.down('md')} {
width: 100%;
}
`,
};
};

8
public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
View File

@@ -66,7 +66,7 @@ export const QueryPatternsModal = (props: Props) => {
};
return (
<Modal isOpen={isOpen} title="Kick start your query" onDismiss={onClose}>
<Modal isOpen={isOpen} title="Kick start your query" onDismiss={onClose} className={styles.modal}>
<div className={styles.spacing}>
Kick start your query by selecting one of these queries. You can then continue to complete your query.
</div>
@@ -121,5 +121,11 @@ const getStyles = (theme: GrafanaTheme2) => {
spacing: css`
margin-bottom: ${theme.spacing(1)};
`,
modal: css`
width: 85vw;
${theme.breakpoints.down('md')} {
width: 100%;
}
`,
};
};