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

ux(): worked more on new tabs view

Browse Source
pull/4152/head
Torkel Ödegaard 10 years ago
parent a414dd028c a3e22091be
commit 7207068181
33 changed files with 559 additions and 770 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. 8
      pkg/api/dataproxy.go
  2. 6
      public/app/features/dashboard/dashnav/dashnav.ts
  3. 8
      public/app/features/dashboard/keybindings.js
  4. 8
      public/app/features/dashboard/partials/graphiteImport.html
  5. 111
      public/app/features/dashboard/partials/shareModal.html
  6. 11
      public/app/features/dashboard/submenu/submenu.html
  7. 38
      public/app/features/dashboard/timepicker/settings.html
  8. 136
      public/app/features/dashlinks/editor.html
  9. 21
      public/app/features/org/partials/apikeyModal.html
  10. 20
      public/app/features/org/partials/newOrg.html
  11. 4
      public/app/features/panel/panel_directive.ts
  12. 69
      public/app/features/panel/partials/panelTime.html
  13. 103
      public/app/features/panellinks/module.html
  14. 1
      public/app/features/panellinks/module.js
  15. 6
      public/app/features/snapshot/partials/snapshots.html
  16. 287
      public/app/features/templating/partials/editor.html
  17. 8
      public/app/partials/help_modal.html
  18. 4
      public/app/partials/panelgeneral.html
  19. 67
      public/app/partials/reset_password.html
  20. 69
      public/app/partials/roweditor.html
  21. 4
      public/app/partials/valueSelectDropdown.html
  22. 4
      public/sass/_variables.dark.scss
  23. 4
      public/sass/_variables.light.scss
  24. 1
      public/sass/_variables.scss
  25. 11
      public/sass/components/_dashboard.scss
  26. 15
      public/sass/components/_gf-form.scss
  27. 8
      public/sass/components/_modals.scss
  28. 27
      public/sass/components/_submenu.scss
  29. 22
      public/sass/components/_tabbed_view.scss
  30. 5
      public/sass/components/_tabs.scss
  31. 1
      public/sass/components/_tags.scss
  32. 7
      public/sass/layout/_page.scss
  33. 9
      public/sass/mixins/_mixins.scss

8
pkg/api/dataproxy.go
Unescape View File

@ -64,20 +64,12 @@ func NewReverseProxy(ds *m.DataSource, proxyPath string, targetUrl *url.URL) *ht
return &httputil.ReverseProxy{Director: director}
}
var dsMap map[int64]*m.DataSource = make(map[int64]*m.DataSource)
func getDatasource(id int64, orgId int64) (*m.DataSource, error) {
// ds, exists := dsMap[id]
// if exists && ds.OrgId == orgId {
// return ds, nil
// }
query := m.GetDataSourceByIdQuery{Id: id, OrgId: orgId}
if err := bus.Dispatch(&query); err != nil {
return nil, err
}
dsMap[id] = &query.Result
return &query.Result, nil
}

6
public/app/features/dashboard/dashnav/dashnav.ts
Unescape View File

@ -12,6 +12,8 @@ export class DashNavCtrl {
$scope.init = function() {
$scope.onAppEvent('save-dashboard', $scope.saveDashboard);
$scope.onAppEvent('delete-dashboard', $scope.deleteDashboard);
$scope.onAppEvent('export-dashboard', $scope.snapshot);
$scope.onAppEvent('quick-snapshot', $scope.quickSnapshot);
$scope.showSettingsMenu = $scope.dashboardMeta.canEdit || $scope.contextSrv.isEditor;
@ -52,6 +54,10 @@ export class DashNavCtrl {
});
};
$scope.quickSnapshot = function() {
$scope.shareDashboard(1);
};
$scope.openSearch = function() {
$scope.appEvent('show-dash-search');
};

8
public/app/features/dashboard/keybindings.js
Unescape View File

@ -60,6 +60,14 @@ function(angular, $) {
scope.appEvent('zoom-out', evt);
}, { inputDisabled: true });
keyboardManager.bind('ctrl+e', function(evt) {
scope.appEvent('export-dashboard', evt);
}, { inputDisabled: true });
keyboardManager.bind('ctrl+i', function(evt) {
scope.appEvent('quick-snapshot', evt);
}, { inputDisabled: true });
keyboardManager.bind('esc', function() {
var popups = $('.popover.in');
if (popups.length > 0) {

8
public/app/features/dashboard/partials/graphiteImport.html
Unescape View File

@ -1,21 +1,21 @@
<div ng-controller="GraphiteImportCtrl" ng-init="init()">
<div ng-if="datasources.length > 0">
<h2 style="margin-top: 30px;">Load dashboard from Graphite-Web</h2>
<h2 class="page-heading">Load dashboard from Graphite-Web</h2>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Data source</span>
</div>
<div class="gf-form width-30">
<div class="gf-form">
<div class="gf-form-select-wrapper">
<select type="text" ng-model="options.sourceName" class="gf-form-input max-width-10" ng-options="f for f in datasources">
<select type="text" ng-model="options.sourceName" class="gf-form-input gf-size-auto" ng-options="f for f in datasources">
</select>
</div>
</div>
<div class="gf-form">
<button class="btn btn-inverse pull-right" ng-click="listAll()">List dashboards</button>
<button class="btn btn-success pull-right" ng-click="listAll()">List dashboards</button>
</div>
</div>
</div>

111
public/app/features/dashboard/partials/shareModal.html
Unescape View File

@ -35,53 +35,30 @@
<div ng-include src="'shareLinkOptions.html'"></div>
<div class="gf-form">
<div class="gf-form-row">
<span class="gf-fluid-input">
<textarea rows="5" data-share-panel-url class="input" ng-model='iframeHtml'></textarea>
</span>
<div class="gf-form-group position-center">
<div class="gf-form width-30" >
<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
</div>
</div>
<div class="gf-form-group">
<div class="gf-form position-center">
<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
</div>
</div>
</script>
<script type="text/ng-template" id="shareLinkOptions.html">
<div class="editor-row" style="margin: 11px 20px 33px 20px">
<div class="section">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px;">
<label class="checkbox-label" for="options.forCurrent">Current time range</label>
</li>
<li class="tight-form-item last">
<input class="cr1" id="options.forCurrent" type="checkbox" ng-model="options.forCurrent" ng-checked="options.forCurrent" ng-change="buildUrl()">
<label for="options.forCurrent" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px">
<label class="checkbox-label" for="options.includeTemplateVars">Include template variables</label>
</li>
<li class="tight-form-item last">
<input class="cr1" id="options.includeTemplateVars" type="checkbox" ng-model="options.includeTemplateVars" ng-checked="options.includeTemplateVars" ng-change="buildUrl()">
<label for="options.includeTemplateVars" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px">
Theme
</li>
<li>
<select class="input-small tight-form-input last" style="width: 211px" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-group position-center">
<div class="gf-form">
<editor-checkbox text="Current time range" model="options.forCurrent" change="updated()"></editor-checkbox>
</div>
<div class="gf-form">
<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="updated()"></editor-checkbox>
</div>
<div class="gf-form">
<span class="gf-form-label">Theme</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
</div>
</div>
</div>
@ -93,14 +70,19 @@
</div>
<div ng-include src="'shareLinkOptions.html'"></div>
<div class="gf-form">
<div class="gf-form-row">
<div class="gf-form-group position-center">
<div class="gf-form-inline">
<div class="gf-form width-30">
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
</div>
<div class="gf-form pull-right">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
<span class="gf-fluid-input">
<input type="text" data-share-panel-url class="input" ng-model='shareUrl'></input>
</span>
</div>
<div class="editor-row" style="margin-top: 5px;" ng-show="modeSharePanel">
</div>
</div>
<div class="gf-form-group">
<div class="gf-form position-center" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</div>
@ -132,29 +114,15 @@
</p>
</div>
<div class="editor-row share-modal-options" style="">
<div class="section" ng-if="step === 1">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 110px;">
Snapshot name
</li>
<li>
<input type="text" ng-model="snapshot.name" class="input-large tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 110px">
Expire
</li>
<li>
<select class="input-small tight-form-input last" style="width: 211px" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-group share-modal-options position-center">
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Snapshot name</span>
<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
</div>
<div class="gf-form">
<span class="gf-form-label width-12">Expire</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
</div>
</div>
@ -170,7 +138,7 @@
</div>
</div>
<div ng-if="step === 1">
<div ng-if="step === 1" class="gf-form-buttons-row">
<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i>
Local Snapshot
@ -184,6 +152,7 @@
<div class="pull-right" ng-if="step === 2" style="padding: 5px">
Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
</div>
</div>
</div>
</script>

11
public/app/features/dashboard/submenu/submenu.html
Unescape View File

@ -1,16 +1,14 @@
<div class="submenu-controls">
<div class="tight-form borderless">
<ul class="tight-form-list" ng-if="ctrl.dashboard.templating.list.length > 0">
<ul ng-if="ctrl.dashboard.templating.list.length > 0">
<li ng-repeat="variable in ctrl.variables" class="submenu-item">
<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
<span class="submenu-item-label template-variable " ng-show="!variable.hideLabel">
{{variable.label || variable.name}}:
</span>
<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
</li>
</ul>
<ul class="tight-form-list" ng-if="ctrl.dashboard.annotations.list.length > 0">
<ul ng-if="ctrl.dashboard.annotations.list.length > 0">
<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
<a ng-click="ctrl.disableAnnotation(annotation)">
<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
@ -21,10 +19,9 @@
</li>
</ul>
<ul class="tight-form-list pull-right" ng-if="ctrl.dashboard.links.length > 0">
<ul class="pull-right" ng-if="ctrl.dashboard.links.length > 0">
<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
</ul>
<div class="clearfix"></div>
</div>
</div>

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

@ -1,37 +1,15 @@
<div class="editor-row">
<div class="section">
<div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 118px">
Auto-refresh
</li>
<li>
<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="ctrl.panel.refresh_intervals" array-join>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 118px">
Now delay
</li>
<li class="tight-form-item">
now-
</li>
<li>
<input type="text" class="input-mini tight-form-input last"
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Auto-refresh</span>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join>
</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">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>

136
public/app/features/dashlinks/editor.html
Unescape View File

@ -1,90 +1,82 @@
<div class="editor-row">
<h5>Links and Dash Navigation</h5>
<h5 class="page-heading">Links and Dash Navigation</h5>
<div ng-repeat="link in dashboard.links" style="margin-top: 10px;">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<i ng-click="moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
<i ng-click="moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-fw fa-arrow-down"></i>
</li>
<li class="tight-form-item last">
<i class="fa fa-remove pointer" ng-click="deleteLink($index)"></i>
</li>
</ul>
<div ng-repeat="link in dashboard.links">
<div class="gf-form-group" style="/*background: #292929; border-bottom: 2px solid #1f1d1d; padding: 10px; margin-bottom: 5px;*/">
<div class="gf-form-inline pull-right">
<div class="gf-form-buttons-row">
<button class="btn btn-inverse btn-mini" ng-hide="$first"><i ng-click="moveLink($index, -1)" class="fa fa-arrow-up"></i></button>
<button class="btn btn-inverse btn-mini" ng-hide="$last"><i ng-click="moveLink($index, 1)" class="fa fa-arrow-down"></i></button>
<button class="btn btn-inverse btn-mini"><i class="fa fa-remove" ng-click="deleteLink($index)"></i></button>
</div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink"></i>
</li>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Type</span>
<div class="gf-form-select-wrapper width-10">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
</div>
</div>
<div class="gf-form" ng-show="link.type === 'dashboards'">
<span class="gf-form-label">With tags</span>
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags"></bootstrap-tagsinput>
</div>
<li class="tight-form-item">Type</li>
<li>
<select class="input-medium tight-form-input" style="width: 150px;" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
</li>
<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
<span class="gf-form-label width-6">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
</div>
<li class="tight-form-item" ng-show="link.type === 'dashboards'">With tags</li>
<li ng-show="link.type === 'dashboards'">
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags">
</bootstrap-tagsinput>
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboards'">
<div class="gf-form" ng-show="link.type === 'dashboards'">
<editor-checkbox text="As dropdown" model="link.asDropdown" change="updated()"></editor-checkbox>
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboards' && link.asDropdown">
Title
</li>
<li ng-show="link.type === 'dashboards' && link.asDropdown">
<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 51px">Url</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.url" class="input-xlarge tight-form-input" style="width: 302px;" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'">
</div>
<div class="gf-form" ng-show="link.type === 'link'">
<li class="gf-form-label width-6">Url</li>
<input type="text" ng-model="link.url" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
<editor-checkbox text="Open in new tab " model="link.targetBlank" change="updated()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="link.type === 'link'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
</div>
<div class="gf-form-inline" ng-show="link.type === 'link'">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 31px">Title</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 51px">Tooltip</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.tooltip" class="input-medium tight-form-input" style="width: 151px" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'">Icon</li>
<li ng-show="link.type === 'link'">
<select class="input-medium tight-form-input" style="width: 110px;" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Tooltip</span>
<input type="text" ng-model="link.tooltip" class="gf-form-input max-width-10" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Icon</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form width-1">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item">
</div>
<div class="gf-form">
<editor-checkbox text="Keep current time range" model="link.keepTime" change="updated()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Add current variable values" model="link.includeVars" change="updated()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row">
<br>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
</div>
</div>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>

21
public/app/features/org/partials/apikeyModal.html
Unescape View File

@ -10,23 +10,16 @@
</button>
</div>
<div class="gf-box-body" style="min-height: 0px;">
<div class="gf-box-body">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
<strong>Key</strong>
</li>
<li class="tight-form-item last">
{{key}}
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Key</span>
<span class="gf-form-label">{{key}}</span>
</div>
</div>
<br>
<br>
<div class="grafana-info-box" style="text-align: left">
<div class="grafana-info-box" style="border: 0;">
You will only be able to view this key here once! It is not stored in this form. So be sure to copy it now.
<br>
<br>

20
public/app/features/org/partials/newOrg.html
Unescape View File

@ -6,24 +6,16 @@
<h2 style="margin-top: 30px;">Add Organization</h2>
<form name="form">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
<strong>Org. name</strong>
</li>
<li>
<input type="text" ng-model="newOrg.name" required class="input-xxlarge tight-form-input last" placeholder="organization name">
</li>
<li>
</li>
</ul>
<div class="clearfix"></div>
<form name="form" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Org. name</span>
<input type="text" ng-model="newOrg.name" required class="gf-form-input" placeholder="organization name">
</div>
<br>
<div class="gf-form-buttons-row">
<button class="btn btn-success pull-right" ng-click="createOrg()">Create</button>
</div>
</form>
</div>
</div>

4
public/app/features/panel/panel_directive.ts
Unescape View File

@ -28,7 +28,7 @@ var panelTemplate = `
</div>
<div class="panel-full-edit" ng-if="ctrl.editMode">
<div class="tabbed-view">
<div class="tabbed-view tabbed-view--panel-edit">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
<i ng-class="ctrl.icon"></i>
@ -44,7 +44,7 @@ var panelTemplate = `
</ul>
<button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
Back to dashboard
<i class="fa fa-remove"></i>
</button>
</div>

69
public/app/features/panel/partials/panelTime.html
Unescape View File

@ -1,59 +1,34 @@
<div class="editor-row">
<div class="section tight-form-container" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-clock-o"></i>
</li>
<li class="tight-form-item" style="width: 178px">
<strong>Override relative time</strong>
</li>
<li class="tight-form-item" style="width: 50px">
Last
</li>
<li>
<input type="text" class="input-small tight-form-input last" placeholder="1h"
</span>
<span class="gf-form-label width-12">Override relative time</span>
<span class="gf-form-label width-6">Last</span>
<input type="text" class="gf-form-input max-width-8" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span
ng-change="ctrl.refresh()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-clock-o"></i>
</li>
<li class="tight-form-item" style="width: 178px">
<strong>Add time shift</strong>
</li>
<li class="tight-form-item" style="width: 50px">
Amount
</li>
<li>
<input type="text" class="input-small tight-form-input last" placeholder="1h"
</span>
<span class="gf-form-label width-12">Add time shift</span>
<span class="gf-form-label width-6">Amount</span>
<input type="text" class="gf-form-input max-width-8" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span
ng-change="ctrl.refresh()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-clock-o"></i>
</li>
<li class="tight-form-item" style="width: 178px">
<strong>Hide time override info</strong>
</li>
<li class="tight-form-item last">
<input class="cr1" id="ctrl.panel.hideTimeOverride" type="checkbox"
ng-model="ctrl.panel.hideTimeOverride" ng-checked="ctrl.panel.hideTimeOverride" ng-change="ctrl.refresh()">
<label for="ctrl.panel.hideTimeOverride" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</span>
<editor-checkbox text="Hide time override info" model="ctrl.panel.hideTimeOverride" change="ctrl.refresh()"></editor-checkbox>
</div>
</div>

103
public/app/features/panellinks/module.html
Unescape View File

@ -1,84 +1,67 @@
<div class="editor-row">
<div class="section">
<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
<h5 class="section-heading">
Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
</h5>
<div ng-repeat="link in panel.links" style="margin-top: 20px;">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<i ng-click="moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
<i ng-click="moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-fw fa-arrow-down"></i>
</li>
<li class="tight-form-item last">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li>
</ul>
<div class="gf-form-group">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink"></i>
</li>
</div>
<li class="tight-form-item">Type</li>
<li>
<select class="input-medium tight-form-input" style="width: 150px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</li>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper width-14">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</div>
</div>
<li class="tight-form-item" ng-show="link.type === 'dashboard'" style="width: 73px;">Dashboard</li>
<li ng-show="link.type === 'dashboard'">
<input type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="input-large tight-form-input" ng-blur="dashboardChanged(link)">
</li>
<div class="gf-form">
<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input max-width-14" ng-blur="dashboardChanged(link)">
<li class="tight-form-item" ng-show="link.type === 'absolute'" style="width: 73px;">Url</li>
<li ng-show="link.type === 'absolute'">
<input type="text" ng-model="link.url" class="input-large tight-form-input">
</li>
<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
</div>
</ul>
<div class="clearfix"></div>
<div class="gf-form">
<button class="btn-inverse gf-form-btn btn-small" ng-click="deleteLink(link)"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item" style="width: 31px">Title</li>
<li>
<input type="text" ng-model="link.title" class="input-medium tight-form-input">
</li>
<li class="tight-form-item" style="width: 73px;">
Url params
</li>
<li>
<input type="text" ng-model="link.params" class="input-large tight-form-input">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
</div>
<div class="gf-form">
<div class="gf-form-label width-7">Title</div>
<input type="text" ng-model="link.title" class="gf-form-input">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Url params</span>
<input type="text" ng-model="link.params" class="gf-form-input">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item">
</div>
<div class="gf-form">
<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
</li>
<li class="tight-form-item last">
<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<br>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
</div>

1
public/app/features/panellinks/module.js
Unescape View File

@ -52,6 +52,5 @@ function (angular, _) {
$scope.deleteLink = function(link) {
$scope.panel.links = _.without($scope.panel.links, link);
};
});
});

6
public/app/features/snapshot/partials/snapshots.html
Unescape View File

@ -2,9 +2,10 @@
</navbar>
<div class="page-container">
<div class="page-wide">
<div class="page-header">
<h1>Available snapshots</h1>
</div>
<table class="filter-table" style="margin-top: 20px">
<thead>
@ -37,4 +38,3 @@
</table>
</div>
</div>

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

@ -8,15 +8,11 @@
<div class="tabs">
<ul class="nav nav-tabs">
<li ng-class="{active: mode === 'list'}">
<a ng-click="mode = 'list';">
Variables
</a>
<a ng-click="mode = 'list';">Variables</a>
</li>
<li ng-class="{active: mode === 'edit'}" ng-show="mode === 'edit'">
<a>
{{current.name}}
</a>
<a>{{current.name}}</a>
</li>
<li ng-class="{active: mode === 'new'}">
@ -78,249 +74,144 @@
</div>
<div ng-if="mode === 'edit' || mode === 'new'">
<div class="editor-row">
<div class="tight-form-section">
<h5>Variable</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Name
</li>
<li>
<input type="text" class="input-large tight-form-input" placeholder="name" ng-model='current.name'></input>
</li>
<li class="tight-form-item">
Type
</li>
<li>
<select class="input-small tight-form-input" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</li>
<li class="tight-form-item" ng-show="current.type === 'query'">
Data source
</li>
<li ng-show="current.type === 'query'">
<select class="input input-medium tight-form-input last" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" class="gf-form-input max-width-14" placeholder="name" ng-model='current.name'></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input max-width-10" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
<div class="gf-form-select-wrapper" ng-show="current.type === 'query'">
<select class="gf-form-input max-width-14" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
</div>
</div>
<div class="editor-row">
<div class="tight-form-section">
<h5>Value Options</h5>
<div ng-show="current.type === 'interval'">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 160px">
Values
</li>
<li>
<input type="text" style="width: 345px" class="input-xxlarge tight-form-input last" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
<div ng-show="current.type === 'interval'" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Values</span>
<input type="text" class="gf-form-input max-width-28" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 160px">
<div class="gf-form">
<editor-checkbox text="Include auto interval" model="current.auto" change="runQuery()"></editor-checkbox>
</li>
<li class="tight-form-item" ng-show="current.auto">
<span class="gf-form-label" ng-show="current.auto">
Auto interval steps <tip>How many times should the current time range be divided to calculate the value</tip>
</li>
<li>
<select class="input-mini tight-form-input last" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</li>
</ul>
<div class="clearfix"></div>
</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</div>
</div>
</div>
<div ng-show="current.type === 'custom'">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 180px">
Values seperated by comma
</li>
<li>
<input type="text" class="input tight-form-input last" style="width: 325px;" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</li>
</ul>
<div class="clearfix"></div>
<div ng-show="current.type === 'custom'" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-13">Values seperated by comma</span>
<input type="text" class="gf-form-input max-width-22" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
<div class="gf-form ">
<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
<input ng-show="current.includeAll" type="text" class="gf-form-input max-width-22" ng-model='current.options[0].value' style="margin-left: 4px;"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-13" ng-show="current.includeAll">All format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
<editor-checkbox text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
</li>
<li ng-show="current.includeAll">
<input type="text" class="input-xlarge tight-form-input" style="width:364px" ng-model='current.options[0].value'></input>
</li>
<li class="tight-form-item" ng-show="current.includeAll">
All format
</li>
<li ng-show="current.includeAll">
<select class="input-medium tight-form-input last" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div ng-show="current.type === 'query'">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Query
</li>
<li>
<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
<div ng-show="current.type === 'query'" class="gf-form-group">
<div class="gf-form">
<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()"></input>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
<div class="gf-form">
<span class="gf-form-label width-7">
Regex
<tip>Optional, if you want to extract part of a series name or metric node segment</tip>
</li>
<li>
<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</span>
<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div>
<div class="gf-form">
<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
<input ng-show="current.includeAll" type="text" class="gf-form-input" ng-model='current.options[0].value'></input>
<span class="gf-form-label" ng-show="current.includeAll">All format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
<editor-checkbox text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
</li>
<li ng-show="current.includeAll">
<input type="text" class="input-xlarge tight-form-input" style="width:364px" ng-model='current.options[0].value'></input>
</li>
<li class="tight-form-item" ng-show="current.includeAll">
All format
</li>
<li ng-show="current.includeAll">
<select class="input-medium tight-form-input last" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item last">
<editor-checkbox text="Refresh on load" model="current.refresh"></editor-checkbox>
<div class="gf-form">
<editor-checkbox class="width-13" text="Refresh on load" model="current.refresh"></editor-checkbox>
<tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time</tip>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="gf-form-group">
<h5>Display options</h5>
<div class="gf-form">
<span class="gf-form-label width-8">Variable Label</span>
<input type="text" class="gf-form-input max-width-12" ng-model='current.label' placeholder=""></input>
<editor-checkbox class="width-13" text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
</div>
</div>
</div>
<div class="editor-row">
<div class="tight-form-section" ng-hide="current.type === 'interval'">
<div class="col-md-6" ng-hide="current.type === 'interval'">
<div class="gf-form-group" >
<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item last" style="width: 100px;">
<div class="gf-form">
<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
</li>
<li class="tight-form-item" ng-show="current.multi">
Multi format
</li>
<li ng-show="current.multi">
<select class="input-medium tight-form-input last" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
</li>
</ul>
<div class="clearfix"></div>
<span class="gf-form-label" ng-show="current.multi">Multi format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.multi">
<select class="gf-form-input" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
</div>
</div>
<div class="tight-form-section">
<h5>Display options</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Variable Label
</li>
<li>
<input type="text" class="input-medium tight-form-input" ng-model='current.label' placeholder=""></input>
</li>
<li class="tight-form-item last">
<editor-checkbox text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row" ng-if="current.type === 'query'">
<div class="tight-form-section">
<div class="gf-form-group" ng-if="current.type === 'query'">
<h5>Value groups/tags (Experimental feature)</h5>
<div class="tight-form last" ng-if="current.useTags">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 135px">
Tags query
</li>
<li>
<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="current.useTags">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 135px;">
Tag values query
</li>
<li>
<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item last">
<div class="gf-form">
<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form last" ng-if="current.useTags">
<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>
</div>
<div class="gf-form" ng-if="current.useTags">
<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>
</div>
</div>
<div class="editor-row">
<div class="tight-form-section">
<div class="gf-form-group">
<h5>Preview of values (shows max 20)</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" ng-repeat="option in current.options | limitTo: 20">
<div class="gf-form">
<span class="gf-form-label" ng-repeat="option in current.options | limitTo: 20">
{{option.text}}
</li>
</ul>
<div class="clearfix"></div>
</div>
</span>
</div>
</div>
</div>
<div class="editor-row" style="margin-top: 20px">
<div class="gf-form-button-row" style="margin-top: 20px">
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
</div>
</div>
</div>

8
public/app/partials/help_modal.html
Unescape View File

@ -32,6 +32,10 @@
<td><span class="label label-info">CTRL+S</span></td>
<td>Save dashboard</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+E</span></td>
<td>Export dashboard</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+H</span></td>
<td>Hide row controls</td>
@ -40,6 +44,10 @@
<td><span class="label label-info">CTRL+Z</span></td>
<td>Zoom out</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+I</span></td>
<td>Quick snapshot</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+O</span></td>
<td>Enable/Disable shared graph crosshair</td>

4
public/app/partials/panelgeneral.html
Unescape View File

@ -31,10 +31,6 @@
</div>
</div>
<br>
<br>
<br>
<panel-links-editor panel="ctrl.panel"></panel-links-editor>

67
public/app/partials/reset_password.html
Unescape View File

@ -1,11 +1,10 @@
<div class="container">
<div class="login-container container">
<div class="login-box">
<div class="login-box-logo">
<a href="login">
<img src="img/logo_transparent_200x75.png">
</a>
<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="login-inner-box">
@ -15,76 +14,50 @@
</button>
</div>
<form name="sendResetForm" class="login-form" ng-show="mode === 'send'">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 78px">
<strong>User</strong>
</li>
<li>
<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.userOrEmail' placeholder="email or username" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
<form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
<div class="gf-form">
<span class="gf-form-label width-7">User</span>
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
</div>
<div class="login-submit-button-row">
<button type="submit" class="btn" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
<div class="gf-form-button-row">
<button type="submit" class="btn btn-large" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
Send reset instructions
</button>
</div>
</form>
<h5 ng-if="mode === 'email-sent'" style="text-align: center; padding: 20px;">
<h5 style="text-align: center; padding: 20px;" ng-if="mode === 'email-sent'">
An email with a reset link as been sent to the email address, you should receive it shortly.
</h5>
<form name="resetForm" class="login-form" ng-show="mode === 'reset'">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 125px">
<strong>New Password</strong>
</li>
<li>
<input type="password" name="NewPassword" class="tight-form-input last" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" style="width: 207px" watch-change="formModel.newPassword = inputValue;">
</li>
</ul>
<div class="clearfix"></div>
<form name="resetForm" class="login-form gf-form-group" ng-show="mode === 'reset'">
<div class="gf-form">
<span class="gf-form-label width-10">New Password</span>
<input type="password" name="NewPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" watch-change="formModel.newPassword = inputValue;">
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 125px">
<strong>Confirm Password</strong>
</li>
<li>
<input type="password" name="ConfirmPassword" class="tight-form-input last" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password" style="width: 207px">
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form">
<span class="gf-form-label width-10">Confirm Password</span>
<input type="password" name="ConfirmPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password">
</div>
<div style="margin-left: 141px; width: 207px;">
<password-strength password="formModel.newPassword"></password-strength>
</div>
<div class="login-submit-button-row">
<div class="gf-form-button-row">
<button type="submit" class="btn" ng-click="submitReset();" ng-class="{'btn-inverse': !resetForm.$valid, 'btn-primary': resetForm.$valid}">
Reset Password
</button>
</div>
</form>
<div class="clearfix"></div>
</div>
<div class="row" style="margin-top: 40px">
<div class="row" style="margin-top: 20px">
<div class="text-center">
<a href="login">
Back to login
</a>
<a href="login">Back to login</a>
</div>
</div>
</div>
</div>

69
public/app/partials/roweditor.html
Unescape View File

@ -5,60 +5,45 @@
Row settings
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General']" data-title="{{tab}}">
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
<div class="row">
<div class="col-md-8">
<div class="page-heading">
<h5>Row details</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
Title
</li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model='row.title'></input>
</li>
<li class="tight-form-item">
Height
</li>
<li>
<input type="text" class="input-small tight-form-input" ng-model='row.height'></input>
</li>
<li class="tight-form-item last">
<label class="checkbox-label" for="row.showTitle">Show Title</label>
<input class="cr1" id="row.showTitle" type="checkbox" ng-model="row.showTitle" ng-checked="row.showTitle">
<label for="row.showTitle" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Height</span>
<input type="text" class="gf-form-input max-width-8" ng-model='row.height'></input>
<editor-checkbox text="Show Title" model="row.showTitle"></editor-checkbox>
</div>
</div>
<div class="section">
</div>
</div>
<div class="col-md-4">
<div class="page-heading">
<h5>Templating options</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
Repeat Row
</li>
<li>
<select class="input-small tight-form-input last" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
</div>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Repeat Row</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>

4
public/app/partials/valueSelectDropdown.html
Unescape View File

@ -1,5 +1,5 @@
<div class="variable-link-wrapper">
<a ng-click="vm.show()" class="variable-value-link tight-form-item">
<a ng-click="vm.show()" class="variable-value-link">
{{vm.linkText}}
<span ng-repeat="tag in vm.selectedTags" bs-tooltip='tag.valuesText' data-placement="bottom">
<span class="label-tag"tag-color-from-name="tag.text">
@ -10,7 +10,7 @@
<i class="fa fa-caret-down"></i>
</a>
<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
<input type="text" class="hidden-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
<div class="variable-options-wrapper">

4
public/sass/_variables.dark.scss
Unescape View File

@ -53,6 +53,10 @@ $page-bg: $dark-2;
$body-color: $gray-4;
$text-color: $gray-4;
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
// Links
// -------------------------
$link-color: darken($white,11%);

4
public/sass/_variables.light.scss
Unescape View File

@ -59,6 +59,10 @@ $page-bg: $white;
$body-color: $gray-1;
$text-color: $gray-1;
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
// Links
// -------------------------
$link-color: $gray-1;

1
public/sass/_variables.scss
Unescape View File

@ -218,3 +218,4 @@ $side-menu-width: 14rem;
// dashboard
$dashboard-padding: $spacer / 2;

11
public/sass/components/_dashboard.scss
Unescape View File

@ -271,17 +271,12 @@ div.flot-text {
}
.dashboard-header {
font-family: "grafana-icons";
font-size: 22px;
font-family: $headings-font-family;
font-size: $font-size-h2;
text-align: center;
span {
display: inline-block;
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
@include brand-bottom-border();
padding: 1.2rem .5rem .4rem .5rem;
}
}

15
public/sass/components/_gf-form.scss
Unescape View File

@ -9,12 +9,6 @@ $gf-form-label-margin: 0.25rem;
align-items: center;
text-align: left;
.checkbox-label {
display: inline;
cursor: pointer;
padding: 8px 7px 8px 4px;
}
.cr1 {
margin-left: 8px;
}
@ -58,6 +52,15 @@ $gf-form-label-margin: 0.25rem;
.gf-form-checkbox {
flex-shrink: 0;
padding: $input-padding-y $input-padding-x;
line-height: $input-line-height;
.checkbox-label {
display: inline;
cursor: pointer;
padding: $input-padding-y $input-padding-x;
line-height: $input-line-height;
}
}
.gf-form-input {

8
public/sass/components/_modals.scss
Unescape View File

@ -118,6 +118,8 @@
}
.share-modal-big-icon {
margin-bottom: 2rem;
.fa, .icon-gf {
font-size: 70px;
}
@ -147,3 +149,9 @@
text-overflow: ellipsis;
}
}
.modal-body {
.position-center {
display: inline-block;
}
}

27
public/sass/components/_submenu.scss
Unescape View File

@ -1,5 +1,5 @@
.submenu-controls {
margin: 10px 5px;
margin: 0 5px;
font-size: 16px;
}
@ -23,6 +23,7 @@
border: $panel-border;
margin-right: 10px;
display: inline-block;
float: left;
.fa-caret-down {
font-size: 75%;
@ -37,11 +38,35 @@
.label-tag {
margin: 0 5px;
}
padding: 8px 7px;
box-sizing: content-box;
display: inline-block;
font-weight: normal;
display: inline-block;
color: $text-color;
}
.submenu-item-label {
padding: 8px 0px 8px 7px;
box-sizing: content-box;
display: inline-block;
font-weight: normal;
display: inline-block;
}
.variable-link-wrapper {
display: inline-block;
position: relative;
.hidden-input {
padding: 8px 7px;
border: none;
margin: 0px;
background: transparent;
border-radius: 0;
border-right: 1px solid $tight-form-border;
}
}
.variable-value-dropdown {

22
public/sass/components/_tabbed_view.scss
Unescape View File

@ -1,19 +1,27 @@
.tabbed-view {
background-color: $page-bg;
background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
background-image: $page-gradient;
margin: -$dashboard-padding;
margin-bottom: $spacer*2;
padding: $spacer*3;
&.tabbed-view--panel-edit {
padding: 0;
.tabbed-view-header {
padding: 0;
background-color: $body-bg;
padding: 1.5em 1rem 0 1rem;
}
.gf-tabs-link.active {
background-color: $panel-bg;
}
}
}
.tabbed-view-header {
@include clearfix();
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
@include brand-bottom-border();
}
.tabbed-view-title {

5
public/sass/components/_tabs.scss
Unescape View File

@ -55,7 +55,7 @@
&:hover,
&:focus {
border-color: #F9952B;
border-color: rgba(216, 131, 40, 0.77);
color: $link-color;
}
@ -63,8 +63,7 @@
&.active:hover,
&.active:focus {
@include border-radius(3px);
border: 1px solid #F9952B;
background-color: transparent;
border-color: rgba(216, 131, 40, 0.77);
border-bottom: 1px solid $panel-bg;
color: $link-color;
}

1
public/sass/components/_tags.scss
Unescape View File

@ -25,6 +25,7 @@
padding: 2px 6px;
border-width: 1px;
border-style: solid;
box-shadow: 0 0 1px rgba($white,.2);
.icon-tag {
position: relative;
top: 1px;

7
public/sass/layout/_page.scss
Unescape View File

@ -33,12 +33,7 @@
justify-content: flex-end;
align-items: flex-end;
flex-wrap: wrap-reverse;
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
@include brand-bottom-border();
h1 {
font-style: italic;

9
public/sass/mixins/_mixins.scss
Unescape View File

@ -343,3 +343,12 @@
border-bottom: 0;
border-left: 2px solid transparent;
}
@mixin brand-bottom-border() {
border-image: $brand-gradient;
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
}

Write Preview
Loading…
Cancel
Save