Skip to content

N
nexpie-grafana-theme
Commit 09cc60ff by Torkel Ödegaard
Options

ux: dashboard settings progress

parent 511fa7de
Showing with 74 additions and 78 deletions
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
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> { ...@@ -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
...@@ -11,7 +11,7 @@ export class SettingsCtrl { ...@@ -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
<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>
</div> <a ng-click="mode = 'new';" class="empty-list-cta__button btn btn-xlarge btn-success">
<table class="filter-table filter-table--hover"> <i class="gicon gicon-dashboard-new"></i>
<thead> Add variable
<tr> </a>
<th>Variable</th> <div class="grafana-info-box">
<th>Definition</th> <h5>
<th colspan="5"></th> What does variables do?
</tr> </h5>
</thead> <p>Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names
<tbody> in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
<tr ng-repeat="variable in variables"> the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
<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> Checkout the
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td> <a class="external-link" href="http://docs.grafana.org/reference/templating/" target="_blank">
<td style="width: 1%"> Templating documentation
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini"> </a> for more information.
Duplicate </div>
</a> </div>
</td> </div>
<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'"> <div ng-if="variables.length">
<div class="grafana-info-box col-lg-8"> <div class="page-action-bar">
<h5>What does templating do?</h5> <div class="page-action-bar__spacer"></div>
<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application <a type="button" class="btn btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i> New</a>
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 </div>
the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
<br>
<br>
Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information. <table class="filter-table filter-table--hover">
</p> <thead>
</div> <tr>
</div> <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>
<div class="gf-form" ng-show="mode === 'list'"> <td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<div class="gf-form-button-row"> <td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></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="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>
</div> </div>
......
public/sass/components/_empty_list_cta.scss
.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;
} }
\ No newline at end of file
public/sass/components/_infobox.scss
// .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,9 +2,7 @@ ...@@ -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;
......
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