IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: dashboard settings progress

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-12-11 13:04:06 +01:00
parent 8354c64ff5
commit 05ec7541c8
8 changed files with 121 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/features/annotations/editor_ctrl.ts
View File

@@ -26,7 +26,7 @@ export class AnnotationsEditorCtrl {
]; ];
/** @ngInject */ /** @ngInject */
constructor(private $scope, private datasourceSrv) { constructor($scope, private datasourceSrv) {
$scope.ctrl = this; $scope.ctrl = this;
this.mode = 'list'; this.mode = 'list';
@@ -62,7 +62,6 @@ export class AnnotationsEditorCtrl {
update() { update() {
this.reset(); this.reset();
this.mode = 'list'; this.mode = 'list';
this.$scope.broadcastRefresh();
} }
setupNew() { setupNew() {
@@ -74,28 +73,16 @@ export class AnnotationsEditorCtrl {
this.annotations.push(this.currentAnnotation); this.annotations.push(this.currentAnnotation);
this.reset(); this.reset();
this.mode = 'list'; this.mode = 'list';
this.$scope.broadcastRefresh();
this.$scope.dashboard.updateSubmenuVisibility();
} }
removeAnnotation(annotation) { removeAnnotation(annotation) {
var index = _.indexOf(this.annotations, annotation); var index = _.indexOf(this.annotations, annotation);
this.annotations.splice(index, 1); this.annotations.splice(index, 1);
this.$scope.dashboard.updateSubmenuVisibility();
this.$scope.broadcastRefresh();
} }
onColorChange(newColor) { onColorChange(newColor) {
this.currentAnnotation.iconColor = newColor; this.currentAnnotation.iconColor = newColor;
} }
annotationEnabledChange() {
this.$scope.broadcastRefresh();
}
annotationHiddenChanged() {
this.$scope.dashboard.updateSubmenuVisibility();
}
} }
coreModule.controller('AnnotationsEditorCtrl', AnnotationsEditorCtrl); coreModule.controller('AnnotationsEditorCtrl', AnnotationsEditorCtrl);

212
public/app/features/annotations/partials/editor.html
View File

@@ -1,147 +1,113 @@
<h3 class="dashboard-settings__header">Annotations</h3>
<div ng-controller="AnnotationsEditorCtrl"> <div ng-controller="AnnotationsEditorCtrl">
<h3 class="dashboard-settings__header">
<a ng-click="ctrl.setMode('list')">Annotations</a>
<span ng-show="ctrl.mode === 'new'">&gt; New</span>
<span ng-show="ctrl.mode === 'edit'">&gt; Edit</span>
</h3>
<!-- <div class="tabbed&#45;view&#45;header"> --> <div ng-if="ctrl.mode === 'list'">
<!-- <h2 class="tabbed&#45;view&#45;title"> --> <!-- empty list cta, there is always one built in query -->
<!-- Annotations --> <div ng-if="ctrl.annotations.length === 1">
<!-- </h2> --> <div class="empty-list-cta">
<!-- --> <div class="empty-list-cta__title">There are no custom annotation queries added yet</div>
<!-- <ul class="gf&#45;tabs"> --> <a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success">
<!-- <li class="gf&#45;tabs&#45;item" > --> <i class="gicon gicon-dashboard-new"></i>
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.mode = 'list';" ng&#45;class="{active: ctrl.mode === 'list'}"> --> Add Annotation Query
<!-- Queries --> </a>
<!-- </a> --> <div class="grafana-info-box">
<!-- </li> --> <h5>What are Annotations?</h5>
<!-- <li class="gf&#45;tabs&#45;item" ng&#45;show="ctrl.mode === 'edit'"> --> <p>
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;class="{active: ctrl.mode === 'edit'}"> --> Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons
<!-- Edit Query --> on all graph panels. When you hover over an annotation icon you can get event text &amp; tags for the event. You can add annotation events
<!-- </a> --> directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database.
<!-- </li> --> </p>
<!-- <li class="gf&#45;tabs&#45;item" ng&#45;show="ctrl.mode === 'new'"> --> Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
<!-- <span class="active gf&#45;tabs&#45;link">New Query</span> --> </div>
<!-- </li> -->
<!-- -->
<!-- <li class="gf&#45;tabs&#45;item" > -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.mode = 'help';" ng&#45;class="{active: ctrl.mode === 'help'}"> -->
<!-- Help -->
<!-- </a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- -->
<!-- <button class="tabbed&#45;view&#45;close&#45;btn" ng&#45;click="dismiss();"> -->
<!-- <i class="fa fa&#45;remove"></i> -->
<!-- </button> -->
<!-- </div> -->
<!-- <div ng&#45;show="ctrl.mode === 'help'"> -->
<!-- <div class="grafana&#45;info&#45;box col&#45;lg&#45;8"> -->
<!-- <h5>What are Annotations?</h5> -->
<!-- <p> -->
<!-- Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons -->
<!-- on all graph panels. When you hover over an annotation icon you can get title, tags, and text information for the event. -->
<!-- In the <i>Queries</i> tab you can add queries that return annotation events. -->
<!-- </p> -->
<!-- <p> -->
<!-- You can add annotations directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. -->
<!-- </p> -->
<!-- Checkout the <a class="external&#45;link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information. -->
<!-- </div> -->
<!-- </div> -->
<div class="editor-row row">
<div ng-if="ctrl.annotations.length === 0">
<em>No annotation queries defined</em>
</div> </div>
</div>
<table class="grafana-options-table"> <div class="page-action-bar" ng-if="ctrl.annotations.length > 1">
<div class="page-action-bar__spacer"></div>
<a type="button" class="btn btn-success" ng-click="ctrl.setupNew();"><i class="fa fa-plus" ></i> New</a>
</div>
<table class="filter-table">
<thead>
<tr>
<th>Query name</th>
<th>Data source</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="annotation in ctrl.annotations"> <tr ng-repeat="annotation in ctrl.annotations">
<td style="width:90%" ng-hide="annotation.builtIn"> <td style="width:90%" ng-hide="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
<i class="fa fa-comment" style="color:{{annotation.iconColor}}"></i> &nbsp; <i class="fa fa-comment" style="color:{{annotation.iconColor}}"></i> &nbsp;
{{annotation.name}} {{annotation.name}}
</td> </td>
<td style="width:90%" ng-show="annotation.builtIn"> <td style="width:90%" ng-show="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
<i class="fa fa-comment"></i> &nbsp; <i class="fa fa-comment"></i> &nbsp;
<em class="muted">{{annotation.name}} (Built-in)</em> <em class="muted">{{annotation.name}} (Built-in)</em>
</td> </td>
<td class="pointer" ng-click="ctrl.edit(annotation)">
{{annotation.datasource || 'Default'}}
</td>
<td style="width: 1%"><i ng-click="_.move(ctrl.annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td> <td style="width: 1%"><i ng-click="_.move(ctrl.annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="_.move(ctrl.annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td> <td style="width: 1%"><i ng-click="_.move(ctrl.annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%">
<a ng-click="ctrl.edit(annotation)" class="btn btn-inverse btn-mini">
<i class="fa fa-edit"></i>
Edit
</a>
</td>
<td style="width: 1%"> <td style="width: 1%">
<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn"> <a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</td> </td>
</tr> </tr>
</table> </tbody>
</div> </table>
</div>
<div class="gf-form"> <div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'">
<div class="gf-form-button-row"> <div class="gf-form-group">
<a type="button" class="btn gf-form-button btn-success" ng-click="ctrl.setupNew()"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a> <h5 class="section-heading">General</h5>
<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 width-20" ng-model='ctrl.currentAnnotation.name' placeholder="name"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Data source</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select>
</div>
</div>
</div> </div>
</div> </div>
<!-- <div class="annotations&#45;basic&#45;settings" ng&#45;if="ctrl.mode === 'edit' || ctrl.mode === 'new'"> --> <div class="gf-form-group">
<!-- <div> --> <div class="gf-form-inline">
<!-- <div class="gf&#45;form&#45;group"> --> <gf-form-switch class="gf-form" label="Enabled" checked="ctrl.currentAnnotation.enable" label-class="width-7">
<!-- <h5 class="section&#45;heading">General</h5> --> </gf-form-switch>
<!-- <div class="gf&#45;form&#45;inline"> --> <gf-form-switch class="gf-form" label="Hidden" tooltip="Hides the annotation query toggle from showing at the top of the dashboard" checked="ctrl.currentAnnotation.hide" label-class="width-7">
<!-- <div class="gf&#45;form"> --> </gf-form-switch>
<!-- <span class="gf&#45;form&#45;label width&#45;7">Name</span> --> <div class="gf-form">
<!-- <input type="text" class="gf&#45;form&#45;input width&#45;20" ng&#45;model='ctrl.currentAnnotation.name' placeholder="name"></input> --> <label class="gf-form-label width-9">Color</label>
<!-- </div> --> <span class="gf-form-label">
<!-- <div class="gf&#45;form"> --> <color-picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color-picker>
<!-- <span class="gf&#45;form&#45;label width&#45;7">Data source</span> --> </span>
<!-- <div class="gf&#45;form&#45;select&#45;wrapper"> --> </div>
<!-- <select class="gf&#45;form&#45;input" ng&#45;model="ctrl.currentAnnotation.datasource" ng&#45;options="f.name as f.name for f in ctrl.datasources" ng&#45;change="ctrl.datasourceChanged()"></select> --> </div>
<!-- </div> --> </div>
<!-- </div> -->
<!-- </div> --> <h5 class="section-heading">Query</h5>
<!-- </div> --> <rebuild-on-change property="ctrl.currentDatasource">
<!-- --> <plugin-component type="annotations-query-ctrl">
<!-- <div class="gf&#45;form&#45;group"> --> </plugin-component>
<!-- <div class="gf&#45;form&#45;inline"> --> </rebuild-on-change>
<!-- <gf&#45;form&#45;switch class="gf&#45;form" -->
<!-- label="Enabled" --> <div class="gf-form">
<!-- checked="ctrl.currentAnnotation.enable" --> <div class="gf-form-button-row p-y-0">
<!-- on&#45;change="ctrl.annotationEnabledChange()" --> <button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button>
<!-- label&#45;class="width&#45;7"> --> <button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button>
<!-- </gf&#45;form&#45;switch> --> </div>
<!-- <gf&#45;form&#45;switch class="gf&#45;form" --> </div>
<!-- label="Hidden" --> </div>
<!-- tooltip="Hides the annotation query toggle from showing at the top of the dashboard" --> </div>
<!-- checked="ctrl.currentAnnotation.hide" -->
<!-- on&#45;change="ctrl.annotationHiddenChanged()" -->
<!-- label&#45;class="width&#45;7"> -->
<!-- </gf&#45;form&#45;switch> -->
<!-- <div class="gf&#45;form"> -->
<!-- <label class="gf&#45;form&#45;label width&#45;9">Color</label> -->
<!-- <span class="gf&#45;form&#45;label"> -->
<!-- <color&#45;picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color&#45;picker> -->
<!-- </span> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- -->
<!-- <h5 class="section&#45;heading">Query</h5> -->
<!-- <rebuild&#45;on&#45;change property="ctrl.currentDatasource"> -->
<!-- <plugin&#45;component type="annotations&#45;query&#45;ctrl"> -->
<!-- </plugin&#45;component> -->
<!-- </rebuild&#45;on&#45;change> -->
<!-- -->
<!-- <div class="gf&#45;form"> -->
<!-- <div class="gf&#45;form&#45;button&#45;row p&#45;y&#45;0"> -->
<!-- <button ng&#45;show="ctrl.mode === 'new'" type="button" class="btn gf&#45;form&#45;button btn&#45;success" ng&#45;click="ctrl.add()">Add</button> -->
<!-- <button ng&#45;show="ctrl.mode === 'edit'" type="button" class="btn btn&#45;success pull&#45;left" ng&#45;click="ctrl.update()">Update</button> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->

9
public/app/features/dashboard/settings/settings.ts
View File

@@ -20,9 +20,9 @@ export class SettingsCtrl {
]; ];
/** @ngInject */ /** @ngInject */
constructor($scope, private $location, private $rootScope) { constructor(private $scope, private $location, private $rootScope) {
// temp hack // temp hack
$scope.dashboard = this.dashboard; this.$scope.dashboard = this.dashboard;
const params = this.$location.search(); const params = this.$location.search();
const url = $location.path(); const url = $location.path();
@@ -35,6 +35,11 @@ export class SettingsCtrl {
this.viewId = params.editview; this.viewId = params.editview;
$rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope); $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
this.$scope.$on('$destroy', () => {
this.dashboard.updateSubmenuVisibility();
this.$rootScope.$broadcast("refresh");
});
} }
onRouteUpdated() { onRouteUpdated() {

6
public/app/features/templating/editor_ctrl.ts
View File

@@ -1,5 +1,3 @@
///<reference path="../../headers/common.d.ts" />
import _ from 'lodash'; import _ from 'lodash';
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import {variableTypes} from './variable'; import {variableTypes} from './variable';
@@ -45,6 +43,10 @@ export class VariableEditorCtrl {
}); });
}; };
$scope.setMode = function(mode) {
$scope.mode = mode;
};
$scope.add = function() { $scope.add = function() {
if ($scope.isValid()) { if ($scope.isValid()) {
variableSrv.addVariable($scope.current); variableSrv.addVariable($scope.current);

20
public/app/features/templating/partials/editor.html
View File

@@ -1,19 +1,22 @@
<h3 class="dashboard-settings__header">Variables</h3>
<div ng-controller="VariableEditorCtrl" ng-init="init()"> <div ng-controller="VariableEditorCtrl" ng-init="init()">
<h3 class="dashboard-settings__header">
<a ng-click="setMode('list')">Variables</a>
<span ng-show="mode === 'new'">&gt; New</span>
<span ng-show="mode === 'edit'">&gt; Edit</span>
</h3>
<div ng-if="mode === 'list'"> <div ng-if="mode === 'list'">
<div ng-if="variables.length === 0"> <div ng-if="variables.length === 0">
<div class="empty-list-cta"> <div class="empty-list-cta">
<div class="empty-list-cta__title">There are no template variables added yet</div> <div class="empty-list-cta__title">There are no template variables added yet</div>
<a ng-click="mode = 'new';" class="empty-list-cta__button btn btn-xlarge btn-success"> <a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-success">
<i class="gicon gicon-dashboard-new"></i> <i class="gicon gicon-dashboard-new"></i>
Add variable Add variable
</a> </a>
<div class="grafana-info-box"> <div class="grafana-info-box">
<h5> <h5>What does variables do?</h5>
What does variables do?
</h5>
<p>Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names <p>Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names
in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of 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. the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
@@ -29,7 +32,7 @@
<div ng-if="variables.length"> <div ng-if="variables.length">
<div class="page-action-bar"> <div class="page-action-bar">
<div class="page-action-bar__spacer"></div> <div class="page-action-bar__spacer"></div>
<a type="button" class="btn btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i> New</a> <a type="button" class="btn btn-success" ng-click="setMode('new');"><i class="fa fa-plus" ></i> New</a>
</div> </div>
<table class="filter-table filter-table--hover"> <table class="filter-table filter-table--hover">
@@ -50,7 +53,6 @@
<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width"> <td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
{{variable.query}} {{variable.query}}
</td> </td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td> <td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td> <td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%"> <td style="width: 1%">
@@ -70,7 +72,7 @@
</div> </div>
<form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form"> <form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
<h5 class="section-heading">Variable</h5> <h5 class="section-heading">General</h5>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-19"> <div class="gf-form max-width-19">

2
public/sass/_variables.scss
View File

@@ -199,11 +199,11 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// Try to avoid customizing these :) // Try to avoid customizing these :)
$zindex-dropdown: 1000; $zindex-dropdown: 1000;
$zindex-navbar-fixed: 1020; $zindex-navbar-fixed: 1020;
$zindex-sidemenu: 1025;
$zindex-tooltip: 1030; $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;
// Buttons // Buttons
// //

11
public/sass/components/_empty_list_cta.scss
View File

@@ -1,8 +1,13 @@
.empty-list-cta { .empty-list-cta {
background-color: $search-filter-box-bg; background-color: $search-filter-box-bg;
text-align: center; text-align: center;
padding: 2rem 2rem 1rem 2rem; padding: 2rem;
border-radius: $border-radius; border-radius: $border-radius;
.grafana-info-box {
max-width: 700px;
margin: 0 auto;
}
} }
.empty-list-cta__title { .empty-list-cta__title {
@@ -14,10 +19,6 @@
margin-bottom: 50px; margin-bottom: 50px;
} }
.empty-list-cta__pro-tip {
padding-bottom: 1rem;
}
.empty-list-cta__pro-tip-link { .empty-list-cta__pro-tip-link {
margin-left: 5px; margin-left: 5px;
} }

3
public/sass/components/_navbar.scss
View File

@@ -147,7 +147,8 @@
.sidemenu-open { .sidemenu-open {
.navbar { .navbar {
margin-left: 15px; padding-left: 15px;
margin-left: 0;
} }
} }