ScrollContainer: Apply to dashboard panels (#95724)

* add ScrollContainer to panels

* remove unnecessary wrapper

* fix text panel
This commit is contained in:
Ashley Harrison 2024-11-05 09:56:57 +00:00 committed by GitHub
parent f075662696
commit 34269a03c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 67 additions and 71 deletions

View File

@ -11,10 +11,10 @@ import {
BigValueGraphMode,
BigValueJustifyMode,
BigValueTextMode,
CustomScrollbar,
LoadingPlaceholder,
useStyles2,
} from '@grafana/ui';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import { config } from 'app/core/config';
import alertDef from 'app/features/alerting/state/alertDef';
import { alertRuleApi } from 'app/features/alerting/unified/api/alertRuleApi';
@ -219,40 +219,38 @@ function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
const havePreviousResults = Object.values(promRulesRequests).some((state) => state.result);
return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
<div className={styles.container}>
{havePreviousResults && noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
{havePreviousResults && (
<section>
{props.options.viewMode === ViewMode.Stat && (
<BigValue
width={props.width}
height={props.height}
graphMode={BigValueGraphMode.None}
textMode={BigValueTextMode.Auto}
justifyMode={BigValueJustifyMode.Auto}
theme={config.theme2}
value={{ text: `${rules.length}`, numeric: rules.length }}
/>
)}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && (
<GroupedModeView rules={rules} options={parsedOptions} />
)}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && (
<UngroupedModeView
rules={rules}
options={parsedOptions}
handleInstancesLimit={handleInstancesLimit}
limitInstances={limitInstances}
hideViewRuleLinkText={hideViewRuleLinkText}
/>
)}
</section>
)}
{/* loading moved here to avoid twitching */}
{renderLoading && <LoadingPlaceholder text="Loading..." />}
</div>
</CustomScrollbar>
<ScrollContainer minHeight="100%">
{havePreviousResults && noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
{havePreviousResults && (
<section>
{props.options.viewMode === ViewMode.Stat && (
<BigValue
width={props.width}
height={props.height}
graphMode={BigValueGraphMode.None}
textMode={BigValueTextMode.Auto}
justifyMode={BigValueJustifyMode.Auto}
theme={config.theme2}
value={{ text: `${rules.length}`, numeric: rules.length }}
/>
)}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && (
<GroupedModeView rules={rules} options={parsedOptions} />
)}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && (
<UngroupedModeView
rules={rules}
options={parsedOptions}
handleInstancesLimit={handleInstancesLimit}
limitInstances={limitInstances}
hideViewRuleLinkText={hideViewRuleLinkText}
/>
)}
</section>
)}
{/* loading moved here to avoid twitching */}
{renderLoading && <LoadingPlaceholder text="Loading..." />}
</ScrollContainer>
);
}
@ -356,10 +354,6 @@ export const getStyles = (theme: GrafanaTheme2) => ({
lineHeight: theme.typography.body.lineHeight,
marginBottom: 0,
}),
container: css({
overflowY: 'auto',
height: '100%',
}),
alertRuleList: css({
display: 'flex',
flexWrap: 'wrap',

View File

@ -13,8 +13,9 @@ import {
PanelProps,
} from '@grafana/data';
import { config, getBackendSrv, locationService } from '@grafana/runtime';
import { Button, CustomScrollbar, stylesFactory, TagList } from '@grafana/ui';
import { Button, stylesFactory, TagList } from '@grafana/ui';
import { AbstractList } from '@grafana/ui/src/components/List/AbstractList';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import appEvents from 'app/core/app_events';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
@ -259,7 +260,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
const hasFilter = queryUser || queryTags.length > 0;
return (
<CustomScrollbar autoHeightMin="100%">
<ScrollContainer minHeight="100%">
{hasFilter && (
<div className={this.style.filter}>
<b>Filter:</b>
@ -290,7 +291,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
{annotations.length < 1 && <div className={this.style.noneFound}>No Annotations Found</div>}
<AbstractList items={annotations} renderItem={this.renderItem} getItemKey={(item) => `${item.id}`} />
</CustomScrollbar>
</ScrollContainer>
);
}
}

View File

@ -11,7 +11,8 @@ import {
UrlQueryValue,
urlUtil,
} from '@grafana/data';
import { CustomScrollbar, useStyles2, IconButton } from '@grafana/ui';
import { useStyles2, IconButton } from '@grafana/ui';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import { updateNavIndex } from 'app/core/actions';
import { getConfig } from 'app/core/config';
import { appEvents } from 'app/core/core';
@ -205,7 +206,7 @@ export function DashList(props: PanelProps<Options>) {
);
return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
<ScrollContainer minHeight="100%">
{dashboardGroups.map(
({ show, header, dashboards }, i) =>
show && (
@ -215,7 +216,7 @@ export function DashList(props: PanelProps<Options>) {
</div>
)
)}
</CustomScrollbar>
</ScrollContainer>
);
}

View File

@ -20,7 +20,8 @@ import {
toUtc,
urlUtil,
} from '@grafana/data';
import { CustomScrollbar, usePanelContext, useStyles2 } from '@grafana/ui';
import { usePanelContext, useStyles2 } from '@grafana/ui';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import { getFieldLinksForExplore } from 'app/features/explore/utils/links';
import { LogRowContextModal } from 'app/features/logs/components/log-context/LogRowContextModal';
import { PanelDataErrorView } from 'app/features/panel/components/PanelDataErrorView';
@ -120,6 +121,10 @@ export const LogsPanel = ({
const [displayedFields, setDisplayedFields] = useState<string[]>(options.displayedFields ?? []);
let closeCallback = useRef<() => void>();
useEffect(() => {
scrollElement?.scrollTo(0, scrollTop);
}, [scrollElement, scrollTop]);
const { eventBus, onAddAdHocFilter } = usePanelContext();
const onLogRowHover = useCallback(
(row?: LogRowModel) => {
@ -356,11 +361,7 @@ export const LogsPanel = ({
getLogRowContextUi={getLogRowContextUi}
/>
)}
<CustomScrollbar
autoHide
scrollTop={scrollTop}
scrollRefCallback={(scrollElement) => setScrollElement(scrollElement)}
>
<ScrollContainer ref={(scrollElement) => setScrollElement(scrollElement)}>
<div onMouseLeave={onLogContainerMouseLeave} className={style.container} ref={logsContainerRef}>
{showCommonLabels && !isAscending && renderCommonLabels()}
<LogRows
@ -403,7 +404,7 @@ export const LogsPanel = ({
/>
{showCommonLabels && isAscending && renderCommonLabels()}
</div>
</CustomScrollbar>
</ScrollContainer>
</>
);
};

View File

@ -2,7 +2,8 @@ import { useEffect } from 'react';
import { PanelProps } from '@grafana/data';
import { RefreshEvent } from '@grafana/runtime';
import { Alert, CustomScrollbar, Icon } from '@grafana/ui';
import { Alert, Icon } from '@grafana/ui';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import { News } from './component/News';
import { DEFAULT_FEED_URL } from './constants';
@ -53,10 +54,10 @@ export function NewsPanel(props: NewsPanelProps) {
}
return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
<ScrollContainer minHeight="100%">
{state.value.map((_, index) => {
return <News key={index} index={index} width={width} showImage={showImage} data={state.value} />;
})}
</CustomScrollbar>
</ScrollContainer>
);
}

View File

@ -1,10 +1,11 @@
import { css, cx } from '@emotion/css';
import { css } from '@emotion/css';
import DangerouslySetHtmlContent from 'dangerously-set-html-content';
import { useState } from 'react';
import { useDebounce } from 'react-use';
import { GrafanaTheme2, PanelProps, renderTextPanelMarkdown, textUtil, InterpolateFunction } from '@grafana/data';
import { CustomScrollbar, CodeEditor, useStyles2 } from '@grafana/ui';
import { CodeEditor, useStyles2 } from '@grafana/ui';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import config from 'app/core/config';
import { defaultCodeOptions, Options, TextMode } from './panelcfg.gen';
@ -51,14 +52,16 @@ export function TextPanel(props: Props) {
}
return (
<CustomScrollbar autoHeightMin="100%" className={styles.containStrict}>
<DangerouslySetHtmlContent
allowRerender
html={processed.content}
className={styles.markdown}
data-testid="TextPanel-converted-content"
/>
</CustomScrollbar>
<div className={styles.containStrict}>
<ScrollContainer minHeight="100%">
<DangerouslySetHtmlContent
allowRerender
html={processed.content}
className="markdown-html"
data-testid="TextPanel-converted-content"
/>
</ScrollContainer>
</div>
);
}
@ -98,13 +101,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
backgroundColor: theme.colors.background.primary,
},
}),
markdown: cx(
'markdown-html',
css({
height: '100%',
})
),
containStrict: css({
contain: 'strict',
height: '100%',
}),
});