Commit c426a987 authored by colemanw's avatar colemanw

CRM-13823 - Use popup menu for snooze options

parent cf500087
/* Add any CSS rules for Angular module "statuspage" */
/* CSS rules for Angular module "statuspage" */
#crm-status-list h3 {
color: white;
opacity: .85;
}
#crm-status-list h3:hover,
#crm-status-list h3.menuopen {
opacity: 1;
}
/* Error Severity */
#crm-status-list .crm-severity-emergency,
......@@ -6,65 +16,51 @@
#crm-status-list .crm-severity-critical,
#crm-status-list .crm-severity-error{
background-color: #E43D2B;
color: white;
}
#crm-status-list .crm-severity-emergency:hover,
#crm-status-list .crm-severity-alert:hover,
#crm-status-list .crm-severity-critical:hover,
#crm-status-list .crm-severity-error:hover {
background-color: #DD0000;
color: white;
}
/* Warning Severity */
#crm-status-list .crm-severity-warning
{
background-color: #EDA737;
color: white;
}
#crm-status-list .crm-severity-warning:hover
{
background-color: #F09E1A;
color: white;
#crm-status-list .crm-severity-warning {
background-color: #eba12d;
}
/* Not Okay - Not Warning */
#crm-status-list .crm-severity-notice
{
background-color: #4A88DF;
color: white;
}
#crm-status-list .crm-severity-notice :hover
{
background-color: #41477E;
color: white;
#crm-status-list .crm-severity-notice {
background-color: #4d90eb;
}
/* All OK Severity */
#crm-status-list .crm-severity-info,
#crm-status-list .crm-severity-debug {
background-color: #00994D;
color: white;
}
#crm-status-list .crm-status-message-body {
margin: 1em 0;
}
#crm-status-list .crm-severity-info:hover,
#crm-status-list .crm-severity-debug:hover {
background-color: #006633;
color: white;
#crm-status-list .hush-menu > div {
position: relative;
width: 20em; /* determines max-width of popup menu */
font-size: .8em;
}
/* over-riding divs for snooze-options so that inline-block looks better */
#crm-status-list .hush-menu button {
float: right;
cursor: pointer;
}
#crm-status-list .hush-menu ul {
position: absolute;
top: 1.5em;
right: 0;
width: auto;
margin: 0;
padding: 0;
}
.crm-container .status-snooze-options .crm-section .content,
.crm-container .status-snooze-options .crm-section .label {
margin-left: inherit;
text-align: inherit;
float: inherit;
width: inherit;
display: inline-block;
#crm-status-list .hush-menu li {
padding: 0.2em 0.5em;
background-color: rgba(255, 255, 255, 0.9);
z-index: 99999;
font-weight: normal;
}
<span ng-form="snoozeOptions" crm-ui-id-scope style="display: inline">
<span crm-ui-field="{name: 'snoozeOptions.until', title: ts('Snooze until')}" style="display: inline" >
<input name="until" crm-ui-datepicker ng-model="status.snoozeOptions.until" style="display: inline" />
<a crm-icon="fa-floppy-o" ng-click="snooze(status)" class="crm-hover-button" title="{{ts('Save Preference')}}"></a>
<span>
</span>
<!-- snooze options page, creates a box for picking a date you would like to snooze a status alert until -->
<div ng-if="!status.is_visible">
<button ng-click="setPref(status, '', 1)" type="button" >{{ts('Unhide')}}</button>
</div>
<div ng-if="status.is_visible && status.severity_id >= 3">
<button type="button" class="hush-menu-button">{{ts('Hide')}}</button>
<ul style="display:none;">
<li ng-click="setPref(status, 'now + 1 week', 0)">{{ts('Remind me again in a week')}}</li>
<li ng-click="setPref(status, 'now + 1 month', 0)">{{ts('Remind me again in a month')}}</li>
<li ng-click="setPref(status, '', 0)">{{ts('Never remind me again')}}</li>
</ul>
</div>
......@@ -4,46 +4,34 @@
<form name="crm-system-status" crm-ui-id-scope>
<div>
<h1>Status Page</h1>
<h1>{{ts('Status Messages')}}</h1>
</div>
<div crm-ui-tab-set>
<div
ng-repeat="tab in [{is_visible: 1, name: 'visible', icon: 'fa-bell'}, {is_visible: 0, name: 'hidden', icon: 'fa-bell-slash-o'}]"
ng-repeat="tab in [{is_visible: 1, icon: 'fa-bell'}, {is_visible: 0, icon: 'fa-bell-slash-o'}]"
crm-ui-tab
id="tab-{{tab.name}}"
id="tab-status-visible-{{tab.is_visible}}"
count="{{_.where(statuses, {is_visible: tab.is_visible}).length}}"
crm-title="tab.is_visible ? ts('Active') : ts('Hushed/Snoozed')"
crm-title="tab.is_visible ? ts('Active') : ts('Hidden')"
crm-icon="{{tab.icon}}"
>
<div id="crm-status-list" ng-repeat="status in statuses | filter:{is_visible: tab.is_visible}" >
<h3 class="crm-severity-{{status.severity}}">
<i ng-if="status.icon" class="crm-i {{status.icon}}"></i>
{{status.title}}
<span class="status-snooze-options" ng-show="status.snoozeOptions.show" style="display: inline-block">
<div crm-snooze-options style="display: inline"></div>
</span>
<a ng-if="status.is_visible" ng-click="showSnoozeOptions(status)" ng-show="!status.snoozeOptions.show" class="crm-hover-button" crm-icon="fa-clock-o" title="{{ts('Snooze')}}"></a>
<a ng-click="showSnoozeOptions(status)" ng-show="status.snoozeOptions.show" class="crm-hover-button" crm-icon="fa-times" style="display: inline" title="{{ts('Close')}}"></a>
<a ng-if="status.is_visible" ng-click="hush(status)" class="crm-hover-button" crm-icon="fa-bell-slash-o" title="{{ts('Hush')}}"></a>
<a ng-if="!status.is_visible" ng-click="unhush(status)" class="crm-hover-button" crm-icon="fa-bell-o" title="{{ts('Unhush And Unsnooze')}}"></a>
<div statuspage-popup-menu class="hush-menu css_right"></div>
</h3>
<h4>
<div class="crm-block">
<div class="crm-group">
<div class="crm-status-message-body">
<span ng-bind-html="status.message | trusted"></span>
<a
ng-if="status.help"
class="helpicon"
ng-click="alert(status.help, status.title, 'info');"
href="javascript:void(0)"
>
</a>
</div>
</div>
</div>
</h4><br/>
<div class="crm-block crm-status-message-body">
<span ng-bind-html="status.message | trusted"></span>
<a
ng-if="status.help"
class="helpicon"
ng-click="alert(status.help, status.title, 'info');"
href="javascript:void(0)"
>
</a>
</div>
</div>
</div>
......
......@@ -11,52 +11,19 @@
_.each($scope.statuses, function(status) {
status.severity_id = status.severity;
status.severity = statuspageSeverityList[status.severity];
status.snoozeOptions = {
show: false,
severity: status.severity
};
});
// will "hush" a status - gets the severity level of the status that is being hushed, and hushes all alerts for that check at and below the level of the current check
$scope.hush = function(status) {
// updates a status preference
$scope.setPref = function(status, until, visible) {
crmApi('StatusPreference', 'create', {
"name": status.name,
"ignore_severity": status.severity,
"hush_until": ""
"ignore_severity": visible ? 0 : status.severity,
"hush_until": until
}, true)
.then(function() {
status.is_visible = 0;
status.is_visible = visible;
});
};
// will reset ignore_severity to 0 to unhush the status alert.
$scope.unhush = function(status) {
crmApi('StatusPreference', 'create', {
"name": status.name,
"ignore_severity": 0,
"hush_until": ""
}, true)
.then(function() {
status.is_visible = 1;
});
};
// will 'snooze' a status - will not show alerts at that level for that check + alerts below that level for that check until the specified date
$scope.snooze = function(status) {
$scope.showSnoozeOptions(status);
crmApi('StatusPreference', 'create', {
"name": status.name,
"ignore_severity": status.snoozeOptions.severity,
"hush_until": status.snoozeOptions.until
}, true)
.then(function() {
status.is_visible = 0;
});
};
$scope.showSnoozeOptions = function(status) {
status.snoozeOptions.show = !status.snoozeOptions.show;
};
});
})(angular, CRM.$, CRM._);
(function(angular, $, _) {
angular.module('statuspage').filter('trusted', function($sce){ return $sce.trustAsHtml; });
angular.module('statuspage')
.filter('trusted', function($sce){ return $sce.trustAsHtml; })
angular.module('statuspage').service('statuspageSeverityList', function() {
return ['debug', 'info', 'notice', 'warning', 'error', 'critical', 'alert', 'emergency'];
});
.service('statuspageSeverityList', function() {
return ['debug', 'info', 'notice', 'warning', 'error', 'critical', 'alert', 'emergency'];
})
// Todo: abstract this into a generic crmUi directive?
.directive('statuspagePopupMenu', function($timeout) {
return {
templateUrl: '~/statuspage/SnoozeOptions.html',
transclude: true,
link: function(scope, element, attr) {
element.on('click', '.hush-menu-button', function() {
$timeout(function() {
$('ul', element).show().menu();
element.closest('h3').addClass('menuopen');
$('body').one('click', function() {
$('ul', element).menu('destroy').hide();
element.closest('h3').removeClass('menuopen');
});
});
});
}
};
});
})(angular, CRM.$, CRM._);
// creates a directive for the snooze options page
(function(angular, $, _) {
angular.module('statuspage').directive('crmSnoozeOptions', function(statuspageSeverityList) {
return {
templateUrl: '~/statuspage/SnoozeOptions.html',
transclude: true,
link: function(scope, element, attr) {
scope.severityList = statuspageSeverityList;
}
};
});
})(angular, CRM.$, CRM._);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment