{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 &&Matching labels
-
- {fields.map((field, index) => {
- const localPath = `object_matchers[${index}]`;
- return (
-
-
-
-
-
- (
-
+
+ (
+
+
+
+
+ remove(index)}
+ >
+ Remove
+
+
+ );
+ })}
+
+ )}
+
+
)}