diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
index 9758bfcb61a..e02a291226a 100755
--- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
+++ b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
@@ -82,7 +82,7 @@ function sameProps(prevProps: any, nextProps: any, propsToDiff: Array {
constructor(props: GraphNGProps) {
super(props);
- this.state = this.prepState(props);
+ let state = this.prepState(props);
+ state.alignedData = state.config!.prepData!([state.alignedFrame]) as AlignedData;
+ this.state = state;
this.plotInstance = React.createRef();
}
@@ -131,7 +133,6 @@ export class GraphNG extends React.Component {
state = {
alignedFrame,
- alignedData: config!.prepData!([alignedFrame]) as AlignedData,
config,
};
@@ -229,12 +230,13 @@ export class GraphNG extends React.Component {
if (shouldReconfig) {
newState.config = this.props.prepConfig(newState.alignedFrame, this.props.frames, this.getTimeRange);
- newState.alignedData = newState.config.prepData!([newState.alignedFrame]) as AlignedData;
pluginLog('GraphNG', false, 'config recreated', newState.config);
}
- }
- newState && this.setState(newState);
+ newState.alignedData = newState.config!.prepData!([newState.alignedFrame]) as AlignedData;
+
+ this.setState(newState);
+ }
}
}
@@ -255,7 +257,7 @@ export class GraphNG extends React.Component {
{(vizWidth: number, vizHeight: number) => (
) {
- const { children, className, root: portalRoot = document.body, forwardedRef } = props;
+ const { children, className, root, forwardedRef } = props;
const theme = useTheme2();
const node = useRef(null);
+ const portalRoot = root ?? getPortalContainer();
+
if (!node.current) {
node.current = document.createElement('div');
if (className) {
@@ -25,6 +27,7 @@ export function Portal(props: PropsWithChildren) {
if (node.current) {
portalRoot.appendChild(node.current);
}
+
return () => {
if (node.current) {
portalRoot.removeChild(node.current);
@@ -35,7 +38,18 @@ export function Portal(props: PropsWithChildren) {
return ReactDOM.createPortal(((props, ref) => {
return (props: MultiSelectCommonProps) {
return extends Omit, 'options'>, SelectAsyncProps {
+export interface AsyncSelectProps extends Omit, 'options'>, SelectAsyncProps {
// AsyncSelect has options stored internally. We cannot enable plain values as we don't have access to the fetched options
value?: SelectableValue | null;
invalid?: boolean;
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index bd313b231e7..b74dc5258d0 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -128,6 +128,7 @@ export function SelectBase({
onInputChange,
onKeyDown,
onOpenMenu,
+ onFocus,
openMenuOnFocus = false,
options = [],
placeholder = 'Choose',
@@ -235,6 +236,7 @@ export function SelectBase({
onKeyDown,
onMenuClose: onCloseMenu,
onMenuOpen: onOpenMenu,
+ onFocus,
formatOptionLabel,
openMenuOnFocus,
options,
diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts
index 4b93366dc86..12606c768c0 100644
--- a/packages/grafana-ui/src/components/Select/types.ts
+++ b/packages/grafana-ui/src/components/Select/types.ts
@@ -61,6 +61,7 @@ export interface SelectCommonProps {
onInputChange?: (value: string, actionMeta: InputActionMeta) => void;
onKeyDown?: (event: React.KeyboardEvent) => void;
onOpenMenu?: () => void;
+ onFocus?: () => void;
openMenuOnFocus?: boolean;
options?: Array>;
placeholder?: string;
diff --git a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx
index dcd271f5d44..c956b401e0e 100755
--- a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx
+++ b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx
@@ -20,7 +20,7 @@ import {
import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
import { UPlotChart } from '../uPlot/Plot';
import { Themeable2 } from '../../types';
-import { preparePlotData } from '../uPlot/utils';
+import { preparePlotData2, getStackingGroups } from '../uPlot/utils';
import { preparePlotFrame } from './utils';
import { isEqual } from 'lodash';
@@ -51,7 +51,7 @@ export class Sparkline extends PureComponent {
const alignedDataFrame = preparePlotFrame(props.sparkline, props.config);
this.state = {
- data: preparePlotData([alignedDataFrame]),
+ data: preparePlotData2(alignedDataFrame, getStackingGroups(alignedDataFrame)),
alignedDataFrame,
configBuilder: this.prepareConfig(alignedDataFrame),
};
@@ -65,7 +65,7 @@ export class Sparkline extends PureComponent {
return {
...state,
- data: preparePlotData([frame]),
+ data: preparePlotData2(frame, getStackingGroups(frame)),
alignedDataFrame: frame,
};
}
diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 1366744fd91..1097fad630f 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -304,9 +304,9 @@ export const Table: FC = memo((props: Props) => {
totalColumnsWidth={totalColumnsWidth}
/>
)}
- {paginationEl}
+ {paginationEl}
);
});
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index c70f0c9e199..3682b5da17e 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -184,6 +184,9 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
div:not(:only-child):first-child {
flex-grow: 0.6;
}
+ position: absolute;
+ bottom: 0;
+ left: 0;
`,
paginationSummary: css`
color: ${theme.colors.text.secondary};
@@ -191,11 +194,16 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
margin-left: auto;
`,
- tableContentWrapper: (totalColumnsWidth: number) => css`
- width: ${totalColumnsWidth ?? '100%'};
- display: flex;
- flex-direction: column;
- `,
+ tableContentWrapper: (totalColumnsWidth: number) => {
+ const width = totalColumnsWidth !== undefined ? `${totalColumnsWidth}px` : '100%';
+
+ return css`
+ label: tableContentWrapper;
+ width: ${width};
+ display: flex;
+ flex-direction: column;
+ `;
+ },
row: css`
label: row;
border-bottom: 1px solid ${borderColor};
diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index 562eb2669ee..d45f33cc436 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -38,18 +38,20 @@ export const Tab = React.forwardRef{children}
, node.current);
}
+/** @internal */
+export function getPortalContainer() {
+ return window.document.getElementById('grafana-portal-container') ?? document.body;
+}
+
+/** @internal */
+export function PortalContainer() {
+ return ;
+}
+
export const RefForwardingPortal = React.forwardRef
{content()}
-
+
);
}
);
diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
index b5eb2a07206..13fccb9223f 100644
--- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
@@ -32,7 +32,9 @@ export const TabsBar = React.forwardRef
-
);
});
diff --git a/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx b/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx
index 2b0813d2ee4..e3d54e93ce5 100644
--- a/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx
+++ b/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx
@@ -19,7 +19,7 @@ export class UnthemedTimeSeries extends React.Component- {children}
+ {children}
+
+ {icon && , 'value' | 'onChange' | 'loadOptions' | 'menuShouldPortal'> {
+ value?: DashboardPickerDTO['uid'];
+ onChange?: (value?: DashboardPickerDTO) => void;
+}
+
+export type DashboardPickerDTO = Pick &
+ Pick;
+
+const formatLabel = (folderTitle = 'General', dashboardTitle: string) => `${folderTitle}/${dashboardTitle}`;
+
+const getDashboards = debounce((query = ''): Promise>> => {
+ return backendSrv.search({ type: 'dash-db', query, limit: 100 }).then((result: DashboardSearchHit[]) => {
+ return result.map((item: DashboardSearchHit) => ({
+ value: {
+ // dashboards uid here is always defined as this endpoint does not return the default home dashboard
+ uid: item.uid!,
+ title: item.title,
+ folderTitle: item.folderTitle,
+ folderUid: item.folderUid,
+ },
+ label: formatLabel(item?.folderTitle, item.title),
+ }));
+ });
+}, 300);
+
+// TODO: this component should provide a way to apply different filters to the search APIs
+export const DashboardPicker = ({
+ value,
+ onChange,
+ placeholder = 'Select dashboard',
+ noOptionsMessage = 'No dashboards found',
+ ...props
+}: Props) => {
+ const [current, setCurrent] = useState>();
+
+ // This is required because the async select does not match the raw uid value
+ // We can not use a simple Select because the dashboard search should not return *everything*
+ useEffect(() => {
+ if (!value || value === current?.value?.uid) {
+ return;
+ }
+
+ (async () => {
+ // value was manually changed from outside or we are rendering for the first time.
+ // We need to fetch dashboard information.
+ const res = await backendSrv.getDashboardByUid(value);
+ setCurrent({
+ value: {
+ uid: res.dashboard.uid,
+ title: res.dashboard.title,
+ folderTitle: res.meta.folderTitle,
+ folderUid: res.meta.folderUid,
+ },
+ label: formatLabel(res.meta?.folderTitle, res.dashboard.title),
+ });
+ })();
+ // we don't need to rerun this effect every time `current` changes
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [value]);
+
+ const onPicked = useCallback(
+ (sel: SelectableValue) => {
+ setCurrent(sel);
+ onChange?.(sel?.value);
+ },
+ [onChange, setCurrent]
+ );
+
+ return (
+ = ({
tags,
width,
}) => {
- const theme = useTheme();
- const styles = getStyles(theme);
+ const styles = useStyles2(getStyles);
- const onLoadOptions = async (query: string) => {
+ const currentlySelectedTags = tags.map((tag) => ({ value: tag, label: tag, count: 0 }));
+ const [options, setOptions] = useState(currentlySelectedTags);
+ const [isLoading, setIsLoading] = useState(false);
+ const [previousTags, setPreviousTags] = useState(tags);
+
+ // Necessary to force re-render to keep tag options up to date / relevant
+ const selectKey = useMemo(() => tags.join(), [tags]);
+
+ const onLoadOptions = useCallback(async () => {
const options = await tagOptions();
- return options.map((option) => ({
- value: option.term,
- label: option.term,
- count: option.count,
- }));
- };
+ return options.map((option) => {
+ if (tags.includes(option.term)) {
+ return {
+ value: option.term,
+ label: option.term,
+ count: 0,
+ };
+ } else {
+ return {
+ value: option.term,
+ label: option.term,
+ count: option.count,
+ };
+ }
+ });
+ }, [tagOptions, tags]);
- const debouncedLoadOptions = debounce(onLoadOptions, 300);
+ const onFocus = useCallback(async () => {
+ setIsLoading(true);
+ const results = await onLoadOptions();
+ setOptions(results);
+ setIsLoading(false);
+ }, [onLoadOptions]);
+
+ useEffect(() => {
+ // Load options when tag is selected externally
+ if (tags.length > 0 && options.length === 0) {
+ onFocus();
+ }
+ }, [onFocus, options.length, tags.length]);
+
+ useEffect(() => {
+ // Update selected tags to not include (counts) when selected externally
+ if (tags !== previousTags) {
+ setPreviousTags(tags);
+ onFocus();
+ }
+ }, [onFocus, previousTags, tags]);
const onTagChange = (newTags: any[]) => {
// On remove with 1 item returns null, so we need to make sure it's an empty array in that case
// https://github.com/JedWatson/react-select/issues/3632
+ newTags.forEach((tag) => (tag.count = 0));
+
onChange((newTags || []).map((tag) => tag.value));
};
- const value = tags.map((tag) => ({ value: tag, label: tag, count: 0 }));
-
const selectOptions = {
+ key: selectKey,
+ onFocus,
+ isLoading,
+ options,
allowCreateWhileLoading: true,
allowCustomValue,
formatCreateLabel,
@@ -77,12 +122,11 @@ export const TagFilter: FC = ({
getOptionValue: (i: any) => i.value,
inputId,
isMulti: true,
- loadOptions: debouncedLoadOptions,
loadingMessage: 'Loading...',
noOptionsMessage: 'No tags found',
onChange: onTagChange,
placeholder,
- value,
+ value: currentlySelectedTags,
width,
components: {
Option: TagOption,
@@ -109,37 +153,35 @@ export const TagFilter: FC = ({
Clear tags
)}
-
);
};
TagFilter.displayName = 'TagFilter';
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
- return {
- tagFilter: css`
- position: relative;
- min-width: 180px;
- flex-grow: 1;
+const getStyles = (theme: GrafanaTheme2) => ({
+ tagFilter: css`
+ position: relative;
+ min-width: 180px;
+ flex-grow: 1;
- .label-tag {
- margin-left: 6px;
- cursor: pointer;
- }
- `,
- clear: css`
- text-decoration: underline;
- font-size: 12px;
- position: absolute;
- top: -22px;
- right: 0;
+ .label-tag {
+ margin-left: 6px;
cursor: pointer;
- color: ${theme.colors.textWeak};
+ }
+ `,
+ clear: css`
+ text-decoration: underline;
+ font-size: 12px;
+ position: absolute;
+ top: -22px;
+ right: 0;
+ cursor: pointer;
+ color: ${theme.colors.text.secondary};
- &:hover {
- color: ${theme.colors.textStrong};
- }
- `,
- };
+ &:hover {
+ color: ${theme.colors.text.primary};
+ }
+ `,
});
diff --git a/public/app/core/components/editors/DashboardPicker.tsx b/public/app/core/components/editors/DashboardPicker.tsx
index f806d44b300..51192d9c0f8 100644
--- a/public/app/core/components/editors/DashboardPicker.tsx
+++ b/public/app/core/components/editors/DashboardPicker.tsx
@@ -1,63 +1,28 @@
-import React, { FC, useCallback, useState } from 'react';
-import debounce from 'debounce-promise';
+import React, { FC, useCallback } from 'react';
import { SelectableValue, StandardEditorProps } from '@grafana/data';
-import { DashboardSearchHit } from 'app/features/search/types';
-import { backendSrv } from 'app/core/services/backend_srv';
-import { AsyncSelect } from '@grafana/ui';
-import { useAsync } from 'react-use';
+import { DashboardPicker as BasePicker, DashboardPickerDTO } from 'app/core/components/Select/DashboardPicker';
export interface DashboardPickerOptions {
placeholder?: string;
isClearable?: boolean;
}
-const getDashboards = (query = '') => {
- return backendSrv.search({ type: 'dash-db', query, limit: 100 }).then((result: DashboardSearchHit[]) => {
- return result.map((item: DashboardSearchHit) => ({
- value: item.uid,
- label: `${item?.folderTitle ?? 'General'}/${item.title}`,
- }));
- });
-};
-
/** This will return the item UID */
-export const DashboardPicker: FC
{alert}
@@ -58,7 +62,7 @@ export const PanelAlertTabContent: FCThere are no alert rules linked to this panel.
- {!!dashboard.meta.canSave &&
-
+
{alert.status.state === AlertState.Suppressed && (
= ({ alert, aler
)}
-
- {alert.generatorURL && (
-
- See source
-
- )}
-
+ {isSeeSourceButtonEnabled && alert.generatorURL && (
+
+ See source
+
+ )}
{Object.entries(alert.annotations).map(([annotationKey, annotationValue]) => (
Matching labels
-
- {fields.map((field, index) => {
- const localPath = `object_matchers[${index}]`;
- return (
-
-
-
-
-
- (
-
+
+ (
+
+
+
+
+ remove(index)}
+ >
+ Remove
+
+
+ );
+ })}
+
+ )}
+
+
)}