Skip to content

N
nexpie-grafana-theme
Commit 150b9769 by Andrej Ocenas
Options

Use SecretFormField in MSSql and Postgres datasources

parent d8167ffb
Showing with 53 additions and 18 deletions
public/app/core/angular_wrappers.ts
...@@ -9,7 +9,7 @@ import { TagFilter } from './components/TagFilter/TagFilter'; ...@@ -9,7 +9,7 @@ import { TagFilter } from './components/TagFilter/TagFilter';
import { SideMenu } from './components/sidemenu/SideMenu'; import { SideMenu } from './components/sidemenu/SideMenu';
import { MetricSelect } from './components/Select/MetricSelect'; import { MetricSelect } from './components/Select/MetricSelect';
import AppNotificationList from './components/AppNotifications/AppNotificationList'; import AppNotificationList from './components/AppNotifications/AppNotificationList';
import { ColorPicker, SeriesColorPickerPopoverWithTheme } from '@grafana/ui'; import { ColorPicker, SeriesColorPickerPopoverWithTheme, SecretFormField } from '@grafana/ui';
import { FunctionEditor } from 'app/plugins/datasource/graphite/FunctionEditor'; import { FunctionEditor } from 'app/plugins/datasource/graphite/FunctionEditor';
export function registerAngularDirectives() { export function registerAngularDirectives() {
...@@ -59,4 +59,11 @@ export function registerAngularDirectives() { ...@@ -59,4 +59,11 @@ export function registerAngularDirectives() {
['datasource', { watchDepth: 'reference' }], ['datasource', { watchDepth: 'reference' }],
['templateSrv', { watchDepth: 'reference' }], ['templateSrv', { watchDepth: 'reference' }],
]); ]);
react2AngularDirective('secretFormField', SecretFormField, [
'value',
'isConfigured',
'inputWidth',
['onReset', { watchDepth: 'reference', wrapApply: true }],
['onChange', { watchDepth: 'reference', wrapApply: true }],
]);
} }
public/app/plugins/datasource/mssql/config_ctrl.ts
import { SyntheticEvent } from 'react';
export class MssqlConfigCtrl { export class MssqlConfigCtrl {
static templateUrl = 'partials/config.html'; static templateUrl = 'partials/config.html';
...@@ -7,4 +9,16 @@ export class MssqlConfigCtrl { ...@@ -7,4 +9,16 @@ export class MssqlConfigCtrl {
constructor($scope) { constructor($scope) {
this.current.jsonData.encrypt = this.current.jsonData.encrypt || 'false'; this.current.jsonData.encrypt = this.current.jsonData.encrypt || 'false';
} }
onPasswordReset = (event: SyntheticEvent<HTMLInputElement>) => {
event.preventDefault();
this.current.secureJsonFields.password = false;
this.current.secureJsonData = this.current.secureJsonData || {};
this.current.secureJsonData.password = '';
};
onPasswordChange = (event: SyntheticEvent<HTMLInputElement>) => {
this.current.secureJsonData = this.current.secureJsonData || {};
this.current.secureJsonData.password = event.currentTarget.value;
};
} }
public/app/plugins/datasource/mssql/partials/config.html
...@@ -17,15 +17,15 @@ ...@@ -17,15 +17,15 @@
<span class="gf-form-label width-7">User</span> <span class="gf-form-label width-7">User</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="user"></input> <input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="user"></input>
</div> </div>
<div class="gf-form max-width-15" ng-if="!ctrl.current.secureJsonFields.password"> <div class="gf-form">
<span class="gf-form-label width-7">Password</span> <secret-form-field
<input type="password" class="gf-form-input" ng-model='ctrl.current.secureJsonData.password' placeholder="password"></input> isConfigured="ctrl.current.secureJsonFields.password"
</div> value="ctrl.current.secureJsonData.password"
<div class="gf-form max-width-19" ng-if="ctrl.current.secureJsonFields.password"> on-reset="ctrl.onPasswordReset"
<span class="gf-form-label width-7">Password</span> on-change="ctrl.onPasswordChange"
<input type="text" class="gf-form-input" disabled="disabled" value="configured"> inputWidth="9"
<a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.current.secureJsonFields.password = false">reset</a> />
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
......
public/app/plugins/datasource/postgres/config_ctrl.ts
import _ from 'lodash'; import _ from 'lodash';
import { SyntheticEvent } from 'react';
export class PostgresConfigCtrl { export class PostgresConfigCtrl {
static templateUrl = 'partials/config.html'; static templateUrl = 'partials/config.html';
...@@ -52,6 +53,18 @@ export class PostgresConfigCtrl { ...@@ -52,6 +53,18 @@ export class PostgresConfigCtrl {
this.showTimescaleDBHelp = !this.showTimescaleDBHelp; this.showTimescaleDBHelp = !this.showTimescaleDBHelp;
} }
onPasswordReset = (event: SyntheticEvent<HTMLInputElement>) => {
event.preventDefault();
this.current.secureJsonFields.password = false;
this.current.secureJsonData = this.current.secureJsonData || {};
this.current.secureJsonData.password = '';
};
onPasswordChange = (event: SyntheticEvent<HTMLInputElement>) => {
this.current.secureJsonData = this.current.secureJsonData || {};
this.current.secureJsonData.password = event.currentTarget.value;
};
// the value portion is derived from postgres server_version_num/100 // the value portion is derived from postgres server_version_num/100
postgresVersions = [ postgresVersions = [
{ name: '9.3', value: 903 }, { name: '9.3', value: 903 },
......
public/app/plugins/datasource/postgres/partials/config.html
...@@ -17,16 +17,17 @@ ...@@ -17,16 +17,17 @@
<span class="gf-form-label width-7">User</span> <span class="gf-form-label width-7">User</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="user"></input> <input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="user"></input>
</div> </div>
<div class="gf-form max-width-15" ng-if="!ctrl.current.secureJsonFields.password"> <div class="gf-form">
<span class="gf-form-label width-7">Password</span> <secret-form-field
<input type="password" class="gf-form-input" ng-model='ctrl.current.secureJsonData.password' placeholder="password"></input> isConfigured="ctrl.current.secureJsonFields.password"
</div> value="ctrl.current.secureJsonData.password"
<div class="gf-form max-width-19" ng-if="ctrl.current.secureJsonFields.password"> on-reset="ctrl.onPasswordReset"
<span class="gf-form-label width-7">Password</span> on-change="ctrl.onPasswordChange"
<input type="text" class="gf-form-input" disabled="disabled" value="configured"> inputWidth="9"
<a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.current.secureJsonFields.password = false">reset</a> />
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-7">SSL Mode</label> <label class="gf-form-label width-7">SSL Mode</label>
<div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon"> <div class="gf-form-select-wrapper max-width-15 gf-form-select-wrapper--has-help-icon">
......
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