public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: dashboard settings progress

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-12-11 12:13:45 +01:00
parent 511fa7dec1
commit 09cc60ffe4
6 changed files with 74 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
export interface IProps { export interface IProps {
model: any; model: any;
@@ -17,7 +17,7 @@ class EmptyListCTA extends Component<IProps, any> {
proTipTarget proTipTarget
} = this.props.model; } = this.props.model;
return ( return (
<div className="empty-list-cta p-t-2 p-b-1"> <div className="empty-list-cta">
<div className="empty-list-cta__title">{title}</div> <div className="empty-list-cta__title">{title}</div>
<a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a> <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a>
<div className="empty-list-cta__pro-tip"> <div className="empty-list-cta__pro-tip">
public/app/features/dashboard/settings/settings.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export class SettingsCtrl {
sections: any[] = [ sections: any[] = [
{title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"}, {title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"},
{title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"}, {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"},
{title: 'Templating', id: 'templating', icon: "fa fa-fw fa-dollar"}, {title: 'Variables', id: 'templating', icon: "fa fa-fw fa-dollar"},
{title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"}, {title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"},
{title: 'Versions', id: 'versions', icon: "fa fa-fw fa-history"}, {title: 'Versions', id: 'versions', icon: "fa fa-fw fa-history"},
{title: 'View JSON', id: 'view_json', icon: "fa fa-fw fa-code"}, {title: 'View JSON', id: 'view_json', icon: "fa fa-fw fa-code"},
public/app/features/templating/partials/editor.html
+60 -53
View File
@@ -1,64 +1,71 @@
<h3 class="dashboard-settings__header">Templating</h3> <h3 class="dashboard-settings__header">Variables</h3>
<div ng-controller="VariableEditorCtrl" ng-init="init()"> <div ng-controller="VariableEditorCtrl" ng-init="init()">
<div ng-if="mode === 'list'"> <div ng-if="mode === 'list'">
<div ng-if="variables.length === 0"> <div ng-if="variables.length === 0">
<em>No template variables defined</em> <div class="empty-list-cta">
<br /> <br /> <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">
<i class="gicon gicon-dashboard-new"></i>
Add variable
</a>
<div class="grafana-info-box">
<h5>
What does variables do?
</h5>
<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
the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
Checkout the
<a class="external-link" href="http://docs.grafana.org/reference/templating/" target="_blank">
Templating documentation
</a> for more information.
</div>
</div>
</div> </div>
<table class="filter-table filter-table--hover">
<thead>
<tr>
<th>Variable</th>
<th>Definition</th>
<th colspan="5"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="variable in variables">
<td style="width: 1%">
<span ng-click="edit(variable)" class="pointer template-variable">
${{variable.name}}
</span>
</td>
<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
{{variable.query}}
</td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td> <div ng-if="variables.length">
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td> <div class="page-action-bar">
<td style="width: 1%"> <div class="page-action-bar__spacer"></div>
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini"> <a type="button" class="btn btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i> New</a>
Duplicate </div>
</a>
</td>
<td style="width: 1%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-show="mode === 'help'"> <table class="filter-table filter-table--hover">
<div class="grafana-info-box col-lg-8"> <thead>
<h5>What does templating do?</h5> <tr>
<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application <th>Variable</th>
and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of <th>Definition</th>
the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. <th colspan="5"></th>
<br> </tr>
<br> </thead>
<tbody>
<tr ng-repeat="variable in variables">
<td style="width: 1%">
<span ng-click="edit(variable)" class="pointer template-variable">
${{variable.name}}
</span>
</td>
<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
{{variable.query}}
</td>
Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information. <td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
</p> <td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
</div> <td style="width: 1%">
</div> <a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
Duplicate
<div class="gf-form" ng-show="mode === 'list'"> </a>
<div class="gf-form-button-row"> </td>
<a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a> <td style="width: 1%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
public/sass/components/_empty_list_cta.scss
+11 -9
View File
@@ -1,21 +1,23 @@
.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;
border-radius: $border-radius;
} }
.empty-list-cta__title { .empty-list-cta__title {
padding-bottom: 30px; padding-bottom: 30px;
font-style: italic; font-style: italic;
} }
.empty-list-cta__button { .empty-list-cta__button {
margin-bottom: 50px; margin-bottom: 50px;
} }
.empty-list-cta__pro-tip { .empty-list-cta__pro-tip {
padding-bottom: 20px; padding-bottom: 1rem;
} }
.empty-list-cta__pro-tip-link { .empty-list-cta__pro-tip-link {
margin-left: 5px; margin-left: 5px;
} }
public/sass/components/_infobox.scss
-10
View File
@@ -1,13 +1,3 @@
// .grafana-info-box::before {
// content: "\f05a";
// font-family:'FontAwesome';
// position: absolute;
// top: -13px;
// left: -8px;
// font-size: 20px;
// color: $text-color;
// }
.grafana-info-box { .grafana-info-box {
position: relative; position: relative;
background: $info-box-background; background: $info-box-background;
public/sass/components/_navbar.scss
-2
View File
@@ -2,9 +2,7 @@
.navbar { .navbar {
position: relative; position: relative;
padding-left: $side-menu-width; padding-left: $side-menu-width;
// box-shadow: $navbarShadow;
z-index: $zindex-navbar-fixed; z-index: $zindex-navbar-fixed;
// background: $navbarBackground;
height: $navbarHeight; height: $navbarHeight;
padding-right: $spacer; padding-right: $spacer;
display: flex; display: flex;