Logs: fix spacing between volume and logs panel

This commit is contained in:
Gareth Dawson 2025-10-02 23:46:27 +08:00
parent 8cb10d45ea
commit 016880f5a1
2 changed files with 28 additions and 23 deletions

View File

@ -77,7 +77,7 @@ const getStyles = (theme: GrafanaTheme2) => {
label: 'exploreMain',
// Is needed for some transition animations to work.
position: 'relative',
marginTop: '21px',
marginTop: theme.spacing(3),
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),

View File

@ -799,28 +799,30 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
onClickHideField={hideField}
/>
)}
<PanelChrome
title={t('explore.unthemed-logs.title-logs-volume', 'Logs volume')}
collapsible
collapsed={!logsVolumeEnabled}
onToggleCollapse={onToggleLogsVolumeCollapse}
>
{logsVolumeEnabled && (
<LogsVolumePanelList
toggleLegendRef={toggleLegendRef}
absoluteRange={absoluteRange}
width={width}
logsVolumeData={logsVolumeData}
onUpdateTimeRange={onChangeTime}
timeZone={timeZone}
splitOpen={splitOpen}
onLoadLogsVolume={loadLogsVolumeData}
onDisplayedSeriesChanged={onDisplayedSeriesChanged}
eventBus={logsVolumeEventBus}
onClose={() => onToggleLogsVolumeCollapse(true)}
/>
)}
</PanelChrome>
<div className={styles.logsVolumePanel}>
<PanelChrome
title={t('explore.unthemed-logs.title-logs-volume', 'Logs volume')}
collapsible
collapsed={!logsVolumeEnabled}
onToggleCollapse={onToggleLogsVolumeCollapse}
>
{logsVolumeEnabled && (
<LogsVolumePanelList
toggleLegendRef={toggleLegendRef}
absoluteRange={absoluteRange}
width={width}
logsVolumeData={logsVolumeData}
onUpdateTimeRange={onChangeTime}
timeZone={timeZone}
splitOpen={splitOpen}
onLoadLogsVolume={loadLogsVolumeData}
onDisplayedSeriesChanged={onDisplayedSeriesChanged}
eventBus={logsVolumeEventBus}
onClose={() => onToggleLogsVolumeCollapse(true)}
/>
)}
</PanelChrome>
</div>
<PanelChrome
titleItems={[
config.featureToggles.logsExploreTableVisualisation ? (
@ -1278,6 +1280,9 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean, tableHeight: n
overflow: 'visible',
...(config.featureToggles.logsInfiniteScrolling && { marginBottom: '0px' }),
}),
logsVolumePanel: css({
marginBottom: theme.spacing(1.5),
}),
};
};