From a201c76c5fcd3c35eb4169fc82abc666bb5985e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Jan 2019 17:04:24 +0100 Subject: [PATCH 1/7] wip: moved plugin exports --- packages/grafana-ui/src/types/index.ts | 1 + packages/grafana-ui/src/types/plugin.ts | 20 ++++ public/app/features/plugins/plugin_loader.ts | 2 +- public/app/types/datasources.ts | 3 +- public/app/types/index.ts | 108 ++++--------------- public/app/types/plugins.ts | 20 +--- public/app/types/series.ts | 4 +- public/app/types/store.ts | 27 +++++ 8 files changed, 73 insertions(+), 112 deletions(-) create mode 100644 packages/grafana-ui/src/types/plugin.ts create mode 100644 public/app/types/store.ts diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts index f618ce6db34..7d8fabeb092 100644 --- a/packages/grafana-ui/src/types/index.ts +++ b/packages/grafana-ui/src/types/index.ts @@ -1,3 +1,4 @@ export * from './series'; export * from './time'; export * from './panel'; +export * from './plugin'; diff --git a/packages/grafana-ui/src/types/plugin.ts b/packages/grafana-ui/src/types/plugin.ts new file mode 100644 index 00000000000..9abeba583d5 --- /dev/null +++ b/packages/grafana-ui/src/types/plugin.ts @@ -0,0 +1,20 @@ +import { ComponentClass } from 'react'; +import { PanelProps, PanelOptionsProps } from './panel'; + +export interface PluginExports { + Datasource?: any; + QueryCtrl?: any; + QueryEditor?: any; + ConfigCtrl?: any; + AnnotationsQueryCtrl?: any; + VariableQueryEditor?: any; + ExploreQueryField?: any; + ExploreStartPage?: any; + + // Panel plugin + PanelCtrl?: any; + Panel?: ComponentClass; + PanelOptions?: ComponentClass; + PanelDefaults?: any; +} + diff --git a/public/app/features/plugins/plugin_loader.ts b/public/app/features/plugins/plugin_loader.ts index 3c4fa29382d..206edf0bd9d 100644 --- a/public/app/features/plugins/plugin_loader.ts +++ b/public/app/features/plugins/plugin_loader.ts @@ -18,7 +18,7 @@ import config from 'app/core/config'; import TimeSeries from 'app/core/time_series2'; import TableModel from 'app/core/table_model'; import { coreModule, appEvents, contextSrv } from 'app/core/core'; -import { PluginExports } from 'app/types/plugins'; +import { PluginExports } from '@grafana/ui'; import * as datemath from 'app/core/utils/datemath'; import * as fileExport from 'app/core/utils/file_export'; import * as flatten from 'app/core/utils/flatten'; diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts index 5670d762d77..f2c2478e78b 100644 --- a/public/app/types/datasources.ts +++ b/public/app/types/datasources.ts @@ -1,5 +1,6 @@ import { LayoutMode } from '../core/components/LayoutSelector/LayoutSelector'; -import { Plugin, PluginExports, PluginMeta } from './plugins'; +import { Plugin, PluginMeta } from './plugins'; +import { PluginExports } from '@grafana/ui'; export interface DataSource { id: number; diff --git a/public/app/types/index.ts b/public/app/types/index.ts index ad9f19e2c9f..5b43d1909e3 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -1,90 +1,20 @@ -import { Team, TeamsState, TeamState, TeamGroup, TeamMember } from './teams'; -import { AlertRuleDTO, AlertRule, AlertRulesState } from './alerting'; -import { LocationState, LocationUpdate, UrlQueryMap, UrlQueryValue } from './location'; -import { NavModel, NavModelItem, NavIndex } from './navModel'; -import { FolderDTO, FolderState, FolderInfo } from './folders'; -import { DashboardState } from './dashboard'; -import { DashboardAcl, OrgRole, PermissionLevel } from './acl'; -import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys'; -import { Invitee, OrgUser, User, UsersState, UserState } from './user'; -import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources'; -import { DataQuery, DataQueryResponse, DataQueryOptions } from './series'; -import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins'; -import { Organization, OrganizationState } from './organization'; -import { - AppNotification, - AppNotificationSeverity, - AppNotificationsState, - AppNotificationTimeout, -} from './appNotifications'; -import { DashboardSearchHit } from './search'; -import { ValidationEvents, ValidationRule } from './form'; -import { ExploreState } from './explore'; -export { - Team, - TeamsState, - TeamState, - TeamGroup, - TeamMember, - AlertRuleDTO, - AlertRule, - AlertRulesState, - LocationState, - LocationUpdate, - NavModel, - NavModelItem, - NavIndex, - UrlQueryMap, - UrlQueryValue, - FolderDTO, - FolderState, - FolderInfo, - DashboardState, - DashboardAcl, - OrgRole, - PermissionLevel, - DataSource, - DataSourceSelectItem, - PluginMeta, - ApiKey, - ApiKeysState, - NewApiKey, - Plugin, - PluginsState, - DataSourcesState, - Invitee, - OrgUser, - User, - UsersState, - PanelPlugin, - DataQuery, - DataQueryResponse, - DataQueryOptions, - PluginDashboard, - Organization, - OrganizationState, - AppNotification, - AppNotificationsState, - AppNotificationSeverity, - AppNotificationTimeout, - DashboardSearchHit, - UserState, - ValidationEvents, - ValidationRule, -}; +export * from './teams'; +export * from './alerting'; +export * from './location'; +export * from './navModel'; +export * from './folders'; +export * from './dashboard'; +export * from './acl'; +export * from './apiKeys'; +export * from './user'; +export * from './datasources'; +export * from './series'; +export * from './plugins'; +export * from './organization'; +export * from './appNotifications'; +export * from './search'; +export * from './form'; +export * from './explore'; +export * from './store'; + -export interface StoreState { - navIndex: NavIndex; - location: LocationState; - alertRules: AlertRulesState; - teams: TeamsState; - team: TeamState; - folder: FolderState; - dashboard: DashboardState; - dataSources: DataSourcesState; - explore: ExploreState; - users: UsersState; - organization: OrganizationState; - appNotifications: AppNotificationsState; - user: UserState; -} diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index 4dacb3f8ccb..632e301613b 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -1,22 +1,4 @@ -import { ComponentClass } from 'react'; -import { PanelProps, PanelOptionsProps } from '@grafana/ui'; - -export interface PluginExports { - Datasource?: any; - QueryCtrl?: any; - QueryEditor?: any; - ConfigCtrl?: any; - AnnotationsQueryCtrl?: any; - VariableQueryEditor?: any; - ExploreQueryField?: any; - ExploreStartPage?: any; - - // Panel plugin - PanelCtrl?; - Panel?: ComponentClass; - PanelOptions?: ComponentClass; - PanelDefaults?: any; -} +import { PluginExports } from '@grafana/ui/src/types'; export interface PanelPlugin { id: string; diff --git a/public/app/types/series.ts b/public/app/types/series.ts index 6f1795ef544..c07e543d8b5 100644 --- a/public/app/types/series.ts +++ b/public/app/types/series.ts @@ -1,5 +1,5 @@ -import { PluginMeta, PluginExports } from './plugins'; -import { TimeSeries, TimeRange, RawTimeRange } from '@grafana/ui'; +import { PluginMeta } from './plugins'; +import { TimeSeries, TimeRange, RawTimeRange, PluginExports } from '@grafana/ui'; export interface DataQueryResponse { data: TimeSeries[]; diff --git a/public/app/types/store.ts b/public/app/types/store.ts new file mode 100644 index 00000000000..0f5ad8cd088 --- /dev/null +++ b/public/app/types/store.ts @@ -0,0 +1,27 @@ +import { NavIndex } from './navModel'; +import { LocationState } from './location'; +import { AlertRulesState } from './alerting'; +import { TeamsState, TeamState } from './teams'; +import { FolderState } from './folders'; +import { DashboardState } from './dashboard'; +import { DataSourcesState } from './datasources'; +import { ExploreState } from './explore'; +import { UsersState, UserState } from './user'; +import { OrganizationState } from './organization'; +import { AppNotificationsState } from './appNotifications'; + +export interface StoreState { + navIndex: NavIndex; + location: LocationState; + alertRules: AlertRulesState; + teams: TeamsState; + team: TeamState; + folder: FolderState; + dashboard: DashboardState; + dataSources: DataSourcesState; + explore: ExploreState; + users: UsersState; + organization: OrganizationState; + appNotifications: AppNotificationsState; + user: UserState; +} From 4fc9d794ca46b31e931597c55cf1840f2a1f0406 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Jan 2019 17:37:34 +0100 Subject: [PATCH 2/7] Moved plugin types to @grafana/ui --- packages/grafana-ui/src/types/plugin.ts | 51 ++++++++++++++++++ .../features/datasources/state/navModel.ts | 3 +- public/app/features/plugins/state/navModel.ts | 3 +- .../app/plugins/datasource/loki/datasource.ts | 3 +- .../datasource/testdata/QueryEditor.tsx | 12 +++++ public/app/types/datasources.ts | 4 +- public/app/types/plugins.ts | 52 +------------------ public/app/types/series.ts | 3 +- 8 files changed, 73 insertions(+), 58 deletions(-) create mode 100644 public/app/plugins/datasource/testdata/QueryEditor.tsx diff --git a/packages/grafana-ui/src/types/plugin.ts b/packages/grafana-ui/src/types/plugin.ts index 9abeba583d5..a2ee426dd9f 100644 --- a/packages/grafana-ui/src/types/plugin.ts +++ b/packages/grafana-ui/src/types/plugin.ts @@ -18,3 +18,54 @@ export interface PluginExports { PanelDefaults?: any; } +export interface PluginMeta { + id: string; + name: string; + info: PluginMetaInfo; + includes: PluginInclude[]; + + // Datasource-specific + metrics?: boolean; + tables?: boolean; + logs?: boolean; + explore?: boolean; + annotations?: boolean; + mixed?: boolean; + hasQueryHelp?: boolean; + queryOptions?: PluginMetaQueryOptions; +} + +interface PluginMetaQueryOptions { + cacheTimeout?: boolean; + maxDataPoints?: boolean; + minInterval?: boolean; +} + +export interface PluginInclude { + type: string; + name: string; + path: string; +} + +interface PluginMetaInfoLink { + name: string; + url: string; +} + +export interface PluginMetaInfo { + author: { + name: string; + url?: string; + }; + description: string; + links: PluginMetaInfoLink[]; + logos: { + large: string; + small: string; + }; + screenshots: any[]; + updated: string; + version: string; +} + + diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts index 19fc422e3b8..49ee4e770c0 100644 --- a/public/app/features/datasources/state/navModel.ts +++ b/public/app/features/datasources/state/navModel.ts @@ -1,4 +1,5 @@ -import { DataSource, NavModel, NavModelItem, PluginMeta } from 'app/types'; +import { DataSource, NavModel, NavModelItem } from 'app/types'; +import { PluginMeta } from '@grafana/ui/src/types'; import config from 'app/core/config'; export function buildNavModel(dataSource: DataSource, pluginMeta: PluginMeta): NavModelItem { diff --git a/public/app/features/plugins/state/navModel.ts b/public/app/features/plugins/state/navModel.ts index f12967ebb7a..e08b8e05adc 100644 --- a/public/app/features/plugins/state/navModel.ts +++ b/public/app/features/plugins/state/navModel.ts @@ -1,5 +1,6 @@ import _ from 'lodash'; -import { DataSource, PluginMeta, NavModel } from 'app/types'; +import { DataSource, NavModel } from 'app/types'; +import { PluginMeta } from '@grafana/ui/src/types'; import config from 'app/core/config'; export function buildNavModel(ds: DataSource, plugin: PluginMeta, currentPage: string): NavModel { diff --git a/public/app/plugins/datasource/loki/datasource.ts b/public/app/plugins/datasource/loki/datasource.ts index eb33c7ef285..d1263d9145f 100644 --- a/public/app/plugins/datasource/loki/datasource.ts +++ b/public/app/plugins/datasource/loki/datasource.ts @@ -2,7 +2,8 @@ import _ from 'lodash'; import * as dateMath from 'app/core/utils/datemath'; import { LogsStream, LogsModel, makeSeriesForLogs } from 'app/core/logs_model'; -import { PluginMeta, DataQuery } from 'app/types'; +import { DataQuery } from 'app/types'; +import { PluginMeta } from '@grafana/ui/src/types'; import { addLabelToSelector } from 'app/plugins/datasource/prometheus/add_label_to_query'; import LanguageProvider from './language_provider'; diff --git a/public/app/plugins/datasource/testdata/QueryEditor.tsx b/public/app/plugins/datasource/testdata/QueryEditor.tsx new file mode 100644 index 00000000000..675d1a74ea8 --- /dev/null +++ b/public/app/plugins/datasource/testdata/QueryEditor.tsx @@ -0,0 +1,12 @@ +import React, { PureComponent } from 'react'; + +interface Props { +} + +export class QueryEditor extends PureComponent { + render() { + return ( +

Test data

+ ); + } +} diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts index f2c2478e78b..234085ee49e 100644 --- a/public/app/types/datasources.ts +++ b/public/app/types/datasources.ts @@ -1,6 +1,6 @@ import { LayoutMode } from '../core/components/LayoutSelector/LayoutSelector'; -import { Plugin, PluginMeta } from './plugins'; -import { PluginExports } from '@grafana/ui'; +import { Plugin } from './plugins'; +import { PluginExports, PluginMeta } from '@grafana/ui/src/types'; export interface DataSource { id: number; diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index 632e301613b..cd608dc11e3 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -1,4 +1,4 @@ -import { PluginExports } from '@grafana/ui/src/types'; +import { PluginExports, PluginMetaInfo } from '@grafana/ui/src/types'; export interface PanelPlugin { id: string; @@ -11,56 +11,6 @@ export interface PanelPlugin { exports?: PluginExports; } -interface PluginMetaQueryOptions { - cacheTimeout?: boolean; - maxDataPoints?: boolean; - minInterval?: boolean; -} - -export interface PluginMeta { - id: string; - name: string; - info: PluginMetaInfo; - includes: PluginInclude[]; - - // Datasource-specific - metrics?: boolean; - tables?: boolean; - logs?: boolean; - explore?: boolean; - annotations?: boolean; - mixed?: boolean; - hasQueryHelp?: boolean; - queryOptions?: PluginMetaQueryOptions; -} - -export interface PluginInclude { - type: string; - name: string; - path: string; -} - -interface PluginMetaInfoLink { - name: string; - url: string; -} - -export interface PluginMetaInfo { - author: { - name: string; - url?: string; - }; - description: string; - links: PluginMetaInfoLink[]; - logos: { - large: string; - small: string; - }; - screenshots: any[]; - updated: string; - version: string; -} - export interface Plugin { defaultNavUrl: string; enabled: boolean; diff --git a/public/app/types/series.ts b/public/app/types/series.ts index c07e543d8b5..2958ddbaa20 100644 --- a/public/app/types/series.ts +++ b/public/app/types/series.ts @@ -1,5 +1,4 @@ -import { PluginMeta } from './plugins'; -import { TimeSeries, TimeRange, RawTimeRange, PluginExports } from '@grafana/ui'; +import { TimeSeries, TimeRange, RawTimeRange, PluginExports, PluginMeta } from '@grafana/ui/src/types'; export interface DataQueryResponse { data: TimeSeries[]; From febb9e71688cba94e2005d2401efc08f9b0b1ec5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Jan 2019 17:59:47 +0100 Subject: [PATCH 3/7] Moved data source and data query types --- .../grafana-ui/src/types/datasource.ts | 4 ++- packages/grafana-ui/src/types/index.ts | 1 + public/app/core/utils/explore.ts | 11 +++--- .../features/dashboard/dashgrid/DataPanel.tsx | 3 +- .../dashboard/panel_editor/QueriesTab.tsx | 3 +- .../dashboard/panel_editor/QueryEditorRow.tsx | 2 +- public/app/features/dashboard/panel_model.ts | 7 ++-- public/app/features/explore/Explore.tsx | 35 +++++++++++-------- public/app/features/explore/QueryEditor.tsx | 10 ++++-- public/app/features/explore/QueryRow.tsx | 18 ++++++---- public/app/features/explore/QueryRows.tsx | 12 ++++--- .../app/features/explore/state/actionTypes.ts | 5 ++- public/app/features/explore/state/actions.ts | 3 +- public/app/features/explore/state/reducers.ts | 2 +- public/app/features/plugins/datasource_srv.ts | 2 +- .../loki/components/LokiQueryField.tsx | 2 +- .../app/plugins/datasource/loki/datasource.ts | 3 +- .../datasource/loki/language_provider.ts | 2 +- .../prometheus/components/PromQueryField.tsx | 2 +- .../datasource/prometheus/datasource.ts | 2 +- public/app/types/explore.ts | 4 +-- public/app/types/index.ts | 1 - 22 files changed, 78 insertions(+), 56 deletions(-) rename public/app/types/series.ts => packages/grafana-ui/src/types/datasource.ts (87%) diff --git a/public/app/types/series.ts b/packages/grafana-ui/src/types/datasource.ts similarity index 87% rename from public/app/types/series.ts rename to packages/grafana-ui/src/types/datasource.ts index 2958ddbaa20..13a41f94cb5 100644 --- a/public/app/types/series.ts +++ b/packages/grafana-ui/src/types/datasource.ts @@ -1,4 +1,6 @@ -import { TimeSeries, TimeRange, RawTimeRange, PluginExports, PluginMeta } from '@grafana/ui/src/types'; +import { TimeRange, RawTimeRange } from './time'; +import { TimeSeries } from './series'; +import { PluginExports, PluginMeta } from './plugin'; export interface DataQueryResponse { data: TimeSeries[]; diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts index 7d8fabeb092..eaa39fb080b 100644 --- a/packages/grafana-ui/src/types/index.ts +++ b/packages/grafana-ui/src/types/index.ts @@ -2,3 +2,4 @@ export * from './series'; export * from './time'; export * from './panel'; export * from './plugin'; +export * from './datasource'; diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index b05e38a4b33..2d1c0d2ad71 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -1,14 +1,18 @@ +// Libraries import _ from 'lodash'; -import { colors, RawTimeRange, IntervalValues } from '@grafana/ui'; +// Services & Utils import * as dateMath from 'app/core/utils/datemath'; import { renderUrl } from 'app/core/utils/url'; import kbn from 'app/core/utils/kbn'; import store from 'app/core/store'; import { parse as parseDate } from 'app/core/utils/datemath'; - -import TimeSeries from 'app/core/time_series2'; +import { colors } from '@grafana/ui'; import TableModel, { mergeTablesIntoModel } from 'app/core/table_model'; + +// Types +import { RawTimeRange, IntervalValues, DataQuery } from '@grafana/ui/src/types'; +import TimeSeries from 'app/core/time_series2'; import { ExploreUrlState, HistoryItem, @@ -17,7 +21,6 @@ import { QueryIntervals, QueryOptions, } from 'app/types/explore'; -import { DataQuery } from 'app/types/series'; export const DEFAULT_RANGE = { from: 'now-6h', diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx index d71a274ab10..d4f6859f1b6 100644 --- a/public/app/features/dashboard/dashgrid/DataPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx @@ -12,8 +12,7 @@ import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource import kbn from 'app/core/utils/kbn'; // Types -import { DataQueryOptions, DataQueryResponse } from 'app/types'; -import { TimeRange, TimeSeries, LoadingState } from '@grafana/ui'; +import { TimeRange, TimeSeries, LoadingState, DataQueryResponse, DataQueryOptions } from '@grafana/ui/src/types'; const DEFAULT_PLUGIN_ERROR = 'Error in plugin'; diff --git a/public/app/features/dashboard/panel_editor/QueriesTab.tsx b/public/app/features/dashboard/panel_editor/QueriesTab.tsx index 7d2f77aa338..4579e1c4a7b 100644 --- a/public/app/features/dashboard/panel_editor/QueriesTab.tsx +++ b/public/app/features/dashboard/panel_editor/QueriesTab.tsx @@ -18,7 +18,8 @@ import config from 'app/core/config'; // Types import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; -import { DataQuery, DataSourceSelectItem } from 'app/types'; +import { DataQuery } from '@grafana/ui'; +import { DataSourceSelectItem } from 'app/types'; import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp'; interface Props { diff --git a/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx b/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx index 410d0029b15..392890ab9f1 100644 --- a/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx +++ b/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx @@ -10,7 +10,7 @@ import { Emitter } from 'app/core/utils/emitter'; // Types import { PanelModel } from '../panel_model'; -import { DataQuery, DataSourceApi } from 'app/types/series'; +import { DataQuery, DataSourceApi } from '@grafana/ui'; interface Props { panel: PanelModel; diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts index 2fec8e379dd..78f399122d7 100644 --- a/public/app/features/dashboard/panel_model.ts +++ b/public/app/features/dashboard/panel_model.ts @@ -1,7 +1,10 @@ -import { Emitter } from 'app/core/utils/emitter'; +// Libraries import _ from 'lodash'; + +// Types +import { Emitter } from 'app/core/utils/emitter'; import { PANEL_OPTIONS_KEY_PREFIX } from 'app/core/constants'; -import { DataQuery } from 'app/types'; +import { DataQuery } from '@grafana/ui/src/types'; export interface GridPos { x: number; diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index a8acab50137..60d7428b53b 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -1,19 +1,25 @@ +// Libraries import React from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; import _ from 'lodash'; import { AutoSizer } from 'react-virtualized'; -import { RawTimeRange, TimeRange } from '@grafana/ui'; -import { DataSourceSelectItem } from 'app/types/datasources'; -import { ExploreItemState, ExploreUrlState, RangeScanner, ExploreId } from 'app/types/explore'; -import { DataQuery } from 'app/types/series'; -import { StoreState } from 'app/types'; +// Services & Utils import store from 'app/core/store'; -import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE } from 'app/core/utils/explore'; -import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker'; -import { Emitter } from 'app/core/utils/emitter'; +// Components +import { DataSourceSelectItem } from 'app/types/datasources'; +import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker'; +import { Alert } from './Error'; +import ErrorBoundary from './ErrorBoundary'; +import GraphContainer from './GraphContainer'; +import LogsContainer from './LogsContainer'; +import QueryRows from './QueryRows'; +import TableContainer from './TableContainer'; +import TimePicker, { parseTime } from './TimePicker'; + +// Actions import { changeDatasource, changeSize, @@ -29,13 +35,12 @@ import { splitOpen, } from './state/actions'; -import { Alert } from './Error'; -import ErrorBoundary from './ErrorBoundary'; -import GraphContainer from './GraphContainer'; -import LogsContainer from './LogsContainer'; -import QueryRows from './QueryRows'; -import TableContainer from './TableContainer'; -import TimePicker, { parseTime } from './TimePicker'; +// Types +import { RawTimeRange, TimeRange, DataQuery } from '@grafana/ui'; +import { ExploreItemState, ExploreUrlState, RangeScanner, ExploreId } from 'app/types/explore'; +import { StoreState } from 'app/types'; +import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE } from 'app/core/utils/explore'; +import { Emitter } from 'app/core/utils/emitter'; interface ExploreProps { StartPage?: any; diff --git a/public/app/features/explore/QueryEditor.tsx b/public/app/features/explore/QueryEditor.tsx index dde674d3fcd..3414d93a8ad 100644 --- a/public/app/features/explore/QueryEditor.tsx +++ b/public/app/features/explore/QueryEditor.tsx @@ -1,10 +1,14 @@ +// Libraries import React, { PureComponent } from 'react'; + +// Services import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; -import { Emitter } from 'app/core/utils/emitter'; import { getIntervals } from 'app/core/utils/explore'; -import { DataQuery } from 'app/types'; -import { RawTimeRange } from '@grafana/ui'; import { getTimeSrv } from 'app/features/dashboard/time_srv'; + +// Types +import { Emitter } from 'app/core/utils/emitter'; +import { RawTimeRange, DataQuery } from '@grafana/ui'; import 'app/features/plugins/plugin_loader'; interface QueryEditorProps { diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx index b5b150b3ba8..2cfda3c8a49 100644 --- a/public/app/features/explore/QueryRow.tsx +++ b/public/app/features/explore/QueryRow.tsx @@ -1,16 +1,14 @@ +// Libraries import React, { PureComponent } from 'react'; +import _ from 'lodash'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; -import { RawTimeRange } from '@grafana/ui'; -import _ from 'lodash'; -import { QueryTransaction, HistoryItem, QueryHint, ExploreItemState, ExploreId } from 'app/types/explore'; -import { Emitter } from 'app/core/utils/emitter'; -import { DataQuery, StoreState } from 'app/types'; - -// import DefaultQueryField from './QueryField'; +// Components import QueryEditor from './QueryEditor'; import QueryTransactionStatus from './QueryTransactionStatus'; + +// Actions import { addQueryRow, changeQuery, @@ -20,6 +18,12 @@ import { runQueries, } from './state/actions'; +// Types +import { RawTimeRange, DataQuery } from '@grafana/ui'; +import { StoreState } from 'app/types'; +import { QueryTransaction, HistoryItem, QueryHint, ExploreItemState, ExploreId } from 'app/types/explore'; +import { Emitter } from 'app/core/utils/emitter'; + function getFirstHintFromTransactions(transactions: QueryTransaction[]): QueryHint { const transaction = transactions.find(qt => qt.hints && qt.hints.length > 0); if (transaction) { diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index 01bd409f444..f8bb6e5ce6b 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -1,17 +1,21 @@ +// Libraries import React, { PureComponent } from 'react'; -import { Emitter } from 'app/core/utils/emitter'; -import { DataQuery } from 'app/types'; -import { ExploreId } from 'app/types/explore'; - +// Components import QueryRow from './QueryRow'; +// Types +import { Emitter } from 'app/core/utils/emitter'; +import { DataQuery } from '@grafana/ui/src/types'; +import { ExploreId } from 'app/types/explore'; + interface QueryRowsProps { className?: string; exploreEvents: Emitter; exploreId: ExploreId; initialQueries: DataQuery[]; } + export default class QueryRows extends PureComponent { render() { const { className = '', exploreEvents, exploreId, initialQueries } = this.props; diff --git a/public/app/features/explore/state/actionTypes.ts b/public/app/features/explore/state/actionTypes.ts index b267da4f2c1..df921f9ec29 100644 --- a/public/app/features/explore/state/actionTypes.ts +++ b/public/app/features/explore/state/actionTypes.ts @@ -1,6 +1,6 @@ -import { RawTimeRange, TimeRange } from '@grafana/ui'; - +// Types import { Emitter } from 'app/core/core'; +import { RawTimeRange, TimeRange, DataQuery } from '@grafana/ui'; import { ExploreId, ExploreItemState, @@ -10,7 +10,6 @@ import { QueryTransaction, } from 'app/types/explore'; import { DataSourceSelectItem } from 'app/types/datasources'; -import { DataQuery } from 'app/types'; export enum ActionTypes { AddQueryRow = 'explore/ADD_QUERY_ROW', diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index 256053d4c2e..80f28a7fc6b 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -17,7 +17,8 @@ import { import { updateLocation } from 'app/core/actions'; import store from 'app/core/store'; import { DataSourceSelectItem } from 'app/types/datasources'; -import { DataQuery, StoreState } from 'app/types'; +import { StoreState } from 'app/types'; +import { DataQuery } from '@grafana/ui/src/types'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { ExploreId, diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts index b112a5370e3..ba87e8818df 100644 --- a/public/app/features/explore/state/reducers.ts +++ b/public/app/features/explore/state/reducers.ts @@ -5,7 +5,7 @@ import { ensureQueries, } from 'app/core/utils/explore'; import { ExploreItemState, ExploreState, QueryTransaction } from 'app/types/explore'; -import { DataQuery } from 'app/types/series'; +import { DataQuery } from '@grafana/ui/src/types'; import { Action, ActionTypes } from './actionTypes'; diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts index 0d68cbc71ba..a063ac2ce1c 100644 --- a/public/app/features/plugins/datasource_srv.ts +++ b/public/app/features/plugins/datasource_srv.ts @@ -4,7 +4,7 @@ import coreModule from 'app/core/core_module'; import config from 'app/core/config'; import { importPluginModule } from './plugin_loader'; -import { DataSourceApi } from 'app/types/series'; +import { DataSourceApi } from '@grafana/ui/src/types'; import { DataSource, DataSourceSelectItem } from 'app/types'; export class DatasourceSrv { diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx index e05d2a998b4..98c8a5f6da9 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx +++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx @@ -3,6 +3,7 @@ import Cascader from 'rc-cascader'; import PluginPrism from 'slate-prism'; import Prism from 'prismjs'; +import { DataQuery } from '@grafana/ui/src/types'; import { TypeaheadOutput } from 'app/types/explore'; // dom also includes Element polyfills @@ -10,7 +11,6 @@ import { getNextCharacter, getPreviousCousin } from 'app/features/explore/utils/ import BracesPlugin from 'app/features/explore/slate-plugins/braces'; import RunnerPlugin from 'app/features/explore/slate-plugins/runner'; import QueryField, { TypeaheadInput, QueryFieldState } from 'app/features/explore/QueryField'; -import { DataQuery } from 'app/types'; const PRISM_SYNTAX = 'promql'; diff --git a/public/app/plugins/datasource/loki/datasource.ts b/public/app/plugins/datasource/loki/datasource.ts index d1263d9145f..893ce649613 100644 --- a/public/app/plugins/datasource/loki/datasource.ts +++ b/public/app/plugins/datasource/loki/datasource.ts @@ -2,8 +2,7 @@ import _ from 'lodash'; import * as dateMath from 'app/core/utils/datemath'; import { LogsStream, LogsModel, makeSeriesForLogs } from 'app/core/logs_model'; -import { DataQuery } from 'app/types'; -import { PluginMeta } from '@grafana/ui/src/types'; +import { PluginMeta, DataQuery } from '@grafana/ui/src/types'; import { addLabelToSelector } from 'app/plugins/datasource/prometheus/add_label_to_query'; import LanguageProvider from './language_provider'; diff --git a/public/app/plugins/datasource/loki/language_provider.ts b/public/app/plugins/datasource/loki/language_provider.ts index dd3b4885ea5..3532e81ccd9 100644 --- a/public/app/plugins/datasource/loki/language_provider.ts +++ b/public/app/plugins/datasource/loki/language_provider.ts @@ -11,7 +11,7 @@ import { } from 'app/types/explore'; import { parseSelector, labelRegexp, selectorRegexp } from 'app/plugins/datasource/prometheus/language_utils'; import syntax from './syntax'; -import { DataQuery } from 'app/types'; +import { DataQuery } from '@grafana/ui/src/types'; const DEFAULT_KEYS = ['job', 'namespace']; const EMPTY_SELECTOR = '{}'; diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx index 6171c662127..391d39836ca 100644 --- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx @@ -11,7 +11,7 @@ import { getNextCharacter, getPreviousCousin } from 'app/features/explore/utils/ import BracesPlugin from 'app/features/explore/slate-plugins/braces'; import RunnerPlugin from 'app/features/explore/slate-plugins/runner'; import QueryField, { TypeaheadInput, QueryFieldState } from 'app/features/explore/QueryField'; -import { DataQuery } from 'app/types'; +import { DataQuery } from '@grafana/ui/src/types'; const HISTOGRAM_GROUP = '__histograms__'; const METRIC_MARK = 'metric'; diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index ceaf88fb477..18ee2be890c 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -11,7 +11,7 @@ import { BackendSrv } from 'app/core/services/backend_srv'; import addLabelToQuery from './add_label_to_query'; import { getQueryHints } from './query_hints'; import { expandRecordingRules } from './language_utils'; -import { DataQuery } from 'app/types'; +import { DataQuery } from '@grafana/ui/src/types'; import { ExploreUrlState } from 'app/types/explore'; export function alignRange(start, end, step) { diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index 5636bb3acdb..80b6ff922cf 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -1,13 +1,11 @@ import { Value } from 'slate'; -import { RawTimeRange, TimeRange } from '@grafana/ui'; +import { RawTimeRange, TimeRange, DataQuery } from '@grafana/ui'; import { Emitter } from 'app/core/core'; import { LogsModel } from 'app/core/logs_model'; import TableModel from 'app/core/table_model'; import { DataSourceSelectItem } from 'app/types/datasources'; -import { DataQuery } from './series'; - export interface CompletionItem { /** * The label of this completion item. By default diff --git a/public/app/types/index.ts b/public/app/types/index.ts index 5b43d1909e3..f41183de7d4 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -8,7 +8,6 @@ export * from './acl'; export * from './apiKeys'; export * from './user'; export * from './datasources'; -export * from './series'; export * from './plugins'; export * from './organization'; export * from './appNotifications'; From ecab597e5e44b0c86c8e53501b4d9a1eed6c1152 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Jan 2019 18:51:07 +0100 Subject: [PATCH 4/7] renaming DataSource type to DataSourceSettings and moved to grafana ui --- packages/grafana-ui/src/types/datasource.ts | 28 +++++++++++++++ .../components/Select/DataSourcePicker.tsx | 2 +- .../dashboard/panel_editor/QueriesTab.tsx | 3 +- .../dashboard/panel_editor/QueryOptions.tsx | 3 +- .../datasources/DataSourceDashboards.test.tsx | 5 +-- .../datasources/DataSourceDashboards.tsx | 12 +++++-- .../features/datasources/DataSourcesList.tsx | 9 +++-- .../datasources/DataSourcesListItem.tsx | 4 +-- .../datasources/DataSourcesListPage.test.tsx | 5 +-- .../datasources/DataSourcesListPage.tsx | 12 +++++-- .../datasources/__mocks__/dataSourcesMocks.ts | 6 ++-- ...st.tsx => DataSourceSettingsPage.test.tsx} | 9 ++--- ...ettings.tsx => DataSourceSettingsPage.tsx} | 18 ++++++---- .../datasources/settings/PluginSettings.tsx | 13 +++---- .../app/features/datasources/state/actions.ts | 13 +++---- .../features/datasources/state/navModel.ts | 6 ++-- .../features/datasources/state/reducers.ts | 9 ++--- .../features/datasources/state/selectors.ts | 6 ++-- public/app/features/explore/Explore.tsx | 2 +- .../app/features/explore/state/actionTypes.ts | 3 +- public/app/features/explore/state/actions.ts | 3 +- public/app/features/plugins/datasource_srv.ts | 10 +++--- public/app/features/plugins/state/navModel.ts | 11 ++++-- public/app/routes/routes.ts | 4 +-- public/app/types/datasources.ts | 35 ++----------------- public/app/types/explore.ts | 3 +- 26 files changed, 135 insertions(+), 99 deletions(-) rename public/app/features/datasources/settings/{DataSourceSettings.test.tsx => DataSourceSettingsPage.test.tsx} (84%) rename public/app/features/datasources/settings/{DataSourceSettings.tsx => DataSourceSettingsPage.tsx} (94%) diff --git a/packages/grafana-ui/src/types/datasource.ts b/packages/grafana-ui/src/types/datasource.ts index 13a41f94cb5..fc404feb623 100644 --- a/packages/grafana-ui/src/types/datasource.ts +++ b/packages/grafana-ui/src/types/datasource.ts @@ -55,3 +55,31 @@ export interface DataSourceApi { */ testDatasource(): Promise; } + +export interface DataSourceSettings { + id: number; + orgId: number; + name: string; + typeLogoUrl: string; + type: string; + access: string; + url: string; + password: string; + user: string; + database: string; + basicAuth: boolean; + basicAuthPassword: string; + basicAuthUser: string; + isDefault: boolean; + jsonData: { authType: string; defaultRegion: string }; + readOnly: boolean; + withCredentials: boolean; +} + +export interface DataSourceSelectItem { + name: string; + value: string | null; + meta: PluginMeta; + sort: string; +} + diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx index 372c4cd4013..d028682b215 100644 --- a/public/app/core/components/Select/DataSourcePicker.tsx +++ b/public/app/core/components/Select/DataSourcePicker.tsx @@ -6,7 +6,7 @@ import _ from 'lodash'; import { Select } from '@grafana/ui'; // Types -import { DataSourceSelectItem } from 'app/types'; +import { DataSourceSelectItem } from '@grafana/ui/src/types'; export interface Props { onChange: (ds: DataSourceSelectItem) => void; diff --git a/public/app/features/dashboard/panel_editor/QueriesTab.tsx b/public/app/features/dashboard/panel_editor/QueriesTab.tsx index 4579e1c4a7b..5e90187d171 100644 --- a/public/app/features/dashboard/panel_editor/QueriesTab.tsx +++ b/public/app/features/dashboard/panel_editor/QueriesTab.tsx @@ -18,8 +18,7 @@ import config from 'app/core/config'; // Types import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; -import { DataQuery } from '@grafana/ui'; -import { DataSourceSelectItem } from 'app/types'; +import { DataQuery, DataSourceSelectItem } from '@grafana/ui/src/types'; import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp'; interface Props { diff --git a/public/app/features/dashboard/panel_editor/QueryOptions.tsx b/public/app/features/dashboard/panel_editor/QueryOptions.tsx index d6187a89b7b..61cdbefbce2 100644 --- a/public/app/features/dashboard/panel_editor/QueryOptions.tsx +++ b/public/app/features/dashboard/panel_editor/QueryOptions.tsx @@ -14,7 +14,8 @@ import { FormLabel } from '@grafana/ui'; // Types import { PanelModel } from '../panel_model'; -import { ValidationEvents, DataSourceSelectItem } from 'app/types'; +import { DataSourceSelectItem } from '@grafana/ui/src/types'; +import { ValidationEvents } from 'app/types'; const timeRangeValidationEvents: ValidationEvents = { [EventsWithValidation.onBlur]: [ diff --git a/public/app/features/datasources/DataSourceDashboards.test.tsx b/public/app/features/datasources/DataSourceDashboards.test.tsx index 7409572b9cd..1cc4933519e 100644 --- a/public/app/features/datasources/DataSourceDashboards.test.tsx +++ b/public/app/features/datasources/DataSourceDashboards.test.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { shallow } from 'enzyme'; import { DataSourceDashboards, Props } from './DataSourceDashboards'; -import { DataSource, NavModel, PluginDashboard } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; +import { NavModel, PluginDashboard } from 'app/types'; const setup = (propOverrides?: object) => { const props: Props = { navModel: {} as NavModel, dashboards: [] as PluginDashboard[], - dataSource: {} as DataSource, + dataSource: {} as DataSourceSettings, pageId: 1, importDashboard: jest.fn(), loadDataSource: jest.fn(), diff --git a/public/app/features/datasources/DataSourceDashboards.tsx b/public/app/features/datasources/DataSourceDashboards.tsx index 51f9c9ca945..327908af44a 100644 --- a/public/app/features/datasources/DataSourceDashboards.tsx +++ b/public/app/features/datasources/DataSourceDashboards.tsx @@ -1,9 +1,13 @@ +// Libraries import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; + +// Components import PageHeader from 'app/core/components/PageHeader/PageHeader'; import DashboardTable from './DashboardsTable'; -import { DataSource, NavModel, PluginDashboard } from 'app/types'; + +// Actions & Selectors import { getNavModel } from 'app/core/selectors/navModel'; import { getRouteParamsId } from 'app/core/selectors/location'; import { loadDataSource } from './state/actions'; @@ -11,10 +15,14 @@ import { loadPluginDashboards } from '../plugins/state/actions'; import { importDashboard, removeDashboard } from '../dashboard/state/actions'; import { getDataSource } from './state/selectors'; +// Types +import { NavModel, PluginDashboard } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; + export interface Props { navModel: NavModel; dashboards: PluginDashboard[]; - dataSource: DataSource; + dataSource: DataSourceSettings; pageId: number; importDashboard: typeof importDashboard; loadDataSource: typeof loadDataSource; diff --git a/public/app/features/datasources/DataSourcesList.tsx b/public/app/features/datasources/DataSourcesList.tsx index 0895b92461b..0da12263aed 100644 --- a/public/app/features/datasources/DataSourcesList.tsx +++ b/public/app/features/datasources/DataSourcesList.tsx @@ -1,11 +1,16 @@ +// Libraries import React, { PureComponent } from 'react'; import classNames from 'classnames'; + +// Components import DataSourcesListItem from './DataSourcesListItem'; -import { DataSource } from 'app/types'; + +// Types +import { DataSourceSettings } from '@grafana/ui/src/types'; import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector'; export interface Props { - dataSources: DataSource[]; + dataSources: DataSourceSettings[]; layoutMode: LayoutMode; } diff --git a/public/app/features/datasources/DataSourcesListItem.tsx b/public/app/features/datasources/DataSourcesListItem.tsx index a4fedb893fb..157e9447852 100644 --- a/public/app/features/datasources/DataSourcesListItem.tsx +++ b/public/app/features/datasources/DataSourcesListItem.tsx @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react'; -import { DataSource } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; export interface Props { - dataSource: DataSource; + dataSource: DataSourceSettings; } export class DataSourcesListItem extends PureComponent { diff --git a/public/app/features/datasources/DataSourcesListPage.test.tsx b/public/app/features/datasources/DataSourcesListPage.test.tsx index 33f5790978d..44ef7a1cc49 100644 --- a/public/app/features/datasources/DataSourcesListPage.test.tsx +++ b/public/app/features/datasources/DataSourcesListPage.test.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { shallow } from 'enzyme'; import { DataSourcesListPage, Props } from './DataSourcesListPage'; -import { DataSource, NavModel } from 'app/types'; +import { NavModel } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector'; import { getMockDataSources } from './__mocks__/dataSourcesMocks'; const setup = (propOverrides?: object) => { const props: Props = { - dataSources: [] as DataSource[], + dataSources: [] as DataSourceSettings[], layoutMode: LayoutModes.Grid, loadDataSources: jest.fn(), navModel: { diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx index 884df929319..b0b2ee56169 100644 --- a/public/app/features/datasources/DataSourcesListPage.tsx +++ b/public/app/features/datasources/DataSourcesListPage.tsx @@ -1,12 +1,20 @@ +// Libraries import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; + +// Components import Page from 'app/core/components/Page/Page'; import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; import DataSourcesList from './DataSourcesList'; -import { DataSource, NavModel, StoreState } from 'app/types'; + +// Types +import { DataSourceSettings } from '@grafana/ui/src/types'; +import { NavModel, StoreState } from 'app/types'; import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector'; + +// Actions import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions'; import { getNavModel } from 'app/core/selectors/navModel'; @@ -19,7 +27,7 @@ import { export interface Props { navModel: NavModel; - dataSources: DataSource[]; + dataSources: DataSourceSettings[]; dataSourcesCount: number; layoutMode: LayoutMode; searchQuery: string; diff --git a/public/app/features/datasources/__mocks__/dataSourcesMocks.ts b/public/app/features/datasources/__mocks__/dataSourcesMocks.ts index 755d8eef74a..6658464ef7f 100644 --- a/public/app/features/datasources/__mocks__/dataSourcesMocks.ts +++ b/public/app/features/datasources/__mocks__/dataSourcesMocks.ts @@ -1,6 +1,6 @@ -import { DataSource } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; -export const getMockDataSources = (amount: number): DataSource[] => { +export const getMockDataSources = (amount: number): DataSourceSettings[] => { const dataSources = []; for (let i = 0; i <= amount; i++) { @@ -25,7 +25,7 @@ export const getMockDataSources = (amount: number): DataSource[] => { return dataSources; }; -export const getMockDataSource = (): DataSource => { +export const getMockDataSource = (): DataSourceSettings => { return { access: '', basicAuth: false, diff --git a/public/app/features/datasources/settings/DataSourceSettings.test.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx similarity index 84% rename from public/app/features/datasources/settings/DataSourceSettings.test.tsx rename to public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx index d6c934aa6a4..8efc92be5be 100644 --- a/public/app/features/datasources/settings/DataSourceSettings.test.tsx +++ b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { DataSourceSettings, Props } from './DataSourceSettings'; -import { DataSource, NavModel } from '../../../types'; +import { DataSourceSettingsPage, Props } from './DataSourceSettingsPage'; +import { NavModel } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui'; import { getMockDataSource } from '../__mocks__/dataSourcesMocks'; import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks'; @@ -20,7 +21,7 @@ const setup = (propOverrides?: object) => { Object.assign(props, propOverrides); - return shallow(); + return shallow(); }; describe('Render', () => { @@ -32,7 +33,7 @@ describe('Render', () => { it('should render loader', () => { const wrapper = setup({ - dataSource: {} as DataSource, + dataSource: {} as DataSourceSettings, }); expect(wrapper).toMatchSnapshot(); diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx similarity index 94% rename from public/app/features/datasources/settings/DataSourceSettings.tsx rename to public/app/features/datasources/settings/DataSourceSettingsPage.tsx index 5786bd1db57..87efed266b0 100644 --- a/public/app/features/datasources/settings/DataSourceSettings.tsx +++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx @@ -1,28 +1,34 @@ +// Libraries import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; +// Components import PageHeader from 'app/core/components/PageHeader/PageHeader'; import PageLoader from 'app/core/components/PageLoader/PageLoader'; import PluginSettings from './PluginSettings'; import BasicSettings from './BasicSettings'; import ButtonRow from './ButtonRow'; +// Services & Utils import appEvents from 'app/core/app_events'; import { getBackendSrv } from 'app/core/services/backend_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; +// Actions & selectors import { getDataSource, getDataSourceMeta } from '../state/selectors'; import { deleteDataSource, loadDataSource, setDataSourceName, setIsDefault, updateDataSource } from '../state/actions'; import { getNavModel } from 'app/core/selectors/navModel'; import { getRouteParamsId } from 'app/core/selectors/location'; -import { DataSource, NavModel, Plugin } from 'app/types/'; +// Types +import { NavModel, Plugin } from 'app/types/'; +import { DataSourceSettings } from '@grafana/ui/src/types/'; import { getDataSourceLoadingNav } from '../state/navModel'; export interface Props { navModel: NavModel; - dataSource: DataSource; + dataSource: DataSourceSettings; dataSourceMeta: Plugin; pageId: number; deleteDataSource: typeof deleteDataSource; @@ -33,7 +39,7 @@ export interface Props { } interface State { - dataSource: DataSource; + dataSource: DataSourceSettings; isTesting?: boolean; testingMessage?: string; testingStatus?: string; @@ -44,12 +50,12 @@ enum DataSourceStates { Beta = 'beta', } -export class DataSourceSettings extends PureComponent { +export class DataSourceSettingsPage extends PureComponent { constructor(props) { super(props); this.state = { - dataSource: {} as DataSource, + dataSource: {} as DataSourceSettings, }; } @@ -246,4 +252,4 @@ const mapDispatchToProps = { setIsDefault, }; -export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings)); +export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettingsPage)); diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx index e0b742985cc..8b65accd50a 100644 --- a/public/app/features/datasources/settings/PluginSettings.tsx +++ b/public/app/features/datasources/settings/PluginSettings.tsx @@ -1,20 +1,21 @@ import React, { PureComponent } from 'react'; import _ from 'lodash'; -import { DataSource, Plugin } from 'app/types/'; +import { Plugin } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; export interface Props { - dataSource: DataSource; + dataSource: DataSourceSettings; dataSourceMeta: Plugin; - onModelChange: (dataSource: DataSource) => void; + onModelChange: (dataSource: DataSourceSettings) => void; } export class PluginSettings extends PureComponent { element: any; component: AngularComponent; scopeProps: { - ctrl: { datasourceMeta: Plugin; current: DataSource }; - onModelChanged: (dataSource: DataSource) => void; + ctrl: { datasourceMeta: Plugin; current: DataSourceSettings }; + onModelChanged: (dataSource: DataSourceSettings) => void; }; constructor(props) { @@ -51,7 +52,7 @@ export class PluginSettings extends PureComponent { } } - onModelChanged = (dataSource: DataSource) => { + onModelChanged = (dataSource: DataSourceSettings) => { this.props.onModelChange(dataSource); }; diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts index fa9d47eb6a1..008dc9fe816 100644 --- a/public/app/features/datasources/state/actions.ts +++ b/public/app/features/datasources/state/actions.ts @@ -6,7 +6,8 @@ import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector'; import { updateLocation, updateNavIndex, UpdateNavIndexAction } from 'app/core/actions'; import { UpdateLocationAction } from 'app/core/actions/location'; import { buildNavModel } from './navModel'; -import { DataSource, Plugin, StoreState } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; +import { Plugin, StoreState } from 'app/types'; export enum ActionTypes { LoadDataSources = 'LOAD_DATA_SOURCES', @@ -22,7 +23,7 @@ export enum ActionTypes { interface LoadDataSourcesAction { type: ActionTypes.LoadDataSources; - payload: DataSource[]; + payload: DataSourceSettings[]; } interface SetDataSourcesSearchQueryAction { @@ -47,7 +48,7 @@ interface SetDataSourceTypeSearchQueryAction { interface LoadDataSourceAction { type: ActionTypes.LoadDataSource; - payload: DataSource; + payload: DataSourceSettings; } interface LoadDataSourceMetaAction { @@ -65,12 +66,12 @@ interface SetIsDefaultAction { payload: boolean; } -const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({ +const dataSourcesLoaded = (dataSources: DataSourceSettings[]): LoadDataSourcesAction => ({ type: ActionTypes.LoadDataSources, payload: dataSources, }); -const dataSourceLoaded = (dataSource: DataSource): LoadDataSourceAction => ({ +const dataSourceLoaded = (dataSource: DataSourceSettings): LoadDataSourceAction => ({ type: ActionTypes.LoadDataSource, payload: dataSource, }); @@ -171,7 +172,7 @@ export function loadDataSourceTypes(): ThunkResult { }; } -export function updateDataSource(dataSource: DataSource): ThunkResult { +export function updateDataSource(dataSource: DataSourceSettings): ThunkResult { return async dispatch => { await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource); await updateFrontendSettings(); diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts index 49ee4e770c0..b0b121a9997 100644 --- a/public/app/features/datasources/state/navModel.ts +++ b/public/app/features/datasources/state/navModel.ts @@ -1,8 +1,8 @@ -import { DataSource, NavModel, NavModelItem } from 'app/types'; -import { PluginMeta } from '@grafana/ui/src/types'; +import { NavModel, NavModelItem } from 'app/types'; +import { PluginMeta, DataSourceSettings } from '@grafana/ui/src/types'; import config from 'app/core/config'; -export function buildNavModel(dataSource: DataSource, pluginMeta: PluginMeta): NavModelItem { +export function buildNavModel(dataSource: DataSourceSettings, pluginMeta: PluginMeta): NavModelItem { const navModel = { img: pluginMeta.info.logos.large, id: 'datasource-' + dataSource.id, diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts index 6e86c304fa7..7be93f5a644 100644 --- a/public/app/features/datasources/state/reducers.ts +++ b/public/app/features/datasources/state/reducers.ts @@ -1,10 +1,11 @@ -import { DataSource, DataSourcesState, Plugin } from 'app/types'; +import { DataSourcesState, Plugin } from 'app/types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; import { Action, ActionTypes } from './actions'; -import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector'; +import { LayoutModes } from 'app/core/components/LayoutSelector/LayoutSelector'; const initialState: DataSourcesState = { - dataSources: [] as DataSource[], - dataSource: {} as DataSource, + dataSources: [] as DataSourceSettings[], + dataSource: {} as DataSourceSettings, layoutMode: LayoutModes.List, searchQuery: '', dataSourcesCount: 0, diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts index 2466e465d1d..bb95d95e59a 100644 --- a/public/app/features/datasources/state/selectors.ts +++ b/public/app/features/datasources/state/selectors.ts @@ -1,4 +1,4 @@ -import { DataSource } from '../../../types'; +import { DataSourceSettings } from '@grafana/ui/src/types'; export const getDataSources = state => { const regex = new RegExp(state.searchQuery, 'i'); @@ -16,11 +16,11 @@ export const getDataSourceTypes = state => { }); }; -export const getDataSource = (state, dataSourceId): DataSource | null => { +export const getDataSource = (state, dataSourceId): DataSourceSettings | null => { if (state.dataSource.id === parseInt(dataSourceId, 10)) { return state.dataSource; } - return {} as DataSource; + return {} as DataSourceSettings; }; export const getDataSourceMeta = (state, type): Plugin => { diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 60d7428b53b..d77448c10d7 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -9,7 +9,7 @@ import { AutoSizer } from 'react-virtualized'; import store from 'app/core/store'; // Components -import { DataSourceSelectItem } from 'app/types/datasources'; +import { DataSourceSelectItem } from '@grafana/ui/src/types'; import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker'; import { Alert } from './Error'; import ErrorBoundary from './ErrorBoundary'; diff --git a/public/app/features/explore/state/actionTypes.ts b/public/app/features/explore/state/actionTypes.ts index df921f9ec29..850f2137541 100644 --- a/public/app/features/explore/state/actionTypes.ts +++ b/public/app/features/explore/state/actionTypes.ts @@ -1,6 +1,6 @@ // Types import { Emitter } from 'app/core/core'; -import { RawTimeRange, TimeRange, DataQuery } from '@grafana/ui'; +import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem } from '@grafana/ui/src/types'; import { ExploreId, ExploreItemState, @@ -9,7 +9,6 @@ import { ResultType, QueryTransaction, } from 'app/types/explore'; -import { DataSourceSelectItem } from 'app/types/datasources'; export enum ActionTypes { AddQueryRow = 'explore/ADD_QUERY_ROW', diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index 80f28a7fc6b..e4d90562332 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -16,9 +16,8 @@ import { import { updateLocation } from 'app/core/actions'; import store from 'app/core/store'; -import { DataSourceSelectItem } from 'app/types/datasources'; import { StoreState } from 'app/types'; -import { DataQuery } from '@grafana/ui/src/types'; +import { DataQuery, DataSourceSelectItem } from '@grafana/ui/src/types'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { ExploreId, diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts index a063ac2ce1c..9695cc621b7 100644 --- a/public/app/features/plugins/datasource_srv.ts +++ b/public/app/features/plugins/datasource_srv.ts @@ -1,14 +1,16 @@ +// Libraries import _ from 'lodash'; import coreModule from 'app/core/core_module'; +// Services & Utils import config from 'app/core/config'; import { importPluginModule } from './plugin_loader'; -import { DataSourceApi } from '@grafana/ui/src/types'; -import { DataSource, DataSourceSelectItem } from 'app/types'; +// Types +import { DataSourceApi, DataSourceSelectItem } from '@grafana/ui/src/types'; export class DatasourceSrv { - datasources: { [name: string]: DataSource }; + datasources: { [name: string]: DataSourceApi }; /** @ngInject */ constructor(private $q, private $injector, private $rootScope, private templateSrv) { @@ -59,7 +61,7 @@ export class DatasourceSrv { throw new Error('Plugin module is missing Datasource constructor'); } - const instance: DataSource = this.$injector.instantiate(plugin.Datasource, { instanceSettings: dsConfig }); + const instance: DataSourceApi = this.$injector.instantiate(plugin.Datasource, { instanceSettings: dsConfig }); instance.meta = pluginDef; instance.name = name; instance.pluginExports = plugin; diff --git a/public/app/features/plugins/state/navModel.ts b/public/app/features/plugins/state/navModel.ts index e08b8e05adc..1e7ed0cdf27 100644 --- a/public/app/features/plugins/state/navModel.ts +++ b/public/app/features/plugins/state/navModel.ts @@ -1,9 +1,14 @@ +// Libraries import _ from 'lodash'; -import { DataSource, NavModel } from 'app/types'; -import { PluginMeta } from '@grafana/ui/src/types'; + +// Utils & Services import config from 'app/core/config'; -export function buildNavModel(ds: DataSource, plugin: PluginMeta, currentPage: string): NavModel { +// Types +import { NavModel } from 'app/types'; +import { PluginMeta, DataSourceSettings } from '@grafana/ui/src/types'; + +export function buildNavModel(ds: DataSourceSettings, plugin: PluginMeta, currentPage: string): NavModel { let title = 'New'; const subTitle = `Type: ${plugin.name}`; diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts index d3b3488f1fe..4b24f69b74e 100644 --- a/public/app/routes/routes.ts +++ b/public/app/routes/routes.ts @@ -14,7 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage'; import NewDataSourcePage from '../features/datasources/NewDataSourcePage'; import UsersListPage from 'app/features/users/UsersListPage'; import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards'; -import DataSourceSettings from '../features/datasources/settings/DataSourceSettings'; +import DataSourceSettingsPage from '../features/datasources/settings/DataSourceSettingsPage'; import OrgDetailsPage from '../features/org/OrgDetailsPage'; /** @ngInject */ @@ -78,7 +78,7 @@ export function setupAngularRoutes($routeProvider, $locationProvider) { .when('/datasources/edit/:id/', { template: '', resolve: { - component: () => DataSourceSettings, + component: () => DataSourceSettingsPage, }, }) .when('/datasources/edit/:id/dashboards', { diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts index 234085ee49e..729760b41ea 100644 --- a/public/app/types/datasources.ts +++ b/public/app/types/datasources.ts @@ -1,44 +1,15 @@ import { LayoutMode } from '../core/components/LayoutSelector/LayoutSelector'; import { Plugin } from './plugins'; -import { PluginExports, PluginMeta } from '@grafana/ui/src/types'; - -export interface DataSource { - id: number; - orgId: number; - name: string; - typeLogoUrl: string; - type: string; - access: string; - url: string; - password: string; - user: string; - database: string; - basicAuth: boolean; - basicAuthPassword: string; - basicAuthUser: string; - isDefault: boolean; - jsonData: { authType: string; defaultRegion: string }; - readOnly: boolean; - withCredentials: boolean; - meta?: PluginMeta; - pluginExports?: PluginExports; -} - -export interface DataSourceSelectItem { - name: string; - value: string | null; - meta: PluginMeta; - sort: string; -} +import { DataSourceSettings } from '@grafana/ui/src/types'; export interface DataSourcesState { - dataSources: DataSource[]; + dataSources: DataSourceSettings[]; searchQuery: string; dataSourceTypeSearchQuery: string; layoutMode: LayoutMode; dataSourcesCount: number; dataSourceTypes: Plugin[]; - dataSource: DataSource; + dataSource: DataSourceSettings; dataSourceMeta: Plugin; hasFetched: boolean; } diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index 80b6ff922cf..218760f7578 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -1,10 +1,9 @@ import { Value } from 'slate'; -import { RawTimeRange, TimeRange, DataQuery } from '@grafana/ui'; +import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem } from '@grafana/ui'; import { Emitter } from 'app/core/core'; import { LogsModel } from 'app/core/logs_model'; import TableModel from 'app/core/table_model'; -import { DataSourceSelectItem } from 'app/types/datasources'; export interface CompletionItem { /** From a6f6ed4191158daae73d7c5fc00af038cb175dc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Jan 2019 19:04:53 +0100 Subject: [PATCH 5/7] updated snapshot --- .../DataSourceSettingsPage.test.tsx.snap | 415 ++++++++++++++++++ 1 file changed, 415 insertions(+) create mode 100644 public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap new file mode 100644 index 00000000000..bcd8237ff39 --- /dev/null +++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap @@ -0,0 +1,415 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render alpha info text 1`] = ` +
+ +
+
+
+
+ This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes. +
+ + +
+ + +
+
+
+`; + +exports[`Render should render beta info text 1`] = ` +
+ +
+
+
+
+ This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features. +
+ + +
+ + +
+
+
+`; + +exports[`Render should render component 1`] = ` +
+ +
+
+
+ + +
+ + +
+
+
+`; + +exports[`Render should render is ready only message 1`] = ` +
+ +
+
+
+
+ This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. +
+ + +
+ + +
+
+
+`; + +exports[`Render should render loader 1`] = ` +
+ + +
+`; From 205e2acdd8f89359b93910a310dbe2205f3d4966 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Jan 2019 19:17:29 +0100 Subject: [PATCH 6/7] Added data source type to explore state --- packages/grafana-ui/src/types/datasource.ts | 24 +- .../DataSourceSettings.test.tsx.snap | 415 ------------------ public/app/features/explore/QueryRow.tsx | 4 +- public/app/features/explore/state/actions.ts | 18 +- .../datasource/prometheus/query_hints.ts | 3 +- public/app/types/explore.ts | 26 +- 6 files changed, 39 insertions(+), 451 deletions(-) delete mode 100644 public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap diff --git a/packages/grafana-ui/src/types/datasource.ts b/packages/grafana-ui/src/types/datasource.ts index fc404feb623..3e64ed8a18d 100644 --- a/packages/grafana-ui/src/types/datasource.ts +++ b/packages/grafana-ui/src/types/datasource.ts @@ -25,6 +25,24 @@ export interface DataQueryOptions { scopedVars: object; } +export interface QueryFix { + type: string; + label: string; + action?: QueryFixAction; +} + +export interface QueryFixAction { + type: string; + query?: string; + preventSubmit?: boolean; +} + +export interface QueryHint { + type: string; + label: string; + fix?: QueryFix; +} + export interface DataSourceApi { name: string; meta: PluginMeta; @@ -54,6 +72,11 @@ export interface DataSourceApi { * Test & verify datasource settings & connection details */ testDatasource(): Promise; + + /** + * Get hints for query improvements + */ + getQueryHints(query: DataQuery, results: any[], ...rest: any): QueryHint[]; } export interface DataSourceSettings { @@ -82,4 +105,3 @@ export interface DataSourceSelectItem { meta: PluginMeta; sort: string; } - diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap deleted file mode 100644 index bcd8237ff39..00000000000 --- a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap +++ /dev/null @@ -1,415 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Render should render alpha info text 1`] = ` -
- -
-
-
-
- This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes. -
- - -
- - -
-
-
-`; - -exports[`Render should render beta info text 1`] = ` -
- -
-
-
-
- This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features. -
- - -
- - -
-
-
-`; - -exports[`Render should render component 1`] = ` -
- -
-
-
- - -
- - -
-
-
-`; - -exports[`Render should render is ready only message 1`] = ` -
- -
-
-
-
- This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. -
- - -
- - -
-
-
-`; - -exports[`Render should render loader 1`] = ` -
- - -
-`; diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx index 2cfda3c8a49..3bc2b556a63 100644 --- a/public/app/features/explore/QueryRow.tsx +++ b/public/app/features/explore/QueryRow.tsx @@ -19,9 +19,9 @@ import { } from './state/actions'; // Types -import { RawTimeRange, DataQuery } from '@grafana/ui'; import { StoreState } from 'app/types'; -import { QueryTransaction, HistoryItem, QueryHint, ExploreItemState, ExploreId } from 'app/types/explore'; +import { RawTimeRange, DataQuery, QueryHint } from '@grafana/ui'; +import { QueryTransaction, HistoryItem, ExploreItemState, ExploreId } from 'app/types/explore'; import { Emitter } from 'app/core/utils/emitter'; function getFirstHintFromTransactions(transactions: QueryTransaction[]): QueryHint { diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index e4d90562332..34169a999a3 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -1,7 +1,9 @@ +// Libraries import _ from 'lodash'; import { ThunkAction } from 'redux-thunk'; -import { RawTimeRange, TimeRange } from '@grafana/ui'; +// Services & Utils +import store from 'app/core/store'; import { LAST_USED_DATASOURCE_KEY, clearQueryKeys, @@ -14,10 +16,12 @@ import { serializeStateToUrlParam, } from 'app/core/utils/explore'; +// Actions import { updateLocation } from 'app/core/actions'; -import store from 'app/core/store'; + +// Types import { StoreState } from 'app/types'; -import { DataQuery, DataSourceSelectItem } from '@grafana/ui/src/types'; +import { DataQuery, DataSourceSelectItem, QueryHint } from '@grafana/ui/src/types'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { ExploreId, @@ -26,11 +30,10 @@ import { ResultType, QueryOptions, QueryTransaction, - QueryHint, - QueryHintGetter, } from 'app/types/explore'; -import { Emitter } from 'app/core/core'; +import { Emitter } from 'app/core/core'; +import { RawTimeRange, TimeRange } from '@grafana/ui'; import { Action as ThunkableAction, ActionTypes, @@ -45,6 +48,7 @@ import { ScanStopAction, } from './actionTypes'; + type ThunkResult = ThunkAction; /** @@ -460,7 +464,7 @@ export function queryTransactionSuccess( // Get query hints let hints: QueryHint[]; - if (datasourceInstance.getQueryHints as QueryHintGetter) { + if (datasourceInstance.getQueryHints) { hints = datasourceInstance.getQueryHints(transaction.query, result); } diff --git a/public/app/plugins/datasource/prometheus/query_hints.ts b/public/app/plugins/datasource/prometheus/query_hints.ts index ce019e3ddcb..d3216874ab5 100644 --- a/public/app/plugins/datasource/prometheus/query_hints.ts +++ b/public/app/plugins/datasource/prometheus/query_hints.ts @@ -1,6 +1,5 @@ import _ from 'lodash'; - -import { QueryHint } from 'app/types/explore'; +import { QueryHint } from '@grafana/ui/src/types'; /** * Number of time series results needed before starting to suggest sum aggregation hints diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index 218760f7578..e5ae676ba25 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -1,5 +1,5 @@ import { Value } from 'slate'; -import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem } from '@grafana/ui'; +import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem, DataSourceApi, QueryHint } from '@grafana/ui'; import { Emitter } from 'app/core/core'; import { LogsModel } from 'app/core/logs_model'; @@ -110,7 +110,7 @@ export interface ExploreItemState { /** * Datasource instance that has been selected. Datasource-specific logic can be run on this object. */ - datasourceInstance: any; + datasourceInstance: DataSourceApi; /** * Error to be shown when datasource loading or testing failed. */ @@ -273,28 +273,6 @@ export interface TypeaheadOutput { suggestions: CompletionItemGroup[]; } -export interface QueryFix { - type: string; - label: string; - action?: QueryFixAction; -} - -export interface QueryFixAction { - type: string; - query?: string; - preventSubmit?: boolean; -} - -export interface QueryHint { - type: string; - label: string; - fix?: QueryFix; -} - -export interface QueryHintGetter { - (query: DataQuery, results: any[], ...rest: any): QueryHint[]; -} - export interface QueryIntervals { interval: string; intervalMs: number; From 20c8b9c4a0a9c5fff2adb9b057481f0326f4c0d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Jan 2019 20:02:43 +0100 Subject: [PATCH 7/7] began work on react query editor props and integration --- packages/grafana-ui/src/types/datasource.ts | 38 +----------- packages/grafana-ui/src/types/plugin.ts | 46 +++++++++++++- .../dashboard/panel_editor/QueryEditorRow.tsx | 19 +++++- .../datasource/testdata/QueryEditor.tsx | 60 ++++++++++++++++++- .../app/plugins/datasource/testdata/module.ts | 3 +- 5 files changed, 123 insertions(+), 43 deletions(-) diff --git a/packages/grafana-ui/src/types/datasource.ts b/packages/grafana-ui/src/types/datasource.ts index 3e64ed8a18d..f47e2473a85 100644 --- a/packages/grafana-ui/src/types/datasource.ts +++ b/packages/grafana-ui/src/types/datasource.ts @@ -1,6 +1,6 @@ import { TimeRange, RawTimeRange } from './time'; import { TimeSeries } from './series'; -import { PluginExports, PluginMeta } from './plugin'; +import { PluginMeta } from './plugin'; export interface DataQueryResponse { data: TimeSeries[]; @@ -43,42 +43,6 @@ export interface QueryHint { fix?: QueryFix; } -export interface DataSourceApi { - name: string; - meta: PluginMeta; - pluginExports: PluginExports; - - /** - * min interval range - */ - interval?: string; - - /** - * Imports queries from a different datasource - */ - importQueries?(queries: DataQuery[], originMeta: PluginMeta): Promise; - - /** - * Initializes a datasource after instantiation - */ - init?: () => void; - - /** - * Main metrics / data query action - */ - query(options: DataQueryOptions): Promise; - - /** - * Test & verify datasource settings & connection details - */ - testDatasource(): Promise; - - /** - * Get hints for query improvements - */ - getQueryHints(query: DataQuery, results: any[], ...rest: any): QueryHint[]; -} - export interface DataSourceSettings { id: number; orgId: number; diff --git a/packages/grafana-ui/src/types/plugin.ts b/packages/grafana-ui/src/types/plugin.ts index a2ee426dd9f..30a958420de 100644 --- a/packages/grafana-ui/src/types/plugin.ts +++ b/packages/grafana-ui/src/types/plugin.ts @@ -1,10 +1,54 @@ import { ComponentClass } from 'react'; import { PanelProps, PanelOptionsProps } from './panel'; +import { DataQueryOptions, DataQuery, DataQueryResponse, QueryHint } from './datasource'; + +export interface DataSourceApi { + name: string; + meta: PluginMeta; + pluginExports: PluginExports; + + /** + * min interval range + */ + interval?: string; + + /** + * Imports queries from a different datasource + */ + importQueries?(queries: DataQuery[], originMeta: PluginMeta): Promise; + + /** + * Initializes a datasource after instantiation + */ + init?: () => void; + + /** + * Main metrics / data query action + */ + query(options: DataQueryOptions): Promise; + + /** + * Test & verify datasource settings & connection details + */ + testDatasource(): Promise; + + /** + * Get hints for query improvements + */ + getQueryHints(query: DataQuery, results: any[], ...rest: any): QueryHint[]; +} + +export interface QueryEditorProps { + datasource: DataSourceApi; + query: DataQuery; + onExecuteQuery?: () => void; + onQueryChange?: (value: DataQuery) => void; +} export interface PluginExports { Datasource?: any; QueryCtrl?: any; - QueryEditor?: any; + QueryEditor?: ComponentClass; ConfigCtrl?: any; AnnotationsQueryCtrl?: any; VariableQueryEditor?: any; diff --git a/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx b/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx index 392890ab9f1..1289ad3bac7 100644 --- a/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx +++ b/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx @@ -103,7 +103,17 @@ export class QueryEditorRow extends PureComponent { this.setState({ isCollapsed: !this.state.isCollapsed }); }; + onQueryChange = (query: DataQuery) => { + Object.assign(this.props.query, query); + this.onExecuteQuery(); + }; + + onExecuteQuery = () => { + this.props.panel.refresh(); + }; + renderPluginEditor() { + const { query } = this.props; const { datasource } = this.state; if (datasource.pluginExports.QueryCtrl) { @@ -112,7 +122,14 @@ export class QueryEditorRow extends PureComponent { if (datasource.pluginExports.QueryEditor) { const QueryEditor = datasource.pluginExports.QueryEditor; - return ; + return ( + + ); } return
Data source plugin does not export any Query Editor component
; diff --git a/public/app/plugins/datasource/testdata/QueryEditor.tsx b/public/app/plugins/datasource/testdata/QueryEditor.tsx index 675d1a74ea8..25a811da42d 100644 --- a/public/app/plugins/datasource/testdata/QueryEditor.tsx +++ b/public/app/plugins/datasource/testdata/QueryEditor.tsx @@ -1,12 +1,66 @@ +// Libraries import React, { PureComponent } from 'react'; +import _ from 'lodash'; -interface Props { +// Services & Utils +import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv'; + +// Components +import { FormLabel, Select, SelectOptionItem } from '@grafana/ui'; + +// Types +import { QueryEditorProps } from '@grafana/ui/src/types'; + +interface Scenario { + id: string; + name: string; } -export class QueryEditor extends PureComponent { +interface State { + scenarioList: Scenario[]; + current: Scenario | null; +} + +export class QueryEditor extends PureComponent { + backendSrv: BackendSrv = getBackendSrv(); + + state: State = { + scenarioList: [], + current: null, + }; + + async componentDidMount() { + const { query } = this.props; + + query.scenarioId = query.scenarioId || 'random_walk'; + + const scenarioList = await this.backendSrv.get('/api/tsdb/testdata/scenarios'); + const current = _.find(scenarioList, { id: query.scenarioId }); + + this.setState({ scenarioList: scenarioList, current: current }); + } + + onScenarioChange = (item: SelectOptionItem) => { + this.props.onQueryChange({ + scenarioId: item.value, + ...this.props.query + }); + } + render() { + const { query } = this.props; + const options = this.state.scenarioList.map(item => ({ label: item.name, value: item.id })); + const current = options.find(item => item.value === query.scenarioId); + return ( -

Test data

+
+
+ + Scenario + +