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 {
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">
......
public/app/features/dashboard/settings/settings.ts
......@@ -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"},
......
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-if="mode === 'list'">
<div ng-if="variables.length === 0">
<em>No template variables defined</em>
<br /> <br />
</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>
<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.
<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>
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 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>
<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>
Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
</p>
</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>
<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>
......
public/sass/components/_empty_list_cta.scss
.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;
}
\ No newline at end of file
margin-left: 5px;
}
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 {
position: relative;
background: $info-box-background;
......
public/sass/components/_navbar.scss
......@@ -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;
......
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