Browse Source

ds config ui++

master
Coin de Gamma 5 years ago
parent
commit
6187015281
  1. 13
      src/datasource/module.ts
  2. 38
      src/datasource/partials/config.html

13
src/datasource/module.ts

@ -8,17 +8,17 @@ import configTemplate from './partials/config.html';
class HasticConfigCtrl { class HasticConfigCtrl {
public static template = configTemplate; public static template = configTemplate;
public accessOptions: any[]; public ACCESS_OPTIONS: any[] = [
{ key: 'proxy', value: 'Server (Default)' },
{ key: 'direct', value: 'Browser'}
];
public current: any; public current: any;
private showAccessHelp: boolean = false; private showAccessHelp: boolean = false;
constructor($scope) { constructor($scope) {
console.log(this);
this.accessOptions = [
{ key: 'proxy', value: 'Server (Default)' },
{ key: 'direct', value: 'Browser'}
];
this.current.access = 'proxy'; this.current.access = 'proxy';
console.log($scope);
} }
normalizeUrl() { normalizeUrl() {
@ -26,7 +26,6 @@ class HasticConfigCtrl {
} }
toggleAccessHelp() { toggleAccessHelp() {
console.log('hey');
this.showAccessHelp = !this.showAccessHelp; this.showAccessHelp = !this.showAccessHelp;
} }

38
src/datasource/partials/config.html

@ -11,7 +11,7 @@
min-length="0" min-length="0"
ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/"
required required
ng-blur="ctrl.normalizeUrl" ng-blur="ctrl.normalizeUrl()"
/> />
<info-popover mode="right-absolute"> <info-popover mode="right-absolute">
<p>Specify a complete Hastic Server HTTP URL (for example http://your_hastic_server:8080)</p> <p>Specify a complete Hastic Server HTTP URL (for example http://your_hastic_server:8080)</p>
@ -39,39 +39,45 @@
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword pointer" ng-click="toggleAccessHelp()"> <label class="gf-form-label query-keyword pointer" ng-click="ctrl.toggleAccessHelp()">
Help&nbsp; Help&nbsp;
<i class="fa fa-caret-down" ng-show="showAccessHelp"></i> <i class="fa fa-caret-down" ng-show="ctrl.showAccessHelp"></i>
<i class="fa fa-caret-right" ng-hide="showAccessHelp">&nbsp;</i> <i class="fa fa-caret-right" ng-hide="ctrl.showAccessHelp">&nbsp;</i>
</label> </label>
</div> </div>
</div> </div>
<div class="grafana-info-box m-t-2" ng-show="showAccessHelp"> <div class="grafana-info-box m-t-2" ng-show="ctrl.showAccessHelp">
<p> <p>
Access mode controls how requests to the data source will be handled. Access mode controls how requests to the data source will be handled.
<strong><i>Server</i></strong> should be the preferred way if nothing else stated. <strong><i>Server</i></strong> access mode should be the preferred way if nothing else stated.
</p> </p>
<div class="alert-title">Server access mode (Default):</div> <div class="alert-title">Server access mode (Default):</div>
<p> <p>
All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to the data source All requests will be made from the browser to Grafana backend/server which in turn will
and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. forward the requests to the data source and by that circumvent possible
The URL needs to be accessible from the grafana backend/server if you select this access mode. Cross-Origin Resource Sharing (CORS) requirements.
The URL needs to be accessible from the grafana backend/server if you select this access mode.
</p> </p>
<div class="alert-title">Browser access mode:</div> <div class="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 Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser
access mode. if you select this access mode.
</p>
</div> </div>
<div class="gf-form-inline" ng-if="current.access=='proxy'"> <div class="gf-form-inline" ng-if="current.access=='proxy'">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-10">Whitelisted Cookies</span> <span class="gf-form-label width-10">Whitelisted Cookies</span>
<bootstrap-tagsinput ng-model="current.jsonData.keepCookies" width-class="width-20" tagclass="label label-tag" placeholder="Add Name"> <bootstrap-tagsinput
</bootstrap-tagsinput> ng-model="current.jsonData.keepCookies"
width-class="width-20" tagclass="label label-tag"
placeholder="Add Name"
/>
<info-popover mode="right-absolute"> <info-popover mode="right-absolute">
Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source. Grafana Proxy deletes forwarded cookies by default. Specify cookies by name
that should be forwarded to the data source.
</info-popover> </info-popover>
</div> </div>
</div> </div>

Loading…
Cancel
Save