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 stuff

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-08-17 18:50:46 +02:00
parent 637ff61f90
commit 7ed2ed71f0
11 changed files with 61 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/directives/dash_edit_link.js
View File

@@ -13,6 +13,7 @@ function ($, angular, coreModule, _) {
'templating': { src: 'public/app/features/templating/partials/editor.html'},
'history': { html: '<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>'},
'timepicker': { src: 'public/app/features/dashboard/timepicker/dropdown.html' },
'add-panel': { html: '<add-panel></add-panel>' },
'import': { html: '<dash-import dismiss="dismiss()"></dash-import>', isModal: true },
'permissions': { html: '<dash-acl-modal dismiss="dismiss()"></dash-acl-modal>', isModal: true },
'new-folder': {

6
public/app/features/dashboard/dashnav/dashnav.html
View File

@@ -69,6 +69,11 @@
</li>
</ul>
</li>
<li class="navbar-mini-btn-wrapper">
<button class="btn btn-secondary btn-mini" ng-click="ctrl.openEditView('add-panel')">
<i class="fa fa-plus-circle"></i> Add Panel
</button>
</li>
</ul>
<ul class="nav pull-right">
@@ -82,6 +87,7 @@
</li>
</ul>
</div>
</div>
<dashboard-search></dashboard-search>

23
public/app/features/dashboard/row/add_panel.html
View File

@@ -1,15 +1,17 @@
<div class="dash-row-dropview">
<a class="dash-row-dropview-close pointer" ng-click="ctrl.rowCtrl.closeDropView();">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
Add Panel
</h2>
<input type="text" class="gf-form-input max-width-14 pull-left" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
<button class="tabbed-view-close-btn" ng-click="ctrl.dismiss();">
<i class="fa fa-remove"></i>
</a>
</button>
</div>
<div class="gf-form-inline dash-row-add-panel-form">
<div class="gf-form">
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
</div>
</div>
<div class="add-panel-panels-scroll">
<div class="tabbed-view-body tabbed-view-body--small">
<div class="add-panel-panels-scroll">
<div class="add-panel-panels">
<div class="add-panel-item"
ng-repeat="panel in ctrl.panelHits"
@@ -23,5 +25,4 @@
</div>
</div>
</div>
</div>

37
public/app/features/dashboard/row/add_panel.ts
View File

@@ -6,18 +6,15 @@ import config from 'app/core/config';
import {coreModule, appEvents} from 'app/core/core';
export class AddPanelCtrl {
row: any;
dashboard: any;
rowCtrl: any;
allPanels: any;
panelHits: any;
activeIndex: any;
panelSearch: any;
/** @ngInject */
constructor(private $scope, private $timeout, private $rootScope) {
this.row = this.rowCtrl.row;
this.dashboard = this.rowCtrl.dashboard;
constructor(private $scope, private $timeout, private $rootScope, dashboardSrv) {
this.dashboard = dashboardSrv.getCurrent();
this.activeIndex = 0;
this.allPanels = _.chain(config.panels)
@@ -29,9 +26,13 @@ export class AddPanelCtrl {
this.panelHits = this.allPanels;
}
dismiss() {
this.$rootScope.appEvent('hide-dash-editor');
}
keyDown(evt) {
if (evt.keyCode === 27) {
this.rowCtrl.dropView = 0;
//this.rowCtrl.dropView = 0;
return;
}
@@ -78,24 +79,6 @@ export class AddPanelCtrl {
}
addPanel(panelPluginInfo) {
var defaultSpan = 6;
var span = 12 - this.row.span;
var panel = {
id: null,
title: config.new_panel_title,
span: span < defaultSpan && span > 0 ? span : defaultSpan,
type: panelPluginInfo.id,
};
this.rowCtrl.closeDropView();
this.dashboard.addPanel(panel, this.row);
this.$timeout(() => {
this.$rootScope.$broadcast('render');
//this.$rootScope.appEvent('panel-change-view', {
// fullscreen: true, edit: true, panelId: panel.id
//});
});
}
}
@@ -106,10 +89,8 @@ export function addPanelDirective() {
controller: AddPanelCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {
rowCtrl: "=",
},
scope: {},
};
}
coreModule.directive('dashRowAddPanel', addPanelDirective);
coreModule.directive('addPanel', addPanelDirective);

18
public/app/features/dashboard/row/row.html
View File

@@ -1,12 +1,12 @@
<div class="dash-row-header">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<span class="dash-row-collapse-toggle pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
</span>
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
</a>
</div>
<!-- <div class="dash&#45;row&#45;header"> -->
<!-- <a class="dash&#45;row&#45;header&#45;title" ng&#45;click="ctrl.toggleCollapse()"> -->
<!-- <span class="dash&#45;row&#45;collapse&#45;toggle pointer"> -->
<!-- <i class="fa fa&#45;chevron&#45;down" ng&#45;show="!ctrl.row.collapse"></i> -->
<!-- <i class="fa fa&#45;chevron&#45;right" ng&#45;show="ctrl.row.collapse"></i> -->
<!-- </span> -->
<!-- <span ng&#45;class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span> -->
<!-- </a> -->
<!-- </div> -->
<dash-grid ng-if="!ctrl.row.collapse" row="ctrl.row" dashboard="ctrl.dashboard"></dash-grid>

10
public/app/partials/dashboard.html
View File

@@ -3,8 +3,8 @@
<div class="scroll-canvas scroll-canvas--dashboard">
<div gemini-scrollbar>
<div dash-editor-view class="dash-edit-view"></div>
<div class="dashboard-container">
<div dash-editor-view class="dash-edit-view"></div>
<div class="clearfix"></div>
<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
@@ -13,14 +13,6 @@
<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
</dash-row>
<div ng-show='dashboard.meta.canEdit && !dashboard.meta.fullscreen' class="add-row-panel-hint">
<div class="span12" style="text-align:left;">
<span style="margin-left: 12px;" ng-click="addRowDefault()" class="pointer btn btn-inverse btn-small">
<span><i class="fa fa-plus"></i> ADD ROW</span>
</span>
</div>
</div>
</div>
</div>
</div>

2
public/sass/_variables.dark.scss
View File

@@ -62,7 +62,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
$page-gradient: linear-gradient(180deg, rgb(36, 36, 36) 40px, rgba(178, 31, 31, 0.03) 100px, rgba(253, 187, 45, 0.03));
// Links
// -------------------------

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

@@ -4,13 +4,14 @@
overflow: visible;
position: relative;
margin-left: $side-menu-width;
box-shadow: 0 0 20px black;
z-index: 1;
}
.navbar-inner {
min-height: $navbarHeight;
padding-right: $spacer;
background-color: $navbarBackground;
border-bottom: $navbarBorder;
@include clearfix();
}
@@ -111,3 +112,7 @@
position: relative;
float: left;
}
.navbar-mini-btn-wrapper {
padding: 15px;
}

8
public/sass/components/_tabbed_view.scss
View File

@@ -1,8 +1,5 @@
.tabbed-view {
background-color: $page-bg;
background-image: $page-gradient;
margin: (-$panel-margin*2) (-$panel-margin);
margin-bottom: $spacer*2;
padding: $spacer*3;
&.tabbed-view--panel-edit {
@@ -49,6 +46,11 @@
.tabbed-view-body {
padding: $spacer*2 $spacer;
min-height: 250px;
&--small {
min-height: 0px;
padding-bottom: 0px;
}
}
.section-heading {

4
public/sass/layout/_page.scss
View File

@@ -11,9 +11,7 @@
.main-view {
position: relative;
flex-grow: 1;
$gradient-opacity: 0.03;
background: linear-gradient(135deg, rgba(26, 42, 108, $gradient-opacity), rgba(178, 31, 31, $gradient-opacity), rgba(253, 187, 45, $gradient-opacity)); //Matt experiement
background: $page-gradient;
}
.page-container {

14
public/sass/pages/_dashboard.scss
View File

@@ -1,14 +1,13 @@
.dashboard-container {
padding: $dashboard-padding;
width: 100%;
background: $page-gradient;
}
.template-variable {
color: $variable;
}
div.flot-text {
color: $text-color !important;
}
@@ -172,8 +171,6 @@ div.flot-text {
}
.panel-full-edit {
margin-top: 20px;
margin-bottom: 20px;
}
.panel-highlight {
@@ -260,3 +257,12 @@ div.flot-text {
transition: opacity 200ms ease-in-out;
}
}
.dashboard-nav-shadow {
box-shadow: 0 0 20px black;
height: 10px;
position: absolute;
width: 100%;
z-index: 1;
top: -10px;
}