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: new page-header design, most pages beside admin done

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-12-01 11:32:00 +01:00
parent 92d9093fca
commit 75bb894485
18 changed files with 58 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/api/dtos/index.go
View File

@ -31,5 +31,6 @@ type NavLink struct {
Target string `json:"target,omitempty"`
Divider bool `json:"divider,omitempty"`
HideFromMenu bool `json:"hideFromMenu,omitempty"`
HideFromTabs bool `json:"hideFromTabs,omitempty"`
Children []*NavLink `json:"children,omitempty"`
}

8
pkg/api/index.go
View File

@ -101,17 +101,19 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
}
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: "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{
Text: "Dashboards",
Id: "dashboards",
SubTitle: "Manage dashboards & folders",
Icon: "gicon gicon-dashboard",
Url: setting.AppSubUrl + "/",
Url: setting.AppSubUrl + "/dashboards",
Children: dashboardChildNavs,
})

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

@ -28,6 +28,10 @@ export interface IProps {
// }
function TabItem(tab: NavModelItem) {
if (tab.hideFromTabs || tab.divider) {
return (null);
}
let tabClasses = classNames({
'gf-tabs-link': true,
active: tab.active,

2
public/app/core/nav_model_srv.ts
View File

@ -9,6 +9,8 @@ export interface NavModelItem {
img?: string;
id: string;
active?: boolean;
hideFromTabs?: boolean;
divider?: boolean;
children: NavModelItem[];
}

5
public/app/features/alerting/notification_edit_ctrl.ts
View File

@ -9,7 +9,7 @@ export class AlertNotificationEditCtrl {
testSeverity = "critical";
notifiers: any;
notifierTemplateId: string;
isNew: boolean;
model: any;
defaults: any = {
type: 'email',
@ -23,7 +23,8 @@ export class AlertNotificationEditCtrl {
/** @ngInject */
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.notifiers = notifiers;

10
public/app/features/alerting/partials/notification_edit.html
View File

@ -1,9 +1,9 @@
<navbar model="ctrl.navModel"></navbar>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<div class="page-container page-body">
<h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Notification Channel</h3>
<h3 class="page-sub-heading" ng-show="ctrl.isNew">New Notification Channel</h3>
<form name="ctrl.theForm" ng-if="ctrl.notifiers">
<div class="gf-form-group">

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

@ -17,7 +17,7 @@ export class DashboardListCtrl {
/** @ngInject */
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.selectedStarredFilter = this.starredFilterOptions[0];

20
public/app/features/dashboard/partials/dashboardList.html
View File

@ -1,8 +1,12 @@
<navbar model="ctrl.navModel"></navbar>
<div class="page-container" style="height: 95%">
<div class="page-header">
<h1>Dashboards</h1>
<page-header model="ctrl.navModel"></page-header>
<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">
<i class="gicon gicon-dashboard-new"></i>
Dashboard
@ -12,14 +16,6 @@
Folder
</a>
</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">
Filters:

2
public/app/features/org/org_api_keys_ctrl.ts
View File

@ -4,7 +4,7 @@ export class OrgApiKeysCtrl {
/** @ngInject **/
constructor ($scope, $http, backendSrv, navModelSrv) {
$scope.navModel = navModelSrv.getNav('cfg', 'apikeys');
$scope.navModel = navModelSrv.getNav('cfg', 'apikeys', 0);
$scope.roleTypes = ['Viewer', 'Editor', 'Admin'];
$scope.token = { role: 'Viewer' };

12
public/app/features/org/partials/orgApiKeys.html
View File

@ -1,11 +1,9 @@
<navbar model="navModel"></navbar>
<page-header model="navModel"></page-header>
<div class="page-container">
<div class="page-header">
<page-h1 model="navModel"></page-h1>
</div>
<div class="page-container page-body">
<h3 class="section-heading">Add new</h3>
<h3 class="page-heading">Add new</h3>
<form name="addTokenForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-21">
@ -22,7 +20,7 @@
</div>
</form>
<h3 class="page-heading">Existing Keys</h3>
<h3 class="section-heading">Existing Keys</h3>
<table class="filter-table">
<thead>
<tr>

12
public/app/features/playlist/partials/playlist.html
View File

@ -1,9 +1,9 @@
<navbar model="ctrl.navModel"></navbar>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container" ng-form="playlistEditForm">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<div class="page-container page-body" ng-form="playlistEditForm">
<h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Playlist</h3>
<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>
@ -103,7 +103,7 @@
<div class="clearfix"></div>
<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-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create new playlist</a>
<a class="btn btn-success" ng-show="!ctrl.isNew()"

12
public/app/features/playlist/partials/playlists.html
View File

@ -1,15 +1,15 @@
<navbar model="ctrl.navModel"></navbar>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<a class="btn btn-primary pull-right" href="playlists/create">
<div class="page-container page-body">
<div class="page-action-bar">
<div class="page-action-bar__spacer"></div>
<a class="btn btn-success pull-right" href="playlists/create">
<i class="fa fa-plus"></i>
New Playlist
</a>
</div>
<table class="filter-table" style="margin-top: 20px">
<table class="filter-table">
<thead>
<th><strong>Name</strong></th>
<th><strong>Start url</strong></th>

12
public/app/features/playlist/playlist_edit_ctrl.ts
View File

@ -1,5 +1,3 @@
///<reference path="../../headers/common.d.ts" />
import _ from 'lodash';
import coreModule from '../../core/core_module';
@ -11,10 +9,12 @@ export class PlaylistEditCtrl {
playlist: any = {
interval: '5m',
};
playlistItems: any = [];
dashboardresult: any = [];
tagresult: any = [];
navModel: any;
isNew: boolean;
/** @ngInject */
constructor(
@ -24,7 +24,9 @@ export class PlaylistEditCtrl {
$route,
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) {
var playlistId = $route.current.params.id;
@ -104,10 +106,6 @@ export class PlaylistEditCtrl {
});
}
isNew() {
return !this.playlist.id;
}
isPlaylistEmpty() {
return !this.playlistItems.length;
}

2
public/app/features/playlist/playlists_ctrl.ts
View File

@ -9,7 +9,7 @@ export class PlaylistsCtrl {
/** @ngInject */
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 => {
this.playlists = result;

28
public/app/features/plugins/partials/ds_edit.html
View File

@ -1,31 +1,3 @@
<!-- <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>
<div class="page-container page-body">

10
public/app/features/snapshot/partials/snapshots.html
View File

@ -1,11 +1,7 @@
<navbar model="ctrl.navModel"></navbar>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<table class="filter-table" style="margin-top: 20px">
<div class="page-container page-body">
<table class="filter-table">
<thead>
<th><strong>Name</strong></th>
<th><strong>Snapshot url</strong></th>

2
public/app/features/snapshot/snapshot_ctrl.ts
View File

@ -9,7 +9,7 @@ export class SnapshotsCtrl {
/** @ngInject */
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.snapshots = result;
});

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

@ -51,7 +51,7 @@
}
&.gicon {
top: 7px;
top: 9px;
}
&.icon-gf {