apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux: dashboard settings progress

Browse Source
pull/10177/head
Torkel Ödegaard 8 years ago
parent 00c723f04a
commit 511fa7dec1
11 changed files with 336 additions and 357 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 13
      public/app/core/directives/dash_class.js
  2. 4
      public/app/core/services/keybindingSrv.ts
  3. 2
      public/app/features/dashboard/dashboard_model.ts
  4. 1
      public/app/features/dashboard/partials/settings.html
  5. 49
      public/app/features/dashboard/settings/settings.html
  6. 1
      public/app/features/dashboard/settings/settings.ts
  7. 32
      public/app/features/dashboard/timepicker/settings.html
  8. 556
      public/app/features/templating/partials/editor.html
  9. 7
      public/sass/components/_dashboard_settings.scss
  10. 14
      public/sass/components/_navbar.scss
  11. 14
      public/sass/components/_view_states.scss

13
public/app/core/directives/dash_class.js
Unescape View File

@ -18,19 +18,6 @@ function (_, $, coreModule) {
elem.toggleClass('panel-in-fullscreen', false); elem.toggleClass('panel-in-fullscreen', false);
}); });
var lastHideControlsVal;
$scope.$watch('ctrl.dashboard.hideControls', function() {
if (!$scope.dashboard) {
return;
}
var hideControls = $scope.dashboard.hideControls;
if (lastHideControlsVal !== hideControls) {
elem.toggleClass('hide-controls', hideControls);
lastHideControlsVal = hideControls;
}
});
$scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) { $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) {
elem.toggleClass('playlist-active', newValue === true); elem.toggleClass('playlist-active', newValue === true);
}); });

4
public/app/core/services/keybindingSrv.ts
Unescape View File

@ -84,10 +84,6 @@ export class KeybindingSrv {
scope.broadcastRefresh(); scope.broadcastRefresh();
}); });
this.bind('mod+h', () => {
dashboard.hideControls = !dashboard.hideControls;
});
this.bind('mod+s', e => { this.bind('mod+s', e => {
scope.appEvent('save-dashboard'); scope.appEvent('save-dashboard');
}); });

2
public/app/features/dashboard/dashboard_model.ts
Unescape View File

@ -22,7 +22,6 @@ export class DashboardModel {
graphTooltip: any; graphTooltip: any;
time: any; time: any;
timepicker: any; timepicker: any;
hideControls: any;
templating: any; templating: any;
annotations: any; annotations: any;
refresh: any; refresh: any;
@ -67,7 +66,6 @@ export class DashboardModel {
this.timezone = data.timezone || ''; this.timezone = data.timezone || '';
this.editable = data.editable !== false; this.editable = data.editable !== false;
this.graphTooltip = data.graphTooltip || 0; this.graphTooltip = data.graphTooltip || 0;
this.hideControls = data.hideControls || false;
this.time = data.time || {from: 'now-6h', to: 'now'}; this.time = data.time || {from: 'now-6h', to: 'now'};
this.timepicker = data.timepicker || {}; this.timepicker = data.timepicker || {};
this.templating = this.ensureListExist(data.templating); this.templating = this.ensureListExist(data.templating);

1
public/app/features/dashboard/partials/settings.html
Unescape View File

@ -60,7 +60,6 @@
<!-- </div> --> <!-- </div> -->
<!-- --> <!-- -->
<!-- <div ng&#45;if="editor.index == 2"> --> <!-- <div ng&#45;if="editor.index == 2"> -->
<!-- <gf&#45;time&#45;picker&#45;settings dashboard="ctrl.dashboard"></gf&#45;time&#45;picker&#45;settings> -->
<!-- </div> --> <!-- </div> -->
<!-- --> <!-- -->
<!-- </div> --> <!-- </div> -->

49
public/app/features/dashboard/settings/settings.html
Unescape View File

@ -10,12 +10,55 @@
</a> </a>
</aside> </aside>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'">
<h3 class="dashboard-settings__header">
General
</h3>
<div class="gf-form-group">
<div class="gf-form">
<label class="gf-form-label width-7">Name</label>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Description</label>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">
Tags
<info-popover mode="right-normal">Press enter to add a tag</info-popover>
</label>
<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
</bootstrap-tagsinput>
</div>
<folder-picker initial-title="ctrl.dashboard.meta.folderTitle"
initial-folder-id="ctrl.dashboard.folderId"
on-change="ctrl.onFolderChange($folder)"
label-class="width-7">
</folder-picker>
<gf-form-switch class="gf-form" label="Editable" tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable" label-class="width-7">
</gf-form-switch>
</div>
<gf-time-picker-settings dashboard="ctrl.dashboard"></gf-time-picker-settings>
<h5 class="section-heading">Panel Options</h5>
<div class="gf-form">
<label class="gf-form-label width-11">
Graph Tooltip
<info-popover mode="right-normal">
Cycle between options using Shortcut: CTRL+O or CMD+O
</info-popover>
</label>
<div class="gf-form-select-wrapper">
<select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
</div>
</div>
</div> </div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
</div> </div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'" ng-include="'public/app/features/templating/partials/editor.html'">
annotationus
</div> </div>

1
public/app/features/dashboard/settings/settings.ts
Unescape View File

@ -10,7 +10,6 @@ export class SettingsCtrl {
sections: any[] = [ sections: any[] = [
{title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, {title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"},
{title: 'Timepicker', id: 'timepicker', icon: "fa fa-fw fa-clock-o"},
{title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"}, {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"},
{title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"}, {title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"},
{title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"}, {title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"},

32
public/app/features/dashboard/timepicker/settings.html
Unescape View File

@ -1,14 +1,24 @@
<div class="editor-row"> <div class="editor-row">
<h5 class="section-heading">Time Options</h5>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-10">Auto-refresh</span> <label class="gf-form-label width-10">Timezone</label>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join> <div class="gf-form-select-wrapper">
</div> <select ng-model="ctrl.dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
<div class="gf-form"> </div>
<span class="gf-form-label width-10">Now delay now-</span> </div>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.nowDelay" placeholder="0m" valid-time-span bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
data-placement="right"> <div class="gf-form">
</div> <span class="gf-form-label width-10">Auto-refresh</span>
<gf-form-switch class="gf-form" label="Hide time picker" checked="ctrl.panel.hidden" label-class="width-10"></gf-form-switch> <input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join>
</div> </div>
<div class="gf-form">
<span class="gf-form-label width-10">Now delay now-</span>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.nowDelay" placeholder="0m" valid-time-span bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
data-placement="right">
</div>
<gf-form-switch class="gf-form" label="Hide time picker" checked="ctrl.panel.hidden" label-class="width-10"></gf-form-switch>
</div>
</div> </div>

556
public/app/features/templating/partials/editor.html
Unescape View File

@ -1,325 +1,293 @@
<h3 class="dashboard-settings__header">Templating</h3>
<div ng-controller="VariableEditorCtrl" ng-init="init()"> <div ng-controller="VariableEditorCtrl" ng-init="init()">
<div class="tabbed-view-header"> <div ng-if="mode === 'list'">
<h2 class="tabbed-view-title"> <div ng-if="variables.length === 0">
Templating <em>No template variables defined</em>
</h2> <br /> <br />
</div>
<table class="filter-table filter-table--hover">
<thead>
<tr>
<th>Variable</th>
<th>Definition</th>
<th colspan="5"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="variable in variables">
<td style="width: 1%">
<span ng-click="edit(variable)" class="pointer template-variable">
${{variable.name}}
</span>
</td>
<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
{{variable.query}}
</td>
<ul class="gf-tabs"> <td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<li class="gf-tabs-item" > <td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}"> <td style="width: 1%">
Variables <a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
</a> Duplicate
</li> </a>
<li class="gf-tabs-item" ng-show="mode === 'edit'"> </td>
<a class="gf-tabs-link" ng-class="{active: mode === 'edit'}"> <td style="width: 1%">
Edit <a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
</a> <i class="fa fa-remove"></i>
</li> </a>
<li class="gf-tabs-item" ng-show="mode === 'new'"> </td>
<span class="active gf-tabs-link">New</span> </tr>
</li> </tbody>
<li class="gf-tabs-item" > </table>
<a class="gf-tabs-link" ng-click="mode = 'help';" ng-class="{active: mode === 'help'}"> </div>
Help
</a>
</li>
</ul>
<button class="tabbed-view-close-btn" ng-click="dismiss();"> <div ng-show="mode === 'help'">
<i class="fa fa-remove"></i> <div class="grafana-info-box col-lg-8">
</button> <h5>What does templating do?</h5>
</div> <p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
<br>
<br>
<div class="tabbed-view-body"> Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
</p>
</div>
</div>
<div ng-if="mode === 'list'"> <div class="gf-form" ng-show="mode === 'list'">
<div ng-if="variables.length === 0"> <div class="gf-form-button-row">
<em>No template variables defined</em> <a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
<br /> <br /> </div>
</div> </div>
<table class="filter-table filter-table--hover">
<thead>
<tr>
<th>Variable</th>
<th>Definition</th>
<th colspan="5"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="variable in variables">
<td style="width: 1%">
<span ng-click="edit(variable)" class="pointer template-variable">
${{variable.name}}
</span>
</td>
<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
{{variable.query}}
</td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td> <form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td> <h5 class="section-heading">Variable</h5>
<td style="width: 1%"> <div class="gf-form-group">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini"> <div class="gf-form-inline">
Duplicate <div class="gf-form max-width-19">
</a> <span class="gf-form-label width-6">Name</span>
</td> <input type="text" class="gf-form-input" name="name" placeholder="name" ng-model='current.name' required ng-pattern="namePattern"></input>
<td style="width: 1%"> </div>
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini"> <div class="gf-form max-width-19">
<i class="fa fa-remove"></i> <span class="gf-form-label width-6">
</a> Type
</td> <info-popover mode="right-normal">
</tr> {{variableTypes[current.type].description}}
</tbody> </info-popover>
</table> </span>
</div> <div class="gf-form-select-wrapper max-width-17">
<select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in variableTypes" ng-change="typeChanged()"></select>
</div>
</div>
</div>
<div ng-show="mode === 'help'"> <div class="gf-form" ng-show="ctrl.form.name.$error.pattern">
<div class="grafana-info-box col-lg-8"> <span class="gf-form-label gf-form-label--error">Template names cannot begin with '__' that's reserved for Grafanas global variables</span>
<h5>What does templating do?</h5> </div>
<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
<br>
<br>
Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information. <div class="gf-form-inline">
</p> <div class="gf-form max-width-19">
<span class="gf-form-label width-6">Label</span>
<input type="text" class="gf-form-input" ng-model='current.label' placeholder="optional display name"></input>
</div>
<div class="gf-form max-width-19">
<span class="gf-form-label width-6">Hide</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select>
</div>
</div>
</div> </div>
</div> </div>
<div class="gf-form" ng-show="mode === 'list'"> <div ng-if="current.type === 'interval'" class="gf-form-group">
<div class="gf-form-button-row"> <h5 class="section-heading">Interval Options</h5>
<a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
</div>
</div>
<form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
<h5 class="section-heading">Variable</h5>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-19">
<span class="gf-form-label width-6">Name</span>
<input type="text" class="gf-form-input" name="name" placeholder="name" ng-model='current.name' required ng-pattern="namePattern"></input>
</div>
<div class="gf-form max-width-19">
<span class="gf-form-label width-6">
Type
<info-popover mode="right-normal">
{{variableTypes[current.type].description}}
</info-popover>
</span>
<div class="gf-form-select-wrapper max-width-17">
<select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in variableTypes" ng-change="typeChanged()"></select>
</div>
</div>
</div>
<div class="gf-form" ng-show="ctrl.form.name.$error.pattern">
<span class="gf-form-label gf-form-label--error">Template names cannot begin with '__' that's reserved for Grafanas global variables</span>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-19">
<span class="gf-form-label width-6">Label</span>
<input type="text" class="gf-form-input" ng-model='current.label' placeholder="optional display name"></input>
</div>
<div class="gf-form max-width-19">
<span class="gf-form-label width-6">Hide</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select>
</div>
</div>
</div>
</div>
<div ng-if="current.type === 'interval'" class="gf-form-group"> <div class="gf-form">
<h5 class="section-heading">Interval Options</h5> <span class="gf-form-label width-9">Values</span>
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()" required></input>
<div class="gf-form"> </div>
<span class="gf-form-label width-9">Values</span>
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()" required></input>
</div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<gf-form-switch class="gf-form" label="Auto Option" label-class="width-9" checked="current.auto" on-change="runQuery()"> <gf-form-switch class="gf-form" label="Auto Option" label-class="width-9" checked="current.auto" on-change="runQuery()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9" ng-show="current.auto"> <span class="gf-form-label width-9" ng-show="current.auto">
Step count <tip>How many times should the current time range be divided to calculate the value</tip> Step count <tip>How many times should the current time range be divided to calculate the value</tip>
</span> </span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.auto"> <div class="gf-form-select-wrapper max-width-10" ng-show="current.auto">
<select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [1,2,3,4,5,10,20,30,40,50,100,200,300,400,500]" ng-change="runQuery()"></select> <select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [1,2,3,4,5,10,20,30,40,50,100,200,300,400,500]" ng-change="runQuery()"></select>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label" ng-show="current.auto"> <span class="gf-form-label" ng-show="current.auto">
Min interval <tip>The calculated value will not go below this threshold</tip> Min interval <tip>The calculated value will not go below this threshold</tip>
</span> </span>
<input type="text" class="gf-form-input max-width-10" ng-show="current.auto" ng-model="current.auto_min" ng-change="runQuery()" placeholder="10s"></input> <input type="text" class="gf-form-input max-width-10" ng-show="current.auto" ng-model="current.auto_min" ng-change="runQuery()" placeholder="10s"></input>
</div> </div>
</div> </div>
</div> </div>
<div ng-if="current.type === 'custom'" class="gf-form-group"> <div ng-if="current.type === 'custom'" class="gf-form-group">
<h5 class="section-heading">Custom Options</h5> <h5 class="section-heading">Custom Options</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-14">Values separated by comma</span> <span class="gf-form-label width-14">Values separated by comma</span>
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input> <input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input>
</div> </div>
</div> </div>
<div ng-if="current.type === 'constant'" class="gf-form-group"> <div ng-if="current.type === 'constant'" class="gf-form-group">
<h5 class="section-heading">Constant options</h5> <h5 class="section-heading">Constant options</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label">Value</span> <span class="gf-form-label">Value</span>
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="your metric prefix"></input> <input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="your metric prefix"></input>
</div> </div>
</div> </div>
<div ng-if="current.type === 'query'" class="gf-form-group"> <div ng-if="current.type === 'query'" class="gf-form-group">
<h5 class="section-heading">Query Options</h5> <h5 class="section-heading">Query Options</h5>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-21"> <div class="gf-form max-width-21">
<span class="gf-form-label width-7">Data source</span> <span class="gf-form-label width-7">Data source</span>
<div class="gf-form-select-wrapper max-width-14"> <div class="gf-form-select-wrapper max-width-14">
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required> <select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required>
<option value="" ng-if="false"></option> <option value="" ng-if="false"></option>
</select> </select>
</div> </div>
</div> </div>
<div class="gf-form max-width-21"> <div class="gf-form max-width-21">
<span class="gf-form-label width-7"> <span class="gf-form-label width-7">
Refresh Refresh
<info-popover mode="right-normal"> <info-popover mode="right-normal">
When to update the values of this variable. When to update the values of this variable.
</info-popover> </info-popover>
</span> </span>
<div class="gf-form-select-wrapper max-width-14"> <div class="gf-form-select-wrapper max-width-14">
<select class="gf-form-input" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select> <select class="gf-form-input" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select>
</div> </div>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Query</span> <span class="gf-form-label width-7">Query</span>
<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()" required></input> <input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()" required></input>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7"> <span class="gf-form-label width-7">
Regex Regex
<info-popover mode="right-normal"> <info-popover mode="right-normal">
Optional, if you want to extract part of a series name or metric node segment. Optional, if you want to extract part of a series name or metric node segment.
</info-popover> </info-popover>
</span> </span>
<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input> <input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div> </div>
<div class="gf-form max-width-21"> <div class="gf-form max-width-21">
<span class="gf-form-label width-7"> <span class="gf-form-label width-7">
Sort Sort
<info-popover mode="right-normal"> <info-popover mode="right-normal">
How to sort the values of this variable. How to sort the values of this variable.
</info-popover> </info-popover>
</span> </span>
<div class="gf-form-select-wrapper max-width-14"> <div class="gf-form-select-wrapper max-width-14">
<select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select> <select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select>
</div> </div>
</div> </div>
</div> </div>
<div ng-show="current.type === 'datasource'" class="gf-form-group"> <div ng-show="current.type === 'datasource'" class="gf-form-group">
<h5 class="section-heading">Data source options</h5> <h5 class="section-heading">Data source options</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-12">Type</label> <label class="gf-form-label width-12">Type</label>
<div class="gf-form-select-wrapper max-width-18"> <div class="gf-form-select-wrapper max-width-18">
<select class="gf-form-input" ng-model="current.query" ng-options="f.value as f.text for f in datasourceTypes" ng-change="runQuery()"></select> <select class="gf-form-input" ng-model="current.query" ng-options="f.value as f.text for f in datasourceTypes" ng-change="runQuery()"></select>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-12"> <label class="gf-form-label width-12">
Instance name filter Instance name filter
<info-popover mode="right-normal"> <info-popover mode="right-normal">
Regex filter for which data source instances to choose from in Regex filter for which data source instances to choose from in
the variable value dropdown. Leave empty for all. the variable value dropdown. Leave empty for all.
<br><br> <br><br>
Example: <code>/^prod/</code> Example: <code>/^prod/</code>
</info-popover> </info-popover>
</label> </label>
<input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input> <input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div> </div>
</div> </div>
<div ng-if="current.type === 'adhoc'" class="gf-form-group"> <div ng-if="current.type === 'adhoc'" class="gf-form-group">
<h5 class="section-heading">Options</h5> <h5 class="section-heading">Options</h5>
<div class="gf-form max-width-21"> <div class="gf-form max-width-21">
<span class="gf-form-label width-8">Data source</span> <span class="gf-form-label width-8">Data source</span>
<div class="gf-form-select-wrapper max-width-14"> <div class="gf-form-select-wrapper max-width-14">
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required ng-change="validate()"> <select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required ng-change="validate()">
<option value="" ng-if="false"></option> <option value="" ng-if="false"></option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti"> <div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
<h5 class="section-heading">Selection Options</h5> <h5 class="section-heading">Selection Options</h5>
<div class="section"> <div class="section">
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Multi-value" label="Multi-value"
label-class="width-10" label-class="width-10"
tooltip="Enables multiple values to be selected at the same time" tooltip="Enables multiple values to be selected at the same time"
checked="current.multi" checked="current.multi"
on-change="runQuery()"> on-change="runQuery()">
</gf-form-switch> </gf-form-switch>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Include All option" label="Include All option"
label-class="width-10" label-class="width-10"
checked="current.includeAll" checked="current.includeAll"
on-change="runQuery()"> on-change="runQuery()">
</gf-form-switch> </gf-form-switch>
</div> </div>
<div class="gf-form" ng-if="current.includeAll"> <div class="gf-form" ng-if="current.includeAll">
<span class="gf-form-label width-10">Custom all value</span> <span class="gf-form-label width-10">Custom all value</span>
<input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input> <input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
</div> </div>
</div> </div>
<div class="gf-form-group" ng-if="current.type === 'query'"> <div class="gf-form-group" ng-if="current.type === 'query'">
<h5>Value groups/tags (Experimental feature)</h5> <h5>Value groups/tags (Experimental feature)</h5>
<gf-form-switch class="gf-form" label="Enabled" label-class="width-10" checked="current.useTags" on-change="runQuery()"> <gf-form-switch class="gf-form" label="Enabled" label-class="width-10" checked="current.useTags" on-change="runQuery()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form last" ng-if="current.useTags"> <div class="gf-form last" ng-if="current.useTags">
<span class="gf-form-label width-10">Tags query</span> <span class="gf-form-label width-10">Tags query</span>
<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input> <input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
</div> </div>
<div class="gf-form" ng-if="current.useTags"> <div class="gf-form" ng-if="current.useTags">
<li class="gf-form-label width-10">Tag values query</li> <li class="gf-form-label width-10">Tag values query</li>
<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input> <input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
</div> </div>
</div> </div>
<div class="gf-form-group" ng-show="current.options.length"> <div class="gf-form-group" ng-show="current.options.length">
<h5>Preview of values (shows max 20)</h5> <h5>Preview of values (shows max 20)</h5>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form" ng-repeat="option in current.options | limitTo: 20"> <div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
<span class="gf-form-label">{{option.text}}</span> <span class="gf-form-label">{{option.text}}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="alert alert-info gf-form-group" ng-if="infoText"> <div class="alert alert-info gf-form-group" ng-if="infoText">
{{infoText}} {{infoText}}
</div> </div>
<div class="gf-form-button-row p-y-0"> <div class="gf-form-button-row p-y-0">
<button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button> <button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
<button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button> <button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
</div> </div>
</form> </form>
</div>
</div> </div>

7
public/sass/components/_dashboard_settings.scss
Unescape View File

@ -38,6 +38,13 @@
margin-bottom: 20px; margin-bottom: 20px;
padding-right: 60px; padding-right: 60px;
white-space: nowrap; white-space: nowrap;
i {
font-size: 25px;
position: relative;
top: 1px;
padding-right: 5px;
}
} }
.dashboard-settings__header { .dashboard-settings__header {

14
public/sass/components/_navbar.scss
Unescape View File

@ -87,20 +87,6 @@
} }
} }
.navbar-page-btn-wrapper {
display: inline-block;
position: relative;
}
.navbar-section-wrapper {
position: relative;
float: left;
}
.navbar-mini-btn-wrapper {
padding: 15px;
}
.navbar-buttons { .navbar-buttons {
height: $navbarHeight; height: $navbarHeight;
display: flex; display: flex;

14
public/sass/components/_view_states.scss
Unescape View File

@ -1,19 +1,5 @@
@mixin hide-controls() {
.add-row-panel-hint,
.dash-row-menu-container {
display: none;
}
.panel-drop-zone {
visibility: hidden;
}
}
.hide-controls {
@include hide-controls();
}
.page-kiosk-mode { .page-kiosk-mode {
@include hide-controls();
dashnav { dashnav {
display: none; display: none;
} }

Write Preview
Loading…
Cancel
Save