Skip to content

Commit 786afda

Browse files
torkelotorkelo
committed
ux(dashboard): edit mode fixes
1 parent 48a54ed commit 786afda

File tree

14 files changed

+161
-410
lines changed

14 files changed

+161
-410
lines changed

‎public/app/features/dashboard/all.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,6 @@ define([
2222
'./export/export_modal',
2323
'./dash_list_ctrl',
2424
'./ad_hoc_filters',
25-
'./row/row',
25+
'./row/row_ctrl',
26+
'./repeat_option/repeat_option',
2627
], function () {});

‎public/app/features/dashboard/dynamic_dashboard_srv.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import angular from 'angular';
55
import _ from 'lodash';
66

77
import coreModule from 'app/core/core_module';
8+
import {DashboardRow} from './row/row_model';
89

910
export class DynamicDashboardSrv {
1011
iteration: number;
@@ -45,7 +46,7 @@ export class DynamicDashboardSrv {
4546
}
4647
} else if (row.repeatRowId && row.repeatIteration !== this.iteration) {
4748
// clean up old left overs
48-
this.dashboard.rows.splice(i, 1);
49+
this.dashboard.removeRow(row, true);
4950
i = i - 1;
5051
continue;
5152
}
@@ -80,12 +81,14 @@ export class DynamicDashboardSrv {
8081
row = this.dashboard.rows[i];
8182
if (row.repeatRowId === sourceRowId && row.repeatIteration !== this.iteration) {
8283
copy = row;
84+
copy.copyPropertiesFromRowSource(sourceRow);
8385
break;
8486
}
8587
}
8688

8789
if (!copy) {
88-
copy = angular.copy(sourceRow);
90+
var modelCopy = angular.copy(sourceRow.getSaveModel());
91+
copy = new DashboardRow(modelCopy);
8992
this.dashboard.rows.splice(sourceRowIndex + repeatIndex, 0, copy);
9093

9194
// set new panel ids

‎public/app/features/dashboard/model.ts

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import moment from 'moment';
66
import _ from 'lodash';
77
import $ from 'jquery';
88

9-
import {Emitter, contextSrv} from 'app/core/core';
9+
import {Emitter, contextSrv, appEvents} from 'app/core/core';
1010
import {DashboardRow} from './row/row_model';
1111

1212
export class DashboardModel {
@@ -169,6 +169,27 @@ export class DashboardModel {
169169
row.addPanel(panel);
170170
}
171171

172+
removeRow(row, force?) {
173+
var index = _.indexOf(this.rows, row);
174+
175+
if (!row.panels.length || force) {
176+
this.rows.splice(index, 1);
177+
row.destroy();
178+
return;
179+
}
180+
181+
appEvents.emit('confirm-modal', {
182+
title: 'Delete',
183+
text: 'Are you sure you want to delete this row?',
184+
icon: 'fa-trash',
185+
yesText: 'Delete',
186+
onConfirm: () => {
187+
this.rows.splice(index, 1);
188+
row.destroy();
189+
}
190+
});
191+
}
192+
172193
toggleEditMode() {
173194
this.editMode = !this.editMode;
174195
this.updateSubmenuVisibility();
@@ -234,7 +255,7 @@ export class DashboardModel {
234255
destroy() {
235256
this.events.removeAllListeners();
236257
for (let row of this.rows) {
237-
row.events.removeAllListeners();
258+
row.destroy();
238259
}
239260
}
240261

‎public/app/features/dashboard/repeat_option/repeat_option.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
///<reference path="../../../headers/common.d.ts" />
2+
3+
import {coreModule} from 'app/core/core';
4+
5+
var template = `
6+
<div class="gf-form-select-wrapper max-width-13">
7+
<select class="gf-form-input" ng-model="model.repeat" ng-options="f.value as f.text for f in variables">
8+
<option value=""></option>
9+
</div>
10+
`;
11+
12+
coreModule.directive('dashRepeatOption', function(variableSrv) {
13+
return {
14+
restrict: 'E',
15+
template: template,
16+
scope: {
17+
model: "=",
18+
},
19+
link: function(scope, element) {
20+
element.css({display: 'block', width: '100%'});
21+
22+
scope.variables = variableSrv.variables.map(item => {
23+
return {text: item.name, value: item.name};
24+
});
25+
26+
if (scope.variables.length === 0) {
27+
scope.variables.unshift({text: 'No template variables found', value: null});
28+
}
29+
30+
scope.variables.unshift({text: 'Disabled', value: null});
31+
}
32+
};
33+
});
34+

‎public/app/features/dashboard/row/options.html

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<div class="dash-row-options">
22
<div class="gf-form section">
3-
<!-- <h5 class="section&#45;heading">Options</h5> -->
43
<div class="gf-form-inline">
54
<div class="gf-form">
65
<span class="gf-form-label width-6">Row Title</span>
@@ -24,15 +23,22 @@
2423
</div>
2524

2625
<div class="gf-form section">
27-
<!-- <h5 class="section&#45;heading">Row Templating</h5> -->
28-
2926
<div class="gf-form">
3027
<span class="gf-form-label">Repeat Row</span>
31-
<div class="gf-form-select-wrapper max-width-10">
32-
<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
33-
<option value=""></option>
34-
</div>
28+
<dash-repeat-option model="ctrl.row"></dash-repeat-option>
3529
</div>
3630
</div>
31+
32+
<div class="clearfix"></div>
33+
34+
<div class="pull-right">
35+
<button class="btn btn-danger btn-small" ng-click="ctrl.removeRow()">
36+
<i class="fa fa-trash"></i>
37+
Delete row
38+
</button>
39+
</div>
40+
41+
<div class="clearfix"></div>
42+
3743
</div>
3844

‎public/app/features/dashboard/row/options.ts

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import _ from 'lodash';
44

55
import config from 'app/core/config';
6-
import {coreModule, appEvents} from 'app/core/core';
6+
import {coreModule} from 'app/core/core';
77
// import VirtualScroll from 'virtual-scroll';
88
// console.log(VirtualScroll);
99

@@ -20,23 +20,9 @@ export class RowOptionsCtrl {
2020
this.row.titleSize = this.row.titleSize || 'h6';
2121
}
2222

23-
deleteRow() {
24-
if (!this.row.panels.length) {
25-
this.dashboard.rows = _.without(this.dashboard.rows, this.row);
26-
return;
27-
}
28-
29-
appEvents.emit('confirm-modal', {
30-
title: 'Delete',
31-
text: 'Are you sure you want to delete this row?',
32-
icon: 'fa-trash',
33-
yesText: 'Delete',
34-
onConfirm: () => {
35-
this.dashboard.rows = _.without(this.dashboard.rows, this.row);
36-
}
37-
});
23+
removeRow() {
24+
this.dashboard.removeRow(this.row);
3825
}
39-
4026
}
4127

4228
export function rowOptionsDirective() {

‎public/app/features/dashboard/row/row.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
66
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
77
</span>
8-
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title}}</span>
8+
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
99
</a>
1010

1111
<div class="dash-row-header-spacer">
@@ -22,10 +22,10 @@
2222
<i class="fa fa-cog" ng-hide="ctrl.dropView===2"></i>
2323
<i class="fa fa-remove" ng-show="ctrl.dropView===2"></i>
2424
</a>
25-
<a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row up'">
25+
<a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row up'" ng-click="ctrl.moveRow(-1)">
2626
<i class="fa fa-arrow-up"></i>
2727
</a>
28-
<a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row down'">
28+
<a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row down'" ng-click="ctrl.moveRow(1)">
2929
<i class="fa fa-arrow-down"></i>
3030
</a>
3131
</div>
@@ -47,7 +47,7 @@
4747
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
4848
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
4949
</span>
50-
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title}}</span>
50+
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
5151
</a>
5252
</div>
5353
</div>

0 commit comments

Comments
 (0)