import {Component, Fragment} from 'react'; import {Link} from 'react-router'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; import {ModalRenderProps} from 'sentry/actionCreators/modal'; import {Client} from 'sentry/api'; import Button from 'sentry/components/button'; import Input from 'sentry/components/forms/controls/input'; import {IconChevron, IconSearch} from 'sentry/icons'; import {t} from 'sentry/locale'; import space from 'sentry/styles/space'; import {Organization, PageFilters} from 'sentry/types'; import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent'; import withApi from 'sentry/utils/withApi'; import withPageFilters from 'sentry/utils/withPageFilters'; import {Widget} from 'sentry/views/dashboardsV2/types'; import {getWidgetDiscoverUrl} from 'sentry/views/dashboardsV2/utils'; export type DashboardWidgetQuerySelectorModalOptions = { organization: Organization; widget: Widget; isMetricsData?: boolean; }; type Props = ModalRenderProps & DashboardWidgetQuerySelectorModalOptions & { api: Client; organization: Organization; selection: PageFilters; }; class DashboardWidgetQuerySelectorModal extends Component { renderQueries() { const {organization, widget, selection, isMetricsData} = this.props; const querySearchBars = widget.queries.map((query, index) => { const discoverLocation = getWidgetDiscoverUrl( { ...widget, queries: [query], }, selection, organization, 0, isMetricsData ); return ( } onClick={() => { trackAdvancedAnalyticsEvent( 'dashboards_views.query_selector.selected', { organization, widget_type: widget.displayType, } ); }} aria-label={t('Open in Discover')} /> ); }); return querySearchBars; } render() { const {Body, Header, widget} = this.props; return (

{widget.title}

{t( 'Multiple queries were used to create this widget visualization. Which query would you like to view in Discover?' )}

{this.renderQueries()} ); } } const StyledInput = styled(Input)` text-overflow: ellipsis; padding: 0px; box-shadow: none; height: auto; &:disabled { border: none; cursor: default; } `; const QueryContainer = styled('div')` display: flex; margin-bottom: ${space(1)}; `; const OpenInDiscoverButton = styled(Button)` margin-left: ${space(1)}; `; const Container = styled('div')` border: 1px solid ${p => p.theme.border}; box-shadow: inset ${p => p.theme.dropShadowLight}; background: ${p => p.theme.backgroundSecondary}; padding: 7px ${space(1)}; position: relative; display: grid; grid-template-columns: max-content 1fr max-content; gap: ${space(1)}; align-items: start; flex-grow: 1; border-radius: ${p => p.theme.borderRadius}; `; const SearchLabel = styled('label')` display: flex; padding: ${space(0.5)} 0; margin: 0; color: ${p => p.theme.gray300}; `; export const modalCss = css` width: 100%; max-width: 700px; margin: 70px auto; `; export default withApi(withPageFilters(DashboardWidgetQuerySelectorModal));