IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-30 08:18:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix sticky header issue (#75710)

Browse Source 
* Fix sticky header issue

* Take ExploreToolbar higher in the DOM tree so the stickiness is not needed

* Remove z-index

* Remove sticky styles
This commit is contained in:
Haris Rozajac
2023-10-03 07:10:59 -06:00
committed by GitHub
parent e0919a340e
commit 36bb03284d
2 changed files with 77 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/explore/Explore.tsx
+76 -74
View File
@@ -498,82 +498,84 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
].every((e) => e.length === 0);
return (
<CustomScrollbar
testId={selectors.pages.Explore.General.scrollView}
autoHeightMin={'100%'}
scrollRefCallback={(scrollElement) => (this.scrollElement = scrollElement || undefined)}
>
<>
<ExploreToolbar exploreId={exploreId} onChangeTime={this.onChangeTime} topOfViewRef={this.topOfViewRef} />
{datasourceInstance ? (
<div className={styles.exploreContainer}>
<PanelContainer className={styles.queryContainer}>
<QueryRows exploreId={exploreId} />
<SecondaryActions
addQueryRowButtonDisabled={isLive}
// We cannot show multiple traces at the same time right now so we do not show add query button.
//TODO:unification
addQueryRowButtonHidden={false}
richHistoryRowButtonHidden={richHistoryRowButtonHidden}
richHistoryButtonActive={showRichHistory}
queryInspectorButtonActive={showQueryInspector}
onClickAddQueryRowButton={this.onClickAddQueryRowButton}
onClickRichHistoryButton={this.toggleShowRichHistory}
onClickQueryInspectorButton={this.toggleShowQueryInspector}
/>
<ResponseErrorContainer exploreId={exploreId} />
</PanelContainer>
<AutoSizer onResize={this.onResize} disableHeight>
{({ width }) => {
if (width === 0) {
return null;
}
<CustomScrollbar
testId={selectors.pages.Explore.General.scrollView}
autoHeightMin={'100%'}
scrollRefCallback={(scrollElement) => (this.scrollElement = scrollElement || undefined)}
>
{datasourceInstance ? (
<div className={styles.exploreContainer}>
<PanelContainer className={styles.queryContainer}>
<QueryRows exploreId={exploreId} />
<SecondaryActions
addQueryRowButtonDisabled={isLive}
// We cannot show multiple traces at the same time right now so we do not show add query button.
//TODO:unification
addQueryRowButtonHidden={false}
richHistoryRowButtonHidden={richHistoryRowButtonHidden}
richHistoryButtonActive={showRichHistory}
queryInspectorButtonActive={showQueryInspector}
onClickAddQueryRowButton={this.onClickAddQueryRowButton}
onClickRichHistoryButton={this.toggleShowRichHistory}
onClickQueryInspectorButton={this.toggleShowQueryInspector}
/>
<ResponseErrorContainer exploreId={exploreId} />
</PanelContainer>
<AutoSizer onResize={this.onResize} disableHeight>
{({ width }) => {
if (width === 0) {
return null;
}
return (
<main className={cx(styles.exploreMain)} style={{ width }}>
<ErrorBoundaryAlert>
{showPanels && (
<>
{showMetrics && graphResult && (
<ErrorBoundaryAlert>{this.renderGraphPanel(width)}</ErrorBoundaryAlert>
)}
{showRawPrometheus && (
<ErrorBoundaryAlert>{this.renderRawPrometheus(width)}</ErrorBoundaryAlert>
)}
{showTable && <ErrorBoundaryAlert>{this.renderTablePanel(width)}</ErrorBoundaryAlert>}
{showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel(width)}</ErrorBoundaryAlert>}
{showNodeGraph && <ErrorBoundaryAlert>{this.renderNodeGraphPanel()}</ErrorBoundaryAlert>}
{showFlameGraph && <ErrorBoundaryAlert>{this.renderFlameGraphPanel()}</ErrorBoundaryAlert>}
{showTrace && <ErrorBoundaryAlert>{this.renderTraceViewPanel()}</ErrorBoundaryAlert>}
{showLogsSample && <ErrorBoundaryAlert>{this.renderLogsSamplePanel()}</ErrorBoundaryAlert>}
{showCustom && <ErrorBoundaryAlert>{this.renderCustom(width)}</ErrorBoundaryAlert>}
{showNoData && <ErrorBoundaryAlert>{this.renderNoData()}</ErrorBoundaryAlert>}
</>
)}
{showRichHistory && (
<RichHistoryContainer
width={width}
exploreId={exploreId}
onClose={this.toggleShowRichHistory}
/>
)}
{showQueryInspector && (
<ExploreQueryInspector
exploreId={exploreId}
width={width}
onClose={this.toggleShowQueryInspector}
timeZone={timeZone}
/>
)}
</ErrorBoundaryAlert>
</main>
);
}}
</AutoSizer>
</div>
) : (
this.renderEmptyState(styles.exploreContainer)
)}
</CustomScrollbar>
return (
<main className={cx(styles.exploreMain)} style={{ width }}>
<ErrorBoundaryAlert>
{showPanels && (
<>
{showMetrics && graphResult && (
<ErrorBoundaryAlert>{this.renderGraphPanel(width)}</ErrorBoundaryAlert>
)}
{showRawPrometheus && (
<ErrorBoundaryAlert>{this.renderRawPrometheus(width)}</ErrorBoundaryAlert>
)}
{showTable && <ErrorBoundaryAlert>{this.renderTablePanel(width)}</ErrorBoundaryAlert>}
{showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel(width)}</ErrorBoundaryAlert>}
{showNodeGraph && <ErrorBoundaryAlert>{this.renderNodeGraphPanel()}</ErrorBoundaryAlert>}
{showFlameGraph && <ErrorBoundaryAlert>{this.renderFlameGraphPanel()}</ErrorBoundaryAlert>}
{showTrace && <ErrorBoundaryAlert>{this.renderTraceViewPanel()}</ErrorBoundaryAlert>}
{showLogsSample && <ErrorBoundaryAlert>{this.renderLogsSamplePanel()}</ErrorBoundaryAlert>}
{showCustom && <ErrorBoundaryAlert>{this.renderCustom(width)}</ErrorBoundaryAlert>}
{showNoData && <ErrorBoundaryAlert>{this.renderNoData()}</ErrorBoundaryAlert>}
</>
)}
{showRichHistory && (
<RichHistoryContainer
width={width}
exploreId={exploreId}
onClose={this.toggleShowRichHistory}
/>
)}
{showQueryInspector && (
<ExploreQueryInspector
exploreId={exploreId}
width={width}
onClose={this.toggleShowQueryInspector}
timeZone={timeZone}
/>
)}
</ErrorBoundaryAlert>
</main>
);
}}
</AutoSizer>
</div>
) : (
this.renderEmptyState(styles.exploreContainer)
)}
</CustomScrollbar>
</>
);
}
}
public/app/features/explore/ExploreToolbar.tsx
+1 -7
View File
@@ -41,12 +41,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
transform: 'rotate(180deg)',
},
}),
stickyToolbar: css({
position: 'sticky',
top: 0,
// reducing zIndex to prevent overlapping the top nav
zIndex: theme.zIndex.navbarFixed - 1,
}),
});
interface Props {
@@ -136,7 +130,7 @@ export function ExploreToolbar({ exploreId, topOfViewRef, onChangeTime }: Props)
};
return (
<div ref={topOfViewRef} className={styles.stickyToolbar}>
<div ref={topOfViewRef}>
{refreshInterval && <SetInterval func={onRunQuery} interval={refreshInterval} loading={loading} />}
<div ref={topOfViewRef}>
<AppChromeUpdate