Skip to content

N
nexpie-grafana-theme
Commit 7c3d1012 by Peter Holmberg
Options

rendering settings

parent e642fce4
Showing with 192 additions and 27 deletions
public/app/core/components/FormSwitch/FormSwitch.tsx 0 → 100644
import React, { PureComponent } from 'react';
import _ from 'lodash';
export interface Props {
label: string;
checked: boolean;
labelClass?: string;
switchClass?: string;
onChange: (event) => any;
}
export interface State {
id: any;
}
export class FormSwitch extends PureComponent<Props, State> {
state = {
id: _.uniqueId(),
};
internalOnChange = event => {
event.stopPropagation();
this.props.onChange(event);
};
render() {
const { labelClass, switchClass, label, checked } = this.props;
const labelId = `check-${this.state.id}`;
const labelClassName = `gf-form-label ${labelClass} pointer`;
const switchClassName = `gf-form-switch ${switchClass}`;
return (
<div className="gf-form">
{label && (
<label htmlFor={labelId} className={labelClassName}>
{label}
</label>
)}
<div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
<label htmlFor={labelId} />
</div>
</div>
);
}
}
export default FormSwitch;
public/app/features/datasources/DataSourceHttpSettings.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { DataSource } from 'app/types';
import FormSwitch from '../../core/components/FormSwitch/FormSwitch';
interface Props { interface Props {
access: any; dataSource: DataSource;
basicAuth: any;
showAccessOption: any; showAccessOption: any;
tlsAuth: any; tlsAuth: any;
tlsAuthWithCACert: any; tlsAuthWithCACert: any;
tlsCACert: any; tlsCACert: any;
tlsClientCert: any; tlsClientCert: any;
tlsClientKey: any; tlsClientKey: any;
url: any;
} }
interface State { interface State {
basicAuthUser: string; basicAuthUser: string;
basicAuthPassword: string; basicAuthPassword: string;
showAccessHelp: boolean; showAccessHelp: boolean;
url: string;
access: string;
} }
export default class DataSourceHttpSettings extends PureComponent<Props, State> { export class DataSourceHttpSettings extends PureComponent<Props, State> {
state = { constructor(props) {
basicAuthUser: '', super(props);
basicAuthPassword: '',
this.state = {
url: '',
basicAuthUser: props.dataSource.basicAuthUser,
basicAuthPassword: props.dataSource.basicAuthPassword,
showAccessHelp: false, showAccessHelp: false,
access: '',
};
}
onToggleAccessHelp = () => {
this.setState(prevState => ({
showAccessHelp: !prevState.showAccessHelp,
}));
};
onUrlChange = event => {
this.setState({
url: event.target.value,
});
}; };
onToggleAccessHelp = () => {}; onAccessChange = event => {
this.setState({
access: event.target.value,
});
};
onBasicAuthChange = event => {
console.log(event);
};
onWithCredentialsChange = event => {
console.log(event);
};
onTlsAuthChange = event => {
console.log(event);
};
onTlsAuthWithCACertChange = event => {
console.log(event);
};
onTlsSkipVerifyChange = event => {
console.log(event);
};
render() { render() {
const { const {
access, dataSource,
basicAuth,
showAccessOption, showAccessOption,
tlsAuth, tlsAuth,
tlsAuthWithCACert, tlsAuthWithCACert,
tlsCACert, tlsCACert,
tlsClientCert, tlsClientCert,
tlsClientKey, tlsClientKey,
url,
} = this.props; } = this.props;
const { showAccessHelp, basicAuthUser, basicAuthPassword } = this.state; const { access, showAccessHelp, basicAuthUser, basicAuthPassword, url } = this.state;
// const accessOptions = [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}]; const accessOptions = [{ key: 'proxy', value: 'Server (Default)' }, { key: 'direct', value: 'Browser' }];
return ( return (
<div className="gf-form-group"> <div className="gf-form-group">
...@@ -51,24 +94,38 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State> ...@@ -51,24 +94,38 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State>
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form max-width-30"> <div className="gf-form max-width-30">
<span className="gf-form-label width-10">URL</span> <span className="gf-form-label width-10">URL</span>
<input className="gf-form-input" type="text" value={url} placeholder="https://localhost:9090" /> <input
className="gf-form-input"
type="text"
value={url}
onChange={this.onUrlChange}
placeholder="https://localhost:9090"
/>
</div> </div>
</div> </div>
{showAccessOption && ( {showAccessOption && (
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form max-width-30"> <div className="gf-form max-width-30">
<span className="gf-form-label width-10">Access</span> <span className="gf-form-label width-10">Access</span>
<div className="gf-form-select-wrapper max-width-24" /> <select className="width-20" value={access} onChange={this.onAccessChange}>
{accessOptions.map(option => {
return (
<option key={option.key} value={option.key}>
{option.value}
</option>
);
})}
</select>
</div> </div>
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label query-keyword pointer" onClick={this.onToggleAccessHelp}> <label className="gf-form-label query-keyword pointer" onClick={this.onToggleAccessHelp}>
Help&nbsp; Help&nbsp;
{showAccessHelp && <i className="fa fa-caret-down" />} {showAccessHelp ? <i className="fa fa-caret-down" /> : <i className="fa fa-caret-right">&nbsp;</i>}
{!showAccessHelp && <i className="fa fa-caret-right">&nbsp;</i>}
</label> </label>
</div> </div>
</div> </div>
)} )}
</div>
{showAccessHelp && ( {showAccessHelp && (
<div className="grafana-info-box m-t-2"> <div className="grafana-info-box m-t-2">
...@@ -88,9 +145,9 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State> ...@@ -88,9 +145,9 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State>
</p> </p>
<div className="alert-title">Browser access mode:</div> <div className="alert-title">Browser access mode:</div>
<p> <p>
All requests will be made from the browser directly to the data source and may be subject to All requests will be made from the browser directly to the data source and may be subject to Cross-Origin
Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this
you select this access mode. access mode.
</p> </p>
</div> </div>
)} )}
...@@ -104,12 +161,56 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State> ...@@ -104,12 +161,56 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State>
<h3 className="page-heading">Auth</h3> <h3 className="page-heading">Auth</h3>
<div className="gf-form-group"> <div className="gf-form-group">
<div className="gf-form-inline" /> <div className="gf-form-inline">
<div className="gf-form-inline" /> <FormSwitch
<div className="gf-form-inline" /> onChange={this.onBasicAuthChange}
label="Basic auth"
checked={dataSource.basicAuth}
labelClass="width-10"
switchClass="max-width-6"
/>
<FormSwitch
label="With credentials"
checked={dataSource.withCredentials}
onChange={this.onWithCredentialsChange}
labelClass="width-10"
switchClass="max-width-6"
/>
</div>
<div className="gf-form-inline">
{dataSource.jsonData && [
<FormSwitch
key="TLS CLient Auth"
label="TLS CLient Auth"
checked={dataSource.jsonData.authType === 'tlsAuth'}
onChange={this.onTlsAuthChange}
labelClass="width-10"
switchClass="max-width-6"
/>,
<FormSwitch
key="With CA Cert"
label="With CA Cert"
checked={dataSource.jsonData.authType === 'tlsAuthWithCACert'}
onChange={this.onTlsAuthWithCACertChange}
labelClass="width-10"
switchClass="max-width-6"
/>,
]}
</div>
</div>
<div className="gf-form-inline">
{dataSource.jsonData && (
<FormSwitch
label="Skip TLS Verify"
checked={dataSource.jsonData.authType === 'tlsSkipVerify'}
onChange={this.onTlsSkipVerifyChange}
labelClass="width-10"
switchClass="max-width-6"
/>
)}
</div> </div>
{basicAuth && ( {dataSource.basicAuth && (
<div className="gf-form-group"> <div className="gf-form-group">
<h6>Basic Auth Details</h6> <h6>Basic Auth Details</h6>
<div className="gf-form"> <div className="gf-form">
...@@ -217,7 +318,14 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State> ...@@ -217,7 +318,14 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State>
</div> </div>
)} )}
</div> </div>
</div>
); );
} }
} }
function mapStateToProps(state) {
return {
dataSource: state.dataSources.dataSource,
};
}
export default connect(mapStateToProps)(DataSourceHttpSettings);
public/app/features/datasources/DataSourceSettings.tsx
...@@ -86,7 +86,6 @@ export class DataSourceSettings extends PureComponent<Props, State> { ...@@ -86,7 +86,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
tlsCACert: {}, tlsCACert: {},
tlsClientCert: {}, tlsClientCert: {},
tlsClientKey: {}, tlsClientKey: {},
url: {},
}; };
return ( return (
...@@ -135,6 +134,7 @@ export class DataSourceSettings extends PureComponent<Props, State> { ...@@ -135,6 +134,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
to update this datasource. to update this datasource.
</div> </div>
)} )}
<DataSourceHttpSettings {...props} />
<div className="gf-form-button-row"> <div className="gf-form-button-row">
<button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}> <button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}>
Save &amp; Test Save &amp; Test
...@@ -147,7 +147,6 @@ export class DataSourceSettings extends PureComponent<Props, State> { ...@@ -147,7 +147,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
</a> </a>
</div> </div>
</form> </form>
<DataSourceHttpSettings {...props} />
</div> </div>
); );
} }
......
public/app/features/datasources/__mocks__/dataSourcesMocks.ts
...@@ -29,6 +29,9 @@ export const getMockDataSource = (): DataSource => { ...@@ -29,6 +29,9 @@ export const getMockDataSource = (): DataSource => {
return { return {
access: '', access: '',
basicAuth: false, basicAuth: false,
basicAuthUser: '',
basicAuthPassword: '',
withCredentials: false,
database: '', database: '',
id: 13, id: 13,
isDefault: false, isDefault: false,
......
public/app/features/datasources/state/navModel.ts
...@@ -48,6 +48,9 @@ export function getDataSourceLoadingNav(pageName: string): NavModel { ...@@ -48,6 +48,9 @@ export function getDataSourceLoadingNav(pageName: string): NavModel {
{ {
access: '', access: '',
basicAuth: false, basicAuth: false,
basicAuthUser: '',
basicAuthPassword: '',
withCredentials: false,
database: '', database: '',
id: 1, id: 1,
isDefault: false, isDefault: false,
......
public/app/types/datasources.ts
...@@ -35,9 +35,12 @@ export interface DataSource { ...@@ -35,9 +35,12 @@ export interface DataSource {
user: string; user: string;
database: string; database: string;
basicAuth: boolean; basicAuth: boolean;
basicAuthPassword: string;
basicAuthUser: string;
isDefault: boolean; isDefault: boolean;
jsonData: { authType: string; defaultRegion: string }; jsonData: { authType: string; defaultRegion: string };
readOnly: boolean; readOnly: boolean;
withCredentials: boolean;
} }
export interface DataSourcesState { export interface DataSourcesState {
......
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