public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions 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
packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
+6 -4
View File
@@ -5,7 +5,7 @@ import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
import { IconButton } from '../../components/IconButton/IconButton'; import { IconButton } from '../../components/IconButton/IconButton';
import { TabsBar, Tab, TabContent } from '../../components/Tabs'; import { TabsBar, Tab, TabContent } from '../../components/Tabs';
import { useStyles2 } from '../../themes'; import { useStyles2, useTheme2 } from '../../themes';
import { IconName } from '../../types/icon'; import { IconName } from '../../types/icon';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
@@ -25,12 +25,14 @@ export interface TabbedContainerProps {
export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose }: TabbedContainerProps) { export function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose }: TabbedContainerProps) {
const [activeTab, setActiveTab] = useState(tabs.some((tab) => tab.value === defaultTab) ? defaultTab : tabs[0].value); 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>) => { const onSelectTab = (item: SelectableValue<string>) => {
setActiveTab(item.value!); setActiveTab(item.value!);
}; };
const styles = useStyles2(getStyles); const autoHeight = `calc(100% - (${theme.components.menuTabs.height}px + ${theme.spacing(1)}))`;
return ( return (
<div className={styles.container}> <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'} /> <IconButton className={styles.close} onClick={onClose} name="times" tooltip={closeIconTooltip ?? 'Close'} />
</TabsBar> </TabsBar>
<CustomScrollbar autoHeightMin="100%"> <CustomScrollbar autoHeightMin={autoHeight} autoHeightMax={autoHeight}>
<TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent> <TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>
</CustomScrollbar> </CustomScrollbar>
</div> </div>
@@ -60,7 +62,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
tabContent: css({ tabContent: css({
padding: theme.spacing(2), padding: theme.spacing(2),
backgroundColor: theme.colors.background.primary, backgroundColor: theme.colors.background.primary,
height: `calc(100% - ${theme.components.menuTabs.height}px)`, height: `100%`,
}), }),
close: css({ close: css({
position: 'absolute', position: 'absolute',
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+1 -1
View File
@@ -94,9 +94,9 @@ const getStyles = (theme: GrafanaTheme2, height: number) => {
`, `,
footer: css` footer: css`
height: 60px; height: 60px;
margin: ${theme.spacing(3)} auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
font-weight: ${theme.typography.fontWeightLight}; font-weight: ${theme.typography.fontWeightLight};
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
a { a {
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
+1 -1
View File
@@ -54,9 +54,9 @@ const getStyles = (theme: GrafanaTheme2) => {
`, `,
footer: css` footer: css`
height: 60px; height: 60px;
margin-top: ${theme.spacing(3)};
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
font-weight: ${theme.typography.fontWeightLight}; font-weight: ${theme.typography.fontWeightLight};
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
a { a {
public/app/features/inspector/QueryInspector.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder, Stack } fro
import { Trans } from 'app/core/internationalization'; import { Trans } from 'app/core/internationalization';
import { backendSrv } from 'app/core/services/backend_srv'; import { backendSrv } from 'app/core/services/backend_srv';
import { getPanelInspectorStyles } from './styles'; import { getPanelInspectorStyles2 } from './styles';
interface ExecutedQueryInfo { interface ExecutedQueryInfo {
refId: string; refId: string;
@@ -212,7 +212,7 @@ export class QueryInspector extends PureComponent<Props, State> {
const { allNodesExpanded, executedQueries, response } = this.state; const { allNodesExpanded, executedQueries, response } = this.state;
const { onRefreshQuery, data } = this.props; const { onRefreshQuery, data } = this.props;
const openNodes = this.getNrOfOpenNodes(); const openNodes = this.getNrOfOpenNodes();
const styles = getPanelInspectorStyles(); const styles = getPanelInspectorStyles2(config.theme2);
const haveData = Object.keys(response).length > 0; const haveData = Object.keys(response).length > 0;
const isLoading = data.state === LoadingState.Loading; const isLoading = data.state === LoadingState.Loading;