public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress on rows as panelsW

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-08-18 16:33:36 +02:00
parent a0bb58867a
commit da9c8c814f
5 changed files with 128 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/components/row_ctrl.ts
+79
View File
@@ -0,0 +1,79 @@
///<reference path="../../headers/common.d.ts" />
import _ from 'lodash';
export class DashboardRowCtrl {
static template = `
<a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
<span class="dashboard-row__title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
</a>
<a class="dashboard-row__settings pointer">
<i class="fa fa-cog"></i>
</a>
<div class="dashboard-row__drag panel-drag-handle" ng-if="ctrl.isCollapsed">
</div>
`;
dashboard: any;
panel: any;
isCollapsed: boolean;
constructor(private $rootScope) {
console.log(this);
this.panel.hiddenPanels = this.panel.hiddenPanels || [];
this.isCollapsed = this.panel.hiddenPanels.length > 0;
}
toggle() {
if (this.isCollapsed) {
let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
for (let child of this.panel.hiddenPanels) {
this.dashboard.panels.splice(panelIndex+1, 0, child);
child.y = this.panel.y+1;
console.log('restoring child', child);
}
this.panel.hiddenPanels = [];
this.isCollapsed = false;
return;
}
this.isCollapsed = true;
let foundRow = false;
for (let i = 0; i < this.dashboard.panels.length; i++) {
let panel = this.dashboard.panels[i];
if (panel === this.panel) {
console.log('found row');
foundRow = true;
continue;
}
if (!foundRow) {
continue;
}
if (panel.type === 'row') {
break;
}
this.panel.hiddenPanels.push(panel);
console.log('hiding child', panel.id);
}
for (let hiddenPanel of this.panel.hiddenPanels) {
this.dashboard.removePanel(hiddenPanel, false);
}
}
link(scope, elem) {
elem.addClass('dashboard-row');
scope.$watch('ctrl.isCollapsed', () => {
elem.toggleClass('dashboard-row--collapse', this.isCollapsed);
});
}
}
public/app/core/directives/plugin_component.ts
+3 -58
View File
@@ -6,62 +6,7 @@ import _ from 'lodash';
import config from 'app/core/config';
import coreModule from 'app/core/core_module';
import {UnknownPanelCtrl} from 'app/plugins/panel/unknown/module';
export class PanelRow {
static template = `
<h2 class="panel-header">Row</h2>
<a ng-click="ctrl.collapse()">Collapse</a>
`;
dashboard: any;
panel: any;
constructor(private $rootScope) {
console.log(this);
this.panel.hiddenPanels = this.panel.hiddenPanels || [];
}
collapse() {
if (this.panel.hiddenPanels.length > 0) {
let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
for (let child of this.panel.hiddenPanels) {
this.dashboard.panels.splice(panelIndex+1, 0, child);
child.y = this.panel.y+1;
console.log('restoring child', child);
}
this.panel.hiddenPanels = [];
return;
}
let foundRow = false;
for (let i = 0; i < this.dashboard.panels.length; i++) {
let panel = this.dashboard.panels[i];
if (panel === this.panel) {
console.log('found row');
foundRow = true;
continue;
}
if (!foundRow) {
continue;
}
if (panel.type === 'row') {
break;
}
this.panel.hiddenPanels.push(panel);
console.log('hiding child', panel.id);
}
for (let hiddenPanel of this.panel.hiddenPanels) {
this.dashboard.removePanel(hiddenPanel, false);
}
}
}
import {DashboardRowCtrl} from '../components/row_ctrl';
/** @ngInject **/
function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache) {
@@ -113,10 +58,10 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
function loadPanelComponentInfo(scope, attrs) {
if (scope.panel.type === 'row') {
return $q.when({
name: 'panel-row',
name: 'dashboard-row',
bindings: {dashboard: "=", panel: "="},
attrs: {dashboard: "ctrl.dashboard", panel: "panel"},
Component: PanelRow,
Component: DashboardRowCtrl,
});
}
public/app/features/dashboard/model.ts
+1 -1
View File
@@ -20,7 +20,7 @@ export interface Panel {
title: string;
}
export const CELL_HEIGHT = 60;
export const CELL_HEIGHT = 30;
export const CELL_VMARGIN = 15;
export class DashboardModel {
public/app/features/dashboard/row/row.html
+10 -13
View File
@@ -1,14 +1,11 @@
<!-- <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&#45;grid ng&#45;if="!ctrl.row.collapse" row="ctrl.row" dashboard="ctrl.dashboard"></dash&#45;grid> -->
<!-- -->
<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>
<h2>Row</h2>
public/sass/components/_row.scss
+35 -32
View File
@@ -1,52 +1,55 @@
.dash-row {
display: block;
.dashboard-row {
display: flex;
flex-direction: column;
position: relative;
height: 30px;
align-items: center;
&--collapse {
.dash-row-header {
background: $panel-bg;
border: $panel-border;
margin-bottom: $panel-margin*2;
background: $panel-bg;
border: $panel-border;
margin-bottom: $panel-margin*2;
}
&:hover {
background: $panel-bg;
.dashboard-row__chevron {
color: $link-color;
}
.dashboard-row__settings {
display: block;
}
}
}
.dash-row-header {
.dashboard-row__title {
position: relative;
flex-grow: 1;
display: flex;
flex-direction: row;
margin-right: $panel-margin;
margin-left: 0;
.h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem; font-weight: 300; }
.h2 { font-size: 2.4rem; line-height: 3.5rem; font-weight: 300; }
.h3 { font-size: 2.0rem; line-height: 3rem; font-weight: 300;}
.h4 { font-size: 1.7rem; font-weight: 300;}
.h5 { font-size: 1.4rem; font-weight: 300;}
.h6 { font-size: 1rem; font-weight: 300; }
font-size: $font-size-lg;
font-weight: $font-weight-semi-bold;
//text-align: center;
display: block;
}
.dash-row-header-title {
padding: 0.6rem;
flex-grow: 1;
.dashboard-row__chevron {
padding: 0 2px;
font-size: $font-size-xs;
color: $text-muted;
position: relative;
left: -3px;
top: -1px;
}
.dash-row-collapse-toggle {
padding: 0 2px;
font-size: $font-size-xs;
color: $text-muted;
position: relative;
left: -3px;
top: -1px;
}
.dashboard-row__settings {
display: none;
}
&:hover {
.dash-row-collapse-toggle {
color: $link-color;
}
}
.dashboard-row__title-text {
padding-left: 0.6rem;
color: $text-color;
}
.panels-wrapper {