From 5140325a0d6ab91c7c267d3bca79344e88defac8 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 31 Oct 2018 13:23:05 +0100 Subject: [PATCH] renders angular component --- .../datasources/settings/BasicSettings.tsx | 34 ++++++++ .../datasources/settings/ButtonRow.tsx | 25 ++++++ .../{ => settings}/DataSourceSettings.tsx | 78 ++++++------------- .../PluginSettings.tsx} | 18 ++--- .../features/datasources/state/selectors.ts | 8 ++ public/app/routes/routes.ts | 2 +- scripts/webpack/webpack.hot.js | 70 ++++++++--------- 7 files changed, 133 insertions(+), 102 deletions(-) create mode 100644 public/app/features/datasources/settings/BasicSettings.tsx create mode 100644 public/app/features/datasources/settings/ButtonRow.tsx rename public/app/features/datasources/{ => settings}/DataSourceSettings.tsx (55%) rename public/app/features/datasources/{DataSourcePluginSettings.tsx => settings/PluginSettings.tsx} (59%) diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx new file mode 100644 index 00000000000..f4c26f1e27f --- /dev/null +++ b/public/app/features/datasources/settings/BasicSettings.tsx @@ -0,0 +1,34 @@ +import React, { SFC } from 'react'; +import { Label } from '../../../core/components/Forms/Forms'; + +export interface Props { + dataSourceName: string; + onChange: (name: string) => void; +} + +const BasicSettings: SFC = ({ dataSourceName, onChange }) => { + return ( +
+
+ + onChange(event.target.value)} + required + /> +
+
+ ); +}; + +export default BasicSettings; diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx new file mode 100644 index 00000000000..3ca5e7ea2c4 --- /dev/null +++ b/public/app/features/datasources/settings/ButtonRow.tsx @@ -0,0 +1,25 @@ +import React, { SFC } from 'react'; + +export interface Props { + isReadOnly: boolean; + onDelete: (event) => void; + onSubmit: (event) => void; +} + +const ButtonRow: SFC = ({ isReadOnly, onDelete, onSubmit }) => { + return ( +
+ + + + Back + +
+ ); +}; + +export default ButtonRow; diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx similarity index 55% rename from public/app/features/datasources/DataSourceSettings.tsx rename to public/app/features/datasources/settings/DataSourceSettings.tsx index c312e0b9b0b..560f636362e 100644 --- a/public/app/features/datasources/DataSourceSettings.tsx +++ b/public/app/features/datasources/settings/DataSourceSettings.tsx @@ -1,15 +1,16 @@ import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; -import { DataSource, NavModel, Plugin } from 'app/types'; -import PageHeader from '../../core/components/PageHeader/PageHeader'; -import DataSourcePluginSettings from './DataSourcePluginSettings'; -import { loadDataSource, setDataSourceName } from './state/actions'; -import { getNavModel } from '../../core/selectors/navModel'; -import { getRouteParamsId } from '../../core/selectors/location'; -import { Label } from '../../core/components/Forms/Forms'; -import PageLoader from '../../core/components/PageLoader/PageLoader'; -import { getDataSource } from './state/selectors'; +import { DataSource, NavModel, Plugin } from 'app/types/'; +import PageHeader from '../../../core/components/PageHeader/PageHeader'; +import PageLoader from '../../../core/components/PageLoader/PageLoader'; +import PluginSettings from './PluginSettings'; +import BasicSettings from './BasicSettings'; +import ButtonRow from './ButtonRow'; +import { loadDataSource, setDataSourceName } from '../state/actions'; +import { getNavModel } from '../../../core/selectors/navModel'; +import { getRouteParamsId } from '../../../core/selectors/location'; +import { getDataSource, getDataSourceMeta } from '../state/selectors'; export interface Props { navModel: NavModel; @@ -45,7 +46,7 @@ export class DataSourceSettings extends PureComponent { console.log(event); }; - isReadyOnly() { + isReadOnly() { return this.props.dataSource.readOnly === true; } @@ -87,59 +88,27 @@ export class DataSourceSettings extends PureComponent {
-
-
- - this.props.setDataSourceName(event.target.value)} - required - /> -
-
+ this.props.setDataSourceName(name)} + /> {this.shouldRenderInfoBox() &&
{this.getInfoText()}
} - {this.isReadyOnly() ? ( + {this.isReadOnly() ? (
This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
) : ( - + dataSourceMeta.module && )} -
- - - - Back - -
+ this.onSubmit(event)} + isReadOnly={this.isReadOnly()} + onDelete={event => this.onDelete(event)} + />
@@ -151,11 +120,12 @@ export class DataSourceSettings extends PureComponent { function mapStateToProps(state) { const pageId = getRouteParamsId(state.location); + const dataSource = getDataSource(state.dataSources, pageId); return { navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`), dataSource: getDataSource(state.dataSources, pageId), - dataSourceMeta: state.dataSources.dataSourceMeta, + dataSourceMeta: getDataSourceMeta(state.dataSources, dataSource.type), pageId: pageId, }; } diff --git a/public/app/features/datasources/DataSourcePluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx similarity index 59% rename from public/app/features/datasources/DataSourcePluginSettings.tsx rename to public/app/features/datasources/settings/PluginSettings.tsx index 4b38b773300..4750d8cbde9 100644 --- a/public/app/features/datasources/DataSourcePluginSettings.tsx +++ b/public/app/features/datasources/settings/PluginSettings.tsx @@ -1,31 +1,29 @@ import React, { PureComponent } from 'react'; -import { DataSource, Plugin } from 'app/types'; +import { DataSource, Plugin } from 'app/types/'; import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; -import { importPluginModule } from '../plugins/plugin_loader'; + interface Props { dataSource: DataSource; dataSourceMeta: Plugin; } -export class DataSourcePluginSettings extends PureComponent { +export class PluginSettings extends PureComponent { element: any; component: AngularComponent; componentDidMount() { + const { dataSource, dataSourceMeta } = this.props; + if (!this.element) { return; } - importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => { - console.log(pluginExports); - }); - const loader = getAngularLoader(); const template = ''; const scopeProps = { ctrl: { - dataSourceMeta: this.props.dataSourceMeta, - current: this.props.dataSource, + datasourceMeta: dataSourceMeta, + current: dataSource, }, }; @@ -37,4 +35,4 @@ export class DataSourcePluginSettings extends PureComponent { } } -export default DataSourcePluginSettings; +export default PluginSettings; diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts index 3d14f2db453..2466e465d1d 100644 --- a/public/app/features/datasources/state/selectors.ts +++ b/public/app/features/datasources/state/selectors.ts @@ -23,6 +23,14 @@ export const getDataSource = (state, dataSourceId): DataSource | null => { return {} as DataSource; }; +export const getDataSourceMeta = (state, type): Plugin => { + if (state.dataSourceMeta.id === type) { + return state.dataSourceMeta; + } + + return {} as Plugin; +}; + export const getDataSourcesSearchQuery = state => state.searchQuery; export const getDataSourcesLayoutMode = state => state.layoutMode; export const getDataSourcesCount = state => state.dataSourcesCount; diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts index 862aa413884..af2d528afe9 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/DataSourceSettings'; +import DataSourceSettings from '../features/datasources/settings/DataSourceSettings'; /** @ngInject */ export function setupAngularRoutes($routeProvider, $locationProvider) { diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js index feec67b2fd0..4288699bce1 100644 --- a/scripts/webpack/webpack.hot.js +++ b/scripts/webpack/webpack.hot.js @@ -4,22 +4,19 @@ const merge = require('webpack-merge'); const common = require('./webpack.common.js'); const path = require('path'); const webpack = require('webpack'); -const HtmlWebpackPlugin = require("html-webpack-plugin"); +const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = merge(common, { entry: { - app: [ - 'webpack-dev-server/client?http://localhost:3333', - './public/app/dev.ts', - ], + app: ['webpack-dev-server/client?http://localhost:3333', './public/app/dev.ts'], }, output: { path: path.resolve(__dirname, '../../public/build'), filename: '[name].[hash].js', - publicPath: "/public/build/", + publicPath: '/public/build/', pathinfo: false, }, @@ -34,8 +31,8 @@ module.exports = merge(common, { hot: true, port: 3333, proxy: { - '!/public/build': 'http://localhost:3000' - } + '!/public/build': 'http://localhost:3000', + }, }, optimization: { @@ -47,40 +44,39 @@ module.exports = merge(common, { module: { rules: [ { - test: /(?!.*\.test)\.tsx$/, + test: /(?!.*\.test)\.(ts|tsx)$/, exclude: /node_modules/, - use: [{ - loader: 'babel-loader', - options: { - cacheDirectory: true, - babelrc: false, - plugins: [ - 'syntax-dynamic-import', - 'react-hot-loader/babel' - ] - } - }, - { - loader: 'ts-loader', - options: { - transpileOnly: true, - experimentalWatchApi: true + use: [ + { + loader: 'babel-loader', + options: { + cacheDirectory: true, + babelrc: false, + plugins: ['syntax-dynamic-import', 'react-hot-loader/babel'], + }, }, - }], + { + loader: 'ts-loader', + options: { + transpileOnly: true, + experimentalWatchApi: true, + }, + }, + ], }, { test: /\.scss$/, use: [ - "style-loader", // creates style nodes from JS strings - "css-loader", // translates CSS into CommonJS - "sass-loader" // compiles Sass to CSS - ] + 'style-loader', // creates style nodes from JS strings + 'css-loader', // translates CSS into CommonJS + 'sass-loader', // compiles Sass to CSS + ], }, { test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, - loader: 'file-loader' + loader: 'file-loader', }, - ] + ], }, plugins: [ @@ -89,16 +85,16 @@ module.exports = merge(common, { filename: path.resolve(__dirname, '../../public/views/index.html'), template: path.resolve(__dirname, '../../public/views/index.template.html'), inject: 'body', - alwaysWriteToDisk: true + alwaysWriteToDisk: true, }), new HtmlWebpackHarddiskPlugin(), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ - 'GRAFANA_THEME': JSON.stringify(process.env.GRAFANA_THEME || 'dark'), + GRAFANA_THEME: JSON.stringify(process.env.GRAFANA_THEME || 'dark'), 'process.env': { - 'NODE_ENV': JSON.stringify('development') - } + NODE_ENV: JSON.stringify('development'), + }, }), - ] + ], });