mirror of https://github.com/grafana/grafana
Merge pull request #13702 from grafana/data-source-instance-to-react
Support Data source permissionspull/13716/head
Marcus Efraimsson
7 years ago
committed by
GitHub
commit
da89c27caf
@ -0,0 +1,125 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import { DataSource, Plugin } from 'app/types'; |
||||
|
||||
export interface Props { |
||||
dataSource: DataSource; |
||||
dataSourceMeta: Plugin; |
||||
} |
||||
interface State { |
||||
name: string; |
||||
} |
||||
|
||||
enum DataSourceStates { |
||||
Alpha = 'alpha', |
||||
Beta = 'beta', |
||||
} |
||||
|
||||
export class DataSourceSettings extends PureComponent<Props, State> { |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
this.state = { |
||||
name: props.dataSource.name, |
||||
}; |
||||
} |
||||
|
||||
onNameChange = event => { |
||||
this.setState({ |
||||
name: event.target.value, |
||||
}); |
||||
}; |
||||
|
||||
onSubmit = event => { |
||||
event.preventDefault(); |
||||
console.log(event); |
||||
}; |
||||
|
||||
onDelete = event => { |
||||
console.log(event); |
||||
}; |
||||
|
||||
isReadyOnly() { |
||||
return this.props.dataSource.readOnly === true; |
||||
} |
||||
|
||||
shouldRenderInfoBox() { |
||||
const { state } = this.props.dataSourceMeta; |
||||
|
||||
return state === DataSourceStates.Alpha || state === DataSourceStates.Beta; |
||||
} |
||||
|
||||
getInfoText() { |
||||
const { dataSourceMeta } = this.props; |
||||
|
||||
switch (dataSourceMeta.state) { |
||||
case DataSourceStates.Alpha: |
||||
return ( |
||||
'This plugin is marked as being in alpha state, which means it is in early development phase and updates' + |
||||
' will include breaking changes.' |
||||
); |
||||
|
||||
case DataSourceStates.Beta: |
||||
return ( |
||||
'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.' |
||||
); |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
render() { |
||||
const { name } = this.state; |
||||
|
||||
return ( |
||||
<div> |
||||
<h3 className="page-sub-heading">Settings</h3> |
||||
<form onSubmit={this.onSubmit}> |
||||
<div className="gf-form-group"> |
||||
<div className="gf-form-inline"> |
||||
<div className="gf-form max-width-30"> |
||||
<span className="gf-form-label width-10">Name</span> |
||||
<input |
||||
className="gf-form-input max-width-23" |
||||
type="text" |
||||
value={name} |
||||
placeholder="name" |
||||
onChange={this.onNameChange} |
||||
required |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>} |
||||
{this.isReadyOnly() && ( |
||||
<div className="grafana-info-box span8"> |
||||
This datasource was added by config and cannot be modified using the UI. Please contact your server admin |
||||
to update this datasource. |
||||
</div> |
||||
)} |
||||
<div className="gf-form-button-row"> |
||||
<button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}> |
||||
Save & Test |
||||
</button> |
||||
<button type="submit" className="btn btn-danger" disabled={this.isReadyOnly()} onClick={this.onDelete}> |
||||
Delete |
||||
</button> |
||||
<a className="btn btn-inverse" href="datasources"> |
||||
Back |
||||
</a> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state) { |
||||
return { |
||||
dataSource: state.dataSources.dataSource, |
||||
dataSourceMeta: state.dataSources.dataSourceMeta, |
||||
}; |
||||
} |
||||
|
||||
export default connect(mapStateToProps)(DataSourceSettings); |
||||
@ -0,0 +1,109 @@ |
||||
import { DataSource, NavModel, NavModelItem, PluginMeta } from 'app/types'; |
||||
import config from 'app/core/config'; |
||||
|
||||
export function buildNavModel(dataSource: DataSource, pluginMeta: PluginMeta): NavModelItem { |
||||
const navModel = { |
||||
img: pluginMeta.info.logos.large, |
||||
id: 'datasource-' + dataSource.id, |
||||
subTitle: `Type: ${pluginMeta.name}`, |
||||
url: '', |
||||
text: dataSource.name, |
||||
breadcrumbs: [{ title: 'Data Sources', url: 'datasources' }], |
||||
children: [ |
||||
{ |
||||
active: false, |
||||
icon: 'fa fa-fw fa-sliders', |
||||
id: `datasource-settings-${dataSource.id}`, |
||||
text: 'Settings', |
||||
url: `datasources/edit/${dataSource.id}`, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
if (pluginMeta.includes && hasDashboards(pluginMeta.includes)) { |
||||
navModel.children.push({ |
||||
active: false, |
||||
icon: 'fa fa-fw fa-th-large', |
||||
id: `datasource-dashboards-${dataSource.id}`, |
||||
text: 'Dashboards', |
||||
url: `datasources/edit/${dataSource.id}/dashboards`, |
||||
}); |
||||
} |
||||
|
||||
if (config.buildInfo.isEnterprise) { |
||||
navModel.children.push({ |
||||
active: false, |
||||
icon: 'fa fa-fw fa-lock', |
||||
id: `datasource-permissions-${dataSource.id}`, |
||||
text: 'Permissions', |
||||
url: `datasources/edit/${dataSource.id}/permissions`, |
||||
}); |
||||
} |
||||
|
||||
return navModel; |
||||
} |
||||
|
||||
export function getDataSourceLoadingNav(pageName: string): NavModel { |
||||
const main = buildNavModel( |
||||
{ |
||||
access: '', |
||||
basicAuth: false, |
||||
database: '', |
||||
id: 1, |
||||
isDefault: false, |
||||
jsonData: { authType: 'credentials', defaultRegion: 'eu-west-2' }, |
||||
name: 'Loading', |
||||
orgId: 1, |
||||
password: '', |
||||
readOnly: false, |
||||
type: 'Loading', |
||||
typeLogoUrl: 'public/img/icn-datasource.svg', |
||||
url: '', |
||||
user: '', |
||||
}, |
||||
{ |
||||
id: '1', |
||||
name: '', |
||||
info: { |
||||
author: { |
||||
name: '', |
||||
url: '', |
||||
}, |
||||
description: '', |
||||
links: [''], |
||||
logos: { |
||||
large: '', |
||||
small: '', |
||||
}, |
||||
screenshots: '', |
||||
updated: '', |
||||
version: '', |
||||
}, |
||||
includes: [{ type: '', name: '', path: '' }], |
||||
} |
||||
); |
||||
|
||||
let node: NavModelItem; |
||||
|
||||
// find active page
|
||||
for (const child of main.children) { |
||||
if (child.id.indexOf(pageName) > 0) { |
||||
child.active = true; |
||||
node = child; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
return { |
||||
main: main, |
||||
node: node, |
||||
}; |
||||
} |
||||
|
||||
function hasDashboards(includes) { |
||||
return ( |
||||
includes.filter(include => { |
||||
return include.type === 'dashboard'; |
||||
}).length > 0 |
||||
); |
||||
} |
||||
Loading…
Reference in new issue