diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/css/module.less | 285 | ||||
| -rw-r--r-- | public/js/module.js | 97 |
2 files changed, 382 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less new file mode 100644 index 0000000..9c86a8f --- /dev/null +++ b/public/css/module.less @@ -0,0 +1,285 @@ +@color-priority-emergency: #ff2200; +@color-priority-emergency-fg: white; +@color-priority-alert: #ff4400; +@color-priority-alert-fg: white; +@color-priority-critical: #ff6600; +@color-priority-critical-fg: white; +@color-priority-error: #ff8800; +@color-priority-error-fg: white; +@color-priority-warning: #ffaa44; // same as @color-warning +@color-priority-warning-fg: #6d572b; +@color-priority-notice: #44bb77; // same as @color-ok; +@color-priority-notice-fg: white; +@color-priority-information: #aaaaff; +@color-priority-information-fg: #32486d; +@color-priority-debug: #ccc; +@color-priority-debug-fg: #333; + +h2 { + margin-top: 1em; +} + +.events-table, .event-summary-table { + border-collapse: separate; + border-spacing: 0 1px; + padding: 0; +} + +.ack-col { + color: @icinga-blue; +} + +.priority-col { + width: 8em; + border-left: 5px solid; + white-space: nowrap; + text-align: center; + margin-right: 1em; + padding: 0.33em 1em; + + &.emergency { + border-left-color: @color-priority-emergency; + background-color: @color-priority-emergency; + color: @color-priority-emergency-fg; + + &.ack { + color: inherit; + background-color: inherit; + } + } + + &.critical { + border-left-color: @color-priority-critical; + background-color: @color-priority-critical; + color: @color-priority-critical-fg; + + &.ack { + color: inherit; + background-color: inherit; + } + } + + &.alert { + border-left-color: @color-priority-alert; + background-color: @color-priority-alert; + color: @color-priority-alert-fg; + + &.ack { + color: inherit; + background-color: inherit; + } + } + + &.error { + border-left-color: @color-priority-error; + background-color: @color-priority-error; + color: @color-priority-error-fg; + + &.ack { + color: inherit; + background-color: inherit; + } + } + + &.warning { + border-left-color: @color-priority-warning; + background-color: @color-priority-warning; + color: @color-priority-warning-fg; + + &.ack { + color: inherit; + background-color: inherit; + } + } + + &.notice { + border-left-color: @color-priority-notice; + } + + &.information, &.info { + border-left-color: @color-priority-information; + } + + &.debug { + border-left-color: @color-priority-debug; + } +} + +.comment-link { + .button-link(); + + margin-top: 0.5em; +} + +.quick-filter-controls { + margin-top: 0.5em; + text-align: center; +} + +.ack-filter-form { + margin-left: 0.5em; +} + +.severity-filter-form { + .control-label-group { + display: none; + } + + .control-group { + display: inline-block; + padding: 0; + } + + .active { + font-weight: bold; + } + + .emergency.active { + background-color: @color-priority-emergency; + border-color: @color-priority-emergency; + color: @color-priority-emergency-fg; + } + + .alert.active { + background-color: @color-priority-alert; + border-color: @color-priority-alert; + color: @color-priority-alert-fg; + } + + .critical.active { + background-color: @color-priority-critical; + border-color: @color-priority-critical; + color: @color-priority-critical-fg; + } + + .error.active { + background-color: @color-priority-error; + border-color: @color-priority-error; + color: @color-priority-error-fg; + } + + .warning.active { + background-color: @color-priority-warning; + border-color: @color-priority-warning; + color: @color-priority-warning-fg; + } + + .notice.active { + background-color: @color-priority-notice; + border-color: @color-priority-notice; + color: @color-priority-notice-fg; + } + + .information.active, .info.active { + background-color: @color-priority-information; + border-color: @color-priority-information; + color: @color-priority-information-fg; + } + + .debug.active { + background-color: @color-priority-debug; + border-color: @color-priority-debug; + color: @color-priority-debug-fg; + } +} + +.events-table, .event-summary-table { + .event-message { + max-width: 60em; + font-family: @font-family-fixed; + } +} + +.event-message { + &.detail { + font-size: 1.2em; + border-left: 5px solid #eee; + padding: 0.66em 0.33em; + } + + a { + font-weight: bold; + } +} + +.event-summary-table { + .event-host_address { + font-family: @font-family-fixed; + font-size: 0.9em; + color: @gray; + } +} + +a.action-link { + color: @icinga-blue !important; + margin-right: 1em; +} + +.name-value-table { + th { + width: 8em; + } +} + +.comments-table { + width: auto; + + tr { + border-bottom: none; + } + + td { + padding: 0.5em 0.5em; + } + + .comment-created { + white-space: nowrap; + } + .comment-type { + max-width: 2em; + } + .comment-message { + min-width: 30em; + font-family: @font-family-fixed; + } +} + +.comment-form { + select { + width: auto; + } + + input[name=comment] { + width: 25em; + } + + input[type=submit] { + padding: 0.2em 0.5em; + } +} + +div.warning { + display: inline-block; + font-size: 1.2em; + font-weight: bold; + border: 1px solid @color-priority-warning; + border-left: 5px solid @color-priority-warning; + margin: 0.5em 0; + padding: 0.3em 0.5em; +} + +.copyable-actions { + margin-bottom: 0.5em; +} + +input[type=submit].disabled, +button.disabled { + border-color: @gray-light !important; + background-color: white !important; + color: @gray-light !important; + + &:hover { + background: @gray-light !important; + color: white; + } +} diff --git a/public/js/module.js b/public/js/module.js new file mode 100644 index 0000000..0678421 --- /dev/null +++ b/public/js/module.js @@ -0,0 +1,97 @@ +/*! Icinga Web 2 | (c) 2016 Icinga Development Team | GPLv2+ */ + +;(function(Icinga) { + + var EventDB = function(module) { + this.module = module; + this.initialize(); + }; + + EventDB.prototype = { + initialize: function() { + this.module.on('rendered', this.enableCopyable); + this.module.on('submit', 'form.severity-filter-form', this.severitySubmit); + + var addCSSRule = function(sheet, selector, rules, index) { + if('insertRule' in sheet) { + sheet.insertRule(selector + '{' + rules + '}', index); + } else if('addRule' in sheet) { + sheet.addRule(selector, rules, index); + } else { + this.module.icinga.logger.debug('Can\'t insert CSS rule'); + } + }; + + var sheet = (function() { + var style = document.createElement('style'); + // WebKit hack + style.appendChild(document.createTextNode('')); + document.head.appendChild(style); + return style.sheet; + })(); + + addCSSRule( + sheet, + '#layout.twocols.wide-layout #col1.module-eventdb, #layout.twocols.wide-layout #col1.module-eventdb ~ #col2', + 'width: 50%', + 0 + ); + }, + enableCopyable: function() { + var e = this; + $('.copyable').each(function() { + var $button = $('<a>') + .attr('href', '#') + .addClass('action-link icon icon-globe copyable-button') + .text('Copy text'); + + $button.on('click', function() { + var $el = $(this).parent().siblings('.copyable'); + if ($el) { + e.selectText($el[0]); + document.execCommand('copy'); + setTimeout(function () { + e.clearSelection() + }, 500); + if (icinga) { + icinga.loader.createNotice('info', 'Text copied to clipboard') + } + } + }); + + var $div = $('<div>').addClass('copyable-actions').append($button); + + $(this).before($div); + }); + }, + selectText: function (text) { + var doc = document, range, selection; + if (doc.body.createTextRange) { + range = document.body.createTextRange(); + range.moveToElementText(text); + range.select(); + } else if (window.getSelection) { + selection = window.getSelection(); + range = document.createRange(); + range.selectNodeContents(text); + selection.removeAllRanges(); + selection.addRange(range); + } + }, + clearSelection: function() { + if (document.selection) { + document.selection.empty(); + } else if (window.getSelection) { + window.getSelection().removeAllRanges(); + } + }, + severitySubmit: function(ev) { + $(ev.currentTarget) + .find('input[type=submit]') + .prop('disabled', true) + .addClass('disabled'); + } + }; + + Icinga.availableModules.eventdb = EventDB; +}(Icinga)); |