\n \n {ds.name} {ds.isDefault ?
\n \n {filteredResults.map((ds) => {\n return (\n onChange(ds)}\n />\n );\n })}\n
\n );\n}\n","import { css, cx } from '@emotion/css';\nimport React, { useRef } from 'react';\nimport { Observable } from 'rxjs';\n\nimport { DataSourceInstanceSettings, DataSourceRef, GrafanaTheme2 } from '@grafana/data';\nimport { getTemplateSrv } from '@grafana/runtime';\nimport { useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { useDatasources, useKeyboardNavigatableList, useRecentlyUsedDataSources } from '../../hooks';\n\nimport { AddNewDataSourceButton } from './AddNewDataSourceButton';\nimport { DataSourceCard } from './DataSourceCard';\nimport { getDataSourceCompareFn, isDataSourceMatch } from './utils';\n\n/**\n * Component props description for the {@link DataSourceList}\n *\n * @internal\n */\nexport interface DataSourceListProps {\n className?: string;\n onChange: (ds: DataSourceInstanceSettings) => void;\n current: DataSourceRef | DataSourceInstanceSettings | string | null | undefined;\n /** Would be nicer if these parameters were part of a filtering object */\n tracing?: boolean;\n mixed?: boolean;\n dashboard?: boolean;\n metrics?: boolean;\n type?: string | string[];\n annotations?: boolean;\n variables?: boolean;\n alerting?: boolean;\n pluginId?: string;\n /** If true,we show only DSs with logs; and if true, pluginId shouldnt be passed in */\n logs?: boolean;\n width?: number;\n keyboardEvents?: Observable\n {filteredDataSources.length === 0 && (\n {\n pushRecentlyUsedDataSource(ds);\n onChange(ds);\n }}\n selected={isDataSourceMatch(ds, current)}\n {...(enableKeyboardNavigation ? navigatableProps : {})}\n />\n ))}\n
\n );\n}\n\nfunction EmptyState({ className, onClickCTA }: { className?: string; onClickCTA?: () => void }) {\n const styles = useStyles2(getEmptyStateStyles);\n return (\n \n
\n );\n}\n\nfunction getEmptyStateStyles(theme: GrafanaTheme2) {\n return {\n container: css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n `,\n message: css`\n margin-bottom: ${theme.spacing(3)};\n `,\n };\n}\n\nfunction getDataSourceVariableIDs() {\n const templateSrv = getTemplateSrv();\n /** Unforunately there is no easy way to identify data sources that are variables. The uid of the data source will be the name of the variable in a templating syntax $([name]) **/\n return templateSrv\n .getVariables()\n .filter((v) => v.type === 'datasource')\n .map((v) => `\\${${v.id}}`);\n}\n\nfunction getStyles(theme: GrafanaTheme2, selectedItemCssSelector: string) {\n return {\n container: css`\n display: flex;\n flex-direction: column;\n ${selectedItemCssSelector} {\n background-color: ${theme.colors.background.secondary};\n }\n `,\n emptyState: css`\n height: 100%;\n flex: 1;\n `,\n };\n}\n","import { css } from '@emotion/css';\nimport { once } from 'lodash';\nimport React, { useState } from 'react';\n\nimport { DataSourceInstanceSettings, DataSourceRef, GrafanaTheme2 } from '@grafana/data';\nimport { config, reportInteraction } from '@grafana/runtime';\nimport { DataQuery } from '@grafana/schema';\nimport {\n Modal,\n FileDropzone,\n FileDropzoneDefaultChildren,\n CustomScrollbar,\n useStyles2,\n Input,\n Icon,\n} from '@grafana/ui';\nimport * as DFImport from 'app/features/dataframe-import';\nimport { GrafanaQuery } from 'app/plugins/datasource/grafana/types';\nimport { getFileDropToQueryHandler } from 'app/plugins/datasource/grafana/utils';\n\nimport { useDatasource } from '../../hooks';\n\nimport { AddNewDataSourceButton } from './AddNewDataSourceButton';\nimport { BuiltInDataSourceList } from './BuiltInDataSourceList';\nimport { DataSourceList } from './DataSourceList';\nimport { matchDataSourceWithSearch } from './utils';\n\nconst INTERACTION_EVENT_NAME = 'dashboards_dspickermodal_clicked';\nconst INTERACTION_ITEM = {\n SELECT_DS: 'select_ds',\n UPLOAD_FILE: 'upload_file',\n CONFIG_NEW_DS: 'config_new_ds',\n CONFIG_NEW_DS_EMPTY_STATE: 'config_new_ds_empty_state',\n SEARCH: 'search',\n DISMISS: 'dismiss',\n};\n\nexport interface DataSourceModalProps {\n onChange: (ds: DataSourceInstanceSettings, defaultQueries?: DataQuery[] | GrafanaQuery[]) => void;\n current: DataSourceRef | string | null | undefined;\n onDismiss: () => void;\n recentlyUsed?: string[];\n reportedInteractionFrom?: string;\n\n // DS filters\n filter?: (ds: DataSourceInstanceSettings) => boolean;\n tracing?: boolean;\n mixed?: boolean;\n dashboard?: boolean;\n metrics?: boolean;\n type?: string | string[];\n annotations?: boolean;\n variables?: boolean;\n alerting?: boolean;\n pluginId?: string;\n logs?: boolean;\n uploadFile?: boolean;\n}\n\nexport function DataSourceModal({\n tracing,\n dashboard,\n mixed,\n metrics,\n type,\n annotations,\n variables,\n alerting,\n pluginId,\n logs,\n uploadFile,\n filter,\n onChange,\n current,\n onDismiss,\n reportedInteractionFrom,\n}: DataSourceModalProps) {\n const styles = useStyles2(getDataSourceModalStyles);\n const [search, setSearch] = useState('');\n const analyticsInteractionSrc = reportedInteractionFrom || 'modal';\n\n const onDismissModal = () => {\n onDismiss();\n reportInteraction(INTERACTION_EVENT_NAME, { item: INTERACTION_ITEM.DISMISS, src: analyticsInteractionSrc });\n };\n const onChangeDataSource = (ds: DataSourceInstanceSettings) => {\n onChange(ds);\n reportInteraction(INTERACTION_EVENT_NAME, {\n item: INTERACTION_ITEM.SELECT_DS,\n ds_type: ds.type,\n src: analyticsInteractionSrc,\n });\n };\n // Memoizing to keep once() cached so it avoids reporting multiple times\n const reportSearchUsageOnce = React.useMemo(\n () =>\n once(() => {\n reportInteraction(INTERACTION_EVENT_NAME, { item: 'search', src: analyticsInteractionSrc });\n }),\n [analyticsInteractionSrc]\n );\n\n const grafanaDS = useDatasource('-- Grafana --');\n\n const onFileDrop = getFileDropToQueryHandler((query, fileRejections) => {\n if (!grafanaDS) {\n return;\n }\n onChange(grafanaDS, [query]);\n\n reportInteraction(INTERACTION_EVENT_NAME, {\n item: INTERACTION_ITEM.UPLOAD_FILE,\n src: analyticsInteractionSrc,\n });\n\n if (fileRejections.length < 1) {\n onDismiss();\n }\n });\n\n // Built-in data sources used twice because of mobile layout adjustments\n // In movile the list is appended to the bottom of the DS list\n const BuiltInList = ({ className }: { className?: string }) => {\n return (\n No data sources found
\n\n \n \n reportInteraction(INTERACTION_EVENT_NAME, {\n item: INTERACTION_ITEM.CONFIG_NEW_DS_EMPTY_STATE,\n src: analyticsInteractionSrc,\n })\n }\n filter={(ds) => (filter ? filter?.(ds) : true) && matchDataSourceWithSearch(ds, search) && !ds.meta.builtIn}\n variables={variables}\n tracing={tracing}\n metrics={metrics}\n type={type}\n annotations={annotations}\n alerting={alerting}\n pluginId={pluginId}\n logs={logs}\n dashboard={dashboard}\n mixed={mixed}\n />\n \n
\n \n
\n \n );\n}\n\nfunction getDataSourceModalStyles(theme: GrafanaTheme2) {\n return {\n modal: css`\n width: 80%;\n height: 80%;\n max-width: 1200px;\n max-height: 900px;\n\n ${theme.breakpoints.down('md')} {\n width: 100%;\n }\n `,\n modalContent: css`\n display: flex;\n flex-direction: row;\n height: 100%;\n\n ${theme.breakpoints.down('md')} {\n flex-direction: column;\n }\n `,\n leftColumn: css`\n display: flex;\n flex-direction: column;\n width: 50%;\n height: 100%;\n padding-right: ${theme.spacing(4)};\n border-right: 1px solid ${theme.colors.border.weak};\n\n ${theme.breakpoints.down('md')} {\n width: 100%;\n border-right: 0;\n padding-right: 0;\n flex: 1;\n overflow-y: auto;\n }\n `,\n rightColumn: css`\n display: flex;\n flex-direction: column;\n width: 50%;\n height: 100%;\n justify-items: space-evenly;\n align-items: stretch;\n padding-left: ${theme.spacing(4)};\n\n ${theme.breakpoints.down('md')} {\n width: 100%;\n padding-left: 0;\n flex: 0;\n }\n `,\n builtInDataSources: css`\n flex: 1 1;\n margin-bottom: ${theme.spacing(4)};\n\n ${theme.breakpoints.down('md')} {\n flex: 0;\n }\n `,\n builtInDataSourcesList: css`\n ${theme.breakpoints.down('md')} {\n display: none;\n margin-bottom: 0;\n }\n\n margin-bottom: ${theme.spacing(4)};\n `,\n appendBuiltInDataSourcesList: css`\n ${theme.breakpoints.up('md')} {\n display: none;\n }\n `,\n newDSSection: css`\n display: flex;\n flex-direction: row;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n `,\n newDSDescription: css`\n flex: 1 0;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.colors.text.secondary};\n `,\n searchInput: css`\n width: 100%;\n min-height: 32px;\n margin-bottom: ${theme.spacing(1)};\n `,\n };\n}\n","import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { DataSourceInstanceSettings, DataSourceJsonData, GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport interface DataSourceLogoProps {\n dataSource: DataSourceInstanceSettings\n \n \n {uploadFile && config.featureToggles.editPanelCSVDragAndDrop && (\n undefined}\n options={{\n maxSize: DFImport.maxFileSize,\n multiple: false,\n accept: DFImport.acceptedFiles,\n onDrop: onFileDrop,\n }}\n >\n
\n \n Open a new tab and configure a data source\n {\n reportInteraction(INTERACTION_EVENT_NAME, {\n item: INTERACTION_ITEM.CONFIG_NEW_DS,\n src: analyticsInteractionSrc,\n });\n onDismiss();\n }}\n />\n
\n \n {/* This clickable div is just extending the clickable area on the input element to include the prefix and suffix. */}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n \n \n {\n e.preventDefault(); /** Need to prevent default here to stop onMouseDown to trigger onBlur of the input element */\n }}\n >\n {\n onClose();\n onChange(ds, defaultQueries);\n }}\n onClose={onClose}\n current={currentValue}\n style={popper.styles.popper}\n ref={setSelectorElement}\n onClickAddCSV={onClickAddCSV}\n {...restProps}\n onDismiss={onClose}\n {...popper.attributes.popper}\n />\n
\n \n ) : null}\n \n );\n}\n\nfunction getStylesDropdown(theme: GrafanaTheme2, props: DataSourceDropdownProps) {\n return {\n container: css`\n position: relative;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n width: ${theme.spacing(props.width || 'auto')};\n `,\n trigger: css`\n cursor: pointer;\n ${props.disabled && `pointer-events: none;`}\n `,\n input: css`\n input::placeholder {\n color: ${props.disabled ? theme.colors.action.disabledText : theme.colors.text.primary};\n }\n `,\n };\n}\n\nexport interface PickerContentProps extends DataSourceDropdownProps {\n onClickAddCSV?: () => void;\n keyboardEvents: Observable\n
\n {isOpen ? (\n \n \n (filter ? filter?.(ds) : true) && matchDataSourceWithSearch(ds, filterTerm)}\n onClickEmptyStateCTA={() =>\n reportInteraction(INTERACTION_EVENT_NAME, {\n item: INTERACTION_ITEM.CONFIG_NEW_DS_EMPTY_STATE,\n })\n }\n >\n \n
\n );\n});\nPickerContent.displayName = 'PickerContent';\n\nfunction getStylesPickerContent(theme: GrafanaTheme2) {\n return {\n container: css`\n display: flex;\n flex-direction: column;\n max-width: 480px;\n background: ${theme.colors.background.primary};\n box-shadow: ${theme.shadows.z3};\n `,\n picker: css`\n background: ${theme.colors.background.secondary};\n `,\n dataSourceList: css`\n flex: 1;\n `,\n footer: css`\n flex: 0;\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: ${theme.spacing(1.5)};\n border-top: 1px solid ${theme.colors.border.weak};\n background-color: ${theme.colors.background.secondary};\n `,\n };\n}\n","import React from 'react';\n\nimport {\n DataSourcePicker as DeprecatedDataSourcePicker,\n DataSourcePickerProps as DeprecatedDataSourcePickerProps,\n} from '@grafana/runtime';\nimport { config } from 'app/core/config';\n\nimport { DataSourceDropdown, DataSourceDropdownProps } from './DataSourceDropdown';\n\ntype DataSourcePickerProps = DeprecatedDataSourcePickerProps | DataSourceDropdownProps;\n\n/**\n * DataSourcePicker is a wrapper around the old DataSourcePicker and the new one.\n * Depending on the feature toggle, it will render the old or the new one.\n * Feature toggle: advancedDataSourcePicker\n */\nexport function DataSourcePicker(props: DataSourcePickerProps) {\n return !config.featureToggles.advancedDataSourcePicker ? (\n \n \n {({ showModal, hideModal }) => (\n {\n onClose();\n showModal(DataSourceModal, {\n reportedInteractionFrom: 'ds_picker',\n tracing: props.tracing,\n dashboard: props.dashboard,\n mixed: props.mixed,\n metrics: props.metrics,\n type: props.type,\n annotations: props.annotations,\n variables: props.variables,\n alerting: props.alerting,\n pluginId: props.pluginId,\n logs: props.logs,\n filter: props.filter,\n uploadFile: props.uploadFile,\n current: props.current,\n onDismiss: hideModal,\n onChange: (ds, defaultQueries) => {\n onChange(ds, defaultQueries);\n hideModal();\n },\n });\n reportInteraction(INTERACTION_EVENT_NAME, { item: INTERACTION_ITEM.OPEN_ADVANCED_DS_PICKER });\n }}\n >\n Open advanced data source picker\n \n {uploadFile && config.featureToggles.editPanelCSVDragAndDrop && (\n \n )}\n
\n \n
\n );\n }\n\n renderQueryCachingTTLOption() {\n const { dataSource, options } = this.props;\n\n const tooltip = `Cache time-to-live: How long results from this queries in this panel will be cached, in milliseconds. Defaults to the TTL in the caching configuration for this datasource.`;\n\n if (!dataSource.cachingConfig?.enabled) {\n return null;\n }\n\n return (\n \n \n Cache timeout\n \n
\n \n
\n );\n }\n\n renderMaxDataPointsOption() {\n const { data, options } = this.props;\n const realMd = data.request?.maxDataPoints;\n const value = options.maxDataPoints ?? '';\n const isAuto = value === '';\n\n return (\n \n \n Cache TTL\n \n
\n \n
\n );\n }\n\n renderIntervalOption() {\n const { data, dataSource, options } = this.props;\n const realInterval = data.request?.interval;\n const minIntervalOnDs = dataSource.interval ?? 'No limit';\n\n return (\n <>\n \n \n The maximum data points per series. Used directly by some data sources and used in calculation of auto\n interval. With streaming data this value is used for the rolling buffer.\n \n }\n >\n Max data points\n \n
\n =
\n Width of panel
\n \n )}\n \n
\n \n \n A lower limit for the interval. Recommended to be set to write frequency, for example
\n 1m{' '}\n if your data is written every minute. Default value can be set in data source settings for most data\n sources.\n \n }\n >\n Min interval\n \n \n
\n \n );\n }\n\n onOpenOptions = () => {\n this.setState({ isOpen: true });\n };\n\n onCloseOptions = () => {\n this.setState({ isOpen: false });\n };\n\n renderCollapsedText(styles: StylesType): React.ReactNode | undefined {\n const { data, options } = this.props;\n const { isOpen } = this.state;\n\n if (isOpen) {\n return undefined;\n }\n\n let mdDesc = options.maxDataPoints ?? '';\n if (mdDesc === '' && data.request) {\n mdDesc = `auto = ${data.request.maxDataPoints}`;\n }\n\n let intervalDesc = options.minInterval;\n if (data.request) {\n intervalDesc = `${data.request.interval}`;\n }\n\n return (\n <>\n {\n \n The evaluated interval that is sent to data source and is used in {realInterval} \n
\n $__interval and{' '}\n $__interval_ms\n \n }\n >\n Interval\n \n =
\n Time range / max data points
\n MD = {mdDesc}
}\n {Interval = {intervalDesc}
}\n \n );\n }\n\n render() {\n const { timeRangeHide: hideTimeOverride, relativeTimeIsValid, timeShiftIsValid } = this.state;\n const { timeRangeFrom: relativeTime, timeRangeShift: timeShift, isOpen } = this.state;\n const styles = getStyles();\n\n return (\n \n Relative time \n
\n\n \n Time shift\n
\n {(timeShift || relativeTime) && (\n \n \n \n
\n )}\n \n );\n }\n}\n\nconst timeRangeValidation = (value: string | null) => {\n if (!value) {\n return true;\n }\n\n return rangeUtil.isValidTimeSpan(value);\n};\n\nconst emptyToNull = (value: string) => {\n return value === '' ? null : value;\n};\n\nconst getStyles = stylesFactory(() => {\n const { theme } = config;\n\n return {\n collapsedText: css`\n margin-left: ${theme.spacing.md};\n font-size: ${theme.typography.size.sm};\n color: ${theme.colors.textWeak};\n `,\n };\n});\n\ntype StylesType = ReturnType\n
\n );\n }\n\n onOpenHelp = () => {\n this.setState({ isHelpOpen: true });\n };\n\n onCloseHelp = () => {\n this.setState({ isHelpOpen: false });\n };\n\n onCloseDataSourceModal = () => {\n this.setState({ isDataSourceModalOpen: false });\n };\n\n renderMixedPicker = () => {\n return (\n \n \n Data source\n \n
\n {this.renderDataSourcePickerWithPrompt()}
\n {dataSource && (\n <>\n \n
\n \n
\n {onOpenQueryInspector && (\n \n \n Query inspector\n \n
\n )}\n \n )}\n \n
\n );\n }\n\n isExpressionsSupported(dsSettings: DataSourceInstanceSettings): boolean {\n return (dsSettings.meta.alerting || dsSettings.meta.mixed) === true;\n }\n\n renderExtraActions() {\n return GroupActionComponents.getAllExtraRenderAction()\n .map((action, index) =>\n action({\n onAddQuery: this.onAddQuery,\n onChangeDataSource: this.onChangeDataSource,\n key: index,\n })\n )\n .filter(Boolean);\n }\n\n renderAddQueryRow(dsSettings: DataSourceInstanceSettings, styles: QueriesTabStyles) {\n const { isAddingMixed } = this.state;\n const showAddButton = !(isAddingMixed || isSharedDashboardQuery(dsSettings.name));\n\n return (\n \n {this.renderTopSection(styles)}\n {dsSettings && (\n <>\n \n \n )}\n \n )}\n
\n {this.renderQueries(dsSettings)}
\n {this.renderAddQueryRow(dsSettings, styles)}\n {isHelpOpen && (\n