Skip to content

N
nexpie-grafana-theme
Commit 596a8340 by Peter Holmberg
Options

fixed routes and page

parent 8c742a95
Showing with 96 additions and 60 deletions
public/app/features/datasources/DataSourceSettings.tsx
import React, { createRef, PureComponent } from 'react'; import React, { createRef, PureComponent } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { DataSource, Plugin } from 'app/types'; import { DataSource, NavModel, Plugin } from 'app/types';
import PageHeader from '../../core/components/PageHeader/PageHeader';
import { importPluginModule } from '../plugins/plugin_loader';
import { loadDataSource } from './state/actions';
import { getNavModel } from '../../core/selectors/navModel';
import { getRouteParamsId } from '../../core/selectors/location';
export interface Props { export interface Props {
navModel: NavModel;
dataSource: DataSource; dataSource: DataSource;
dataSourceMeta: Plugin; dataSourceMeta: Plugin;
pageId: number;
loadDataSource: typeof loadDataSource;
} }
interface State { interface State {
name: string; name: string;
...@@ -24,10 +32,13 @@ export class DataSourceSettings extends PureComponent<Props, State> { ...@@ -24,10 +32,13 @@ export class DataSourceSettings extends PureComponent<Props, State> {
showNamePopover: false, showNamePopover: false,
}; };
componentDidMount() { async componentDidMount() {
// importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => { const { loadDataSource, pageId } = this.props;
// console.log(pluginExports);
// }); await loadDataSource(pageId);
importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => {
console.log(pluginExports);
});
} }
onNameChange = event => { onNameChange = event => {
...@@ -84,75 +95,90 @@ export class DataSourceSettings extends PureComponent<Props, State> { ...@@ -84,75 +95,90 @@ export class DataSourceSettings extends PureComponent<Props, State> {
render() { render() {
const { name, showNamePopover } = this.state; const { name, showNamePopover } = this.state;
console.log(this.props);
return ( return (
<div> <div>
<form onSubmit={this.onSubmit}> <PageHeader model={this.props.navModel} />
<div className="gf-form-group"> <div className="page-container page-body">
<div className="gf-form-inline"> <div>
<div className="gf-form max-width-30"> <form onSubmit={this.onSubmit}>
<span className="gf-form-label width-10">Name</span> <div className="gf-form-group">
<input <div className="gf-form-inline">
className="gf-form-input max-width-23" <div className="gf-form max-width-30">
type="text" <span className="gf-form-label width-10">Name</span>
value={name} <input
placeholder="Name" className="gf-form-input max-width-23"
onChange={this.onNameChange} type="text"
required value={name}
/> placeholder="Name"
<div onClick={this.onTogglePopover}> onChange={this.onNameChange}
<i className="fa fa-info-circle" /> required
</div> />
{showNamePopover && ( <div onClick={this.onTogglePopover}>
<div <i className="fa fa-info-circle" />
style={{ </div>
position: 'absolute', {showNamePopover && (
left: '450px', <div
top: '-20px', style={{
padding: '10px', position: 'absolute',
backgroundColor: 'black', left: '450px',
zIndex: 2, top: '-20px',
width: '300px', padding: '10px',
border: '1px solid gray', backgroundColor: 'black',
borderRadius: '3px', zIndex: 2,
}} width: '300px',
> border: '1px solid gray',
The name is used when you select the data source in panels. The <em>Default</em> data source is borderRadius: '3px',
preselected in new panels. }}
>
The name is used when you select the data source in panels. The <em>Default</em> data source is
preselected in new panels.
</div>
)}
</div> </div>
)} </div>
</div> </div>
</div> {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
</div> {this.isReadyOnly() && (
{this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>} <div className="grafana-info-box span8">
{this.isReadyOnly() && ( This datasource was added by config and cannot be modified using the UI. Please contact your server
<div className="grafana-info-box span8"> admin to update this datasource.
This datasource was added by config and cannot be modified using the UI. Please contact your server admin </div>
to update this datasource. )}
</div> <div ref={this.settingsElement} />
)} <div className="gf-form-button-row">
<div ref={this.settingsElement} /> <button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}>
<div className="gf-form-button-row"> Save &amp; Test
<button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}> </button>
Save &amp; Test <button type="submit" className="btn btn-danger" disabled={this.isReadyOnly()} onClick={this.onDelete}>
</button> Delete
<button type="submit" className="btn btn-danger" disabled={this.isReadyOnly()} onClick={this.onDelete}> </button>
Delete <a className="btn btn-inverse" href="datasources">
</button> Back
<a className="btn btn-inverse" href="datasources"> </a>
Back </div>
</a> </form>
</div> </div>
</form> </div>
</div> </div>
); );
} }
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const pageId = getRouteParamsId(state.location);
return { return {
navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`),
dataSource: state.dataSources.dataSource, dataSource: state.dataSources.dataSource,
dataSourceMeta: state.dataSources.dataSourceMeta, dataSourceMeta: state.dataSources.dataSourceMeta,
pageId: pageId,
}; };
} }
export default connect(mapStateToProps)(DataSourceSettings); const mapDispatchToProps = {
loadDataSource,
};
export default connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings);
public/app/features/plugins/__mocks__/pluginMocks.ts
...@@ -26,6 +26,7 @@ export const getMockPlugins = (amount: number): Plugin[] => { ...@@ -26,6 +26,7 @@ export const getMockPlugins = (amount: number): Plugin[] => {
pinned: false, pinned: false,
state: '', state: '',
type: '', type: '',
module: {},
}); });
} }
...@@ -55,5 +56,6 @@ export const getMockPlugin = () => { ...@@ -55,5 +56,6 @@ export const getMockPlugin = () => {
pinned: false, pinned: false,
state: '', state: '',
type: '', type: '',
module: {},
}; };
}; };
public/app/routes/routes.ts
...@@ -14,6 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage'; ...@@ -14,6 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
import NewDataSourcePage from '../features/datasources/NewDataSourcePage'; import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
import UsersListPage from 'app/features/users/UsersListPage'; import UsersListPage from 'app/features/users/UsersListPage';
import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards'; import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
import DataSourceSettings from '../features/datasources/DataSourceSettings';
/** @ngInject */ /** @ngInject */
export function setupAngularRoutes($routeProvider, $locationProvider) { export function setupAngularRoutes($routeProvider, $locationProvider) {
...@@ -73,6 +74,12 @@ export function setupAngularRoutes($routeProvider, $locationProvider) { ...@@ -73,6 +74,12 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
component: () => DataSourcesListPage, component: () => DataSourcesListPage,
}, },
}) })
.when('/datasources/edit/:id/', {
template: '<react-container />',
resolve: {
component: () => DataSourceSettings,
},
})
.when('/datasources/edit/:id/dashboards', { .when('/datasources/edit/:id/dashboards', {
template: '<react-container />', template: '<react-container />',
resolve: { resolve: {
......
public/app/types/plugins.ts
...@@ -60,6 +60,7 @@ export interface Plugin { ...@@ -60,6 +60,7 @@ export interface Plugin {
pinned: boolean; pinned: boolean;
state: string; state: string;
type: string; type: string;
module: any;
} }
export interface PluginDashboard { export interface PluginDashboard {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment