Skip to content

N
nexpie-grafana-theme
Commit 75bb8944 by Torkel Ödegaard
Options

ux: new page-header design, most pages beside admin done

parent 92d9093f
Showing with 58 additions and 88 deletions
pkg/api/dtos/index.go
...@@ -31,5 +31,6 @@ type NavLink struct { ...@@ -31,5 +31,6 @@ type NavLink struct {
Target string `json:"target,omitempty"` Target string `json:"target,omitempty"`
Divider bool `json:"divider,omitempty"` Divider bool `json:"divider,omitempty"`
HideFromMenu bool `json:"hideFromMenu,omitempty"` HideFromMenu bool `json:"hideFromMenu,omitempty"`
HideFromTabs bool `json:"hideFromTabs,omitempty"`
Children []*NavLink `json:"children,omitempty"` Children []*NavLink `json:"children,omitempty"`
} }
pkg/api/index.go
...@@ -101,17 +101,19 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -101,17 +101,19 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
} }
dashboardChildNavs := []*dtos.NavLink{ dashboardChildNavs := []*dtos.NavLink{
{Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home"}, {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home", HideFromTabs: true},
{Divider: true},
{Text: "Manage", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-sitemap"},
{Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"}, {Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"},
{Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"}, {Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"},
{Text: "Dashboard List", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-bars"},
} }
data.NavTree = append(data.NavTree, &dtos.NavLink{ data.NavTree = append(data.NavTree, &dtos.NavLink{
Text: "Dashboards", Text: "Dashboards",
Id: "dashboards", Id: "dashboards",
SubTitle: "Manage dashboards & folders",
Icon: "gicon gicon-dashboard", Icon: "gicon gicon-dashboard",
Url: setting.AppSubUrl + "/", Url: setting.AppSubUrl + "/dashboards",
Children: dashboardChildNavs, Children: dashboardChildNavs,
}) })
......
public/app/core/components/PageHeader.tsx
...@@ -28,6 +28,10 @@ export interface IProps { ...@@ -28,6 +28,10 @@ export interface IProps {
// } // }
function TabItem(tab: NavModelItem) { function TabItem(tab: NavModelItem) {
if (tab.hideFromTabs || tab.divider) {
return (null);
}
let tabClasses = classNames({ let tabClasses = classNames({
'gf-tabs-link': true, 'gf-tabs-link': true,
active: tab.active, active: tab.active,
......
public/app/core/nav_model_srv.ts
...@@ -9,6 +9,8 @@ export interface NavModelItem { ...@@ -9,6 +9,8 @@ export interface NavModelItem {
img?: string; img?: string;
id: string; id: string;
active?: boolean; active?: boolean;
hideFromTabs?: boolean;
divider?: boolean;
children: NavModelItem[]; children: NavModelItem[];
} }
......
public/app/features/alerting/notification_edit_ctrl.ts
...@@ -9,7 +9,7 @@ export class AlertNotificationEditCtrl { ...@@ -9,7 +9,7 @@ export class AlertNotificationEditCtrl {
testSeverity = "critical"; testSeverity = "critical";
notifiers: any; notifiers: any;
notifierTemplateId: string; notifierTemplateId: string;
isNew: boolean;
model: any; model: any;
defaults: any = { defaults: any = {
type: 'email', type: 'email',
...@@ -23,7 +23,8 @@ export class AlertNotificationEditCtrl { ...@@ -23,7 +23,8 @@ export class AlertNotificationEditCtrl {
/** @ngInject */ /** @ngInject */
constructor(private $routeParams, private backendSrv, private $location, private $templateCache, navModelSrv) { constructor(private $routeParams, private backendSrv, private $location, private $templateCache, navModelSrv) {
this.navModel = navModelSrv.getNav('alerting', 'channels'); this.navModel = navModelSrv.getNav('alerting', 'channels', 0);
this.isNew = !this.$routeParams.id;
this.backendSrv.get(`/api/alert-notifiers`).then(notifiers => { this.backendSrv.get(`/api/alert-notifiers`).then(notifiers => {
this.notifiers = notifiers; this.notifiers = notifiers;
......
public/app/features/alerting/partials/notification_edit.html
<navbar model="ctrl.navModel"></navbar> <page-header model="ctrl.navModel"></page-header>
<div class="page-container"> <div class="page-container page-body">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Notification Channel</h3>
</div> <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Notification Channel</h3>
<form name="ctrl.theForm" ng-if="ctrl.notifiers"> <form name="ctrl.theForm" ng-if="ctrl.notifiers">
<div class="gf-form-group"> <div class="gf-form-group">
......
public/app/features/dashboard/dashboard_list_ctrl.ts
...@@ -17,7 +17,7 @@ export class DashboardListCtrl { ...@@ -17,7 +17,7 @@ export class DashboardListCtrl {
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) { constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) {
this.navModel = navModelSrv.getNav('dashboards', 'dashboards'); this.navModel = navModelSrv.getNav('dashboards', 'dashboards', 0);
this.query = {query: '', mode: 'tree', tag: [], starred: false}; this.query = {query: '', mode: 'tree', tag: [], starred: false};
this.selectedStarredFilter = this.starredFilterOptions[0]; this.selectedStarredFilter = this.starredFilterOptions[0];
......
public/app/features/dashboard/partials/dashboardList.html
<navbar model="ctrl.navModel"></navbar> <page-header model="ctrl.navModel"></page-header>
<div class="page-container" style="height: 95%">
<div class="page-header">
<h1>Dashboards</h1>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="gf-form width-15">
<label class="gf-form-label">Search</label>
<input type="text" class="gf-form-input" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
</div>
<div class="page-action-bar__spacer"></div>
<a class="btn btn-inverse" href="/dashboard/new"> <a class="btn btn-inverse" href="/dashboard/new">
<i class="gicon gicon-dashboard-new"></i> <i class="gicon gicon-dashboard-new"></i>
Dashboard Dashboard
...@@ -12,14 +16,6 @@ ...@@ -12,14 +16,6 @@
Folder Folder
</a> </a>
</div> </div>
<div class="gf-form-group">
<div class="gf-form width-15">
<span style="position: relative;">
<input type="text" class="gf-form-input" placeholder="Find Dashboard by name" tabindex="1" give-focus="true"
ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
</span>
</div>
</div>
<div class="gf-form" ng-if="ctrl.query.tag.length"> <div class="gf-form" ng-if="ctrl.query.tag.length">
Filters: Filters:
......
public/app/features/org/org_api_keys_ctrl.ts
...@@ -4,7 +4,7 @@ export class OrgApiKeysCtrl { ...@@ -4,7 +4,7 @@ export class OrgApiKeysCtrl {
/** @ngInject **/ /** @ngInject **/
constructor ($scope, $http, backendSrv, navModelSrv) { constructor ($scope, $http, backendSrv, navModelSrv) {
$scope.navModel = navModelSrv.getNav('cfg', 'apikeys'); $scope.navModel = navModelSrv.getNav('cfg', 'apikeys', 0);
$scope.roleTypes = ['Viewer', 'Editor', 'Admin']; $scope.roleTypes = ['Viewer', 'Editor', 'Admin'];
$scope.token = { role: 'Viewer' }; $scope.token = { role: 'Viewer' };
......
public/app/features/org/partials/orgApiKeys.html
<navbar model="navModel"></navbar> <page-header model="navModel"></page-header>
<div class="page-container"> <div class="page-container page-body">
<div class="page-header">
<page-h1 model="navModel"></page-h1> <h3 class="section-heading">Add new</h3>
</div>
<h3 class="page-heading">Add new</h3>
<form name="addTokenForm" class="gf-form-group"> <form name="addTokenForm" class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-21"> <div class="gf-form max-width-21">
...@@ -22,7 +20,7 @@ ...@@ -22,7 +20,7 @@
</div> </div>
</form> </form>
<h3 class="page-heading">Existing Keys</h3> <h3 class="section-heading">Existing Keys</h3>
<table class="filter-table"> <table class="filter-table">
<thead> <thead>
<tr> <tr>
......
public/app/features/playlist/partials/playlist.html
<navbar model="ctrl.navModel"></navbar> <page-header model="ctrl.navModel"></page-header>
<div class="page-container" ng-form="playlistEditForm"> <div class="page-container page-body" ng-form="playlistEditForm">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Playlist</h3>
</div> <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Playlist</h3>
<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p> <p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<a class="btn btn-success " ng-show="ctrl.isNew()" <a class="btn btn-success " ng-show="ctrl.isNew"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create new playlist</a> ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create new playlist</a>
<a class="btn btn-success" ng-show="!ctrl.isNew()" <a class="btn btn-success" ng-show="!ctrl.isNew()"
......
public/app/features/playlist/partials/playlists.html
<navbar model="ctrl.navModel"></navbar> <page-header model="ctrl.navModel"></page-header>
<div class="page-container"> <div class="page-container page-body">
<div class="page-header"> <div class="page-action-bar">
<page-h1 model="ctrl.navModel"></page-h1> <div class="page-action-bar__spacer"></div>
<a class="btn btn-primary pull-right" href="playlists/create"> <a class="btn btn-success pull-right" href="playlists/create">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
New Playlist New Playlist
</a> </a>
</div> </div>
<table class="filter-table" style="margin-top: 20px"> <table class="filter-table">
<thead> <thead>
<th><strong>Name</strong></th> <th><strong>Name</strong></th>
<th><strong>Start url</strong></th> <th><strong>Start url</strong></th>
......
public/app/features/playlist/playlist_edit_ctrl.ts
///<reference path="../../headers/common.d.ts" />
import _ from 'lodash'; import _ from 'lodash';
import coreModule from '../../core/core_module'; import coreModule from '../../core/core_module';
...@@ -11,10 +9,12 @@ export class PlaylistEditCtrl { ...@@ -11,10 +9,12 @@ export class PlaylistEditCtrl {
playlist: any = { playlist: any = {
interval: '5m', interval: '5m',
}; };
playlistItems: any = []; playlistItems: any = [];
dashboardresult: any = []; dashboardresult: any = [];
tagresult: any = []; tagresult: any = [];
navModel: any; navModel: any;
isNew: boolean;
/** @ngInject */ /** @ngInject */
constructor( constructor(
...@@ -24,7 +24,9 @@ export class PlaylistEditCtrl { ...@@ -24,7 +24,9 @@ export class PlaylistEditCtrl {
$route, $route,
navModelSrv navModelSrv
) { ) {
this.navModel = navModelSrv.getNav('dashboards', 'playlists');
this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
this.isNew = $route.current.params.id;
if ($route.current.params.id) { if ($route.current.params.id) {
var playlistId = $route.current.params.id; var playlistId = $route.current.params.id;
...@@ -104,10 +106,6 @@ export class PlaylistEditCtrl { ...@@ -104,10 +106,6 @@ export class PlaylistEditCtrl {
}); });
} }
isNew() {
return !this.playlist.id;
}
isPlaylistEmpty() { isPlaylistEmpty() {
return !this.playlistItems.length; return !this.playlistItems.length;
} }
......
public/app/features/playlist/playlists_ctrl.ts
...@@ -9,7 +9,7 @@ export class PlaylistsCtrl { ...@@ -9,7 +9,7 @@ export class PlaylistsCtrl {
/** @ngInject */ /** @ngInject */
constructor(private $scope, private backendSrv, navModelSrv) { constructor(private $scope, private backendSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('dashboards', 'playlists'); this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
backendSrv.get('/api/playlists').then(result => { backendSrv.get('/api/playlists').then(result => {
this.playlists = result; this.playlists = result;
......
public/app/features/plugins/partials/ds_edit.html
<!-- <div class="page&#45;header&#45;canvas"> -->
<!-- <div class="page&#45;container"> -->
<!-- <navbar model="ctrl.navModel"></navbar> -->
<!-- -->
<!-- <div class="page&#45;header"> -->
<!-- <page&#45;h1 model="ctrl.navModel"></page&#45;h1> -->
<!-- -->
<!-- <div class="page&#45;header&#45;tabs" ng&#45;show="ctrl.hasDashboards"> -->
<!-- <ul class="gf&#45;tabs"> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = 0" ng&#45;class="{active: ctrl.tabIndex === 0}"> -->
<!-- <i class="fa fa&#45;sliders"></i> -->
<!-- Config -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = 1" ng&#45;class="{active: ctrl.tabIndex === 1}"> -->
<!-- <i class="fa fa&#45;th&#45;large"></i> -->
<!-- Dashboards -->
<!-- </a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- -->
<page-header model="ctrl.navModel"></page-header> <page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body"> <div class="page-container page-body">
......
public/app/features/snapshot/partials/snapshots.html
<navbar model="ctrl.navModel"></navbar> <page-header model="ctrl.navModel"></page-header>
<div class="page-container"> <div class="page-container page-body">
<div class="page-header"> <table class="filter-table">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<table class="filter-table" style="margin-top: 20px">
<thead> <thead>
<th><strong>Name</strong></th> <th><strong>Name</strong></th>
<th><strong>Snapshot url</strong></th> <th><strong>Snapshot url</strong></th>
......
public/app/features/snapshot/snapshot_ctrl.ts
...@@ -9,7 +9,7 @@ export class SnapshotsCtrl { ...@@ -9,7 +9,7 @@ export class SnapshotsCtrl {
/** @ngInject */ /** @ngInject */
constructor(private $rootScope, private backendSrv, navModelSrv) { constructor(private $rootScope, private backendSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('dashboards', 'snapshots'); this.navModel = navModelSrv.getNav('dashboards', 'snapshots', 0);
this.backendSrv.get('/api/dashboard/snapshots').then(result => { this.backendSrv.get('/api/dashboard/snapshots').then(result => {
this.snapshots = result; this.snapshots = result;
}); });
......
public/sass/components/_page_header.scss
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
} }
&.gicon { &.gicon {
top: 7px; top: 9px;
} }
&.icon-gf { &.icon-gf {
......
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