IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: work on dashboard settings views

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-12-08 18:15:24 +01:00
parent 7a2e886e70
commit fbe9f759ad
12 changed files with 215 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,57 +1,59 @@
<h3 class="dashboard-settings__header">Annotations</h3>
<div ng-controller="AnnotationsEditorCtrl">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
Annotations
</h2>
<ul class="gf-tabs">
<li class="gf-tabs-item" >
<a class="gf-tabs-link" ng-click="ctrl.mode = 'list';" ng-class="{active: ctrl.mode === 'list'}">
Queries
</a>
</li>
<li class="gf-tabs-item" ng-show="ctrl.mode === 'edit'">
<a class="gf-tabs-link" ng-class="{active: ctrl.mode === 'edit'}">
Edit Query
</a>
</li>
<li class="gf-tabs-item" ng-show="ctrl.mode === 'new'">
<span class="active gf-tabs-link">New Query</span>
</li>
<!-- <div class="tabbed&#45;view&#45;header"> -->
<!-- <h2 class="tabbed&#45;view&#45;title"> -->
<!-- Annotations -->
<!-- </h2> -->
<!-- -->
<!-- <ul class="gf&#45;tabs"> -->
<!-- <li class="gf&#45;tabs&#45;item" > -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.mode = 'list';" ng&#45;class="{active: ctrl.mode === 'list'}"> -->
<!-- Queries -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item" ng&#45;show="ctrl.mode === 'edit'"> -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;class="{active: ctrl.mode === 'edit'}"> -->
<!-- Edit Query -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item" ng&#45;show="ctrl.mode === 'new'"> -->
<!-- <span class="active gf&#45;tabs&#45;link">New Query</span> -->
<!-- </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> -->
<li class="gf-tabs-item" >
<a class="gf-tabs-link" ng-click="ctrl.mode = 'help';" ng-class="{active: ctrl.mode === 'help'}">
Help
</a>
</li>
</ul>
<!-- <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> -->
<button class="tabbed-view-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="tabbed-view-body">
<div ng-show="ctrl.mode === 'help'">
<div class="grafana-info-box col-lg-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-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
</div>
</div>
<div class="editor-row row" ng-if="ctrl.mode === 'list'">
<div class="editor-row row">
<div ng-if="ctrl.annotations.length === 0">
<em>No annotation queries defined</em>
</div>
<table class="grafana-options-table">
<tr ng-repeat="annotation in ctrl.annotations">
<td style="width:90%" ng-hide="annotation.builtIn">
@ -79,67 +81,67 @@
</table>
</div>
<div class="gf-form" ng-show="ctrl.mode === 'list'">
<div class="gf-form">
<div class="gf-form-button-row">
<a type="button" class="btn gf-form-button btn-success" ng-click="ctrl.setupNew()"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
</div>
</div>
<div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'">
<div>
<div class="gf-form-group">
<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 class="gf-form-group">
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label="Enabled"
checked="ctrl.currentAnnotation.enable"
on-change="ctrl.annotationEnabledChange()"
label-class="width-7">
</gf-form-switch>
<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"
on-change="ctrl.annotationHiddenChanged()"
label-class="width-7">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-9">Color</label>
<span class="gf-form-label">
<color-picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color-picker>
</span>
</div>
</div>
</div>
</div>
<h5 class="section-heading">Query</h5>
<rebuild-on-change property="ctrl.currentDatasource">
<plugin-component type="annotations-query-ctrl">
</plugin-component>
</rebuild-on-change>
<div class="gf-form">
<div class="gf-form-button-row p-y-0">
<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button>
<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="annotations&#45;basic&#45;settings" ng&#45;if="ctrl.mode === 'edit' || ctrl.mode === 'new'"> -->
<!-- <div> -->
<!-- <div class="gf&#45;form&#45;group"> -->
<!-- <h5 class="section&#45;heading">General</h5> -->
<!-- <div class="gf&#45;form&#45;inline"> -->
<!-- <div class="gf&#45;form"> -->
<!-- <span class="gf&#45;form&#45;label width&#45;7">Name</span> -->
<!-- <input type="text" class="gf&#45;form&#45;input width&#45;20" ng&#45;model='ctrl.currentAnnotation.name' placeholder="name"></input> -->
<!-- </div> -->
<!-- <div class="gf&#45;form"> -->
<!-- <span class="gf&#45;form&#45;label width&#45;7">Data source</span> -->
<!-- <div class="gf&#45;form&#45;select&#45;wrapper"> -->
<!-- <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 class="gf&#45;form&#45;group"> -->
<!-- <div class="gf&#45;form&#45;inline"> -->
<!-- <gf&#45;form&#45;switch class="gf&#45;form" -->
<!-- label="Enabled" -->
<!-- checked="ctrl.currentAnnotation.enable" -->
<!-- on&#45;change="ctrl.annotationEnabledChange()" -->
<!-- label&#45;class="width&#45;7"> -->
<!-- </gf&#45;form&#45;switch> -->
<!-- <gf&#45;form&#45;switch class="gf&#45;form" -->
<!-- label="Hidden" -->
<!-- tooltip="Hides the annotation query toggle from showing at the top of the dashboard" -->
<!-- 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/dashnav/dashnav.html
View File

@ -43,13 +43,20 @@
<i class="fa fa-link"></i>
</button>
<button class="btn navbar-button" ng-click="ctrl.openSettings()" bs-tooltip="'Settings'" data-placement="bottom">
<button class="btn navbar-button" ng-click="ctrl.toggleSettings()" bs-tooltip="'Settings'" data-placement="bottom">
<i class="fa fa-cog"></i>
</button>
</div>
<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
<div class="navbar-buttons navbar-buttons--close">
<button class="btn navbar-button navbar-button--primary" ng-click="ctrl.toggleSettings()" bs-tooltip="'Close settings'" data-placement="bottom">
<i class="fa fa-remove"></i>
Close
</button>
</div>
</div>
<dashboard-search></dashboard-search>

2
public/app/features/dashboard/dashnav/dashnav.ts
View File

@ -32,7 +32,7 @@ export class DashNavCtrl {
}
}
openSettings() {
toggleSettings() {
let search = this.$location.search();
if (search.editview) {
delete search.editview;

2
public/app/features/dashboard/partials/settings.html
View File

@ -1,4 +1,4 @@
<h3 class="page-heading">General</h2>
<h3 class="dashboard-settings__header">General</h3>
<div class="gf-form-group">
<div class="gf-form">

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

@ -1,28 +1,20 @@
<div class="sidenav">
<aside class="sidenav__aside">
<h2>
<i class="fa fa-cog"></i>
Settings
</h2>
<aside class="dashboard-settings__aside">
<h2 class="dashboard-settings__aside-header">
<i class="fa fa-cog"></i>
Settings
</h2>
<ul class="edit-sidemenu">
<li ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections">
<a href="{{::section.url}}">
{{::section.title}}
</a>
</li>
</ul>
</aside>
<a href="{{::section.url}}" class="dashboard-settings__nav-item" ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections">
{{::section.title}}
</a>
</aside>
<div class="sidenav__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'">
</div>
<div class="sidenav__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
</div>
<div class="sidenav__content" ng-if="ctrl.viewId === 'templating'">
annotations
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'">
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'">
annotationus
</div>

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

@ -1,4 +1,4 @@
import {coreModule, appEvents} from 'app/core/core';
import {coreModule} from 'app/core/core';
import {DashboardModel} from '../dashboard_model';
import $ from 'jquery';
import _ from 'lodash';
@ -17,6 +17,9 @@ export class SettingsCtrl {
/** @ngInject */
constructor($scope, private $location, private $rootScope) {
// temp hack
$scope.dashboard = this.dashboard;
const params = this.$location.search();
const url = $location.path();

1
public/sass/_grafana.scss
View File

@ -88,7 +88,6 @@
@import "components/page_header";
@import "components/dashboard_settings";
@import "components/empty_list_cta";
@import "components/sidenav";
// PAGES

6
public/sass/_variables.dark.scss
View File

@ -189,7 +189,7 @@ $input-label-border-color: $gray-blue;
$input-invalid-border-color: lighten($red, 5%);
// Search
$search-shadow: 0 0 35px 0 $body-bg;
$search-shadow: 0 0 30px 0 $black;
$search-filter-box-bg: $gray-blue;
// Dropdowns
@ -226,10 +226,10 @@ $horizontalComponentOffset: 180px;
// -------------------------
$wellBackground: #131517;
$navbarHeight: 52px;
$navbarHeight: 55px;
$navbarBackgroundHighlight: $dark-3;
$navbarBackground: $panel-bg;
$navbarBorder: 1px solid $body-bg;
$navbarBorder: 1px solid $dark-3;
$navbarShadow: 0 0 20px black;
$navbarText: $gray-4;

45
public/sass/components/_dashboard_settings.scss
View File

@ -1,7 +1,8 @@
.dashboard-settings {
opacity: 0;
display: block;
padding: $spacer*2;
height: 100%;
display: flex;
flex-direction: row;
}
.dashboard-page--settings-opening {
@ -13,6 +14,44 @@
.dashboard-page--settings-open {
.dashboard-settings {
opacity: 1;
transition: opacity 250ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
}
.dashboard-settings__content {
flex-grow: 1;
min-width: 0;
height: 100%;
padding: 30px;
}
.dashboard-settings__aside {
padding: 30px 0 0 30px;
background: $search-filter-box-bg;
display: flex;
flex-direction: column;
}
.dashboard-settings__aside-header {
color: $text-muted;
font-size: $font-size-h3;
margin-bottom: 20px;
padding-right: 60px;
white-space: nowrap;
}
.dashboard-settings__header {
font-size: $font-size-h3;
margin-bottom: 20px;
}
.dashboard-settings__nav-item {
padding: 7px 12px;
color: $text-color;
@include left-brand-border;
&.active {
@include left-brand-border-gradient();
background: $page-bg;
}
}

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

@ -9,10 +9,26 @@
padding-right: $spacer;
display: flex;
flex-grow: 1;
border-bottom: 1px solid transparent;
transition: all 300ms ease-in-out;
}
background: $page-header-bg;
box-shadow: $page-header-shadow;
border-bottom: 1px solid $page-header-border-color;
.dashboard-page--settings-open {
.navbar {
background: $page-header-bg;
box-shadow: $search-shadow;
border-bottom: $navbarBorder;
}
.navbar-buttons--actions,
.navbar-page-btn .fa-caret-down,
.gf-timepicker-nav {
display: none;
}
.navbar-buttons--close {
display: flex;
}
}
.sidemenu-open {
@ -29,8 +45,9 @@
margin: 0;
color: darken($link-color, 5%);
font-size: $font-size-lg;
padding: 1rem 1rem 0.75rem 1rem;
padding-left: 1rem;
min-height: $navbarHeight;
line-height: $navbarHeight;
.fa-caret-down {
font-size: 60%;
@ -71,6 +88,10 @@
align-items: center;
justify-content: flex-end;
margin-right: $spacer;
&--close {
display: none;
}
}
.navbar__spacer {
@ -82,7 +103,7 @@
display: inline-block;
font-weight: $btn-font-weight;
padding: 8px 11px;
padding: 6px 11px;
line-height: 16px;
color: $text-muted;
border: 1px solid $navbar-button-border;
@ -98,7 +119,7 @@
}
&--add-panel {
padding: 5px 10px;
padding: 3px 10px;
.gicon {
font-size: 22px;
@ -106,7 +127,7 @@
}
&--tight {
padding: 9px 4px;
padding: 7px 4px;
.fa {
font-size: 14px;
@ -114,4 +135,8 @@
top: 2px;
}
}
&--primary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
}
}

15
public/sass/components/_sidenav.scss
View File

@ -1,15 +0,0 @@
.sidenav {
display: flex;
flex-direction: row;
}
.sidenav__content {
flex-grow: 1;
min-width: 0;
}
.sidenav__aside {
margin-right: $spacer*2;
}

2
public/sass/components/_view_states.scss
View File

@ -45,7 +45,7 @@
background: transparent;
transform: translate3d(-40px, 0, 0);
transition: all 1.5s ease-in-out 1s;
.icon-gf {
i {
opacity: 0;
transition: all 1.5s ease-in-out 1s;
}