| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <!DOCTYPE html> |
| <html lang="en" class="no-js"> |
| <head> |
| <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" /> |
| <meta http-equiv="cache-control" content="max-age=0" /> |
| <meta http-equiv="pragma" content="no-cache" /> |
| <meta http-equiv="expires" content="0" /> |
| <meta charset="UTF-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Chukwa</title> |
| <link rel="shortcut icon" href="../favicon.ico"> |
| <link rel="stylesheet" type="text/css" href="css/normalize.css" /> |
| <!-- link rel="stylesheet" type="text/css" href="css/jquery.gridster.css" / --> |
| <link rel="stylesheet" type="text/css" href="css/gridstack.min.css" /> |
| <link rel="stylesheet" type="text/css" href="css/component.css" /> |
| <script src="js/modernizr.custom.js"></script> |
| <script src="js/jquery.js" type="text/javascript"></script> |
| <script src="js/throttle.js" type="text/javascript"></script> |
| <script src="js/jquery-ui.js"></script> |
| <script src="js/lodash.min.js" type="text/javascript"></script> |
| <script src="js/gridstack.min.js" type="text/javascript"></script> |
| <script src="js/typeahead.bundle.js" type="text/javascript"></script> |
| </head> |
| <body> |
| <div id="glass" class="glass" onclick="toggleGlass()"></div> |
| <div class="frame"> |
| <ul><li><iframe id="frame"></iframe></li></ul> |
| </div> |
| |
| <div class="container"> |
| <ul id="gn-menu" class="gn-menu-main"> |
| <li class="gn-trigger"> |
| <a class="gn-icon gn-icon-menu"><span>Menu</span></a> |
| <nav class="gn-menu-wrapper"> |
| <div class="gn-scroller"> |
| <ul class="gn-menu"> |
| <li class="gn-search-item"> |
| <input placeholder="Search" id="url" type="search" class="gn-search"> |
| <a class="gn-icon gn-icon-search"><span>Search</span></a> |
| </li> |
| <li><a class="gn-icon gn-icon-home" onclick="setDashboard('default')">Home</a></li> |
| <li><a class="gn-icon gn-icon-illustrator" onclick="setDashboard('user')">User Activities</a></li> |
| <li><a class="gn-icon gn-icon-article" onclick="setDashboard('system')">System Activities</a></li> |
| <li><a class="gn-icon gn-icon-pictures" onclick="showFrame('graph-explorer.html')">Graph Explorer</a></li> |
| <li><a class="gn-icon gn-icon-cog" onclick="showFrame('settings')">Settings</a></li> |
| <li><a class="gn-icon gn-icon-help" onclick="showFrame('help')">Help</a></li> |
| </ul> |
| </div><!-- /gn-scroller --> |
| </nav> |
| </li> |
| <li><a href="index.html">Chukwa</a></li> |
| <li> |
| <div class="toggle-btn-grp"> |
| <div><input type="radio" name="period" value="last1hr" onclick="setTime()" /><label class="toggle-btn">H</label></div> |
| <div><input type="radio" name="period" value="last24hr" onclick="setTime()" /><label class="toggle-btn">D</label></div> |
| <div><input type="radio" name="period" value="last30d" onclick="setTime()" /><label class="toggle-btn">M</label></div> |
| <div><input type="radio" name="period" value="lastyear" onclick="setTime()" /><label class="toggle-btn">Y</label></div> |
| </div> |
| </li> |
| <li><span id="username"></span></li> |
| <li><a class="gn-icon-poweroff" onclick="logout()"><span> </span></a></li> |
| <li><a class="gn-icon-fullscreen" onclick="toggleFullScreen()"><span> </span></a></li> |
| </ul> |
| </div><!-- /container --> |
| |
| <div class="grid-stack"></div> |
| |
| <script src="js/classie.js"></script> |
| <script src="js/gnmenu.js"></script> |
| <script> |
| window.onunload = function(){}; |
| var dashboard = 'default'; |
| var widgets = []; |
| var widgetsToUrl = {}; |
| var grid_data = []; |
| |
| var substringMatcher = function(strs) { |
| return function findMatches(q, cb) { |
| var matches, substrRegex; |
| |
| // an array that will be populated with substring matches |
| matches = []; |
| |
| // regex used to determine if a string contains the substring `q` |
| substrRegex = new RegExp(q, 'i'); |
| |
| // iterate through the pool of strings and for any string that |
| // contains the substring `q`, add it to the `matches` array |
| $.each(strs, function(i, str) { |
| if (substrRegex.test(str)) { |
| // the typeahead jQuery plugin expects suggestions to a |
| // JavaScript object, refer to typeahead docs for more info |
| matches.push({ value: str }); |
| } |
| }); |
| |
| cb(matches); |
| }; |
| }; |
| |
| function toggleFullScreen() { |
| var element = document.documentElement; |
| if(document.fullscreenElement || |
| document.webkitFullscreenElement || |
| document.mozFullScreenElement || |
| document.msFullscreenElement) { |
| if(document.exitFullscreen) { |
| document.exitFullscreen(); |
| } else if(document.mozCancelFullScreen) { |
| document.mozCancelFullScreen(); |
| } else if(document.webkitExitFullscreen) { |
| document.webkitExitFullscreen(); |
| } |
| } else { |
| if(element.requestFullscreen) { |
| element.requestFullscreen(); |
| } else if(element.mozRequestFullScreen) { |
| element.mozRequestFullScreen(); |
| } else if(element.webkitRequestFullscreen) { |
| element.webkitRequestFullscreen(); |
| } else if(element.msRequestFullscreen) { |
| element.msRequestFullscreen(); |
| } |
| } |
| } |
| |
| function toggleGlass() { |
| $('#glass').toggle(); |
| } |
| |
| function buildWidget(src) { |
| var html = '<div class="grid-stack-item-content">' + |
| '<div class="widget-header">' + |
| '<span class="gs-icon gs-close-handle" onClick="remove_widget(this);"></span>' + |
| '<span class="gs-icon gs-zoom-handle" onClick="zoom_widget(this);"></span>' + |
| '</div>' + |
| '<iframe src="'+src+'"></iframe>' + |
| '<div class="overlay_fix" style="display: none"></div></div>'; |
| return html |
| } |
| |
| function remove_widget(target) { |
| el = $(target).closest('.grid-stack-item') |
| var gridstack = $(".grid-stack").data('gridstack'); |
| gridstack.removeWidget(el); |
| save(); |
| } |
| |
| function zoom_widget(button) { |
| var url = $(button).parent().parent().find('iframe').contents().get(0).location.href; |
| window.location.href = url; |
| } |
| |
| // Load dashboard |
| function load() { |
| $.getJSON('/hicc/v1/dashboard/load/'+dashboard, |
| function(data) { |
| grid_data = data.grid; |
| |
| var options = { |
| cellHeight: 110, |
| verticalMargin: 10, |
| handle: '.widget-header' |
| }; |
| $('.grid-stack').gridstack(options); |
| var gridstack = $(".grid-stack").data('gridstack'); |
| gridstack.removeAll(); |
| |
| $('.grid-stack').on('dragstart', function(event, ui) { |
| var grid = this; |
| var element = event.target; |
| $('.overlay_fix').show(); |
| }); |
| $('.grid-stack').on('dragstop', function(event, ui) { |
| var grid = this; |
| var element = event.target; |
| $('.overlay_fix').hide(); |
| }); |
| $('.grid-stack').on('resizestart', function(event, ui) { |
| var grid = this; |
| var element = event.target; |
| $('.overlay_fix').show(); |
| }); |
| $('.grid-stack').on('resizestop', function(event, ui) { |
| var grid = this; |
| var element = event.target; |
| $('.overlay_fix').hide(); |
| }); |
| $.each(grid_data, function() { |
| var gridstack = $(".grid-stack").data('gridstack'); |
| gridstack.addWidget(buildWidget(this.src), this.col, this.row, this.size_x, this.size_y); |
| |
| }); |
| } |
| ); |
| |
| // Update searchable widget list |
| $.getJSON('/hicc/v1/widget/list', |
| function(data) { |
| widgets.length = 0; |
| widgetsToUrl.length = 0; |
| $.each( data, function( i, kv ) { |
| widgets.push(kv.title); |
| widgetsToUrl[kv.title] = kv.src; |
| }); |
| |
| $('#url').typeahead({ |
| hint: true, |
| highlight: true, |
| minLength: 1 |
| }, |
| { |
| name: 'widgets', |
| displayKey: 'value', |
| source: substringMatcher(widgets) |
| }); |
| } |
| ); |
| } |
| |
| // Save Dashboard |
| function save() { |
| var items = []; |
| $('.grid-stack-item.ui-draggable').each(function () { |
| var $this = $(this); |
| var iframe = $this.find('iframe')[0]; |
| items.push({ |
| col: parseInt($this.attr('data-gs-x')), |
| row: parseInt($this.attr('data-gs-y')), |
| size_x: parseInt($this.attr('data-gs-width')), |
| size_y: parseInt($this.attr('data-gs-height')), |
| src: iframe.src, |
| }); |
| }); |
| |
| var data = { "grid" : items }; |
| $.ajax({ |
| url: '/hicc/v1/dashboard/save/'+dashboard, |
| type: 'PUT', |
| contentType: 'application/json', |
| data: JSON.stringify(data), |
| }); |
| } |
| |
| function setDashboard(value) { |
| dashboard = value; |
| var data = { dashboard : value }; |
| $.ajax({ |
| url: '/hicc/v1/session/save', |
| type: 'PUT', |
| contentType: 'application/json', |
| data: JSON.stringify(data) |
| }); |
| load(); |
| showGrid(); |
| } |
| |
| function showGrid() { |
| $(".frame").hide(); |
| $(".grid-stack").show(); |
| } |
| |
| function showFrame(target) { |
| $("#frame").attr("src", target); |
| $(".frame").show(); |
| $(".grid-stack").hide(); |
| gnMenu._closeMenu(); |
| } |
| |
| // Read a page's GET URL variables and return them as an associative array. |
| function getUrlVars() |
| { |
| var vars = [], hash; |
| var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); |
| for(var i = 0; i < hashes.length; i++) |
| { |
| hash = hashes[i].split('='); |
| vars.push(hash[0]); |
| vars[hash[0]] = hash[1]; |
| } |
| return vars; |
| } |
| |
| var gnMenu = new gnMenu( document.getElementById( 'gn-menu' ) ); |
| $(function(){ //DOM Ready |
| if(getUrlVars()['view']!=null) { |
| dashboard = getUrlVars()['view']; |
| } |
| $.getJSON('/hicc/v1/session/key/period', |
| function(data) { |
| var value = (data['period'] == null) ? "last1hr" : data['period']; |
| $("input[name=period][value=" + value + "]").attr('checked', 'checked'); |
| } |
| ); |
| |
| $( "#url" ).keydown(function( event ) { |
| if ( event.which == 13 ) { |
| event.preventDefault(); |
| var title = $('#url').val(); |
| if(title in widgetsToUrl) { |
| var url = widgetsToUrl[title]; |
| var gridstack = $(".grid-stack").data('gridstack'); |
| gridstack.addWidget(buildWidget(url), 0, 0, 1, 1); |
| } |
| } |
| }); |
| |
| $.ajax({ |
| url: '/hicc/v1/dashboard/whoami', |
| cache: false |
| }).done(function( html ) { |
| $('#username').append(html); |
| }).fail(function() { |
| window.location = "/hicc/v1/login/check"; |
| }); |
| |
| $.getJSON('/hicc/v1/session/key/dashboard', |
| function(data) { |
| var value = (data['dashboard'] != null) ? data['dashboard'] : "default"; |
| dashboard = value; |
| load(); |
| } |
| ); |
| |
| $('.grid-stack').on('change', throttle(function(event, ui) { |
| save(); |
| }, 250)); |
| |
| }); |
| |
| function setTime() { |
| var data = {}; |
| data['period'] = $('input[name=period]:checked').val(); |
| $.ajax({ |
| url: '/hicc/v1/session/save', |
| type: 'PUT', |
| contentType: 'application/json', |
| data: JSON.stringify(data) |
| }); |
| } |
| |
| function logout() { |
| $.ajax({ |
| url: '/hicc/logout', |
| success: function(data) { |
| document.cookie = 'JSESSIONID=;path=/hicc;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; |
| window.location.assign("/hicc/v1/login/check"); |
| } |
| }); |
| } |
| </script> |
| </body> |
| </html> |
