From c3f87b56ee91c98478f91ae082b7621581499070 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 2 Oct 2018 14:13:30 +0200 Subject: [PATCH 01/11] removed duplicate route --- public/app/routes/routes.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts index 203824e6c17..e95b537e203 100644 --- a/public/app/routes/routes.ts +++ b/public/app/routes/routes.ts @@ -276,11 +276,6 @@ export function setupAngularRoutes($routeProvider, $locationProvider) { .when('/alerting', { redirectTo: '/alerting/list', }) - .when('/alerting/list', { - templateUrl: 'public/app/features/alerting/partials/alert_list.html', - controller: 'AlertListCtrl', - controllerAs: 'ctrl', - }) .when('/alerting/list', { template: '', reloadOnSearch: false, From 7a39e5554be18164ea8f42eb968829fe5ec0e1c2 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 2 Oct 2018 16:18:42 +0200 Subject: [PATCH 02/11] view and route --- .../datasources/NewDataSourcePage.tsx | 110 ++++++++++++++++++ public/app/routes/routes.ts | 8 +- 2 files changed, 115 insertions(+), 3 deletions(-) create mode 100644 public/app/features/datasources/NewDataSourcePage.tsx diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx new file mode 100644 index 00000000000..422f4c7db87 --- /dev/null +++ b/public/app/features/datasources/NewDataSourcePage.tsx @@ -0,0 +1,110 @@ +import React, { PureComponent } from 'react'; +import { connect } from 'react-redux'; +import { hot } from 'react-hot-loader'; +import Select from 'react-select'; +import PageHeader from 'app/core/components/PageHeader/PageHeader'; +import { NavModel } from 'app/types'; +import { getNavModel } from 'app/core/selectors/navModel'; + +export interface Props { + navModel: NavModel; +} + +export interface State { + name: string; + type: string; + dataSourceOptions: Array<{ value: string; label: string }>; +} + +class NewDataSourcePage extends PureComponent { + state = { + name: '', + type: '', + dataSourceOptions: [ + { value: 'prometheus', label: 'Prometheus' }, + { value: 'graphite', label: 'Graphite' }, + { value: 'mysql', label: 'MySql' }, + { value: 'influxdb', label: 'InfluxDB' }, + ], + }; + + onChangeName = event => { + this.setState({ + name: event.target.value, + }); + }; + + onTypeChanged = type => { + this.setState({ + type: type, + }); + }; + + submitForm = () => { + if (!this.isFieldsEmpty()) { + // post + } + }; + + isFieldsEmpty = () => { + const { name, type } = this.state; + + if (name === '' && type === '') { + return true; + } else if (name !== '' && type === '') { + return true; + } else { + return name === '' && type !== ''; + } + }; + + render() { + const { navModel } = this.props; + const { dataSourceOptions, name, type } = this.state; + + return ( +
+ +
+

New Data source

+
+
+ Name + +
+
+ Type + { {` Create`} - +
@@ -107,11 +118,14 @@ class NewDataSourcePage extends PureComponent { function mapStateToProps(state) { return { navModel: getNavModel(state.navIndex, 'datasources'), + dataSourceTypes: state.dataSources.dataSourceTypes, }; } const mapDispatchToProps = { addDataSource, + loadDataSourceTypes, + updateLocation, }; export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NewDataSourcePage)); diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts index 42e23cec62e..c5446590db4 100644 --- a/public/app/features/datasources/state/actions.ts +++ b/public/app/features/datasources/state/actions.ts @@ -1,10 +1,13 @@ import { ThunkAction } from 'redux-thunk'; -import { DataSource, StoreState } from 'app/types'; +import { DataSource, DataSourceType, StoreState } from 'app/types'; import { getBackendSrv } from '../../../core/services/backend_srv'; import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector'; +import { updateLocation } from '../../../core/actions'; +import { UpdateLocationAction } from '../../../core/actions/location'; export enum ActionTypes { LoadDataSources = 'LOAD_DATA_SOURCES', + LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES', SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY', SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE', } @@ -24,11 +27,21 @@ export interface SetDataSourcesLayoutModeAction { payload: LayoutMode; } +export interface LoadDataSourceTypesAction { + type: ActionTypes.LoadDataSourceTypes; + payload: DataSourceType[]; +} + const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({ type: ActionTypes.LoadDataSources, payload: dataSources, }); +const dataSourceTypesLoaded = (dataSourceTypes: DataSourceType[]): LoadDataSourceTypesAction => ({ + type: ActionTypes.LoadDataSourceTypes, + payload: dataSourceTypes, +}); + export const setDataSourcesSearchQuery = (searchQuery: string): SetDataSourcesSearchQueryAction => ({ type: ActionTypes.SetDataSourcesSearchQuery, payload: searchQuery, @@ -39,7 +52,12 @@ export const setDataSourcesLayoutMode = (layoutMode: LayoutMode): SetDataSources payload: layoutMode, }); -export type Action = LoadDataSourcesAction | SetDataSourcesSearchQueryAction | SetDataSourcesLayoutModeAction; +export type Action = + | LoadDataSourcesAction + | SetDataSourcesSearchQueryAction + | SetDataSourcesLayoutModeAction + | UpdateLocationAction + | LoadDataSourceTypesAction; type ThunkResult = ThunkAction; @@ -52,6 +70,14 @@ export function loadDataSources(): ThunkResult { export function addDataSource(name: string, type: string): ThunkResult { return async dispatch => { - await getBackendSrv().post('/api/datasources', { name, type }); + const result = await getBackendSrv().post('/api/datasources', { name: name, type: type, access: 'proxy' }); + dispatch(updateLocation({ path: `/datasources/edit/${result.id}` })); + }; +} + +export function loadDataSourceTypes(): ThunkResult { + return async dispatch => { + const result = await getBackendSrv().get('/api/plugins', { enabled: 1, type: 'datasource' }); + dispatch(dataSourceTypesLoaded(result)); }; } diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts index d57b0ad523a..83e5277e33a 100644 --- a/public/app/features/datasources/state/reducers.ts +++ b/public/app/features/datasources/state/reducers.ts @@ -1,4 +1,4 @@ -import { DataSource, DataSourcesState } from 'app/types'; +import { DataSource, DataSourcesState, DataSourceType } from 'app/types'; import { Action, ActionTypes } from './actions'; import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector'; @@ -7,6 +7,7 @@ const initialState: DataSourcesState = { layoutMode: LayoutModes.Grid, searchQuery: '', dataSourcesCount: 0, + dataSourceTypes: [] as DataSourceType[], }; export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => { @@ -19,6 +20,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo case ActionTypes.SetDataSourcesLayoutMode: return { ...state, layoutMode: action.payload }; + + case ActionTypes.LoadDataSourceTypes: + return { ...state, dataSourceTypes: action.payload }; } return state; diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts index b9936e7c01b..367b4a27448 100644 --- a/public/app/types/datasources.ts +++ b/public/app/types/datasources.ts @@ -17,9 +17,15 @@ export interface DataSource { readOnly: false; } +export interface DataSourceType { + name: string; + type: string; +} + export interface DataSourcesState { dataSources: DataSource[]; searchQuery: string; layoutMode: LayoutMode; dataSourcesCount: number; + dataSourceTypes: DataSourceType[]; } diff --git a/public/app/types/index.ts b/public/app/types/index.ts index a1b5b53260d..3803cfe2109 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -7,7 +7,7 @@ import { DashboardState } from './dashboard'; import { DashboardAcl, OrgRole, PermissionLevel } from './acl'; import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys'; import { User } from './user'; -import { DataSource, DataSourcesState } from './datasources'; +import { DataSource, DataSourcesState, DataSourceType } from './datasources'; import { PluginMeta, Plugin, PluginsState } from './plugins'; export { @@ -42,6 +42,7 @@ export { Plugin, PluginsState, DataSourcesState, + DataSourceType, }; export interface StoreState { From 262fee0a42aad3b59a1fa2d53b3405d3a8e301e7 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 3 Oct 2018 16:04:30 +0200 Subject: [PATCH 05/11] new grid layout add data source --- .../datasources/NewDataSourcePage.tsx | 103 ++++-------------- .../app/features/datasources/state/actions.ts | 6 +- .../features/datasources/state/reducers.ts | 4 +- public/app/types/datasources.ts | 8 +- public/app/types/index.ts | 3 +- public/sass/_grafana.scss | 1 + public/sass/components/_add_data_source.scss | 35 ++++++ 7 files changed, 64 insertions(+), 96 deletions(-) create mode 100644 public/sass/components/_add_data_source.scss diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx index 6ef46480e6d..f03304327a6 100644 --- a/public/app/features/datasources/NewDataSourcePage.tsx +++ b/public/app/features/datasources/NewDataSourcePage.tsx @@ -1,114 +1,51 @@ import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; -import Select from 'react-select'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import { DataSourceType, NavModel } from 'app/types'; +import { NavModel, Plugin } from 'app/types'; import { addDataSource, loadDataSourceTypes } from './state/actions'; import { updateLocation } from '../../core/actions'; import { getNavModel } from 'app/core/selectors/navModel'; export interface Props { navModel: NavModel; - dataSourceTypes: DataSourceType[]; + dataSourceTypes: Plugin[]; addDataSource: typeof addDataSource; loadDataSourceTypes: typeof loadDataSourceTypes; updateLocation: typeof updateLocation; } -export interface State { - name: string; - type: { value: string; label: string }; -} - -class NewDataSourcePage extends PureComponent { - state = { - name: '', - type: null, - }; - +class NewDataSourcePage extends PureComponent { componentDidMount() { this.props.loadDataSourceTypes(); } - onChangeName = event => { - this.setState({ - name: event.target.value, - }); - }; - - onTypeChanged = type => { - this.setState({ - type: type, - }); - }; - - submitForm = event => { - event.preventDefault(); - - if (!this.isFieldsEmpty()) { - this.props.addDataSource(this.state.name, this.state.type.value); - } - }; - - goBack = () => { - this.props.updateLocation({ path: '/datasources' }); - }; - - isFieldsEmpty = () => { - const { name, type } = this.state; - - if (name === '' && !type) { - return true; - } else if (name !== '' && !type) { - return true; - } else { - return !!(name === '' && type); - } + onDataSourceTypeClicked = type => { + this.props.addDataSource(type.name, type.value); }; render() { const { navModel, dataSourceTypes } = this.props; - const { name, type } = this.state; return (
-

New Data source

-
-
- Name - -
-
- Type - + + +
{dataSourceTypes.map((type, index) => { return ( @@ -55,7 +74,7 @@ class NewDataSourcePage extends PureComponent { function mapStateToProps(state) { return { navModel: getNavModel(state.navIndex, 'datasources'), - dataSourceTypes: state.dataSources.dataSourceTypes, + dataSourceTypes: getDataSourceTypes(state.dataSources), }; } @@ -63,6 +82,7 @@ const mapDispatchToProps = { addDataSource, loadDataSourceTypes, updateLocation, + setDataSourceTypeSearchQuery, }; export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NewDataSourcePage)); diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts index b8cdafa9fe3..f423ae65d53 100644 --- a/public/app/features/datasources/state/actions.ts +++ b/public/app/features/datasources/state/actions.ts @@ -10,6 +10,7 @@ export enum ActionTypes { LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES', SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY', SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE', + SetDataSourceTypeSearchQuery = 'SET_DATA_SOURCE_TYPE_SEARCH_QUERY', } export interface LoadDataSourcesAction { @@ -32,6 +33,11 @@ export interface LoadDataSourceTypesAction { payload: Plugin[]; } +export interface SetDataSourceTypeSearchQueryAction { + type: ActionTypes.SetDataSourceTypeSearchQuery; + payload: string; +} + const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({ type: ActionTypes.LoadDataSources, payload: dataSources, @@ -52,12 +58,18 @@ export const setDataSourcesLayoutMode = (layoutMode: LayoutMode): SetDataSources payload: layoutMode, }); +export const setDataSourceTypeSearchQuery = (query: string): SetDataSourceTypeSearchQueryAction => ({ + type: ActionTypes.SetDataSourceTypeSearchQuery, + payload: query, +}); + export type Action = | LoadDataSourcesAction | SetDataSourcesSearchQueryAction | SetDataSourcesLayoutModeAction | UpdateLocationAction - | LoadDataSourceTypesAction; + | LoadDataSourceTypesAction + | SetDataSourceTypeSearchQueryAction; type ThunkResult = ThunkAction; diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts index ec5e0f811a9..acb228d3ed6 100644 --- a/public/app/features/datasources/state/reducers.ts +++ b/public/app/features/datasources/state/reducers.ts @@ -8,6 +8,7 @@ const initialState: DataSourcesState = { searchQuery: '', dataSourcesCount: 0, dataSourceTypes: [] as Plugin[], + dataSourceTypeSearchQuery: '', }; export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => { @@ -23,6 +24,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo case ActionTypes.LoadDataSourceTypes: return { ...state, dataSourceTypes: action.payload }; + + case ActionTypes.SetDataSourceTypeSearchQuery: + return { ...state, dataSourceTypeSearchQuery: action.payload }; } return state; diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts index 6df08f68037..80e1400114f 100644 --- a/public/app/features/datasources/state/selectors.ts +++ b/public/app/features/datasources/state/selectors.ts @@ -6,6 +6,14 @@ export const getDataSources = state => { }); }; +export const getDataSourceTypes = state => { + const regex = new RegExp(state.dataSourceTypeSearchQuery, 'i'); + + return state.dataSourceTypes.filter(type => { + return regex.test(type.name); + }); +}; + export const getDataSourcesSearchQuery = state => state.searchQuery; export const getDataSourcesLayoutMode = state => state.layoutMode; export const getDataSourcesCount = state => state.dataSourcesCount; diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts index 237d51c53b0..4d8d755f106 100644 --- a/public/app/types/datasources.ts +++ b/public/app/types/datasources.ts @@ -21,6 +21,7 @@ export interface DataSource { export interface DataSourcesState { dataSources: DataSource[]; searchQuery: string; + dataSourceTypeSearchQuery: string; layoutMode: LayoutMode; dataSourcesCount: number; dataSourceTypes: Plugin[]; diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss index 9da3b14ad51..9a6c71d8061 100644 --- a/public/sass/components/_add_data_source.scss +++ b/public/sass/components/_add_data_source.scss @@ -1,13 +1,27 @@ .add-data-source-header { - margin-bottom: 20px; + margin-bottom: $panel-margin * 2; text-align: center; } +.add-data-source-search { + display: flex; + justify-content: center; + margin-bottom: $panel-margin * 6; +} + .add-data-source-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(2, 1fr); grid-row-gap: 10px; grid-column-gap: 10px; + + @include media-breakpoint-up(md) { + grid-template-columns: repeat(3, 1fr); + } + + @include media-breakpoint-up(lg) { + grid-template-columns: repeat(4, 1fr); + } } .add-data-source-grid-item { From b5681e9802f25116fa653e00dedb78e7f4f9863e Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Fri, 5 Oct 2018 11:33:41 +0200 Subject: [PATCH 07/11] algorithm to find new name if it exists --- .../datasources/NewDataSourcePage.tsx | 4 +- .../datasources/state/actions.test.ts | 44 +++++++++++++ .../app/features/datasources/state/actions.ts | 64 ++++++++++++++++++- public/app/types/index.ts | 1 + public/sass/components/_add_data_source.scss | 13 ++-- 5 files changed, 112 insertions(+), 14 deletions(-) create mode 100644 public/app/features/datasources/state/actions.test.ts diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx index 08ab4fdee4f..527ecf6db83 100644 --- a/public/app/features/datasources/NewDataSourcePage.tsx +++ b/public/app/features/datasources/NewDataSourcePage.tsx @@ -24,7 +24,7 @@ class NewDataSourcePage extends PureComponent { } onDataSourceTypeClicked = type => { - this.props.addDataSource(type.name, type.value); + this.props.addDataSource(type); }; onSearchQueryChange = event => { @@ -38,7 +38,7 @@ class NewDataSourcePage extends PureComponent {
-

Choose data source type

+

Choose data source type

+

Auth

+
+
+ + +
+
+ + +
+
+ +
+
-
-
Basic Auth Details
-
- - User - - -
+
+
Basic Auth Details
+
+ User + +
+
+ Password + +
+
-
- - Password - - -
-
+
+
+
TLS Auth Details
+ TLS Certs are encrypted and stored in the Grafana database. +
+
+
+
+ +
+
+ +
-
-
-
TLS Auth Details
- TLS Certs are encrypted and stored in the Grafana database. -
-
-
-
- -
-
- -
+
+ + reset +
+
+
-
- - reset -
-
-
- -
-
-
- -
-
- -
-
- - reset -
-
+
+
+
+ +
+
+ +
+
+ + reset +
+
-
-
- -
-
- -
-
- - reset -
-
-
+
+
+ +
+
+ +
+
+ + reset +
+
+
-

Advanced HTTP Settings

-
-
-
- Whitelisted Cookies - - - - Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source. - -
-
-
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index a878db0d9f4..8a012ea0a32 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -120,7 +120,7 @@ $code-tag-border: lighten($code-tag-bg, 2%); // cards $card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, #343436, #262628); +$card-background-hover: linear-gradient(135deg, $dark-3, $dark-2); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss index a4c805512f4..d46974fe97e 100644 --- a/public/sass/components/_add_data_source.scss +++ b/public/sass/components/_add_data_source.scss @@ -1,5 +1,6 @@ .add-data-source-header { - margin-bottom: $panel-margin * 4; + margin-bottom: $spacer * 2; + padding-top: $spacer; text-align: center; } From 4f852bb4aecb42801de2a1ded4a37d85f90d8ba3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Oct 2018 13:09:41 -0700 Subject: [PATCH 09/11] ux: more minor ds setting tweaks --- .../features/plugins/partials/ds_edit.html | 31 +++++++++---------- .../plugins/partials/ds_http_settings.html | 6 ++-- .../datasource/influxdb/partials/config.html | 6 ++-- 3 files changed, 20 insertions(+), 23 deletions(-) diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 0fbb00d9a95..0b83e69c7d2 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,12 +1,7 @@
- -
-
- Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. -
-
+

Settings

@@ -59,17 +54,19 @@
-
- - - Back -
+
+ This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. +
+ +
+ + + Back +
-
-
-
+
+
+
- +
diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index c03c1befa12..17aedd48afd 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -71,15 +71,15 @@

Auth

- +
- +
- +
diff --git a/public/app/plugins/datasource/influxdb/partials/config.html b/public/app/plugins/datasource/influxdb/partials/config.html index a70a1de98a4..4de2fadd52d 100644 --- a/public/app/plugins/datasource/influxdb/partials/config.html +++ b/public/app/plugins/datasource/influxdb/partials/config.html @@ -6,18 +6,18 @@
- Database + Database
- User + User
- Password + Password
From 8e2859625fb705eb8988c900e1999d82f2722095 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Oct 2018 13:13:04 -0700 Subject: [PATCH 10/11] ux: more minor ds setting tweaks --- .../app/plugins/datasource/stackdriver/partials/config.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/stackdriver/partials/config.html b/public/app/plugins/datasource/stackdriver/partials/config.html index d8029abc39f..46b79d8bb0d 100644 --- a/public/app/plugins/datasource/stackdriver/partials/config.html +++ b/public/app/plugins/datasource/stackdriver/partials/config.html @@ -81,4 +81,6 @@
-

Do not forget to save your changes after uploading a file.

+
+ Do not forget to save your changes after uploading a file. +
From 2e4a1f317d78822443db38287a80ab6e3a7daa16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 6 Oct 2018 19:22:16 +0200 Subject: [PATCH 11/11] ux: final fixes to new datasource page --- .../app/features/datasources/state/actions.ts | 21 ++++++++++--------- public/sass/_variables.dark.scss | 2 +- public/sass/components/_add_data_source.scss | 3 ++- public/sass/components/_cards.scss | 2 +- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts index f78a8f30e74..33d6b79c5df 100644 --- a/public/app/features/datasources/state/actions.ts +++ b/public/app/features/datasources/state/actions.ts @@ -82,21 +82,22 @@ export function loadDataSources(): ThunkResult { export function addDataSource(plugin: Plugin): ThunkResult { return async (dispatch, getStore) => { - let dataSources = getStore().dataSources.dataSources; + await dispatch(loadDataSources()); - if (dataSources.length === 0) { - dispatch(loadDataSources()); + const dataSources = getStore().dataSources.dataSources; - dataSources = getStore().dataSources.dataSources; - } - - let name = plugin.name; + const newInstance = { + name: plugin.name, + type: plugin.id, + access: 'proxy', + isDefault: dataSources.length === 0, + }; - if (nameExits(dataSources, name)) { - name = findNewName(dataSources, name); + if (nameExits(dataSources, newInstance.name)) { + newInstance.name = findNewName(dataSources, newInstance.name); } - const result = await getBackendSrv().post('/api/datasources', { name: name, type: plugin.id, access: 'proxy' }); + const result = await getBackendSrv().post('/api/datasources', newInstance); dispatch(updateLocation({ path: `/datasources/edit/${result.id}` })); }; } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 8a012ea0a32..a878db0d9f4 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -120,7 +120,7 @@ $code-tag-border: lighten($code-tag-bg, 2%); // cards $card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, $dark-3, $dark-2); +$card-background-hover: linear-gradient(135deg, #343436, #262628); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss index d46974fe97e..508f7f80d8e 100644 --- a/public/sass/components/_add_data_source.scss +++ b/public/sass/components/_add_data_source.scss @@ -28,10 +28,11 @@ cursor: pointer; background: $card-background; box-shadow: $card-shadow; - color: $headings-color; + color: $text-color; &:hover { background: $card-background-hover; + color: $text-color-strong; } } diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss index 11a8abb7640..f39be84ec04 100644 --- a/public/sass/components/_cards.scss +++ b/public/sass/components/_cards.scss @@ -191,6 +191,7 @@ .card-item-wrapper { padding: 0; width: 100%; + margin-bottom: 3px; } .card-item-wrapper--clickable { @@ -198,7 +199,6 @@ } .card-item { - border-bottom: 3px solid $page-bg; border-radius: 2px; }