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

Fix query inspector in explore to scroll to bottom (#82369)

Browse Source
This commit is contained in:
Victor Marin
2024-02-14 10:00:16 +02:00
committed by GitHub
parent cb47177df9
commit a1ff439a20
4 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
View File

@@ -5,7 +5,7 @@ import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
import { IconButton } from '../../components/IconButton/IconButton';
import { TabsBar, Tab, TabContent } from '../../components/Tabs';
import { useStyles2 } from '../../themes';
import { useStyles2, useTheme2 } from '../../themes';
import { IconName } from '../../types/icon';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
@@ -25,12 +25,14 @@ export interface TabbedContainerProps {
export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose }: TabbedContainerProps) {
const [activeTab, setActiveTab] = useState(tabs.some((tab) => tab.value === defaultTab) ? defaultTab : tabs[0].value);
const styles = useStyles2(getStyles);
const theme = useTheme2();
const onSelectTab = (item: SelectableValue<string>) => {
setActiveTab(item.value!);
};
const styles = useStyles2(getStyles);
const autoHeight = `calc(100% - (${theme.components.menuTabs.height}px + ${theme.spacing(1)}))`;
return (
<div className={styles.container}>
@@ -46,7 +48,7 @@ export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose }:
))}
<IconButton className={styles.close} onClick={onClose} name="times" tooltip={closeIconTooltip ?? 'Close'} />
</TabsBar>
<CustomScrollbar autoHeightMin="100%">
<CustomScrollbar autoHeightMin={autoHeight} autoHeightMax={autoHeight}>
<TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>
</CustomScrollbar>
</div>
@@ -60,7 +62,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
tabContent: css({
padding: theme.spacing(2),
backgroundColor: theme.colors.background.primary,
height: `calc(100% - ${theme.components.menuTabs.height}px)`,
height: `100%`,
}),
close: css({
position: 'absolute',

2
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
View File

@@ -94,9 +94,9 @@ const getStyles = (theme: GrafanaTheme2, height: number) => {
`,
footer: css`
height: 60px;
margin: ${theme.spacing(3)} auto;
display: flex;
justify-content: center;
align-items: center;
font-weight: ${theme.typography.fontWeightLight};
font-size: ${theme.typography.bodySmall.fontSize};
a {

2
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
View File

@@ -54,9 +54,9 @@ const getStyles = (theme: GrafanaTheme2) => {
`,
footer: css`
height: 60px;
margin-top: ${theme.spacing(3)};
display: flex;
justify-content: center;
align-items: center;
font-weight: ${theme.typography.fontWeightLight};
font-size: ${theme.typography.bodySmall.fontSize};
a {

4
public/app/features/inspector/QueryInspector.tsx
View File

@@ -9,7 +9,7 @@ import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder, Stack } fro
import { Trans } from 'app/core/internationalization';
import { backendSrv } from 'app/core/services/backend_srv';
import { getPanelInspectorStyles } from './styles';
import { getPanelInspectorStyles2 } from './styles';
interface ExecutedQueryInfo {
refId: string;
@@ -212,7 +212,7 @@ export class QueryInspector extends PureComponent<Props, State> {
const { allNodesExpanded, executedQueries, response } = this.state;
const { onRefreshQuery, data } = this.props;
const openNodes = this.getNrOfOpenNodes();
const styles = getPanelInspectorStyles();
const styles = getPanelInspectorStyles2(config.theme2);
const haveData = Object.keys(response).length > 0;
const isLoading = data.state === LoadingState.Loading;