mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ScrollContainer: Apply to dashboard panels (#95724)
* add ScrollContainer to panels * remove unnecessary wrapper * fix text panel
This commit is contained in:
parent
f075662696
commit
34269a03c0
@ -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',
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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%',
|
||||
}),
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user