Skip to content

N
nexpie-grafana-theme
Commit 1e5983b4 by Torkel Ödegaard
Options

Merge branch 'develop' into develop-settings

parents fbe9f759 47ecbbab
Showing with 103 additions and 56 deletions
public/app/core/components/manage_dashboards/manage_dashboards.ts
...@@ -134,12 +134,12 @@ export class ManageDashboardsCtrl { ...@@ -134,12 +134,12 @@ export class ManageDashboardsCtrl {
const selectedDashboards = this.getDashboardsToMove(); const selectedDashboards = this.getDashboardsToMove();
const template = '<move-to-folder-modal dismiss="dismiss()" ' + const template = '<move-to-folder-modal dismiss="dismiss()" ' +
'dashboards="model.dashboards" after-save="model.afterSave()">' + 'dashboards="model.dashboards" from-folder-id="model.fromFolderId" after-save="model.afterSave()">' +
'</move-to-folder-modal>`'; '</move-to-folder-modal>`';
appEvents.emit('show-modal', { appEvents.emit('show-modal', {
templateHtml: template, templateHtml: template,
modalClass: 'modal--narrow', modalClass: 'modal--narrow',
model: { dashboards: selectedDashboards, afterSave: this.getDashboards.bind(this) } model: { dashboards: selectedDashboards, fromFolderId: this.folderId ? Number(this.folderId) : 0, afterSave: this.getDashboards.bind(this) }
}); });
} }
......
public/app/features/dashboard/dashboardLoaderSrv.js
...@@ -43,6 +43,13 @@ function (angular, moment, _, $, kbn, dateMath, impressionSrv) { ...@@ -43,6 +43,13 @@ function (angular, moment, _, $, kbn, dateMath, impressionSrv) {
}); });
} else { } else {
promise = backendSrv.getDashboard($routeParams.type, $routeParams.slug) promise = backendSrv.getDashboard($routeParams.type, $routeParams.slug)
.then(result => {
if (result.meta.isFolder) {
$rootScope.appEvent("alert-error", ['Dashboard not found']);
throw new Error("Dashboard not found");
}
return result;
})
.catch(function() { .catch(function() {
return self._dashboardLoadFailed("Not found"); return self._dashboardLoadFailed("Not found");
}); });
......
public/app/features/dashboard/folder_picker/picker.ts
...@@ -5,9 +5,10 @@ import _ from 'lodash'; ...@@ -5,9 +5,10 @@ import _ from 'lodash';
export class FolderPickerCtrl { export class FolderPickerCtrl {
initialTitle: string; initialTitle: string;
initialFolderId: number; initialFolderId?: number;
labelClass: string; labelClass: string;
onChange: any; onChange: any;
onLoad: any;
rootName = 'Root'; rootName = 'Root';
folder: any; folder: any;
...@@ -17,12 +18,19 @@ export class FolderPickerCtrl { ...@@ -17,12 +18,19 @@ export class FolderPickerCtrl {
this.labelClass = "width-7"; this.labelClass = "width-7";
} }
if (this.initialFolderId > 0) { if (this.initialFolderId && this.initialFolderId > 0) {
this.getOptions('').then(result => { this.getOptions('').then(result => {
this.folder = _.find(result, {value: this.initialFolderId}); this.folder = _.find(result, {value: this.initialFolderId});
this.onFolderLoad();
}); });
} else { } else {
if (this.initialTitle) {
this.folder = {text: this.initialTitle, value: null}; this.folder = {text: this.initialTitle, value: null};
} else {
this.folder = {text: this.rootName, value: 0};
}
this.onFolderLoad();
} }
} }
...@@ -33,8 +41,12 @@ export class FolderPickerCtrl { ...@@ -33,8 +41,12 @@ export class FolderPickerCtrl {
}; };
return this.backendSrv.search(params).then(result => { return this.backendSrv.search(params).then(result => {
if (query === "") { if (query === '' ||
result.unshift({title: this.rootName, value: 0}); query.toLowerCase() === "r" ||
query.toLowerCase() === "ro" ||
query.toLowerCase() === "roo" ||
query.toLowerCase() === "root") {
result.unshift({title: this.rootName, id: 0});
} }
return _.map(result, item => { return _.map(result, item => {
...@@ -43,6 +55,12 @@ export class FolderPickerCtrl { ...@@ -43,6 +55,12 @@ export class FolderPickerCtrl {
}); });
} }
onFolderLoad() {
if (this.onLoad) {
this.onLoad({$folder: {id: this.folder.value, title: this.folder.text}});
}
}
onFolderChange(option) { onFolderChange(option) {
this.onChange({$folder: {id: option.value, title: option.text}}); this.onChange({$folder: {id: option.value, title: option.text}});
} }
...@@ -69,11 +87,12 @@ export function folderPicker() { ...@@ -69,11 +87,12 @@ export function folderPicker() {
bindToController: true, bindToController: true,
controllerAs: 'ctrl', controllerAs: 'ctrl',
scope: { scope: {
initialTitle: "<", initialTitle: '<',
initialFolderId: '<', initialFolderId: '<',
labelClass: '@', labelClass: '@',
rootName: '@', rootName: '@',
onChange: '&' onChange: '&',
onLoad: '&'
} }
}; };
} }
......
public/app/features/dashboard/move_to_folder_modal/move_to_folder.html
...@@ -15,7 +15,8 @@ ...@@ -15,7 +15,8 @@
<div class="p-t-2"> <div class="p-t-2">
<div class="gf-form"> <div class="gf-form">
<folder-picker initial-title="Choose" <folder-picker
on-load="ctrl.onFolderChange($folder)"
on-change="ctrl.onFolderChange($folder)" on-change="ctrl.onFolderChange($folder)"
label-class="width-7"> label-class="width-7">
</folder-picker> </folder-picker>
......
public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts
...@@ -7,6 +7,7 @@ export class MoveToFolderCtrl { ...@@ -7,6 +7,7 @@ export class MoveToFolderCtrl {
folder: any; folder: any;
dismiss: any; dismiss: any;
afterSave: any; afterSave: any;
fromFolderId: number;
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private $q) {} constructor(private backendSrv, private $q) {}
...@@ -16,10 +17,16 @@ export class MoveToFolderCtrl { ...@@ -16,10 +17,16 @@ export class MoveToFolderCtrl {
} }
save() { save() {
if (this.folder.id === this.fromFolderId) {
appEvents.emit('alert-error', ['Dashboard(s) already belong to this folder']);
return;
}
const promises = []; const promises = [];
for (let dash of this.dashboards) { for (let dash of this.dashboards) {
const promise = this.backendSrv.get('/api/dashboards/' + dash).then(fullDash => { const promise = this.backendSrv.get('/api/dashboards/' + dash).then(fullDash => {
const model = new DashboardModel(fullDash.dashboard, fullDash.meta); const model = new DashboardModel(fullDash.dashboard, fullDash.meta);
model.folderId = this.folder.id; model.folderId = this.folder.id;
model.meta.folderId = this.folder.id; model.meta.folderId = this.folder.id;
model.meta.folderTitle = this.folder.title; model.meta.folderTitle = this.folder.title;
...@@ -53,6 +60,7 @@ export function moveToFolderModal() { ...@@ -53,6 +60,7 @@ export function moveToFolderModal() {
scope: { scope: {
dismiss: "&", dismiss: "&",
dashboards: "=", dashboards: "=",
fromFolderId: '<',
afterSave: "&" afterSave: "&"
} }
}; };
......
public/app/features/dashboard/partials/settings.html
...@@ -33,6 +33,23 @@ ...@@ -33,6 +33,23 @@
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<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> <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> </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 ng-if="!ctrl.dashboard.meta.isFolder"
initial-folder-id="ctrl.dashboard.folderId"
on-change="ctrl.onFolderChange($folder)"
label-class="width-7">
</folder-picker>
</div> </div>
<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-11"> <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-11">
</gf-form-switch> </gf-form-switch>
......
public/app/features/dashboard/save_as_modal.ts
...@@ -22,7 +22,7 @@ const template = ` ...@@ -22,7 +22,7 @@ const template = `
<input type="text" class="gf-form-input" ng-model="ctrl.clone.title" give-focus="true" required> <input type="text" class="gf-form-input" ng-model="ctrl.clone.title" give-focus="true" required>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<folder-picker initial-title="ctrl.folderTitle" <folder-picker initial-folder-id="ctrl.folderId"
on-change="ctrl.onFolderChange($folder)" on-change="ctrl.onFolderChange($folder)"
label-class="width-7"> label-class="width-7">
</folder-picker> </folder-picker>
...@@ -39,7 +39,7 @@ const template = ` ...@@ -39,7 +39,7 @@ const template = `
export class SaveDashboardAsModalCtrl { export class SaveDashboardAsModalCtrl {
clone: any; clone: any;
folderTitle: any; folderId: any;
dismiss: () => void; dismiss: () => void;
/** @ngInject */ /** @ngInject */
...@@ -50,7 +50,7 @@ export class SaveDashboardAsModalCtrl { ...@@ -50,7 +50,7 @@ export class SaveDashboardAsModalCtrl {
this.clone.title += ' Copy'; this.clone.title += ' Copy';
this.clone.editable = true; this.clone.editable = true;
this.clone.hideControls = false; this.clone.hideControls = false;
this.folderTitle = dashboard.meta.folderTitle || 'Root'; this.folderId = dashboard.folderId;
// remove alerts if source dashboard is already persisted // remove alerts if source dashboard is already persisted
// do not want to create alert dupes // do not want to create alert dupes
......
public/app/features/dashboard/view_state_srv.ts
...@@ -75,7 +75,7 @@ export class DashboardViewState { ...@@ -75,7 +75,7 @@ export class DashboardViewState {
} }
// remember if editStateChanged // remember if editStateChanged
this.editStateChanged = state.edit !== this.state.edit; this.editStateChanged = (state.edit || false) !== (this.state.edit || false);
_.extend(this.state, state); _.extend(this.state, state);
this.dashboard.meta.fullscreen = this.state.fullscreen; this.dashboard.meta.fullscreen = this.state.fullscreen;
......
public/app/features/panel/panel_ctrl.ts
...@@ -52,12 +52,9 @@ export class PanelCtrl { ...@@ -52,12 +52,9 @@ export class PanelCtrl {
this.events.emit('panel-teardown'); this.events.emit('panel-teardown');
this.events.removeAllListeners(); this.events.removeAllListeners();
}); });
this.calculatePanelHeight();
} }
init() { init() {
this.events.on('panel-size-changed', this.onSizeChanged.bind(this));
this.events.emit('panel-initialized'); this.events.emit('panel-initialized');
this.publishAppEvent('panel-initialized', {scope: this.$scope}); this.publishAppEvent('panel-initialized', {scope: this.$scope});
} }
...@@ -184,13 +181,6 @@ export class PanelCtrl { ...@@ -184,13 +181,6 @@ export class PanelCtrl {
this.events.emit('render', payload); this.events.emit('render', payload);
} }
private onSizeChanged() {
this.calculatePanelHeight();
this.$timeout(() => {
this.render();
}, 100);
}
duplicate() { duplicate() {
this.dashboard.duplicatePanel(this.panel); this.dashboard.duplicatePanel(this.panel);
this.$timeout(() => { this.$timeout(() => {
......
public/app/features/panel/panel_directive.ts
...@@ -53,7 +53,7 @@ var panelTemplate = ` ...@@ -53,7 +53,7 @@ var panelTemplate = `
</div> </div>
`; `;
module.directive('grafanaPanel', function($rootScope, $document) { module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
return { return {
restrict: 'E', restrict: 'E',
template: panelTemplate, template: panelTemplate,
...@@ -73,7 +73,6 @@ module.directive('grafanaPanel', function($rootScope, $document) { ...@@ -73,7 +73,6 @@ module.directive('grafanaPanel', function($rootScope, $document) {
var lastHasAlertRule = false; var lastHasAlertRule = false;
var lastAlertState; var lastAlertState;
var hasAlertRule; var hasAlertRule;
var lastHeight = 0;
function mouseEnter() { function mouseEnter() {
panelContainer.toggleClass('panel-hover-highlight', true); panelContainer.toggleClass('panel-hover-highlight', true);
...@@ -90,7 +89,6 @@ module.directive('grafanaPanel', function($rootScope, $document) { ...@@ -90,7 +89,6 @@ module.directive('grafanaPanel', function($rootScope, $document) {
if (panelScrollbar) { if (panelScrollbar) {
panelScrollbar.update(); panelScrollbar.update();
} }
lastHeight = ctrl.height;
} }
// set initial transparency // set initial transparency
...@@ -106,11 +104,19 @@ module.directive('grafanaPanel', function($rootScope, $document) { ...@@ -106,11 +104,19 @@ module.directive('grafanaPanel', function($rootScope, $document) {
} }
}); });
ctrl.events.on('render', () => { ctrl.events.on('panel-size-changed', () => {
if (lastHeight !== ctrl.height) { ctrl.calculatePanelHeight();
panelHeightUpdated(); panelHeightUpdated();
} $timeout(() => {
ctrl.render();
});
});
// set initial height
ctrl.calculatePanelHeight();
panelHeightUpdated();
ctrl.events.on('render', () => {
if (transparentLastState !== ctrl.panel.transparent) { if (transparentLastState !== ctrl.panel.transparent) {
panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true); panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true);
transparentLastState = ctrl.panel.transparent; transparentLastState = ctrl.panel.transparent;
......
public/app/features/panel/panel_header.ts
...@@ -84,7 +84,6 @@ function panelHeader($compile) { ...@@ -84,7 +84,6 @@ function panelHeader($compile) {
restrict: 'E', restrict: 'E',
template: template, template: template,
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
let menuElem = elem.find('.panel-menu'); let menuElem = elem.find('.panel-menu');
let menuScope; let menuScope;
let isDragged; let isDragged;
......
public/app/plugins/panel/permissionlist/editor.html
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Options</h5> <h5 class="section-heading">Options</h5>
<div class="gf-form"> <div class="gf-form">
<folder-picker root-name="All" <folder-picker initial-folder-id="ctrl.panel.folderId"
initial-folder-id="ctrl.panel.folderId"
on-change="ctrl.onFolderChange($folder)" on-change="ctrl.onFolderChange($folder)"
label-class="width-6"> label-class="width-6">
</folder-picker> </folder-picker>
......
public/sass/_variables.dark.scss
...@@ -21,7 +21,10 @@ $gray-4: #D8D9DA; ...@@ -21,7 +21,10 @@ $gray-4: #D8D9DA;
$gray-5: #ECECEC; $gray-5: #ECECEC;
$gray-6: #f4f5f8; $gray-6: #f4f5f8;
$gray-7: #fbfbfb; $gray-7: #fbfbfb;
$gray-blue: #292a2d;
// $gray-blue: #292a2d;
$gray-blue: #212327;
$input-black: #09090B;
$white: #fff; $white: #fff;
...@@ -175,7 +178,7 @@ $btn-drag-image: '../img/grab_dark.svg'; ...@@ -175,7 +178,7 @@ $btn-drag-image: '../img/grab_dark.svg';
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $black; $input-bg: $input-black;
$input-bg-disabled: $dark-3; $input-bg-disabled: $dark-3;
$input-color: $gray-4; $input-color: $gray-4;
...@@ -185,7 +188,7 @@ $input-border-focus: $input-border-color !default; ...@@ -185,7 +188,7 @@ $input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: $gray-1 !default; $input-color-placeholder: $gray-1 !default;
$input-label-bg: $gray-blue; $input-label-bg: $gray-blue;
$input-label-border-color: $gray-blue; $input-label-border-color: $dark-3;
$input-invalid-border-color: lighten($red, 5%); $input-invalid-border-color: lighten($red, 5%);
// Search // Search
......
public/sass/_variables.scss
...@@ -89,9 +89,9 @@ $font-size-root: 14px !default; ...@@ -89,9 +89,9 @@ $font-size-root: 14px !default;
$font-size-base: 13px !default; $font-size-base: 13px !default;
$font-size-lg: 18px !default; $font-size-lg: 18px !default;
$font-size-md: 15px !default; $font-size-md: 14px !default;
$font-size-sm: 11px !default; $font-size-sm: 12px !default;
$font-size-xs: 9px !default; $font-size-xs: 10px !default;
$line-height-base: 1.5 !default; $line-height-base: 1.5 !default;
$font-weight-semi-bold: 500; $font-weight-semi-bold: 500;
...@@ -135,9 +135,9 @@ $list-inline-padding: 5px !default; ...@@ -135,9 +135,9 @@ $list-inline-padding: 5px !default;
$line-height-lg: (4 / 3) !default; $line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default; $line-height-sm: 1.5 !default;
$border-radius: 0.2rem !default; $border-radius: 3px !default;
$border-radius-lg: 0.3rem !default; $border-radius-lg: 5px !default;
$border-radius-sm: 0.1rem !default; $border-radius-sm: 2px!default;
$caret-width: .3em !default; $caret-width: .3em !default;
$caret-width-lg: $caret-width !default; $caret-width-lg: $caret-width !default;
...@@ -162,7 +162,7 @@ $table-sm-cell-padding: .3rem !default; ...@@ -162,7 +162,7 @@ $table-sm-cell-padding: .3rem !default;
// Forms // Forms
$input-padding-x: 10px !default; $input-padding-x: 10px !default;
$input-padding-y: 8px !default; $input-padding-y: 8px !default;
$input-line-height: 19px !default; $input-line-height: 18px !default;
$input-btn-border-width: 1px; $input-btn-border-width: 1px;
$input-border-radius: 0 $border-radius $border-radius 0 !default; $input-border-radius: 0 $border-radius $border-radius 0 !default;
...@@ -203,9 +203,7 @@ $zindex-tooltip: 1030; ...@@ -203,9 +203,7 @@ $zindex-tooltip: 1030;
$zindex-modal-backdrop: 1040; $zindex-modal-backdrop: 1040;
$zindex-modal: 1050; $zindex-modal: 1050;
$zindex-typeahead: 1060; $zindex-typeahead: 1060;
$zindex-sidemenu : $zindex-navbar-fixed + 5; $zindex-sidemenu: $zindex-navbar-fixed;
// Buttons // Buttons
// //
......
public/sass/components/_gf-form.scss
...@@ -64,7 +64,6 @@ $input-border: 1px solid $input-border-color; ...@@ -64,7 +64,6 @@ $input-border: 1px solid $input-border-color;
.gf-form-label { .gf-form-label {
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
flex-shrink: 0; flex-shrink: 0;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
...@@ -72,8 +71,8 @@ $input-border: 1px solid $input-border-color; ...@@ -72,8 +71,8 @@ $input-border: 1px solid $input-border-color;
display: block; display: block;
border: $input-btn-border-width solid $input-label-border-color; border: $input-btn-border-width solid $input-label-border-color;
@include border-radius($label-border-radius-sm); border-right: none;
border-radius: $label-border-radius;
&--grow { &--grow {
flex-grow: 1; flex-grow: 1;
...@@ -91,6 +90,7 @@ $input-border: 1px solid $input-border-color; ...@@ -91,6 +90,7 @@ $input-border: 1px solid $input-border-color;
margin: 0; margin: 0;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
border-left: none;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
} }
...@@ -116,14 +116,14 @@ $input-border: 1px solid $input-border-color; ...@@ -116,14 +116,14 @@ $input-border: 1px solid $input-border-color;
width: 100%; width: 100%;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
font-size: $font-size-base; font-size: $font-size-md;
line-height: $input-line-height; line-height: $input-line-height;
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
background-image: none; background-image: none;
background-clip: padding-box; background-clip: padding-box;
border: $input-border; border: $input-border;
@include border-radius($input-border-radius-sm); border-radius: $input-border-radius;
@include box-shadow($input-box-shadow); @include box-shadow($input-box-shadow);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -276,6 +276,7 @@ $input-border: 1px solid $input-border-color; ...@@ -276,6 +276,7 @@ $input-border: 1px solid $input-border-color;
background-color: $input-bg; background-color: $input-bg;
padding-right: $input-padding-x; padding-right: $input-padding-x;
border: $input-border; border: $input-border;
border-radius: $input-border-radius;
&::after { &::after {
position: absolute; position: absolute;
......
public/sass/components/_switch.scss
$switch-border-radius: 1rem;
$switch-width: 3.5rem;
$switch-height: 1.5rem;
/* ============================================================ /* ============================================================
SWITCH 3 - YES NO SWITCH 3 - YES NO
============================================================ */ ============================================================ */
...@@ -27,8 +23,10 @@ $switch-height: 1.5rem; ...@@ -27,8 +23,10 @@ $switch-height: 1.5rem;
outline: none; outline: none;
user-select: none; user-select: none;
width: 100%; width: 100%;
height: 2.65rem; height: 37px;
background-color: $page-bg; background: $input-bg;
border: 1px solid $input-border-color;
border-left: none;
} }
input + label::before, input + label::after { input + label::before, input + label::after {
...@@ -47,6 +45,7 @@ $switch-height: 1.5rem; ...@@ -47,6 +45,7 @@ $switch-height: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
border-radius: $input-border-radius;
} }
&:hover { &:hover {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment