Skip to content

Commit

Permalink
Various improvements to views
Browse files Browse the repository at this point in the history 
- Added formatting of numbers based on locale. For example, large numbers may be shown with thousands separators (much easier to read).
- Added time zone to places where times are displayed, so that users are not confused about what time they're looking at.
- Added help tooltip about the Check's target and from/until (from/until is not self-explanatory)
- Made all references to "Warn level" and "Error level" consistent (previously was different only in the edit modal)
  • Loading branch information
@rehevkor5
rehevkor5 committed Mar 27, 2017
1 parent 017a016 commit 61b18a5
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 30 deletions.
4 changes: 4 additions & 0 deletions seyren-web/src/main/webapp/css/override-bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,7 @@ body {
padding-right: 10px;
padding-left: 10px;
}

.glyphicon-blue {
color: #0000bf;
}
20 changes: 10 additions & 10 deletions seyren-web/src/main/webapp/html/check.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,15 @@ <h2><strong>Details</strong> <small>[<a class="" data-keyboard="true" data-toggl
</div>
</div>
<div class="form-group detail-form">
<label class="col-lg-2 control-label">Warn:</label>
<label class="col-lg-2 control-label">Warn level:</label>
<div class="col-lg-10">
<p class="form-control-static">{{check.warn}}</p>
<p class="form-control-static">{{check.warn | number}}</p>
</div>
</div>
<div class="form-group detail-form">
<label class="col-lg-2 control-label">Error:</label>
<label class="col-lg-2 control-label">Error level:</label>
<div class="col-lg-10">
<p class="form-control-static">{{check.error}}</p>
<p class="form-control-static">{{check.error | number}}</p>
</div>
</div>
<div class="form-group detail-form">
Expand All @@ -99,7 +99,7 @@ <h2><strong>Details</strong> <small>[<a class="" data-keyboard="true" data-toggl
<div class="form-group detail-form">
<label class="col-lg-2 control-label">Last check:</label>
<div class="col-lg-10">
<p class="form-control-static">{{check.lastCheck | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
<p class="form-control-static">{{check.lastCheck | date: 'yyyy-MM-dd HH:mm:ssZ'}}</p>
</div>
</div>
</form>
Expand Down Expand Up @@ -205,12 +205,12 @@ <h2>
</thead>
<tbody>
<tr ng-repeat="alert in alerts.values">
<td>{{ alert.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
<td>{{ alert.timestamp | date: 'yyyy-MM-dd HH:mm:ssZ' }}</td>
<td><span am-time-ago="alert.timestamp"></span></td>
<td>{{ alert.target }}</td>
<td>{{ alert.value }}</td>
<td>{{ alert.warn }}</td>
<td>{{ alert.error }}</td>
<td>{{ alert.value | number }}</td>
<td>{{ alert.warn | number }}</td>
<td>{{ alert.error | number }}</td>
<td>
<span ng-show="alert.fromType == 'UNKNOWN'" class="label label-default">{{ alert.fromType }}</span>
<span ng-show="alert.fromType == 'OK'" class="label label-success">{{ alert.fromType }}</span>
Expand All @@ -233,7 +233,7 @@ <h2>
<div class="row" ng-show="checkExists && check != null">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-danger btn-sm" data-keyboard="true" data-toggle="modal" data-show="true" id="deleteCheckButton" href="#confirmCheckDeleteModal">Delete check</button>
<button class="btn btn-danger" data-keyboard="true" data-toggle="modal" data-show="true" id="deleteCheckButton" href="#confirmCheckDeleteModal">Delete check</button>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions seyren-web/src/main/webapp/html/checks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ <h1><strong>Checks</strong></h1>
<tr>
<th><a href="" ng-click="predicate='name';reverse=!reverse">Name</a></th>
<th><a href="" ng-click="predicate=sortByState;reverse=!reverse">State</a></th>
<th><a href="" ng-click="predicate='warn';reverse=!reverse">Warn</a></th>
<th><a href="" ng-click="predicate='error';reverse=!reverse">Error</a></th>
<th><a href="" ng-click="predicate='warn';reverse=!reverse">Warn level</a></th>
<th><a href="" ng-click="predicate='error';reverse=!reverse">Error level</a></th>
<th><a href="" ng-click="predicate='enabled';reverse=!reverse">Enabled</a></th>
</tr>
</thead>
Expand All @@ -38,8 +38,8 @@ <h1><strong>Checks</strong></h1>
<span ng-show="check.state == 'ERROR'" class="label label-danger">{{ check.state }}</span>
<span ng-show="check.state == 'EXCEPTION'" class="label label-inverse">{{ check.state }}</span>
</td>
<td>{{ check.warn }}</td>
<td>{{ check.error }}</td>
<td>{{ check.warn | number }}</td>
<td>{{ check.error | number }}</td>
<td><input type="checkbox" ng-checked="check.enabled" ng-click="swapCheckEnabled(check); $event.stopPropagation();" /></td>
</tr>
</tbody>
Expand Down
36 changes: 20 additions & 16 deletions seyren-web/src/main/webapp/html/modal-partial-check.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,50 @@ <h3 class="modal-title" ng-hide="newCheck"><strong>Edit check</strong></h3>
<fieldset>
<div ng-class="{ 'form-group': true, 'has-error': checkForm['check.name'].$invalid }">
<label class="col-sm-3 control-label" for="check.name">Name</label>
<div class="col-sm-7">
<div class="col-sm-9">
<input id="check.name" class="form-control" name="check.name" ng-model="check.name" type="text" required />
</div>
</div>
<div ng-class="{ 'form-group': true, 'has-error': checkForm['check.description'].$invalid }">
<label class="col-sm-3 control-label" for="check.description">Description</label>
<div class="col-sm-7">
<input id="check.description" class="form-control" name="check.description" ng-model="check.description" type="text" />
<div class="col-sm-9">
<textarea id="check.description" class="form-control" name="check.description"
ng-model="check.description" type="text" ></textarea>
</div>
</div>
<div ng-class="{ 'form-group': true, 'has-error': checkForm['check.target'].$invalid }">
<label class="col-sm-3 control-label" for="check.target">Target</label>
<div class="col-sm-7">
<textarea id="check.target" class="form-control" name="check.target" ng-model="check.target" type="text" required />
<label class="col-sm-3 control-label" for="check.target">Target <sup><span
id="check.target.hint" class="glyphicon glyphicon-question-sign glyphicon-blue"></span></sup></label>
<div class="col-sm-9">
<textarea id="check.target" class="form-control" name="check.target" ng-model="check.target"
type="text" required></textarea>
</div>
</div>
<div ng-class="{ 'form-group': true, 'has-error': checkForm['check.from'].$invalid }">
<label class="col-sm-3 control-label" for="check.from">From</label>
<div class="col-sm-7">
<label class="col-sm-3 control-label" for="check.from">From <sup><span
id="check.from.hint" class="glyphicon glyphicon-question-sign glyphicon-blue"
style="cursor: pointer;"
></span></sup></label>
<div class="col-sm-9">
<input id="check.from" class="form-control" name="check.from" ng-model="check.from" type="text" />
</div>
</div>
<div ng-class="{ 'form-group': true, 'has-error': checkForm['check.until'].$invalid }">
<label class="col-sm-3 control-label" for="check.until">Until</label>
<div class="col-sm-7">
<div class="col-sm-9">
<input id="check.until" class="form-control" name="check.until" ng-model="check.until" type="text" />
</div>
</div>
<div ng-class="{ 'form-group': true, 'has-error': checkForm['check.warn'].$invalid }">
<label class="col-sm-3 control-label" for="check.warn">Warn level</label>
<div class="col-sm-3">
<label class="col-sm-3 control-label" for="check.warn">Warn level <sup><span
id="check.warn.hint" class="glyphicon glyphicon-question-sign glyphicon-blue"></span></sup></label>
<div class="col-sm-9">
<input id="check.warn" class="form-control" name="check.warn" ng-model="check.warn" type="text" ng-pattern="/^-?[0-9]+(.[0-9]+)?$/" required />
</div>
<div class="col-sm-4">
<span id="check.warn.hint" class="glyphicon glyphicon-question-sign"></span>
</div>
</div>
<div ng-class="{ 'form-group': true, 'has-error': checkForm['check.error'].$invalid }">
<label class="col-sm-3 control-label" for="check.error">Error level</label>
<div class="col-sm-3">
<div class="col-sm-9">
<input id="check.error" class="form-control" name="check.error" ng-model="check.error" type="text" ng-pattern="/^-?[0-9]+(.[0-9]+)?$/" required />
</div>
</div>
Expand Down Expand Up @@ -78,7 +82,7 @@ <h3 class="modal-title" ng-hide="newCheck"><strong>Edit check</strong></h3>
</div>
</div>
<div class="form-group">
<div class="col-sm-7 col-sm-offset-3">
<div class="col-sm-9 col-sm-offset-3">
<img ng-src="{{ check.previewImage }}" src="./img/preview-nodata.png" width="300" height="70" />
Metrics found: {{ check.totalMetric }}
</div>
Expand Down
13 changes: 13 additions & 0 deletions seyren-web/src/main/webapp/js/check-edit-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,23 @@

$('#editCheckModal').on('shown.bs.modal', function () {
$('#check\\.name').focus();
$('#check\\.target\\.hint').tooltip({
placement: 'right',
title: 'The target parameter specifies a path identifying one or several metrics, optionally with functions acting on those metrics.'
});
$('#check\\.warn\\.hint').tooltip({
placement: 'right',
title: 'Setting your warn level higher than your error level will result in Seyren generating alerts when the target value goes below the threshold.'
});
$('#check\\.from\\.hint').tooltip({
placement: 'right',
html: true,
title: '"From" and "To" are optional parameters that specify the relative or absolute time period to' +
' retrieve from the server. See ' +
'<a href="http://graphite.readthedocs.io/en/latest/render_api.html#from-until">the Graphite' +
' documentation</a>. Only the most recent value of each series returned will be used.',
trigger: 'click'
});
});

$scope.create = function () {
Expand Down

0 comments on commit 61b18a5

Please sign in to comment.