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

feat(alerting): more work on alerting ui

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-06-11 23:31:49 +02:00
parent 1500c0e954
commit ec640bd5da
5 changed files with 49 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/panel/graph/graph.js
-1
View File
@@ -169,7 +169,6 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
var right = panel.yaxes[1];
if (left.show && left.label) { gridMargin.left = 20; }
if (right.show && right.label) { gridMargin.right = 20; }
}
// Function for rendering panel
public/app/plugins/panel/graph/jquery.flot.alerts.ts
+19 -3
View File
@@ -22,6 +22,17 @@ function getHandleTemplate(type, op, value) {
`;
}
var dragGhostElem = document.createElement('div');
function dragStartHandler(evt) {
evt.dataTransfer.setDragImage(dragGhostElem, -99999, -99999);
}
function dragEndHandler() {
console.log('drag end');
}
var past;
function drawAlertHandles(plot) {
var options = plot.getOptions();
@@ -36,7 +47,7 @@ function drawAlertHandles(plot) {
var height = plot.height();
function renderHandle(type, model) {
var $handle = $placeholder.find(`.alert-handle-${type}`);
var $handle = $placeholder.find(`.alert-handle-wrapper--${type}`);
if (!_.isNumber(model.level)) {
$handle.remove();
@@ -44,15 +55,19 @@ function drawAlertHandles(plot) {
}
if ($handle.length === 0) {
console.log('not found');
$handle = $(getHandleTemplate(type, model.op, model.level));
$handle.attr('draggable', true);
$handle.bind('dragend', dragEndHandler);
$handle.bind('dragstart', dragStartHandler);
$placeholder.append($handle);
console.log('registering drag events');
} else {
console.log('reusing!');
$handle.html(getHandleTemplate(type, model.op, model.level));
}
var levelCanvasPos = plot.p2c({x: 0, y: model.level});
console.log('canvas level pos', levelCanvasPos.top);
var levelTopPos = Math.min(Math.max(levelCanvasPos.top, 0), height) - 6;
$handle.css({top: levelTopPos});
}
@@ -62,6 +77,7 @@ function drawAlertHandles(plot) {
}
function shutdown() {
console.log('shutdown');
}
function init(plot, classes) {
public/app/plugins/panel/graph/partials/tab_alerting.html
+22 -22
View File
@@ -36,28 +36,28 @@
</div>
</div>
<div class="gf-form-group section">
<h5 class="section-heading">Levels</h5>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label">
<i class="icon-gf icon-gf-warn alert-icon-warn"></i>
Warn if
</span>
<metric-segment-model property="ctrl.alert.warn.op" options="ctrl.levelOpList" custom="false" css-class="query-segment-operator"></metric-segment-model>
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.warn.level" ng-change="ctrl.levelsUpdated()"></input>
</div>
<div class="gf-form">
<span class="gf-form-label">
<i class="icon-gf icon-gf-warn alert-icon-critical"></i>
Critcal if
</span>
<metric-segment-model property="ctrl.alert.critical.op" options="ctrl.levelOpList" custom="false" css-class="query-segment-operator"></metric-segment-model>
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.critical.level" ng-change="ctrl.levelsUpdated()"></input>
</div>
</div>
</div>
</div>
<!-- <div class="gf&#45;form&#45;group section"> -->
<!-- <h5 class="section&#45;heading">Levels</h5> -->
<!-- <div class="gf&#45;form&#45;inline"> -->
<!-- <div class="gf&#45;form"> -->
<!-- <span class="gf&#45;form&#45;label"> -->
<!-- <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;warn"></i> -->
<!-- Warn if -->
<!-- </span> -->
<!-- <metric&#45;segment&#45;model property="ctrl.alert.warn.op" options="ctrl.levelOpList" custom="false" css&#45;class="query&#45;segment&#45;operator"></metric&#45;segment&#45;model> -->
<!-- <input class="gf&#45;form&#45;input max&#45;width&#45;7" type="number" ng&#45;model="ctrl.alert.warn.level" ng&#45;change="ctrl.levelsUpdated()"></input> -->
<!-- </div> -->
<!-- <div class="gf&#45;form"> -->
<!-- <span class="gf&#45;form&#45;label"> -->
<!-- <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;critical"></i> -->
<!-- Critcal if -->
<!-- </span> -->
<!-- <metric&#45;segment&#45;model property="ctrl.alert.critical.op" options="ctrl.levelOpList" custom="false" css&#45;class="query&#45;segment&#45;operator"></metric&#45;segment&#45;model> -->
<!-- <input class="gf&#45;form&#45;input max&#45;width&#45;7" type="number" ng&#45;model="ctrl.alert.critical.level" ng&#45;change="ctrl.levelsUpdated()"></input> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="editor-row">
<div class="gf-form-group section">
public/sass/components/_panel_graph.scss
+7 -4
View File
@@ -317,9 +317,10 @@
.alert-handle-wrapper {
position: absolute;
user-select: none;
&--warn {
right: -221px;
right: -111px;
width: 238px;
.alert-handle-line {
@@ -334,7 +335,7 @@
}
&--critical {
right: -105px;
right: -54px;
width: 123px;
.alert-handle-line {
@@ -353,7 +354,7 @@
z-index: 10;
position: relative;
float: right;
padding: 0.4rem;;
padding: 0.4rem 0.6rem 0.4rem 0.4rem;
background-color: $btn-inverse-bg;
box-shadow: $search-shadow;
cursor: pointer;
@@ -364,11 +365,13 @@
border-width: 0 1px 1px 0;
border-style: solid;
border-color: $black;
text-align: right;
.icon-gf {
font-size: 17px;
position: relative;
top: 2px;
top: 0px;
float: left;
}
}
public/vendor/flot/jquery.flot.js
Vendored
+1 -1
View File
@@ -1322,7 +1322,7 @@ Licensed under the MIT license.
placeholder.css("padding", 0) // padding messes up the positioning
.children().filter(function(){
return !$(this).hasClass("flot-overlay") && !$(this).hasClass('flot-base');
return $(this).hasClass("flot-text");
}).remove();
if (placeholder.css("position") == 'static')