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 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

4
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
View File

@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component } from 'react';
export interface IProps {
model: any;
@@ -17,7 +17,7 @@ class EmptyListCTA extends Component<IProps, any> {
proTipTarget
} = this.props.model;
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>
<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">

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

@@ -11,7 +11,7 @@ export class SettingsCtrl {
sections: any[] = [
{title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"},
{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: 'Versions', id: 'versions', icon: "fa fa-fw fa-history"},
{title: 'View JSON', id: 'view_json', icon: "fa fa-fw fa-code"},

113
public/app/features/templating/partials/editor.html
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-if="mode === 'list'">
<div ng-if="variables.length === 0">
<em>No template variables defined</em>
<br /> <br />
<div class="empty-list-cta">
<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>
<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>
<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%">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
Duplicate
</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-if="variables.length">
<div class="page-action-bar">
<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>
</div>
<div ng-show="mode === 'help'">
<div class="grafana-info-box col-lg-8">
<h5>What does templating do?</h5>
<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
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
the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
<br>
<br>
<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>
Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
</p>
</div>
</div>
<div class="gf-form" ng-show="mode === 'list'">
<div class="gf-form-button-row">
<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%"><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%">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
Duplicate
</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>

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

@@ -1,21 +1,23 @@
.empty-list-cta {
background-color: $search-filter-box-bg;
text-align: center;
.empty-list-cta {
background-color: $search-filter-box-bg;
text-align: center;
padding: 2rem 2rem 1rem 2rem;
border-radius: $border-radius;
}
.empty-list-cta__title {
padding-bottom: 30px;
font-style: italic;
padding-bottom: 30px;
font-style: italic;
}
.empty-list-cta__button {
margin-bottom: 50px;
margin-bottom: 50px;
}
.empty-list-cta__pro-tip {
padding-bottom: 20px;
padding-bottom: 1rem;
}
.empty-list-cta__pro-tip-link {
margin-left: 5px;
}
margin-left: 5px;
}

10
public/sass/components/_infobox.scss
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 {
position: relative;
background: $info-box-background;

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

@@ -2,9 +2,7 @@
.navbar {
position: relative;
padding-left: $side-menu-width;
// box-shadow: $navbarShadow;
z-index: $zindex-navbar-fixed;
// background: $navbarBackground;
height: $navbarHeight;
padding-right: $spacer;
display: flex;